chore(release): 0.0.5

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.5](https://github.com/honghuangdc/soybean-admin/compare/v0.0.4...v0.0.5) (2021-11-28)
+
+
+### Features
+
+* **projects:** 新增组件页面：按钮、卡片示例 ([bdc39af](https://github.com/honghuangdc/soybean-admin/commit/bdc39aff1b05845cbcfcab8d40620d7b8ba52d13))
+
+
+### Bug Fixes
+
+* **components:** 修复HorizontalLayout布局 ([9fb641f](https://github.com/honghuangdc/soybean-admin/commit/9fb641f71e74e054c84cda8e18969d1168ef2903))
+
 ### [0.0.4](https://github.com/honghuangdc/soybean-admin/compare/v0.0.3...v0.0.4) (2021-11-25)
 
 

build/plugins/iconify.ts

@@ -6,5 +6,5 @@ export default [
   Components({
     resolvers: [IconsResolver({ componentPrefix: 'icon' })]
   }),
-  Icons()
+  Icons({ scale: 1, defaultClass: 'inline-block' })
 ];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soybean-admin",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "author": {
     "name": "Soybean",
     "email": "honghuangdc@gmail.com",
@@ -32,35 +32,35 @@
   "dependencies": {
     "@antv/g2plot": "^2.3.40",
     "@better-scroll/core": "^2.4.2",
-    "@vueuse/core": "^7.0.0",
+    "@vueuse/core": "^7.1.2",
     "axios": "^0.24.0",
     "chroma-js": "^2.1.2",
     "clipboard": "^2.0.8",
     "dayjs": "^1.10.7",
     "form-data": "^4.0.0",
-    "naive-ui": "^2.21.0",
+    "naive-ui": "^2.21.1",
     "pinia": "^2.0.4",
     "print-js": "^1.6.0",
     "qs": "^6.10.1",
-    "swiper": "^7.3.0",
+    "swiper": "^7.3.1",
     "vditor": "^3.8.7",
     "vue": "^3.2.22",
     "vue-router": "^4.0.12",
     "wangeditor": "^4.7.9",
-    "xgplayer": "^2.31.2"
+    "xgplayer": "^2.31.3"
   },
   "devDependencies": {
     "@amap/amap-jsapi-types": "^0.0.8",
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
-    "@iconify/json": "^1.1.431",
+    "@iconify/json": "^1.1.434",
     "@iconify/vue": "^3.1.1",
     "@types/bmapgl": "^0.0.4",
     "@types/chroma-js": "^2.1.3",
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
-    "@vitejs/plugin-vue": "^1.9.4",
+    "@vitejs/plugin-vue": "^1.10.1",
     "@vue/compiler-sfc": "^3.2.22",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
@@ -75,14 +75,14 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.1.1",
     "husky": "^7.0.4",
-    "lint-staged": "^12.1.0",
+    "lint-staged": "^12.1.2",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.0",
     "rollup-plugin-visualizer": "^5.5.2",
-    "sass": "^1.43.4",
+    "sass": "^1.43.5",
     "typescript": "^4.5.2",
-    "unplugin-icons": "^0.12.18",
+    "unplugin-icons": "^0.12.20",
     "unplugin-vue-components": "^0.17.2",
     "vite": "~2.5.10",
     "vite-plugin-html": "^2.1.1",

src/components/custom/ButtonTab/index.vue

@@ -1,18 +1,6 @@
 <template>
   <div
-    class="
+    class="relative flex-center h-30px pl-14px border-1px border-[#e5e7eb] dark:border-[#ffffff3d] rounded-2px transition-border-color duration-300 ease-in-out cursor-pointer"
-      relative
-      flex-center
-      h-30px
-      pl-14px
-      border-1px border-[#e5e7eb]
-      dark:border-[#ffffff3d]
-      rounded-2px
-      transition-border-color
-      duration-300
-      ease-in-out
-      cursor-pointer
-    "
     :class="[closable ? 'pr-6px' : 'pr-14px']"
     :style="buttonStyle"
     @mouseenter="setTrue"

src/interface/common/route.ts

@@ -1,26 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-/** 路由描述 */
-export interface CustomRouteMeta {
-  /** 路由名称 */
-  title?: string;
-  /** 缓存页面 */
-  keepAlive?: boolean;
-  /** 页面100%视高 */
-  fullPage?: boolean;
-  /** 不作为菜单 */
-  isNotMenu?: boolean;
-  /** 菜单和面包屑对应的图标 */
-  icon?: string;
-  /** 导入的路由模块排序，可用于菜单的排序 */
-  order?: number;
-}
-
-/** 路由配置 */
-export type CustomRoute = RouteRecordRaw & { meta: CustomRouteMeta };
-
 /** 导入的路由模块 */
-export type ImportedRouteModules = Record<string, { default: CustomRoute; [key: string]: any }>;
+export type ImportedRouteModules = Record<string, { default: RouteRecordRaw; [key: string]: any }>;
 
 /** 路由声明的key */
 export type RouteKey =
@@ -37,17 +18,19 @@ export type RouteKey =
   | 'document_vue'
   | 'document_vite'
   | 'document_naive'
+  | 'plugin'
+  | 'plugin_map'
+  | 'plugin_video'
+  | 'plugin_editor'
+  | 'plugin_editor_quill'
+  | 'plugin_editor_markdown'
+  | 'plugin_copy'
+  | 'plugin_icon'
+  | 'plugin_print'
+  | 'plugin_swiper'
   | 'component'
-  | 'component_map'
+  | 'component_button'
-  | 'component_video'
+  | 'component_card'
-  | 'component_editor'
-  | 'component_editor_quill'
-  | 'component_editor_markdown'
-  | 'component_swiper'
-  | 'feat'
-  | 'feat_copy'
-  | 'feat_icon'
-  | 'feat_print'
   | 'multi-menu'
   | 'multi-menu_first'
   | 'multi-menu_first_second'

src/layouts/BasicLayout/components/HorizontalLayout/index.vue

@@ -1,19 +1,17 @@
 <template>
-  <n-layout :native-scrollbar="false" :content-style="scrollbarContentStyle" class="h-full">
+  <n-layout ref="scrollbar" :native-scrollbar="false" :content-style="scrollbarContentStyle" class="h-full">
     <n-layout-header :inverted="headerInverted" :position="headerPosition" :class="{ 'z-11': theme.fixedHeaderAndTab }">
       <global-header :show-logo="true" :show-menu-collape="false" :show-menu="true" class="relative z-2" />
       <global-tab v-if="theme.multiTabStyle.visible" />
     </n-layout-header>
     <space-placeholder />
-    <n-layout-content ref="scrollbar" class="flex-1" :native-scrollbar="false" :content-style="scrollbarContentStyle">
     <global-content />
     <global-footer />
-    </n-layout-content>
   </n-layout>
 </template>
 
 <script setup lang="ts">
-import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui';
+import { NLayout, NLayoutHeader } from 'naive-ui';
 import { useThemeStore } from '@/store';
 import { useLayoutConfig } from '@/composables';
 import { GlobalHeader, GlobalContent, GlobalFooter, GlobalTab, SpacePlaceholder } from '@/layouts/common';

src/layouts/RouterViewLayout/index.vue

@@ -1,6 +0,0 @@
-<template>
-  <router-view />
-</template>
-
-<script setup lang="ts"></script>
-<style scoped></style>

src/layouts/common/GlobalHeader/components/GlobalBreadcrumb.vue

@@ -61,7 +61,7 @@ function generateBreadcrumb() {
 function recursionBreadcrumb(routeMatched: RouteLocationMatched[]) {
   const list: Breadcrumb[] = [];
   routeMatched.forEach(item => {
-    if (!item.meta?.isNotMenu) {
+    if (!item.meta?.notAsMenu) {
       const routeName = item.name as RouteKey;
       const breadcrumItem: Breadcrumb = {
         key: routeName,

src/layouts/common/GlobalMenu/index.vue

@@ -32,16 +32,22 @@ const activeKey = computed(() => route.name as string);
 const expandedKeys = ref<string[]>(getExpendedKeys());
 
 function getExpendedKeys() {
-  const keys: string[] = [];
+  const keys = menus.map(menu => getActiveKeysInMenus(menu)).flat();
-  route.matched.forEach(item => {
-    if (item.children && item.children.length) {
-      keys.push(item.name as string);
-    }
-  });
   return keys;
 }
 
-function handleUpdateMenu(key: string, item: MenuOption) {
+function getActiveKeysInMenus(menu: GlobalMenuOption) {
+  const keys: string[] = [];
+  if (activeKey.value.includes(menu.routeName)) {
+    keys.push(menu.routeName);
+  }
+  if (menu.children) {
+    keys.push(...menu.children.map(item => getActiveKeysInMenus(item as GlobalMenuOption)).flat());
+  }
+  return keys;
+}
+
+function handleUpdateMenu(_key: string, item: MenuOption) {
   const menuItem = item as GlobalMenuOption;
   router.push(menuItem.routePath);
 }

src/layouts/common/MixSider/components/MixMenuDrawer.vue

@@ -1,17 +1,6 @@
 <template>
   <div
-    class="
+    class="drawer-shadow absolute-lt flex-col-stretch h-full overflow-hidden bg-white dark:bg-dark transition-width duration-300 ease-in-out"
-      drawer-shadow
-      absolute-lt
-      flex-col-stretch
-      h-full
-      overflow-hidden
-      bg-white
-      dark:bg-dark
-      transition-width
-      duration-300
-      ease-in-out
-    "
     :style="{ width: showDrawer ? theme.menuStyle.width + 'px' : '0px' }"
   >
     <header class="header-height flex-y-center justify-between">

src/layouts/common/MixSider/index.vue

@@ -69,7 +69,7 @@ const activeParentRouteName = ref(getActiveRouteName());
 
 function getActiveRouteName() {
   let name = '';
-  const menuMatched = route.matched.filter(item => !item.meta.isNotMenu);
+  const menuMatched = route.matched.filter(item => !item.meta?.notAsMenu);
   if (menuMatched.length) {
     name = menuMatched[0].name as string;
   }

src/layouts/common/SettingDrawer/components/DrawerButton/index.vue

@@ -1,20 +1,6 @@
 <template>
   <div
-    class="
+    class="fixed flex-center top-240px right-14px z-10000 w-48px h-48px bg-primary rounded-4px cursor-pointer transition-right duration-300 ease-in-out"
-      fixed
-      flex-center
-      top-240px
-      right-14px
-      z-10000
-      w-48px
-      h-48px
-      bg-primary
-      rounded-4px
-      cursor-pointer
-      transition-right
-      duration-300
-      ease-in-out
-    "
     :class="{ '!right-330px': app.settingDrawer.visible }"
     @click="handleClickButton"
   >

src/layouts/common/VerticalMixSider/components/MixMenuDrawer.vue

@@ -1,17 +1,6 @@
 <template>
   <div
-    class="
+    class="drawer-shadow absolute-lt flex-col-stretch h-full overflow-hidden bg-white dark:bg-dark transition-width duration-300 ease-in-out"
-      drawer-shadow
-      absolute-lt
-      flex-col-stretch
-      h-full
-      overflow-hidden
-      bg-white
-      dark:bg-dark
-      transition-width
-      duration-300
-      ease-in-out
-    "
     :style="{ width: showDrawer ? theme.menuStyle.width + 'px' : '0px' }"
   >
     <header class="header-height flex-y-center justify-between">

src/layouts/common/VerticalMixSider/index.vue

@@ -69,7 +69,7 @@ const activeParentRouteName = ref(getActiveRouteName());
 
 function getActiveRouteName() {
   let name = '';
-  const menuMatched = route.matched.filter(item => !item.meta.isNotMenu);
+  const menuMatched = route.matched.filter(item => !item.meta?.notAsMenu);
   if (menuMatched.length) {
     name = menuMatched[0].name as string;
   }

src/layouts/index.ts

@@ -1,5 +1,4 @@
 import BasicLayout from './BasicLayout/index.vue';
 import BlankLayout from './BlankLayout/index.vue';
-import RouterViewLayout from './RouterViewLayout/index.vue';
 
-export { BasicLayout, BlankLayout, RouterViewLayout };
+export { BasicLayout, BlankLayout };

src/plugins/assets.ts

@@ -1,8 +1,8 @@
 import 'virtual:windi.css';
-import '../styles/css/global.css';
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
+import '../styles/css/global.css';
 
 /** 引入静态资源 */
 export default function setupAssets() {}

src/router/constant/index.ts

@@ -108,93 +108,109 @@ const routeConstMap = new Map<RouteKey, RouteConst>([
     }
   ],
   [
-    'component',
+    'plugin',
     {
-      name: 'component',
+      name: 'plugin',
-      path: '/component',
+      path: '/plugins',
-      title: '组件插件'
+      title: '插件示例'
     }
   ],
   [
-    'component_map',
+    'plugin_map',
     {
-      name: 'component_map',
+      name: 'plugin_map',
-      path: '/component/map',
+      path: '/plugin/map',
-      title: '地图插件'
+      title: '地图'
     }
   ],
   [
-    'component_video',
+    'plugin_video',
     {
-      name: 'component_video',
+      name: 'plugin_video',
-      path: '/component/video',
+      path: '/plugin/video',
-      title: '视频插件'
+      title: '视频'
     }
   ],
   [
-    'component_editor',
+    'plugin_editor',
     {
-      name: 'component_editor',
+      name: 'plugin_editor',
-      path: '/component/editor',
+      path: '/plugin/editor',
       title: '编辑器'
     }
   ],
   [
-    'component_editor_quill',
+    'plugin_editor_quill',
     {
-      name: 'component_editor_quill',
+      name: 'plugin_editor_quill',
-      path: '/component/editor/quill',
+      path: '/plugin/editor/quill',
       title: '富文本编辑器'
     }
   ],
   [
-    'component_editor_markdown',
+    'plugin_editor_markdown',
     {
-      name: 'component_editor_markdown',
+      name: 'plugin_editor_markdown',
-      path: '/component/editor/markdown',
+      path: '/plugin/editor/markdown',
       title: 'markdown编辑器'
     }
   ],
   [
-    'component_swiper',
+    'plugin_swiper',
     {
-      name: 'component_swiper',
+      name: 'plugin_swiper',
-      path: '/component/swiper',
+      path: '/plugin/swiper',
       title: 'Swiper插件'
     }
   ],
   [
-    'feat',
+    'plugin_copy',
     {
-      name: 'feat',
+      name: 'plugin_copy',
-      path: '/feat',
+      path: '/plugin/copy',
-      title: '功能示例'
-    }
-  ],
-  [
-    'feat_copy',
-    {
-      name: 'feat_copy',
-      path: '/feat/copy',
       title: '剪贴板'
     }
   ],
   [
-    'feat_icon',
+    'plugin_icon',
     {
-      name: 'feat_icon',
+      name: 'plugin_icon',
-      path: '/feat/icon',
+      path: '/plugin/icon',
       title: '图标'
     }
   ],
   [
-    'feat_print',
+    'plugin_print',
     {
-      name: 'feat_print',
+      name: 'plugin_print',
-      path: '/feat/print',
+      path: '/plugin/print',
       title: '打印'
     }
   ],
+  [
+    'component',
+    {
+      name: 'component',
+      path: '/component',
+      title: '组件示例'
+    }
+  ],
+  [
+    'component_button',
+    {
+      name: 'component_button',
+      path: '/component/button',
+      title: '按钮'
+    }
+  ],
+  [
+    'component_card',
+    {
+      name: 'component_card',
+      path: '/component/card',
+      title: '卡片'
+    }
+  ],
   [
     'multi-menu',
     {

src/router/modules/about.ts

@@ -1,27 +1,29 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { setSingleRoute } from '@/utils';
 import { BasicLayout } from '@/layouts';
-import About from '@/views/about/index.vue';
+import { About } from '@/views';
 import { getRouteConst, routeName } from '../constant';
 
 const { name, path, title } = getRouteConst('about');
 
-const ABOUT: CustomRoute = setSingleRoute({
+const about: RouteRecordRaw = setSingleRoute({
   route: {
     name,
     path,
     component: About,
     meta: {
-      requiresAuth: true,
       title,
+      requiresAuth: true,
+      keepAlive: true,
       icon: 'fluent:book-information-24-regular'
     }
   },
   container: BasicLayout,
-  meta: {
+  containerMeta: {
+    title,
     order: 7
   },
   notFoundName: routeName('not-found')
 });
 
-export default ABOUT;
+export default about;

src/router/modules/component.ts

@@ -1,87 +1,40 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
-import { BasicLayout, RouterViewLayout } from '@/layouts';
+import { BasicLayout } from '@/layouts';
-import ComponentMap from '@/views/component/map/index.vue';
+import { ComponentButton, ComponentCard } from '@/views';
-import ComponentVideo from '@/views/component/video/index.vue';
-import EditorQuill from '@/views/component/editor/quill/index.vue';
-import EditorMarkdown from '@/views/component/editor/markdown/index.vue';
-import ComponentSwiper from '@/views/component/swiper/index.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const COMPONENT: CustomRoute = {
+const component: RouteRecordRaw = {
   name: routeName('component'),
   path: routePath('component'),
   component: BasicLayout,
-  redirect: { name: routeName('component_map') },
+  redirect: { name: routeName('component_button') },
   meta: {
-    requiresAuth: true,
     title: routeTitle('component'),
     icon: 'fluent:app-store-24-regular',
-    order: 3
+    order: 4
   },
   children: [
     {
-      name: routeName('component_map'),
+      name: routeName('component_button'),
-      path: routePath('component_map'),
+      path: routePath('component_button'),
-      component: ComponentMap,
+      component: ComponentButton,
       meta: {
+        title: routeTitle('component_button'),
         requiresAuth: true,
-        title: routeTitle('component_map'),
+        keepAlive: true
-        fullPage: true
       }
     },
     {
-      name: routeName('component_video'),
+      name: routeName('component_card'),
-      path: routePath('component_video'),
+      path: routePath('component_card'),
-      component: ComponentVideo,
+      component: ComponentCard,
       meta: {
+        title: routeTitle('component_card'),
         requiresAuth: true,
-        title: routeTitle('component_video'),
+        keepAlive: true
-        fullPage: true
-      }
-    },
-    {
-      name: routeName('component_editor'),
-      path: routePath('component_editor'),
-      component: RouterViewLayout,
-      redirect: { name: routeName('component_editor_quill') },
-      meta: {
-        requiresAuth: true,
-        title: routeTitle('component_editor'),
-        fullPage: true
-      },
-      children: [
-        {
-          name: routeName('component_editor_quill'),
-          path: routePath('component_editor_quill'),
-          component: EditorQuill,
-          meta: {
-            requiresAuth: true,
-            title: routeTitle('component_editor_quill'),
-            fullPage: true
-          }
-        },
-        {
-          name: routeName('component_editor_markdown'),
-          path: routePath('component_editor_markdown'),
-          component: EditorMarkdown,
-          meta: {
-            requiresAuth: true,
-            title: routeTitle('component_editor_markdown'),
-            fullPage: true
-          }
-        }
-      ]
-    },
-    {
-      name: routeName('component_swiper'),
-      path: routePath('component_swiper'),
-      component: ComponentSwiper,
-      meta: {
-        requiresAuth: true,
-        title: routeTitle('component_swiper')
       }
     }
   ]
 };
 
-export default COMPONENT;
+export default component;

src/router/modules/dashboard.ts

@@ -1,10 +1,9 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts';
-import DashboardAnalysis from '@/views/dashboard/analysis/index.vue';
+import { DashboardAnalysis, DashboardWorkbench } from '@/views';
-import DashboardWorkbench from '@/views/dashboard/workbench/index.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const DASHBOARD: CustomRoute = {
+const dashboard: RouteRecordRaw = {
   name: routeName('dashboard'),
   path: routePath('dashboard'),
   component: BasicLayout,
@@ -38,4 +37,4 @@ const DASHBOARD: CustomRoute = {
   ]
 };
 
-export default DASHBOARD;
+export default dashboard;

src/router/modules/document.ts

@@ -1,11 +1,9 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts';
-import DocumentVue from '@/views/document/vue/index.vue';
+import { DocumentVue, DocumentVite, DocumentNaive } from '@/views';
-import DocumentVite from '@/views/document/vite/index.vue';
-import DocumentNaive from '@/views/document/naive/index.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const DOCUMENT: CustomRoute = {
+const document: RouteRecordRaw = {
   name: routeName('document'),
   path: routePath('document'),
   component: BasicLayout,
@@ -51,4 +49,4 @@ const DOCUMENT: CustomRoute = {
   ]
 };
 
-export default DOCUMENT;
+export default document;

src/router/modules/exception.ts

@@ -1,11 +1,9 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { BasicLayout } from '@/layouts';
-import Exception403 from '@/views/system/exception/403.vue';
+import { NoPermission, NotFound, ServiceError } from '@/views';
-import Exception404 from '@/views/system/exception/404.vue';
-import Exception500 from '@/views/system/exception/500.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const EXCEPTION: CustomRoute = {
+const exception: RouteRecordRaw = {
   name: routeName('exception'),
   path: routePath('exception'),
   component: BasicLayout,
@@ -20,7 +18,7 @@ const EXCEPTION: CustomRoute = {
     {
       name: routeName('exception_403'),
       path: routePath('exception_403'),
-      component: Exception403,
+      component: NoPermission,
       meta: {
         requiresAuth: true,
         title: routeTitle('exception_403'),
@@ -30,7 +28,7 @@ const EXCEPTION: CustomRoute = {
     {
       name: routeName('exception_404'),
       path: routePath('exception_404'),
-      component: Exception404,
+      component: NotFound,
       meta: {
         requiresAuth: true,
         title: routeTitle('exception_404'),
@@ -40,7 +38,7 @@ const EXCEPTION: CustomRoute = {
     {
       name: routeName('exception_500'),
       path: routePath('exception_500'),
-      component: Exception500,
+      component: ServiceError,
       meta: {
         requiresAuth: true,
         title: routeTitle('exception_500'),
@@ -50,4 +48,4 @@ const EXCEPTION: CustomRoute = {
   ]
 };
 
-export default EXCEPTION;
+export default exception;

src/router/modules/feat.ts

@@ -1,51 +0,0 @@
-import type { CustomRoute } from '@/interface';
-import { BasicLayout } from '@/layouts';
-import FeatCopy from '@/views/feat/copy/index.vue';
-import FeatIcon from '@/views/feat/icon/index.vue';
-import FeatPrint from '@/views/feat/print/index.vue';
-import { routeName, routePath, routeTitle } from '../constant';
-
-const FEAT: CustomRoute = {
-  name: routeName('feat'),
-  path: routePath('feat'),
-  component: BasicLayout,
-  redirect: { name: routeName('feat_copy') },
-  meta: {
-    requiresAuth: true,
-    title: routeTitle('feat'),
-    icon: 'ic:round-repeat',
-    order: 4
-  },
-  children: [
-    {
-      name: routeName('feat_copy'),
-      path: routePath('feat_copy'),
-      component: FeatCopy,
-      meta: {
-        requiresAuth: true,
-        title: routeTitle('feat_copy'),
-        fullPage: true
-      }
-    },
-    {
-      name: routeName('feat_icon'),
-      path: routePath('feat_icon'),
-      component: FeatIcon,
-      meta: {
-        requiresAuth: true,
-        title: routeTitle('feat_icon')
-      }
-    },
-    {
-      name: routeName('feat_print'),
-      path: routePath('feat_print'),
-      component: FeatPrint,
-      meta: {
-        requiresAuth: true,
-        title: routeTitle('feat_print')
-      }
-    }
-  ]
-};
-
-export default FEAT;

src/router/modules/multi-menu.ts

@@ -1,9 +1,9 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
-import { BasicLayout, RouterViewLayout } from '@/layouts';
+import { BasicLayout } from '@/layouts';
 import MultiMenuFirstSecond from '@/views/multi-menu/first/second/index.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 
-const MULTI_MENU: CustomRoute = {
+const multiMenu: RouteRecordRaw = {
   name: routeName('multi-menu'),
   path: routePath('multi-menu'),
   component: BasicLayout,
@@ -17,12 +17,9 @@ const MULTI_MENU: CustomRoute = {
     {
       name: routeName('multi-menu_first'),
       path: routePath('multi-menu_first'),
-      component: RouterViewLayout,
       redirect: { name: routeName('multi-menu_first_second') },
       meta: {
-        keepAlive: true,
+        title: routeTitle('multi-menu_first')
-        requiresAuth: true,
-        title: routeTitle('multi-menu_first_second')
       },
       children: [
         {
@@ -30,9 +27,9 @@ const MULTI_MENU: CustomRoute = {
           path: routePath('multi-menu_first_second'),
           component: MultiMenuFirstSecond,
           meta: {
-            keepAlive: true,
-            requiresAuth: true,
             title: routeTitle('multi-menu_first_second'),
+            requiresAuth: true,
+            keepAlive: true,
             fullPage: true
           }
         }
@@ -41,4 +38,4 @@ const MULTI_MENU: CustomRoute = {
   ]
 };
 
-export default MULTI_MENU;
+export default multiMenu;

src/router/modules/plugin.ts

@@ -0,0 +1,118 @@
+import type { RouteRecordRaw } from 'vue-router';
+import { BasicLayout } from '@/layouts';
+import {
+  PluginMap,
+  PluginVideo,
+  PluginEditorQuill,
+  PluginEditorMarkdown,
+  PluginSwiper,
+  PluginCopy,
+  PluginIcon,
+  PluginPrint
+} from '@/views';
+
+import { routeName, routePath, routeTitle } from '../constant';
+
+const plugin: RouteRecordRaw = {
+  name: routeName('plugin'),
+  path: routePath('plugin'),
+  component: BasicLayout,
+  redirect: { name: routeName('plugin_map') },
+  meta: {
+    requiresAuth: true,
+    title: routeTitle('plugin'),
+    icon: 'clarity:plugin-line',
+    order: 3
+  },
+  children: [
+    {
+      name: routeName('plugin_map'),
+      path: routePath('plugin_map'),
+      component: PluginMap,
+      meta: {
+        requiresAuth: true,
+        title: routeTitle('plugin_map'),
+        fullPage: true
+      }
+    },
+    {
+      name: routeName('plugin_video'),
+      path: routePath('plugin_video'),
+      component: PluginVideo,
+      meta: {
+        requiresAuth: true,
+        title: routeTitle('plugin_video'),
+        fullPage: true
+      }
+    },
+    {
+      name: routeName('plugin_editor'),
+      path: routePath('plugin_editor'),
+      redirect: { name: routeName('plugin_editor_quill') },
+      meta: {
+        title: routeTitle('plugin_editor')
+      },
+      children: [
+        {
+          name: routeName('plugin_editor_quill'),
+          path: routePath('plugin_editor_quill'),
+          component: PluginEditorQuill,
+          meta: {
+            requiresAuth: true,
+            title: routeTitle('plugin_editor_quill'),
+            fullPage: true
+          }
+        },
+        {
+          name: routeName('plugin_editor_markdown'),
+          path: routePath('plugin_editor_markdown'),
+          component: PluginEditorMarkdown,
+          meta: {
+            requiresAuth: true,
+            title: routeTitle('plugin_editor_markdown'),
+            fullPage: true
+          }
+        }
+      ]
+    },
+    {
+      name: routeName('plugin_swiper'),
+      path: routePath('plugin_swiper'),
+      component: PluginSwiper,
+      meta: {
+        requiresAuth: true,
+        title: routeTitle('plugin_swiper')
+      }
+    },
+    {
+      name: routeName('plugin_copy'),
+      path: routePath('plugin_copy'),
+      component: PluginCopy,
+      meta: {
+        requiresAuth: true,
+        title: routeTitle('plugin_copy'),
+        fullPage: true
+      }
+    },
+    {
+      name: routeName('plugin_icon'),
+      path: routePath('plugin_icon'),
+      component: PluginIcon,
+      meta: {
+        requiresAuth: true,
+        title: routeTitle('plugin_icon')
+      }
+    },
+    {
+      name: routeName('plugin_print'),
+      path: routePath('plugin_print'),
+      component: PluginPrint,
+      meta: {
+        requiresAuth: true,
+        title: routeTitle('plugin_print')
+      }
+    }
+  ]
+};
+
+export default plugin;

src/router/modules/website.ts

@@ -1,12 +1,12 @@
-import type { CustomRoute } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
 import { setSingleRoute } from '@/utils';
 import { BlankLayout } from '@/layouts';
-import Website from '@/views/website/index.vue';
+import { Website } from '@/views';
 import { getRouteConst, routeName } from '../constant';
 
 const { name, path, title } = getRouteConst('website');
 
-const WEBSITE: CustomRoute = setSingleRoute({
+const website: RouteRecordRaw = setSingleRoute({
   route: {
     name,
     path,
@@ -14,14 +14,15 @@ const WEBSITE: CustomRoute = setSingleRoute({
     meta: {
       title,
       icon: 'codicon:remote-explorer',
-      isNotMenu: true
+      notAsMenu: true
     }
   },
   container: BlankLayout,
-  meta: {
+  containerMeta: {
+    title,
     order: 8
   },
   notFoundName: routeName('not-found')
 });
 
-export default WEBSITE;
+export default website;

src/router/routes/constant-routes.ts

@@ -1,10 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
 import { BlankLayout } from '@/layouts';
 import type { LoginModuleType } from '@/interface';
-import Login from '@/views/system/login/index.vue';
+import { Login, NoPermission, NotFound, ServiceError } from '@/views';
-import NoPermission from '@/views/system/exception/403.vue';
-import NotFound from '@/views/system/exception/404.vue';
-import ServiceError from '@/views/system/exception/500.vue';
 import { routeName, routePath, routeTitle } from '../constant';
 import { ROUTE_HOME_NAME } from './route-home';
 
@@ -19,12 +16,13 @@ const constantRoutes: RouteRecordRaw[] = [
     redirect: { name: ROUTE_HOME_NAME }
   },
   {
-    // 名称、路由随意，不在路由声明里面，只是为各个页面充当传递BlankLayout的桥梁，因此访问该路由时重定向到404
+    // 名称、路径随意，不在路由声明里面，只是为各个子路由充当应用BlankLayout布局的桥梁，因此访问该路由时重定向到404
     name: 'constant-single_',
     path: '/constant-single_',
     component: BlankLayout,
     redirect: { name: routeName('not-found') },
     meta: {
+      title: 'constant-single_',
       keepAlive: true
     },
     children: [

src/router/routes/index.ts

@@ -1,8 +1,11 @@
 import type { RouteRecordRaw } from 'vue-router';
+import { transformMultiDegreeRoutes } from '@/utils';
 import customRoutes from '../modules';
 import constantRoutes from './constant-routes';
 
+const transformRoutes = transformMultiDegreeRoutes(customRoutes);
+
 /** 所有路由 */
-export const routes: RouteRecordRaw[] = [...customRoutes, ...constantRoutes];
+export const routes: RouteRecordRaw[] = [...transformRoutes, ...constantRoutes];
 
 export { ROUTE_HOME } from './route-home';

src/styles/scss/global.scss

@@ -1,3 +1,5 @@
+@import './naive.scss';
+
 @mixin scrollbar($size:8px, $color:#d9d9d9) {
   &::-webkit-scrollbar-thumb {
     background-color: $color;

src/styles/scss/naive.scss

@@ -0,0 +1,6 @@
+.n-icon-slot {
+	width: auto !important;
+	height: auto !important;
+	justify-content: center;
+	align-items: center;
+}

src/typings/router.d.ts

@@ -0,0 +1,22 @@
+import 'vue-router';
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    /** 路由名称(作为菜单时为菜单的名称) */
+    title: string;
+    /** 需要登录权限 */
+    requiresAuth?: boolean;
+    /** 缓存页面 */
+    keepAlive?: boolean;
+    /** 页面占满剩余高度(去除头部、tab和底部后的高度) */
+    fullPage?: boolean;
+    /** 不作为菜单 */
+    notAsMenu?: boolean;
+    /** 菜单和面包屑对应的图标 */
+    icon?: string;
+    /** 导入的路由模块排序，可用于菜单的排序 */
+    order?: number;
+    /** y方向滚动的距离(被缓存的页面保留滚动行为) */
+    scrollY?: number;
+  }
+}

src/utils/router/cache.ts

@@ -1,6 +1,13 @@
 import type { Component } from 'vue';
 import type { RouteRecordRaw } from 'vue-router';
 
+/** 给需要缓存的页面组件设置名称 */
+function setComponentName(component?: Component, name?: string) {
+  if (component && name) {
+    Object.assign(component, { name });
+  }
+}
+
 function getCacheName(route: RouteRecordRaw, isCache: boolean) {
   const cacheNames: string[] = [];
   const hasChild = hasChildren(route);
@@ -26,13 +33,6 @@ function hasChildren(route: RouteRecordRaw) {
   return Boolean(route.children && route.children.length);
 }
 
-/** 给需要缓存的页面组件设置名称 */
-export function setComponentName(component?: Component, name?: string) {
-  if (component && name) {
-    Object.assign(component, { name });
-  }
-}
-
 /** 获取被缓存的路由 */
 export function getCacheRoutes(routes: RouteRecordRaw[]) {
   const cacheNames: string[] = [];

src/utils/router/helpers.ts

@@ -1,13 +1,45 @@
 import type { Component } from 'vue';
-import type { Router } from 'vue-router';
+import type { Router, RouteRecordRaw, RouteMeta } from 'vue-router';
-import type { CustomRoute, ImportedRouteModules, CustomRouteMeta } from '@/interface';
+import type { ImportedRouteModules } from '@/interface';
+
+interface SingleRouteConfig {
+  /** 路由 */
+  route: RouteRecordRaw;
+  /** 路由容器 */
+  container: Component;
+  /** 路由容器的描述 */
+  containerMeta: RouteMeta;
+  /** 404路由的名称 */
+  notFoundName: string;
+}
+
+/** 设置单个路由 */
+export function setSingleRoute(config: SingleRouteConfig) {
+  const { route, container, containerMeta, notFoundName } = config;
+  const routeItem: RouteRecordRaw = {
+    name: `${route.name as string}_`,
+    path: `${route.path}_`,
+    component: container,
+    redirect: { name: notFoundName },
+    meta: {
+      notAsMenu: true,
+      ...containerMeta,
+      title: `${containerMeta.title}-container`
+    },
+    children: [route]
+  };
+
+  return routeItem;
+}
 
 /** 处理导入的路由模块 */
 export function transformRouteModules(routeModules: ImportedRouteModules) {
   const modules = Object.keys(routeModules).map(key => {
     return routeModules[key].default;
   });
-  const constantRoutes: CustomRoute[] = modules.sort((next, pre) => Number(next.meta.order) - Number(pre.meta.order));
+  const constantRoutes: RouteRecordRaw[] = modules.sort(
+    (next, pre) => Number(next.meta?.order) - Number(pre.meta?.order)
+  );
   return constantRoutes;
 }
 
@@ -16,12 +48,12 @@ export function transformRouteModules(routeModules: ImportedRouteModules) {
  * @param routes - 路由
  * @param routeHomeName - 路由首页名称
  */
-export function getRouteHome(routes: CustomRoute[], routeHomeName: string) {
+export function getRouteHome(routes: RouteRecordRaw[], routeHomeName: string) {
-  let routeHome: CustomRoute;
+  let routeHome: RouteRecordRaw;
-  function hasChildren(route: CustomRoute) {
+  function hasChildren(route: RouteRecordRaw) {
     return Boolean(route.children && route.children.length);
   }
-  function getRouteHomeByRoute(route: CustomRoute) {
+  function getRouteHomeByRoute(route: RouteRecordRaw) {
     if (routeHome) return;
     const hasChild = hasChildren(route);
     if (!hasChild) {
@@ -29,12 +61,12 @@ export function getRouteHome(routes: CustomRoute[], routeHomeName: string) {
         routeHome = route;
       }
     } else {
-      getRouteHomeByRoutes(route.children as CustomRoute[]);
+      getRouteHomeByRoutes(route.children as RouteRecordRaw[]);
     }
   }
-  function getRouteHomeByRoutes(_routes: CustomRoute[]) {
+  function getRouteHomeByRoutes(_routes: RouteRecordRaw[]) {
     _routes.some(item => {
-      getRouteHomeByRoute(item as CustomRoute);
+      getRouteHomeByRoute(item as RouteRecordRaw);
       return routeHome !== undefined;
     });
   }
@@ -42,37 +74,36 @@ export function getRouteHome(routes: CustomRoute[], routeHomeName: string) {
   return routeHome!;
 }
 
+/**
+ * 将多层级路由转换成二级路由
+ * @param routes - 路由
+ */
+export function transformMultiDegreeRoutes(routes: RouteRecordRaw[]) {
+  function hasComponent(route: RouteRecordRaw) {
+    return Boolean(route.component);
+  }
+  function hasChildren(route: RouteRecordRaw) {
+    return Boolean(route.children && route.children.length);
+  }
+
+  function upDimension(route: RouteRecordRaw): RouteRecordRaw[] {
+    if (hasChildren(route)) {
+      const updateRoute = { ...route };
+      if (!hasComponent(route)) {
+        return updateRoute.children!;
+      }
+      updateRoute.children = updateRoute.children?.map(item => upDimension(item)).flat();
+      return [updateRoute];
+    }
+    return [route];
+  }
+
+  return routes.map(item => upDimension(item)).flat();
+}
+
 /** 获取登录后的重定向地址 */
 export function getLoginRedirectUrl(router: Router) {
   const path = router.currentRoute.value.fullPath as string;
   const redirectUrl = path === '/' ? undefined : path;
   return redirectUrl;
 }
-
-interface SingleRouteConfig {
-  /** 路由 */
-  route: CustomRoute;
-  /** 路由容器 */
-  container: Component;
-  /** 路由容器的描述 */
-  meta: CustomRouteMeta;
-  /** 404路由的名称 */
-  notFoundName: string;
-}
-/** * 设置单个路由 */
-export function setSingleRoute(config: SingleRouteConfig) {
-  const { route, container, meta, notFoundName } = config;
-  const routeItem: CustomRoute = {
-    name: `${route.name as string}_`,
-    path: `${route.path}_`,
-    component: container,
-    redirect: { name: notFoundName },
-    meta: {
-      ...meta,
-      isNotMenu: true
-    },
-    children: [route]
-  };
-
-  return routeItem;
-}

src/utils/router/menus.ts

@@ -1,9 +1,10 @@
-import type { CustomRoute, GlobalMenuOption } from '@/interface';
+import type { RouteRecordRaw } from 'vue-router';
+import type { GlobalMenuOption } from '@/interface';
 import { iconifyRender } from '../common';
 
 /** 判断路由是否作为菜单 */
-function asMenu(route: CustomRoute) {
+function asMenu(route: RouteRecordRaw) {
-  return !route.meta?.isNotMenu;
+  return !route.meta?.notAsMenu;
 }
 
 /** 给菜单添加可选属性 */
@@ -19,14 +20,14 @@ function addPartialProps(menuItem: GlobalMenuOption, icon?: string, children?: G
 }
 
 /** 将路由转换成菜单 */
-export function transformRouteToMenu(routes: CustomRoute[]) {
+export function transformRouteToMenu(routes: RouteRecordRaw[]) {
   const globalMenu: GlobalMenuOption[] = [];
   routes.forEach(route => {
     const { name, path, meta } = route;
     const routeName = name as string;
     let menuChildren: GlobalMenuOption[] | undefined;
     if (route.children) {
-      menuChildren = transformRouteToMenu(route.children as CustomRoute[]);
+      menuChildren = transformRouteToMenu(route.children as RouteRecordRaw[]);
     }
     const menuItem: GlobalMenuOption = addPartialProps(
       {

src/views/about/index.ts

@@ -0,0 +1,3 @@
+import About from './index.vue';
+
+export { About };

src/views/component/button/index.vue

@@ -0,0 +1,576 @@
+<template>
+  <div>
+    <n-card title="按钮" class="h-full shadow-sm rounded-16px">
+      <n-grid cols="s:1 m:2" responsive="screen" :x-gap="16" :y-gap="16">
+        <n-grid-item v-for="item in buttonExample" :key="item.id" class="h-180px">
+          <n-card :title="item.label" class="h-full">
+            <p v-if="item.desc" class="pb-16px">{{ item.desc }}</p>
+            <n-space>
+              <n-button
+                v-for="button in item.buttons"
+                :key="button.id"
+                v-bind="button.props"
+                :style="`--icon-margin: ${button.props.circle ? 0 : 6}px`"
+              >
+                <template v-if="button.icon" #icon>
+                  <Icon :icon="button.icon" />
+                </template>
+                {{ button.label }}
+              </n-button>
+            </n-space>
+          </n-card>
+        </n-grid-item>
+        <n-grid-item class="h-180px">
+          <n-card title="加载中" class="h-full">
+            <p class="pb-16px">按钮有加载状态。</p>
+            <n-space>
+              <n-button :loading="loading" type="primary" @click="startLoading">开始加载</n-button>
+              <n-button @click="endLoading">取消加载</n-button>
+            </n-space>
+          </n-card>
+        </n-grid-item>
+      </n-grid>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NCard, NGrid, NGridItem, NSpace, NButton } from 'naive-ui';
+import type { ButtonProps } from 'naive-ui';
+import { Icon } from '@iconify/vue';
+import { useLoading } from '@/hooks';
+
+interface ButtonDetail {
+  id: number;
+  props: ButtonProps & { href?: string; target?: string };
+  label?: string;
+  icon?: string;
+}
+
+interface ButtonExample {
+  id: number;
+  label: string;
+  buttons: ButtonDetail[];
+  desc?: string;
+}
+
+const { loading, startLoading, endLoading } = useLoading();
+
+const buttonExample: ButtonExample[] = [
+  {
+    id: 0,
+    label: '基础',
+    buttons: [
+      {
+        id: 0,
+        props: {},
+        label: 'Default'
+      },
+      {
+        id: 1,
+        props: { type: 'tertiary' },
+        label: 'Tertiary'
+      },
+      {
+        id: 2,
+        props: { type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 3,
+        props: { type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 4,
+        props: { type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 5,
+        props: { type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 6,
+        props: { type: 'error' },
+        label: 'Error'
+      }
+    ],
+    desc: '按钮的 type 分别为 default、primary、info、success、warning 和 error。'
+  },
+  {
+    id: 1,
+    label: '次要按钮',
+    buttons: [
+      {
+        id: 0,
+        props: { strong: true, secondary: true },
+        label: 'Default'
+      },
+      {
+        id: 1,
+        props: { strong: true, secondary: true, type: 'tertiary' },
+        label: 'Tertiary'
+      },
+      {
+        id: 2,
+        props: { strong: true, secondary: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 3,
+        props: { strong: true, secondary: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 4,
+        props: { strong: true, secondary: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 5,
+        props: { strong: true, secondary: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 6,
+        props: { strong: true, secondary: true, type: 'error' },
+        label: 'Error'
+      },
+      {
+        id: 7,
+        props: { strong: true, secondary: true, round: true },
+        label: 'Default'
+      },
+      {
+        id: 8,
+        props: { strong: true, secondary: true, round: true, type: 'tertiary' },
+        label: 'Tertiary'
+      },
+      {
+        id: 9,
+        props: { strong: true, secondary: true, round: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 10,
+        props: { strong: true, secondary: true, round: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 11,
+        props: { strong: true, secondary: true, round: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 12,
+        props: { strong: true, secondary: true, round: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 13,
+        props: { strong: true, secondary: true, round: true, type: 'error' },
+        label: 'Error'
+      }
+    ]
+  },
+  {
+    id: 2,
+    label: '次次要按钮',
+    buttons: [
+      {
+        id: 0,
+        props: { tertiary: true },
+        label: 'Default'
+      },
+      {
+        id: 1,
+        props: { tertiary: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 2,
+        props: { tertiary: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 3,
+        props: { tertiary: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 4,
+        props: { tertiary: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 5,
+        props: { tertiary: true, type: 'error' },
+        label: 'Error'
+      },
+      {
+        id: 6,
+        props: { tertiary: true, round: true },
+        label: 'Default'
+      },
+      {
+        id: 7,
+        props: { tertiary: true, round: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 8,
+        props: { tertiary: true, round: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 9,
+        props: { tertiary: true, round: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 10,
+        props: { tertiary: true, round: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 11,
+        props: { tertiary: true, round: true, type: 'error' },
+        label: 'Error'
+      }
+    ]
+  },
+  {
+    id: 3,
+    label: '次次次要按钮',
+    buttons: [
+      {
+        id: 0,
+        props: { quaternary: true },
+        label: 'Default'
+      },
+      {
+        id: 1,
+        props: { quaternary: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 2,
+        props: { quaternary: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 3,
+        props: { quaternary: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 4,
+        props: { quaternary: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 5,
+        props: { quaternary: true, type: 'error' },
+        label: 'Error'
+      },
+      {
+        id: 6,
+        props: { quaternary: true, round: true },
+        label: 'Default'
+      },
+      {
+        id: 7,
+        props: { quaternary: true, round: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 8,
+        props: { quaternary: true, round: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 9,
+        props: { quaternary: true, round: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 10,
+        props: { quaternary: true, round: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 11,
+        props: { quaternary: true, round: true, type: 'error' },
+        label: 'Error'
+      }
+    ]
+  },
+  {
+    id: 4,
+    label: '虚线按钮',
+    buttons: [
+      {
+        id: 0,
+        props: { dashed: true },
+        label: 'Default'
+      },
+      {
+        id: 1,
+        props: { dashed: true, type: 'tertiary' },
+        label: 'Tertiary'
+      },
+      {
+        id: 2,
+        props: { dashed: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 3,
+        props: { dashed: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 4,
+        props: { dashed: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 5,
+        props: { dashed: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 6,
+        props: { dashed: true, type: 'error' },
+        label: 'Error'
+      }
+    ]
+  },
+  {
+    id: 5,
+    label: '尺寸',
+    buttons: [
+      {
+        id: 0,
+        props: { size: 'tiny', strong: true },
+        label: '小小'
+      },
+      {
+        id: 1,
+        props: { size: 'small', strong: true },
+        label: '小'
+      },
+      {
+        id: 2,
+        props: { size: 'medium', strong: true },
+        label: '不小'
+      },
+      {
+        id: 3,
+        props: { size: 'large', strong: true },
+        label: '不不小'
+      }
+    ]
+  },
+  {
+    id: 6,
+    label: '文本按钮',
+    buttons: [
+      {
+        id: 0,
+        props: { text: true },
+        label: '那车头依然吐着烟',
+        icon: 'mdi:train'
+      }
+    ]
+  },
+  {
+    id: 7,
+    label: '自定义标签按钮',
+    buttons: [
+      {
+        id: 0,
+        props: {
+          text: true,
+          tag: 'a',
+          href: 'https://github.com/honghuangdc/soybean-admin',
+          target: '_blank',
+          type: 'primary'
+        },
+        label: 'soybean-admin'
+      }
+    ],
+    desc: '你可以把按钮渲染成不同的标签，比如 a标签 。'
+  },
+  {
+    id: 8,
+    label: '按钮禁用',
+    buttons: [
+      {
+        id: 0,
+        props: {
+          disabled: true
+        },
+        label: '不许点'
+      }
+    ],
+    desc: '按钮可以被禁用'
+  },
+  {
+    id: 9,
+    label: '图标按钮',
+    buttons: [
+      {
+        id: 0,
+        props: {
+          secondary: true,
+          strong: true
+        },
+        label: '+100元',
+        icon: 'mdi:cash-100'
+      },
+      {
+        id: 0,
+        props: {
+          iconPlacement: 'right',
+          secondary: true,
+          strong: true
+        },
+        label: '+100元',
+        icon: 'mdi:cash-100'
+      }
+    ],
+    desc: '在按钮上使用图标。'
+  },
+  {
+    id: 10,
+    label: '不同形状按钮',
+    buttons: [
+      {
+        id: 0,
+        props: {
+          circle: true
+        },
+        icon: 'mdi:cash-100'
+      },
+      {
+        id: 1,
+        props: {
+          round: true
+        },
+        label: '圆角'
+      },
+      {
+        id: 2,
+        props: {},
+        label: '方'
+      }
+    ],
+    desc: '按钮拥有不同的形状。'
+  },
+  {
+    id: 11,
+    label: '透明背景按钮',
+    buttons: [
+      {
+        id: 0,
+        props: { ghost: true },
+        label: 'Default'
+      },
+      {
+        id: 1,
+        props: { ghost: true, type: 'tertiary' },
+        label: 'Tertiary'
+      },
+      {
+        id: 2,
+        props: { ghost: true, type: 'primary' },
+        label: 'Primary'
+      },
+      {
+        id: 3,
+        props: { ghost: true, type: 'info' },
+        label: 'Info'
+      },
+      {
+        id: 4,
+        props: { ghost: true, type: 'success' },
+        label: 'Success'
+      },
+      {
+        id: 5,
+        props: { ghost: true, type: 'warning' },
+        label: 'Warning'
+      },
+      {
+        id: 6,
+        props: { ghost: true, type: 'error' },
+        label: 'Error'
+      }
+    ],
+    desc: 'Ghost 按钮有透明的背景。'
+  },
+  {
+    id: 12,
+    label: '自定义颜色',
+    buttons: [
+      {
+        id: 0,
+        props: {
+          color: '#8a2be2'
+        },
+        label: '#8a2be2',
+        icon: 'ic:baseline-color-lens'
+      },
+      {
+        id: 1,
+        props: {
+          color: '#ff69b4'
+        },
+        label: '#ff69b4',
+        icon: 'ic:baseline-color-lens'
+      },
+      {
+        id: 2,
+        props: {
+          color: '#8a2be2',
+          ghost: true
+        },
+        label: '#8a2be2',
+        icon: 'ic:baseline-color-lens'
+      },
+      {
+        id: 3,
+        props: {
+          color: '#ff69b4',
+          ghost: true
+        },
+        label: '#ff69b4',
+        icon: 'ic:baseline-color-lens'
+      },
+      {
+        id: 4,
+        props: {
+          color: '#8a2be2',
+          text: true
+        },
+        label: '#8a2be2',
+        icon: 'ic:baseline-color-lens'
+      },
+      {
+        id: 5,
+        props: {
+          color: '#ff69b4',
+          text: true
+        },
+        label: '#ff69b4',
+        icon: 'ic:baseline-color-lens'
+      }
+    ],
+    desc: '这两个颜色看起来像毒蘑菇。'
+  }
+];
+</script>
+<style scoped></style>

src/views/component/card/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <n-card title="卡片" class="h-full shadow-sm rounded-16px">
+      <n-space :vertical="true">
+        <n-card title="基本用法">
+          <p class="pb-16px">基础卡片</p>
+          <n-card title="卡片">卡片内容</n-card>
+        </n-card>
+        <n-card title="尺寸">
+          <p class="pb-16px">卡片有 small、medium、large、huge 尺寸。</p>
+          <n-space vertical>
+            <n-card title="小卡片" size="small">卡片内容</n-card>
+            <n-card title="中卡片" size="medium">卡片内容</n-card>
+            <n-card title="大卡片" size="large">卡片内容</n-card>
+            <n-card title="超大卡片" size="huge">卡片内容</n-card>
+          </n-space>
+        </n-card>
+        <n-card title="文本按钮">
+          <p class="pb-16px">
+            content 和 footer 可以被 hard 或 soft 分段，action 可以被分段。分段分割线会在区域的上方出现。
+          </p>
+          <n-card
+            title="卡片分段示例"
+            :segmented="{
+              content: true,
+              footer: 'soft'
+            }"
+          >
+            <template #header-extra>#header-extra</template>
+            卡片内容
+            <template #footer>#footer</template>
+            <template #action>#action</template>
+          </n-card>
+        </n-card>
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NCard, NSpace } from 'naive-ui';
+</script>
+<style scoped></style>

src/views/component/index.ts

@@ -0,0 +1,4 @@
+import ComponentButton from './button/index.vue';
+import ComponentCard from './card/index.vue';
+
+export { ComponentButton, ComponentCard };

src/views/dashboard/index.ts

@@ -0,0 +1,4 @@
+import DashboardAnalysis from './analysis/index.vue';
+import DashboardWorkbench from './workbench/index.vue';
+
+export { DashboardAnalysis, DashboardWorkbench };

src/views/dashboard/workbench/components/WorkbenchMain/components/ShortcutsCard.vue

@@ -1,14 +1,6 @@
 <template>
   <div
-    class="
+    class="flex-col-center p-12px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-sm cursor-pointer"
-      flex-col-center
-      p-12px
-      border-1px border-[#efeff5]
-      dark:border-[#ffffff17]
-      rounded-4px
-      hover:shadow-sm
-      cursor-pointer
-    "
   >
     <Icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
     <p class="py-8px text-16px">{{ label }}</p>

src/views/document/index.ts

@@ -0,0 +1,5 @@
+import DocumentVue from './vue/index.vue';
+import DocumentVite from './vite/index.vue';
+import DocumentNaive from './naive/index.vue';
+
+export { DocumentVue, DocumentVite, DocumentNaive };

src/views/index.ts

@@ -0,0 +1,8 @@
+export * from './system';
+export * from './dashboard';
+export * from './document';
+export * from './plugin';
+export * from './component';
+export * from './multi-menu';
+export * from './about';
+export * from './website';

src/views/multi-menu/index.ts

@@ -0,0 +1,3 @@
+import MultiMenuFirstSecond from './first/second/index.vue';
+
+export { MultiMenuFirstSecond };

src/views/plugin/index.ts

@@ -0,0 +1,19 @@
+import PluginMap from './map/index.vue';
+import PluginVideo from './video/index.vue';
+import PluginEditorQuill from './editor/quill/index.vue';
+import PluginEditorMarkdown from './editor/markdown/index.vue';
+import PluginSwiper from './swiper/index.vue';
+import PluginCopy from './copy/index.vue';
+import PluginIcon from './icon/index.vue';
+import PluginPrint from './print/index.vue';
+
+export {
+  PluginMap,
+  PluginVideo,
+  PluginEditorQuill,
+  PluginEditorMarkdown,
+  PluginSwiper,
+  PluginCopy,
+  PluginIcon,
+  PluginPrint
+};

src/views/system/index.ts

@@ -0,0 +1,6 @@
+import Login from './login/index.vue';
+import NoPermission from './exception/403.vue';
+import NotFound from './exception/404.vue';
+import ServiceError from './exception/500.vue';
+
+export { Login, NoPermission, NotFound, ServiceError };

src/views/website/index.ts

@@ -0,0 +1,3 @@
+import Website from './index.vue';
+
+export { Website };