依赖包更新

.env.development

@@ -0,0 +1,4 @@
+NODE_ENV = 'development'
+
+VITE_BASE_API = /api
+VITE_BASE_PATH = http://10.0.0.154:30701

.env.production

@@ -0,0 +1,4 @@
+NODE_ENV = 'production'
+
+VITE_BASE_API = /api
+VITE_BASE_PATH = 

package.json

@@ -9,35 +9,36 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@kjgl77/datav-vue3": "^1.7.1",
-    "axios": "^1.5.1",
-    "dayjs": "^1.11.10",
-    "echarts": "^5.4.3",
-    "element-plus": "^2.3.14",
+    "@kjgl77/datav-vue3": "^1.7.3",
+    "@vueuse/core": "^10.11.0",
+    "axios": "^1.7.2",
+    "dayjs": "^1.11.11",
+    "echarts": "^5.5.0",
+    "element-plus": "^2.7.6",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
-    "pinia": "^2.1.6",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.5"
+    "pinia": "^2.1.7",
+    "vue": "^3.4.30",
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "@tsconfig/node18": "^18.2.2",
-    "@types/node": "^20.8.3",
-    "@types/nprogress": "^0.2.1",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.14.8",
+    "@types/nprogress": "^0.2.3",
+    "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.4.0",
-    "eslint": "^8.51.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "prettier": "^3.0.3",
-    "sass": "^1.69.0",
-    "typescript": "^5.0.2",
-    "unocss": "^0.56.5",
-    "unplugin-auto-import": "^0.16.6",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.26.0",
+    "prettier": "^3.3.2",
+    "sass": "^1.77.6",
+    "typescript": "^5.5.2",
+    "unocss": "^0.61.0",
+    "unplugin-auto-import": "^0.16.7",
     "unplugin-vue-components": "^0.25.2",
-    "vite": "^4.4.5",
+    "vite": "^5.3.1",
     "vite-plugin-style-import": "^2.0.0",
-    "vue-tsc": "^1.8.5"
+    "vue-tsc": "^2.0.22"
   }
 }

src/auto-import.d.ts

@@ -143,6 +143,7 @@ declare global {
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
   const useCached: typeof import('@vueuse/core')['useCached']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
@@ -299,4 +300,5 @@ declare global {
 declare global {
   // @ts-ignore
   export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }

src/components.d.ts

@@ -7,10 +7,9 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    DatavTitle: typeof import('./components/DatavTitle.vue')['default']
-    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
+    ElConfigProvider: (typeof import('element-plus/es'))['ElConfigProvider']
+    FsTitle: (typeof import('./components/FsTitle.vue'))['default']
+    RouterLink: (typeof import('vue-router'))['RouterLink']
+    RouterView: (typeof import('vue-router'))['RouterView']
   }
 }

src/components/DatavTitle.vue → src/components/FsTitle.vue

@@ -1,54 +1,54 @@
-<script setup lang="ts">
-import dayjs from 'dayjs'
-
-interface Props {
-  src: string
-  color?: string
-  showTime?: boolean
-  title: string
-  height?: string
-}
-const props2 = withDefaults(defineProps<Props>(), {
-  color: '#fff',
-  title: '方是科技',
-  showTime: true,
-  src: 'https://www.sxidc.com/uploads/file/0b4fe95d6fac3601393e92aa46c448e0_20231007100631.png',
-  height: '70px',
-})
-onMounted(() => {
-  if (props2.showTime) {
-    time.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
-    timer.value = setInterval(() => {
-      time.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
-    }, 1000)
-  }
-})
-onDeactivated(() => {
-  timer.value && clearInterval(timer.value)
-})
-const timer: any = ref('')
-const time: any = ref('')
-</script>
-<template>
-  <div
-    class="relative bg-[length:100%_100%] w-full bg-center bg-no-repeat text-[50px] font-bold flex items-center justify-center"
-    :style="{
-      backgroundImage: `url(${src})`,
-      color: `${color}`,
-      height: `${height}`,
-    }"
-  >
-    <span class="tracking-widest">
-      {{ title }}
-    </span>
-    <span
-      class="absolute right-[20px] top-[0] w-[100] h-full flex items-center text-[20px]"
-      style="color: #fff"
-      v-if="showTime"
-    >
-      {{ time }}
-    </span>
-  </div>
-</template>
-
-<style lang="scss" scoped></style>
+<script setup lang="ts">
+import dayjs from 'dayjs'
+
+interface Props {
+  src: string
+  color?: string
+  showTime?: boolean
+  title: string
+  height?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  color: '#fff',
+  title: '方是科技',
+  showTime: true,
+  src: 'https://www.sxidc.com/uploads/file/0b4fe95d6fac3601393e92aa46c448e0_20231007100631.png',
+  height: '70px',
+})
+onMounted(() => {
+  if (props.showTime) {
+    time.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
+    timer.value = setInterval(() => {
+      time.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
+    }, 1000)
+  }
+})
+onDeactivated(() => {
+  timer.value && clearInterval(timer.value)
+})
+const timer: any = ref('')
+const time: any = ref('')
+</script>
+<template>
+  <div
+    class="relative bg-[length:100%_100%] w-full bg-center bg-no-repeat text-[50px] font-bold flex items-center justify-center"
+    :style="{
+      backgroundImage: `url(${src})`,
+      color: `${color}`,
+      height: `${height}`,
+    }"
+  >
+    <span class="tracking-widest">
+      {{ title }}
+    </span>
+    <span
+      class="absolute right-[20px] top-[0] w-[100] h-full flex items-center text-[20px]"
+      style="color: #fff"
+      v-if="showTime"
+    >
+      {{ time }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/components/HelloWorld.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/router/asyncRouter.ts

@@ -1,21 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router'
-
-const asyncRouter: RouteRecordRaw[] = [
-  {
-    path: '/home',
-    name: 'home',
-    component: () => import('@/views/Home.vue'),
-    meta: {
-      title: '首页',
-      icon: 'House',
-    },
-  },
-
-  {
-    path: '/:pathMatch(.*)*',
-    redirect: '/exception/404',
-    hidden: true,
-  },
-]
-
-export default asyncRouter

src/router/constantRouter.ts

@@ -3,10 +3,19 @@ import type { RouteRecordRaw } from 'vue-router'
 
 const constantRouter: RouteRecordRaw[] = [
   {
-    path: '/',
-    name: 'layout',
-    redirect: '/home',
-    children: [],
+    path: '/home',
+    name: 'home',
+    component: () => import('@/views/Home.vue'),
+    meta: {
+      title: '首页',
+      icon: 'House',
+    },
+  },
+
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/exception/404',
+    hidden: true,
   },
 ]
 

src/router/guard.ts

@@ -1,49 +0,0 @@
-import type { Router } from 'vue-router'
-import { useRouterStore } from '@/stores/router'
-import { useUserStore } from '@/stores/user'
-
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
-
-const whiteList = ['/login']
-
-const createRouterGuard = (router: Router) => {
-  router.beforeEach(async (to, from) => {
-    const userStore = useUserStore()
-    const token = userStore.token
-
-    NProgress.start()
-
-    if (token) {
-      if (to.path === '/login') {
-        return from.path
-      } else {
-        const routerStore = useRouterStore()
-        // flag默认为false,为true时表示已经获取过用户信息
-        if (!userStore.flag) {
-          await userStore.getUserInfo()
-
-          const accessedRouters = await routerStore.generatorRouter()
-          accessedRouters.forEach((route) => {
-            router.addRoute('layout', route)
-          })
-
-          return { ...to, replace: true }
-        }
-        return true
-      }
-    } else {
-      if (whiteList.includes(to.path)) {
-        return true
-      } else {
-        return { path: '/login', query: { redirect: to.fullPath } }
-      }
-    }
-  })
-
-  router.afterEach(() => {
-    NProgress.done()
-  })
-}
-
-export default createRouterGuard

src/router/index.ts

@@ -1,14 +1,10 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import constantRouter from './constantRouter'
-import createRouterGuard from './guard'
-export { default as asyncRouter } from './asyncRouter'
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [...constantRouter],
 })
 
-createRouterGuard(router)
-
 export { constantRouter }
 export default router

src/stores/router.ts

@@ -1,98 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router'
-import { asyncRouter } from '@/router'
-// import { generatorDynamicRouter } from '@/utils/dynamicRouter'
-
-// eslint-disable-next-line
-function hasPermission(route: RouteRecordRaw, permission: any[]) {
-  if (route.meta && route.meta.permission) {
-    let flag = false
-    for (let i = 0, len = permission.length; i < len; i++) {
-      flag = route.meta.permission.includes(permission[i])
-      if (flag) {
-        return true
-      }
-    }
-    return false
-  }
-  return true
-}
-
-function hasRole(route: RouteRecordRaw, role: any[]) {
-  if (route.meta && route.meta.role) {
-    let flag = false
-    for (let i = 0, len = role.length; i < len; i++) {
-      flag = route.meta.role.includes(role[i])
-      if (flag) {
-        return true
-      }
-    }
-    return false
-  }
-  return true
-}
-
-// 根据角色过滤路由
-function filterAsyncRouter(routerMap: RouteRecordRaw[], role: any[]) {
-  const accessedRouters = routerMap.filter(route => {
-    if (hasRole(route, role)) {
-      if (route.children && route.children.length) {
-        route.children = filterAsyncRouter(route.children, role)
-      }
-      return true
-    }
-    return false
-  })
-  return accessedRouters
-}
-
-// 过滤掉hidden为true的路由
-function filterMenuRouter(router: RouteRecordRaw[]) {
-  const routerMap: RouteRecordRaw[] = JSON.parse(JSON.stringify(router))
-  const accessedRouters = routerMap.filter(route => {
-    if (!route.hidden) {
-      if (route.children && route.children.length) {
-        route.children = filterMenuRouter(route.children)
-      }
-      return true
-    }
-    return false
-  })
-  return accessedRouters
-}
-
-const keepAliveRouter: any = []
-function filterKeepAliveRouter(router: RouteRecordRaw[]) {
-  router.forEach(item => {
-    if (item.meta?.keepAlive || item.children?.some(child => child.meta?.keepAlive)) {
-      keepAliveRouter.push(item.meta?.viewName)
-    }
-    if (item.children?.length) {
-      filterKeepAliveRouter(item.children)
-    }
-  })
-  return keepAliveRouter
-}
-
-export const useRouterStore = defineStore({
-  id: 'router',
-  state: () => ({
-    menuRouter: <any>[],
-    asyncRouter: <any>[],
-    dynamicRouter: <any>[],
-    keepAliveRouter: <any>[]
-  }),
-  actions: {
-    generatorRouter(role?: any[]): Promise<RouteRecordRaw[]> {
-      return new Promise(resolve => {
-        this.asyncRouter = role ? filterAsyncRouter(asyncRouter, role) : asyncRouter
-        // this.asyncRouter = generatorDynamicRouter(this.dynamicRouter)
-        this.menuRouter = filterMenuRouter(this.asyncRouter)
-        this.keepAliveRouter = filterKeepAliveRouter(this.menuRouter)
-        resolve(this.asyncRouter)
-      })
-    },
-    setDynamicRouter(router: any[]) {
-      this.dynamicRouter = router
-    }
-  }
-})

src/stores/user.ts

@@ -1,28 +0,0 @@
-import router from '@/router'
-
-export const useUserStore = defineStore({
-  id: 'user',
-  state: () => ({
-    user: {},
-    flag: false,
-    token: localStorage.getItem('token') || 't',
-  }),
-  actions: {
-    async getUserInfo() {
-      // const userRes: any = await getUserInfo()
-      // this.user = userRes.infos[0]
-      // 这里可以添加从后台获取菜单的接口
-      this.flag = true
-    },
-    async login(data: any) {},
-    logout() {
-      localStorage.removeItem('token')
-      sessionStorage.removeItem('globalTabs')
-      this.$reset()
-      router.push({
-        path: '/login',
-        query: { redirect: router.currentRoute.value.fullPath },
-      })
-    },
-  },
-})

src/utils/constants.ts

@@ -0,0 +1,2 @@
+export const ACCESS_TOKEN = 'Authorization'
+export const TOKEN_PREFIX = 'Bearer '

src/utils/request.ts

@@ -0,0 +1,36 @@
+import axios from 'axios'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const request = axios.create({
+  baseURL: import.meta.env.VITE_BASE_API,
+})
+
+// 异常拦截处理器
+const errorHandler = (error: any) => {
+  const status = error.response.status
+  const data = error.response.data
+
+  if (status === 400) {
+    ElMessage.error(data.msg)
+  } else if (status === 403) {
+    ElMessage.error('无权限访问')
+  } else if (status === 404) {
+    ElMessage.error('接口不存在')
+  } else if (status === 500) {
+    ElMessage.error('服务器错误')
+  }
+
+  return Promise.reject(error.response)
+}
+
+request.interceptors.response.use((res) => {
+  const data = res.data
+  if (data.success || data.code === 200) {
+    return data
+  } else {
+    ElMessage.error(data.msg)
+    return Promise.reject(data)
+  }
+}, errorHandler)
+
+export default request

src/views/Home.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <datav-title></datav-title>
+  <fs-title></fs-title>
   <div class="main flex w-full">
     <div class="flex flex-col basis-1/4">
       <dv-border-box-13> </dv-border-box-13>

tsconfig.json

@@ -6,6 +6,7 @@
     "src/**/*.vue"
   ],
   "compilerOptions": {
+    "module": "ESNext",
     "baseUrl": ".",
     "paths": {
       "@/*": [

tsconfig.node.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@tsconfig/node18/tsconfig.json",
+  "extends": "@tsconfig/node20/tsconfig.json",
   "include": [
     "vite.config.*",
     "vitest.config.*",
@@ -8,6 +8,7 @@
   ],
   "compilerOptions": {
     "composite": true,
+    "moduleResolution": "node",
     "module": "ESNext",
     "types": [
       "node"

vite.config.ts

@@ -1,6 +1,6 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
@@ -10,6 +10,7 @@ import Unocss from 'unocss/vite'
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
   return {
+    base: '/',
     plugins: [
       vue(),
       Unocss(),
@@ -24,7 +25,6 @@ export default defineConfig(({ mode }) => {
         extensions: ['vue'],
         dts: 'src/components.d.ts',
       }),
-      splitVendorChunkPlugin(),
     ],
     resolve: {
       alias: {