feat: 引入 iconfont

frontend/src/assets/iconfont/iconfont.css

@@ -0,0 +1,44 @@
+@font-face {
+  font-family: "panel"; /* Project id 3575356 */
+  src: url('iconfont.woff2?t=1660728283223') format('woff2'),
+       url('iconfont.woff?t=1660728283223') format('woff'),
+       url('iconfont.ttf?t=1660728283223') format('truetype'),
+       url('iconfont.svg?t=1660728283223#panel') format('svg');
+}
+
+.panel {
+  font-family: "panel" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.p-language:before {
+  content: "\e605";
+}
+
+.p-theme:before {
+  content: "\e638";
+}
+
+.p-file-folder:before {
+  content: "\66";
+}
+
+.p-file-unknown:before {
+  content: "\233";
+}
+
+.p-file-txt:before {
+  content: "\74";
+}
+
+.p-file-normal:before {
+  content: "\e7ac";
+}
+
+.p-file-zip:before {
+  content: "\e606";
+}
+

frontend/src/assets/iconfont/iconfont.scss

@@ -1,30 +0,0 @@
-@font-face {
-    font-family: iconfont; /* Project id  */
-    src: url('iconfont.ttf?t=1656986270860') format('truetype');
-}
-.iconfont {
-    font-family: iconfont !important;
-    font-size: 16px;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-.icon-zhongyingwen::before {
-    content: '\e605';
-}
-.icon-suoxiao::before {
-    content: '\e641';
-}
-.icon-fangda::before {
-    content: '\e826';
-}
-.icon-contentright::before {
-    content: '\e8c9';
-}
-.icon-sousuo::before {
-    content: '\e611';
-}
-.icon-zhuti::before {
-    font-size: 22.4px;
-    content: '\e638';
-}

frontend/src/components/app-layout/header/components/Avatar.vue

@@ -5,11 +5,13 @@
         </div>
         <template #dropdown>
             <el-dropdown-menu>
-                <el-dropdown-item @click="openDialog('infoRef')">{{ $t('header.personalData') }}</el-dropdown-item>
-                <el-dropdown-item @click="openDialog('passwordRef')">{{
-                    $t('header.changePassword')
+                <el-dropdown-item @click="openDialog('infoRef')">{{
+                    $t('commons.header.personalData')
                 }}</el-dropdown-item>
-                <el-dropdown-item @click="logout" divided>{{ $t('header.logout') }}</el-dropdown-item>
+                <el-dropdown-item @click="openDialog('passwordRef')">{{
+                    $t('commons.header.changePassword')
+                }}</el-dropdown-item>
+                <el-dropdown-item @click="logout" divided>{{ $t('commons.header.logout') }}</el-dropdown-item>
             </el-dropdown-menu>
         </template>
     </el-dropdown>

frontend/src/components/app-layout/header/components/Info-dialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog v-model="dialogVisible" title="个人资料" width="500px" draggable>
+    <el-dialog v-model="dialogVisible" :title="$t('commons.header.personalData')" width="500px" draggable>
         <span>This is userInfo</span>
     </el-dialog>
 </template>

frontend/src/components/app-layout/header/components/Language.vue

@@ -1,14 +1,18 @@
 <template>
     <el-dropdown trigger="click" @command="handleSetLanguage">
         <span>
-            <el-tooltip effect="dark" content="国际化" placement="bottom">
-                <i :class="'iconfont icon-zhongyingwen'" class="icon-style"></i>
+            <el-tooltip effect="dark" :content="$t('commons.header.language')" placement="bottom">
+                <i :class="'panel p-language'" class="icon-style"></i>
             </el-tooltip>
         </span>
         <template #dropdown>
             <el-dropdown-menu>
-                <el-dropdown-item :disabled="language && language === 'zh'" command="zh">简体中文</el-dropdown-item>
-                <el-dropdown-item :disabled="language === 'en'" command="en">English</el-dropdown-item>
+                <el-dropdown-item :disabled="language && language === 'zh'" command="zh">{{
+                    $t('commons.header.zh')
+                }}</el-dropdown-item>
+                <el-dropdown-item :disabled="language === 'en'" command="en">{{
+                    $t('commons.header.en')
+                }}</el-dropdown-item>
             </el-dropdown-menu>
         </template>
     </el-dropdown>

frontend/src/components/app-layout/header/components/Theme.vue

@@ -1,20 +1,20 @@
 <template>
     <div>
-        <el-tooltip effect="dark" content="布局设置" placement="bottom">
-            <i :class="'iconfont icon-zhuti'" class="icon-style" @click="openDrawer"></i>
+        <el-tooltip effect="dark" :content="$t('commons.header.theme')" placement="bottom">
+            <i :class="'panel p-theme'" class="icon-style" @click="openDrawer"></i>
         </el-tooltip>
-        <el-drawer v-model="drawerVisible" title="布局设置" size="300px">
+        <el-drawer v-model="drawerVisible" :title="$t('commons.header.theme')" size="300px">
             <el-divider class="divider" content-position="center">
                 <el-icon><ColdDrink /></el-icon>
-                全局主题
+                {{ $t('commons.header.globalTheme') }}
             </el-divider>
             <div class="theme-item">
-                <span>主题颜色</span>
+                <span>{{ $t('commons.header.themeColor') }}</span>
                 <el-color-picker v-model="themeConfig.primary" :predefine="colorList" @change="changePrimary">
                 </el-color-picker>
             </div>
             <div class="theme-item">
-                <span>暗黑模式</span>
+                <span>{{ $t('commons.header.darkTheme') }}</span>
                 <SwitchDark></SwitchDark>
             </div>
             <br />

frontend/src/components/app-layout/header/components/password-dialog.vue

@@ -1,10 +1,10 @@
 <template>
-    <el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
+    <el-dialog v-model="dialogVisible" :title="$t('commons.header.changePassword')" width="500px" draggable>
         <span>This is Password</span>
         <template #footer>
             <span class="dialog-footer">
-                <el-button @click="dialogVisible = false">取消</el-button>
-                <el-button type="primary" @click="dialogVisible = false">确认</el-button>
+                <el-button @click="dialogVisible = false">{{ $t('commons.button.cancel') }}</el-button>
+                <el-button type="primary" @click="dialogVisible = false">{{ $t('commons.button.confirm') }}</el-button>
             </span>
         </template>
     </el-dialog>

frontend/src/lang/modules/en.ts

@@ -53,6 +53,18 @@ export default {
             notFound: 'The resource does not exist',
             commonError: 'The request failed',
         },
+        header: {
+            language: 'Internationalization',
+            zh: '简体中文',
+            en: 'English',
+            theme: 'Layout Settings',
+            globalTheme: 'Global',
+            themeColor: 'Theme Color',
+            darkTheme: 'Dark Theme',
+            personalData: 'Personal Data',
+            changePassword: 'Change Password',
+            logout: 'Logout',
+        },
     },
     business: {
         user: {
@@ -66,6 +78,7 @@ export default {
         demo: 'Demo',
         terminal: 'Terminal',
         operations: 'Operation logs',
+        files: 'File Management',
     },
     home: {
         welcome: 'Welcome',

frontend/src/lang/modules/zh.ts

@@ -53,6 +53,18 @@ export default {
             notFound: '资源不存在',
             commonError: '请求失败',
         },
+        header: {
+            language: '国际化',
+            zh: '简体中文',
+            en: 'English',
+            theme: '布局设置',
+            globalTheme: '全局主题',
+            themeColor: '主题颜色',
+            darkTheme: '暗黑主题',
+            personalData: '个人资料',
+            changePassword: '修改密码',
+            logout: '退出登录',
+        },
     },
     business: {
         user: {
@@ -66,6 +78,7 @@ export default {
         demo: '样例',
         terminal: '终端管理',
         operations: '操作记录',
+        files: '文件管理',
     },
     home: {
         welcome: '欢迎使用',

frontend/src/main.ts

@@ -2,8 +2,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import '@/styles/reset.scss';
 import '@/styles/common.scss';
-import '@/assets/iconfont/iconfont.scss';
-import '@/assets/fonts/font.scss';
+import '@/assets/iconfont/iconfont.css';
 import ElementPlus from 'element-plus';
 import Fit2CloudPlus from 'fit2cloud-ui-plus';
 import * as Icons from '@element-plus/icons-vue';

frontend/src/routers/modules/ file-management.ts

@@ -0,0 +1,25 @@
+import { Layout } from '@/routers/constant';
+
+// demo
+const demoRouter = {
+    sort: 3,
+    path: '/files',
+    component: Layout,
+    redirect: '/files',
+    meta: {
+        icon: 'files',
+        title: 'menu.files',
+    },
+    children: [
+        {
+            path: '/files',
+            name: 'File',
+            component: () => import('@/views/file-management/index.vue'),
+            meta: {
+                keepAlive: true,
+            },
+        },
+    ],
+};
+
+export default demoRouter;

frontend/src/views/file-management/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <LayoutContent></LayoutContent>
+</template>
+
+<script setup lang="ts"></script>