From b3aa8147b1650de9ba556a9db8dce9f14fe98d84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Sun, 10 Apr 2022 23:20:28 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E8=89=B2=E9=85=8D=E7=BD=AE=EF=BC=8C=E5=A4=9A=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E9=85=8D=E7=BD=AE=E5=8C=96=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AppProvider/index.vue           |  6 +++---
 src/layout/components/tags/index.vue           |  4 ++--
 src/layout/index.vue                           | 13 +++++++++----
 src/settings/index.js                          |  1 +
 src/settings/theme.json                        | 14 ++++++++++++++
 src/store/modules/app.js                       | 17 -----------------
 src/store/modules/{theme/index.js => theme.js} | 12 ++++--------
 src/views/error-page/404.vue                   | 10 +++++++---
 src/views/examples/table/post/index.vue        |  1 -
 src/views/examples/table/post/post-create.vue  |  4 ++--
 src/views/test-page/TestUnocss.vue             |  2 ++
 11 files changed, 44 insertions(+), 40 deletions(-)
 create mode 100644 src/settings/index.js
 create mode 100644 src/settings/theme.json
 delete mode 100644 src/store/modules/app.js
 rename src/store/modules/{theme/index.js => theme.js} (57%)

diff --git a/src/components/AppProvider/index.vue b/src/components/AppProvider/index.vue
index aed1882..e834bf9 100644
--- a/src/components/AppProvider/index.vue
+++ b/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 appStore = useAppStore()
+const useTheme = useThemeStore()
 </script>
diff --git a/src/layout/components/tags/index.vue b/src/layout/components/tags/index.vue
index f4deabc..81e2392 100644
--- a/src/layout/components/tags/index.vue
+++ b/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;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 8bc91bd..f8e024f 100644
--- a/src/layout/index.vue
+++ b/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">
-          <AppTags v-if="useTheme.tag.visible" />
+        <n-layout
+          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>
diff --git a/src/settings/index.js b/src/settings/index.js
new file mode 100644
index 0000000..002ca48
--- /dev/null
+++ b/src/settings/index.js
@@ -0,0 +1 @@
+export { default as themeSettings } from './theme.json'
diff --git a/src/settings/theme.json b/src/settings/theme.json
new file mode 100644
index 0000000..8a48541
--- /dev/null
+++ b/src/settings/theme.json
@@ -0,0 +1,14 @@
+{
+  "tags": {
+    "visible": true,
+    "height": 50
+  },
+  "header": {
+    "height": 60
+  },
+  "naiveThemeOverrides": {
+    "common": {
+      "primaryColor": "#316c72"
+    }
+  }
+}
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
deleted file mode 100644
index 4bb5fd7..0000000
--- a/src/store/modules/app.js
+++ /dev/null
@@ -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',
-        },
-      },
-    }
-  },
-})
diff --git a/src/store/modules/theme/index.js b/src/store/modules/theme.js
similarity index 57%
rename from src/store/modules/theme/index.js
rename to src/store/modules/theme.js
index b60ff61..87459a0 100644
--- a/src/store/modules/theme/index.js
+++ b/src/store/modules/theme.js
@@ -1,17 +1,13 @@
 import { defineStore } from 'pinia'
-
+import { themeSettings } from '@/settings'
 export const useThemeStore = defineStore('theme', {
   state() {
-    return {
-      tag: {
-        visible: true,
-        height: 50,
-      },
-    }
+    return themeSettings
   },
+  getters: {},
   actions: {
     setTabVisible(visible) {
-      this.tag.visible = visible
+      this.tags.visible = visible
     },
   },
 })
diff --git a/src/views/error-page/404.vue b/src/views/error-page/404.vue
index 4d4467c..3c9ee35 100644
--- a/src/views/error-page/404.vue
+++ b/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>
diff --git a/src/views/examples/table/post/index.vue b/src/views/examples/table/post/index.vue
index 2b93bb0..c0728e1 100644
--- a/src/views/examples/table/post/index.vue
+++ b/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>
diff --git a/src/views/examples/table/post/post-create.vue b/src/views/examples/table/post/post-create.vue
index 83611c8..7456da6 100644
--- a/src/views/examples/table/post/post-create.vue
+++ b/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>
 
diff --git a/src/views/test-page/TestUnocss.vue b/src/views/test-page/TestUnocss.vue
index 9d3423d..8d93940 100644
--- a/src/views/test-page/TestUnocss.vue
+++ b/src/views/test-page/TestUnocss.vue
@@ -13,3 +13,5 @@
     </div>
   </div>
 </template>
+
+<script setup></script>