chore(web): 清理 mock 与旧品牌资源

.env.base

@@ -17,4 +17,4 @@ VITE_USE_ALL_ELEMENT_PLUS_STYLE=true
 VITE_USE_MOCK=false
 
 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=false

.env.dev

@@ -29,10 +29,10 @@ VITE_USE_BUNDLE_ANALYZER=false
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 
 # 是否开启mock
-VITE_USE_MOCK=true
+VITE_USE_MOCK=false
 
 # 是否切割css
 VITE_USE_CSS_SPLIT=true
 
 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=false

.env.pro

@@ -29,10 +29,10 @@ VITE_USE_BUNDLE_ANALYZER=true
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 
 # 是否开启mock
-VITE_USE_MOCK=true
+VITE_USE_MOCK=false
 
 # 是否切割css
 VITE_USE_CSS_SPLIT=true
 
 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=false

.env.test

@@ -29,10 +29,10 @@ VITE_USE_BUNDLE_ANALYZER=false
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 
 # 是否开启mock
-VITE_USE_MOCK=true
+VITE_USE_MOCK=false
 
 # 是否切割css
 VITE_USE_CSS_SPLIT=false
 
 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=false

index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" href="/brand-mark.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= title %></title>
   </head>
@@ -16,7 +16,8 @@
           justify-content: center;
           align-items: center;
           flex-direction: column;
-          background: #f0f2f5;
+          color: #f5eee9;
+          background: #100c0a;
         }
 
         .app-loading .app-loading-wrap {
@@ -38,8 +39,9 @@
         }
 
         .app-loading .app-loading-logo {
-          width: 100px;
+          width: 72px;
           margin: 0 auto 15px;
+          border-radius: 12px;
         }
 
         .app-loading .app-loading-item {
@@ -55,7 +57,7 @@
           position: absolute;
           width: 100%;
           height: 100%;
-          border: 4px solid #2d8cf0;
+          border: 4px solid #c4322a;
           border-bottom: 0;
           border-left-color: transparent;
           border-radius: 50%;
@@ -68,7 +70,7 @@
           left: calc(50% - 20px);
           width: 40px;
           height: 40px;
-          border: 4px solid #87bdff;
+          border: 4px solid #ff8a72;
           border-right: 0;
           border-top-color: transparent;
           border-radius: 50%;
@@ -85,16 +87,6 @@
           }
         }
 
-        @keyframes loader-outter {
-          0% {
-            transform: rotate(0deg);
-          }
-
-          100% {
-            transform: rotate(360deg);
-          }
-        }
-
         @keyframes loader-inner {
           0% {
             transform: rotate(0deg);
@@ -105,20 +97,11 @@
           }
         }
 
-        @keyframes loader-inner {
-          0% {
-            transform: rotate(0deg);
-          }
-
-          100% {
-            transform: rotate(-360deg);
-          }
-        }
       </style>
       <div class="app-loading">
         <div class="app-loading-wrap">
           <div class="app-loading-title">
-            <img src="/logo.png" class="app-loading-logo" alt="Logo" />
+            <img src="/brand-mark.png" class="app-loading-logo" alt="Logo" />
             <div class="app-loading-title"><%= title %></div>
           </div>
           <div class="app-loading-item">

mock/_createProductionServer.ts

@@ -1,20 +0,0 @@
-// Author: fruit.com.cn
-
-import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
-
-const modules = import.meta.glob('./**/*.mock.ts', {
-  import: 'default',
-  eager: true
-})
-
-const mockModules: any[] = []
-Object.keys(modules).forEach(async (key) => {
-  if (key.includes('_')) {
-    return
-  }
-  mockModules.push(...(modules[key] as any))
-})
-
-export function setupProdMockServer() {
-  createProdMockServer(mockModules)
-}

mock/role/index.mock.ts

@@ -1,131 +0,0 @@
-// Author: fruit.com.cn
-
-import { MockMethod } from 'vite-plugin-mock'
-import { SUCCESS_CODE } from '@/constants'
-
-const timeout = 1000
-
-const adminList = [
-  {
-    path: '/dashboard',
-    component: '#',
-    redirect: '/dashboard/index',
-    name: 'Dashboard',
-    meta: {
-      title: '工作台',
-      icon: 'ant-design:dashboard-filled'
-    },
-    children: [
-      {
-        path: 'index',
-        name: 'dashboard',
-        component: 'views/common/DashboardView',
-        meta: {
-          title: '工作台',
-          icon: 'ant-design:dashboard-filled',
-          affix: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/content',
-    component: '#',
-    redirect: '/content/dramas',
-    name: 'Content',
-    meta: {
-      title: '内容管理',
-      icon: 'ep:video-camera',
-      alwaysShow: true
-    },
-    children: [
-      {
-        path: 'dramas',
-        name: 'dramas',
-        component: 'views/contentManagement/DramaManagementView',
-        meta: {
-          title: '短剧管理'
-        }
-      },
-      {
-        path: 'episodes',
-        name: 'episodes',
-        component: 'views/contentManagement/EpisodeManagementView',
-        meta: {
-          title: '剧集管理'
-        }
-      }
-    ]
-  },
-  {
-    path: '/system',
-    component: '#',
-    redirect: '/system/access',
-    name: 'System',
-    meta: {
-      title: '后台管理',
-      icon: 'ep:setting',
-      alwaysShow: true
-    },
-    children: [
-      {
-        path: 'access',
-        name: 'access',
-        component: 'views/permission/RoleManagementView',
-        meta: {
-          title: '角色权限配置'
-        }
-      },
-      {
-        path: 'admin-users',
-        name: 'admin-users',
-        component: 'views/userManagement/AdminUsersView',
-        meta: {
-          title: '管理员用户列表'
-        }
-      },
-      {
-        path: 'menus',
-        name: 'menus',
-        component: 'views/permission/MenuManagementView',
-        meta: {
-          title: '菜单管理'
-        }
-      },
-      {
-        path: 'role-categories',
-        name: 'role-categories',
-        component: 'views/permission/RoleCategoriesView',
-        meta: {
-          title: '角色分类'
-        }
-      },
-      {
-        path: 'settings',
-        name: 'settings',
-        component: 'views/systemManagement/SettingsView',
-        meta: {
-          title: '系统设置'
-        }
-      }
-    ]
-  }
-]
-
-const testList = adminList.filter((route) => route.path !== '/system')
-
-export default [
-  // 列表接口
-  {
-    url: '/mock/role/list',
-    method: 'get',
-    timeout,
-    response: ({ query }) => {
-      const { roleName } = query
-      return {
-        code: SUCCESS_CODE,
-        data: roleName === 'admin' ? adminList : testList
-      }
-    }
-  }
-] as MockMethod[]

mock/user/index.mock.ts

@@ -1,92 +0,0 @@
-// Author: fruit.com.cn
-
-import { SUCCESS_CODE } from '@/constants'
-
-const timeout = 1000
-
-const List: {
-  username: string
-  password: string
-  role: string
-  roleId: string
-  permissions: string | string[]
-}[] = [
-  {
-    username: 'admin',
-    password: 'admin123',
-    role: 'admin',
-    roleId: '1',
-    permissions: ['*.*.*']
-  },
-  {
-    username: 'test',
-    password: 'test',
-    role: 'test',
-    roleId: '2',
-    permissions: ['example:dialog:create', 'example:dialog:delete']
-  }
-]
-
-export default [
-  // 列表接口
-  {
-    url: '/mock/user/list',
-    method: 'get',
-    response: ({ query }) => {
-      const { username, pageIndex, pageSize } = query
-
-      const mockList = List.filter((item) => {
-        if (username && item.username.indexOf(username) < 0) return false
-        return true
-      })
-      const pageList = mockList.filter(
-        (_, index) => index < pageSize * pageIndex && index >= pageSize * (pageIndex - 1)
-      )
-
-      return {
-        code: SUCCESS_CODE,
-        data: {
-          total: mockList.length,
-          list: pageList
-        }
-      }
-    }
-  },
-  // 登录接口
-  {
-    url: '/mock/user/login',
-    method: 'post',
-    timeout,
-    response: ({ body }) => {
-      const data = body
-      let hasUser = false
-      for (const user of List) {
-        if (user.username === data.username && user.password === data.password) {
-          hasUser = true
-          return {
-            code: SUCCESS_CODE,
-            data: user
-          }
-        }
-      }
-      if (!hasUser) {
-        return {
-          code: 500,
-          message: '账号或密码错误'
-        }
-      }
-    }
-  },
-  // 退出接口
-  {
-    url: '/mock/user/loginOut',
-    method: 'get',
-    timeout,
-    response: () => {
-      return {
-        code: SUCCESS_CODE,
-        data: null
-      }
-    }
-  }
-]

package.json

@@ -24,8 +24,6 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.3.2",
-    "@faker-js/faker": "^8.4.0",
     "@iconify/iconify": "^3.1.1",
     "@iconify/vue": "^4.1.1",
     "@vueuse/core": "^10.7.2",
@@ -103,7 +101,6 @@
     "vite": "5.0.12",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-mock": "2.9.6",
     "vite-plugin-progress": "^0.0.7",
     "vite-plugin-purge-icons": "^0.10.0",
     "vite-plugin-style-import": "2.0.0",

src/api/login/index.ts

@@ -26,10 +26,6 @@ export const getAdminRoleApi = (
   return request.get({ url: '/admin/auth/menus', params })
 }
 
-export const getTestRoleApi = (params: RoleParams): Promise<IResponse<string[]>> => {
-  return request.get({ url: '/mock/role/list2', params })
-}
-
 /** 自助改密（首登强制改密也走这个接口） */
 export const changePasswordApi = (data: { oldPassword: string; newPassword: string }) => {
   return request.post<void>({ url: '/admin/auth/password', data })

src/components/Logo/src/Logo.vue

@@ -68,7 +68,12 @@ watch(
     >
       <img
         src="@/assets/imgs/brand-mark.png"
-        class="w-[var(--brand-mark-size)] h-[var(--brand-mark-size)] rounded-[var(--brand-mark-radius)] object-cover"
+        class="object-cover"
+        style="
+          width: var(--brand-mark-size);
+          height: var(--brand-mark-size);
+          border-radius: var(--brand-mark-radius);
+        "
       />
       <div
         v-if="show"

src/views/permission/CustomMenuView.vue

@@ -1,19 +0,0 @@
-<!-- Author: fruit.com.cn -->
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
-
-const route = useRoute()
-const title = computed(() => (route.meta?.title as string) || '菜单页面')
-</script>
-
-<template>
-  <div class="page-heading"
-    ><div
-      ><div class="eyebrow">自定义菜单</div><h1>{{ title }}</h1
-      ><p>该菜单已注册，可在菜单管理中把组件路径指向已有页面。</p></div
-    ></div
-  >
-  <section class="panel"><el-empty description="菜单已创建，可以继续配置页面内容。" /></section>
-</template>

tsconfig.json

@@ -31,6 +31,6 @@
       "@types/qrcode"
     ]
   },
-  "include": ["src", "types/**/*.d.ts", "mock/**/*.ts"]
+  "include": ["src", "types/**/*.d.ts"]
   // "exclude": ["dist", "node_modules"]
 }

uno.config.ts

@@ -3,6 +3,7 @@
 import { defineConfig, toEscapedSelector as e, presetUno, presetIcons } from 'unocss'
 import transformerVariantGroup from '@unocss/transformer-variant-group'
 import { loadEnv } from 'vite'
+import { AppIcons } from './src/constants/icons'
 
 const root = process.cwd()
 
@@ -20,13 +21,11 @@ const createPresetIcons = () => {
   } else {
     return [
       presetIcons({
-        prefix: ''
+        prefix: '',
-        // 由于默认加载的是所有的图标，启动会非常慢，可以在这里去加载需要的图标，确保启动速度
+        collections: {
-        // collections: {
+          'material-symbols': () =>
-        //   carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
+            import('@iconify/json/json/material-symbols.json').then((i) => i.default)
-        //   mdi: () => import('@iconify-json/mdi/icons.json').then(i => i.default),
+        }
-        //   logos: () => import('@iconify-json/logos/icons.json').then(i => i.default),
-        // }
       })
     ]
   }
@@ -142,6 +141,7 @@ ${selector}:after {
       }
     ]
   ],
+  safelist: Object.values(AppIcons),
   presets: [presetUno({ dark: 'class', attributify: false }), ...createPresetIcons()],
   transformers: [transformerVariantGroup()],
   content: {

vite.config.mts

@@ -5,7 +5,6 @@ import Vue from '@vitejs/plugin-vue'
 import VueJsx from '@vitejs/plugin-vue-jsx'
 import progress from 'vite-plugin-progress'
 import { ViteEjsPlugin } from "vite-plugin-ejs"
-import { viteMockServe } from 'vite-plugin-mock'
 import PurgeIcons from 'vite-plugin-purge-icons'
 import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite"
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
@@ -67,19 +66,6 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         svgoOptions: true
       }),
       PurgeIcons(),
-      env.VITE_USE_MOCK === 'true'
-        ? viteMockServe({
-            ignore: /^\_/,
-            mockPath: 'mock',
-            localEnabled: !isBuild,
-            prodEnabled: isBuild,
-            injectCode: `
-          import { setupProdMockServer } from '../mock/_createProductionServer'
-
-          setupProdMockServer()
-          `
-          })
-        : undefined,
       ViteEjsPlugin({
         title: env.VITE_APP_TITLE
       }),