From eb0ec95ad7fc90ceef43540025cbd71990a1c0c6 Mon Sep 17 00:00:00 2001
From: wangqz <2809755637@qq.com>
Date: Mon, 28 Oct 2024 18:00:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=A1=A8=E6=A0=BC=E5=88=97?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  21 +
 src/components/ActionIcon/src/ActionIcon.vue  |   2 -
 src/components/AppLogo/src/AppLogo.vue        |   2 +-
 src/components/PageWrapper/index.ts           |   4 +-
 .../PageWrapper/src/PageWrapper.vue           |  38 +-
 .../SearchDialog/src/SearchDialog.vue         | 441 ++++-----
 src/layouts/header/components/Breadcrumb.vue  |   2 +-
 src/layouts/index.vue                         |  17 +-
 src/layouts/tabs/index.vue                    | 127 ++-
 src/main.ts                                   |   2 +-
 .../components/AssistantSidebarActionBar.vue  |   2 +-
 .../components/ChatHistoryItem.vue            |   2 +-
 src/pages/chat copy/index.vue                 |   3 -
 .../components/AssistantSidebarActionBar.vue  |   2 +-
 .../components/ChatHistoryItem.vue            |   2 +-
 src/pages/chat/index.vue                      |   6 +-
 src/pages/components/echarts/index.vue        |   6 +-
 src/pages/components/form/complex/index.vue   |  76 +-
 src/pages/components/form/simple/data.ts      |  45 +-
 src/pages/components/form/simple/index.vue    |   6 +-
 .../components/headless-table/basic/index.vue |   9 +-
 .../headless-table/pagination/index.vue       | 169 ++--
 src/pages/components/list/basic/index.vue     | 130 ++-
 src/pages/components/list/card/index.vue      |  28 +-
 src/pages/components/menu/index.vue           |  30 +-
 src/pages/components/report/r01/index.vue     | 175 ++--
 src/pages/components/report/r02/index.vue     |  76 +-
 src/pages/dashboard/index.vue                 |  42 +-
 src/pages/design/palette/index.vue            |  19 +-
 src/pages/design/typography/index.vue         | 871 +++++++++---------
 src/pages/directives/copy/index.vue           |   3 -
 src/pages/directives/ripple/index.vue         |  42 +-
 src/pages/login/components/AuthForm/index.vue |   4 +-
 src/pages/menu/index.vue                      |  26 +-
 src/pages/profile/index.vue                   | 116 ++-
 src/pages/result/fail.vue                     |   3 -
 src/pages/result/success.vue                  |   3 -
 src/styles/src/index.css                      |  11 +-
 39 files changed, 1207 insertions(+), 1357 deletions(-)

diff --git a/package.json b/package.json
index ff22782..3d4280a 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "pkg-types": "^1.2.1",
     "useNProgress": "link:@vueuse/integrations/useNProgress",
     "vue": "^3.5.12",
+    "vue-draggable-plus": "^0.5.4",
     "vue-echarts": "^7.0.3",
     "vue-i18n": "^10.0.4",
     "vue-router": "^4.4.5"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6a76e1f..211de5c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -107,6 +107,9 @@ importers:
       vue:
         specifier: ^3.5.12
         version: 3.5.12(typescript@5.6.3)
+      vue-draggable-plus:
+        specifier: ^0.5.4
+        version: 0.5.4(@types/sortablejs@1.15.8)
       vue-echarts:
         specifier: ^7.0.3
         version: 7.0.3(@vue/runtime-core@3.5.12)(echarts@5.5.1)(vue@3.5.12(typescript@5.6.3))
@@ -1389,6 +1392,9 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
+  '@types/sortablejs@1.15.8':
+    resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -3646,6 +3652,15 @@ packages:
       '@vue/composition-api':
         optional: true
 
+  vue-draggable-plus@0.5.4:
+    resolution: {integrity: sha512-7YXbRu6HFL5c0ELP07nNZPGyXmvD8o7Ny7Dj53l9u0sBTjVmHkgr3+/aXgUO1w2bIwE8f6GhaVmLxd7nhqQ0wg==}
+    peerDependencies:
+      '@types/sortablejs': ^1.15.0
+      '@vue/composition-api': '*'
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-echarts@7.0.3:
     resolution: {integrity: sha512-/jSxNwOsw5+dYAUcwSfkLwKPuzTQ0Cepz1LxCOpj2QcHrrmUa/Ql0eQqMmc1rTPQVrh2JQ29n2dhq75ZcHvRDw==}
     peerDependencies:
@@ -5063,6 +5078,8 @@ snapshots:
 
   '@types/resolve@1.20.2': {}
 
+  '@types/sortablejs@1.15.8': {}
+
   '@types/trusted-types@2.0.7': {}
 
   '@types/web-bluetooth@0.0.20': {}
@@ -7592,6 +7609,10 @@ snapshots:
     dependencies:
       vue: 3.5.12(typescript@5.6.3)
 
+  vue-draggable-plus@0.5.4(@types/sortablejs@1.15.8):
+    dependencies:
+      '@types/sortablejs': 1.15.8
+
   vue-echarts@7.0.3(@vue/runtime-core@3.5.12)(echarts@5.5.1)(vue@3.5.12(typescript@5.6.3)):
     dependencies:
       echarts: 5.5.1
diff --git a/src/components/ActionIcon/src/ActionIcon.vue b/src/components/ActionIcon/src/ActionIcon.vue
index d77ef5f..9077a32 100644
--- a/src/components/ActionIcon/src/ActionIcon.vue
+++ b/src/components/ActionIcon/src/ActionIcon.vue
@@ -4,14 +4,12 @@ import ToolTipper from "./ToolTipper.vue";
 
 interface Props {
 	tooltipText?: string;
-	icon: string;
 	transparent?: boolean; // 是否设置背景透明
 	size?: number; // 按钮大小
 	component?: Component | String; // 图标组件
 }
 withDefaults(defineProps<Props>(), {
 	tooltipText: undefined,
-	icon: "",
 	transparent: false, // 是否设置背景透明
 	size: 16, // 按钮大小
 	component: undefined, // 图标组件
diff --git a/src/components/AppLogo/src/AppLogo.vue b/src/components/AppLogo/src/AppLogo.vue
index 7149500..4043597 100644
--- a/src/components/AppLogo/src/AppLogo.vue
+++ b/src/components/AppLogo/src/AppLogo.vue
@@ -54,7 +54,7 @@ const isLightTheme = computed(() => !isDarkMode.value);
 
 <template>
   <!-- 应用程序 Logo 区域 -->
-  <div :class="`text-${titleSize}`" class="app-logo flex items-center"@click="navigateHome">
+  <div :class="`text-${titleSize}`" class="flex items-center"@click="navigateHome">
     <!-- 根据主题和模式显示 Logo 图片 -->
     <Transition
       appear :name="RouterTransitionConstants.FADE" mode="in-out"
diff --git a/src/components/PageWrapper/index.ts b/src/components/PageWrapper/index.ts
index e64c80a..6374fbc 100644
--- a/src/components/PageWrapper/index.ts
+++ b/src/components/PageWrapper/index.ts
@@ -1,4 +1,4 @@
 import { withInstall } from "@/utils";
-import pageWrapper from "./src/PageWrapper.vue";
+import wrapper from "./src/PageWrapper.vue";
 
-export const PageWrapper = withInstall(pageWrapper);
+export const PageWrapper = withInstall(wrapper);
diff --git a/src/components/PageWrapper/src/PageWrapper.vue b/src/components/PageWrapper/src/PageWrapper.vue
index 739fc34..a5e0682 100644
--- a/src/components/PageWrapper/src/PageWrapper.vue
+++ b/src/components/PageWrapper/src/PageWrapper.vue
@@ -1,43 +1,15 @@
 <script setup lang="ts">
 import { NBackTop } from "naive-ui";
 
-interface PageWrapperProps {
-	useScrollbar?: boolean;
-}
-
-withDefaults(defineProps<PageWrapperProps>(), {
+withDefaults(defineProps<{ useScrollbar?: boolean }>(), {
 	useScrollbar: true,
 });
 const { getShouldUseOpenBackTop } = useAppSetting();
 </script>
 
 <template>
-	<div class="page-wrapper" :class="[{ 'scrollbar-enabled': useScrollbar }]">
-		<NScrollbar v-if="useScrollbar" class="rounded-2xl">
-			<div class="m-4">
-				<slot />
-			</div>
-			<NBackTop v-if="getShouldUseOpenBackTop" :bottom="160" :right="0" />
-		</NScrollbar>
-		<div v-else class="m-4">
-			<slot />
-		</div>
-	</div>
+	<NScrollbar>
+		<slot />
+		<NBackTop v-if="getShouldUseOpenBackTop" :bottom="160" :right="0" />
+	</NScrollbar>
 </template>
-
-<style scoped>
-.page-wrapper {
-	/* Default styles for page-wrapper */
-	@apply rounded-2xl w-full h-full min-h-full;
-}
-
-.page-wrapper.scrollbar-enabled {
-	/* Styles specific to when scrollbar is enabled */
-	width: calc(100% + 8px);
-}
-
-.page-wrapper.scrollbar-enabled :deep(.ca-scrollbar-container) {
-	width: calc(100% - 8px);
-	@apply rounded-2xl;
-}
-</style>
diff --git a/src/components/SearchDialog/src/SearchDialog.vue b/src/components/SearchDialog/src/SearchDialog.vue
index 9af55a7..63de289 100644
--- a/src/components/SearchDialog/src/SearchDialog.vue
+++ b/src/components/SearchDialog/src/SearchDialog.vue
@@ -6,6 +6,7 @@ import type { Menu } from "@/types";
 import { useSearchDialog } from "@/composables/useSearchDialog";
 import type { SearchGroup, SearchGroupItem, SearchGroups } from "@/components/SearchDialog/src/types";
 import { getShallowMenus } from "@/router/menus";
+import { Iconx } from "@/components/Iconx";
 
 const SearchIcon = "tabler:search";
 const ArrowEnterIcon = "fluent:arrow-enter-left-24-regular";
@@ -22,328 +23,276 @@ const activeItem = ref<null | string | number>(null);
 const scrollContent = ref<(ScrollbarInst & { $el: any }) | null>(null);
 
 function i18nRender(key: string) {
-  return te(key) ? t(key) : key;
+	return te(key) ? t(key) : key;
 }
 
 function createRouterSearchGroupItem(item: Menu): SearchGroupItem {
-  return {
-    iconName: item.icon,
-    iconImage: null,
-    key: item.path,
-    title: `${t("searchDialog.go")}${i18nRender(item.name)}`,
-    label: t("searchDialog.shortcut"),
-    action() {
-      router.push({ path: item.path });
-    },
-  };
+	return {
+		iconName: item.icon,
+		iconImage: null,
+		key: item.path,
+		title: `${t("searchDialog.go")}${i18nRender(item.name)}`,
+		label: t("searchDialog.shortcut"),
+		action() {
+			router.push({ path: item.path });
+		},
+	};
 }
 
 // 获取菜单数据
 const shallowMenus = getShallowMenus();
 const applicationRouterSearchGroupData: SearchGroup = reactive({
-  name: t("searchDialog.applications"),
-  items: shallowMenus.map(createRouterSearchGroupItem),
+	name: t("searchDialog.applications"),
+	items: shallowMenus.map(createRouterSearchGroupItem),
 });
 
 const searchGroups = ref<SearchGroups>([
-  applicationRouterSearchGroupData,
-  {
-    name: t("searchDialog.chatBot"),
-    items: [
-      {
-        iconName: null,
-        iconImage: "https://avatars.githubusercontent.com/u/17453452",
-        key: 4,
-        title: "产品经理",
-        label: "负责产品规划和功能开发的专业人员",
-        action() {
-          router.push({ path: "/chat" });
-        },
-      },
-    ],
-  },
-  {
-    name: t("searchDialog.actions"),
-    items: [
-      {
-        iconName: FullScreenIcon,
-        iconImage: null,
-        key: 7,
-        title: "Toggle fullscreen",
-        label: t("searchDialog.action"),
-        action() {
-          toggleFullScreen();
-        },
-      },
-    ],
-  },
+	applicationRouterSearchGroupData,
+	{
+		name: t("searchDialog.chatBot"),
+		items: [
+			{
+				iconName: null,
+				iconImage: "https://avatars.githubusercontent.com/u/17453452",
+				key: 4,
+				title: "产品经理",
+				label: "负责产品规划和功能开发的专业人员",
+				action() {
+					router.push({ path: "/chat" });
+				},
+			},
+		],
+	},
+	{
+		name: t("searchDialog.actions"),
+		items: [
+			{
+				iconName: FullScreenIcon,
+				iconImage: null,
+				key: 7,
+				title: "Toggle fullscreen",
+				label: t("searchDialog.action"),
+				action() {
+					toggleFullScreen();
+				},
+			},
+		],
+	},
 ]);
 
 const keywords = computed<string[]>(() => {
-  return search.value.length > 1 ? search.value.split(" ").filter(k => k) : [];
+	return search.value.length > 1 ? search.value.split(" ").filter((k) => k) : [];
 });
 
 const filteredGroups = computed<SearchGroups>(() => {
-  if (keywords.value.length === 0) {
-    return searchGroups.value;
-  }
+	if (keywords.value.length === 0) {
+		return searchGroups.value;
+	}
 
-  const newGroups: SearchGroups = searchGroups.value.map((group) => {
-    const items = group.items.filter((item) => {
-      const titleMatch = keywords.value.some(k => item.title.toLowerCase().includes(k.toLowerCase()));
-      const tagsMatch = item.tags && keywords.value.some(k => item.tags?.toLowerCase().includes(k.toLowerCase()));
-      return titleMatch || tagsMatch;
-    });
+	const newGroups: SearchGroups = searchGroups.value
+		.map((group) => {
+			const items = group.items.filter((item) => {
+				const titleMatch = keywords.value.some((k) => item.title.toLowerCase().includes(k.toLowerCase()));
+				const tagsMatch = item.tags && keywords.value.some((k) => item.tags?.toLowerCase().includes(k.toLowerCase()));
+				return titleMatch || tagsMatch;
+			});
 
-    return items.length ? { ...group, items } : null;
-  }).filter(Boolean) as SearchGroups;
+			return items.length ? { ...group, items } : null;
+		})
+		.filter(Boolean) as SearchGroups;
 
-  return newGroups;
+	return newGroups;
 });
 
 const filteredFlattenItems = computed<SearchGroupItem[]>(() => {
-  return filteredGroups.value.flatMap(group => group.items);
+	return filteredGroups.value.flatMap((group) => group.items);
 });
 
 function resetValues() {
-  search.value = "";
-  activeItem.value = null;
+	search.value = "";
+	activeItem.value = null;
 }
 function openDialog(e?: MouseEvent) {
-  if (!isDialogVisible.value) {
-    isDialogVisible.value = true;
-    setTimeout(resetValues, 100);
-  }
-  return e;
+	if (!isDialogVisible.value) {
+		isDialogVisible.value = true;
+		setTimeout(resetValues, 100);
+	}
+	return e;
 }
 
 function closeDialog() {
-  isDialogVisible.value = false;
-  resetValues();
+	isDialogVisible.value = false;
+	resetValues();
 }
 function executeAction(action: () => void) {
-  action();
-  closeDialog();
+	action();
+	closeDialog();
 }
 function updateActiveItem(increment: number) {
-  const currentIndex = filteredFlattenItems.value.findIndex(item => item.key === activeItem.value);
-  const lastIndex = filteredFlattenItems.value.length - 1;
+	const currentIndex = filteredFlattenItems.value.findIndex((item) => item.key === activeItem.value);
+	const lastIndex = filteredFlattenItems.value.length - 1;
 
-  if (activeItem.value === null) {
-    activeItem.value = filteredFlattenItems.value[0].key;
-  } else if (currentIndex === 0 && increment === -1) {
-    activeItem.value = filteredFlattenItems.value[lastIndex].key;
-  } else if (currentIndex === lastIndex && increment === 1) {
-    activeItem.value = filteredFlattenItems.value[0].key;
-  } else {
-    activeItem.value = filteredFlattenItems.value[currentIndex + increment].key;
-  }
-  centerActiveItem();
+	if (activeItem.value === null) {
+		activeItem.value = filteredFlattenItems.value[0].key;
+	} else if (currentIndex === 0 && increment === -1) {
+		activeItem.value = filteredFlattenItems.value[lastIndex].key;
+	} else if (currentIndex === lastIndex && increment === 1) {
+		activeItem.value = filteredFlattenItems.value[0].key;
+	} else {
+		activeItem.value = filteredFlattenItems.value[currentIndex + increment].key;
+	}
+	centerActiveItem();
 }
 
 function moveNextItem() {
-  updateActiveItem(1);
+	updateActiveItem(1);
 }
 
 function movePrevItem() {
-  updateActiveItem(-1);
+	updateActiveItem(-1);
 }
 
 function performAction() {
-  const item = filteredFlattenItems.value.find(item => item.key === activeItem.value);
-  if (item) {
-    executeAction(item.action);
-  }
+	const item = filteredFlattenItems.value.find((item) => item.key === activeItem.value);
+	if (item) {
+		executeAction(item.action);
+	}
 }
 function centerActiveItem() {
-  const element = document.getElementById(activeItem.value?.toString() || "");
-  if (element && scrollContent.value) {
-    element.scrollIntoView({ block: "nearest" });
-  }
+	const element = document.getElementById(activeItem.value?.toString() || "");
+	if (element && scrollContent.value) {
+		element.scrollIntoView({ block: "nearest" });
+	}
 }
 
 onMounted(() => {
-  const keys = useMagicKeys();
-  const ActiveCMD = isWindows() ? keys["ctrl+k"] : keys["cmd+k"];
-  const Enter = keys.enter;
+	const keys = useMagicKeys();
+	const ActiveCMD = isWindows() ? keys["ctrl+k"] : keys["cmd+k"];
+	const Enter = keys.enter;
 
-  useSearchDialog().trigger(openDialog);
+	useSearchDialog().trigger(openDialog);
 
-  whenever(ActiveCMD, () => {
-    openDialog();
-  });
+	whenever(ActiveCMD, () => {
+		openDialog();
+	});
 
-  whenever(Enter, () => {
-    if (isDialogVisible.value) {
-      performAction();
-    }
-  });
+	whenever(Enter, () => {
+		if (isDialogVisible.value) {
+			performAction();
+		}
+	});
 });
 </script>
 
 <template>
-  <NModal v-model:show="isDialogVisible" class="search-dialog">
-    <NCard
-      class="w-[650px]"
-      content-style="padding: 0;"
-      :bordered="false"
-      size="huge"
-      role="dialog"
-      aria-modal="true"
-    >
-      <div class="search-dialog-action-bar rounded-2xl" @keydown.up="movePrevItem()" @keydown.down="moveNextItem()">
-        <div class="search-input flex items-center gap-5 px-5 h-12">
-          <CAIcon :name="SearchIcon" :size="16" />
-          <input v-model="search" :placeholder="t('searchDialog.searchPlaceholder')" class="grow bg-transparent outline-none border-none">
-          <NText code>
-            ESC
-          </NText>
-          <CAIcon :name="CloseIcon" :size="20" class="cursor-pointer" @click="closeDialog()" />
-        </div>
-        <NDivider />
-        <NScrollbar ref="scrollContent" style="height: 400px">
-          <div class="content-wrap">
-            <div v-for="group of filteredGroups" :key="group.name" class="group">
-              <div class="group-title">
-                {{ group.name }}
-              </div>
-              <NEl class="group-list">
-                <div
-                  v-for="item of group.items"
-                  :id="item.key.toString()"
-                  :key="item.key"
-                  class="item flex items-center my-2"
-                  :class="{ active: item.key === activeItem }"
-                  @click="executeAction(item.action)"
-                >
-                  <NEl class="icon">
-                    <NAvatar v-if="item.iconImage" round :size="28" :src="item.iconImage" />
-                    <CAIcon v-if="item.iconName" :name="item.iconName" :size="18" />
-                  </NEl>
-                  <div class="title grow">
-                    <Highlighter
-                      highlight-class-name="highlight"
-                      :search-words="keywords"
-                      :auto-escape="true"
-                      :text-to-highlight="item.title"
-                    />
-                  </div>
-                  <div class="label">
-                    {{ item.label }}
-                  </div>
-                </div>
-              </NEl>
-            </div>
-            <div v-if="!filteredGroups.length" class="group-empty">
-              {{ t('searchDialog.noResultsFound', { search }) }}
-            </div>
-          </div>
-        </NScrollbar>
-        <NDivider />
-        <NEl class="flex items-center justify-center space-x-4 py-2 text-xs">
-          <div class="flex items-center space-x-1">
-            <NEl class="w-4 h-4 bg-[var(--code-color)] rounded flex-center">
-              <CAIcon :name="ArrowEnterIcon" :size="12" />
-            </NEl>
-            <span class="opacity-70">{{ t('searchDialog.toSelectTooltip') }}</span>
-          </div>
-          <div class="flex items-center space-x-1">
-            <NEl class="w-4 h-4 bg-[var(--code-color)] rounded flex-center">
-              <CAIcon :name="ArrowSortIcon" :size="12" />
-            </NEl>
-            <span class="opacity-70">{{ t('searchDialog.toNavigateTooltip') }}</span>
-          </div>
-        </NEl>
-      </div>
-    </NCard>
-  </NModal>
+	<NModal v-model:show="isDialogVisible" class="search-dialog">
+		<NCard class="w-[650px]" content-style="padding: 0;" :bordered="false" size="huge" role="dialog" aria-modal="true">
+			<div class="search-dialog-action-bar rounded-2xl" @keydown.up="movePrevItem()" @keydown.down="moveNextItem()">
+				<div class="search-input flex items-center gap-5 px-5 h-12">
+					<Iconx :component="SearchIcon" :size="16" />
+					<input v-model="search" :placeholder="t('searchDialog.searchPlaceholder')" class="grow bg-transparent outline-none border-none" />
+					<NText code> ESC </NText>
+					<Iconx :component="CloseIcon" :size="20" class="cursor-pointer" @click="closeDialog()" />
+				</div>
+				<NDivider />
+				<NScrollbar ref="scrollContent" style="height: 400px">
+					<div class="content-wrap">
+						<div v-for="group of filteredGroups" :key="group.name" class="group">
+							<div class="group-title">
+								{{ group.name }}
+							</div>
+							<NEl class="group-list">
+								<div v-for="item of group.items" :id="item.key.toString()" :key="item.key" class="item flex items-center my-2" :class="{ active: item.key === activeItem }" @click="executeAction(item.action)">
+									<NEl class="icon">
+										<NAvatar v-if="item.iconImage" round :size="28" :src="item.iconImage" />
+										<Iconx v-if="item.iconName" :component="item.iconName" :size="18" />
+									</NEl>
+									<div class="title grow">
+										<Highlighter highlight-class-name="highlight" :search-words="keywords" :auto-escape="true" :text-to-highlight="item.title" />
+									</div>
+									<div class="label">
+										{{ item.label }}
+									</div>
+								</div>
+							</NEl>
+						</div>
+						<div v-if="!filteredGroups.length" class="group-empty">
+							{{ t("searchDialog.noResultsFound", { search }) }}
+						</div>
+					</div>
+				</NScrollbar>
+				<NDivider />
+				<NEl class="flex items-center justify-center space-x-4 py-2 text-xs">
+					<div class="flex items-center space-x-1">
+						<NEl class="w-4 h-4 bg-[var(--code-color)] rounded flex-center">
+							<Iconx :component="ArrowEnterIcon" :size="12" />
+						</NEl>
+						<span class="opacity-70">{{ t("searchDialog.toSelectTooltip") }}</span>
+					</div>
+					<div class="flex items-center space-x-1">
+						<NEl class="w-4 h-4 bg-[var(--code-color)] rounded flex-center">
+							<Iconx :component="ArrowSortIcon" :size="12" />
+						</NEl>
+						<span class="opacity-70">{{ t("searchDialog.toNavigateTooltip") }}</span>
+					</div>
+				</NEl>
+			</div>
+		</NCard>
+	</NModal>
 </template>
 
 <style scoped>
 .search-dialog .search-dialog-action-bar .search-input .ca-text--code {
-  white-space: nowrap;
+	white-space: nowrap;
 }
 .search-dialog .search-dialog-action-bar .ca-divider {
-  margin-top: 0;
-  margin-bottom: 0;
+	margin-top: 0;
+	margin-bottom: 0;
 }
 .search-dialog .search-dialog-action-bar .content-wrap {
-  padding-bottom: 30px;
+	padding-bottom: 30px;
 }
 .search-dialog .search-dialog-action-bar .content-wrap .group-empty {
-  text-align: center;
-  padding: 30px 0 40px 0;
+	text-align: center;
+	padding: 30px 0 40px 0;
 }
 .search-dialog .search-dialog-action-bar .content-wrap .group {
-  padding: 0 10px;
+	padding: 0 10px;
 }
 .search-dialog .search-dialog-action-bar .content-wrap .group .group-title {
-  opacity: 0.6;
-  margin-bottom: 5px;
-  padding: 20px 10px 5px;
+	opacity: 0.6;
+	margin-bottom: 5px;
+	padding: 20px 10px 5px;
 }
-.search-dialog
-  .search-dialog-action-bar
-  .content-wrap
-  .group
-  .group-list
-  .item {
-  padding: 7px 10px;
-  gap: 10px;
-  cursor: pointer;
-  border-radius: 10px;
-  width: 100%;
-  text-align: left;
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item {
+	padding: 7px 10px;
+	gap: 10px;
+	cursor: pointer;
+	border-radius: 10px;
+	width: 100%;
+	text-align: left;
 }
-.search-dialog
-  .search-dialog-action-bar
-  .content-wrap
-  .group
-  .group-list
-  .item
-  .icon {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background-color: var(--code-color);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item .icon {
+	width: 28px;
+	height: 28px;
+	border-radius: 50%;
+	background-color: var(--code-color);
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
-.search-dialog
-  .search-dialog-action-bar
-  .content-wrap
-  .group
-  .group-list
-  .item
-  .title {
-  font-weight: bold;
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item .title {
+	font-weight: bold;
 }
-.search-dialog
-  .search-dialog-action-bar
-  .content-wrap
-  .group
-  .group-list
-  .item
-  .label {
-  opacity: 0.8;
-  font-size: 0.9em;
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item .label {
+	opacity: 0.8;
+	font-size: 0.9em;
 }
-.search-dialog
-  .search-dialog-action-bar
-  .content-wrap
-  .group
-  .group-list
-  .item.active {
-  background-color: var(--hover-color);
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item.active {
+	background-color: var(--hover-color);
 }
-.search-dialog
-  .search-dialog-action-bar
-  .content-wrap
-  .group
-  .group-list
-  .item:hover {
-  box-shadow: 0 0 0 1px var(--primary-color-hover) inset;
+.search-dialog .search-dialog-action-bar .content-wrap .group .group-list .item:hover {
+	box-shadow: 0 0 0 1px var(--primary-color-hover) inset;
 }
 </style>
-@/components/SearchDialog/src/types
\ No newline at end of file
+@/components/SearchDialog/src/types
diff --git a/src/layouts/header/components/Breadcrumb.vue b/src/layouts/header/components/Breadcrumb.vue
index c4dc9ed..4d41f15 100644
--- a/src/layouts/header/components/Breadcrumb.vue
+++ b/src/layouts/header/components/Breadcrumb.vue
@@ -49,7 +49,7 @@ function selectDropdown(key) {
 			<Iconx :component="HomeOutline" :size="16" />
 		</NBreadcrumbItem>
 		<TransitionGroup name="breadcrumbAnimation">
-			<template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.path">
+			<template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name">
 				<NBreadcrumbItem @click="navigateTo({ path: breadcrumb.path })">
 					{{ localize(breadcrumb.meta.title) }}
 				</NBreadcrumbItem>
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index a4aa503..cb7a6e7 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -20,10 +20,10 @@ defineOptions({
 			<header class="">
 				<Header />
 			</header>
-			<div class="block flex-1 h-full overflow-x-hidden rounded-2xl pl-0 pr-5 pt-0 pb-6">
-				<div class="min-h-full h-full w-full rounded-2xl common-bg">
+			<div class="h-full w-full common-bg radis-box">
+				<PageWrapper use-scrollbar>
 					<Content />
-				</div>
+				</PageWrapper>
 			</div>
 			<footer>
 				<Footer v-if="getShouldShowFooter" />
@@ -33,4 +33,13 @@ defineOptions({
 	</NEl>
 </template>
 
-<style scoped></style>
+<style scoped>
+.radis-box {
+	border-radius: 1rem 1rem 0rem 0rem;
+	overflow-y: auto;
+	overflow-x: hidden;
+	padding: 10px 10px 0px 10px;
+	width: calc(100% - 20px);
+	height: calc(100% - 20px);
+}
+</style>
diff --git a/src/layouts/tabs/index.vue b/src/layouts/tabs/index.vue
index 5d5f942..084f04b 100644
--- a/src/layouts/tabs/index.vue
+++ b/src/layouts/tabs/index.vue
@@ -6,10 +6,8 @@ import { listenToRouteChange } from "@/router/mitt/routeChange";
 import { useTabs } from "@/composables/useTabs";
 import { Pinned } from "@vicons/tabler";
 
-
-
 defineOptions({
-  name: "LayoutTabs",
+	name: "LayoutTabs",
 });
 
 const router = useRouter();
@@ -17,112 +15,97 @@ const router = useRouter();
 const { addTab, pinnedTab, closePinnedTab, closeTab, getLimitTabsList, getPinnedTabsList, getCurrentTab } = useTabs();
 
 function go(fullPath: string) {
-  router.push({ path: fullPath });
-  return true;
+	router.push({ path: fullPath });
+	return true;
 }
 const { t, te } = useI18n();
 function localize(key) {
-  return te(key) ? t(key) : key;
+	return te(key) ? t(key) : key;
 }
 listenToRouteChange((route) => {
-  addTab(route);
+	addTab(route);
 });
 </script>
 
 <template>
-  <div class="flex layout-tags items-end">
-    <TransitionGroup :name="RouterTransitionConstants.FADE" tag="div" class="latest-list flex items-center gap-4">
-      <NTag
-        v-for="tab of getLimitTabsList()"
-        :key="tab.fullPath"
-        round
-        :bordered="false"
-        closable
-        @close="closeTab(tab)"
-      >
-        <span class="router-name" :class="{ 'current-tab': getCurrentTab()?.fullPath === tab.fullPath }" @click="go(tab.fullPath)">
-          {{ localize(tab.title) }}
-        </span>
-        <template #icon>
-          <div class="hover:color-primary-color hover:bg-[var(--action-color)] cursor-pointer mr-1 transition" @click="pinnedTab(tab)">
-            <Iconx :size="14" :component="Pinned" />
-          </div>
-        </template>
-      </NTag>
-    </TransitionGroup>
-
-    <div v-if="getLimitTabsList().length && getPinnedTabsList().length" class="divider-point h-1 w-1 relative top-2 z-1 rounded-full opacity-90 bg-primary-color mx-2" />
-    <TransitionGroup :name="RouterTransitionConstants.FADE" tag="div" class="pinned-list flex items-center gap-2">
-      <NTag
-        v-for="tab of getPinnedTabsList()"
-        :key="tab.name"
-        round
-        :bordered="false"
-        closable
-        @close="closePinnedTab(tab)"
-      >
-        <div class="router-name" :class="{ 'current-tab': getCurrentTab()?.fullPath === tab.fullPath }" @click="go(tab.fullPath)">
-          {{ localize(tab.title) }}
-        </div>
-      </NTag>
-    </TransitionGroup>
-    <div class="bar absolute bottom-[-0.5rem] bg-action-color rounded-2xl left-0 w-full h-1" />
-  </div>
+	<div class="flex layout-tags items-end">
+		<TransitionGroup :name="RouterTransitionConstants.FADE" tag="div" class="latest-list flex items-center gap-4">
+			<NTag v-for="tab of getLimitTabsList()" :key="tab.fullPath" round :bordered="false" closable @close="closeTab(tab)">
+				<span class="router-name" :class="{ 'current-tab': getCurrentTab()?.fullPath === tab.fullPath }" @click="go(tab.fullPath)">
+					{{ localize(tab.title) }}
+				</span>
+				<template #icon>
+					<div class="hover:color-primary-color hover:bg-[var(--action-color)] cursor-pointer mr-1 transition" @click="pinnedTab(tab)">
+						<Iconx :size="14" :component="Pinned" />
+					</div>
+				</template>
+			</NTag>
+		</TransitionGroup>
+		<div v-if="getLimitTabsList().length && getPinnedTabsList().length" class="divider-point h-1 w-1 relative top-2 z-1 rounded-full opacity-90 bg-primary-color mx-2" />
+		<TransitionGroup :name="RouterTransitionConstants.FADE" tag="div" class="pinned-list flex items-center gap-2">
+			<NTag v-for="tab of getPinnedTabsList()" :key="tab.name" round :bordered="false" closable @close="closePinnedTab(tab)">
+				<div class="router-name" :class="{ 'current-tab': getCurrentTab()?.fullPath === tab.fullPath }" @click="go(tab.fullPath)">
+					{{ localize(tab.title) }}
+				</div>
+			</NTag>
+		</TransitionGroup>
+		<div class="bar absolute bottom-[-0.5rem] bg-action-color rounded-2xl left-0 w-full h-1" />
+	</div>
 </template>
 
 <style scoped>
 .layout-tags {
-  position: relative;
+	position: relative;
 }
 .layout-tags :deep(.ca-tag) {
-  background-color: transparent;
+	background-color: transparent;
 }
 
 .pinned-list :deep(.ca-tag) {
-  background-color: var(--action-color);
+	background-color: var(--action-color);
 }
 
 .layout-tags :deep(.ca-tag).ca-tag--round {
-  padding: 0.5rem;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 400ms;
+	padding: 0.5rem;
+	transition-property: all;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	transition-duration: 400ms;
 }
 .layout-tags :deep(.ca-tag) .ca-tag__icon {
-  margin: 0 !important;
+	margin: 0 !important;
 }
 .layout-tags :deep(.ca-tag) .ca-tag__close {
-  overflow: hidden;
-  width: 0;
-  margin-left: 0;
-  margin-right: 0;
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 400ms;
+	overflow: hidden;
+	width: 0;
+	margin-left: 0;
+	margin-right: 0;
+	transition-property: all;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	transition-duration: 400ms;
 }
 .layout-tags :deep(.ca-tag):hover {
-  background-color: var(--action-color);
+	background-color: var(--action-color);
 }
 .layout-tags :deep(.ca-tag):hover.ca-tag--round {
-  padding: 0 calc(var(--n-height) / 3) 0 calc(var(--n-height) / 3);
+	padding: 0 calc(var(--n-height) / 3) 0 calc(var(--n-height) / 3);
 }
 .layout-tags :deep(.ca-tag):hover .ca-tag__close {
-  margin-left: 0.25rem;
-  overflow: unset;
-  width: 1rem;
+	margin-left: 0.25rem;
+	overflow: unset;
+	width: 1rem;
 }
 .layout-tags :deep(.ca-tag) .ca-base-icon {
-  transform: unset;
+	transform: unset;
 }
 
 .layout-tags .router-name {
-  cursor: pointer;
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
+	cursor: pointer;
+	margin-left: 0.25rem;
+	margin-right: 0.25rem;
 }
 .layout-tags .current-tab {
-  text-decoration: underline;
-  text-decoration-thickness: 0.1rem;
-  text-decoration-color: var(--primary-color);
+	text-decoration: underline;
+	text-decoration-thickness: 0.1rem;
+	text-decoration-color: var(--primary-color);
 }
 </style>
diff --git a/src/main.ts b/src/main.ts
index 2deac56..8559184 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,7 +6,7 @@ import { setupVueQuery } from "@/apis";
 import { setupDirectives } from "@/directives";
 import { setupI18n } from "@/locale";
 import { setupRouterGuard } from "@/router/guard";
-// import "@/styles";
+import "@/styles";
 import "virtual:uno.css";
 import { Iconx } from "./components/Iconx/index";
 import { router, setupRouter } from "./router";
diff --git a/src/pages/chat copy/components/AssistantSidebar/components/AssistantSidebarActionBar.vue b/src/pages/chat copy/components/AssistantSidebar/components/AssistantSidebarActionBar.vue
index da778e2..efeb829 100644
--- a/src/pages/chat copy/components/AssistantSidebar/components/AssistantSidebarActionBar.vue	
+++ b/src/pages/chat copy/components/AssistantSidebar/components/AssistantSidebarActionBar.vue	
@@ -8,7 +8,7 @@ const SEARCH_ICON = "tabler:search";
   <div class="actionbar flex items-center p-2 px-3 rounded-2xl">
     <NInput placeholder="搜索助手" clearable size="medium" class="bg-[--action-color]">
       <template #prefix>
-        <CAIcon :name="SEARCH_ICON" />
+        <Iconx :component="SEARCH_ICON" />
       </template>
     </NInput>
     <ActionIcon class="ml-2" icon="tabler:message-plus" tooltip-text="新建助手" />
diff --git a/src/pages/chat copy/components/ChatHistorySidebar/components/ChatHistoryItem.vue b/src/pages/chat copy/components/ChatHistorySidebar/components/ChatHistoryItem.vue
index b7336fe..a2ac0db 100644
--- a/src/pages/chat copy/components/ChatHistorySidebar/components/ChatHistoryItem.vue	
+++ b/src/pages/chat copy/components/ChatHistorySidebar/components/ChatHistoryItem.vue	
@@ -56,7 +56,7 @@ const menuOptions = ref<MenuItem[]>(menuItems);
       <div class="menu-options flex justify-center opacity-80">
         <NDropdown :options="menuOptions">
           <NButton text>
-            <CAIcon :name="MenuHorizontalIcon" :size="20" />
+            <Iconx :component="MenuHorizontalIcon" :size="20" />
           </NButton>
         </NDropdown>
       </div>
diff --git a/src/pages/chat copy/index.vue b/src/pages/chat copy/index.vue
index 071d694..159d9d1 100644
--- a/src/pages/chat copy/index.vue	
+++ b/src/pages/chat copy/index.vue	
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import ChatLayout from "./components/ChatLayout.vue";
-import PageWrapper from "@/components/PageWrapper/src/PageWrapper.vue";
 
 defineOptions({
   name: "Chat",
@@ -8,9 +7,7 @@ defineOptions({
 </script>
 
 <template>
-  <PageWrapper>
     <ChatLayout />
-  </PageWrapper>
 </template>
 
 <style scoped>
diff --git a/src/pages/chat/components/AssistantSidebar/components/AssistantSidebarActionBar.vue b/src/pages/chat/components/AssistantSidebar/components/AssistantSidebarActionBar.vue
index da778e2..efeb829 100644
--- a/src/pages/chat/components/AssistantSidebar/components/AssistantSidebarActionBar.vue
+++ b/src/pages/chat/components/AssistantSidebar/components/AssistantSidebarActionBar.vue
@@ -8,7 +8,7 @@ const SEARCH_ICON = "tabler:search";
   <div class="actionbar flex items-center p-2 px-3 rounded-2xl">
     <NInput placeholder="搜索助手" clearable size="medium" class="bg-[--action-color]">
       <template #prefix>
-        <CAIcon :name="SEARCH_ICON" />
+        <Iconx :component="SEARCH_ICON" />
       </template>
     </NInput>
     <ActionIcon class="ml-2" icon="tabler:message-plus" tooltip-text="新建助手" />
diff --git a/src/pages/chat/components/ChatHistorySidebar/components/ChatHistoryItem.vue b/src/pages/chat/components/ChatHistorySidebar/components/ChatHistoryItem.vue
index b7336fe..a2ac0db 100644
--- a/src/pages/chat/components/ChatHistorySidebar/components/ChatHistoryItem.vue
+++ b/src/pages/chat/components/ChatHistorySidebar/components/ChatHistoryItem.vue
@@ -56,7 +56,7 @@ const menuOptions = ref<MenuItem[]>(menuItems);
       <div class="menu-options flex justify-center opacity-80">
         <NDropdown :options="menuOptions">
           <NButton text>
-            <CAIcon :name="MenuHorizontalIcon" :size="20" />
+            <Iconx :component="MenuHorizontalIcon" :size="20" />
           </NButton>
         </NDropdown>
       </div>
diff --git a/src/pages/chat/index.vue b/src/pages/chat/index.vue
index 06be059..93b1f04 100644
--- a/src/pages/chat/index.vue
+++ b/src/pages/chat/index.vue
@@ -21,7 +21,7 @@ const Bar = defineComponent((props) => {
 </script>
 
 <template>
-	<PageWrapper use-scrollbar>
+	<div>
 		<n-card title="卡片"> 卡片内容 </n-card>
 		<n-card title="按钮组" class="mt-5">
 			<Iconx size="30" :component="SafeIcon" />
@@ -64,10 +64,10 @@ const Bar = defineComponent((props) => {
 			<div></div>
 		</n-card>
 
-		<n-card  class="mt-10 mb-10">
+		<n-card class="mt-10 mb-10">
 			<Preview></Preview>
 			<Form></Form>
 		</n-card>
-	</PageWrapper>
+	</div>
 </template>
 <style scoped></style>
diff --git a/src/pages/components/echarts/index.vue b/src/pages/components/echarts/index.vue
index a017a31..cd2b68a 100644
--- a/src/pages/components/echarts/index.vue
+++ b/src/pages/components/echarts/index.vue
@@ -1,13 +1,11 @@
 <!--
  * @Author: wangqz
  * @Date: 2024-07-22
- * @LastEditTime: 2024-07-26
+ * @LastEditTime: 2024-10-28
  * @Description: content
 -->
 <template>
-	<page-wrapper use-scrollbar>
-		<n-card> <scatter3D></scatter3D> </n-card>
-	</page-wrapper>
+	<n-card> <scatter3D></scatter3D> </n-card>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/pages/components/form/complex/index.vue b/src/pages/components/form/complex/index.vue
index 7149f86..984887d 100644
--- a/src/pages/components/form/complex/index.vue
+++ b/src/pages/components/form/complex/index.vue
@@ -1,48 +1,46 @@
 <!--
  * @Author: wangqz
  * @Date: 2024-07-22
- * @LastEditTime: 2024-07-22
+ * @LastEditTime: 2024-10-28
  * @Description: content
 -->
 <template>
-	<PageWrapper use-scrollbar>
-		<n-card>
-			<n-form ref="formRef" inline :label-width="80" :model="formValue">
-				<n-form-item label="姓名" path="user.name">
-					<n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
-				</n-form-item>
-				<n-form-item label="年龄" path="user.age">
-					<n-input v-model:value="formValue.user.age" placeholder="输入年龄" />
-				</n-form-item>
-				<n-form-item label="电话号码" path="phone">
-					<n-input v-model:value="formValue.phone" placeholder="电话号码" />
-				</n-form-item>
-				<n-form-item label="姓名" path="user.name">
-					<n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
-				</n-form-item>
-				<n-form-item label="年龄" path="user.age">
-					<n-input v-model:value="formValue.user.age" placeholder="输入年龄" />
-				</n-form-item>
-				<n-form-item label="电话号码" path="phone">
-					<n-input v-model:value="formValue.phone" placeholder="电话号码" />
-				</n-form-item>
-				<n-form-item>
-					<n-button attr-type="button" type="primary" @click="handleValidateClick"> 查询 </n-button>
-				</n-form-item>
-			</n-form>
-			<n-space>
-				<n-button>Default</n-button>
-				<n-button type="tertiary"> Tertiary </n-button>
-				<n-button type="primary"> Primary </n-button>
-				<n-button type="tertiary"> Tertiary </n-button>
-				<n-button type="tertiary"> Tertiary </n-button>
-				<n-button type="tertiary"> Tertiary </n-button>
-				<n-button type="tertiary"> Tertiary </n-button>
-			</n-space>
-			<n-divider dashed />
-			<n-data-table :columns="state.columns" :data="state.data" :summary="state.summary" size="small" :pagination="pagination" />
-		</n-card>
-	</PageWrapper>
+	<n-card>
+		<n-form ref="formRef" inline :label-width="80" :model="formValue">
+			<n-form-item label="姓名" path="user.name">
+				<n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
+			</n-form-item>
+			<n-form-item label="年龄" path="user.age">
+				<n-input v-model:value="formValue.user.age" placeholder="输入年龄" />
+			</n-form-item>
+			<n-form-item label="电话号码" path="phone">
+				<n-input v-model:value="formValue.phone" placeholder="电话号码" />
+			</n-form-item>
+			<n-form-item label="姓名" path="user.name">
+				<n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
+			</n-form-item>
+			<n-form-item label="年龄" path="user.age">
+				<n-input v-model:value="formValue.user.age" placeholder="输入年龄" />
+			</n-form-item>
+			<n-form-item label="电话号码" path="phone">
+				<n-input v-model:value="formValue.phone" placeholder="电话号码" />
+			</n-form-item>
+			<n-form-item>
+				<n-button attr-type="button" type="primary" @click="handleValidateClick"> 查询 </n-button>
+			</n-form-item>
+		</n-form>
+		<n-space>
+			<n-button>Default</n-button>
+			<n-button type="tertiary"> Tertiary </n-button>
+			<n-button type="primary"> Primary </n-button>
+			<n-button type="tertiary"> Tertiary </n-button>
+			<n-button type="tertiary"> Tertiary </n-button>
+			<n-button type="tertiary"> Tertiary </n-button>
+			<n-button type="tertiary"> Tertiary </n-button>
+		</n-space>
+		<n-divider dashed />
+		<n-data-table :columns="state.columns" :data="state.data" :summary="state.summary" size="small" :pagination="pagination" />
+	</n-card>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/pages/components/form/simple/data.ts b/src/pages/components/form/simple/data.ts
index fcd439f..d5840da 100644
--- a/src/pages/components/form/simple/data.ts
+++ b/src/pages/components/form/simple/data.ts
@@ -1,4 +1,4 @@
-import { tableMoney } from "@/utils/src/numberUtils";
+import { tableGen, tableMoney } from "@/utils/src/numberUtils";
 import { DataTableColumns } from "naive-ui";
 
 type Cols = DataTableColumns & {
@@ -17,39 +17,14 @@ export interface RowData {
 }
 
 export const createColumns = (): DataTableColumns<RowData> => {
-	return tableMoney([
-		{
-			type: "selection",
-		},
-		{
-			title: "单据日期",
-			key: "billdate",
-		},
-		{
-			title: "姓名",
-			key: "name",
-		},
-		{
-			title: "联系电话",
-			key: "phone",
-		},
-		{
-			title: "销售金额",
-			key: "sales",
-			money: true,
-		},
-		{
-			title: "收款金额",
-			key: "payment",
-			money: true,
-		},
-		{
-			title: "地址",
-			key: "address",
-		},
-		{
-			title: "单据状态",
-			key: "state",
-		},
+	return tableGen([
+		["billdate", "单据日期"],
+		["name", "姓名"],
+		["phone", "联系电话"],
+		["address", "地址"],
+		["state", "单据状态"],
+		["sales", "销售金额", "right", tableMoney("sales")],
+		["payment", "收款金额", "right", tableMoney("payment")],
+		["action", "操作", "center"],
 	]);
 };
diff --git a/src/pages/components/form/simple/index.vue b/src/pages/components/form/simple/index.vue
index 8d6cc54..55b1765 100644
--- a/src/pages/components/form/simple/index.vue
+++ b/src/pages/components/form/simple/index.vue
@@ -1,11 +1,11 @@
 <!--
  * @Author: wangqz
  * @Date: 2024-07-22
- * @LastEditTime: 2024-07-26
+ * @LastEditTime: 2024-10-28
  * @Description: content
 -->
 <template>
-	<page-wrapper use-scrollbar>
+	<div>
 		<n-card>
 			<n-form ref="formRef" label-placement="left" label-width="auto" :model="formValue">
 				<n-grid :x-gap="8" :y-gap="15" cols="2 s:3 m:4 l:5 xl:6" responsive="screen">
@@ -78,7 +78,7 @@
 			</n-form>
 			<n-data-table :columns="columns()" :data="table.source" :pagination="pagination" :loading="table.isLoading" />
 		</n-card>
-	</page-wrapper>
+	</div>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/pages/components/headless-table/basic/index.vue b/src/pages/components/headless-table/basic/index.vue
index ddb755c..5b98915 100644
--- a/src/pages/components/headless-table/basic/index.vue
+++ b/src/pages/components/headless-table/basic/index.vue
@@ -4,7 +4,6 @@ import { createColumnHelper, getCoreRowModel, useVueTable } from "@tanstack/vue-
 import { AppTable } from "@/components/AppTable";
 import type { ChatGPTDemoTableRow } from "@/pages/components/headless-table/basic/data";
 import { chatGPTDemoTestData } from "@/pages/components/headless-table/basic/data";
-import PageWrapper from "@/components/PageWrapper/src/PageWrapper.vue";
 
 defineOptions({
 	name: "HeadlessTableBasic",
@@ -46,11 +45,9 @@ const table = useVueTable({
 </script>
 
 <template>
-	<PageWrapper use-scrollbar>
-		<NCard :title="t('page.headlessTable.pageTitles.basic')">
-			<AppTable :table="table" />
-		</NCard>
-	</PageWrapper>
+	<NCard :title="t('page.headlessTable.pageTitles.basic')">
+		<AppTable :table="table" />
+	</NCard>
 </template>
 
 <style scoped></style>
diff --git a/src/pages/components/headless-table/pagination/index.vue b/src/pages/components/headless-table/pagination/index.vue
index d098069..64727db 100644
--- a/src/pages/components/headless-table/pagination/index.vue
+++ b/src/pages/components/headless-table/pagination/index.vue
@@ -2,126 +2,91 @@
 import { FlexRender, createColumnHelper, getCoreRowModel, getPaginationRowModel, useVueTable } from "@tanstack/vue-table";
 
 import type { ChatGPTDemoTableRow } from "@/pages/components/headless-table/basic/data";
-import PageWrapper from "@/components/PageWrapper/src/PageWrapper.vue";
 
 defineOptions({
-  name: "HeadlessTablePagination",
+	name: "HeadlessTablePagination",
 });
 
 const columnHelper = createColumnHelper<ChatGPTDemoTableRow>();
 const columns = [
-  columnHelper.accessor(row => row.userInput, {
-    id: "userInput",
-    cell: info => info.getValue(),
-    header: () => " 用户输入",
-    footer: props => props.column.id,
-  }),
-  columnHelper.accessor(row => row.expectedReply, {
-    id: "expectedReply",
-    cell: info => info.getValue(),
-    header: () => "预期回复",
-    footer: props => props.column.id,
-  }),
-  columnHelper.accessor(row => row.isTestPassed, {
-    id: "isTestPassed",
-    cell: info => info.getValue() === true ? "✅" : "❌",
-    header: () => "是否通过测试",
-    footer: props => props.column.id,
-  }),
+	columnHelper.accessor((row) => row.userInput, {
+		id: "userInput",
+		cell: (info) => info.getValue(),
+		header: () => " 用户输入",
+		footer: (props) => props.column.id,
+	}),
+	columnHelper.accessor((row) => row.expectedReply, {
+		id: "expectedReply",
+		cell: (info) => info.getValue(),
+		header: () => "预期回复",
+		footer: (props) => props.column.id,
+	}),
+	columnHelper.accessor((row) => row.isTestPassed, {
+		id: "isTestPassed",
+		cell: (info) => (info.getValue() === true ? "✅" : "❌"),
+		header: () => "是否通过测试",
+		footer: (props) => props.column.id,
+	}),
 ];
 const chatGPTDemoTestData: ChatGPTDemoTableRow[] = [];
 onBeforeMount(() => {
-  for (let i = 0; i < 100; i++) {
-    chatGPTDemoTestData.push({
-      id: i,
-      userInput: `用户输入${i}`,
-      expectedReply: `预期回复${i}`,
-      isTestPassed: i % 2 === 0,
-    });
-  }
+	for (let i = 0; i < 100; i++) {
+		chatGPTDemoTestData.push({
+			id: i,
+			userInput: `用户输入${i}`,
+			expectedReply: `预期回复${i}`,
+			isTestPassed: i % 2 === 0,
+		});
+	}
 });
 const table = useVueTable({
-  get data() {
-    return chatGPTDemoTestData;
-  },
-  debugAll: false,
-  columns,
-  getCoreRowModel: getCoreRowModel(),
-  getPaginationRowModel: getPaginationRowModel(),
+	get data() {
+		return chatGPTDemoTestData;
+	},
+	debugAll: false,
+	columns,
+	getCoreRowModel: getCoreRowModel(),
+	getPaginationRowModel: getPaginationRowModel(),
 });
 function handlePageChange(page: number) {
-  table.setPageIndex(page - 1);
+	table.setPageIndex(page - 1);
 }
 function handlePageSizeChange(pageSize: number) {
-  table.setPageSize(pageSize);
+	table.setPageSize(pageSize);
 }
 </script>
 
 <template>
-  <PageWrapper use-scrollbar>
-      <NCard title="分页表单">
-        <NTable :bordered="true" :single-line="false" striped>
-          <thead>
-            <tr
-              v-for="headerGroup in table.getHeaderGroups()"
-              :key="headerGroup.id"
-            >
-              <th
-                v-for="(header) in headerGroup.headers"
-                :key="header.id"
-                :colspan="header.colSpan"
-                class="font-bold!"
-                scope="col"
-              >
-                <FlexRender
-                  :render="header.column.columnDef.header"
-                  :props="header.getContext()"
-                />
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="row in table.getRowModel().rows"
-              :key="row.id"
-            >
-              <td
-                v-for="(cell) in row.getVisibleCells()"
-                :key="cell.id"
-              >
-                <div>
-                  <div>
-                    <FlexRender
-                      :render="cell.column.columnDef.cell"
-                      :props="cell.getContext()"
-                    />
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr v-if="table.getRowModel().rows.length === 0">
-              <td
-                :colspan="table.getAllColumns().length"
-              >
-                <NEmpty />
-              </td>
-            </tr>
-          </tbody>
-        </NTable>
-        <template #action>
-          <NPagination
-            :page="table.getState().pagination.pageIndex + 1"
-            :page-count="table.getPageCount()"
-            show-size-picker
-            :page-sizes="[10, 20, 30, 40, 50]"
-            @update:page="handlePageChange"
-            @update:page-size="handlePageSizeChange"
-          />
-        </template>
-      </NCard>
-  </PageWrapper>
+	<NCard title="分页表单">
+		<NTable :bordered="true" :single-line="false" striped>
+			<thead>
+				<tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+					<th v-for="header in headerGroup.headers" :key="header.id" :colspan="header.colSpan" class="font-bold!" scope="col">
+						<FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="row in table.getRowModel().rows" :key="row.id">
+					<td v-for="cell in row.getVisibleCells()" :key="cell.id">
+						<div>
+							<div>
+								<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+							</div>
+						</div>
+					</td>
+				</tr>
+				<tr v-if="table.getRowModel().rows.length === 0">
+					<td :colspan="table.getAllColumns().length">
+						<NEmpty />
+					</td>
+				</tr>
+			</tbody>
+		</NTable>
+		<template #action>
+			<NPagination :page="table.getState().pagination.pageIndex + 1" :page-count="table.getPageCount()" show-size-picker :page-sizes="[10, 20, 30, 40, 50]" @update:page="handlePageChange" @update:page-size="handlePageSizeChange" />
+		</template>
+	</NCard>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/pages/components/list/basic/index.vue b/src/pages/components/list/basic/index.vue
index 2ceb479..e883ce8 100644
--- a/src/pages/components/list/basic/index.vue
+++ b/src/pages/components/list/basic/index.vue
@@ -1,84 +1,82 @@
 <!--
  * @Author: wangqz
  * @Date: 2024-07-22
- * @LastEditTime: 2024-08-08
+ * @LastEditTime: 2024-10-28
  * @Description: content
 -->
 <template>
-	<page-wrapper use-scrollbar>
-		<n-card>
-			<n-form ref="formRef" label-placement="left" label-width="auto" :model="formValue">
-				<n-grid :x-gap="8" :y-gap="15" cols="2 s:3 m:4 l:5 xl:6" responsive="screen">
+	<n-card>
+		<n-form ref="formRef" label-placement="left" label-width="auto" :model="formValue">
+			<n-grid :x-gap="8" :y-gap="15" cols="2 s:3 m:4 l:5 xl:6" responsive="screen">
+				<n-grid-item>
+					<n-form-item label="模糊查询" path="where" :show-feedback="false">
+						<n-input v-model:value="formValue.where" placeholder="输入关键字" />
+					</n-form-item>
+				</n-grid-item>
+				<n-grid-item>
+					<n-form-item label="姓名" path="user.name" :show-feedback="false" :rule="[{ required: true, message: '姓名必填' }]">
+						<n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
+					</n-form-item>
+				</n-grid-item>
+				<n-grid-item :span="2">
+					<n-form-item label="单据日期" :show-feedback="false" path="phone">
+						<n-date-picker v-model:value="formValue.dateRange" type="daterange" clearable />
+					</n-form-item>
+				</n-grid-item>
+				<n-grid-item>
+					<n-form-item label="收款状态" :show-feedback="false" path="phone">
+						<n-select v-model:value="formValue.saleValue" placeholder="Select" :options="generalOptions" />
+					</n-form-item>
+				</n-grid-item>
+				<n-grid-item>
+					<n-form-item label="单据状态" :show-feedback="false" path="user.name">
+						<n-select v-model:value="formValue.stateValue" placeholder="Select" :options="stateOptions" />
+					</n-form-item>
+				</n-grid-item>
+				<template v-if="filterShow">
 					<n-grid-item>
-						<n-form-item label="模糊查询" path="where" :show-feedback="false">
-							<n-input v-model:value="formValue.where" placeholder="输入关键字" />
+						<n-form-item label="电话号码" path="phone" :show-feedback="false">
+							<n-input v-model:value="formValue.phone" placeholder="电话号码" />
 						</n-form-item>
 					</n-grid-item>
 					<n-grid-item>
-						<n-form-item label="姓名" path="user.name" :show-feedback="false" :rule="[{ required: true, message: '姓名必填' }]">
-							<n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
-						</n-form-item>
-					</n-grid-item>
-					<n-grid-item :span="2">
-						<n-form-item label="单据日期" :show-feedback="false" path="phone">
-							<n-date-picker v-model:value="formValue.dateRange" type="daterange" clearable />
-						</n-form-item>
-					</n-grid-item>
-					<n-grid-item>
-						<n-form-item label="收款状态" :show-feedback="false" path="phone">
-							<n-select v-model:value="formValue.saleValue" placeholder="Select" :options="generalOptions" />
+						<n-form-item label="电话号码" path="phone" :show-feedback="false">
+							<n-input v-model:value="formValue.phone" placeholder="电话号码" />
 						</n-form-item>
 					</n-grid-item>
 					<n-grid-item>
-						<n-form-item label="单据状态" :show-feedback="false" path="user.name">
-							<n-select v-model:value="formValue.stateValue" placeholder="Select" :options="stateOptions" />
+						<n-form-item label="电话号码" path="phone" :show-feedback="false">
+							<n-input v-model:value="formValue.phone" placeholder="电话号码" />
 						</n-form-item>
 					</n-grid-item>
-					<template v-if="filterShow">
-						<n-grid-item>
-							<n-form-item label="电话号码" path="phone" :show-feedback="false">
-								<n-input v-model:value="formValue.phone" placeholder="电话号码" />
-							</n-form-item>
-						</n-grid-item>
-						<n-grid-item>
-							<n-form-item label="电话号码" path="phone" :show-feedback="false">
-								<n-input v-model:value="formValue.phone" placeholder="电话号码" />
-							</n-form-item>
-						</n-grid-item>
-						<n-grid-item>
-							<n-form-item label="电话号码" path="phone" :show-feedback="false">
-								<n-input v-model:value="formValue.phone" placeholder="电话号码" />
-							</n-form-item>
-						</n-grid-item>
-					</template>
-				</n-grid>
-				<n-flex class="m-t-sm m-b-sm" justify="space-between">
-					<n-space>
-						<i-button type="primary" :icon="CirclePlus">新增</i-button>
-						<n-button strong secondary>下载模板</n-button>
-						<n-button strong secondary>批量导入</n-button>
-						<n-button strong secondary>导出Excel</n-button>
-						<n-button strong secondary>打印</n-button>
-						<n-dropdown trigger="hover" :options="actionOpts" @select="handleSelect">
-							<n-button>更多...</n-button>
-						</n-dropdown>
-					</n-space>
-					<n-space>
-						<n-button-group>
-							<i-button attr-type="button" title="查询" @click="handleValidateClick" type="info" :icon="Search"></i-button>
-							<i-button attr-type="reset" title="重置" :icon="Refresh"></i-button>
-							<n-button attr-type="button" @click="filterShow = !filterShow">
-								<template #icon>
-									<Iconx :component="filterShow ? ChevronsUp : ChevronsDown" :size="16" />
-								</template>
-							</n-button>
-						</n-button-group>
-					</n-space>
-				</n-flex>
-			</n-form>
-			<n-data-table :columns="columns(renderCol)" :data="table.source" :pagination="pagination" :loading="table.isLoading" />
-		</n-card>
-	</page-wrapper>
+				</template>
+			</n-grid>
+			<n-flex class="m-t-sm m-b-sm" justify="space-between">
+				<n-space>
+					<i-button type="primary" :icon="CirclePlus">新增</i-button>
+					<n-button strong secondary>下载模板</n-button>
+					<n-button strong secondary>批量导入</n-button>
+					<n-button strong secondary>导出Excel</n-button>
+					<n-button strong secondary>打印</n-button>
+					<n-dropdown trigger="hover" :options="actionOpts" @select="handleSelect">
+						<n-button>更多...</n-button>
+					</n-dropdown>
+				</n-space>
+				<n-space>
+					<n-button-group>
+						<i-button attr-type="button" title="查询" @click="handleValidateClick" type="info" :icon="Search"></i-button>
+						<i-button attr-type="reset" title="重置" :icon="Refresh"></i-button>
+						<n-button attr-type="button" @click="filterShow = !filterShow">
+							<template #icon>
+								<Iconx :component="filterShow ? ChevronsUp : ChevronsDown" :size="16" />
+							</template>
+						</n-button>
+					</n-button-group>
+				</n-space>
+			</n-flex>
+		</n-form>
+		<n-data-table :columns="columns(renderCol)" :data="table.source" :pagination="pagination" :loading="table.isLoading" />
+	</n-card>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/pages/components/list/card/index.vue b/src/pages/components/list/card/index.vue
index afacbb2..1a4ec53 100644
--- a/src/pages/components/list/card/index.vue
+++ b/src/pages/components/list/card/index.vue
@@ -1,24 +1,22 @@
 <!--
  * @Author: wangqz
  * @Date: 2024-07-22
- * @LastEditTime: 2024-07-22
+ * @LastEditTime: 2024-10-28
  * @Description: content
 -->
 <template>
-	<PageWrapper use-scrollbar>
-		<n-card title="menu">
-			<n-space vertical>
-				<n-switch v-model:value="accordion">
-					<template #checked> 手风琴 </template>
-					<template #unchecked> 普通 </template>
-				</n-switch>
-				<n-button @click="selectAndExpand('难吃')"> 选中第一项 </n-button>
-				<n-button @click="selectAndExpand('/components/headlessTable/basic')"> 选中第二项 </n-button>
-				<n-button @click="selectAndExpand('依然难吃')"> 选中第三项 </n-button>
-				<n-menu ref="menuInstRef" v-model:value="selectedKey" :options="options" :accordion="accordion" />
-			</n-space>
-		</n-card>
-	</PageWrapper>
+	<n-card title="menu">
+		<n-space vertical>
+			<n-switch v-model:value="accordion">
+				<template #checked> 手风琴 </template>
+				<template #unchecked> 普通 </template>
+			</n-switch>
+			<n-button @click="selectAndExpand('难吃')"> 选中第一项 </n-button>
+			<n-button @click="selectAndExpand('/components/headlessTable/basic')"> 选中第二项 </n-button>
+			<n-button @click="selectAndExpand('依然难吃')"> 选中第三项 </n-button>
+			<n-menu ref="menuInstRef" v-model:value="selectedKey" :options="options" :accordion="accordion" />
+		</n-space>
+	</n-card>
 </template>
 
 <script lang="ts">
diff --git a/src/pages/components/menu/index.vue b/src/pages/components/menu/index.vue
index afacbb2..5ca3e76 100644
--- a/src/pages/components/menu/index.vue
+++ b/src/pages/components/menu/index.vue
@@ -1,29 +1,27 @@
 <!--
  * @Author: wangqz
  * @Date: 2024-07-22
- * @LastEditTime: 2024-07-22
+ * @LastEditTime: 2024-10-28
  * @Description: content
 -->
 <template>
-	<PageWrapper use-scrollbar>
-		<n-card title="menu">
-			<n-space vertical>
-				<n-switch v-model:value="accordion">
-					<template #checked> 手风琴 </template>
-					<template #unchecked> 普通 </template>
-				</n-switch>
-				<n-button @click="selectAndExpand('难吃')"> 选中第一项 </n-button>
-				<n-button @click="selectAndExpand('/components/headlessTable/basic')"> 选中第二项 </n-button>
-				<n-button @click="selectAndExpand('依然难吃')"> 选中第三项 </n-button>
-				<n-menu ref="menuInstRef" v-model:value="selectedKey" :options="options" :accordion="accordion" />
-			</n-space>
-		</n-card>
-	</PageWrapper>
+	<n-card title="menu">
+		<n-space vertical>
+			<n-switch v-model:value="accordion">
+				<template #checked> 手风琴 </template>
+				<template #unchecked> 普通 </template>
+			</n-switch>
+			<n-button @click="selectAndExpand('难吃')"> 选中第一项 </n-button>
+			<n-button @click="selectAndExpand('/components/headlessTable/basic')"> 选中第二项 </n-button>
+			<n-button @click="selectAndExpand('依然难吃')"> 选中第三项 </n-button>
+			<n-menu ref="menuInstRef" v-model:value="selectedKey" :options="options" :accordion="accordion" />
+		</n-space>
+	</n-card>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
 import type { MenuInst } from "naive-ui";
+import { defineComponent, ref } from "vue";
 
 export default defineComponent({
 	setup() {
diff --git a/src/pages/components/report/r01/index.vue b/src/pages/components/report/r01/index.vue
index 14da472..68ba933 100644
--- a/src/pages/components/report/r01/index.vue
+++ b/src/pages/components/report/r01/index.vue
@@ -1,100 +1,129 @@
 <!--
  * @Author: wangqz
  * @Date: 2024-07-22
- * @LastEditTime: 2024-08-06
+ * @LastEditTime: 2024-10-28
  * @Description: content
 -->
 <template>
-	<page-wrapper use-scrollbar>
-		<n-card>
-			<n-form ref="formRef" label-placement="left" label-width="auto" :model="formValue">
-				<n-grid :x-gap="8" :y-gap="15" cols="2 s:3 m:4 l:5 xl:6" responsive="screen">
+	<n-card>
+		<n-form ref="formRef" label-placement="left" label-width="auto" :model="formValue">
+			<n-grid :x-gap="8" :y-gap="15" cols="2 s:3 m:4 l:5 xl:6" responsive="screen">
+				<n-grid-item>
+					<n-form-item label="模糊查询" path="where" :show-feedback="false">
+						<n-input v-model:value="formValue.where" placeholder="输入关键字" />
+					</n-form-item>
+				</n-grid-item>
+				<n-grid-item>
+					<n-form-item label="姓名" path="user.name" :show-feedback="false" :rule="[{ required: true, message: '姓名必填' }]">
+						<n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
+					</n-form-item>
+				</n-grid-item>
+				<n-grid-item :span="2">
+					<n-form-item label="单据日期" :show-feedback="false" path="phone">
+						<n-date-picker v-model:value="formValue.dateRange" type="daterange" clearable />
+					</n-form-item>
+				</n-grid-item>
+				<n-grid-item>
+					<n-form-item label="收款状态" :show-feedback="false" path="phone">
+						<n-select v-model:value="formValue.saleValue" placeholder="Select" :options="generalOptions" />
+					</n-form-item>
+				</n-grid-item>
+				<n-grid-item>
+					<n-form-item label="单据状态" :show-feedback="false" path="user.name">
+						<n-select v-model:value="formValue.stateValue" placeholder="Select" :options="stateOptions" />
+					</n-form-item>
+				</n-grid-item>
+				<template v-if="filterShow">
 					<n-grid-item>
-						<n-form-item label="模糊查询" path="where" :show-feedback="false">
-							<n-input v-model:value="formValue.where" placeholder="输入关键字" />
+						<n-form-item label="电话号码" path="phone" :show-feedback="false">
+							<n-input v-model:value="formValue.phone" placeholder="电话号码" />
 						</n-form-item>
 					</n-grid-item>
 					<n-grid-item>
-						<n-form-item label="姓名" path="user.name" :show-feedback="false" :rule="[{ required: true, message: '姓名必填' }]">
-							<n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
-						</n-form-item>
-					</n-grid-item>
-					<n-grid-item :span="2">
-						<n-form-item label="单据日期" :show-feedback="false" path="phone">
-							<n-date-picker v-model:value="formValue.dateRange" type="daterange" clearable />
-						</n-form-item>
-					</n-grid-item>
-					<n-grid-item>
-						<n-form-item label="收款状态" :show-feedback="false" path="phone">
-							<n-select v-model:value="formValue.saleValue" placeholder="Select" :options="generalOptions" />
+						<n-form-item label="电话号码" path="phone" :show-feedback="false">
+							<n-input v-model:value="formValue.phone" placeholder="电话号码" />
 						</n-form-item>
 					</n-grid-item>
 					<n-grid-item>
-						<n-form-item label="单据状态" :show-feedback="false" path="user.name">
-							<n-select v-model:value="formValue.stateValue" placeholder="Select" :options="stateOptions" />
+						<n-form-item label="电话号码" path="phone" :show-feedback="false">
+							<n-input v-model:value="formValue.phone" placeholder="电话号码" />
 						</n-form-item>
 					</n-grid-item>
-					<template v-if="filterShow">
-						<n-grid-item>
-							<n-form-item label="电话号码" path="phone" :show-feedback="false">
-								<n-input v-model:value="formValue.phone" placeholder="电话号码" />
-							</n-form-item>
-						</n-grid-item>
-						<n-grid-item>
-							<n-form-item label="电话号码" path="phone" :show-feedback="false">
-								<n-input v-model:value="formValue.phone" placeholder="电话号码" />
-							</n-form-item>
-						</n-grid-item>
-						<n-grid-item>
-							<n-form-item label="电话号码" path="phone" :show-feedback="false">
-								<n-input v-model:value="formValue.phone" placeholder="电话号码" />
-							</n-form-item>
-						</n-grid-item>
-					</template>
-				</n-grid>
-				<n-flex class="m-t-sm m-b-sm" justify="space-between">
-					<n-space>
-						<i-button type="primary" :icon="CirclePlus">新增</i-button>
-						<n-button strong secondary>下载模板</n-button>
-						<n-button strong secondary>批量导入</n-button>
-						<n-button strong secondary>导出Excel</n-button>
-						<n-button strong secondary>打印</n-button>
-						<n-dropdown trigger="hover" :options="actionOpts" @select="handleSelect">
-							<n-button>更多...</n-button>
-						</n-dropdown>
-					</n-space>
-					<n-space>
-						<n-button-group>
-							<i-button attr-type="button" title="查询" @click="handleValidateClick" type="info" :icon="Search"></i-button>
-							<i-button attr-type="reset"  title="重置"  :icon="Refresh"></i-button>
-							<n-button attr-type="button" @click="filterShow = !filterShow">
-								<template #icon>
-									<Iconx :component="filterShow ? ChevronsUp : ChevronsDown" :size="16" />
-								</template>
-							</n-button>
-						</n-button-group>
-					</n-space>
-				</n-flex>
-			</n-form>
-			<n-data-table :columns="columns()" :data="table.source" :pagination="pagination" :loading="table.isLoading" />
-		</n-card>
-	</page-wrapper>
+				</template>
+			</n-grid>
+
+			<n-flex class="m-t-sm m-b-sm" justify="space-between">
+				<n-space>
+					<i-button type="primary" :icon="CirclePlus">新增</i-button>
+					<n-button strong secondary>下载模板</n-button>
+					<n-button strong secondary>批量导入</n-button>
+					<n-button strong secondary>导出Excel</n-button>
+					<n-button strong secondary>打印</n-button>
+					<n-popover trigger="click" placement="bottom">
+						<template #trigger>
+							<n-button strong secondary>列设置</n-button>
+						</template>
+						<n-checkbox-group v-model:value="checks" @update:value="setCols">
+							<n-flex justify="space-between" class="m-t-1">
+								<n-checkbox label="全选" />
+								<n-button size="tiny" type="info">保存</n-button>
+							</n-flex>
+							<n-divider dashed style="margin: 10px 0px" />
+							<VueDraggable ref="el" v-model="checkCol" @update="onUpdateCol">
+								<div v-for="item in checkCol" :key="item">
+									<n-flex v-if="item.title" class="m-t-2" justify="space-between">
+										<n-checkbox :value="item.key" :label="item.title" />
+										<Iconx :component="DragDrop"></Iconx>
+									</n-flex>
+								</div>
+							</VueDraggable>
+						</n-checkbox-group>
+					</n-popover>
+					<n-dropdown trigger="hover" :options="actionOpts" @select="handleSelect">
+						<n-button>更多...</n-button>
+					</n-dropdown>
+				</n-space>
+				<n-space>
+					<n-button-group>
+						<i-button attr-type="button" title="查询" @click="handleValidateClick" type="info" :icon="Search"></i-button>
+						<i-button attr-type="reset" title="重置" :icon="Refresh"></i-button>
+						<n-button attr-type="button" @click="filterShow = !filterShow">
+							<template #icon>
+								<Iconx :component="filterShow ? ChevronsUp : ChevronsDown" :size="16" />
+							</template>
+						</n-button>
+					</n-button-group>
+				</n-space>
+			</n-flex>
+		</n-form>
+		<n-data-table :columns="columns" :data="table.source" :pagination="pagination" :loading="table.isLoading" />
+	</n-card>
 </template>
 
 <script lang="ts" setup>
 import { getR01 } from "@/apis/internal/report";
 import { renderIcon } from "@/components/Iconx";
 import { ArrowUndoOutline, CloseOutline, Refresh, Resize, Trash } from "@vicons/ionicons5";
-import { Checks, ChevronsDown, ChevronsUp, CirclePlus, Search, Send } from "@vicons/tabler";
+import { Checks, ChevronsDown, ChevronsUp, CirclePlus, Search, Send, Tornado } from "@vicons/tabler";
 import type { DataTableCreateSummary, FormInst } from "naive-ui";
 import { Value } from "naive-ui/es/date-picker/src/interface";
 import { h } from "vue";
-import { RowData, createColumns as columns } from "./data";
+import { RowData, createColumns } from "./data";
+import { VueDraggable, useDraggable } from "vue-draggable-plus";
+import { DragDrop } from "@vicons/tabler";
+import { cloneDeep } from "@/utils";
 const { t } = useI18n();
 
 const message = useMessage();
 const formRef = ref<FormInst | null>(null);
 const filterShow = ref(true);
+const columns = ref(createColumns());
+const el = ref();
+const keys = columns.value.map((item) => item.key);
+const drag = ref([]);
+const checks = cloneDeep(keys);
+const checkCol = ref(toRaw(columns.value));
+
 const formValue = ref({
 	user: {
 		name: "",
@@ -201,5 +230,15 @@ const pagination = reactive({
 	},
 });
 const table = reactive({ source: [], isLoading: false, summary: createSummary });
+
+const onUpdateCol = (val) => {
+	columns.value = toRaw(checkCol.value);
+};
+
+const setCols = (value = []) => {
+	console.log("value log==>", value);
+	columns.value = checkCol.value.filter((item) => value.includes(item.key));
+};
+
 onQuery();
 </script>
diff --git a/src/pages/components/report/r02/index.vue b/src/pages/components/report/r02/index.vue
index 7149f86..984887d 100644
--- a/src/pages/components/report/r02/index.vue
+++ b/src/pages/components/report/r02/index.vue
@@ -1,48 +1,46 @@
 <!--
  * @Author: wangqz
  * @Date: 2024-07-22
- * @LastEditTime: 2024-07-22
+ * @LastEditTime: 2024-10-28
  * @Description: content
 -->
 <template>
-	<PageWrapper use-scrollbar>
-		<n-card>
-			<n-form ref="formRef" inline :label-width="80" :model="formValue">
-				<n-form-item label="姓名" path="user.name">
-					<n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
-				</n-form-item>
-				<n-form-item label="年龄" path="user.age">
-					<n-input v-model:value="formValue.user.age" placeholder="输入年龄" />
-				</n-form-item>
-				<n-form-item label="电话号码" path="phone">
-					<n-input v-model:value="formValue.phone" placeholder="电话号码" />
-				</n-form-item>
-				<n-form-item label="姓名" path="user.name">
-					<n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
-				</n-form-item>
-				<n-form-item label="年龄" path="user.age">
-					<n-input v-model:value="formValue.user.age" placeholder="输入年龄" />
-				</n-form-item>
-				<n-form-item label="电话号码" path="phone">
-					<n-input v-model:value="formValue.phone" placeholder="电话号码" />
-				</n-form-item>
-				<n-form-item>
-					<n-button attr-type="button" type="primary" @click="handleValidateClick"> 查询 </n-button>
-				</n-form-item>
-			</n-form>
-			<n-space>
-				<n-button>Default</n-button>
-				<n-button type="tertiary"> Tertiary </n-button>
-				<n-button type="primary"> Primary </n-button>
-				<n-button type="tertiary"> Tertiary </n-button>
-				<n-button type="tertiary"> Tertiary </n-button>
-				<n-button type="tertiary"> Tertiary </n-button>
-				<n-button type="tertiary"> Tertiary </n-button>
-			</n-space>
-			<n-divider dashed />
-			<n-data-table :columns="state.columns" :data="state.data" :summary="state.summary" size="small" :pagination="pagination" />
-		</n-card>
-	</PageWrapper>
+	<n-card>
+		<n-form ref="formRef" inline :label-width="80" :model="formValue">
+			<n-form-item label="姓名" path="user.name">
+				<n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
+			</n-form-item>
+			<n-form-item label="年龄" path="user.age">
+				<n-input v-model:value="formValue.user.age" placeholder="输入年龄" />
+			</n-form-item>
+			<n-form-item label="电话号码" path="phone">
+				<n-input v-model:value="formValue.phone" placeholder="电话号码" />
+			</n-form-item>
+			<n-form-item label="姓名" path="user.name">
+				<n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
+			</n-form-item>
+			<n-form-item label="年龄" path="user.age">
+				<n-input v-model:value="formValue.user.age" placeholder="输入年龄" />
+			</n-form-item>
+			<n-form-item label="电话号码" path="phone">
+				<n-input v-model:value="formValue.phone" placeholder="电话号码" />
+			</n-form-item>
+			<n-form-item>
+				<n-button attr-type="button" type="primary" @click="handleValidateClick"> 查询 </n-button>
+			</n-form-item>
+		</n-form>
+		<n-space>
+			<n-button>Default</n-button>
+			<n-button type="tertiary"> Tertiary </n-button>
+			<n-button type="primary"> Primary </n-button>
+			<n-button type="tertiary"> Tertiary </n-button>
+			<n-button type="tertiary"> Tertiary </n-button>
+			<n-button type="tertiary"> Tertiary </n-button>
+			<n-button type="tertiary"> Tertiary </n-button>
+		</n-space>
+		<n-divider dashed />
+		<n-data-table :columns="state.columns" :data="state.data" :summary="state.summary" size="small" :pagination="pagination" />
+	</n-card>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/pages/dashboard/index.vue b/src/pages/dashboard/index.vue
index c89980b..36ac449 100644
--- a/src/pages/dashboard/index.vue
+++ b/src/pages/dashboard/index.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import UserAnalysis from "@/pages/dashboard/components/UserAnalysis.vue";
+import APIHealthMetrics from "@/pages/dashboard/components/APIHealthMetrics.vue";
 import DataOverview from "@/pages/dashboard/components/DataOverview.vue";
 import PerformanceMetrics from "@/pages/dashboard/components/PerformanceMetrics.vue";
-import APIHealthMetrics from "@/pages/dashboard/components/APIHealthMetrics.vue";
-import PageWrapper from "@/components/PageWrapper/src/PageWrapper.vue";
+import UserAnalysis from "@/pages/dashboard/components/UserAnalysis.vue";
 
 defineOptions({
 	name: "Dashboard",
@@ -11,25 +10,22 @@ defineOptions({
 </script>
 
 <template>
-	<PageWrapper use-scrollbar>
-		<NSpace :vertical="true" :size="16">
-			<NGrid cols="24" :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
-				<NGridItem span="24 l:18">
-					<!--  数据总览 -->
-					<DataOverview />
-				</NGridItem>
-				<NGridItem span="24 l:6">
-					<!-- 性能指标和API健康指标组件 -->
-					<NSpace :vertical="true" :size="16">
-						<PerformanceMetrics />
-						<APIHealthMetrics />
-					</NSpace>
-				</NGridItem>
-			</NGrid>
-			<!-- 用户分析模块 -->
-			<UserAnalysis />
-		</NSpace>
-	</PageWrapper>
+	<NSpace :vertical="true" :size="16">
+		<NGrid cols="24" :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
+			<NGridItem span="24 l:18">
+				<!--  数据总览 -->
+				<DataOverview />
+			</NGridItem>
+			<NGridItem span="24 l:6">
+				<!-- 性能指标和API健康指标组件 -->
+				<NSpace :vertical="true" :size="16">
+					<PerformanceMetrics />
+					<APIHealthMetrics />
+				</NSpace>
+			</NGridItem>
+		</NGrid>
+		<!-- 用户分析模块 -->
+		<UserAnalysis />
+	</NSpace>
 </template>
-
 <style scoped></style>
diff --git a/src/pages/design/palette/index.vue b/src/pages/design/palette/index.vue
index bb52b54..6f693b4 100644
--- a/src/pages/design/palette/index.vue
+++ b/src/pages/design/palette/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { presetPrimaryColors } from "@/utils";
-import PageWrapper from "@/components/PageWrapper/src/PageWrapper.vue";
 import ColorPalette from "@/pages/design/palette/components/ColorPalette.vue";
+import { presetPrimaryColors } from "@/utils";
 
 defineOptions({
 	name: "PalettePage",
@@ -9,15 +8,13 @@ defineOptions({
 </script>
 
 <template>
-	<PageWrapper use-scrollbar>
-		<NGrid cols="4" :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
-			<NGridItem v-for="(color, name) in presetPrimaryColors" :key="color">
-				<NCard class="overflow-hidden">
-					<ColorPalette :key="name" :color-name="name" color-type="hex" :primary-color="color" />
-				</NCard>
-			</NGridItem>
-		</NGrid>
-	</PageWrapper>
+	<NGrid cols="4" :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
+		<NGridItem v-for="(color, name) in presetPrimaryColors" :key="color">
+			<NCard class="overflow-hidden">
+				<ColorPalette :key="name" :color-name="name" color-type="hex" :primary-color="color" />
+			</NCard>
+		</NGridItem>
+	</NGrid>
 </template>
 
 <style scoped></style>
diff --git a/src/pages/design/typography/index.vue b/src/pages/design/typography/index.vue
index e973f3b..85a1873 100644
--- a/src/pages/design/typography/index.vue
+++ b/src/pages/design/typography/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import PageWrapper from "@/components/PageWrapper/src/PageWrapper.vue";
 
 defineOptions({
 	name: "TypographyPage",
@@ -7,63 +6,62 @@ defineOptions({
 </script>
 
 <template>
-	<PageWrapper use-scrollbar>
-		<NCard>
-			<article class="article font-song chinese chinese-truegray">
-				<h1 class="article__title">中文网页字体排列方案</h1>
-				<blockquote>这是一个旨在优化<u>中文网站</u>或应用程序字体显示的项目。通过使用这个项目，您可以获得一个默认的字体排列方案，以确保在没有指定字体的情况下，页面中选择的字体尽可能符合<u>中文阅读</u>的要求。这个项目的字体排列方案是基于<u>中文阅读体验</u>的考虑，它优先选择在中文环境中广泛使用和受欢迎的字体，并根据字体支持的字形、符号以及跨平台支持来确定字体的优先级顺序。</blockquote>
+	<NCard>
+		<article class="article font-song chinese chinese-truegray">
+			<h1 class="article__title">中文网页字体排列方案</h1>
+			<blockquote>这是一个旨在优化<u>中文网站</u>或应用程序字体显示的项目。通过使用这个项目，您可以获得一个默认的字体排列方案，以确保在没有指定字体的情况下，页面中选择的字体尽可能符合<u>中文阅读</u>的要求。这个项目的字体排列方案是基于<u>中文阅读体验</u>的考虑，它优先选择在中文环境中广泛使用和受欢迎的字体，并根据字体支持的字形、符号以及跨平台支持来确定字体的优先级顺序。</blockquote>
 
-				<nav class="article__nav no-chinese">
-					<details open>
-						<summary>目录</summary>
-						<ol>
-							<li><a v-anchor="'#intro'">介绍</a></li>
-							<li><a v-anchor="'#usage'">使用方法</a></li>
-							<li>
-								<a v-anchor="'#examples'">效果演示</a>
-								<ul>
-									<li><a v-anchor="'#example-ancient'">古文</a></li>
-									<li><a v-anchor="'#example-verse'">诗词</a></li>
-									<li><a v-anchor="'#example-annotation'">行间注</a></li>
-									<li><a v-anchor="'#example-columns'">多栏排版</a></li>
-									<li><a v-anchor="'#example-vertical'">竖排排版</a></li>
-								</ul>
-							</li>
-							<li><a v-anchor="'#guidelines'">设计原则</a></li>
-							<li>
-								<a v-anchor="'#appendix'">附录</a>
-								<ol class="chinese-list-latin">
-									<li><a v-anchor="'#tags'">标签示例表</a></li>
-								</ol>
-							</li>
-						</ol>
-					</details>
-				</nav>
+			<nav class="article__nav no-chinese">
+				<details open>
+					<summary>目录</summary>
+					<ol>
+						<li><a v-anchor="'#intro'">介绍</a></li>
+						<li><a v-anchor="'#usage'">使用方法</a></li>
+						<li>
+							<a v-anchor="'#examples'">效果演示</a>
+							<ul>
+								<li><a v-anchor="'#example-ancient'">古文</a></li>
+								<li><a v-anchor="'#example-verse'">诗词</a></li>
+								<li><a v-anchor="'#example-annotation'">行间注</a></li>
+								<li><a v-anchor="'#example-columns'">多栏排版</a></li>
+								<li><a v-anchor="'#example-vertical'">竖排排版</a></li>
+							</ul>
+						</li>
+						<li><a v-anchor="'#guidelines'">设计原则</a></li>
+						<li>
+							<a v-anchor="'#appendix'">附录</a>
+							<ol class="chinese-list-latin">
+								<li><a v-anchor="'#tags'">标签示例表</a></li>
+							</ol>
+						</li>
+					</ol>
+				</details>
+			</nav>
 
-				<h2 id="intro">介绍<a v-anchor="'#intro'" class="anchor">#</a></h2>
-				<p>
-					<ruby class="chinese-ruby--inline">unocss-preset-chinese</ruby><ruby class="chinese-ruby--inline">-typography<rp>(</rp><rt lang="zh-Latn">排版</rt><rp>)</rp></ruby>是专为中文网页内容设计的排版样式增强。它基于通行的中文排版规范，可为网站的读者带来更好的内容阅读体验。它的主要特性有：
-				</p>
-				<ul>
-					<li>贴合网格的排版；</li>
-					<li>全标签样式美化；</li>
-					<li>预置古文、诗词样式；</li>
-					<li>预置多种排版样式（行间注、多栏、竖排等）；</li>
-					<li>多种预设字体族</li>
-					<li>简/繁体中文支持；</li>
-					<li>移动端支持；</li>
-					<li>……</li>
-				</ul>
-				<p>总之，用上就会变好看。</p>
+			<h2 id="intro">介绍<a v-anchor="'#intro'" class="anchor">#</a></h2>
+			<p>
+				<ruby class="chinese-ruby--inline">unocss-preset-chinese</ruby><ruby class="chinese-ruby--inline">-typography<rp>(</rp><rt lang="zh-Latn">排版</rt><rp>)</rp></ruby>是专为中文网页内容设计的排版样式增强。它基于通行的中文排版规范，可为网站的读者带来更好的内容阅读体验。它的主要特性有：
+			</p>
+			<ul>
+				<li>贴合网格的排版；</li>
+				<li>全标签样式美化；</li>
+				<li>预置古文、诗词样式；</li>
+				<li>预置多种排版样式（行间注、多栏、竖排等）；</li>
+				<li>多种预设字体族</li>
+				<li>简/繁体中文支持；</li>
+				<li>移动端支持；</li>
+				<li>……</li>
+			</ul>
+			<p>总之，用上就会变好看。</p>
 
-				<hr />
+			<hr />
 
-				<h2 id="usage">使用方法<a v-anchor="'#usage'" class="anchor">#</a></h2>
-				<p>项目地址：<a href="https://github.com/kirklin/unocss-preset-chinese">https://github.com/kirklin/unocss-preset-chinese</a>，使用方法如下：</p>
-				<ol>
-					<li>
-						在您的 UnoCss 配置文件中引入 unocss-preset-chinese 并将其添加到 presets 部分：
-						<pre><code>import presetChinese, { chineseTypography } from "unocss-preset-chinese";
+			<h2 id="usage">使用方法<a v-anchor="'#usage'" class="anchor">#</a></h2>
+			<p>项目地址：<a href="https://github.com/kirklin/unocss-preset-chinese">https://github.com/kirklin/unocss-preset-chinese</a>，使用方法如下：</p>
+			<ol>
+				<li>
+					在您的 UnoCss 配置文件中引入 unocss-preset-chinese 并将其添加到 presets 部分：
+					<pre><code>import presetChinese, { chineseTypography } from "unocss-preset-chinese";
    export default defineConfig({
      presets: [
        presetUno(),
@@ -73,56 +71,56 @@ defineOptions({
      ],
    });
           </code></pre>
-					</li>
-					<li>
-						在要作用的容器元素上增加<code>class="chinese"</code>的类名即可：
+				</li>
+				<li>
+					在要作用的容器元素上增加<code>class="chinese"</code>的类名即可：
 
-						<pre><code>&lt;article class=&quot;entry <ins>chinese</ins>&quot;&gt;
+					<pre><code>&lt;article class=&quot;entry <ins>chinese</ins>&quot;&gt;
   &lt;h1&gt;读者的角色与经典同样重要&lt;/h1&gt;
   &lt;p&gt;一切诸经，皆不过是敲门砖，是要敲开门，唤出其中的人来，此人即是你自己。&lt;/p&gt;
   ……
 &lt;/article&gt;</code></pre>
-					</li>
-				</ol>
-				<small>注：unocss-preset-chinese-typography是正文区域的样式增强，不是<i>CSS Reset</i>的替代。因此<b>不建议</b>将它作用在根标签（如<code>&lt;body&gt;</code>或<code>&lt;div id=&quot;app&quot;&gt;</code>）上。</small>
+				</li>
+			</ol>
+			<small>注：unocss-preset-chinese-typography是正文区域的样式增强，不是<i>CSS Reset</i>的替代。因此<b>不建议</b>将它作用在根标签（如<code>&lt;body&gt;</code>或<code>&lt;div id=&quot;app&quot;&gt;</code>）上。</small>
 
-				<hr />
+			<hr />
 
-				<h2 id="examples">效果示例<a v-anchor="'#examples'" class="anchor">#</a></h2>
-				<p>本页面<em>全页</em>应用了unocss-preset-chinese-typography样式，所见即所得。下面是内置的多种排版效果演示。</p>
+			<h2 id="examples">效果示例<a v-anchor="'#examples'" class="anchor">#</a></h2>
+			<p>本页面<em>全页</em>应用了unocss-preset-chinese-typography样式，所见即所得。下面是内置的多种排版效果演示。</p>
 
-				<h3 id="example-ancient">古文<a v-anchor="'#example-ancient'" class="anchor">#</a></h3>
-				<details>
-					<summary>如何使用？</summary>
-					<p>为容器元素<code>&lt;div class=&quot;chinese&quot;&gt;</code>添加名为<code>chinese--ancient</code>的class即可实现古文版式：</p>
-					<pre><code>&lt;div class=&quot;chinese chinese--ancient&quot;&gt;...&lt;/div&gt;</code></pre>
-				</details>
-				<details open>
-					<summary>示例</summary>
-					<section class="demo">
-						<div class="chinese chinese--ancient">
-							<h1>出师表</h1>
-							<p class="chinese-meta chinese-small">作者：<abbr title="字孔明">諸葛亮</abbr>（181年～234年10月8日）</p>
-							<p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
-							<p>宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理；不宜偏私，使内外异法也。</p>
-							<p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下：愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
-							<p>将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。</p>
-							<p>亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。</p>
-							<p>臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。</p>
-							<p>先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。</p>
-							<p>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。</p>
-							<p>今当远离，临表涕零，不知所言。</p>
-						</div>
-					</section>
-				</details>
+			<h3 id="example-ancient">古文<a v-anchor="'#example-ancient'" class="anchor">#</a></h3>
+			<details>
+				<summary>如何使用？</summary>
+				<p>为容器元素<code>&lt;div class=&quot;chinese&quot;&gt;</code>添加名为<code>chinese--ancient</code>的class即可实现古文版式：</p>
+				<pre><code>&lt;div class=&quot;chinese chinese--ancient&quot;&gt;...&lt;/div&gt;</code></pre>
+			</details>
+			<details open>
+				<summary>示例</summary>
+				<section class="demo">
+					<div class="chinese chinese--ancient">
+						<h1>出师表</h1>
+						<p class="chinese-meta chinese-small">作者：<abbr title="字孔明">諸葛亮</abbr>（181年～234年10月8日）</p>
+						<p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
+						<p>宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理；不宜偏私，使内外异法也。</p>
+						<p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下：愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
+						<p>将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。</p>
+						<p>亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。</p>
+						<p>臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。</p>
+						<p>先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。</p>
+						<p>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。</p>
+						<p>今当远离，临表涕零，不知所言。</p>
+					</div>
+				</section>
+			</details>
 
-				<h3 id="example-verse">诗词<a v-anchor="'#example-verse'" class="anchor">#</a></h3>
-				<details>
-					<summary>如何使用？</summary>
-					<ul>
-						<li>
-							诗词：为容器元素<code>&lt;div class=&quot;chinese&quot;&gt;</code>添加名为<code>chinese--poetry</code>的class实现诗词版式：
-							<pre><code>&lt;div class=&quot;chinese chinese--poetry&quot;&gt;
+			<h3 id="example-verse">诗词<a v-anchor="'#example-verse'" class="anchor">#</a></h3>
+			<details>
+				<summary>如何使用？</summary>
+				<ul>
+					<li>
+						诗词：为容器元素<code>&lt;div class=&quot;chinese&quot;&gt;</code>添加名为<code>chinese--poetry</code>的class实现诗词版式：
+						<pre><code>&lt;div class=&quot;chinese chinese--poetry&quot;&gt;
   &lt;h2&gt;九月九日忆山东兄弟&lt;span class=&quot;chinese-meta chinese-small&quot;&gt;[唐]&lt;abbr title=&quot;号摩诘居士&quot;&gt;王维&lt;/abbr&gt;&lt;/span&gt;&lt;/h2&gt;
   &lt;p class=&quot;chinese-x-large&quot;&gt;
     独在异乡为异客&lt;span class=&quot;chinese-hang&quot;&gt;，&lt;/span&gt;&lt;br&gt;
@@ -131,10 +129,10 @@ defineOptions({
     遍插茱萸少一人&lt;span class=&quot;chinese-hang&quot;&gt;。&lt;/span&gt;
   &lt;/p&gt;
 &lt;/div&gt;</code></pre>
-						</li>
-						<li>
-							诗节：在古文版式<code>&lt;div class=&quot;chinese chinese--ancient&quot;&gt;</code>中，为诗句添加名为<code>chinese-verse</code>的class可以将其居中显示：
-							<pre><code>&lt;div class=&quot;chinese chinese--ancient&quot;&gt;
+					</li>
+					<li>
+						诗节：在古文版式<code>&lt;div class=&quot;chinese chinese--ancient&quot;&gt;</code>中，为诗句添加名为<code>chinese-verse</code>的class可以将其居中显示：
+						<pre><code>&lt;div class=&quot;chinese chinese--ancient&quot;&gt;
   &lt;h2&gt;一剪梅&middot;红藕香残玉簟秋&lt;span class=&quot;chinese-meta chinese-small&quot;&gt;[宋]&lt;abbr title=&quot;号易安居士&quot;&gt;李清照&lt;/abbr&gt;&lt;/span&gt;&lt;/h2&gt;
   &lt;p class=&quot;chinese-verse chinese-x-large&quot;&gt;
     红藕香残玉簟秋。轻解罗裳，独上兰舟&lt;span class=&quot;chinese-hang&quot;&gt;。&lt;/span&gt;&lt;br&gt;
@@ -143,369 +141,368 @@ defineOptions({
     此情无计可消除，才下眉头，却上心头&lt;span class=&quot;chinese-hang&quot;&gt;。&lt;/span&gt;
   &lt;/p&gt;
 &lt;/div&gt;</code></pre>
-						</li>
-						<li>搭配使用标点悬挂<code>&lt;span class=&quot;chinese-hang&quot;&gt;</code>、元信息<code>&lt;span class=&quot;chinese-meta chinese-small&quot;&gt;</code>来丰富展示效果。</li>
-					</ul>
-				</details>
-				<details open>
-					<summary>示例</summary>
-					<section class="demo">
-						<div class="chinese chinese--ancient">
-							<h2>
-								一剪梅·红藕香残玉簟秋<span class="chinese-meta chinese-small">[宋]<abbr title="号易安居士">李清照</abbr></span>
-							</h2>
-							<p class="chinese-verse chinese-x-large">
-								红藕香残玉簟秋。轻解罗裳，独上兰舟<span class="chinese-hang">。</span><br />
-								云中谁寄锦书来，雁字回时，月满西楼<span class="chinese-hang">。</span><br />
-								花自飘零水自流。一种相思，两处闲愁<span class="chinese-hang">。</span><br />
-								此情无计可消除，才下眉头，却上心头<span class="chinese-hang">。</span>
-							</p>
-						</div>
-						<hr />
-						<div class="chinese chinese--poetry">
-							<h2>
-								好了歌<span class="chinese-meta chinese-small">[清]<abbr title="著曹雪芹">曹雪芹</abbr></span>
-							</h2>
-							<p class="chinese-x-large">
-								世人都晓神仙好，惟有功名忘不了；<br />
-								古今将相在何方？荒冢一堆草没了。<br />
-								世人都晓神仙好，只有金银忘不了；<br />
-								终朝只恨聚无多，及到多时眼闭了。<br />
-								世人都晓神仙好，只有姣妻忘不了；<br />
-								君生日日说恩情，君死又随人去了。<br />
-								世人都晓神仙好，只有儿孙忘不了；<br />
-								痴心父母古来多，孝顺儿孙谁见了！<br />
-							</p>
-						</div>
-					</section>
-				</details>
+					</li>
+					<li>搭配使用标点悬挂<code>&lt;span class=&quot;chinese-hang&quot;&gt;</code>、元信息<code>&lt;span class=&quot;chinese-meta chinese-small&quot;&gt;</code>来丰富展示效果。</li>
+				</ul>
+			</details>
+			<details open>
+				<summary>示例</summary>
+				<section class="demo">
+					<div class="chinese chinese--ancient">
+						<h2>
+							一剪梅·红藕香残玉簟秋<span class="chinese-meta chinese-small">[宋]<abbr title="号易安居士">李清照</abbr></span>
+						</h2>
+						<p class="chinese-verse chinese-x-large">
+							红藕香残玉簟秋。轻解罗裳，独上兰舟<span class="chinese-hang">。</span><br />
+							云中谁寄锦书来，雁字回时，月满西楼<span class="chinese-hang">。</span><br />
+							花自飘零水自流。一种相思，两处闲愁<span class="chinese-hang">。</span><br />
+							此情无计可消除，才下眉头，却上心头<span class="chinese-hang">。</span>
+						</p>
+					</div>
+					<hr />
+					<div class="chinese chinese--poetry">
+						<h2>
+							好了歌<span class="chinese-meta chinese-small">[清]<abbr title="著曹雪芹">曹雪芹</abbr></span>
+						</h2>
+						<p class="chinese-x-large">
+							世人都晓神仙好，惟有功名忘不了；<br />
+							古今将相在何方？荒冢一堆草没了。<br />
+							世人都晓神仙好，只有金银忘不了；<br />
+							终朝只恨聚无多，及到多时眼闭了。<br />
+							世人都晓神仙好，只有姣妻忘不了；<br />
+							君生日日说恩情，君死又随人去了。<br />
+							世人都晓神仙好，只有儿孙忘不了；<br />
+							痴心父母古来多，孝顺儿孙谁见了！<br />
+						</p>
+					</div>
+				</section>
+			</details>
 
-				<h3 id="example-annotation">行间注<a v-anchor="'#example-annotation'" class="anchor">#</a></h3>
-				<details>
-					<summary>如何使用？</summary>
-					<p>为容器元素<code>&lt;div class=&quot;chinese&quot;&gt;</code>添加名为<code>chinese--annotation</code>的class后，搭配<code>&lt;ruby&gt;</code>元素即可实现整齐的行间注效果：</p>
-					<pre><code>&lt;div class=&quot;chinese chinese--annotation&quot;&gt;...&lt;/div&gt;</code></pre>
-				</details>
-				<details open>
-					<summary>示例</summary>
-					<section class="demo">
-						<div class="chinese chinese--ancient chinese--annotation">
-							<h2>庖丁解牛</h2>
-							<p class="chinese-meta chinese-small">作者：<abbr title="庄子">庄周</abbr>（公元前369～公元前286年）</p>
-							<p>吾生也有涯，而知也无涯。以有涯随无涯，殆已！已而为知者，殆而已矣！为善无近名，为恶无近刑。缘督以为经，可以保身，可以全生，可以养亲，可以尽年。</p>
-							<p>
-								<u title="名丁的厨工。先秦古书往往以职业放在人名前"
-									><ruby>庖<rp>(</rp><rt lang="zh-Latn">páo</rt><rp>)</rp></ruby>丁</u
-								>为文惠君解牛，手之所触，肩之所倚，足之所履，膝之所<u title="支撑，接触"
-									><ruby>踦<rp>(</rp><rt lang="zh-Latn">yǐ</rt><rp>)</rp></ruby></u
-								>，<u title="砉然：砉，又读xū，象声词。砉然，皮骨相离的声音"
-									><ruby>砉<rp>(</rp><rt lang="zh-Latn">huā</rt><rp>)</rp></ruby>然</u
-								><ruby>向<rp>(</rp><rt lang="zh-Latn">xiǎng</rt><rp>)</rp></ruby>然，奏刀<u title="騞然：象声词，形容比砉然更大的进刀解牛声"
-									><ruby>騞<rp>(</rp><rt lang="zh-Latn">huō</rt><rp>)</rp></ruby>然</u
-								>，莫不中音。合于《桑林》之舞，乃中《经首》之会。
-							</p>
-							<p>
-								文惠君曰：「嘻，善哉！技<u title="通「盍」，何，怎样"
-									><ruby>盖<rp>(</rp><rt lang="zh-Latn">hé</rt><rp>)</rp></ruby></u
-								>至此乎？」
-							</p>
-							<p>
-								庖丁释刀对曰：「臣之所好者，道也，进乎技矣。始臣之解牛之时，所见无非牛者。三年之后，未尝见全牛也。方今之时，臣以神遇而不以目视，官知止而<u title="指精神活动">神欲</u>行。依乎<u title="指牛的生理上的天然结构">天理</u>，<u title="击入大的缝隙"
-									>批大<ruby>郤<rp>(</rp><rt lang="zh-Latn">xì</rt><rp>)</rp></ruby></u
-								>，<u title="顺着（骨节间的）空处进刀"
-									>导大<ruby>窾<rp>(</rp><rt lang="zh-Latn">kuǎn</rt><rp>)</rp></ruby></u
-								>，<u title="依">因</u>其<u title="指牛体本来的结构">固然</u>，技经肯<ruby>綮<rp>(</rp><rt lang="zh-Latn">qìng</rt><rp>)</rp></ruby>之未尝，而况大<ruby>軱<rp>(</rp><rt lang="zh-Latn">gū</rt><rp>)</rp></ruby>乎！良庖岁更刀，割也；族庖月更刀，折也。今臣之刀十九年矣，所解数千牛矣，而刀刃若新发于<ruby>硎<rp>(</rp><rt lang="zh-Latn">xíng</rt><rp>)</rp></ruby
-								>。彼节者有间，而刀刃者无厚；以无厚入有间，恢恢乎其于<em>游刃必有余地</em>矣，是以十九年而刀刃若新发于硎。虽然，每至于族，吾见其难为，<ruby>怵<rp>(</rp><rt lang="zh-Latn">chù</rt><rp>)</rp></ruby>然为戒，视为止，行为迟。动刀甚微，<ruby>謋<rp>(</rp><rt lang="zh-Latn">huò</rt><rp>)</rp></ruby>然已解，如土委地。提刀而立，为之四顾，为之<ruby>踌<rp>(</rp><rt lang="zh-Latn">chóu</rt><rp>)</rp>躇<rp>(</rp><rt lang="zh-Latn">chú</rt><rp>)</rp></ruby>满志，善刀而藏之。」
-							</p>
-							<p>文惠君曰：「善哉！吾闻庖丁之言，得养生焉。」</p>
+			<h3 id="example-annotation">行间注<a v-anchor="'#example-annotation'" class="anchor">#</a></h3>
+			<details>
+				<summary>如何使用？</summary>
+				<p>为容器元素<code>&lt;div class=&quot;chinese&quot;&gt;</code>添加名为<code>chinese--annotation</code>的class后，搭配<code>&lt;ruby&gt;</code>元素即可实现整齐的行间注效果：</p>
+				<pre><code>&lt;div class=&quot;chinese chinese--annotation&quot;&gt;...&lt;/div&gt;</code></pre>
+			</details>
+			<details open>
+				<summary>示例</summary>
+				<section class="demo">
+					<div class="chinese chinese--ancient chinese--annotation">
+						<h2>庖丁解牛</h2>
+						<p class="chinese-meta chinese-small">作者：<abbr title="庄子">庄周</abbr>（公元前369～公元前286年）</p>
+						<p>吾生也有涯，而知也无涯。以有涯随无涯，殆已！已而为知者，殆而已矣！为善无近名，为恶无近刑。缘督以为经，可以保身，可以全生，可以养亲，可以尽年。</p>
+						<p>
+							<u title="名丁的厨工。先秦古书往往以职业放在人名前"
+								><ruby>庖<rp>(</rp><rt lang="zh-Latn">páo</rt><rp>)</rp></ruby>丁</u
+							>为文惠君解牛，手之所触，肩之所倚，足之所履，膝之所<u title="支撑，接触"
+								><ruby>踦<rp>(</rp><rt lang="zh-Latn">yǐ</rt><rp>)</rp></ruby></u
+							>，<u title="砉然：砉，又读xū，象声词。砉然，皮骨相离的声音"
+								><ruby>砉<rp>(</rp><rt lang="zh-Latn">huā</rt><rp>)</rp></ruby>然</u
+							><ruby>向<rp>(</rp><rt lang="zh-Latn">xiǎng</rt><rp>)</rp></ruby>然，奏刀<u title="騞然：象声词，形容比砉然更大的进刀解牛声"
+								><ruby>騞<rp>(</rp><rt lang="zh-Latn">huō</rt><rp>)</rp></ruby>然</u
+							>，莫不中音。合于《桑林》之舞，乃中《经首》之会。
+						</p>
+						<p>
+							文惠君曰：「嘻，善哉！技<u title="通「盍」，何，怎样"
+								><ruby>盖<rp>(</rp><rt lang="zh-Latn">hé</rt><rp>)</rp></ruby></u
+							>至此乎？」
+						</p>
+						<p>
+							庖丁释刀对曰：「臣之所好者，道也，进乎技矣。始臣之解牛之时，所见无非牛者。三年之后，未尝见全牛也。方今之时，臣以神遇而不以目视，官知止而<u title="指精神活动">神欲</u>行。依乎<u title="指牛的生理上的天然结构">天理</u>，<u title="击入大的缝隙"
+								>批大<ruby>郤<rp>(</rp><rt lang="zh-Latn">xì</rt><rp>)</rp></ruby></u
+							>，<u title="顺着（骨节间的）空处进刀"
+								>导大<ruby>窾<rp>(</rp><rt lang="zh-Latn">kuǎn</rt><rp>)</rp></ruby></u
+							>，<u title="依">因</u>其<u title="指牛体本来的结构">固然</u>，技经肯<ruby>綮<rp>(</rp><rt lang="zh-Latn">qìng</rt><rp>)</rp></ruby>之未尝，而况大<ruby>軱<rp>(</rp><rt lang="zh-Latn">gū</rt><rp>)</rp></ruby>乎！良庖岁更刀，割也；族庖月更刀，折也。今臣之刀十九年矣，所解数千牛矣，而刀刃若新发于<ruby>硎<rp>(</rp><rt lang="zh-Latn">xíng</rt><rp>)</rp></ruby
+							>。彼节者有间，而刀刃者无厚；以无厚入有间，恢恢乎其于<em>游刃必有余地</em>矣，是以十九年而刀刃若新发于硎。虽然，每至于族，吾见其难为，<ruby>怵<rp>(</rp><rt lang="zh-Latn">chù</rt><rp>)</rp></ruby>然为戒，视为止，行为迟。动刀甚微，<ruby>謋<rp>(</rp><rt lang="zh-Latn">huò</rt><rp>)</rp></ruby>然已解，如土委地。提刀而立，为之四顾，为之<ruby>踌<rp>(</rp><rt lang="zh-Latn">chóu</rt><rp>)</rp>躇<rp>(</rp><rt lang="zh-Latn">chú</rt><rp>)</rp></ruby>满志，善刀而藏之。」
+						</p>
+						<p>文惠君曰：「善哉！吾闻庖丁之言，得养生焉。」</p>
+					</div>
+				</section>
+			</details>
+
+			<h3 id="example-columns">多栏排版<a v-anchor="'#example-columns'" class="anchor">#</a></h3>
+			<p>预置多种多栏布局类，可以按栏数或每栏行宽进行设置。</p>
+			<details>
+				<summary>如何使用？</summary>
+				<p>为容器元素<code>&lt;div class=&quot;chinese&quot;&gt;</code>添加名为<code>chinese--columns-2</code>的class即可实现双栏排版：</p>
+				<pre><code>&lt;div class=&quot;chinese chinese--columns-2&quot;&gt;...&lt;/div&gt;</code></pre>
+				<table>
+					<thead>
+						<tr>
+							<th style="width: 100px">方式</th>
+							<th style="width: 200px">对应类名</th>
+							<th style="width: 300px">可选数值</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>按栏目数量</td>
+							<td><code>chinese--columns-3</code></td>
+							<td>不限，但是建议不超过5</td>
+						</tr>
+						<tr>
+							<td>按每栏行宽</td>
+							<td><code>chinese--columns-width-16</code></td>
+							<td>建议为4的倍数</td>
+						</tr>
+					</tbody>
+				</table>
+			</details>
+			<details open>
+				<summary>示例</summary>
+				<NCard>
+					<figure class="card card--multi-column">
+						<section class="chinese--columns-2">
+							<p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
+							<p>宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理；不宜偏私，使内外异法也。</p>
+							<p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下：愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
+							<p>将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。</p>
+							<p>亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。</p>
+							<p>臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。</p>
+							<p>先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。</p>
+							<p>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。</p>
+							<p>今当远离，临表涕零，不知所言。</p>
+						</section>
+						<figcaption>多栏排版演示</figcaption>
+					</figure>
+				</NCard>
+			</details>
+
+			<h3 id="example-vertical">竖排排版<a v-anchor="'#example-vertical'" class="anchor">#</a></h3>
+			<p>预置传统的竖排（直排）方向排版，同样贴合栅格。</p>
+			<details>
+				<summary>如何使用？</summary>
+				<p>为容器元素<code>&lt;div class=&quot;chinese&quot;&gt;</code>添加名为<code>chinese--vertical</code>的class即可实现竖排布局：</p>
+				<pre><code>&lt;div class=&quot;chinese chinese--vertical&quot;&gt;...&lt;/div&gt;</code></pre>
+			</details>
+			<details open>
+				<summary>示例</summary>
+				<NCard>
+					<figure class="card card--vertical">
+						<div class="card__vertical-container">
+							<section class="chinese--vertical chinese--ancient">
+								<h1>出師表</h1>
+								<p class="chinese-small">作者：<abbr title="字孔明">諸葛亮</abbr>（181年－234年10月8日）</p>
+								<p>先帝創業未半，而中道崩殂；今天下三分，益州疲弊，此誠危急存亡之秋也﹗然侍衞之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。</p>
+								<p>誠宜開張聖聽，以光先帝遺德，恢弘志士之氣﹔不宜妄自菲薄，引喻失義，以塞忠諫之路也。</p>
+								<p>宮中、府中，俱為一體；陟罰臧否，不宜異同。若有作姦、犯科，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。</p>
+								<p>侍中、侍郎郭攸之、費禕、董允等，此皆良實，志慮忠純，是以先帝簡拔以遺陛下。愚以為宮中之事，事無大小，悉以咨之，然後施行，必能裨補闕漏，有所廣益。將軍向寵，性行淑均，曉暢軍事，試用於昔日，先帝稱之曰「能」，是以眾議舉寵為督。愚以為營中之事，悉以咨之，必能使行陣和睦，優劣得所。</p>
+								<p>親賢臣，遠小人，此先漢所以興隆也﹔親小人，遠賢臣，此後漢所以傾頹也。先帝在時，每與臣論此事，未嘗不歎息痛恨於桓、靈也！侍中、尚書、長史、參軍，此悉貞良死節之臣，願陛下親之、信之，則漢室之隆，可計日而待也。</p>
+								<p>
+									臣本布衣，躬耕於南陽，苟全性命於亂世，不求聞達於諸侯。先帝不以臣卑鄙，猥自枉屈，三顧臣於草廬之中，諮臣以當世之事；由是感激，遂許先帝以驅馳。後值傾覆，受任於敗軍之際，奉命於危難之間，爾來二十有一年矣。先帝知臣謹慎，故臨崩寄臣以大事也。受命以來，夙夜憂歎，恐託付不效，以傷先帝之明。故五月渡瀘，深入不毛。今南方已定，兵甲已足，當獎率三軍，北定中原，庶竭駑鈍，攘除姦凶，興復漢室，還於舊都。此臣所以報先帝而忠陛下之職分也。至於斟酌損益，進盡忠言，則攸之、禕、允之任也。
+								</p>
+								<p>願陛下託臣以討賊興復之效；不效，則治臣之罪，以告先帝之靈。若無興德之言，則責攸之、禕、允等之慢，以彰其咎。陛下亦宜自謀，以諮諏善道，察納雅言，深追先帝遺詔。臣不勝受恩感激。今當遠離，臨表涕零，不知所言！</p>
+							</section>
 						</div>
-					</section>
-				</details>
+						<figcaption>竖排排版演示</figcaption>
+					</figure>
+				</NCard>
+			</details>
+
+			<hr />
 
-				<h3 id="example-columns">多栏排版<a v-anchor="'#example-columns'" class="anchor">#</a></h3>
-				<p>预置多种多栏布局类，可以按栏数或每栏行宽进行设置。</p>
-				<details>
-					<summary>如何使用？</summary>
-					<p>为容器元素<code>&lt;div class=&quot;chinese&quot;&gt;</code>添加名为<code>chinese--columns-2</code>的class即可实现双栏排版：</p>
-					<pre><code>&lt;div class=&quot;chinese chinese--columns-2&quot;&gt;...&lt;/div&gt;</code></pre>
+			<h2 id="guidelines">设计原则<a v-anchor="'#guidelines'" class="anchor">#</a></h2>
+			<p>它不作为一个CSS Reset出现，而是根据通行的中文排版规范，对网页正文区域进行排版样式增强。</p>
+			<h3>文字</h3>
+			<p>
+				参考《中文排版需求<sup><a id="ref-01" v-anchor="'#fn-01'">[1]</a></sup
+				>》中描述的常用书籍排版字体，提供了黑体、宋体和<u title="以正文宋体、标题楷体构成的搭配">传统</u>三种字体风格，前两者分别对应无衬线、衬线字体族。文字默认采用16px作为标准字号。在标题等文字较大的情况下，会适当地增加字间距以便获得更好地可读性。
+			</p>
+			<details>
+				<summary>查看字体风格详细对照表</summary>
+				<section class="section">
 					<table>
+						<caption>
+							各字体族下不同标签对应的字体
+						</caption>
 						<thead>
 							<tr>
-								<th style="width: 100px">方式</th>
-								<th style="width: 200px">对应类名</th>
-								<th style="width: 300px">可选数值</th>
+								<td style="width: 60px" />
+								<th style="width: 60px">黑体</th>
+								<th style="width: 60px">宋体</th>
+								<th style="width: 60px">传统</th>
+								<th style="width: 380px">备注</th>
 							</tr>
 						</thead>
 						<tbody>
 							<tr>
-								<td>按栏目数量</td>
-								<td><code>chinese--columns-3</code></td>
-								<td>不限，但是建议不超过5</td>
-							</tr>
-							<tr>
-								<td>按每栏行宽</td>
-								<td><code>chinese--columns-width-16</code></td>
-								<td>建议为4的倍数</td>
-							</tr>
-						</tbody>
-					</table>
-				</details>
-				<details open>
-					<summary>示例</summary>
-					<NCard>
-						<figure class="card card--multi-column">
-							<section class="chinese--columns-2">
-								<p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
-								<p>宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理；不宜偏私，使内外异法也。</p>
-								<p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下：愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
-								<p>将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。</p>
-								<p>亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。</p>
-								<p>臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。</p>
-								<p>先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。</p>
-								<p>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。</p>
-								<p>今当远离，临表涕零，不知所言。</p>
-							</section>
-							<figcaption>多栏排版演示</figcaption>
-						</figure>
-					</NCard>
-				</details>
-
-				<h3 id="example-vertical">竖排排版<a v-anchor="'#example-vertical'" class="anchor">#</a></h3>
-				<p>预置传统的竖排（直排）方向排版，同样贴合栅格。</p>
-				<details>
-					<summary>如何使用？</summary>
-					<p>为容器元素<code>&lt;div class=&quot;chinese&quot;&gt;</code>添加名为<code>chinese--vertical</code>的class即可实现竖排布局：</p>
-					<pre><code>&lt;div class=&quot;chinese chinese--vertical&quot;&gt;...&lt;/div&gt;</code></pre>
-				</details>
-				<details open>
-					<summary>示例</summary>
-					<NCard>
-						<figure class="card card--vertical">
-							<div class="card__vertical-container">
-								<section class="chinese--vertical chinese--ancient">
-									<h1>出師表</h1>
-									<p class="chinese-small">作者：<abbr title="字孔明">諸葛亮</abbr>（181年－234年10月8日）</p>
-									<p>先帝創業未半，而中道崩殂；今天下三分，益州疲弊，此誠危急存亡之秋也﹗然侍衞之臣，不懈於內；忠志之士，忘身於外者，蓋追先帝之殊遇，欲報之於陛下也。</p>
-									<p>誠宜開張聖聽，以光先帝遺德，恢弘志士之氣﹔不宜妄自菲薄，引喻失義，以塞忠諫之路也。</p>
-									<p>宮中、府中，俱為一體；陟罰臧否，不宜異同。若有作姦、犯科，及為忠善者，宜付有司，論其刑賞，以昭陛下平明之治；不宜偏私，使內外異法也。</p>
-									<p>侍中、侍郎郭攸之、費禕、董允等，此皆良實，志慮忠純，是以先帝簡拔以遺陛下。愚以為宮中之事，事無大小，悉以咨之，然後施行，必能裨補闕漏，有所廣益。將軍向寵，性行淑均，曉暢軍事，試用於昔日，先帝稱之曰「能」，是以眾議舉寵為督。愚以為營中之事，悉以咨之，必能使行陣和睦，優劣得所。</p>
-									<p>親賢臣，遠小人，此先漢所以興隆也﹔親小人，遠賢臣，此後漢所以傾頹也。先帝在時，每與臣論此事，未嘗不歎息痛恨於桓、靈也！侍中、尚書、長史、參軍，此悉貞良死節之臣，願陛下親之、信之，則漢室之隆，可計日而待也。</p>
-									<p>
-										臣本布衣，躬耕於南陽，苟全性命於亂世，不求聞達於諸侯。先帝不以臣卑鄙，猥自枉屈，三顧臣於草廬之中，諮臣以當世之事；由是感激，遂許先帝以驅馳。後值傾覆，受任於敗軍之際，奉命於危難之間，爾來二十有一年矣。先帝知臣謹慎，故臨崩寄臣以大事也。受命以來，夙夜憂歎，恐託付不效，以傷先帝之明。故五月渡瀘，深入不毛。今南方已定，兵甲已足，當獎率三軍，北定中原，庶竭駑鈍，攘除姦凶，興復漢室，還於舊都。此臣所以報先帝而忠陛下之職分也。至於斟酌損益，進盡忠言，則攸之、禕、允之任也。
-									</p>
-									<p>願陛下託臣以討賊興復之效；不效，則治臣之罪，以告先帝之靈。若無興德之言，則責攸之、禕、允等之慢，以彰其咎。陛下亦宜自謀，以諮諏善道，察納雅言，深追先帝遺詔。臣不勝受恩感激。今當遠離，臨表涕零，不知所言！</p>
-								</section>
-							</div>
-							<figcaption>竖排排版演示</figcaption>
-						</figure>
-					</NCard>
-				</details>
-
-				<hr />
-
-				<h2 id="guidelines">设计原则<a v-anchor="'#guidelines'" class="anchor">#</a></h2>
-				<p>它不作为一个CSS Reset出现，而是根据通行的中文排版规范，对网页正文区域进行排版样式增强。</p>
-				<h3>文字</h3>
-				<p>
-					参考《中文排版需求<sup><a id="ref-01" v-anchor="'#fn-01'">[1]</a></sup
-					>》中描述的常用书籍排版字体，提供了黑体、宋体和<u title="以正文宋体、标题楷体构成的搭配">传统</u>三种字体风格，前两者分别对应无衬线、衬线字体族。文字默认采用16px作为标准字号。在标题等文字较大的情况下，会适当地增加字间距以便获得更好地可读性。
-				</p>
-				<details>
-					<summary>查看字体风格详细对照表</summary>
-					<section class="section">
-						<table>
-							<caption>
-								各字体族下不同标签对应的字体
-							</caption>
-							<thead>
-								<tr>
-									<td style="width: 60px" />
-									<th style="width: 60px">黑体</th>
-									<th style="width: 60px">宋体</th>
-									<th style="width: 60px">传统</th>
-									<th style="width: 380px">备注</th>
-								</tr>
-							</thead>
-							<tbody>
-								<tr>
-									<th>标题</th>
-									<td rowspan="7">黑体</td>
-									<td rowspan="7">宋体</td>
-									<td>楷体</td>
-									<td>
-										<section>
-											<h1>记忆中的站台</h1>
-										</section>
-									</td>
-								</tr>
-								<tr>
-									<th>正文</th>
-									<td>宋体</td>
-									<td>
-										<section>
-											<p>那是一个风雨交加的夜晚。</p>
-										</section>
-									</td>
-								</tr>
-								<tr>
-									<th>引用</th>
-									<td>楷体</td>
-									<td>
-										<section>
-											<blockquote>锣鼓喧天，鞭炮齐鸣，红旗招展，人山人海。</blockquote>
-										</section>
-									</td>
-								</tr>
-								<tr>
-									<th>强调</th>
-									<td>宋体</td>
-									<td>
-										<section>
-											<p>父亲<em>特意</em>嘱咐了我两句。</p>
-										</section>
-									</td>
-								</tr>
-								<tr>
-									<th>对话</th>
-									<td>楷体</td>
-									<td>
-										<section>
-											<p>他说：<q>我买几个橘子去。你就在此地，不要走动。</q></p>
-										</section>
-									</td>
-								</tr>
-								<tr>
-									<th>图例</th>
-									<td>黑体</td>
-									<td>
-										<section>
-											<figure>
-												<!--                      <img src="./assets/orange.jpg" alt="" style="width: 200px;"> -->
-												<figcaption>橘子</figcaption>
-											</figure>
-										</section>
-									</td>
-								</tr>
-								<tr>
-									<th>表头</th>
-									<td>黑体</td>
-									<td>
-										<section>
-											<table>
-												<caption>
-													当时的情形
-												</caption>
-												<tr>
-													<th>角色</th>
-													<th>物品</th>
-												</tr>
-												<tr>
-													<td>父亲</td>
-													<td>橘子</td>
-												</tr>
-												<tr>
-													<td>我</td>
-													<td>车票</td>
-												</tr>
-											</table>
-										</section>
-									</td>
-								</tr>
-								<tr>
-									<th>角标</th>
-									<td>黑体</td>
-									<td>黑体</td>
-									<td>黑体</td>
-									<td>鲁迅<sup>[1]</sup>曾经没有说过</td>
-								</tr>
-							</tbody>
-						</table>
-					</section>
-				</details>
-				<h3>标点</h3>
-				<p>参考《中文排版需求》制定符号样式。唯一的差异在于简体中文一律采用直角引号（「」）替代弯引号（“”），这样可以保持字符等宽。</p>
-				<h3>间距</h3>
-				<p>为保持页面元素总是贴合垂直栅格，块级元素（段落、列表、表格等）采用一行行高作为底边距，半行行高作为顶边距。标题根据亲密性原则采用相反的边距设计。</p>
-
-				<hr />
-
-				<h2 id="appendix">附录<a v-anchor="'#appendix'" class="anchor">#</a></h2>
-				<h3 id="tags">标签示例表<a v-anchor="'#tags'" class="anchor">#</a></h3>
-				<details open>
-					<summary>查看标签示例表</summary>
-					<section class="section">
-						<table>
-							<caption>
-								常用标签样式示例表
-							</caption>
-							<tr>
-								<th style="width: 72px">类型</th>
-								<th style="width: 320px">标签</th>
-								<th style="width: 240px">效果</th>
-							</tr>
-							<tr>
-								<td>链接</td>
-								<td><code>&lt;a href=&quot;https://github.com/kirklin/unocss-preset-chinese&quot; title=&quot;赫蹏&quot;&gt;unocss-preset-chinese&lt;/a&gt;</code></td>
-								<td><a href="https://github.com/kirklin/unocss-preset-chinese" title="unocss-preset-chinese">unocss-preset-chinese</a></td>
-							</tr>
-							<tr>
-								<td>缩写</td>
-								<td><code>&lt;abbr title=&quot;Cascading Style Sheets&quot;&gt;CSS&lt;/abbr&gt;</code></td>
-								<td><abbr title="Cascading Style Sheets">CSS</abbr></td>
-							</tr>
-							<tr>
-								<td>代码</td>
-								<td><code>&lt;code&gt;.chinese { star: 5; }&lt;/code&gt;</code></td>
-								<td><code>.chinese { star: 5; }</code></td>
-							</tr>
-							<tr>
-								<td>专名号</td>
-								<td><code>此时来自&lt;u title=&quot;位于山东省聊城市阳谷县城东&quot;&gt;景阳冈&lt;/u&gt;的&lt;u&gt;武松&lt;/u&gt;大喝一声：&lt;q&gt;纳命来！&lt;/q&gt;</code></td>
-								<td>此时来自<u title="位于山东省聊城市阳谷县城东">景阳冈</u>的<u>武松</u>大喝一声：<q>纳命来！</q></td>
-							</tr>
-							<tr>
-								<td>文本变动</td>
-								<td><code>我写错&lt;del datetime=&quot;17:00:00&quot;&gt;拉&lt;/del&gt;&lt;ins datetime=&quot;18:15:00&quot;&gt;啦&lt;/ins&gt;！</code></td>
-								<td>我写错<del datetime="17:00:00">拉</del><ins datetime="18:15:00">啦</ins>！</td>
+								<th>标题</th>
+								<td rowspan="7">黑体</td>
+								<td rowspan="7">宋体</td>
+								<td>楷体</td>
+								<td>
+									<section>
+										<h1>记忆中的站台</h1>
+									</section>
+								</td>
 							</tr>
 							<tr>
-								<td>文本更新</td>
-								<td><code>在陌生的城市里迷路，所以最后我们决定跟着&lt;s&gt;导航&lt;/s&gt;地图。</code></td>
-								<td>在陌生的城市里迷路，所以最后我们决定跟着<s>导航</s>地图。</td>
+								<th>正文</th>
+								<td>宋体</td>
+								<td>
+									<section>
+										<p>那是一个风雨交加的夜晚。</p>
+									</section>
+								</td>
 							</tr>
 							<tr>
-								<td>引号</td>
-								<td><code>她说：&lt;q&gt;嘿，你好。&lt;/q&gt;</code></td>
-								<td>她说：<q>嘿，你好。</q></td>
+								<th>引用</th>
+								<td>楷体</td>
+								<td>
+									<section>
+										<blockquote>锣鼓喧天，鞭炮齐鸣，红旗招展，人山人海。</blockquote>
+									</section>
+								</td>
 							</tr>
 							<tr>
-								<td>术语</td>
-								<td><code>在固定版面内，&lt;dfn&gt;排版&lt;/dfn&gt;(英语：Typesetting) 摆置各种不同类型的资料。</code></td>
-								<td>在固定版面内，<dfn>排版</dfn>(英语：Typesetting) 摆置各种不同类型的资料。</td>
+								<th>强调</th>
+								<td>宋体</td>
+								<td>
+									<section>
+										<p>父亲<em>特意</em>嘱咐了我两句。</p>
+									</section>
+								</td>
 							</tr>
 							<tr>
-								<td>标记</td>
-								<td><code>这个公式<mark>很重要</mark>，请记住。</code></td>
-								<td>这个公式<mark>很重要</mark>，请记住。</td>
+								<th>对话</th>
+								<td>楷体</td>
+								<td>
+									<section>
+										<p>他说：<q>我买几个橘子去。你就在此地，不要走动。</q></p>
+									</section>
+								</td>
 							</tr>
 							<tr>
-								<td>强调</td>
-								<td><code>相信自己，<em>你可以做到</em>！</code></td>
-								<td>相信自己，<em>你可以做到</em>！</td>
+								<th>图例</th>
+								<td>黑体</td>
+								<td>
+									<section>
+										<figure>
+											<!--                      <img src="./assets/orange.jpg" alt="" style="width: 200px;"> -->
+											<figcaption>橘子</figcaption>
+										</figure>
+									</section>
+								</td>
 							</tr>
 							<tr>
-								<td>着重号</td>
+								<th>表头</th>
+								<td>黑体</td>
 								<td>
-									<code>我们<span class="chinese-em">绝不会</span>放弃。</code>
+									<section>
+										<table>
+											<caption>
+												当时的情形
+											</caption>
+											<tr>
+												<th>角色</th>
+												<th>物品</th>
+											</tr>
+											<tr>
+												<td>父亲</td>
+												<td>橘子</td>
+											</tr>
+											<tr>
+												<td>我</td>
+												<td>车票</td>
+											</tr>
+										</table>
+									</section>
 								</td>
-								<td>我们<span class="chinese-em">绝不会</span>放弃。</td>
 							</tr>
-						</table>
-					</section>
-				</details>
-			</article>
-		</NCard>
-	</PageWrapper>
+							<tr>
+								<th>角标</th>
+								<td>黑体</td>
+								<td>黑体</td>
+								<td>黑体</td>
+								<td>鲁迅<sup>[1]</sup>曾经没有说过</td>
+							</tr>
+						</tbody>
+					</table>
+				</section>
+			</details>
+			<h3>标点</h3>
+			<p>参考《中文排版需求》制定符号样式。唯一的差异在于简体中文一律采用直角引号（「」）替代弯引号（“”），这样可以保持字符等宽。</p>
+			<h3>间距</h3>
+			<p>为保持页面元素总是贴合垂直栅格，块级元素（段落、列表、表格等）采用一行行高作为底边距，半行行高作为顶边距。标题根据亲密性原则采用相反的边距设计。</p>
+
+			<hr />
+
+			<h2 id="appendix">附录<a v-anchor="'#appendix'" class="anchor">#</a></h2>
+			<h3 id="tags">标签示例表<a v-anchor="'#tags'" class="anchor">#</a></h3>
+			<details open>
+				<summary>查看标签示例表</summary>
+				<section class="section">
+					<table>
+						<caption>
+							常用标签样式示例表
+						</caption>
+						<tr>
+							<th style="width: 72px">类型</th>
+							<th style="width: 320px">标签</th>
+							<th style="width: 240px">效果</th>
+						</tr>
+						<tr>
+							<td>链接</td>
+							<td><code>&lt;a href=&quot;https://github.com/kirklin/unocss-preset-chinese&quot; title=&quot;赫蹏&quot;&gt;unocss-preset-chinese&lt;/a&gt;</code></td>
+							<td><a href="https://github.com/kirklin/unocss-preset-chinese" title="unocss-preset-chinese">unocss-preset-chinese</a></td>
+						</tr>
+						<tr>
+							<td>缩写</td>
+							<td><code>&lt;abbr title=&quot;Cascading Style Sheets&quot;&gt;CSS&lt;/abbr&gt;</code></td>
+							<td><abbr title="Cascading Style Sheets">CSS</abbr></td>
+						</tr>
+						<tr>
+							<td>代码</td>
+							<td><code>&lt;code&gt;.chinese { star: 5; }&lt;/code&gt;</code></td>
+							<td><code>.chinese { star: 5; }</code></td>
+						</tr>
+						<tr>
+							<td>专名号</td>
+							<td><code>此时来自&lt;u title=&quot;位于山东省聊城市阳谷县城东&quot;&gt;景阳冈&lt;/u&gt;的&lt;u&gt;武松&lt;/u&gt;大喝一声：&lt;q&gt;纳命来！&lt;/q&gt;</code></td>
+							<td>此时来自<u title="位于山东省聊城市阳谷县城东">景阳冈</u>的<u>武松</u>大喝一声：<q>纳命来！</q></td>
+						</tr>
+						<tr>
+							<td>文本变动</td>
+							<td><code>我写错&lt;del datetime=&quot;17:00:00&quot;&gt;拉&lt;/del&gt;&lt;ins datetime=&quot;18:15:00&quot;&gt;啦&lt;/ins&gt;！</code></td>
+							<td>我写错<del datetime="17:00:00">拉</del><ins datetime="18:15:00">啦</ins>！</td>
+						</tr>
+						<tr>
+							<td>文本更新</td>
+							<td><code>在陌生的城市里迷路，所以最后我们决定跟着&lt;s&gt;导航&lt;/s&gt;地图。</code></td>
+							<td>在陌生的城市里迷路，所以最后我们决定跟着<s>导航</s>地图。</td>
+						</tr>
+						<tr>
+							<td>引号</td>
+							<td><code>她说：&lt;q&gt;嘿，你好。&lt;/q&gt;</code></td>
+							<td>她说：<q>嘿，你好。</q></td>
+						</tr>
+						<tr>
+							<td>术语</td>
+							<td><code>在固定版面内，&lt;dfn&gt;排版&lt;/dfn&gt;(英语：Typesetting) 摆置各种不同类型的资料。</code></td>
+							<td>在固定版面内，<dfn>排版</dfn>(英语：Typesetting) 摆置各种不同类型的资料。</td>
+						</tr>
+						<tr>
+							<td>标记</td>
+							<td><code>这个公式<mark>很重要</mark>，请记住。</code></td>
+							<td>这个公式<mark>很重要</mark>，请记住。</td>
+						</tr>
+						<tr>
+							<td>强调</td>
+							<td><code>相信自己，<em>你可以做到</em>！</code></td>
+							<td>相信自己，<em>你可以做到</em>！</td>
+						</tr>
+						<tr>
+							<td>着重号</td>
+							<td>
+								<code>我们<span class="chinese-em">绝不会</span>放弃。</code>
+							</td>
+							<td>我们<span class="chinese-em">绝不会</span>放弃。</td>
+						</tr>
+					</table>
+				</section>
+			</details>
+		</article>
+	</NCard>
 </template>
 
 <style scoped>
diff --git a/src/pages/directives/copy/index.vue b/src/pages/directives/copy/index.vue
index d93aa18..47e319e 100644
--- a/src/pages/directives/copy/index.vue
+++ b/src/pages/directives/copy/index.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import PageWrapper from "@/components/PageWrapper/src/PageWrapper.vue";
 
 defineOptions({
 	name: "Copy",
@@ -13,7 +12,6 @@ function handleCopy() {
 </script>
 
 <template>
-	<PageWrapper>
 		<NCard :title="t('page.copyDirective.copyDirective')">
 			<div v-copy="123">copyMe</div>
 			<NInputGroup>
@@ -23,7 +21,6 @@ function handleCopy() {
 				</NButton>
 			</NInputGroup>
 		</NCard>
-	</PageWrapper>
 </template>
 
 <style scoped></style>
diff --git a/src/pages/directives/ripple/index.vue b/src/pages/directives/ripple/index.vue
index 621b230..15f4a86 100644
--- a/src/pages/directives/ripple/index.vue
+++ b/src/pages/directives/ripple/index.vue
@@ -1,38 +1,28 @@
 <script setup lang="ts">
 import HeroImg from "./images/ripple/hero.gif";
-import PageWrapper from "@/components/PageWrapper/src/PageWrapper.vue";
 
 defineOptions({
-  name: "Ripple",
+	name: "Ripple",
 });
 
 const { t } = useI18n();
 </script>
 
 <template>
-  <PageWrapper class="flex flex-row space-x-2xl">
-    <NCard v-ripple content-class="bg-primary rounded-2xl">
-      <div class="space-y-3xl text-white text-chinese">
-        <h1 class="text-7xl">
-          {{ t("page.rippleDirective.ripple") }}
-        </h1>
-        <p class="text-xl">
-          {{ t("page.rippleDirective.description1") }}
-        </p>
-        <p class="text-xl">
-          {{ t("page.rippleDirective.description2") }}
-        </p>
-      </div>
-    </NCard>
-    <img
-      :src="HeroImg"
-      class="rounded-2xl object-cover min-h-[56px] max-h-[400px] w-1/2"
-      alt="Two containers that display a bounded and unbounded ripple on interaction."
-      title="A bounded and unbounded ripple."
-    >
-  </PageWrapper>
+	<NCard v-ripple content-class="bg-primary rounded-2xl">
+		<div class="space-y-3xl text-white text-chinese">
+			<h1 class="text-7xl">
+				{{ t("page.rippleDirective.ripple") }}
+			</h1>
+			<p class="text-xl">
+				{{ t("page.rippleDirective.description1") }}
+			</p>
+			<p class="text-xl">
+				{{ t("page.rippleDirective.description2") }}
+			</p>
+		</div>
+	</NCard>
+	<img :src="HeroImg" class="rounded-2xl object-cover min-h-[56px] max-h-[400px] w-1/2" alt="Two containers that display a bounded and unbounded ripple on interaction." title="A bounded and unbounded ripple." />
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/pages/login/components/AuthForm/index.vue b/src/pages/login/components/AuthForm/index.vue
index 2384094..aadd258 100644
--- a/src/pages/login/components/AuthForm/index.vue
+++ b/src/pages/login/components/AuthForm/index.vue
@@ -60,11 +60,11 @@ onBeforeMount(() => {
 
     <div class="social-button-group flex flex-col gap-4 mb-12">
       <NButton strong secondary size="large">
-        <CAIcon icon="tabler:brand-qq" class="mr-4" />
+        <Iconx icon="tabler:brand-qq" class="mr-4" />
         {{ t('page.login.form.socialButtons.signInWithQQ') }}
       </NButton>
       <NButton strong secondary>
-        <CAIcon icon="tabler:brand-wechat" class="mr-4" />
+        <Iconx icon="tabler:brand-wechat" class="mr-4" />
         {{ t('page.login.form.socialButtons.signInWithWeChat') }}
       </NButton>
     </div>
diff --git a/src/pages/menu/index.vue b/src/pages/menu/index.vue
index c9aedc4..28866bd 100644
--- a/src/pages/menu/index.vue
+++ b/src/pages/menu/index.vue
@@ -1,18 +1,16 @@
 <template>
-	<PageWrapper use-scrollbar>
-		<n-card title="menu">
-			<n-space vertical>
-				<n-switch v-model:value="accordion">
-					<template #checked> 手风琴 </template>
-					<template #unchecked> 普通 </template>
-				</n-switch>
-				<n-button @click="selectAndExpand('难吃')"> 选中第一项 </n-button>
-				<n-button @click="selectAndExpand('/components/headlessTable/basic')"> 选中第二项 </n-button>
-				<n-button @click="selectAndExpand('依然难吃')"> 选中第三项 </n-button>
-				<n-menu ref="menuInstRef" v-model:value="selectedKey" :options="options" :accordion="accordion" />
-			</n-space>
-		</n-card>
-	</PageWrapper>
+	<n-card title="menu">
+		<n-space vertical>
+			<n-switch v-model:value="accordion">
+				<template #checked> 手风琴 </template>
+				<template #unchecked> 普通 </template>
+			</n-switch>
+			<n-button @click="selectAndExpand('难吃')"> 选中第一项 </n-button>
+			<n-button @click="selectAndExpand('/components/headlessTable/basic')"> 选中第二项 </n-button>
+			<n-button @click="selectAndExpand('依然难吃')"> 选中第三项 </n-button>
+			<n-menu ref="menuInstRef" v-model:value="selectedKey" :options="options" :accordion="accordion" />
+		</n-space>
+	</n-card>
 </template>
 
 <script lang="ts">
diff --git a/src/pages/profile/index.vue b/src/pages/profile/index.vue
index 3914924..6de804f 100644
--- a/src/pages/profile/index.vue
+++ b/src/pages/profile/index.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import type { UserInfo } from "@/types";
-import { useUserStore } from "@/store/modules/user";
 import ToolTipper from "@/components/ActionIcon/src/ToolTipper.vue";
-import PageWrapper from "@/components/PageWrapper/src/PageWrapper.vue";
+import { useUserStore } from "@/store/modules/user";
+import type { UserInfo } from "@/types";
 
 const ROLE_ICON = "tabler:user";
 const LOCATION_ICON = "tabler:map-pin";
@@ -15,63 +14,58 @@ const userInfo = toRef<UserInfo | null>(userStore.getUserInfo);
 </script>
 
 <template>
-  <PageWrapper>
-    <NCard class="header flex flex-col" :content-style="{ padding: 0 }">
-      <div class="user-info flex flex-wrap gap-8 p-8 pb-6 border-b border-solid">
-        <div class="avatar relative h-24">
-          <NAvatar round :src="userInfo?.avatarUrl" :size="80" />
-        </div>
-        <div class="info grow flex flex-col justify-center">
-          <div class="name mb-4">
-            <h1 class="lg:text-2xl md:text-lg sm:text-base font-bold">
-              {{ userInfo?.fullName }}
-            </h1>
-          </div>
-          <NSpace size="large">
-            <ToolTipper tooltip-text="Roles" placement="top">
-              <div class="tooltip-wrap flex items-center">
-                <CAIcon :name="ROLE_ICON" />
-                <span class="line-height-1 ml-2">{{ userInfo?.roles }}</span>
-              </div>
-            </ToolTipper>
-            <ToolTipper tooltip-text="Location" placement="top">
-              <div class="tooltip-wrap flex items-center">
-                <CAIcon :name="LOCATION_ICON" />
-                <span class="line-height-1 ml-2">China</span>
-              </div>
-            </ToolTipper>
-            <ToolTipper tooltip-text="Email" placement="top">
-              <div class="tooltip-wrap flex items-center">
-                <CAIcon :name="MAIL_ICON" />
-                <span class="line-height-1 ml-2">{{ userInfo?.email }}</span>
-              </div>
-            </ToolTipper>
-            <ToolTipper tooltip-text="Contacts" placement="top">
-              <div class="tooltip-wrap flex items-center">
-                <CAIcon :name="PHONE_ICON" />
-                <span class="line-height-1 ml-2">{{ userInfo?.phone }}</span>
-              </div>
-            </ToolTipper>
-          </NSpace>
-        </div>
-      </div>
-      <div class="section-selector p-5 md:p-6 pt-0">
-        <NTabs v-model:value="tabActive">
-          <NTab name="settings">
-            Settings
-          </NTab>
-        </NTabs>
-      </div>
-    </NCard>
-    <div class="main mt-8">
-      <NTabs v-model:value="tabActive" :tab-style="{ display: 'none' }" animated>
-        <NTabPane name="settings">
-          <!-- TODO ProfileSettings -->
-        </NTabPane>
-      </NTabs>
-    </div>
-  </PageWrapper>
+	<NCard class="header flex flex-col" :content-style="{ padding: 0 }">
+		<div class="user-info flex flex-wrap gap-8 p-8 pb-6 border-b border-solid">
+			<div class="avatar relative h-24">
+				<NAvatar round :src="userInfo?.avatarUrl" :size="80" />
+			</div>
+			<div class="info grow flex flex-col justify-center">
+				<div class="name mb-4">
+					<h1 class="lg:text-2xl md:text-lg sm:text-base font-bold">
+						{{ userInfo?.fullName }}
+					</h1>
+				</div>
+				<NSpace size="large">
+					<ToolTipper tooltip-text="Roles" placement="top">
+						<div class="tooltip-wrap flex items-center">
+							<Iconx :component="ROLE_ICON" />
+							<span class="line-height-1 ml-2">{{ userInfo?.roles }}</span>
+						</div>
+					</ToolTipper>
+					<ToolTipper tooltip-text="Location" placement="top">
+						<div class="tooltip-wrap flex items-center">
+							<Iconx :component="LOCATION_ICON" />
+							<span class="line-height-1 ml-2">China</span>
+						</div>
+					</ToolTipper>
+					<ToolTipper tooltip-text="Email" placement="top">
+						<div class="tooltip-wrap flex items-center">
+							<Iconx :component="MAIL_ICON" />
+							<span class="line-height-1 ml-2">{{ userInfo?.email }}</span>
+						</div>
+					</ToolTipper>
+					<ToolTipper tooltip-text="Contacts" placement="top">
+						<div class="tooltip-wrap flex items-center">
+							<Iconx :component="PHONE_ICON" />
+							<span class="line-height-1 ml-2">{{ userInfo?.phone }}</span>
+						</div>
+					</ToolTipper>
+				</NSpace>
+			</div>
+		</div>
+		<div class="section-selector p-5 md:p-6 pt-0">
+			<NTabs v-model:value="tabActive">
+				<NTab name="settings"> Settings </NTab>
+			</NTabs>
+		</div>
+	</NCard>
+	<div class="main mt-8">
+		<NTabs v-model:value="tabActive" :tab-style="{ display: 'none' }" animated>
+			<NTabPane name="settings">
+				<!-- TODO ProfileSettings -->
+			</NTabPane>
+		</NTabs>
+	</div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/src/pages/result/fail.vue b/src/pages/result/fail.vue
index 646f9c4..198267f 100644
--- a/src/pages/result/fail.vue
+++ b/src/pages/result/fail.vue
@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { PageConstants } from "@/constants";
-import PageWrapper from "@/components/PageWrapper/src/PageWrapper.vue";
 
 const router = useRouter();
 const { t } = useI18n();
 </script>
 
 <template>
-  <PageWrapper>
     <NCard>
       <NSpace vertical size="large">
         <NResult status="error" :title="t('page.result.failPage.title')" :sub-title="t('page.result.failPage.subTitle')">
@@ -49,7 +47,6 @@ const { t } = useI18n();
         </NCard>
       </NSpace>
     </NCard>
-  </PageWrapper>
 </template>
 
 <style scoped>
diff --git a/src/pages/result/success.vue b/src/pages/result/success.vue
index d48ff46..2dccded 100644
--- a/src/pages/result/success.vue
+++ b/src/pages/result/success.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { PageConstants } from "@/constants";
 import { formatToDateTime } from "@/utils";
-import PageWrapper from "@/components/PageWrapper/src/PageWrapper.vue";
 
 const router = useRouter();
 const { t } = useI18n();
@@ -12,7 +11,6 @@ const state = reactive({
 </script>
 
 <template>
-  <PageWrapper>
     <NCard>
       <NSpace vertical size="large">
         <NResult status="success" :title="t('page.result.successPage.title')" :sub-title="t('page.result.successPage.subTitle')">
@@ -56,5 +54,4 @@ const state = reactive({
         </NCard>
       </NSpace>
     </NCard>
-  </PageWrapper>
 </template>
diff --git a/src/styles/src/index.css b/src/styles/src/index.css
index 9e1146d..2200fe3 100644
--- a/src/styles/src/index.css
+++ b/src/styles/src/index.css
@@ -6,14 +6,7 @@
 html {
 	scrollbar-gutter: auto;
 }
-
+body,
 #app {
 	height: 100vh;
-}
-.app-logo {
-	height: 59px;
-}
-
-.max-h-context {
-	max-height: calc(100vh - 8rem);
-}
+}
\ No newline at end of file