项目微调

2024-10-11 08:49:31 +08:00
parent 507ea137e4
commit 0cb14955c5
9 changed files with 292 additions and 178 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,8 +15,6 @@
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "@vueuse/core": "^10.4.1",
-    "@wangeditor/editor": "^5.1.23",
-    "@wangeditor/editor-for-vue": "^5.1.12",
    "axios": "^1.7.3",
    "crypto-js": "^4.2.0",
    "dayjs": "^1.11.9",
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,54 +1,54 @@
 <template>
-    <!--element-plus语言国际化，全局修改为中文-->
-    <el-config-provider
-      :locale="locale"
-      :size="assemblySize"
-      :button="buttonConfig"
-    >
-      <router-view :key="$route.fullPath" />
-    </el-config-provider>
+  <!--element-plus语言国际化，全局修改为中文-->
+  <el-config-provider
+    :locale='locale'
+    :size='assemblySize'
+    :button='buttonConfig'
+  >
+    <router-view :key='$route.fullPath' />
+  </el-config-provider>
 </template>

-<script lang="ts" setup>
+<script lang='ts' setup>
 defineOptions({
-  name: "App",
-});
-import { useI18n } from "vue-i18n";
-import { getBrowserLang } from "@/utils";
-import { useTheme } from "@/hooks/useTheme";
-import { ElConfigProvider } from "element-plus";
-import { LanguageType } from "./stores/interface";
-import { useGlobalStore } from "@/stores/modules/global";
-import en from "element-plus/es/locale/lang/en";
-import zhCn from "element-plus/es/locale/lang/zh-cn";
+  name: 'App',
+})
+import { useI18n } from 'vue-i18n'
+import { getBrowserLang } from '@/utils'
+import { useTheme } from '@/hooks/useTheme'
+import { ElConfigProvider } from 'element-plus'
+import { LanguageType } from './stores/interface'
+import { useGlobalStore } from '@/stores/modules/global'
+import en from 'element-plus/es/locale/lang/en'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'

-const globalStore = useGlobalStore();
+const globalStore = useGlobalStore()

 // init theme
-const { initTheme } = useTheme();
-initTheme();
+const { initTheme } = useTheme()
+initTheme()

 // init language
-const i18n = useI18n();
+const i18n = useI18n()
 onMounted(() => {
-  const language = globalStore.language ?? getBrowserLang();
-  i18n.locale.value = language;
-  globalStore.setGlobalState("language", language as LanguageType);
-});
+  const language = globalStore.language ?? getBrowserLang()
+  i18n.locale.value = language
+  globalStore.setGlobalState('language', language as LanguageType)
+})

 // element language
 const locale = computed(() => {
-  if (globalStore.language == "zh") return zhCn;
-  if (globalStore.language == "en") return en;
-  return getBrowserLang() == "zh" ? zhCn : en;
-});
+  if (globalStore.language == 'zh') return zhCn
+  if (globalStore.language == 'en') return en
+  return getBrowserLang() == 'zh' ? zhCn : en
+})

 // element assemblySize
-const assemblySize = computed(() => globalStore.assemblySize);
+const assemblySize = computed(() => globalStore.assemblySize)

 // element button config
-const buttonConfig = reactive({ autoInsertSpace: false });
+const buttonConfig = reactive({ autoInsertSpace: false })

-document.getElementById("loadingPage")?.remove();
+document.getElementById('loadingPage')?.remove()
 </script>
 <style scoped></style>
--- a/frontend/src/components/SelectIcon/index.scss
+++ b/frontend/src/components/SelectIcon/index.scss
@@ -0,0 +1,39 @@
+.icon-box {
+  width: 100%;
+  .el-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    color: var(--el-text-color-regular);
+  }
+  :deep(.el-dialog__body) {
+    padding: 25px 20px 20px;
+    .el-input {
+      margin-bottom: 10px;
+    }
+    .icon-list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 115px);
+      justify-content: space-evenly;
+      max-height: 70vh;
+      .icon-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 42px;
+        padding: 20px 30px;
+        cursor: pointer;
+        transition: all 0.2s;
+        &:hover {
+          transform: scale(1.3);
+        }
+        span {
+          margin-top: 5px;
+          line-height: 20px;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
--- a/frontend/src/components/SelectIcon/index.vue
+++ b/frontend/src/components/SelectIcon/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class='icon-box'>
+    <el-input
+      ref='inputRef'
+      v-model='valueIcon'
+      v-bind='$attrs'
+      :placeholder='placeholder'
+      :clearable='clearable'
+      @clear='clearIcon'
+      @click='openDialog'
+    >
+      <template #append>
+        <el-button :icon='customIcons[iconValue]' />
+      </template>
+    </el-input>
+    <el-dialog v-model='dialogVisible' :title='placeholder' top='50px' width='66%'>
+      <el-input v-model='inputValue' placeholder='搜索图标' size='large' :prefix-icon='Icons.Search' />
+      <el-scrollbar v-if='Object.keys(iconsList).length'>
+        <div class='icon-list'>
+          <div v-for='item in iconsList' :key='item' class='icon-item' @click='selectIcon(item)'>
+            <component :is='item'></component>
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </el-scrollbar>
+      <el-empty v-else description='未搜索到您要找的图标~' />
+    </el-dialog>
+  </div>
+</template>
+
+<script  lang='ts' setup name='SelectIcon'>
+import * as Icons from '@element-plus/icons-vue'
+
+interface SelectIconProps {
+  iconValue: string;
+  title?: string;
+  clearable?: boolean;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<SelectIconProps>(), {
+  iconValue: '',
+  title: '请选择图标',
+  clearable: true,
+  placeholder: '请选择图标',
+})
+
+// 重新接收一下，防止打包后 clearable 报错
+const valueIcon = ref(props.iconValue)
+
+// open Dialog
+const dialogVisible = ref(false)
+const openDialog = () => (dialogVisible.value = true)
+
+// 选择图标(触发更新父组件数据)
+const emit = defineEmits<{
+  'update:iconValue': [value: string];
+}>()
+const selectIcon = (item: any) => {
+  dialogVisible.value = false
+  valueIcon.value = item.name
+  emit('update:iconValue', item.name)
+  setTimeout(() => inputRef.value.blur(), 0)
+}
+
+// 清空图标
+const inputRef = ref()
+const clearIcon = () => {
+  valueIcon.value = ''
+  emit('update:iconValue', '')
+  setTimeout(() => inputRef.value.blur(), 0)
+}
+
+// 监听搜索框值
+const inputValue = ref('')
+const customIcons: { [key: string]: any } = Icons
+const iconsList = computed((): { [key: string]: any } => {
+  if (!inputValue.value) return Icons
+  let result: { [key: string]: any } = {}
+  for (const key in customIcons) {
+    if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1) result[key] = customIcons[key]
+  }
+  return result
+})
+</script>
+
+<style scoped lang='scss'>
+@import "./index.scss";
+</style>
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -25,7 +25,7 @@ import * as Icons from "@element-plus/icons-vue";
 // custom directives
 import directives from "@/directives/index";
 // vue Router
-import Router from "@/routers";
+import router from "@/routers";
 // vue i18n
 import I18n from "@/languages/index";
 // pinia store
@@ -48,13 +48,13 @@ const setupAll = async () => {
  app
    .use(ElementPlus)
    .use(directives)
-    .use(Router) // 使用路由
+    .use(router) // 使用路由
    .use(I18n)
    .use(pinia)
    .use(registerGlobComp) // 使用全局自定义组件

  //待路由初始化完毕后，挂载app
-  await Router.isReady()
+  await router.isReady()
 }

 //挂载app
--- a/frontend/src/routers/index.ts
+++ b/frontend/src/routers/index.ts
@@ -1,17 +1,17 @@
-import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";
-import { useUserStore } from "@/stores/modules/user";
-import { useAuthStore } from "@/stores/modules/auth";
-import { LOGIN_URL, ROUTER_WHITE_LIST } from "@/config";
-import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
-import { staticRouter, errorRouter } from "@/routers/modules/staticRouter";
-import NProgress from "@/config/nprogress";
+import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
+import { useUserStore } from '@/stores/modules/user'
+import { useAuthStore } from '@/stores/modules/auth'
+import { LOGIN_URL, ROUTER_WHITE_LIST } from '@/config'
+import { initDynamicRouter } from '@/routers/modules/dynamicRouter'
+import { staticRouter, errorRouter } from '@/routers/modules/staticRouter'
+import NProgress from '@/config/nprogress'

-const mode = import.meta.env.VITE_ROUTER_MODE;
+const mode = import.meta.env.VITE_ROUTER_MODE

 const routerMode = {
  hash: () => createWebHashHistory(),
-  history: () => createWebHistory()
-};
+  history: () => createWebHistory(),
+}

 /**
 * @description 📚 路由参数配置简介
@@ -31,77 +31,76 @@ const routerMode = {
 * */
 const router = createRouter({
  history: routerMode[mode](),
-  routes: [...staticRouter, ...errorRouter],
+  routes: [...staticRouter],
  // 不区分路由大小写，非严格模式下提供了更宽松的路径匹配
  strict: false,
  // 页面刷新时，滚动条位置还原
-  scrollBehavior: () => ({ left: 0, top: 0 })
-});
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+})

 /**
 * @description 路由拦截 beforeEach
 * */
 router.beforeEach(async (to, from, next) => {
-  const userStore = useUserStore();
-  const authStore = useAuthStore();
-
+  const userStore = useUserStore()
+  const authStore = useAuthStore()
  // 1.NProgress 开始
-  NProgress.start();
+  NProgress.start()

  // 2.动态设置标题
-  const title = import.meta.env.VITE_GLOB_APP_TITLE;
-  document.title = to.meta.title ? `${to.meta.title} - ${title}` : title;
+  const title = import.meta.env.VITE_GLOB_APP_TITLE
+  document.title = to.meta.title ? `${to.meta.title} - ${title}` : title

  // 3.判断是访问登陆页，有 Token 就在当前页面，没有 Token 重置路由到登陆页
  if (to.path.toLocaleLowerCase() === LOGIN_URL) {
-    if (userStore.token) return next(from.fullPath);
-    resetRouter();
-    return next();
+    if (userStore.token) return next(from.fullPath)
+    resetRouter()
+    return next()
  }

  // 4.判断访问页面是否在路由白名单地址(静态路由)中，如果存在直接放行
-  if (ROUTER_WHITE_LIST.includes(to.path)) return next();
+  if (ROUTER_WHITE_LIST.includes(to.path)) return next()

  // 5.判断是否有 Token，没有重定向到 login 页面
-  if (!userStore.token) return next({ path: LOGIN_URL, replace: true });
+  if (!userStore.token) return next({ path: LOGIN_URL, replace: true })

  // 6.如果没有菜单列表，就重新请求菜单列表并添加动态路由
  if (!authStore.authMenuListGet.length) {
-    await initDynamicRouter();
-    return next({ ...to, replace: true });
+    await initDynamicRouter()
+    return next({ ...to, replace: true })
  }

  // 7.存储 routerName 做按钮权限筛选
-  authStore.setRouteName(to.name as string);
+  authStore.setRouteName(to.name as string)

  // 8.正常访问页面
-  next();
-});
+  next()
+})

 /**
 * @description 重置路由
 * */
 export const resetRouter = () => {
-  const authStore = useAuthStore();
+  const authStore = useAuthStore()
  authStore.flatMenuListGet.forEach(route => {
-    const { name } = route;
-    if (name && router.hasRoute(name)) router.removeRoute(name);
-  });
-};
+    const { name } = route
+    if (name && router.hasRoute(name)) router.removeRoute(name)
+  })
+}

 /**
 * @description 路由跳转错误
 * */
 router.onError(error => {
-  NProgress.done();
-  console.warn("路由错误", error.message);
-});
+  NProgress.done()
+  console.warn('路由错误', error.message)
+})

 /**
 * @description 路由跳转结束
 * */
 router.afterEach(() => {
-  NProgress.done();
-});
+  NProgress.done()
+})

-export default router;
+export default router
--- a/frontend/src/routers/modules/staticRouter.ts
+++ b/frontend/src/routers/modules/staticRouter.ts
@@ -41,50 +41,38 @@ export const staticRouter: RouteRecordRaw[] = [
              isKeepAlive: false,
            },
          },
+          // 错误页面路由
+          {
+            path: "/403",
+            name: "403",
+            component: () => import("@/components/ErrorMessage/403.vue"),
+            meta: {
+              title: "403页面",
+            },
+          },
+          {
+            path: "/404",
+            name: "404",
+            component: () => import("@/components/ErrorMessage/404.vue"),
+            meta: {
+              title: "404页面",
+            },
+          },
+          {
+            path: "/500",
+            name: "500",
+            component: () => import("@/components/ErrorMessage/500.vue"),
+            meta: {
+              title: "500页面",
+            },
+          },
+          // Resolve refresh page, route warnings
+          {
+            path: "/:pathMatch(.*)*",
+            component: () => import("@/components/ErrorMessage/404.vue"),
+          },
        ],
      },
    ],
  },
 ];
-
-/**
- * errorRouter (错误页面路由)
- */
-export const errorRouter = [
-  {
-    path: "/layout",
-    name: "layout",
-    component: Layout,
-    children: [
-      {
-        path: "/403",
-        name: "403",
-        component: () => import("@/components/ErrorMessage/403.vue"),
-        meta: {
-          title: "403页面",
-        },
-      },
-      {
-        path: "/404",
-        name: "404",
-        component: () => import("@/components/ErrorMessage/404.vue"),
-        meta: {
-          title: "404页面",
-        },
-      },
-      {
-        path: "/500",
-        name: "500",
-        component: () => import("@/components/ErrorMessage/500.vue"),
-        meta: {
-          title: "500页面",
-        },
-      },
-      // Resolve refresh page, route warnings
-      {
-        path: "/:pathMatch(.*)*",
-        component: () => import("@/components/ErrorMessage/404.vue"),
-      },
-    ],
-  },
-];
--- a/frontend/src/views/home/components/tree.vue
+++ b/frontend/src/views/home/components/tree.vue
@@ -1,26 +1,28 @@
 <template>
-  <div class="plan_tree">
-    <div class="search_view">
+  <div class='plan_tree'>
+    <div class='search_view'>
      <el-input
-        placeholder="请输入计划名称"
-        v-model="searchForm.planName"
+        placeholder='请输入计划名称'
+        v-model='searchForm.planName'
      ></el-input>
-      <Menu style="width: 26px;height: 26px; margin-left: 8px;cursor: pointer;color:var(--el-color-primary)" @click.stop="detail({})" />
+      <Menu style='width: 26px;height: 26px; margin-left: 8px;cursor: pointer;color:var(--el-color-primary)'
+            @click.stop='detail()' />
    </div>
-    <div class="tree_container">
+    <div class='tree_container'>
      <el-tree
-        :data="data"
-        ref="treeRef"
-        :filter-node-method="filterNode"
-        :props="defaultProps"
-        node-key="id"
+        :data='data'
+        ref='treeRef'
+        :filter-node-method='filterNode'
+        :props='defaultProps'
+        node-key='id'
        default-expand-all
-        :default-checked-keys="defaultChecked"
-        @node-click="handleNodeClick"
+        :default-checked-keys='defaultChecked'
+        @node-click='handleNodeClick'
      >
-        <template #default="{ node, data }">
-          <span class="custom-tree-node" style="display: flex;align-items: center;">
-            <Platform v-if="!data.pid" style="width:18px;height: 18px;margin-right:8px;" :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}"/>
+        <template #default='{ node, data }'>
+          <span class='custom-tree-node' style='display: flex;align-items: center;'>
+            <Platform v-if='!data.pid' style='width:18px;height: 18px;margin-right:8px;'
+                      :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}" />
            <span>{{ node.label }}</span>
            <!-- <Menu v-if="data.pid" @click.stop="detail(data)" style="width: 12px;margin-left: 8px;"/> -->
          </span>
@@ -29,52 +31,54 @@
    </div>
  </div>
 </template>
-<script lang="ts" setup>
-import { Menu,Platform} from "@element-plus/icons-vue";
-const emit = defineEmits(["jump"]);
-const data: any = ref([]);
+<script lang='ts' setup>
+import { Menu, Platform } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const data: any = ref([])
 const defaultProps = {
-  children: "children",
-  label: "name",
-  pid: "pid",
-};
+  children: 'children',
+  label: 'name',
+  pid: 'pid',
+}
 const searchForm = ref({
-  planName: "",
-});
-const defaultChecked = ref([]);
+  planName: '',
+})
+const defaultChecked = ref([])
 const getTreeData = (val: any) => {
-  defaultChecked.value = [];
-  data.value = val;
-  defaultChecked.value.push(data.value[0].children[0].id);
-};
-const filterText = ref("");
-const treeRef = ref();
+  defaultChecked.value = []
+  data.value = val
+  defaultChecked.value.push(data.value[0].children[0].id)
+}
+const filterText = ref('')
+const treeRef = ref()
 watch(
  () => searchForm.value.planName,
  (val) => {
-    treeRef.value!.filter(val);
+    treeRef.value!.filter(val)
  },
  {
    deep: true,
-  }
-);
+  },
+)
 const handleNodeClick = (data) => {
-  console.log(data);
-};
+  console.log(data)
+}
 const filterNode = (value: string, data) => {
-  if (!value) return true;
-  return data.name.includes(value);
-};
+  if (!value) return true
+  return data.name.includes(value)
+}
 // 点击详情
-const detail = (e: any) => {
-  emit("jump", e);
-};
+const detail = () => {
+  router.push('/plan')
+}
 onMounted(() => {
-  console.log();
-});
-defineExpose({ getTreeData });
+  console.log()
+})
+defineExpose({ getTreeData })
 </script>
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .plan_tree {
  // width: 200px;
  // height: 100%;
@@ -83,6 +87,7 @@ defineExpose({ getTreeData });
  padding: 5px;
  // height: calc(100% - 70px);
  background-color: #fff;
+
  .search_view {
    width: 100%;
    height: auto;
@@ -91,10 +96,12 @@ defineExpose({ getTreeData });
    padding: 0 5px;
    box-sizing: border-box;
    align-items: center;
-    .el-input{
+
+    .el-input {
      margin-top: 6px;
    }
  }
+
  .el-input {
    width: 100%;
    margin: 0 10px 10px 0;
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/frontend/src/views/home/tabs/dashboard.vue
@@ -2,7 +2,7 @@
 <template>
  <div class="static">
    <div class="left_tree">
-      <tree ref="treeRef" @jump="jump" />
+      <tree ref="treeRef" />
    </div>
    <!-- <span class="new_span">测试scss颜色</span> -->
    <div class="right_container">
@@ -216,13 +216,7 @@ const handleCheckFunction = (val: any) => {
  });
  form.value.activeTabs = val;
 };
-// 树点击跳转
-const jump = (e: any) => {
-  console.log("🚀 ~ jump ~ e:", e);
-  router.push({
-    path: "/plan/planList",
-  });
-};
+
 onMounted(() => {
  console.log();
  getTree();