From 51787354cf25fe173d4b122b517a6738fdc56693 Mon Sep 17 00:00:00 2001
From: yulimchen <yulimchen@gmail.com>
Date: Wed, 26 Apr 2023 00:17:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E6=94=AF=E6=8C=81=E6=B7=B1/?=
 =?UTF-8?q?=E6=B5=85=E8=89=B2=E6=A8=A1=E5=BC=8F=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                 |  4 ++++
 src/components/NavBar/index.vue | 17 +++++++++++++++++
 src/hooks/useToggleDarkMode.ts  |  9 +++++++++
 src/icons/svg/dark.svg          |  1 +
 src/icons/svg/light.svg         |  1 +
 src/layout/index.vue            |  9 +++++----
 src/store/modules/darkMode.ts   | 23 +++++++++++++++++++++++
 src/styles/index.less           |  3 ++-
 src/styles/variables.less       | 12 ++++++++++--
 src/views/demo/index.vue        |  2 +-
 src/views/tools/index.vue       |  2 +-
 11 files changed, 74 insertions(+), 9 deletions(-)
 create mode 100644 src/components/NavBar/index.vue
 create mode 100644 src/hooks/useToggleDarkMode.ts
 create mode 100644 src/icons/svg/dark.svg
 create mode 100644 src/icons/svg/light.svg
 create mode 100644 src/store/modules/darkMode.ts

diff --git a/components.d.ts b/components.d.ts
index da8190e..e50c967 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,12 +7,16 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    NavBar: typeof import('./src/components/NavBar/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
     Tabbar: typeof import('./src/components/Tabbar/index.vue')['default']
     VanButton: typeof import('vant/es')['Button']
     VanCell: typeof import('vant/es')['Cell']
+    VanConfigProvider: typeof import('vant/es')['ConfigProvider']
+    VanIcon: typeof import('vant/es')['Icon']
+    VanNavBar: typeof import('vant/es')['NavBar']
     VanSpace: typeof import('vant/es')['Space']
     VanTabbar: typeof import('vant/es')['Tabbar']
     VanTabbarItem: typeof import('vant/es')['TabbarItem']
diff --git a/src/components/NavBar/index.vue b/src/components/NavBar/index.vue
new file mode 100644
index 0000000..c852551
--- /dev/null
+++ b/src/components/NavBar/index.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useDarkMode, useToggleDarkMode } from "@/hooks/useToggleDarkMode";
+
+const onClickRight = () => {
+  useToggleDarkMode();
+};
+</script>
+
+<template>
+  <van-nav-bar fixed placeholder @click-right="onClickRight">
+    <template #right>
+      <svg-icon class="text-[18px]" :name="useDarkMode() ? 'light' : 'dark'" />
+    </template>
+  </van-nav-bar>
+</template>
+
+<style scoped></style>
diff --git a/src/hooks/useToggleDarkMode.ts b/src/hooks/useToggleDarkMode.ts
new file mode 100644
index 0000000..783fbee
--- /dev/null
+++ b/src/hooks/useToggleDarkMode.ts
@@ -0,0 +1,9 @@
+import { useDarkModeStoreHook } from "@/store/modules/darkMode";
+
+export function useDarkMode() {
+  return useDarkModeStoreHook().darkMode;
+}
+
+export function useToggleDarkMode() {
+  useDarkModeStoreHook().toggleDarkMode();
+}
diff --git a/src/icons/svg/dark.svg b/src/icons/svg/dark.svg
new file mode 100644
index 0000000..4dc0bf0
--- /dev/null
+++ b/src/icons/svg/dark.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681314397470" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2282" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M448.22 48C704.358 48 912 255.74 912 512l-0.062 7.673C907.842 772.394 701.797 976 448.22 976c-110.645 0-198.866-26.169-264.663-78.506a32 32 0 0 1-4.325-4.159c-11.419-13.256-10.058-33.192 2.962-44.78l0.399-0.35 2.742-2.383c89.13-78.201 134.016-188.043 134.66-329.525L320 512c0.253-143.557-44.635-254.831-134.665-333.822l-2.742-2.384c-13.39-11.534-14.895-31.74-3.36-45.13a32 32 0 0 1 4.324-4.158C249.354 74.17 337.575 48 448.22 48z m0 64c-78.634 0-142.266 14.443-192.055 42.56l-1.809 1.03 0.175 0.18c85.695 88.653 128.775 207.05 129.462 351.494l0.007 4.825-0.007 4.499c-0.65 143.074-42.893 260.596-126.9 348.969l-2.737 2.852 1.809 1.031c49.174 27.77 111.852 42.201 189.149 42.56h2.906c216.135 0 392.63-171.775 399.568-386.834l0.154-6.358 0.057-6.946-0.053-6.477C844.452 289.716 670.368 115.55 454.83 112.054l-6.61-0.054z" fill="#000000" p-id="2283"></path></svg>
\ No newline at end of file
diff --git a/src/icons/svg/light.svg b/src/icons/svg/light.svg
new file mode 100644
index 0000000..192092d
--- /dev/null
+++ b/src/icons/svg/light.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1681314392506" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2129" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 224c159.058 0 288 128.942 288 288S671.058 800 512 800 224 671.058 224 512s128.942-288 288-288z m0 64c-123.712 0-224 100.288-224 224s100.288 224 224 224 224-100.288 224-224-100.288-224-224-224z m0 576c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32zM263.098 760.902c12.497 12.496 12.497 32.758 0 45.254l-45.254 45.255c-12.497 12.497-32.758 12.497-45.255 0s-12.497-32.758 0-45.255l45.255-45.254c12.496-12.497 32.758-12.497 45.254 0z m543.058 0l45.255 45.254c12.497 12.497 12.497 32.758 0 45.255s-32.758 12.497-45.255 0l-45.254-45.255c-12.497-12.496-12.497-32.758 0-45.254 12.496-12.497 32.758-12.497 45.254 0zM128 480c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H64c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h64z m832 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32h-64c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h64zM217.844 172.589l45.254 45.255c12.497 12.496 12.497 32.758 0 45.254-12.496 12.497-32.758 12.497-45.254 0l-45.255-45.254c-12.497-12.497-12.497-32.758 0-45.255s32.758-12.497 45.255 0z m633.567 0c12.497 12.497 12.497 32.758 0 45.255l-45.255 45.254c-12.496 12.497-32.758 12.497-45.254 0-12.497-12.496-12.497-32.758 0-45.254l45.254-45.255c12.497-12.497 32.758-12.497 45.255 0zM512 32c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32z" fill="#000000" p-id="2130"></path></svg>
\ No newline at end of file
diff --git a/src/layout/index.vue b/src/layout/index.vue
index cbf7932..93e6905 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import Tabbar from "@/components/Tabbar/index.vue";
+import NavBar from "@/components/NavBar/index.vue";
 import { useCachedViewStoreHook } from "@/store/modules/cachedView";
+import { useDarkMode } from "@/hooks/useToggleDarkMode";
 import { computed } from "vue";
 
 const cachedViews = computed(() => {
@@ -10,16 +12,15 @@ const cachedViews = computed(() => {
 
 <template>
   <div class="app-wrapper">
-    <div class="app-wrapper__content">
+    <van-config-provider :theme="useDarkMode() ? 'dark' : 'light'">
+      <nav-bar />
       <router-view v-slot="{ Component }">
         <keep-alive :include="cachedViews">
           <component :is="Component" />
         </keep-alive>
       </router-view>
-    </div>
-    <div class="app-wrapper__footer">
       <tabbar />
-    </div>
+    </van-config-provider>
   </div>
 </template>
 
diff --git a/src/store/modules/darkMode.ts b/src/store/modules/darkMode.ts
new file mode 100644
index 0000000..1370153
--- /dev/null
+++ b/src/store/modules/darkMode.ts
@@ -0,0 +1,23 @@
+import { defineStore } from "pinia";
+import { store } from "@/store";
+
+export const useDarkModeStore = defineStore({
+  id: "dark-mode",
+  state: () => ({
+    darkMode: false
+  }),
+  actions: {
+    toggleDarkMode() {
+      this.darkMode = !this.darkMode;
+      if (this.darkMode) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    }
+  }
+});
+
+export function useDarkModeStoreHook() {
+  return useDarkModeStore(store);
+}
diff --git a/src/styles/index.less b/src/styles/index.less
index 4e60142..ee5ef8e 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -6,7 +6,8 @@ body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
-  color: var(--color-text);
+  color: var(--van-text-color);
+  background-color: var(--color-background-2);
 }
 
 html {
diff --git a/src/styles/variables.less b/src/styles/variables.less
index ccf8d4c..ce2bb0a 100644
--- a/src/styles/variables.less
+++ b/src/styles/variables.less
@@ -1,3 +1,11 @@
 :root {
-  --color-text: #2c3e50;
-}
\ No newline at end of file
+  --color-text: var(--van-text-color, #323233);
+  --color-background-2: var(--van-background-2, #fff);
+  --color-block-background: var(--van-border-color, #ebedf0);
+}
+
+html.dark {
+  --color-text: var(--van-text-color, #f5f5f5);
+  --color-background-2: var(--van-background-2, #1c1c1e);
+  --color-block-background: var(--van-border-color, #3a3a3c);
+}
diff --git a/src/views/demo/index.vue b/src/views/demo/index.vue
index 4fe9e87..16295ef 100644
--- a/src/views/demo/index.vue
+++ b/src/views/demo/index.vue
@@ -38,7 +38,7 @@ const contentList = reactive([
       </a>
     </div>
     <div
-      class="text-[14px] py-[2px] px-[10px] rounded-[4px] bg-[#eee] mt-[14px]"
+      class="text-[14px] py-[2px] px-[10px] rounded-[4px] bg-[var(--color-block-background)] mt-[14px]"
     >
       <p class="my-[14px] leading-[24px]">
         🌱 基于 Vue3 全家桶、TypeScript、Vite 构建工具，开箱即用的 H5
diff --git a/src/views/tools/index.vue b/src/views/tools/index.vue
index 6a4db79..f2c329d 100644
--- a/src/views/tools/index.vue
+++ b/src/views/tools/index.vue
@@ -32,7 +32,7 @@ const handleErrorReq = () => {
       <van-button type="danger" @click="handleErrorReq">失败请求</van-button>
     </van-space>
     <div
-      class="text-[14px] py-[2px] px-[10px] rounded-[4px] bg-[#eee] mt-[14px]"
+      class="text-[14px] py-[2px] px-[10px] rounded-[4px] bg-[var(--color-block-background)] mt-[14px]"
     >
       <p class="my-[14px] leading-[24px]">
         {{ showList }}