unocss

package.json

@@ -58,6 +58,7 @@
     "swagger-editor-dist": "^4.10.0",
     "terser": "^5.18.2",
     "typescript": "^5.1.5",
+    "unocss": "^0.53.6",
     "unplugin-auto-import": "^0.16.4",
     "unplugin-vue-components": "^0.25.1",
     "unplugin-vue-macros": "^2.3.6",

src/App.vue

@@ -3,7 +3,6 @@
     <div>
       <router-view />
       <TheLock v-if="configStore.isLock" />
-      <TheModal />
       <TheMagnifierDialogVue />
     </div>
   </a-config-provider>
@@ -13,7 +12,6 @@
 import zhCN from 'ant-design-vue/lib/locale/zh_CN'
 import TheLock from '@/components/TheLock'
 import TheMagnifierDialogVue from '@/components/Magnifier/magnifierDialog.vue'
-import TheModal from '@/components/TheModal/index.vue'
 import { useConfigStore } from '@/store/modules'
 
 const configStore = useConfigStore()

src/components/TheModal/index.vue

-<template>
-  <div>
-    <a-modal :title="title" :visible="visible" @ok="handleOk" @cancel="handleCancel">
-      <p>{{ message }}</p>
-    </a-modal>
-  </div>
-</template>
-<script>
-export default {
-  name: 'TheModal',
-  data() {
-    return {
-      title: 'title',
-      visible: false,
-      message: '内容',
-      handleOk: () => {}
-    }
-  },
-  methods: {
-    handleCancel() {
-      this.visible = false
-    }
-  },
-  created() {
-    this.$bus.$on('openModel', ({ title, message, ok }) => {
-      this.visible = true
-      this.title = title || ''
-      this.message = message || ''
-      this.handleOk = ok
-        ? () => {
-            ok()
-            this.handleCancel()
-          }
-        : () => {
-            this.handleCancel()
-          }
-    })
-  },
-  mounted() {}
-}
-</script>
-<style lang="less" scoped>
-/deep/.ant-modal {
-  top: calc(50% - 100px);
-  max-height: 200px;
-}
-/deep/.ant-modal-body {
-  padding: 12px;
-  & > p {
-    max-height: 80px;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    margin: unset;
-    text-align: center;
-  }
-}
-</style>

src/components/TimeBetween/components/TimeBetween.vue

@@ -106,11 +106,11 @@ export default {
         this.$message.error('系统开始接入时间不能大于系统关闭接入时间', 5)
         return
       }
-      if (firstHour == sedHour && firstMin > sedMin) {
+      if (firstHour === sedHour && firstMin > sedMin) {
         this.$message.error('系统开始接入时间不能大于系统关闭接入时间', 5)
         return
       }
-      if (firstHour == sedHour && firstMin == sedMin && firstSeconds > sedSeconds) {
+      if (firstHour === sedHour && firstMin === sedMin && firstSeconds > sedSeconds) {
         this.$message.error('系统开始接入时间不能大于系统关闭接入时间', 5)
         return
       }

src/layouts/default/components/Close.vue

@@ -42,10 +42,10 @@ export default {
   methods: {
     closeItem() {
       let menuList = this.menuStore.visitedMenu
-      if (menuList[this.menuIndex].name == 'home') {
+      if (menuList[this.menuIndex].name === 'home') {
         return
       }
-      if (this.menuStore.selectedMenu == menuList[this.menuIndex].name) {
+      if (this.menuStore.selectedMenu === menuList[this.menuIndex].name) {
         this.$router.push(menuList[this.menuIndex - 1].path)
       }
       this.menuStore.removeVisitedMenu('index', this.menuIndex)
@@ -59,7 +59,7 @@ export default {
     },
     closeRight() {
       let menuList = this.menuStore.visitedMenu
-      if (this.menuIndex == menuList.length - 1) {
+      if (this.menuIndex === menuList.length - 1) {
         return
       }
       if (this.$route.name !== menuList[this.menuIndex].name) {

src/layouts/default/components/HeaderMenu.vue

 <template>
   <div>
     <ul class="tabBox">
-      <li v-for="(menu, index) in menuList" :key="index">
+      <li v-for="(menu, index) in menuStore.visitedMenu" :key="index">
         <span
-          :class="{ active: selectedMenu == menu.name }"
-          @contextmenu.prevent="showCloseMenu(index, menuList, $event)"
+          :class="{ active: selectedMenu === menu.name }"
+          @contextmenu.prevent="showCloseMenu(index, menuStore.visitedMenu, $event)"
         >
           <i @click="goPath(menu)">
             {{ menu.meta.title }}
@@ -27,7 +27,6 @@ import Close from './Close.vue'
 
 const router = useRouter()
 const menuStore = useMenuStore()
-let menuList = ref(menuStore.visitedMenu)
 let left = ref('')
 let menuIndex = ref('')
 
@@ -41,8 +40,8 @@ function goPath(menu) {
   router.push(menu.path)
 }
 function closeMenu(index) {
-  if (menuStore.selectedMenu == menuList.value[index].name) {
-    router.push(menuList.value[index - 1].path)
+  if (menuStore.selectedMenu === menuStore.visitedMenu[index].name) {
+    router.push(menuStore.visitedMenu[index - 1].path)
   }
   menuStore.removeVisitedMenu('index', index)
 }

src/layouts/default/components/Menu.tsx

@@ -42,7 +42,7 @@ export const TheMenu = defineComponent({
             return (
               <a-menu-item
                 key={item.name}
-                class={menuStore.selectedMenu == item.name ? `${prefixCls}-selected` : ''}
+                class={menuStore.selectedMenu === item.name ? `${prefixCls}-selected` : ''}
               >
                 <MenuLink item={item} />
               </a-menu-item>
@@ -82,7 +82,9 @@ const SubMenu = defineComponent({
             return <SubMenu key={item.name} item={item} />
           }
           return (
-            <a-menu-item class={menuStore.selectedMenu == item.name ? `${prefixCls}-selected` : ''}>
+            <a-menu-item
+              class={menuStore.selectedMenu === item.name ? `${prefixCls}-selected` : ''}
+            >
               <MenuLink item={item} />
             </a-menu-item>
           )

src/layouts/default/components/NoticeList.vue

 <template>
   <div class="Notify">
-    <ul v-if="type == '1'">
+    <ul v-if="type === '1'">
       <li v-for="(li, index) in list" :key="index">
         <div class="left">
           <!-- <img :src="li.userPic" alt="" /> -->
-          <span v-if="li.noticeType == 0">
-            <img src="../../../assets/img/systemIcon.png" alt="" />
+          <span v-if="li.noticeType === 0">
+            <img src="@/assets/img/systemIcon.png" alt="" />
           </span>
           <svg
             v-else
@@ -120,26 +120,26 @@
         </div>
       </li>
     </ul>
-    <ul v-if="type == '2'">
+    <ul v-if="type === '2'">
       <li v-for="(li, index) in list" :key="index">
         <div class="left">
           <img :src="getUrl(li.type)" alt="" />
         </div>
         <div class="right">
-          <h6 v-if="li.isFinish == true">{{ li.title }}</h6>
+          <h6 v-if="li.isFinish === true">{{ li.title }}</h6>
           <h6 v-else>
             <del> {{ li.title }}</del>
           </h6>
 
           <div class="time">
-            <span v-if="li.isFinish == true">{{ li.datetime }}</span>
+            <span v-if="li.isFinish === true">{{ li.datetime }}</span>
             <del v-else>{{ li.datetime }}</del>
             <span @click.stop="goDetail(li, index)"> 详情 </span>
           </div>
         </div>
       </li>
     </ul>
-    <ul v-if="type == '3'" class="waitDone">
+    <ul v-if="type === '3'" class="waitDone">
       <li v-for="(li, index) in list" :key="index">
         <div class="right">
           <div class="title" style="display: flex; justify-content: space-between">
@@ -248,10 +248,6 @@ export default {
           text-overflow: ellipsis;
           // 只要超过宽度就换行，不论中文还是英文
           word-break: break-all;
-          //最多展示两行
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
           //根据样式设置
           line-height: 1.2em;
           max-height: 2.4em;
@@ -287,13 +283,7 @@ export default {
         -webkit-line-clamp: 2;
         overflow: hidden;
         text-overflow: ellipsis;
-        // 只要超过宽度就换行，不论中文还是英文
         word-break: break-all;
-        //最多展示两行
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        //根据样式设置
         line-height: 1.2em;
         max-height: 2.4em;
       }

src/main.ts

@@ -10,6 +10,7 @@ import { createHead, HeadVuePlugin } from '@vueuse/head'
 import router from './router'
 import './directives'
 import { useAppStore } from '@/store/modules'
+import 'virtual:uno.css'
 
 import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
@@ -19,7 +20,6 @@ import Step from '@/components/Step'
 import magnifier from '@/components/Magnifier/magnifier.vue'
 import { post } from '@/utils/remote/remote'
 import api from '@/utils/remote'
-import queryEnum from '@/utils/remote/queryEnum'
 import dayjs from 'dayjs'
 
 dayjs.locale('zh-cn')
@@ -34,11 +34,9 @@ Vue.component('magnifier', magnifier)
 // **********   方法   **********
 const bus = new Vue()
 Vue.prototype.$bus = bus // 事件总线
-Vue.prototype.$Modal = (data: any) => bus.$emit('openModel', data)
 Vue.prototype.$moment = moment
 Vue.prototype.$remote = post
 Vue.prototype.$api = api
-Vue.prototype.$queryEnum = queryEnum
 Vue.prototype.$getTableFiled = (table: string, filed: string, index: string) =>
   table + '[' + index + ']' + '.' + filed
 // **********  插件   **********

src/store/modules/app.ts

@@ -5,17 +5,21 @@ import { postQueryMenu } from '@/apis'
 import { useMenuStore, useConfigStore } from '@/store/modules'
 
 export const useAppStore = defineStore('app', () => {
-  const userId = ref(localStorage.getItem('userId'))
+  const route = location.hash.slice(1)
+  const userId = localStorage.getItem('userId')
   const loading = ref(true)
 
   const menuStore = useMenuStore()
   const configStore = useConfigStore()
 
-  if (!userId.value) {
+  if (!userId) {
     location.hash = '#/login'
   }
-  router.addRoutes(setupLayouts(generatedRoutes))
 
+  let authRoutes: string[] = [] // 权限路由
+  let currentMenu: any // 当前路由菜单
+
+  // 递归转换菜单
   function transformToMenu(item: Menu[]): any[] {
     return item.map((i) => {
       let obj = {
@@ -26,7 +30,12 @@ export const useAppStore = defineStore('app', () => {
         }
       }
       if (i.type === 'menu') {
-        return { ...obj, path: i.path }
+        authRoutes.push(i.path!)
+        const menu = { ...obj, path: i.path }
+        if (i.path === route) {
+          currentMenu = menu
+        }
+        return menu
       }
       return {
         ...obj,
@@ -35,15 +44,34 @@ export const useAppStore = defineStore('app', () => {
     })
   }
 
+  function setMenu(data: any[]) {
+    const menu = transformToMenu(data)
+    menuStore.setMenu(menu)
+    console.log(menu)
+  }
+
+  function setRoutes() {
+    const routes = generatedRoutes.filter((r) => authRoutes.includes(r.path))
+    router.addRoutes(setupLayouts(routes))
+  }
+
+  function setState() {
+    if (currentMenu) {
+      menuStore.setSelectedMenu(currentMenu.name)
+    }
+  }
+
   postQueryMenu().then((r) => {
     if (r.data) {
-      const menu = transformToMenu(r.data)
-      menuStore.setMenu(menu)
+      setMenu(r.data)
+      setRoutes()
+      setState()
       loading.value = false
     }
   })
 
   function logout() {
+    menuStore.clear()
     configStore.clear()
     localStorage.removeItem('userId')
     location.hash = '#/login'

src/store/modules/menu.ts

 export const useMenuStore = defineStore('menu', {
   state: () => ({
-    menuRoute: [] as any[],
     menu: [] as any[],
     selectedMenu: '',
     openedMenu: [] as string[],
-    visitedMenu: [] as any[]
+    visitedMenu: [
+      {
+        name: 'Home',
+        path: '/home',
+        meta: {
+          title: '首页',
+          icon: 'material-symbols:home'
+        }
+      }
+    ] as any[]
   }),
   actions: {
-    setMenuRoute(menuRoute: any[]) {
-      this.menuRoute = menuRoute
-    },
     setMenu(menu: any[]): void {
       this.menu = menu
     },
@@ -20,7 +25,7 @@ export const useMenuStore = defineStore('menu', {
       this.openedMenu = menu
     },
     addVisitedMenu(menu: any): void {
-      if (menu.meta.title && !this.visitedMenu.some((item) => item?.name === this.selectedMenu)) {
+      if (menu.meta.title && !this.visitedMenu.some((item) => item?.name === menu.name)) {
         this.visitedMenu.push(menu)
       }
     },
@@ -41,7 +46,9 @@ export const useMenuStore = defineStore('menu', {
       }
     },
     clear() {
-      localStorage.removeItem('menu')
+      this.selectedMenu = ''
+      this.openedMenu = []
+      this.visitedMenu = []
     }
   }
 })

src/utils/remote/queryEnum.ts

-import { post } from '@/utils/remote'
-export default function queryEnum(params) {
-  return post('/sso/resource/getOptions', params, undefined, undefined, {
-    headers: {
-      'Content-Type': 'application/json;'
-    }
-  })
-}

src/views/home/index.vue

 <template>
-  <div>
-    <h1>首页</h1>
+  <div class="w-100 h-25 bg-violet">
+    <h1 class="text-3xl font-bold underline">Hello world!</h1>
   </div>
 </template>
 

src/views/trades/1001.vue

 <template>
+  <div class="w-24 h-24 bg-slate-100">
     <h1>1001</h1>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script>
+export default {
+  name: '1001',
+  data() {
+    return {}
+  },
+  methods: {},
+  created() {},
+  mounted() {}
+}
+</script>
 
 <style scoped lang="less"></style>

vite.config.ts

@@ -12,6 +12,7 @@ import antdvFix from 'vite-plugin-antdv-fix'
 import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
 import Pages from 'vite-plugin-pages'
 import Layouts from 'vite-plugin-vue-layouts'
+import UnoCSS from 'unocss/vite'
 
 import postcssImport from 'postcss-import'
 import autoprefixer from 'autoprefixer'
@@ -83,6 +84,7 @@ export default defineConfig(({ mode }) => {
       components({
         dirs: ['src/components']
       }),
+      UnoCSS(),
       antdvFix(),
       Pages({
         dirs: 'src/views',