refactor(projects): merge branch unocss to main

.env

@@ -9,4 +9,4 @@ VITE_APP_DESC=SoybeanAdmin是一个中后台管理系统模版
 # 权限路由模式: static ｜ dynamic
 VITE_AUTH_ROUTE_MODE=dynamic
 
-VITE_VISUALIZER=false
+VITE_ROUTE_HOME_PATH=/dashboard/analysis

.env-config.ts

@@ -1,13 +1,5 @@
 /** 请求环境配置 */
-type ServiceEnv = Record<
-  EnvType,
-  {
-    /** 请求地址 */
-    url: string;
-    /** 代理地址 */
-    proxy: string;
-  }
->;
+type ServiceEnv = Record<EnvType, EnvConfig>;
 
 /** 环境配置 */
 const serviceEnvConfig: ServiceEnv = {
@@ -31,8 +23,8 @@ const serviceEnvConfig: ServiceEnv = {
  */
 export function getEnvConfig(env: ImportMetaEnv) {
   const { VITE_ENV_TYPE = 'dev' } = env;
-  const envConfig = {
-    http: serviceEnvConfig[VITE_ENV_TYPE]
-  };
+
+  const envConfig = serviceEnvConfig[VITE_ENV_TYPE];
+
   return envConfig;
 }

.env.production

@@ -1 +1,6 @@
+VITE_VISUALIZER=true
 
+VITE_COMPRESS=true
+
+# gzip | brotliCompress | deflate | deflateRaw
+VITE_COMPRESS_TYPE=gzip

.eslintrc.js

@@ -197,7 +197,12 @@ module.exports = {
   overrides: [
     {
       files: ['*.vue'],
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      },
       rules: {
+        'no-unused-vars': 'off',
         'no-undef': 'off'
       }
     },

.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

.vscode/extensions.json

@@ -31,6 +31,6 @@
 		"johnsoncodehk.vscode-typescript-vue-plugin",
 		"dariofuzinato.vue-peek",
 		"wscats.vue",
-		"voorjaar.windicss-intellisense"
+		"antfu.unocss"
 	]
 }

README.md

@@ -13,10 +13,10 @@ Soybean Admin  是一个基于 Vue3、Vite、TypeScript、Naive UI 的免费中
 
 - **最新技术栈**：使用 Vue3/vite2 等前端前沿技术开发, 使用高效率的npm包管理器pnpm
 - **TypeScript**: 应用程序级 JavaScript 的语言
-- **主题**：丰富可配置的主题、暗黑模式，基于windicss的动态主题颜色
+- **主题**：丰富可配置的主题、暗黑模式，基于原子css - unocss的动态主题颜色
 - **代码规范**：丰富的规范插件及极高的代码规范
 - **权限路由**：简易的路由配置、基于mock的动态路由能快速实现后端动态路由
-- **请求函数**：基于axios的完善的请求函数封装，提供Promise和hooks两种请求函数
+- **请求函数**：基于axios的完善的请求函数封装，提供Promise和hooks两种请求函数，加入请求结果数据转换的适配器
 
 ## 预览
 
@@ -51,12 +51,12 @@ Soybean Admin  是一个基于 Vue3、Vite、TypeScript、Naive UI 的免费中
 ## 开发计划
 
 - [x] 添加前端静态路由
-- [ ] 集成unocss替换windicss(新分支unocss)
-- [ ] 用户角色切换示例、按钮级别权限指令
-- [ ] 最近功能的有关文档更新
+- [x] 集成unocss替换windicss(新分支unocss)
+- [x] 用户角色切换示例、按钮级别权限指令
+- [x] 最近功能的有关文档更新
 - [ ] 引入ECharts替换AntV G2Plot
-- [ ] 性能优化(优化递归函数)
 - [ ] 精简版(新分支thin)
+- [ ] 性能优化(优化递归函数)
 - [ ] 表单、表格示例
 - [ ] 添加锁屏组件、全局Iframe组件
 - [ ] 示例页面完善

build/config/index.ts

@@ -1,3 +1,2 @@
-export * from './path';
 export * from './define';
 export * from './proxy';

build/config/proxy.ts

@@ -1,21 +1,18 @@
 import type { ProxyOptions } from 'vite';
-import { getEnvConfig } from '../../.env-config';
 
 /**
  * 设置网络代理
- * @param viteEnv - vite环境描述
+ * @param isOpenProxy - 是否开启代理
+ * @param envConfig - env环境配置
  */
-export function createViteProxy(viteEnv: ImportMetaEnv) {
-  const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'true';
+export function createViteProxy(isOpenProxy: boolean, envConfig: EnvConfig) {
   if (!isOpenProxy) return undefined;
 
-  const { http } = getEnvConfig(viteEnv);
-
   const proxy: Record<string, string | ProxyOptions> = {
-    [http.proxy]: {
-      target: http.url,
+    [envConfig.proxy]: {
+      target: envConfig.url,
       changeOrigin: true,
-      rewrite: path => path.replace(new RegExp(`^${http.proxy}`), '')
+      rewrite: path => path.replace(new RegExp(`^${envConfig.proxy}`), '')
     }
   };
 

build/plugins/compress.ts

@@ -0,0 +1,6 @@
+import ViteCompression from 'vite-plugin-compression';
+
+export default (viteEnv: ImportMetaEnv) => {
+  const { VITE_COMPRESS_TYPE = 'gzip' } = viteEnv;
+  return ViteCompression({ algorithm: VITE_COMPRESS_TYPE });
+};

build/plugins/html.ts

@@ -1,10 +1,7 @@
-import { loadEnv } from 'vite';
-import type { ConfigEnv, PluginOption } from 'vite';
+import type { PluginOption } from 'vite';
 import { createHtmlPlugin } from 'vite-plugin-html';
 
-export default (config: ConfigEnv): PluginOption[] => {
-  const viteEnv = loadEnv(config.mode, process.cwd());
-
+export default (viteEnv: ImportMetaEnv): PluginOption[] => {
   return createHtmlPlugin({
     minify: true,
     inject: {

build/plugins/index.ts

@@ -1,27 +1,26 @@
-import type { ConfigEnv, PluginOption } from 'vite';
+import type { PluginOption } from 'vite';
 import vue from './vue';
 import html from './html';
-import autoImport from './auto-import';
-import windicss from './windicss';
+import unplugin from './unplugin';
+import unocss from './unocss';
 import mock from './mock';
 import visualizer from './visualizer';
+import compress from './compress';
 
 /**
- *	vite插件
- * @param configEnv - 环境
- * @param srcPath - src路径
+ * vite插件
  * @param viteEnv - 环境变量配置
+ * @param srcPath - src路径
  */
-export function setupVitePlugins(
-  configEnv: ConfigEnv,
-  srcPath: string,
-  viteEnv: ImportMetaEnv
-): (PluginOption | PluginOption[])[] {
-  const plugins = [vue, html(configEnv), ...autoImport(srcPath), windicss, mock];
+export function setupVitePlugins(viteEnv: ImportMetaEnv, srcPath: string): (PluginOption | PluginOption[])[] {
+  const plugins = [...vue, html(viteEnv), ...unplugin(srcPath), unocss, mock];
 
-  if (configEnv.command === 'build' && viteEnv.VITE_VISUALIZER === 'true') {
+  if (viteEnv.VITE_VISUALIZER === 'true') {
     plugins.push(visualizer);
   }
+  if (viteEnv.VITE_COMPRESS === 'true') {
+    plugins.push(compress(viteEnv));
+  }
 
   return plugins;
 }

build/plugins/unocss.ts

@@ -0,0 +1,3 @@
+import unocss from 'unocss/vite';
+
+export default unocss();

build/plugins/auto-import.ts → build/plugins/unplugin.ts

@@ -1,3 +1,4 @@
+import DefineOptions from 'unplugin-vue-define-options/vite';
 import Icons from 'unplugin-icons/vite';
 import IconsResolver from 'unplugin-icons/resolver';
 import Components from 'unplugin-vue-components/vite';
@@ -6,6 +7,7 @@ import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 
 export default (srcPath: string) => {
   return [
+    DefineOptions(),
     Icons({
       compiler: 'vue3',
       customCollections: {
@@ -15,7 +17,8 @@ export default (srcPath: string) => {
       defaultClass: 'inline-block'
     }),
     Components({
-      dts: true,
+      dts: 'src/typings/components.d.ts',
+      types: [{ from: 'vue-router', names: ['RouterLink', 'RouterView'] }],
       resolvers: [NaiveUiResolver(), IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' })]
     })
   ];

build/plugins/visualizer.ts

@@ -2,5 +2,6 @@ import { visualizer } from 'rollup-plugin-visualizer';
 
 export default visualizer({
   gzipSize: true,
-  brotliSize: true
+  brotliSize: true,
+  open: true
 });

build/plugins/vue.ts

@@ -1,3 +1,6 @@
 import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
 
-export default vue({});
+const plugins = [vue(), vueJsx()];
+
+export default plugins;

index.html

@@ -19,7 +19,7 @@
             <div class="right-0 bottom-0 loading-spin-item loading-delay-1500"></div>
           </div>
         </div>
-        <h2 class="loading-title"><%= appTitle %></h2>
+        <div class="loading-title"><%= appTitle %></div>
       </div>
       <script src="/resource/loading.js"></script>
     </div>

mock/api/auth.ts

@@ -62,7 +62,7 @@ const apis: MockMethod[] = [
   {
     url: '/mock/testToken',
     method: 'post',
-    response: (option: any): Service.MockServiceResult<true | null> => {
+    response: (option: Service.MockOption): Service.MockServiceResult<true | null> => {
       if (option.headers?.authorization !== token.token) {
         return {
           code: 66666,

mock/api/route.ts

@@ -1,4 +1,5 @@
 import type { MockMethod } from 'vite-plugin-mock';
+import { filterAuthRoutesByUserPermission } from '../utils';
 
 const routes: AuthRoute.Route[] = [
   {
@@ -231,6 +232,39 @@ const routes: AuthRoute.Route[] = [
       order: 4
     }
   },
+  {
+    name: 'auth-demo',
+    path: '/auth-demo',
+    component: 'basic',
+    children: [
+      {
+        name: 'auth-demo_permission',
+        path: '/auth-demo/permission',
+        component: 'self',
+        meta: {
+          title: '权限切换',
+          requiresAuth: true,
+          icon: 'ic:round-construction'
+        }
+      },
+      {
+        name: 'auth-demo_super',
+        path: '/auth-demo/super',
+        component: 'self',
+        meta: {
+          title: '超级管理员可见',
+          requiresAuth: true,
+          permissions: ['super'],
+          icon: 'ic:round-supervisor-account'
+        }
+      }
+    ],
+    meta: {
+      title: '权限示例',
+      icon: 'ic:baseline-security',
+      order: 5
+    }
+  },
   {
     name: 'exception',
     path: '/exception',
@@ -270,7 +304,7 @@ const routes: AuthRoute.Route[] = [
     meta: {
       title: '异常页',
       icon: 'ant-design:exception-outlined',
-      order: 5
+      order: 6
     }
   },
   {
@@ -324,7 +358,7 @@ const routes: AuthRoute.Route[] = [
     meta: {
       title: '多级菜单',
       icon: 'carbon:menu',
-      order: 6
+      order: 7
     }
   },
   {
@@ -335,22 +369,22 @@ const routes: AuthRoute.Route[] = [
       title: '关于',
       requiresAuth: true,
       singleLayout: 'basic',
-      permissions: ['super', 'admin', 'test'],
+      permissions: ['super', 'admin', 'user'],
       icon: 'fluent:book-information-24-regular',
-      order: 7
+      order: 8
     }
   }
 ];
 
 function dataMiddleware(data: AuthRoute.Route[]): ApiRoute.Route {
   const routeHomeName: AuthRoute.RouteKey = 'dashboard_analysis';
 
-  function sortRoutes(sorts: AuthRoute.Route[]) {
-    return sorts.sort((next, pre) => Number(next.meta?.order) - Number(pre.meta?.order));
-  }
+  data.sort((next, pre) => Number(next.meta?.order) - Number(pre.meta?.order));
+
+  const filters = filterAuthRoutesByUserPermission(data, 'admin');
 
   return {
-    routes: sortRoutes(data),
+    routes: filters,
     home: routeHomeName
   };
 }