增加Ui库

package.json

@@ -12,6 +12,7 @@
     "@vuemap/vue-amap": "^2.0.24",
     "echarts": "^5.4.3",
     "echarts-gl": "^2.0.9",
+    "naive-ui": "^2.36.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
     "tank-vue3-seamless-scroll": "^1.0.16",

src/assets/naive-theme.ts

@@ -0,0 +1,81 @@
+import { GlobalThemeOverrides } from 'naive-ui'
+const themeOverrides: GlobalThemeOverrides = {
+  common: {
+    primaryColor: '#2791FEFF',
+    primaryColorHover: '#67B2FEFF',
+    primaryColorPressed: '#1F74CBFF',
+    primaryColorSuppl: '#93C8FEFF',
+    errorColorHover: '#EC787BFF',
+    errorColor: '#E8575AFF',
+    errorColorPressed: '#B94548FF',
+    errorColorSuppl: '#EE898BFF',
+    warningColor: '#FAAD38FF',
+    warningColorPressed: '#C88A2CFF',
+    textColorBase: '#17233EFF',
+    textColor1: 'rgba(80, 90, 110, 1)',
+    textColor2: 'rgba(128, 134, 148, 1)',
+    textColor3: 'rgba(196, 200, 206, 1)',
+    placeholderColor: 'rgba(196, 200, 206, 1)',
+    iconColor: 'rgba(196, 200, 206, 1)',
+    iconColorHover: 'rgba(103, 178, 254, 1)',
+    iconColorPressed: 'rgba(31, 116, 203, 1)',
+    iconColorDisabled: 'rgba(196, 200, 206, 1)',
+    dividerColor: 'rgba(220, 222, 226, 1)',
+    borderColor: 'rgba(196, 200, 206, 1)',
+    closeIconColor: 'rgba(80, 90, 110, 1)',
+    closeIconColorHover: 'rgba(103, 178, 254, 1)',
+    closeIconColorPressed: 'rgba(31, 116, 203, 1)',
+    closeColorHover: 'rgba(0, 0, 0, 0.1)',
+    closeColorPressed: 'rgba(0, 0, 0, 0.15)',
+    scrollbarColor: 'rgba(126, 133, 160, 1)',
+    scrollbarColorHover: 'rgba(103, 178, 254, 1)',
+    tagColor: '#F5F5F5FF',
+    inputColorDisabled: 'rgba(233, 234, 236, 1)',
+    fontSize: '14px',
+    fontSizeMini: '12px',
+    fontSizeTiny: '12px',
+    fontSizeSmall: '14px',
+    fontSizeMedium: '14px',
+    fontSizeLarge: '15px',
+    fontSizeHuge: '16px'
+  },
+  Tree: {
+    nodeTextColor: '#fff',
+    nodeColorHover: 'transparent',
+    nodeColorPressed: 'transparent',
+    nodeColorActive: 'transparent'
+  },
+  DatePicker: {
+    panelColor: 'rgba(3,20,26,0.95)',
+    panelTextColor: 'rgba(255,255,255,0.8)',
+    calendarDaysTextColor: 'rgba(255,255,255,0.8)',
+    calendarTitleTextColor: 'rgba(255,255,255,0.8)',
+    calendarTitleColorHover: '#183742',
+    panelHeaderDividerColor: '#164352',
+    calendarDaysDividerColor: '#164352',
+    panelActionDividerColor: '#164352',
+    itemColorActive: '#1AB99B',
+    itemColorHover: '#146371'
+  },
+  TimePicker: {
+    panelColor: 'rgba(3, 20, 26, 0.95)',
+    panelDividerColor: 'rgb(239, 239, 245)',
+    itemTextColor: 'rgba(255, 255, 255, 0.8)',
+    itemTextColorActive: '#1AB99B',
+    itemColorHover: '#146371'
+  },
+  Checkbox: {
+    colorChecked: '#1ab99bFF',
+    textColor: '#fff'
+  },
+  Notification: {
+    iconColorSuccess: '#1AB99BFF',
+    iconColorError: '#E8575AFF',
+    color: '#12363FFF',
+    textColor: 'rgba(255, 255, 255, 1)',
+    descriptionTextColor: 'rgba(255, 255, 255, 1)',
+    closeIconColor: 'rgba(255, 255, 255, 1)',
+    borderRadius: '0'
+  }
+}
+export default themeOverrides

src/assets/native-plugin.ts

@@ -0,0 +1,16 @@
+import {
+  create,
+  NConfigProvider,
+  NNotificationProvider,
+  NProgress
+} from 'naive-ui'
+
+const naive = create({
+  components: [
+    NConfigProvider,
+    NNotificationProvider,
+    NProgress
+  ]
+})
+
+export default naive

src/pages/App.vue

@@ -1,22 +1,33 @@
 <template>
   <loading v-if="show" />
-  <router-view />
+  <n-config-provider
+    preflight-style-disabled
+    inline-theme-disabled
+    :theme-overrides="themeOverrides"
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+  >
+    <n-notification-provider>
+      <router-view />
+    </n-notification-provider>
+  </n-config-provider>
 </template>
 <script setup lang='ts'>
 import loading from '@/components/loading.vue'
 import useStore from './store/index'
 import { computed } from 'vue'
-
+import { zhCN, dateZhCN } from 'naive-ui'
+import Theme from '@/assets/naive-theme'
 const store = useStore()
 const show = computed(() => store.loading)
-
+const themeOverrides = Theme
 </script>
 <style>
-  *{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    user-select: none;
-    font-style: normal;
-  }
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  user-select: none;
+  font-style: normal;
+}
 </style>

src/pages/main.ts

@@ -7,6 +7,7 @@ import VueAMap, { initAMapApiLoader } from '@vuemap/vue-amap'
 import '@vuemap/vue-amap/dist/style.css'
 import Icon from '@/components/icon.vue'
 import 'virtual:svg-icons-register'
+import naive from '@/assets/native-plugin'
 
 initAMapApiLoader({
   key: 'YOUR_KEY',
@@ -36,6 +37,7 @@ const router = createRouter({
 app.use(store)
   .use(router)
   .use(VueAMap)
+  .use(naive)
   .component('Icon', Icon)
 
 router.isReady().then(() => {

src/pages/views/home/components/HomePage.vue

@@ -175,9 +175,16 @@
               >
                 <div>
                   <Icon
+                    v-if="id === 0"
                     :name="item.icon"
                     :size="74"
                   />
+                  <n-progress
+                    v-else
+                    type="circle"
+                    :percentage="80"
+                    :offset-degree="120"
+                  />
                   <div>
                     <p>
                       {{ item.name }}