feat: 优化界面，添加深色模式记录

Wyatex · Sep 3, 2022 · f0a2584 · f0a2584
1 parent 684b131
commit f0a2584
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 23 deletions.
diff --git a/frontend/src/components/CateModal.vue b/frontend/src/components/CateModal.vue
@@ -45,12 +45,6 @@
 import { useStore } from '../store'
 const store = useStore()
 
-const showAdd = () => {
-  store.cateModal.title = '添加分类'
-  store.cateModal.label = ''
-  store.cateModal.prevLabel = ''
-  store.cateModal.isShow = true
-}
 const handleConfirm = () => {
   if (!store.cateModal.label) {
     window.$message.error('请输入分类名称')
@@ -86,7 +80,4 @@ const handleConfirm = () => {
   }
   store.cateModal.isShow = false
 }
-defineExpose({
-  showAdd,
-})
 </script>
diff --git a/frontend/src/components/ItemCard.vue b/frontend/src/components/ItemCard.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
-    <n-card hoverable embedded class="w-full" @contextmenu="handleContextMenu">
-      <div class="w-full flex">
-        <div class="flex-1 flex items-center justify-center">
-          <n-h4 class="m-0">{{ item.label }}</n-h4>
-        </div>
-        <n-button class="ml-4" quaternary circle @click="open(item.value)">
-          <template #icon>
-            <n-icon>
-              <arrow />
-            </n-icon>
-          </template>
-        </n-button>
+    <n-card
+      hoverable
+      embedded
+      class="w-full cursor-pointer"
+      @contextmenu="handleContextMenu"
+      @click="open(item.value)"
+    >
+      <div
+        class="w-full h-full flex-1 flex items-center justify-center"
+
+      >
+        <n-h4 class="m-0">{{ item.label }}</n-h4>
       </div>
     </n-card>
     <n-dropdown

diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts
@@ -24,11 +24,11 @@ export const useStore = defineStore('global', () => {
     prevLabel: '',
   })
   const searchModal = ref<{
-    input: string,
+    input: string
     result: Item[]
   }>({
     input: '',
-    result: []
+    result: [],
   })
   // 加载数据
   const getData = () => {
@@ -43,10 +43,24 @@ export const useStore = defineStore('global', () => {
     } catch (e) {}
     console.log('获取到的列表：', data.value)
   }
+  const getDarkTheme = () => {
+    const storageDarkTheme = window.localStorage.getItem('darkTheme')
+    if (storageDarkTheme) {
+      if (storageDarkTheme === 'true') {
+        darkTheme.value = true
+      } else {
+        darkTheme.value = false
+      }
+    } else {
+      darkTheme.value = false
+    }
+  }
   getData()
+  getDarkTheme()
   watchEffect(() => {
     // 修改data后会立刻保存
     window.localStorage.setItem('data', JSON.stringify(data.value))
+    window.localStorage.setItem('darkTheme', darkTheme.value ? 'true' : 'false')
   })
   return {
     darkTheme,