feat: add dark mode close #6

Author: cwandev

.eslintrc.js

@@ -21,8 +21,6 @@ module.exports = {
     'import/namespace': [2, { allowComputed: true }],
     'import/no-named-as-default-member': 'off',
     'import/no-unresolved': 'off',
-    '@typescript-eslint/consistent-type-imports': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
     // enUS: all rules docs https://eslint.org/docs/rules/
     // zhCN: 所有规则文档 https://eslint.bootcss.com/docs/rules/
     // 基础规则 全部 ES 项目通用
@@ -35,6 +33,12 @@ module.exports = {
     'no-unused-vars': ['off'],
     // 强制在代码块中开括号前和闭括号后有空格
     'block-spacing': ['error', 'always'],
-    'object-curly-spacing': ['error', 'always']
+    'object-curly-spacing': ['error', 'always'],
+    /* typescript */
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/consistent-type-imports': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
   },
 }

components.d.ts

@@ -6,8 +6,13 @@ import '@vue/runtime-core'
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     VanButton: typeof import('vant/es')['Button']
+    VanCell: typeof import('vant/es')['Cell']
+    VanCellGroup: typeof import('vant/es')['CellGroup']
     VanConfigProvider: typeof import('vant/es')['ConfigProvider']
+    VanIcon: typeof import('vant/es')['Icon']
+    VanNavBar: typeof import('vant/es')['NavBar']
     VanSwitch: typeof import('vant/es')['Switch']
+    VanTag: typeof import('vant/es')['Tag']
   }
 }
 

src/App.vue

@@ -1,26 +1,30 @@
 <template>
   <van-config-provider :theme="theme">
-    <van-switch v-model="checked" />
     <router-view />
   </van-config-provider>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 import type { ConfigProviderTheme } from 'vant'
+import { localStorage } from '@/utils/local-storage'
+import { useStore } from '@/stores'
 
-const theme = ref<ConfigProviderTheme>('light')
-const checked = ref<boolean>(false)
+const store = useStore()
+const res = localStorage.get('theme')
+const theme = ref<ConfigProviderTheme>(res)
+const mode = computed(() => store.mode)
 
-watch(checked,() => {
-  if(checked.value) {
+watch(mode, (val) => {
+  if(val === 'dark') {
     theme.value = 'dark'
     document.querySelector('html')
-    .setAttribute('data-theme', 'data-theme-dark')
+    .setAttribute('data-theme', 'dark')
   } else {
     theme.value = 'light'
     document.querySelector('html')
-    .setAttribute('data-theme', 'data-theme-light')
+    .setAttribute('data-theme', 'light')
   }
-})
+}, { immediate: true })
+
 </script>

src/api/dashboard/workplace.ts src/api/index.tssrc/api/dashboard/workplace.ts renamed to src/api/index.ts

@@ -1,5 +1,5 @@
-import request from '@/utils/request'
-
-export async function queryProjectNotice(): Promise<any> {
-  return request('/project/notice')
+import request from '@/utils/request'
+
+export async function queryProjectNotice(): Promise<any> {
+  return request('/project/notice')
 }

src/app.less

@@ -13,7 +13,7 @@ body {
   box-sizing: border-box;
 }
 
-[data-theme='data-theme-dark'] {
+[data-theme='dark'] {
   &,
   * {
     color-scheme: dark !important;

src/router/index.ts

@@ -1,30 +1,34 @@
-
+// https://router.vuejs.org/zh/
 import { createRouter, createWebHistory } from 'vue-router'
 import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 NProgress.configure({ showSpinner: true })
 
 // 导入路由组件
-import Dashboard from '../views/dashboard/analysis/index.vue'
-import Workplace from '../views/dashboard/workplace/index.vue'
+import mian from '@/views/index.vue'
+import mock from '@/views/mock/index.vue'
 
 // 定义路由，每个路由都需要映射到一个组件
 const routes = [
   {
     path: '/',
-    name: 'dashboard',
-    component: Dashboard
+    name: 'main',
+    component: mian
   }, {
-    path: '/workplace',
-    name: 'workplace',
-    component: Workplace
+    path: '/mock',
+    name: 'mock',
+    component: mock
   }
 ]
 
 // 创建路由实例并传递 `routes` 配置
 const router = createRouter({
   history: createWebHistory(),
-  routes
+  routes,
+  scrollBehavior() {
+    // 始终滚动到顶部
+    return { top: 0 }
+  },
 })
 
 router.beforeEach((_to, _from, next) => {

src/stores/index.ts

@@ -0,0 +1,8 @@
+import { defineStore } from 'pinia'
+
+export const useStore = defineStore({
+	id: 'index',
+	state: () => ({
+		mode: 'light'
+	})
+})

src/store/mutation-type.ts src/stores/mutation-type.tssrc/store/mutation-type.ts renamed to src/stores/mutation-type.ts

@@ -2,7 +2,7 @@ import type { AxiosRequestConfig, AxiosError } from 'axios'
 import axios, { AxiosResponse } from 'axios'
 import type { ResponseBody } from '@/api/typing'
 import { localStorage } from '@/utils/local-storage'
-import { STORAGE_TOKEN_KEY } from '@/store/mutation-type'
+import { STORAGE_TOKEN_KEY } from '@/stores/mutation-type'
 import { Notify } from 'vant'
 
 // 这里是用于设定请求后端时，所用的 Token KEY