Merge pull request #227 from fast-crud/for-pr

feat(projects): integration fast-crud

.env.production

@@ -6,3 +6,5 @@ VITE_COMPRESS=N
 VITE_COMPRESS_TYPE=gzip
 
 VITE_PWA=N
+
+VITE_PROD_MOCK=Y

.vscode/settings.json

@@ -39,7 +39,6 @@
     "@": "${workspaceFolder}/src",
     "~@": "${workspaceFolder}/src"
   },
-  "terminal.integrated.cursorStyle": "line",
   "terminal.integrated.fontSize": 14,
   "terminal.integrated.fontWeight": 500,
   "terminal.integrated.tabs.enabled": true,
@@ -71,5 +70,6 @@
   },
   "[vue]": {
     "editor.defaultFormatter": "Vue.volar"
-  }
+  },
+  "i18n-ally.localesPaths": ["src/locales", "src/locales/lang"]
 }

README.md

@@ -121,6 +121,7 @@ docker run --name soybean -p 80:80 -d soybeanjs/soybean-admin:v0.9.6
 
 ## 基于 SoybeanAdmin 二次开发的项目
 [electron-mock-admin](https://github.com/lixin59/electron-mock-api): 一个 Mock Api 管理系统，帮助前端开发伙伴快速实现接口的mock。
+[T-Shell](https://github.com/TheBlindM/T-Shell): 是一个可配置命令提示的终端模拟器和 SSH客户端。
 
 ## 浏览器支持
 
@@ -138,12 +139,16 @@ docker run --name soybean -p 80:80 -d soybeanjs/soybean-admin:v0.9.6
 
 ## 交流
 
-`Soybean Admin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供微信和 QQ 交流群(人员已满)，使用问题欢迎在群内提问。
+`Soybean Admin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供微信和 QQ 交流群，使用问题欢迎在群内提问。
 
   <div style="display:flex;">
-  	<div style="padding-right:24px;">
+  	<!-- <div style="padding-right:24px;">
   		<p>微信交流群</p>
-      <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybeanjs-wechat2.jpeg" style="width:200px" />
+      <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybeanjs-wechat0503.jpeg" style="width:200px" />
+  	</div> -->
+  	<div style="padding-right:24px;">
+  		<p>QQ交流群</p>
+      <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/qq-soybean-admin.jpg" style="width:200px" />
   	</div>
 		<div>
 			<p>添加本人微信，欢迎来技术交流，业务咨询</p>

build/plugins/html.ts

@@ -1,14 +0,0 @@
-import type { PluginOption } from 'vite';
-import { createHtmlPlugin } from 'vite-plugin-html';
-
-export default (viteEnv: ImportMetaEnv): PluginOption[] => {
-  return createHtmlPlugin({
-    minify: true,
-    inject: {
-      data: {
-        appName: viteEnv.VITE_APP_NAME,
-        appTitle: viteEnv.VITE_APP_TITLE
-      }
-    }
-  });
-};

build/plugins/index.ts

@@ -4,7 +4,6 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
 import unocss from '@unocss/vite';
 import progress from 'vite-plugin-progress';
 import pageRoute from '@soybeanjs/vite-plugin-vue-page-route';
-import html from './html';
 import unplugin from './unplugin';
 import mock from './mock';
 import visualizer from './visualizer';
@@ -16,7 +15,19 @@ import pwa from './pwa';
  * @param viteEnv - 环境变量配置
  */
 export function setupVitePlugins(viteEnv: ImportMetaEnv): (PluginOption | PluginOption[])[] {
-  const plugins = [vue(), vueJsx(), html(viteEnv), ...unplugin(viteEnv), unocss(), mock, progress(), pageRoute()];
+  const plugins = [
+    vue({
+      script: {
+        defineModel: true
+      }
+    }),
+    vueJsx(),
+    ...unplugin(viteEnv),
+    unocss(),
+    mock(viteEnv),
+    progress(),
+    pageRoute()
+  ];
 
   if (viteEnv.VITE_VISUALIZER === 'Y') {
     plugins.push(visualizer as PluginOption);

build/plugins/mock.ts

@@ -1,9 +1,14 @@
 import { viteMockServe } from 'vite-plugin-mock';
 
-export default viteMockServe({
+export default (viteEnv: ImportMetaEnv) => {
+  const prodMock = viteEnv.VITE_PROD_MOCK === 'Y';
+
+  return viteMockServe({
     mockPath: 'mock',
+    prodEnabled: prodMock,
     injectCode: `
 			import { setupMockServer } from '../mock';
 			setupMockServer();
 		`
-});
+  });
+};

build/plugins/unplugin.ts

@@ -1,4 +1,3 @@
-import VueMacros from 'unplugin-vue-macros/vite';
 import Icons from 'unplugin-icons/vite';
 import IconsResolver from 'unplugin-icons/resolver';
 import Components from 'unplugin-vue-components/vite';
@@ -17,7 +16,6 @@ export default function unplugin(viteEnv: ImportMetaEnv) {
   const collectionName = VITE_ICON_LOCAL_PREFFIX.replace(`${VITE_ICON_PREFFIX}-`, '');
 
   return [
-    VueMacros({}),
     Icons({
       compiler: 'vue3',
       customCollections: {

index.html

@@ -4,7 +4,7 @@
 		<meta charset="UTF-8" />
 		<link rel="icon" href="/favicon.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title><%= appName %></title>
+		<title>%VITE_APP_NAME%</title>
 	</head>
 	<body>
 		<div id="app">

mock/api/crud/base.ts

@@ -0,0 +1,295 @@
+export type ListItem = {
+  id?: number;
+  children?: ListItem[];
+  [key: string]: any;
+};
+export type BaseMockOptions = { name: string; copyTimes?: number; list: ListItem[]; idGenerator: number };
+type CopyListParams = { originList: ListItem[]; newList: ListItem[]; options: BaseMockOptions; parentId?: number };
+
+function copyList(props: CopyListParams) {
+  const { originList, newList, options, parentId } = props;
+  for (const item of originList) {
+    const newItem: ListItem = { ...item, parentId };
+    newItem.id = options.idGenerator;
+    options.idGenerator += 1;
+    newList.push(newItem);
+    if (item.children) {
+      newItem.children = [];
+      copyList({
+        originList: item.children,
+        newList: newItem.children,
+        options,
+        parentId: newItem.id
+      });
+    }
+  }
+}
+
+function delById(req: Service.MockOption, list: any[]) {
+  for (let i = 0; i < list.length; i += 1) {
+    const item = list[i];
+    if (item.id === parseInt(req.query.id, 10)) {
+      list.splice(i, 1);
+      break;
+    }
+    if (item.children && item.children.length > 0) {
+      delById(req, item.children);
+    }
+  }
+}
+
+function findById(id: number, list: ListItem[]): any {
+  for (const item of list) {
+    if (item.id === id) {
+      return item;
+    }
+    if (item.children && item.children.length > 0) {
+      const sub = findById(id, item.children);
+      if (sub !== null && sub !== undefined) {
+        return sub;
+      }
+    }
+  }
+  return null;
+}
+
+function matchWithArrayCondition(value: any[], item: ListItem, key: string) {
+  if (value.length === 0) {
+    return true;
+  }
+  let matched = false;
+  for (const i of value) {
+    if (item[key] instanceof Array) {
+      for (const j of item[key]) {
+        if (i === j) {
+          matched = true;
+          break;
+        }
+      }
+      if (matched) {
+        break;
+      }
+    } else if (item[key] === i || (typeof item[key] === 'string' && item[key].indexOf(`${i}`) >= 0)) {
+      matched = true;
+      break;
+    }
+    if (matched) {
+      break;
+    }
+  }
+  return matched;
+}
+
+function matchWithObjectCondition(value: any, item: ListItem, key: string) {
+  let matched = true;
+  for (const key2 of Object.keys(value)) {
+    const v = value[key2];
+    if (v && item[key] && v !== item[key][key2]) {
+      matched = false;
+      break;
+    }
+  }
+  return matched;
+}
+
+function searchFromList(list: ListItem[], query: any) {
+  const filter = (item: ListItem) => {
+    let allFound = true; // 是否所有条件都符合
+    for (const key of Object.keys(query)) {
+      const value = query[key];
+      if (value === undefined || value === null || value === '') {
+        // no nothing
+      } else if (value instanceof Array) {
+        // 如果条件中的value是数组的话，只要查到一个就行
+        const matched = matchWithArrayCondition(value, item, key);
+        if (!matched) {
+          allFound = false;
+        }
+      } else if (value instanceof Object) {
+        // 如果条件中的value是对象的话，需要每个key都匹配
+        const matched = matchWithObjectCondition(value, item, key);
+        if (!matched) {
+          allFound = false;
+        }
+      } else if (item[key] !== value) {
+        allFound = false;
+      }
+    }
+    return allFound;
+  };
+  return list.filter(filter);
+}
+
+export default {
+  buildMock(options: BaseMockOptions) {
+    const name = options.name;
+    if (!options.copyTimes) {
+      options.copyTimes = 29;
+    }
+    const list: any[] = [];
+    for (let i = 0; i < options.copyTimes; i += 1) {
+      copyList({
+        originList: options.list,
+        newList: list,
+        options
+      });
+    }
+    options.list = list;
+    return [
+      {
+        path: `/mock/${name}/page`,
+        method: 'post',
+        handle(req: Service.MockOption) {
+          let data = [...list];
+          let limit = 20;
+          let offset = 0;
+          for (const item of list) {
+            if (item.children && item.children.length === 0) {
+              item.hasChildren = false;
+              item.lazy = false;
+            }
+          }
+          let orderAsc: any;
+          let orderProp: any;
+          if (req && req.body) {
+            const { page, query } = req.body;
+            if (page.limit) {
+              limit = parseInt(page.limit, 10);
+            }
+            if (page.offset) {
+              offset = parseInt(page.offset, 10);
+            }
+            if (Object.keys(query).length > 0) {
+              data = searchFromList(list, query);
+            }
+          }
+
+          const start = offset;
+          let end = offset + limit;
+          if (data.length < end) {
+            end = data.length;
+          }
+
+          if (orderProp) {
+            // 排序
+            data.sort((a, b) => {
+              let ret = 0;
+              if (a[orderProp] > b[orderProp]) {
+                ret = 1;
+              } else if (a[orderProp] < b[orderProp]) {
+                ret = -1;
+              }
+              return orderAsc ? ret : -ret;
+            });
+          }
+
+          const records = data.slice(start, end);
+          const lastOffset = data.length - (data.length % limit);
+          if (offset > lastOffset) {
+            offset = lastOffset;
+          }
+          return {
+            code: 200,
+            message: 'success',
+            data: {
+              records,
+              total: data.length,
+              limit,
+              offset
+            }
+          };
+        }
+      },
+      {
+        path: `/mock/${name}/get`,
+        method: 'get',
+        handle(req: Service.MockOption) {
+          let id = req.query.id;
+          id = parseInt(id, 10);
+          let current = null;
+          for (const item of list) {
+            if (item.id === id) {
+              current = item;
+              break;
+            }
+          }
+          return {
+            code: 200,
+            message: 'success',
+            data: current
+          };
+        }
+      },
+      {
+        path: `/mock/${name}/add`,
+        method: 'post',
+        handle(req: Service.MockOption) {
+          req.body.id = options.idGenerator;
+          options.idGenerator += 1;
+          list.unshift(req.body);
+          return {
+            code: 200,
+            message: 'success',
+            data: req.body.id
+          };
+        }
+      },
+      {
+        path: `/mock/${name}/update`,
+        method: 'post',
+        handle(req: Service.MockOption) {
+          const item = findById(req.body.id, list);
+          if (item) {
+            Object.assign(item, req.body);
+          }
+          return {
+            code: 200,
+            message: 'success',
+            data: null
+          };
+        }
+      },
+      {
+        path: `/mock/${name}/delete`,
+        method: 'post',
+        handle(req: Service.MockOption) {
+          delById(req, list);
+          return {
+            code: 200,
+            message: 'success',
+            data: null
+          };
+        }
+      },
+      {
+        path: `/mock/${name}/batchDelete`,
+        method: 'post',
+        handle(req: Service.MockOption) {
+          const ids = req.body.ids;
+          for (let i = list.length - 1; i >= 0; i -= 1) {
+            const item = list[i];
+            if (ids.indexOf(item.id) >= 0) {
+              list.splice(i, 1);
+            }
+          }
+          return {
+            code: 200,
+            message: 'success',
+            data: null
+          };
+        }
+      },
+      {
+        path: `/mock/${name}/all`,
+        method: 'post',
+        handle() {
+          return {
+            code: 200,
+            message: 'success',
+            data: list
+          };
+        }
+      }
+    ];
+  }
+};

mock/api/crud/index.ts

@@ -0,0 +1,5 @@
+import demo from './modules/demo';
+import headerGroup from './modules/header-group';
+
+const crudApis = [...demo, ...headerGroup];
+export default crudApis;

mock/api/crud/modules/demo.ts

@@ -0,0 +1,56 @@
+import type { MethodType, MockMethod } from 'vite-plugin-mock';
+import type { BaseMockOptions } from '../base';
+import mockBase from '../base';
+import MockOption = Service.MockOption;
+
+const options: BaseMockOptions = {
+  name: 'crud/demo',
+  idGenerator: 0,
+  list: [
+    {
+      select: '1',
+      text: '文本测试',
+      copyable: '文本可复制',
+      avatar: 'http://greper.handsfree.work/extends/avatar.jpg',
+      richtext: '富文本',
+      datetime: '2023-01-30 11:11:11'
+    },
+    {
+      select: '2'
+    },
+    {
+      select: '0'
+    }
+  ]
+};
+const mockedApis = mockBase.buildMock(options);
+
+const apis: MockMethod[] = [
+  {
+    url: `/mock/${options.name}/dict`,
+    method: 'get',
+    response: () => {
+      return {
+        code: 200,
+        message: '',
+        data: [
+          { value: '0', label: '关', color: 'warning' },
+          { value: '1', label: '开', color: 'success' },
+          { value: '2', label: '停' }
+        ]
+      };
+    }
+  }
+];
+
+for (const mockedApi of mockedApis) {
+  apis.push({
+    url: mockedApi.path,
+    method: mockedApi.method as MethodType,
+    response: (request: MockOption) => {
+      return mockedApi.handle(request);
+    }
+  });
+}
+
+export default apis;

mock/api/crud/modules/header-group.ts

@@ -0,0 +1,46 @@
+import type { MethodType, MockMethod } from 'vite-plugin-mock';
+import type { BaseMockOptions } from '../base';
+import mockBase from '../base';
+import MockOption = Service.MockOption;
+
+const options: BaseMockOptions = {
+  name: 'crud/header-group',
+  idGenerator: 0,
+  list: [
+    {
+      name: '张三',
+      age: 18,
+      province: '广东省',
+      city: '深圳市',
+      county: '南山区',
+      street: '粤海街道'
+    },
+    {
+      name: '李四',
+      age: 26,
+      province: '浙江省',
+      city: '杭州市',
+      county: '西湖区',
+      street: '西湖街道'
+    },
+    {
+      name: '王五',
+      age: 24
+    }
+  ]
+};
+const mockedApis = mockBase.buildMock(options);
+
+const apis: MockMethod[] = [];
+
+for (const mockedApi of mockedApis) {
+  apis.push({
+    url: mockedApi.path,
+    method: mockedApi.method as MethodType,
+    response: (request: MockOption) => {
+      return mockedApi.handle(request);
+    }
+  });
+}
+
+export default apis;

mock/api/index.ts

@@ -1,5 +1,6 @@
 import auth from './auth';
 import route from './route';
 import management from './management';
+import crud from './crud';
 
-export default [...auth, ...route, ...management];
+export default [...auth, ...route, ...management, ...crud];

package.json

@@ -56,74 +56,75 @@
     "prepare": "soy init-git-hooks"
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^6.1.0",
+    "@fast-crud/fast-crud": "^1.13.6",
+    "@fast-crud/fast-extends": "^1.13.6",
+    "@fast-crud/ui-naive": "^1.13.6",
+    "@fast-crud/ui-interface": "^1.13.6",
     "@antv/data-set": "^0.11.8",
-    "@antv/g2": "^4.2.9",
+    "@antv/g2": "^4.2.10",
-    "@better-scroll/core": "^2.5.0",
+    "@better-scroll/core": "^2.5.1",
-    "@soybeanjs/vue-admin-layout": "^1.1.1",
+    "@soybeanjs/vue-materials": "^0.1.9",
-    "@soybeanjs/vue-admin-tab": "^1.0.5",
+    "@vueuse/core": "^10.1.2",
-    "@soybeanjs/vue-materials": "^0.1.8",
+    "axios": "1.4.0",
-    "@vueuse/core": "^9.13.0",
-    "axios": "0.27.2",
     "clipboard": "^2.0.11",
     "colord": "^2.9.3",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.7",
-    "echarts": "^5.4.1",
+    "echarts": "^5.4.2",
     "form-data": "^4.0.0",
     "lodash-es": "^4.17.21",
-    "naive-ui": "2.34.3",
+    "naive-ui": "2.34.4",
-    "pinia": "^2.0.33",
+    "pinia": "^2.1.3",
     "print-js": "^1.6.0",
-    "qs": "^6.11.1",
+    "qs": "^6.11.2",
-    "swiper": "^9.1.0",
+    "swiper": "^9.3.2",
-    "ua-parser-js": "^1.0.34",
+    "ua-parser-js": "^1.0.35",
-    "vditor": "^3.9.0",
+    "vditor": "^3.9.2",
-    "vue": "3.2.47",
+    "vue": "3.3.4",
     "vue-i18n": "^9.2.2",
-    "vue-router": "^4.1.6",
+    "vue-router": "^4.2.1",
     "vuedraggable": "^4.1.0",
     "wangeditor": "^4.7.15",
-    "xgplayer": "^2.32.2"
+    "xgplayer": "^3.0.2"
   },
   "devDependencies": {
     "@amap/amap-jsapi-types": "^0.0.13",
-    "@iconify/json": "^2.2.33",
+    "@iconify/json": "^2.2.67",
-    "@iconify/vue": "^4.1.0",
+    "@iconify/vue": "^4.1.1",
-    "@soybeanjs/cli": "^0.1.7",
+    "@soybeanjs/cli": "^0.1.9",
     "@soybeanjs/vite-plugin-vue-page-route": "^0.0.5",
-    "@types/bmapgl": "^0.0.5",
+    "@types/bmapgl": "^0.0.7",
     "@types/crypto-js": "^4.1.1",
-    "@types/node": "18.15.0",
+    "@types/node": "20.2.1",
     "@types/qs": "^6.9.7",
     "@types/ua-parser-js": "^0.7.36",
-    "@unocss/preset-uno": "^0.50.4",
+    "@unocss/preset-uno": "^0.52.0",
-    "@unocss/transformer-directives": "^0.50.4",
+    "@unocss/transformer-directives": "^0.52.0",
-    "@unocss/vite": "^0.50.4",
+    "@unocss/vite": "^0.52.0",
-    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
     "conventional-changelog": "^3.1.25",
     "cross-env": "^7.0.3",
-    "eslint": "^8.36.0",
+    "eslint": "^8.41.0",
-    "eslint-config-soybeanjs": "^0.3.1",
+    "eslint-config-soybeanjs": "^0.3.7",
-    "lint-staged": "12.5.0",
+    "lint-staged": "13.2.2",
     "mockjs": "^1.1.0",
     "rollup-plugin-visualizer": "^5.9.0",
-    "sass": "^1.59.2",
+    "sass": "^1.62.1",
     "simple-git-hooks": "^2.8.1",
     "standard-version": "^9.5.0",
-    "tsx": "^3.12.4",
+    "tsx": "^3.12.7",
-    "typescript": "4.9.5",
+    "typescript": "5.0.4",
-    "unplugin-icons": "^0.15.3",
+    "unplugin-icons": "^0.16.1",
     "unplugin-vue-components": "0.24.1",
-    "unplugin-vue-macros": "1.6.4",
+    "vite": "^4.3.8",
-    "vite": "^4.1.4",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-mock": "2.9.8",
-    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-progress": "^0.0.7",
-    "vite-plugin-progress": "^0.0.6",
+    "vite-plugin-pwa": "^0.15.0",
-    "vite-plugin-pwa": "^0.14.4",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^1.2.0"
+    "vue-tsc": "1.6.5"
   },
   "pnpm": {
     "patchedDependencies": {

src/App.vue

@@ -7,20 +7,34 @@
     class="h-full"
   >
     <naive-provider>
+      <fs-ui-context>
         <router-view />
+      </fs-ui-context>
     </naive-provider>
   </n-config-provider>
 </template>
 
 <script setup lang="ts">
+import { watch } from 'vue';
+import { useRoute } from 'vue-router';
 import { dateZhCN, zhCN } from 'naive-ui';
+import { useI18n } from 'vue-i18n';
 import { subscribeStore, useThemeStore } from '@/store';
 import { useGlobalEvents } from '@/composables';
 
 const theme = useThemeStore();
+const { locale, t } = useI18n();
+const route = useRoute();
 
 subscribeStore();
 useGlobalEvents();
+
+watch(
+  () => locale.value,
+  () => {
+    document.title = route.meta.i18nTitle ? t(route.meta.i18nTitle) : route.meta.title;
+  }
+);
 </script>
 
 <style scoped></style>

src/components/business/loading-empty-wrapper.vue

@@ -54,7 +54,7 @@ const props = withDefaults(defineProps<Props>(), {
   placeholderClass: 'bg-white dark:bg-dark transition-background-color duration-300 ease-in-out',
   emptyDesc: '暂无数据',
   iconClass: 'text-320px text-primary',
-  descClass: 'text-16px text-[#666]',
+  descClass: 'text-16px text-#666',
   showNetworkReload: false
 });
 

src/components/common/dark-mode-container.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    class="dark:bg-[#18181c] dark:text-white dark:text-opacity-82 transition-all"
+    class="dark:bg-dark dark:text-white dark:text-opacity-82 transition-all"
-    :class="inverted ? 'bg-[#001428] text-white' : 'bg-white text-[#333639]'"
+    :class="inverted ? 'bg-#001428 text-white' : 'bg-white text-#333639'"
   >
     <slot></slot>
   </div>

src/components/common/dark-mode-switch.vue

@@ -34,9 +34,51 @@ const darkMode = computed({
   }
 });
 
-function handleSwitch() {
+function handleSwitch(event: MouseEvent) {
+  const x = event.clientX;
+  const y = event.clientY;
+  const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
+  // @ts-expect-error: Transition API
+  if (!document.startViewTransition) {
     darkMode.value = !darkMode.value;
+    return;
+  }
+  // @ts-expect-error: Transition API
+  const transition = document.startViewTransition(() => {
+    darkMode.value = !darkMode.value;
+  });
+  transition.ready.then(() => {
+    const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
+    document.documentElement.animate(
+      {
+        clipPath: darkMode.value ? clipPath : [...clipPath].reverse()
+      },
+      {
+        duration: 300,
+        easing: 'ease-in',
+        pseudoElement: darkMode.value ? '::view-transition-new(root)' : '::view-transition-old(root)'
+      }
+    );
+  });
 }
 </script>
 
-<style scoped></style>
+<style>
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+::view-transition-old(root) {
+  z-index: 9999;
+}
+::view-transition-new(root) {
+  z-index: 1;
+}
+.dark::view-transition-old(root) {
+  z-index: 1;
+}
+.dark::view-transition-new(root) {
+  z-index: 9999;
+}
+</style>

src/components/common/exception-base.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex-col-center wh-full">
+  <div class="flex-col-center gap-24px min-h-520px wh-full overflow-hidden">
-    <div class="text-400px text-primary">
+    <div class="flex text-400px text-primary">
       <icon-local-no-permission v-if="type === '403'" />
       <icon-local-not-found v-if="type === '404'" />
       <icon-local-service-error v-if="type === '500'" />

src/components/common/hover-container.vue

@@ -2,14 +2,14 @@
   <div v-if="showTooltip">
     <n-tooltip :placement="placement" trigger="hover">
       <template #trigger>
-        <div class="flex-center h-full cursor-pointer dark:hover:bg-[#333]" :class="contentClassName">
+        <div class="flex-center h-full cursor-pointer dark:hover:bg-#333" :class="contentClassName">
           <slot></slot>
         </div>
       </template>
       {{ tooltipContent }}
     </n-tooltip>
   </div>
-  <div v-else class="flex-center cursor-pointer dark:hover:bg-[#333]" :class="contentClassName">
+  <div v-else class="flex-center cursor-pointer dark:hover:bg-#333" :class="contentClassName">
     <slot></slot>
   </div>
 </template>
@@ -41,7 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
 const showTooltip = computed(() => Boolean(props.tooltipContent));
 
 const contentClassName = computed(
-  () => `${props.contentClass} ${props.inverted ? 'hover:bg-primary' : 'hover:bg-[#f6f6f6]'}`
+  () => `${props.contentClass} ${props.inverted ? 'hover:bg-primary' : 'hover:bg-#f6f6f6'}`
 );
 </script>
 

src/components/custom/icon-select.vue

@@ -14,7 +14,7 @@
       <span v-for="iconItem in iconsList" :key="iconItem" @click="handleChange(iconItem)">
         <svg-icon
           :icon="iconItem"
-          class="border-1px border-[#d9d9d9] text-30px m-2px p-5px cursor-pointer"
+          class="border-1px border-#d9d9d9 text-30px m-2px p-5px cursor-pointer"
           :class="{ 'border-primary': modelValue === iconItem }"
         />
       </span>

src/hooks/business/use-table.ts

@@ -1,10 +1,42 @@
 import { ref, reactive } from 'vue';
 import type { Ref } from 'vue';
 import type { DataTableBaseColumn, DataTableSelectionColumn, DataTableExpandColumn, PaginationProps } from 'naive-ui';
-import type { MaybeComputedRef } from '@vueuse/core';
 import type { TableColumnGroup, InternalRowData } from 'naive-ui/es/data-table/src/interface';
 import { useLoadingEmpty } from '../common';
 
+/**
+ * 表格分页参数
+ */
+type PaginationParams = Pick<PaginationProps, 'page' | 'pageSize'>;
+
+/**
+ * 表格请求接口的参数
+ */
+type ApiParams = Record<string, unknown> & PaginationParams;
+
+/**
+ * 表格请求接口的结果
+ * @description 这里用属性list来表示后端接口返回的表格数据
+ */
+type ApiData<TableData = Record<string, unknown>> = Record<string, unknown> & { list: TableData[] };
+
+/**
+ * 表格接口的请求函数
+ */
+type ApiFn<Params = ApiParams, TableData = Record<string, unknown>> = (
+  params: Params
+) => Promise<Service.RequestResult<ApiData<TableData>>>;
+
+/**
+ * 表格接口请求后转换后的数据
+ */
+type TransformedTableData<TableData = Record<string, unknown>> = {
+  data: TableData[];
+  pageNum: number;
+  pageSize: number;
+  total: number;
+};
+
 /**
  * 表格的列
  */
@@ -15,60 +47,45 @@ type DataTableColumn<T = InternalRowData> =
   | DataTableExpandColumn<T>;
 
 /**
- * 表格分页参数
+ * 表格数据转换器
+ * @description 将不同接口的表格数据转换成统一的类型
  */
-type TablePaginationParams = Pick<PaginationProps, 'page' | 'pageSize'>;
+type Transformer<TableData = Record<string, unknown>> = (
+  apiData: ApiData<TableData>
+) => TransformedTableData<TableData>;
 
-/**
+type TableParams<TableData = Record<string, unknown>, Params = ApiParams> = {
- * 表格接口的请求参数
+  apiFn: ApiFn<Params, TableData>;
- */
+  apiParams: Params;
-type TableApiParams = Record<string, unknown> & TablePaginationParams;
+  transformer: Transformer<TableData>;
-
+  columns: DataTableColumn<TableData>[];
-/**
+  pagination?: PaginationProps;
- * 表格接口的请求数据
- */
-type TableApiData<T = InternalRowData> = {
-  data: T[];
-  pageNum: number;
-  pageSize: number;
-  total: number;
 };
 
-/**
+export function useTable<TableData extends Record<string, unknown>, Params extends ApiParams>(
- * 表格接口的请求函数
+  params: TableParams<TableData, Params>,
- */
+  immediate = true
-type TableApiFn<P extends TableApiParams, T extends InternalRowData> = (
-  params: P
-) => Promise<Service.SuccessResult<TableApiData<T>>>;
-
-export function useNaiveTable<TableData extends InternalRowData, P extends TableApiParams>(
-  apiFn: TableApiFn<P, TableData>,
-  apiParams: P,
-  columns: MaybeComputedRef<DataTableColumn<TableData>[]>
 ) {
   const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();
+  const data: Ref<TableData[]> = ref([]);
 
-  const tableData: Ref<TableData[]> = ref([]);
+  function updateData(update: TableData[]) {
-
+    data.value = update;
-  async function getTableData(paginationParams?: TablePaginationParams) {
-    startLoading();
-
-    const params = { ...apiParams, ...paginationParams };
-
-    const { data } = await apiFn(params);
-    if (data) {
-      tableData.value = data.data;
-
-      setEmpty(data.data.length === 0);
-    }
-    endLoading();
   }
 
-  const pagination: PaginationProps = reactive({
+  let dataSource: TableData[] = [];
-    page: 1,
+  function setDataSource(source: TableData[]) {
-    pageSize: 10,
+    dataSource = source;
-    showSizePicker: true,
+  }
-    pageSizes: [10, 15, 20, 25, 30],
+
+  function resetData() {
+    data.value = dataSource;
+  }
+
+  const columns = ref(params.columns) as Ref<DataTableColumn<TableData>[]>;
+
+  const pagination = reactive({
+    ...getPagination(params.pagination),
     onChange: (page: number) => {
       pagination.page = page;
     },
@@ -76,14 +93,59 @@ export function useNaiveTable<TableData extends InternalRowData, P extends Table
       pagination.pageSize = pageSize;
       pagination.page = 1;
     }
-  });
+  }) as PaginationProps;
+
+  function updatePagination(update: Partial<PaginationProps>) {
+    Object.assign(pagination, update);
+  }
+
+  async function getData() {
+    const apiParams: Params = { ...params.apiParams };
+    apiParams.page = apiParams.page || pagination.page;
+    apiParams.pageSize = apiParams.pageSize || pagination.pageSize;
+
+    startLoading();
+    const { data: apiData } = await params.apiFn(apiParams);
+
+    if (apiData) {
+      const transformedData = params.transformer(apiData);
+
+      updateData(transformedData.data);
+
+      setDataSource(transformedData.data);
+
+      setEmpty(transformedData.data.length === 0);
+
+      updatePagination({ page: transformedData.pageNum, pageSize: transformedData.pageSize });
+    }
+
+    endLoading();
+  }
+
+  if (immediate) {
+    getData();
+  }
 
   return {
-    tableData,
+    data,
     columns,
     loading,
     empty,
     pagination,
-    start: getTableData
+    getData,
+    updateData,
+    resetData
   };
 }
+
+function getPagination(pagination?: Partial<PaginationProps>) {
+  const defaultPagination: Partial<PaginationProps> = {
+    page: 1,
+    pageSize: 10,
+    showSizePicker: true,
+    pageSizes: [10, 15, 20, 25, 30]
+  };
+  Object.assign(defaultPagination, pagination);
+
+  return defaultPagination;
+}

src/layouts/basic-layout/index.vue

@@ -15,6 +15,7 @@
     :sider-collapsed-width="siderCollapsedWidth"
     :footer-visible="theme.footer.visible"
     :fixed-footer="theme.footer.fixed"
+    :right-footer="theme.footer.right"
   >
     <template #header>
       <global-header v-bind="headerProps" />
@@ -30,7 +31,7 @@
       <global-footer />
     </template>
   </admin-layout>
-  <global-back-top />
+  <n-back-top :key="theme.scrollMode" :listen-to="`#${app.scrollElId}`" class="z-100" />
   <setting-drawer />
 </template>
 
@@ -38,15 +39,7 @@
 import { AdminLayout } from '@soybeanjs/vue-materials';
 import { useAppStore, useThemeStore } from '@/store';
 import { useBasicLayout } from '@/composables';
-import {
+import { GlobalContent, GlobalFooter, GlobalHeader, GlobalSider, GlobalTab, SettingDrawer } from '../common';
-  GlobalBackTop,
-  GlobalContent,
-  GlobalFooter,
-  GlobalHeader,
-  GlobalSider,
-  GlobalTab,
-  SettingDrawer
-} from '../common';
 
 defineOptions({ name: 'BasicLayout' });
 
@@ -56,4 +49,12 @@ const theme = useThemeStore();
 const { mode, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
 </script>
 
-<style scoped></style>
+<style lang="scss">
+#__SCROLL_EL_ID__ {
+  @include scrollbar(8px, #e1e1e1);
+}
+
+.dark #__SCROLL_EL_ID__ {
+  @include scrollbar(8px, #555);
+}
+</style>

src/layouts/common/global-back-top/index.vue

@@ -1,15 +0,0 @@
-<template>
-  <n-back-top :show="show" class="z-1000" />
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { useWindowScroll } from '@vueuse/core';
-
-defineOptions({ name: 'GlobalBackTop' });
-
-const { y: scrollY } = useWindowScroll();
-
-const show = computed(() => scrollY.value > 180);
-</script>
-<style scoped></style>

src/layouts/common/global-content/index.vue

@@ -13,7 +13,7 @@
           v-if="app.reloadFlag"
           :key="route.fullPath"
           :class="{ 'p-16px': showPadding }"
-          class="flex-grow bg-[#f6f9f8] dark:bg-[#101014] transition duration-300 ease-in-out"
+          class="flex-grow bg-#f6f9f8 dark:bg-#101014 transition duration-300 ease-in-out"
         />
       </keep-alive>
     </transition>

src/layouts/common/global-footer/index.vue

@@ -1,11 +1,15 @@
 <template>
-  <dark-mode-container class="flex-center h-full">
+  <dark-mode-container class="flex-center h-full" :inverted="theme.footer.inverted">
     <span>Copyright ©2021 Soybean Admin</span>
   </dark-mode-container>
 </template>
 
 <script setup lang="ts">
+import { useThemeStore } from '@/store';
+
 defineOptions({ name: 'GlobalFooter' });
+
+const theme = useThemeStore();
 </script>
 
 <style scoped></style>

src/layouts/common/global-header/components/global-breadcrumb.vue

@@ -2,14 +2,14 @@
   <n-breadcrumb class="px-12px">
     <template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.key">
       <n-breadcrumb-item>
-        <n-dropdown v-if="breadcrumb.hasChildren" :options="breadcrumb.children" @select="dropdownSelect">
+        <n-dropdown v-if="breadcrumb.hasChildren" :options="breadcrumb.options" @select="dropdownSelect">
           <span>
             <component
               :is="breadcrumb.icon"
               v-if="theme.header.crumb.showIcon"
               class="inline-block align-text-bottom mr-4px text-16px"
             />
-            <span>{{ breadcrumb.label }}</span>
+            <span>{{ breadcrumb.i18nTitle ? t(breadcrumb.i18nTitle) : breadcrumb.label }}</span>
           </span>
         </n-dropdown>
         <template v-else>
@@ -19,7 +19,9 @@
             class="inline-block align-text-bottom mr-4px text-16px"
             :class="{ 'text-#BBBBBB': theme.header.inverted }"
           />
-          <span :class="{ 'text-#BBBBBB': theme.header.inverted }">{{ breadcrumb.label }}</span>
+          <span :class="{ 'text-#BBBBBB': theme.header.inverted }">{{
+            breadcrumb.i18nTitle ? t(breadcrumb.i18nTitle) : breadcrumb.label
+          }}</span>
         </template>
       </n-breadcrumb-item>
     </template>
@@ -33,6 +35,7 @@ import { routePath } from '@/router';
 import { useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { getBreadcrumbByRouteKey } from '@/utils';
+import { t } from '@/locales';
 
 defineOptions({ name: 'GlobalBreadcrumb' });
 

src/layouts/common/global-header/components/header-menu.vue

@@ -20,6 +20,7 @@ import { useRoute } from 'vue-router';
 import type { MenuOption } from 'naive-ui';
 import { useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
+import { translateMenuLabel } from '@/utils';
 
 defineOptions({ name: 'HeaderMenu' });
 
@@ -28,7 +29,7 @@ const routeStore = useRouteStore();
 const theme = useThemeStore();
 const { routerPush } = useRouterPush();
 
-const menus = computed(() => routeStore.menus as App.GlobalMenuOption[]);
+const menus = computed(() => translateMenuLabel(routeStore.menus as App.GlobalMenuOption[]));
 const activeKey = computed(() => (route.meta?.activeMenu ? route.meta.activeMenu : route.name) as string);
 
 function handleUpdateMenu(_key: string, item: MenuOption) {

src/layouts/common/global-header/components/index.ts

@@ -7,6 +7,7 @@ import ThemeMode from './theme-mode.vue';
 import UserAvatar from './user-avatar.vue';
 import SystemMessage from './system-message.vue';
 import SettingButton from './setting-button.vue';
+import ToggleLang from './toggle-lang.vue';
 
 export {
   MenuCollapse,
@@ -17,5 +18,6 @@ export {
   ThemeMode,
   UserAvatar,
   SystemMessage,
-  SettingButton
+  SettingButton,
+  ToggleLang
 };

src/layouts/common/global-header/components/message-list.vue

@@ -4,7 +4,7 @@
       <n-list-item
         v-for="(item, index) in list"
         :key="item.id"
-        class="hover:bg-[#f6f6f6] dark:hover:bg-dark cursor-pointer"
+        class="hover:bg-#f6f6f6 dark:hover:bg-dark cursor-pointer"
         @click="handleRead(index)"
       >
         <n-thing class="px-15px" :class="{ 'opacity-30': item.isRead }">

src/layouts/common/global-header/components/toggle-lang.vue

@@ -0,0 +1,33 @@
+<template>
+  <hover-container class="w-40px h-full">
+    <n-dropdown :options="options" trigger="hover" :value="language" @select="handleSelect">
+      <icon-cil:language class="text-18px outline-transparent" />
+    </n-dropdown>
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { localStg } from '@/utils';
+
+const { locale } = useI18n();
+
+const language = ref<I18nType.langType>(localStg.get('lang') || 'zh-CN');
+const options = [
+  {
+    label: '中文',
+    key: 'zh-CN'
+  },
+  {
+    label: 'English',
+    key: 'en'
+  }
+];
+const handleSelect = (key: string) => {
+  language.value = key as I18nType.langType;
+  locale.value = key;
+  localStg.set('lang', key as I18nType.langType);
+};
+</script>
+<style scoped></style>

src/layouts/common/global-header/index.vue

@@ -11,6 +11,7 @@
       <github-site />
       <full-screen />
       <theme-mode />
+      <toggle-lang />
       <system-message />
       <setting-button v-if="showButton" />
       <user-avatar />
@@ -32,7 +33,8 @@ import {
   SettingButton,
   SystemMessage,
   ThemeMode,
-  UserAvatar
+  UserAvatar,
+  ToggleLang
 } from './components';
 
 defineOptions({ name: 'GlobalHeader' });

src/layouts/common/global-logo/index.vue

@@ -1,11 +1,7 @@
 <template>
   <router-link :to="routeHomePath" class="flex-center w-full nowrap-hidden">
     <system-logo class="text-32px text-primary" />
-    <h2
+    <h2 v-show="showTitle" class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out">
-      v-show="showTitle"
-      class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out"
-      @click="toggleLocal"
-    >
       {{ t('message.system.title') }}
     </h2>
   </router-link>
@@ -13,7 +9,7 @@
 
 <script setup lang="ts">
 import { routePath } from '@/router';
-import { t, setLocale } from '@/locales';
+import { t } from '@/locales';
 
 defineOptions({ name: 'GlobalLogo' });
 
@@ -25,12 +21,6 @@ interface Props {
 defineProps<Props>();
 
 const routeHomePath = routePath('root');
-
-let flag = true;
-function toggleLocal() {
-  flag = !flag;
-  setLocale(flag ? 'en' : 'zh-CN');
-}
 </script>
 
 <style scoped></style>

src/layouts/common/global-search/components/search-modal.vue

@@ -12,7 +12,7 @@
     <n-input-group>
       <n-input ref="inputRef" v-model:value="keyword" clearable placeholder="请输入关键词搜索" @input="handleSearch">
         <template #prefix>
-          <icon-uil-search class="text-15px text-[#c2c2c2]" />
+          <icon-uil-search class="text-15px text-#c2c2c2" />
         </template>
       </n-input>
       <n-button v-if="isMobile" type="primary" ghost @click="handleClose">取消</n-button>

src/layouts/common/global-search/components/search-result.vue

@@ -3,7 +3,7 @@
     <div class="pb-12px">
       <template v-for="item in options" :key="item.path">
         <div
-          class="bg-[#e5e7eb] dark:bg-dark h-56px mt-8px px-14px rounded-4px cursor-pointer flex-y-center justify-between"
+          class="bg-#e5e7eb dark:bg-dark h-56px mt-8px px-14px rounded-4px cursor-pointer flex-y-center justify-between"
           :style="{
             background: item.path === active ? theme.themeColor : '',
             color: item.path === active ? '#fff' : ''

src/layouts/common/global-sider/components/vertical-mix-sider/components/mix-menu-detail.vue

@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import type { VNodeChild } from 'vue';
+import type { Component } from 'vue';
 import { useBoolean } from '@/hooks';
 
 defineOptions({ name: 'MixMenuDetail' });
@@ -30,7 +30,7 @@ interface Props {
   /** 当前激活状态的理由名称 */
   activeRouteName: string;
   /** 路由图标 */
-  icon?: () => VNodeChild;
+  icon?: Component;
   /** mini尺寸的路由 */
   isMini?: boolean;
 }

src/layouts/common/global-sider/components/vertical-mix-sider/components/mix-menu-drawer.vue

@@ -5,6 +5,7 @@
   >
     <dark-mode-container
       class="drawer-shadow absolute-lt flex-col-stretch h-full nowrap-hidden"
+      :inverted="theme.sider.inverted"
       :style="{ width: showDrawer ? theme.sider.mixChildMenuWidth + 'px' : '0px' }"
     >
       <header class="header-height flex-y-center justify-between" :style="{ height: theme.header.height + 'px' }">
@@ -20,6 +21,7 @@
           :options="menus"
           :expanded-keys="expandedKeys"
           :indent="18"
+          :inverted="!theme.darkMode && theme.sider.inverted"
           @update:value="handleUpdateMenu"
           @update:expanded-keys="handleUpdateExpandedKeys"
         />

src/layouts/common/global-sider/components/vertical-mix-sider/index.vue

@@ -26,7 +26,9 @@ import { useRoute } from 'vue-router';
 import { useAppStore, useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { useBoolean } from '@/hooks';
+import { translateMenuLabel } from '@/utils';
 import { GlobalLogo } from '@/layouts/common';
+import { t } from '@/locales';
 import { MixMenuCollapse, MixMenuDetail, MixMenuDrawer } from './components';
 
 defineOptions({ name: 'VerticalMixSider' });
@@ -45,13 +47,13 @@ function setActiveParentRouteName(routeName: string) {
 
 const firstDegreeMenus = computed(() =>
   routeStore.menus.map(item => {
-    const { routeName, label } = item;
+    const { routeName, label, i18nTitle } = item;
     const icon = item?.icon;
     const hasChildren = Boolean(item.children && item.children.length);
 
     return {
       routeName,
-      label,
+      label: i18nTitle ? t(i18nTitle) : label,
       icon,
       hasChildren
     };
@@ -88,7 +90,7 @@ const activeChildMenus = computed(() => {
   routeStore.menus.some(item => {
     const flag = item.routeName === activeParentRouteName.value && Boolean(item.children?.length);
     if (flag) {
-      menus.push(...(item.children || []));
+      menus.push(...translateMenuLabel((item.children || []) as App.GlobalMenuOption[]));
     }
     return flag;
   });

src/layouts/common/global-sider/components/vertical-sider/components/vertical-menu.vue

@@ -8,7 +8,7 @@
       :options="menus"
       :expanded-keys="expandedKeys"
       :indent="18"
-      :inverted="theme.sider.inverted"
+      :inverted="!theme.darkMode && theme.sider.inverted"
       @update:value="handleUpdateMenu"
       @update:expanded-keys="handleUpdateExpandedKeys"
     />
@@ -21,7 +21,7 @@ import { useRoute } from 'vue-router';
 import type { MenuOption } from 'naive-ui';
 import { useAppStore, useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
-import { getActiveKeyPathsOfMenus } from '@/utils';
+import { getActiveKeyPathsOfMenus, translateMenuLabel } from '@/utils';
 
 defineOptions({ name: 'VerticalMenu' });
 
@@ -31,7 +31,7 @@ const theme = useThemeStore();
 const routeStore = useRouteStore();
 const { routerPush } = useRouterPush();
 
-const menus = computed(() => routeStore.menus as App.GlobalMenuOption[]);
+const menus = computed(() => translateMenuLabel(routeStore.menus as App.GlobalMenuOption[]));
 
 const activeKey = computed(() => (route.meta?.activeMenu ? route.meta.activeMenu : route.name) as string);
 const expandedKeys = ref<string[]>([]);

src/layouts/common/global-tab/components/tab-detail/index.vue

@@ -19,7 +19,7 @@
           class="inline-block align-text-bottom text-16px"
         />
       </template>
-      {{ item.meta.title }}
+      {{ item.meta.i18nTitle ? t(item.meta.i18nTitle) : item.meta.title }}
     </AdminTab>
   </div>
   <context-menu
@@ -36,6 +36,7 @@
 import { computed, nextTick, reactive, ref, watch } from 'vue';
 import { AdminTab } from '@soybeanjs/vue-materials';
 import { useTabStore, useThemeStore } from '@/store';
+import { t } from '@/locales';
 import { ContextMenu } from './components';
 
 defineOptions({ name: 'TabDetail' });

src/layouts/common/index.ts

@@ -5,6 +5,5 @@ import GlobalSider from './global-sider/index.vue';
 import GlobalContent from './global-content/index.vue';
 import GlobalFooter from './global-footer/index.vue';
 import GlobalLogo from './global-logo/index.vue';
-import GlobalBackTop from './global-back-top/index.vue';
 
-export { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter, GlobalLogo, GlobalBackTop };
+export { SettingDrawer, GlobalHeader, GlobalTab, GlobalSider, GlobalContent, GlobalFooter, GlobalLogo };

src/layouts/common/setting-drawer/components/dark-mode/index.vue

@@ -21,12 +21,15 @@
         </template>
       </n-switch>
     </setting-menu>
-    <setting-menu label="侧边栏深色主题">
+    <setting-menu label="侧边栏深色">
       <n-switch :value="theme.sider.inverted" @update:value="theme.setSiderInverted" />
     </setting-menu>
-    <setting-menu label="头部深色主题">
+    <setting-menu label="头部深色">
       <n-switch :value="theme.header.inverted" @update:value="theme.setHeaderInverted" />
     </setting-menu>
+    <setting-menu label="底部深色">
+      <n-switch :value="theme.footer.inverted" @update:value="theme.setFooterInverted" />
+    </setting-menu>
   </n-space>
 </template>
 

src/layouts/common/setting-drawer/components/layout-mode/components/layout-checkbox.vue

@@ -6,8 +6,8 @@
     <n-tooltip :placement="activeConfig.placement" trigger="hover">
       <template #trigger>
         <div class="layout-checkbox__shadow relative w-56px h-48px bg-white rounded-4px overflow-hidden">
-          <div class="absolute-lt bg-[#273352]" :class="activeConfig.menuClass"></div>
+          <div class="absolute-lt bg-#273352" :class="activeConfig.menuClass"></div>
-          <div class="absolute-rb bg-[#f0f2f5]" :class="activeConfig.mainClass"></div>
+          <div class="absolute-rb bg-#f0f2f5" :class="activeConfig.mainClass"></div>
         </div>
       </template>
       <span>{{ label }}</span>

src/layouts/common/setting-drawer/components/page-func/index.vue

@@ -61,11 +61,14 @@
         @update:value="theme.setMixSiderWidth"
       />
     </setting-menu>
+    <setting-menu label="显示底部">
+      <n-switch :value="theme.footer.visible" @update:value="theme.setFooterVisible" />
+    </setting-menu>
     <setting-menu label="固定底部">
       <n-switch :value="theme.footer.fixed" @update:value="theme.setFooterIsFixed" />
     </setting-menu>
-    <setting-menu label="显示底部">
+    <setting-menu label="底部居右">
-      <n-switch :value="theme.footer.visible" @update:value="theme.setFooterVisible" />
+      <n-switch :value="theme.footer.right" @update:value="theme.setFooterIsRight" />
     </setting-menu>
   </n-space>
 </template>

src/locales/i18n.ts

@@ -1,12 +1,14 @@
 import type { App } from 'vue';
 import { createI18n } from 'vue-i18n';
+import { localStg } from '@/utils';
 import messages from './lang';
 import type { LocaleKey } from './lang';
 
 const i18n = createI18n({
-  locale: 'zh-CN',
+  locale: localStg.get('lang') || 'zh-CN',
   fallbackLocale: 'en',
-  messages
+  messages,
+  legacy: false
 });
 
 export function setupI18n(app: App) {
@@ -18,5 +20,5 @@ export function t(key: string) {
 }
 
 export function setLocale(locale: LocaleKey) {
-  i18n.global.locale = locale;
+  i18n.global.locale.value = locale;
 }

src/locales/lang/en.ts

@@ -11,10 +11,74 @@ const locale: LocaleMessages<I18nType.Schema> = {
         analysis: 'Analysis',
         workbench: 'Workbench'
       },
-      about: {
+      document: {
-        about: 'About'
+        _value: 'Document',
+        vue: 'Vue Document',
+        vite: 'Vite Document',
+        naive: 'NaiveUI Document',
+        project: 'Project Document',
+        'project-link': 'Project Document(href)'
+      },
+      component: {
+        _value: 'Component',
+        button: 'Button',
+        card: 'Card',
+        table: 'Table'
+      },
+      plugin: {
+        _value: 'Plugin',
+        charts: {
+          _value: 'Chart',
+          echarts: 'ECharts',
+          antv: 'AntV'
+        },
+        copy: 'Copy',
+        editor: {
+          _value: 'Editor',
+          quill: 'Quill',
+          markdown: 'Markdown'
+        },
+        icon: 'Icon',
+        map: 'Map',
+        print: 'Print',
+        swiper: 'Swiper',
+        video: 'Video'
+      },
+      'auth-demo': {
+        _value: 'Auth Demo',
+        permission: 'Toggle Permission',
+        super: 'Super Auth'
+      },
+      function: {
+        _value: 'Function',
+        tab: 'System Tab'
+      },
+      exception: {
+        _value: 'Exception',
+        403: '403',
+        404: '404',
+        500: '500'
+      },
+      'multi-menu': {
+        _value: 'Multi Degree Menu',
+        first: {
+          _value: 'First Degree',
+          second: 'Second Degree',
+          'second-new': {
+            _value: 'Second Degree With Children',
+            third: 'Third Degree'
           }
         }
+      },
+      management: {
+        _value: 'System Management',
+        auth: 'Auth',
+        role: 'Role',
+        route: 'Route',
+        user: 'User'
+      },
+      about: 'About'
+    }
   }
 };
 

src/locales/lang/zh-cn.ts

@@ -11,10 +11,74 @@ const locale: LocaleMessages<I18nType.Schema> = {
         analysis: '分析页',
         workbench: '工作台'
       },
-      about: {
+      document: {
-        about: '关于'
+        _value: '文档',
+        vue: 'Vue文档',
+        vite: 'Vite文档',
+        naive: 'NaiveUI文档',
+        project: '项目文档',
+        'project-link': '项目文档(外链)'
+      },
+      component: {
+        _value: '组件示例',
+        button: '按钮',
+        card: '卡片',
+        table: '表格'
+      },
+      plugin: {
+        _value: '插件示例',
+        charts: {
+          _value: '图表',
+          echarts: 'ECharts',
+          antv: 'AntV'
+        },
+        copy: '剪贴板',
+        editor: {
+          _value: '编辑器',
+          quill: '富文本',
+          markdown: 'Markdown'
+        },
+        icon: '图标',
+        map: '地图',
+        print: '打印',
+        swiper: 'Swiper',
+        video: '视频'
+      },
+      'auth-demo': {
+        _value: '权限示例',
+        permission: '切换权限',
+        super: '超级管理员可见'
+      },
+      function: {
+        _value: '功能',
+        tab: 'Tab页签'
+      },
+      exception: {
+        _value: '异常页',
+        403: '403',
+        404: '404',
+        500: '500'
+      },
+      'multi-menu': {
+        _value: '多级菜单',
+        first: {
+          _value: '一级菜单',
+          second: '二级菜单',
+          'second-new': {
+            _value: '二级菜单(有子菜单)',
+            third: '三级菜单'
           }
         }
+      },
+      management: {
+        _value: '系统管理',
+        auth: '权限管理',
+        role: '角色管理',
+        route: '路由管理',
+        user: '用户管理'
+      },
+      about: '关于'
+    }
   }
 };
 

src/main.ts

@@ -3,7 +3,7 @@ import App from './App.vue';
 import AppLoading from './components/common/app-loading.vue';
 import { setupDirectives } from './directives';
 import { setupRouter } from './router';
-import { setupAssets } from './plugins';
+import { setupAssets, setupFastCrud } from './plugins';
 import { setupStore } from './store';
 import { setupI18n } from './locales';
 
@@ -29,6 +29,8 @@ async function setupApp() {
 
   setupI18n(app);
 
+  setupFastCrud(app);
+
   // mount app
   app.mount('#app');
 }

src/plugins/fast-crud/common.scss

@@ -0,0 +1,11 @@
+html:root {
+	--baseColor: #fff;
+}
+/* 深色模式 */
+html.dark:root {
+	--baseColor: #000;
+}
+
+.fs-container {
+	background-color: var(--baseColor);
+}

src/plugins/fast-crud/index.tsx

@@ -0,0 +1,171 @@
+import type { App } from 'vue';
+import type { FsSetupOptions, PageQuery } from '@fast-crud/fast-crud';
+// eslint-disable-next-line import/order
+import { FastCrud } from '@fast-crud/fast-crud';
+import '@fast-crud/fast-crud/dist/style.css';
+import './common.scss';
+
+import type { FsUploaderOptions } from '@fast-crud/fast-extends';
+import {
+  FsExtendsCopyable,
+  FsExtendsEditor,
+  FsExtendsJson,
+  FsExtendsTime,
+  FsExtendsUploader
+} from '@fast-crud/fast-extends';
+import '@fast-crud/fast-extends/dist/style.css';
+import UiNaive from '@fast-crud/ui-naive';
+import axios from 'axios';
+import type { VueI18n } from 'vue-i18n';
+import { mockRequest, request } from '@/service/request';
+import { setupNaive } from '@/plugins/fast-crud/naive';
+
+/**
+ *  fast-crud的安装方法
+ *  注意：在App.vue中，需要用fs-ui-context组件包裹RouterView，让fs-crud拥有message、notification、dialog的能力
+ * @param app
+ * @param options
+ */
+export type FsSetupOpts = {
+  i18n?: VueI18n;
+};
+function install(app: App, options: FsSetupOpts = {}) {
+  // 安装naive ui 常用组件
+  setupNaive(app);
+  app.use(UiNaive);
+  app.use(FastCrud, {
+    i18n: options.i18n,
+    async dictRequest(context: { url: string }) {
+      const url = context.url;
+      let res: Service.SuccessResult | Service.FailedResult;
+      if (url && url.startsWith('/mock')) {
+        // 如果是crud开头的dict请求视为mock
+        res = await mockRequest.get(url.replace('/mock', ''));
+      } else {
+        res = await request.get(url);
+      }
+      res = res || {};
+      return res.data || [];
+    },
+    /**
+     * useCrud时会被执行
+     */
+    commonOptions() {
+      return {
+        table: {
+          size: 'small',
+          pagination: false
+        },
+        search: {
+          options: {
+            size: 'medium'
+          }
+        },
+        rowHandle: {
+          buttons: {
+            view: { text: null, icon: 'EyeOutlined', size: 'small' },
+            edit: { text: null, icon: 'EditOutlined', size: 'small' },
+            remove: { type: 'error', text: null, icon: 'DeleteOutlined', size: 'small' }
+          },
+          dropdown: {
+            more: { size: 'small' }
+          }
+        },
+        request: {
+          // 查询参数转换
+          transformQuery: (query: PageQuery) => {
+            const { page, form, sort } = query;
+            const limit = page.pageSize;
+            const currentPage = page.currentPage ?? 1;
+            const offset = limit * (currentPage - 1);
+
+            return {
+              page: {
+                limit,
+                offset
+              },
+              query: form,
+              sort: sort || {}
+            };
+          },
+          // page请求结果转换
+          transformRes: originPageRes => {
+            const { res } = originPageRes;
+            const pageSize = res.limit;
+            let currentPage = res.offset / pageSize;
+            if (res.offset % pageSize === 0) {
+              currentPage += 1;
+            }
+            return { currentPage, pageSize, ...res };
+          }
+        },
+        form: {
+          display: 'flex', // 表单布局
+          labelWidth: '120px' // 表单label宽度
+        }
+      };
+      // 从 useCrud({permission}) 里获取permission参数，去设置各个按钮的权限
+      // const crudPermission = useCrudPermission(context);
+      // return crudPermission.merge(opts);
+    }
+  } as FsSetupOptions);
+
+  // fast-extends里面的扩展组件均为异步组件，只有在使用时才会被加载，并不会影响首页加载速度
+  // 安装editor
+  app.use(FsExtendsEditor, {
+    // 编辑器的公共配置
+    wangEditor: {}
+  });
+  app.use(FsExtendsJson);
+  app.use(FsExtendsCopyable);
+  // 安装uploader 公共参数
+  const uploaderOptions: FsUploaderOptions = {
+    defaultType: 'form',
+    form: {
+      action: 'http://www.docmirror.cn:7070/api/upload/form/upload',
+      name: 'file',
+      withCredentials: false,
+      uploadRequest: async props => {
+        const { action, file, onProgress } = props;
+        const data = new FormData();
+        data.append('file', file);
+        const res = await axios.post(action, data, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          },
+          timeout: 60000,
+          onUploadProgress(progress) {
+            onProgress({ percent: Math.round((progress.loaded / progress.total!) * 100) });
+          }
+        });
+        // 上传完成后的结果，一般返回个url 或者key,具体看你的后台返回啥
+        return res.data.data;
+      },
+      async successHandle(ret: string) {
+        // 上传完成后的结果处理， 此处应转换格式为{url:xxx,key:xxx}
+        return {
+          url: `http://www.docmirror.cn:7070${ret}`,
+          key: ret.replace('/api/upload/form/download?key=', '')
+        };
+      }
+    }
+  };
+  app.use(FsExtendsUploader, uploaderOptions);
+
+  // 安装editor
+  app.use(FsExtendsEditor, {
+    // 编辑器的公共配置
+    wangEditor: {}
+  });
+  app.use(FsExtendsJson);
+  app.use(FsExtendsTime);
+  app.use(FsExtendsCopyable);
+}
+
+export default {
+  install
+};
+
+export function setupFastCrud(app: App<Element>, options: FsSetupOpts = {}) {
+  install(app, options);
+}

src/plugins/fast-crud/naive.ts

@@ -0,0 +1,59 @@
+import type { App } from 'vue';
+import * as NaiveUI from 'naive-ui';
+
+const naive = NaiveUI.create({
+  components: [
+    NaiveUI.NInput,
+    NaiveUI.NButton,
+    NaiveUI.NForm,
+    NaiveUI.NFormItem,
+    NaiveUI.NCheckboxGroup,
+    NaiveUI.NCheckbox,
+    NaiveUI.NIcon,
+    NaiveUI.NDropdown,
+    NaiveUI.NTooltip,
+    NaiveUI.NTabs,
+    NaiveUI.NTabPane,
+    NaiveUI.NCard,
+    NaiveUI.NRow,
+    NaiveUI.NCol,
+    NaiveUI.NDrawer,
+    NaiveUI.NDrawerContent,
+    NaiveUI.NDivider,
+    NaiveUI.NSwitch,
+    NaiveUI.NBadge,
+    NaiveUI.NAlert,
+    NaiveUI.NTag,
+    NaiveUI.NProgress,
+    NaiveUI.NDatePicker,
+    NaiveUI.NGrid,
+    NaiveUI.NGridItem,
+    NaiveUI.NDataTable,
+    NaiveUI.NPagination,
+    NaiveUI.NSelect,
+    NaiveUI.NRadioGroup,
+    NaiveUI.NRadio,
+    NaiveUI.NInputGroup,
+    NaiveUI.NTable,
+    NaiveUI.NInputNumber,
+    NaiveUI.NLoadingBarProvider,
+    NaiveUI.NModal,
+    NaiveUI.NUpload,
+    NaiveUI.NTree,
+    NaiveUI.NSpin,
+    NaiveUI.NTimePicker,
+
+    // add by fs
+    NaiveUI.NCascader,
+    NaiveUI.NRadioButton,
+    NaiveUI.NTreeSelect,
+    NaiveUI.NImageGroup,
+    NaiveUI.NImage,
+    NaiveUI.NCollapse,
+    NaiveUI.NCollapseItem
+  ]
+});
+
+export function setupNaive(app: App<Element>) {
+  app.use(naive);
+}

src/plugins/index.ts

@@ -1,3 +1,5 @@
+import { setupFastCrud } from '@/plugins/fast-crud';
 import setupAssets from './assets';
 
+export { setupFastCrud };
 export { setupAssets };

src/router/guard/index.ts

@@ -1,5 +1,6 @@
 import type { Router } from 'vue-router';
 import { useTitle } from '@vueuse/core';
+import { t } from '@/locales';
 import { createPermissionGuard } from './permission';
 
 /**
@@ -15,7 +16,7 @@ export function createRouterGuard(router: Router) {
   });
   router.afterEach(to => {
     // 设置document title
-    useTitle(to.meta.title);
+    useTitle(to.meta.i18nTitle ? t(to.meta.i18nTitle) : to.meta.title);
     // 结束 loadingBar
     window.$loadingBar?.finish();
   });

src/router/modules/about.ts

@@ -4,6 +4,7 @@ const about1: AuthRoute.Route = {
   component: 'self',
   meta: {
     title: '关于',
+    i18nTitle: 'message.routes.about',
     requiresAuth: true,
     keepAlive: true,
     singleLayout: 'basic',

src/router/modules/auth-demo.ts

@@ -9,6 +9,7 @@ const authDemo: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '权限切换',
+        i18nTitle: 'message.routes.auth-demo.permission',
         requiresAuth: true,
         icon: 'ic:round-construction'
       }
@@ -19,6 +20,7 @@ const authDemo: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '超级管理员可见',
+        i18nTitle: 'message.routes.auth-demo.super',
         requiresAuth: true,
         permissions: ['super'],
         icon: 'ic:round-supervisor-account'
@@ -27,6 +29,7 @@ const authDemo: AuthRoute.Route = {
   ],
   meta: {
     title: '权限示例',
+    i18nTitle: 'message.routes.auth-demo._value',
     icon: 'ic:baseline-security',
     order: 5
   }

src/router/modules/component.ts

@@ -9,6 +9,7 @@ const component: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '按钮',
+        i18nTitle: 'message.routes.component.button',
         requiresAuth: true,
         icon: 'mdi:button-cursor'
       }
@@ -19,6 +20,7 @@ const component: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '卡片',
+        i18nTitle: 'message.routes.component.card',
         requiresAuth: true,
         icon: 'mdi:card-outline'
       }
@@ -29,6 +31,7 @@ const component: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '表格',
+        i18nTitle: 'message.routes.component.table',
         requiresAuth: true,
         icon: 'mdi:table-large'
       }
@@ -36,6 +39,7 @@ const component: AuthRoute.Route = {
   ],
   meta: {
     title: '组件示例',
+    i18nTitle: 'message.routes.component._value',
     icon: 'cib:app-store',
     order: 3
   }

src/router/modules/crud.ts

@@ -0,0 +1,45 @@
+const component: any = {
+  name: 'crud',
+  path: '/crud',
+  component: 'basic',
+  meta: {
+    title: 'CRUD示例',
+    requiresAuth: true,
+    icon: 'mdi:table-large',
+    order: 4
+  },
+  children: [
+    {
+      name: 'crud_demo',
+      path: '/crud/demo',
+      component: 'self',
+      meta: {
+        title: '基本示例',
+        requiresAuth: true,
+        icon: 'mdi:button-cursor'
+      }
+    },
+    {
+      name: 'crud_header_group',
+      path: '/crud/header_group',
+      component: 'self',
+      meta: {
+        title: '多级表头',
+        requiresAuth: true,
+        icon: 'mdi:button-cursor'
+      }
+    },
+    {
+      name: 'crud_doc',
+      path: '/crud/doc',
+      component: 'self',
+      meta: {
+        title: 'FastCrud文档',
+        requiresAuth: true,
+        icon: 'logos:vue'
+      }
+    }
+  ]
+};
+
+export default component;

src/router/modules/dashboard.ts

@@ -10,7 +10,8 @@ const dashboard: AuthRoute.Route = {
       meta: {
         title: '分析页',
         requiresAuth: true,
-        icon: 'icon-park-outline:analysis'
+        icon: 'icon-park-outline:analysis',
+        i18nTitle: 'message.routes.dashboard.analysis'
       }
     },
     {
@@ -20,14 +21,16 @@ const dashboard: AuthRoute.Route = {
       meta: {
         title: '工作台',
         requiresAuth: true,
-        icon: 'icon-park-outline:workbench'
+        icon: 'icon-park-outline:workbench',
+        i18nTitle: 'message.routes.dashboard.workbench'
       }
     }
   ],
   meta: {
     title: '仪表盘',
     icon: 'mdi:monitor-dashboard',
-    order: 1
+    order: 1,
+    i18nTitle: 'message.routes.dashboard.dashboard'
   }
 };
 

src/router/modules/document.ts

@@ -9,6 +9,7 @@ const document: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: 'vue文档',
+        i18nTitle: 'message.routes.document.vue',
         requiresAuth: true,
         icon: 'logos:vue'
       }
@@ -19,6 +20,7 @@ const document: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: 'vite文档',
+        i18nTitle: 'message.routes.document.vite',
         requiresAuth: true,
         icon: 'logos:vitejs'
       }
@@ -29,6 +31,7 @@ const document: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: 'naive文档',
+        i18nTitle: 'message.routes.document.naive',
         requiresAuth: true,
         icon: 'logos:naiveui'
       }
@@ -39,6 +42,7 @@ const document: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '项目文档',
+        i18nTitle: 'message.routes.document.project',
         requiresAuth: true,
         localIcon: 'logo'
       }
@@ -48,6 +52,7 @@ const document: AuthRoute.Route = {
       path: '/document/project-link',
       meta: {
         title: '项目文档(外链)',
+        i18nTitle: 'message.routes.document.project-link',
         requiresAuth: true,
         localIcon: 'logo',
         href: 'https://docs.soybean.pro/'
@@ -56,6 +61,7 @@ const document: AuthRoute.Route = {
   ],
   meta: {
     title: '文档',
+    i18nTitle: 'message.routes.document._value',
     icon: 'mdi:file-document-multiple-outline',
     order: 2
   }

src/router/modules/exception.ts

@@ -9,6 +9,7 @@ const exception: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '异常页403',
+        i18nTitle: 'message.routes.exception.403',
         requiresAuth: true,
         icon: 'ic:baseline-block'
       }
@@ -19,6 +20,7 @@ const exception: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '异常页404',
+        i18nTitle: 'message.routes.exception.404',
         requiresAuth: true,
         icon: 'ic:baseline-web-asset-off'
       }
@@ -29,12 +31,14 @@ const exception: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '异常页500',
+        i18nTitle: 'message.routes.exception.500',
         requiresAuth: true,
         icon: 'ic:baseline-wifi-off'
       }
     }
   ],
   meta: {
+    i18nTitle: 'message.routes.exception._value',
     title: '异常页',
     icon: 'ant-design:exception-outlined',
     order: 7

src/router/modules/function.ts

@@ -9,6 +9,7 @@ const functionRoute: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: 'Tab',
+        i18nTitle: 'message.routes.function.tab',
         requiresAuth: true,
         icon: 'ic:round-tab'
       }
@@ -41,6 +42,7 @@ const functionRoute: AuthRoute.Route = {
   ],
   meta: {
     title: '功能',
+    i18nTitle: 'message.routes.function._value',
     icon: 'icon-park-outline:all-application',
     order: 6
   }

src/router/modules/management.ts

@@ -9,6 +9,7 @@ const management: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '权限管理',
+        i18nTitle: 'message.routes.management.auth',
         requiresAuth: true,
         icon: 'ic:baseline-security'
       }
@@ -19,6 +20,7 @@ const management: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '角色管理',
+        i18nTitle: 'message.routes.management.role',
         requiresAuth: true,
         icon: 'carbon:user-role'
       }
@@ -29,6 +31,7 @@ const management: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '用户管理',
+        i18nTitle: 'message.routes.management.user',
         requiresAuth: true,
         icon: 'ic:round-manage-accounts'
       }
@@ -39,6 +42,7 @@ const management: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '路由管理',
+        i18nTitle: 'message.routes.management.route',
         requiresAuth: true,
         icon: 'material-symbols:route'
       }
@@ -46,6 +50,7 @@ const management: AuthRoute.Route = {
   ],
   meta: {
     title: '系统管理',
+    i18nTitle: 'message.routes.management._value',
     icon: 'carbon:cloud-service-management',
     order: 9
   }

src/router/modules/multi-menu.ts

@@ -14,6 +14,7 @@ const multiMenu: AuthRoute.Route = {
           component: 'self',
           meta: {
             title: '二级菜单',
+            i18nTitle: 'message.routes.multi-menu.first.second',
             requiresAuth: true,
             icon: 'mdi:menu'
           }
@@ -29,6 +30,7 @@ const multiMenu: AuthRoute.Route = {
               component: 'self',
               meta: {
                 title: '三级菜单',
+                i18nTitle: 'message.routes.multi-menu.first.second-new.third',
                 requiresAuth: true,
                 icon: 'mdi:menu'
               }
@@ -36,18 +38,21 @@ const multiMenu: AuthRoute.Route = {
           ],
           meta: {
             title: '二级菜单(有子菜单)',
+            i18nTitle: 'message.routes.multi-menu.first.second-new._value',
             icon: 'mdi:menu'
           }
         }
       ],
       meta: {
         title: '一级菜单',
+        i18nTitle: 'message.routes.multi-menu.first._value',
         icon: 'mdi:menu'
       }
     }
   ],
   meta: {
     title: '多级菜单',
+    i18nTitle: 'message.routes.multi-menu._value',
     icon: 'carbon:menu',
     order: 8
   }

src/router/modules/plugin.ts

@@ -14,6 +14,7 @@ const plugin: AuthRoute.Route = {
           component: 'self',
           meta: {
             title: 'ECharts',
+            i18nTitle: 'message.routes.plugin.charts.echarts',
             requiresAuth: true,
             icon: 'simple-icons:apacheecharts'
           }
@@ -24,6 +25,7 @@ const plugin: AuthRoute.Route = {
           component: 'self',
           meta: {
             title: 'AntV',
+            i18nTitle: 'message.routes.plugin.charts.antv',
             requiresAuth: true,
             icon: 'simple-icons:antdesign'
           }
@@ -31,6 +33,7 @@ const plugin: AuthRoute.Route = {
       ],
       meta: {
         title: '图表',
+        i18nTitle: 'message.routes.plugin.charts._value',
         icon: 'mdi:chart-areaspline'
       }
     },
@@ -40,6 +43,7 @@ const plugin: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '地图',
+        i18nTitle: 'message.routes.plugin.map',
         requiresAuth: true,
         icon: 'mdi:map'
       }
@@ -50,6 +54,7 @@ const plugin: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '视频',
+        i18nTitle: 'message.routes.plugin.video',
         requiresAuth: true,
         icon: 'mdi:video'
       }
@@ -65,6 +70,7 @@ const plugin: AuthRoute.Route = {
           component: 'self',
           meta: {
             title: '富文本编辑器',
+            i18nTitle: 'message.routes.plugin.editor.quill',
             requiresAuth: true,
             icon: 'mdi:file-document-edit-outline'
           }
@@ -75,6 +81,7 @@ const plugin: AuthRoute.Route = {
           component: 'self',
           meta: {
             title: 'markdown编辑器',
+            i18nTitle: 'message.routes.plugin.editor.markdown',
             requiresAuth: true,
             icon: 'ri:markdown-line'
           }
@@ -82,6 +89,7 @@ const plugin: AuthRoute.Route = {
       ],
       meta: {
         title: '编辑器',
+        i18nTitle: 'message.routes.plugin.editor._value',
         icon: 'icon-park-outline:editor'
       }
     },
@@ -91,6 +99,7 @@ const plugin: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: 'Swiper插件',
+        i18nTitle: 'message.routes.plugin.swiper',
         requiresAuth: true,
         icon: 'simple-icons:swiper'
       }
@@ -101,6 +110,7 @@ const plugin: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '剪贴板',
+        i18nTitle: 'message.routes.plugin.copy',
         requiresAuth: true,
         icon: 'mdi:clipboard-outline'
       }
@@ -111,6 +121,7 @@ const plugin: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '图标',
+        i18nTitle: 'message.routes.plugin.icon',
         requiresAuth: true,
         localIcon: 'custom-icon'
       }
@@ -121,6 +132,7 @@ const plugin: AuthRoute.Route = {
       component: 'self',
       meta: {
         title: '打印',
+        i18nTitle: 'message.routes.plugin.print',
         requiresAuth: true,
         icon: 'mdi:printer'
       }
@@ -128,6 +140,7 @@ const plugin: AuthRoute.Route = {
   ],
   meta: {
     title: '插件示例',
+    i18nTitle: 'message.routes.plugin._value',
     icon: 'clarity:plugin-line',
     order: 4
   }

src/service/request/instance.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import type { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios';
+import type { AxiosResponse, AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios';
 import { REFRESH_TOKEN_CODE } from '@/config';
 import {
   localStg,
@@ -59,7 +59,7 @@ export default class CustomAxiosInstance {
       }
     );
     this.instance.interceptors.response.use(
-      async response => {
+      (async response => {
         const { status } = response;
         if (status === 200 || status < 300 || status === 304) {
           const backend = response.data;
@@ -82,7 +82,7 @@ export default class CustomAxiosInstance {
         }
         const error = handleResponseError(response);
         return handleServiceResult(error, null);
-      },
+      }) as (response: AxiosResponse<any, any>) => Promise<AxiosResponse<any, any>>,
       (axiosError: AxiosError) => {
         const error = handleAxiosError(axiosError);
         return handleServiceResult(error, null);

src/settings/theme.json

@@ -120,9 +120,11 @@
     ]
   },
   "footer": {
+    "visible": true,
     "fixed": false,
+    "right": true,
     "height": 48,
-    "visible": true
+    "inverted": false
   },
   "page": {
     "animate": true,

src/settings/theme.ts

@@ -83,9 +83,11 @@ const defaultThemeSetting: Theme.Setting = {
     horizontalPositionList: themeHorizontalMenuPositionOptions
   },
   footer: {
+    visible: true,
     fixed: false,
+    right: true,
     height: 48,
-    visible: true
+    inverted: false
   },
   page: {
     animate: true,

src/store/modules/route/index.ts

@@ -107,6 +107,7 @@ export const useRouteStore = defineStore('route-store', {
     },
     /** 初始化动态路由 */
     async initDynamicRoute() {
+      const { resetAuthStore } = useAuthStore();
       const { initHomeTab } = useTabStore();
 
       const { userId } = localStg.get('userInfo') || {};
@@ -125,6 +126,8 @@ export const useRouteStore = defineStore('route-store', {
         initHomeTab(data.home, router);
 
         this.isInitAuthRoute = true;
+      } else {
+        resetAuthStore();
       }
     },
     /** 初始化静态路由 */

src/store/modules/tab/helpers.ts

@@ -7,7 +7,6 @@ import { localStg } from '@/utils';
  */
 export function getTabRouteByVueRoute(route: RouteRecordNormalized | RouteLocationNormalizedLoaded) {
   const fullPath = hasFullPath(route) ? route.fullPath : route.path;
-
   const tabRoute: App.GlobalTabRoute = {
     name: route.name,
     fullPath,

src/store/modules/theme/index.ts

@@ -145,17 +145,25 @@ export const useThemeStore = defineStore('theme-store', {
     setHorizontalMenuPosition(position: UnionKey.ThemeHorizontalMenuPosition) {
       this.menu.horizontalPosition = position;
     },
+    /** 设置底部是否显示 */
+    setFooterVisible(isVisible: boolean) {
+      this.footer.visible = isVisible;
+    },
     /** 设置底部是否固定 */
     setFooterIsFixed(isFixed: boolean) {
       this.footer.fixed = isFixed;
     },
+    /** 设置底部是否固定 */
+    setFooterIsRight(right: boolean) {
+      this.footer.right = right;
+    },
     /** 设置底部高度 */
     setFooterHeight(height: number) {
       this.footer.height = height;
     },
-    /** 设置底部是否显示 */
+    /** 设置底部高度 */
-    setFooterVisible(isVisible: boolean) {
+    setFooterInverted(inverted: boolean) {
-      this.footer.visible = isVisible;
+      this.footer.inverted = inverted;
     },
     /** 设置切换页面时是否过渡动画 */
     setPageIsAnimate(animate: boolean) {

src/styles/css/global.css

@@ -1,6 +1,5 @@
 @import "./transition.css";
 @import "./reset.css";
-@import "./scrollbar.css";
 
 html,
 body,

src/styles/css/scrollbar.css

@@ -1,52 +0,0 @@
-html {
-	scrollbar-width: thin;
-	scrollbar-color: #e1e1e1 transparent;
-}
-
-/*---滚动条默认显示样式--*/
-html::-webkit-scrollbar-thumb {
-	background-color: #e1e1e1;
-	border-radius: 8px;
-}
-/*---鼠标点击滚动条显示样式--*/
-html::-webkit-scrollbar-thumb:hover {
-	background-color: #e1e1e1;
-	border-radius: 8px;
-}
-/*---滚动条大小--*/
-html::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-}
-/*---滚动框背景样式--*/
-html::-webkit-scrollbar-track-piece {
-	background-color: rgba(0, 0, 0, 0);
-	border-radius: 0;
-}
-
-html.dark {
-	scrollbar-width: thin;
-	scrollbar-color: #555 transparent;
-}
-
-/*---滚动条默认显示样式--*/
-html.dark::-webkit-scrollbar-thumb {
-	background-color: #555;
-	border-radius: 8px;
-}
-/*---鼠标点击滚动条显示样式--*/
-html.dark::-webkit-scrollbar-thumb:hover {
-	background-color: #555;
-	border-radius: 8px;
-}
-/*---滚动条大小--*/
-html.dark::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-}
-
-/*---滚动框背景样式--*/
-html.dark::-webkit-scrollbar-track-piece {
-	background-color: rgba(0, 0, 0, 0);
-	border-radius: 0;
-}

src/styles/scss/scrollbar.scss

@@ -1,4 +1,7 @@
 @mixin scrollbar($size: 8px, $color: #d9d9d9) {
+	scrollbar-width: thin;
+	scrollbar-color: $color transparent;
+
 	&::-webkit-scrollbar-thumb {
 		background-color: $color;
 		border-radius: $size;

src/typings/env.d.ts

@@ -59,6 +59,11 @@ interface ImportMetaEnv {
   readonly VITE_COMPRESS_TYPE?: 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw';
   /** 是否应用pwa */
   readonly VITE_PWA?: 'Y' | 'N';
+  /**
+   * 是否开启生产模式下的mock
+   * @description 生产模式下会拦截XHR，导致无法获取response，不使用mock请求时设置为N
+   */
+  readonly VITE_PROD_MOCK?: 'Y' | 'N';
   /** hash路由模式 */
   readonly VITE_HASH_ROUTE?: 'Y' | 'N';
   /** 是否是部署的vercel */

src/typings/package.d.ts

@@ -7,3 +7,9 @@ declare namespace BMap {
 }
 
 declare const TMap: any;
+
+declare module 'unplugin-vue-define-options/vite' {
+  const plugin: (options?: import('unplugin-vue-define-options/dist/unplugin.d-59ddef99').B) => import('vite').Plugin;
+
+  export default plugin;
+}

src/typings/page-route.d.ts

@@ -30,6 +30,12 @@ declare namespace PageRoute {
     | 'component_button'
     | 'component_card'
     | 'component_table'
+    | 'crud'
+    | 'crud_demo'
+    | 'crud_doc'
+    | 'crud_header'
+    | 'crud_header_group'
+    | 'crud_source'
     | 'dashboard'
     | 'dashboard_analysis'
     | 'dashboard_workbench'
@@ -89,6 +95,10 @@ declare namespace PageRoute {
     | 'component_button'
     | 'component_card'
     | 'component_table'
+    | 'crud_demo'
+    | 'crud_doc'
+    | 'crud_header_group'
+    | 'crud_source'
     | 'dashboard_analysis'
     | 'dashboard_workbench'
     | 'document_naive'

src/typings/route.d.ts

@@ -31,6 +31,8 @@ declare namespace AuthRoute {
   interface RouteMeta<K extends AuthRoute.RoutePath> {
     /** 路由标题(可用来作document.title或者菜单的名称) */
     title: string;
+    /** 用来支持多国语言 如果i18nTitle和title同时存在优先使用i18nTitle */
+    i18nTitle?: string;
     /** 路由的动态路径(需要动态路径的页面需要将path添加进范型参数) */
     dynamicPath?: AuthRouteUtils.GetDynamicPath<K>;
     /** 作为单级路由的父级路由布局组件 */

src/typings/storage.d.ts

@@ -18,5 +18,7 @@ declare namespace StorageInterface {
     themeSettings: Theme.Setting;
     /** 多页签路由信息 */
     multiTabRoutes: App.GlobalTabRoute[];
+    /** 本地语言缓存 */
+    lang: I18nType.langType;
   }
 }

src/typings/system.d.ts

@@ -200,12 +200,16 @@ declare namespace Theme {
 
   /** 底部样式 */
   interface Footer {
-    /** 是否固定底部 */
-    fixed: boolean;
-    /** 底部高度 */
-    height: number;
     /* 底部是否可见 */
     visible: boolean;
+    /** 是否固定底部 */
+    fixed: boolean;
+    /** 底部是否居右(顶部混合菜单模式有效) */
+    right: boolean;
+    /** 底部高度 */
+    height: number;
+    /** 底部反转色 */
+    inverted: boolean;
   }
 
   /** 页面样式 */
@@ -238,16 +242,19 @@ declare namespace App {
     routePath: string;
     icon?: () => import('vue').VNodeChild;
     children?: GlobalMenuOption[];
+    i18nTitle?: string;
   };
 
   /** 面包屑 */
-  type GlobalBreadcrumb = import('naive-ui').DropdownOption & {
+  type GlobalBreadcrumb = Omit<import('naive-ui').DropdownOption, 'icon'> & {
     key: string;
     label: string;
     disabled: boolean;
     routeName: string;
     hasChildren: boolean;
-    children?: GlobalBreadcrumb[];
+    icon?: import('vue').Component;
+    i18nTitle?: string;
+    options?: import('naive-ui/es/dropdown/src/interface').DropdownMixedOption[];
   };
 
   /** 多页签Tab的路由 */
@@ -295,6 +302,8 @@ declare namespace App {
 }
 
 declare namespace I18nType {
+  type langType = 'en' | 'zh-CN';
+
   interface Schema {
     system: {
       title: string;
@@ -305,9 +314,73 @@ declare namespace I18nType {
         analysis: string;
         workbench: string;
       };
-      about: {
+      document: {
-        about: string;
+        _value: string;
+        vue: string;
+        vite: string;
+        naive: string;
+        project: string;
+        'project-link': string;
       };
+      component: {
+        _value: string;
+        button: string;
+        card: string;
+        table: string;
+      };
+      plugin: {
+        _value: string;
+        charts: {
+          _value: string;
+          antv: string;
+          echarts: string;
+        };
+        copy: string;
+        editor: {
+          _value: string;
+          markdown: string;
+          quill: string;
+        };
+        icon: string;
+        map: string;
+        print: string;
+        swiper: string;
+        video: string;
+      };
+      'auth-demo': {
+        _value: string;
+        permission: string;
+        super: string;
+      };
+      function: {
+        _value: string;
+        tab: string;
+      };
+      exception: {
+        _value: string;
+        403: string;
+        404: string;
+        500: string;
+      };
+      'multi-menu': {
+        _value: string;
+        first: {
+          _value: string;
+          second: string;
+          'second-new': {
+            _value: string;
+            third: string;
+          };
+        };
+      };
+      management: {
+        _value: string;
+        auth: string;
+        role: string;
+        route: string;
+        user: string;
+      };
+      about: string;
     };
   }
 }

src/utils/router/breadcrumb.ts

@@ -59,15 +59,16 @@ function transformBreadcrumbMenuToBreadcrumb(menu: App.GlobalMenuOption, rootPat
     label: menu.label as string,
     routeName: menu.routeName,
     disabled: menu.routePath === rootPath,
-    hasChildren
+    hasChildren,
+    i18nTitle: menu.i18nTitle
   };
   if (menu.icon) {
     breadcrumb.icon = menu.icon;
   }
   if (hasChildren) {
-    breadcrumb.children = menu.children?.map(item =>
+    breadcrumb.options = menu.children?.map(item =>
       transformBreadcrumbMenuToBreadcrumb(item as App.GlobalMenuOption, rootPath)
-    );
+    ) as NonNullable<App.GlobalBreadcrumb['options']>;
   }
   return breadcrumb;
 }

src/utils/router/menu.ts

@@ -1,4 +1,5 @@
 import { useIconRender } from '@/composables';
+import { t } from '@/locales';
 
 /**
  * 将权限路由转换成菜单
@@ -18,7 +19,8 @@ export function transformAuthRouteToMenu(routes: AuthRoute.Route[]): App.GlobalM
         key: routeName,
         label: meta.title,
         routeName,
-        routePath: path
+        routePath: path,
+        i18nTitle: meta.i18nTitle
       },
       icon: meta.icon,
       localIcon: meta.localIcon,
@@ -33,6 +35,28 @@ export function transformAuthRouteToMenu(routes: AuthRoute.Route[]): App.GlobalM
   return globalMenu;
 }
 
+/**
+ * 翻译菜单
+ * @param menus
+ * @returns
+ */
+export function translateMenuLabel(menus: App.GlobalMenuOption[]): App.GlobalMenuOption[] {
+  const globalMenu: App.GlobalMenuOption[] = [];
+  menus.forEach(menu => {
+    let menuChildren: App.GlobalMenuOption[] | undefined;
+    if (menu.children && menu.children.length > 0) {
+      menuChildren = translateMenuLabel(menu.children);
+    }
+    const menuItem: App.GlobalMenuOption = {
+      ...menu,
+      children: menuChildren,
+      label: menu.i18nTitle ? t(menu.i18nTitle) : menu.label
+    };
+    globalMenu.push(menuItem);
+  });
+  return globalMenu;
+}
+
 /**
  * 获取当前路由所在菜单数据的paths
  * @param activeKey - 当前路由的key

src/views/_builtin/login/components/pwd-login/components/other-account.vue

@@ -1,6 +1,6 @@
 <template>
   <n-space :vertical="true">
-    <n-divider class="!mb-0 text-14px text-[#666]">其他账户登录</n-divider>
+    <n-divider class="!mb-0 text-14px text-#666">其他账户登录</n-divider>
     <n-space justify="center">
       <n-button
         v-for="item in accounts"

src/views/_builtin/login/components/pwd-login/components/other-login.vue

@@ -1,9 +1,9 @@
 <template>
   <n-space :vertical="true">
-    <n-divider class="!mb-0 text-14px text-[#666]">其他登录方式</n-divider>
+    <n-divider class="!mb-0 text-14px text-#666">其他登录方式</n-divider>
     <div class="flex-center">
       <n-button :text="true">
-        <icon-mdi-wechat class="text-22px text-[#888] hover:text-[#52BF5E]" />
+        <icon-mdi-wechat class="text-22px text-#888 hover:text-#52BF5E" />
       </n-button>
     </div>
   </n-space>

src/views/component/table/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="h-full overflow-hidden">
     <n-card title="表格" class="h-full shadow-sm rounded-16px">
       <n-space :vertical="true">
         <n-space>

src/views/crud/demo/api.ts

@@ -0,0 +1,43 @@
+import type { UserPageQuery } from '@fast-crud/fast-crud';
+import { mockRequest } from '@/service/request';
+
+const request = mockRequest;
+const apiPrefix = '/crud/demo';
+
+export type DemoRecord = {
+  id: number;
+  [key: string]: any;
+};
+
+function resHandle(res: any) {
+  return res.data;
+}
+export async function GetList(query: UserPageQuery) {
+  const res = await request.post(`${apiPrefix}/page`, query);
+  return resHandle(res);
+}
+
+export async function AddObj(obj: DemoRecord) {
+  const res = await request.post(`${apiPrefix}/add`, obj);
+  return resHandle(res);
+}
+
+export async function UpdateObj(obj: DemoRecord) {
+  const res = await request.post(`${apiPrefix}/update`, obj);
+  return resHandle(res);
+}
+
+export async function DelObj(id: number) {
+  const res = await request.post(`${apiPrefix}/delete`, { id });
+  return resHandle(res);
+}
+
+export async function GetObj(id: number) {
+  const res = await request.get(`${apiPrefix}/info`, { params: { id } });
+  return resHandle(res);
+}
+
+export async function BatchDelete(ids: number[]) {
+  const res = await request.post(`${apiPrefix}/batchDelete`, { ids });
+  return resHandle(res);
+}

src/views/crud/demo/crud.tsx

@@ -0,0 +1,114 @@
+import type { AddReq, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from '@fast-crud/fast-crud';
+import { dict } from '@fast-crud/fast-crud';
+import dayjs from 'dayjs';
+import * as api from './api';
+
+export default function createCrudOptions(): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return api.GetList(query);
+  };
+  const editRequest = async (ctx: EditReq) => {
+    const { form, row } = ctx;
+    form.id = row.id;
+    return api.UpdateObj(form);
+  };
+  const delRequest = async (ctx: DelReq) => {
+    const { row } = ctx;
+    return api.DelObj(row.id);
+  };
+
+  const addRequest = async (req: AddReq) => {
+    const { form } = req;
+    return api.AddObj(form);
+  };
+  return {
+    crudOptions: {
+      container: {
+        is: 'fs-layout-card'
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      columns: {
+        id: {
+          title: 'ID',
+          key: 'id',
+          type: 'number',
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        datetime: {
+          title: '时间',
+          type: 'datetime',
+          // naive 默认仅支持数字类型时间戳作为日期输入与输出
+          // 字符串类型的时间需要转换格式
+          valueBuilder(context) {
+            const { value, row, key } = context;
+            if (value) {
+              // naive 默认仅支持时间戳作为日期输入与输出
+              row[key] = dayjs(value).valueOf();
+            }
+          },
+          valueResolve(context) {
+            const { value, form, key } = context;
+            if (value) {
+              form[key] = dayjs(value).format('YYYY-MM-DD HH:mm:ss');
+            }
+          }
+        },
+        select: {
+          title: '状态',
+          search: { show: true },
+          type: 'dict-select',
+          dict: dict({
+            url: '/mock/crud/demo/dict'
+          })
+        },
+        text: {
+          title: '文本',
+          type: 'text',
+          search: { show: true }
+        },
+        copyable: {
+          title: '可复制',
+          type: ['text', 'copyable'],
+          search: { show: true }
+        },
+        avatar: {
+          title: '头像裁剪',
+          type: 'cropper-uploader'
+        },
+        upload: {
+          title: '文件上传',
+          type: 'file-uploader'
+        },
+        richtext: {
+          title: '富文本',
+          type: 'editor-wang5',
+          column: {
+            // cell中不显示
+            show: false
+          },
+          form: {
+            col: {
+              // 横跨两列
+              span: 24
+            },
+            component: {
+              style: {
+                height: '300px'
+              }
+            }
+          }
+        }
+      }
+    }
+  };
+}

src/views/crud/demo/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="h-full">
+    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
+import createCrudOptions from './crud';
+
+export default defineComponent({
+  name: 'ComponentCrud',
+  setup() {
+    const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions });
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>

src/views/crud/doc/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="h-full">
+    <iframe class="wh-full" :src="src"></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const src = ref('http://fast-crud.docmirror.cn/');
+</script>
+
+<style scoped></style>

src/views/crud/header_group/api.ts

@@ -0,0 +1,43 @@
+import type { UserPageQuery } from '@fast-crud/fast-crud';
+import { mockRequest } from '@/service/request';
+
+const request = mockRequest;
+const apiPrefix = '/crud/header-group';
+
+export type HeaderGroupRecord = {
+  id: number;
+  [key: string]: any;
+};
+
+function resHandle(res: any) {
+  return res.data;
+}
+export async function GetList(query: UserPageQuery) {
+  const res = await request.post(`${apiPrefix}/page`, query);
+  return resHandle(res);
+}
+
+export async function AddObj(obj: HeaderGroupRecord) {
+  const res = await request.post(`${apiPrefix}/add`, obj);
+  return resHandle(res);
+}
+
+export async function UpdateObj(obj: HeaderGroupRecord) {
+  const res = await request.post(`${apiPrefix}/update`, obj);
+  return resHandle(res);
+}
+
+export async function DelObj(id: number) {
+  const res = await request.post(`${apiPrefix}/delete`, { id });
+  return resHandle(res);
+}
+
+export async function GetObj(id: number) {
+  const res = await request.get(`${apiPrefix}/info`, { params: { id } });
+  return resHandle(res);
+}
+
+export async function BatchDelete(ids: number[]) {
+  const res = await request.post(`${apiPrefix}/batchDelete`, { ids });
+  return resHandle(res);
+}

src/views/crud/header_group/crud.tsx

@@ -0,0 +1,96 @@
+import type { CreateCrudOptionsRet, UserPageQuery, UserPageRes } from '@fast-crud/fast-crud';
+import type { HeaderGroupRecord } from './api';
+import * as api from './api';
+
+export default function createCrudOptions(): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return api.GetList(query);
+  };
+  const editRequest = async (ctx: { form: HeaderGroupRecord; row: HeaderGroupRecord }) => {
+    const { form, row } = ctx;
+    form.id = row.id;
+    return api.UpdateObj(form);
+  };
+  const delRequest = async (ctx: { row: HeaderGroupRecord }) => {
+    const { row } = ctx;
+    return api.DelObj(row.id);
+  };
+
+  const addRequest = async (ctx: { form: HeaderGroupRecord }) => {
+    const { form } = ctx;
+    return api.AddObj(form);
+  };
+  return {
+    crudOptions: {
+      container: {
+        // is: 'fs-layout-card'
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      form: {
+        layout: 'flex',
+        labelWidth: '100px' // 表单label宽度
+      },
+      table: { size: 'small' },
+      columns: {
+        id: {
+          title: 'ID',
+          key: 'id',
+          type: 'number',
+          column: {
+            width: 50
+          },
+          form: {
+            show: false
+          }
+        },
+        user: {
+          title: '用户信息',
+          children: {
+            name: {
+              title: '姓名',
+              type: 'text'
+            },
+            age: {
+              title: '年龄',
+              type: 'number'
+            }
+          }
+        },
+        address: {
+          title: '地址',
+          children: {
+            area: {
+              title: '地区',
+              children: {
+                province: {
+                  title: '省',
+                  type: 'text',
+                  search: { show: true }
+                },
+                city: {
+                  title: '市',
+                  search: { show: true },
+                  type: 'text'
+                },
+                county: {
+                  title: '区',
+                  search: { show: true },
+                  type: 'text'
+                }
+              }
+            },
+            street: {
+              title: '街道',
+              type: 'text'
+            }
+          }
+        }
+      }
+    }
+  };
+}

src/views/crud/header_group/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="h-full fs-page-header-group">
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
+import createCrudOptions from './crud';
+
+export default defineComponent({
+  name: 'CrudHeaderGroup',
+  setup() {
+    const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions });
+
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
+<style lang="scss">
+.fs-page-header-group {
+}
+</style>

src/views/crud/source/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="h-full">
+    <iframe class="wh-full" :src="src"></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const src = ref('https://github.com/fast-crud/fast-crud');
+</script>
+
+<style scoped></style>

src/views/dashboard/analysis/components/bottom-part/index.vue

@@ -1,14 +1,14 @@
 <template>
   <n-grid :x-gap="16" :y-gap="16" :item-responsive="true">
     <n-grid-item span="0:24 640:24 1024:8">
-      <n-card title="时间线" :bordered="false" class="rounded-16px shadow-sm">
+      <n-card title="时间线" :bordered="false" class="h-full rounded-16px shadow-sm">
         <n-timeline>
           <n-timeline-item v-for="item in timelines" :key="item.type" v-bind="item" />
         </n-timeline>
       </n-card>
     </n-grid-item>
     <n-grid-item span="0:24 640:24 1024:16">
-      <n-card title="表格" :bordered="false" class="rounded-16px shadow-sm">
+      <n-card title="表格" :bordered="false" class="h-full rounded-16px shadow-sm">
         <n-data-table size="small" :columns="columns" :data="tableData" />
       </n-card>
     </n-grid-item>

src/views/dashboard/analysis/components/top-chart/index.vue

@@ -4,15 +4,15 @@
       <n-card :bordered="false" class="rounded-16px shadow-sm">
         <div class="w-full h-360px py-12px">
           <h3 class="text-16px font-bold">Dashboard</h3>
-          <p class="text-[#aaa]">Overview Of Lasted Month</p>
+          <p class="text-#aaa">Overview Of Lasted Month</p>
           <h3 class="pt-32px text-24px font-bold">
             <count-to prefix="$" :start-value="0" :end-value="7754" />
           </h3>
-          <p class="text-[#aaa]">Current Month Earnings</p>
+          <p class="text-#aaa">Current Month Earnings</p>
           <h3 class="pt-32px text-24px font-bold">
             <count-to :start-value="0" :end-value="1234" />
           </h3>
-          <p class="text-[#aaa]">Current Month Sales</p>
+          <p class="text-#aaa">Current Month Sales</p>
           <n-button class="mt-24px whitespace-pre-wrap" type="primary">Last Month Summary</n-button>
         </div>
       </n-card>

src/views/dashboard/workbench/components/workbench-header/index.vue

@@ -5,7 +5,7 @@
         <icon-local-avatar class="text-70px" />
         <div class="pl-12px">
           <h3 class="text-18px font-semibold">早安，{{ auth.userInfo.userName }}, 今天又是充满活力的一天！</h3>
-          <p class="leading-30px text-[#999]">今日多云转晴，20℃ - 25℃！</p>
+          <p class="leading-30px text-#999">今日多云转晴，20℃ - 25℃！</p>
         </div>
       </div>
       <n-space :size="24" :wrap="false">

src/views/dashboard/workbench/components/workbench-main/components/shortcuts-card.vue

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

src/views/dashboard/workbench/components/workbench-main/components/technology-card.vue

@@ -1,13 +1,13 @@
 <template>
   <div
-    class="h-120px p-4px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-sm cursor-pointer"
+    class="h-120px p-4px border-1px border-#efeff5 dark:border-#ffffff17 rounded-4px hover:shadow-sm cursor-pointer"
     @click="handleOpenSite"
   >
     <header class="flex-y-center">
       <svg-icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
       <h3 class="pl-12px text-18px font-semibold">{{ name }}</h3>
     </header>
-    <p class="py-8px h-56px text-[#999]">{{ description }}</p>
+    <p class="py-8px h-56px text-#999">{{ description }}</p>
     <div class="flex justify-end">
       <span>{{ author }}</span>
     </div>

src/views/index.ts

@@ -16,6 +16,10 @@ export const views: Record<
   component_button: () => import('./component/button/index.vue'),
   component_card: () => import('./component/card/index.vue'),
   component_table: () => import('./component/table/index.vue'),
+  crud_demo: () => import('./crud/demo/index.vue'),
+  crud_doc: () => import('./crud/doc/index.vue'),
+  crud_header_group: () => import('./crud/header_group/index.vue'),
+  crud_source: () => import('./crud/source/index.vue'),
   dashboard_analysis: () => import('./dashboard/analysis/index.vue'),
   dashboard_workbench: () => import('./dashboard/workbench/index.vue'),
   document_naive: () => import('./document/naive/index.vue'),

src/views/management/user/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="h-full overflow-hidden">
     <n-card title="用户管理" :bordered="false" class="rounded-16px shadow-sm">
       <n-space class="pb-12px" justify="space-between">
         <n-space>
@@ -26,6 +27,7 @@
       <n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" />
       <table-action-modal v-model:visible="visible" :type="modalType" :edit-data="editData" />
     </n-card>
+  </div>
 </template>
 
 <script setup lang="tsx">