refactor: 重构主题色配置，多标签配置化处理

src/components/AppProvider/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-config-provider :theme-overrides="appStore.themeOverrides">
+  <n-config-provider :theme-overrides="useTheme.naiveThemeOverrides">
     <n-loading-bar-provider>
       <LoadingBar />
       <n-dialog-provider>
@@ -17,7 +17,7 @@
 import MessageContent from './MessageContent.vue'
 import DialogContent from './DialogContent.vue'
 import LoadingBar from './LoadingBar.vue'
+import { useThemeStore } from '@/store/modules/theme'
 
-import { useAppStore } from '@/store/modules/app'
+const useTheme = useThemeStore()
-const appStore = useAppStore()
 </script>

src/layout/components/tags/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tags-wrapper" :style="{ height: useTheme.tag.height + 'px' }">
+  <div class="tags-wrapper" :style="{ height: useTheme.tags.height + 'px' }">
     <n-space>
       <n-tag
         v-for="tag in useTag.tags"
@@ -59,7 +59,7 @@ const handleClose = (path) => {
 .tags-wrapper {
   display: flex;
   align-items: center;
-  background-color: #f5f6fb;
+  background-color: #fff;
   padding: 0 10px;
   position: sticky;
   top: 0;

src/layout/index.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="layout">
     <n-layout has-sider position="absolute">
-      <n-layout-sider :width="200" :collapsed-width="0" :native-scrollbar="false">
+      <n-layout-sider bordered :width="200" :collapsed-width="0" :native-scrollbar="false">
         <SideBar />
       </n-layout-sider>
       <n-layout>
-        <n-layout-header>
+        <n-layout-header :style="{ height: useTheme.header.height + 'px' }" style="border-left: none">
           <AppHeader />
         </n-layout-header>
 
-        <n-layout position="absolute" style="top: 60px; background-color: #f5f6fb" :native-scrollbar="false">
+        <n-layout
-          <AppTags v-if="useTheme.tag.visible" />
+          position="absolute"
+          style="background-color: #f5f6fb"
+          :style="{ top: useTheme.header.height + 'px' }"
+          :native-scrollbar="false"
+        >
+          <AppTags v-if="useTheme.tags.visible" />
           <AppMain />
         </n-layout>
       </n-layout>

src/settings/index.js

@@ -0,0 +1 @@
+export { default as themeSettings } from './theme.json'

src/settings/theme.json

@@ -0,0 +1,14 @@
+{
+  "tags": {
+    "visible": true,
+    "height": 50
+  },
+  "header": {
+    "height": 60
+  },
+  "naiveThemeOverrides": {
+    "common": {
+      "primaryColor": "#316c72"
+    }
+  }
+}

src/store/modules/app.js

@@ -1,17 +0,0 @@
-import { defineStore } from 'pinia'
-
-export const useAppStore = defineStore('app', {
-  state() {
-    return {
-      themeOverrides: {
-        common: {
-          primaryColor: '#316c72',
-          primaryColorSuppl: '#316c72',
-          primaryColorHover: '#316c72',
-          successColorHover: '#316c72',
-          successColorSuppl: '#316c72',
-        },
-      },
-    }
-  },
-})

src/store/modules/theme.js

@@ -1,17 +1,13 @@
 import { defineStore } from 'pinia'
-
+import { themeSettings } from '@/settings'
 export const useThemeStore = defineStore('theme', {
   state() {
-    return {
+    return themeSettings
-      tag: {
-        visible: true,
-        height: 50,
-      },
-    }
   },
+  getters: {},
   actions: {
     setTabVisible(visible) {
-      this.tag.visible = visible
+      this.tags.visible = visible
     },
   },
 })

src/views/error-page/404.vue

@@ -2,7 +2,7 @@
   <div class="page-404">
     <n-result status="404" description="抱歉，您访问的页面不存在。">
       <template #icon>
-        <img src="@/assets/images/404.png" width="500" />
+        <img src="@/assets/images/404.png" width="300" />
       </template>
       <template #footer>
         <n-button strong secondary type="primary" @click="replace('/')">返回首页</n-button>
@@ -18,10 +18,14 @@ const { replace } = useRouter()
 
 <style lang="scss" scoped>
 .page-404 {
-  height: 100%;
-  min-height: calc(100vh - 60px);
   display: flex;
   align-items: center;
   justify-content: center;
+
+  position: absolute;
+  top: 50px;
+  bottom: 50px;
+  left: 0;
+  right: 0;
 }
 </style>

src/views/examples/table/post/index.vue

@@ -11,7 +11,6 @@
       :columns="columns"
       :pagination="pagination"
       :row-key="(row) => row.id"
-      max-height="calc(100vh - 250px)"
       @update:checked-row-keys="handleCheck"
     />
   </div>

src/views/examples/table/post/post-create.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div pb-20>
     <div class="header">
       <input v-model="post.title" type="text" placeholder="输入文章标题..." class="title" />
       <n-button type="primary" style="width: 80px" :loading="btnLoading" @click="handleSavePost">保存</n-button>
     </div>
-    <MdEditor v-model="post.content" style="height: calc(100vh - 140px)" />
+    <MdEditor v-model="post.content" style="height: calc(100vh - 200px)" />
   </div>
 </template>
 

src/views/test-page/TestUnocss.vue

@@ -13,3 +13,5 @@
     </div>
   </div>
 </template>
+
+<script setup></script>