Merge pull request #6 from Aisen60/0.2.3

0.2.3

package.json

@@ -36,8 +36,8 @@
     "lint:eslint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
-    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.cjs",
-    "svgo-color": "svgo -f src/icons/svg",
+    "svgo:single": "node src/icons/build/single.js",
+    "svgo:multiple": "node src/icons/build/multiple.js",
     "lint:lint-staged": "lint-staged",
     "prepare": "husky"
   },
@@ -50,7 +50,7 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
     "umi-request": "^1.4.0",
-    "vant": "^4.8.7",
+    "vant": "^4.9.0",
     "vconsole": "^3.15.1",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
@@ -68,6 +68,7 @@
     "autoprefixer": "^10.4.19",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
+    "fs-extra": "^11.2.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "npm-run-all2": "^6.1.2",

src/icons/build/multiple-config.cjs

@@ -0,0 +1,11 @@
+// svg 压缩配置文件
+module.exports = {
+  plugins: [
+    {
+      name: 'removeAttrs',
+      params: {
+        attrs: '(id|class|t|p-id|width|height)'
+      }
+    }
+  ]
+};

src/icons/build/multiple.js

@@ -0,0 +1,3 @@
+import { runMultiple } from './utils.js';
+
+runMultiple();

src/icons/build/single.js

@@ -0,0 +1,3 @@
+import { runSingle } from './utils.js';
+
+runSingle();

src/icons/build/utils.js

@@ -0,0 +1,51 @@
+import path from 'path';
+import { spawn } from 'child_process';
+import fs from 'fs-extra';
+
+const SVG_OUTPUT = 'src/icons/svg';
+
+const SINGLE_DIR = 'src/icons/draft/single';
+
+const SINGLE_CONFIG = 'src/icons/build/single-config.cjs';
+
+const MULTIPLE_DIR = 'src/icons/draft/multiple';
+
+const MULTIPLE_CONFIG = 'src/icons/build/multiple-config.cjs';
+
+const clear = (dir) => {
+  fs.readdir(dir)
+    .then((files) => {
+      const deletePromises = files.map((file) => {
+        if (file === '.gitkeep') return;
+        return fs.unlink(path.join(dir, file));
+      });
+      return Promise.all(deletePromises);
+    })
+    .catch((err) => console.error(err));
+};
+
+export const runSingle = () => {
+  const cmd = spawn('npx', [`svgo -f ${SINGLE_DIR} -o ${SVG_OUTPUT} --config=${SINGLE_CONFIG}`], {
+    stdio: 'inherit',
+    shell: true
+  });
+
+  cmd.on('close', () => {
+    clear(SINGLE_DIR);
+  });
+};
+
+export const runMultiple = () => {
+  const cmd = spawn(
+    'npx',
+    [`svgo -f ${MULTIPLE_DIR} -o ${SVG_OUTPUT} --config=${MULTIPLE_CONFIG}`],
+    {
+      stdio: 'inherit',
+      shell: true
+    }
+  );
+
+  cmd.on('close', () => {
+    clear(MULTIPLE_DIR);
+  });
+};

src/layout/index.vue

@@ -30,7 +30,7 @@
 
           <template #nav-theme="{ props }">
             <SvgIcon
-              :name="appStore.theme === 'dark' ? 'nav-light' : 'nav-dark'"
+              :name="`nav-${appStore.theme}`"
               :color="
                 props.active
                   ? 'var(--van-tabbar-item-active-color) '
@@ -86,7 +86,7 @@ const containerStyles = computed(() => {
   return styles;
 });
 
-const tabberOption: LayoutNavProps['option'] = [
+const tabberOption = ref<LayoutNavProps['option']>([
   {
     title: '主页',
     name: 'nav-home',
@@ -115,9 +115,11 @@ const tabberOption: LayoutNavProps['option'] = [
       name: 'Theme'
     }
   }
-];
+]);
 
 const handleChange = (v: TabbarItemProps['name']) => {
+  const htmlDom = document.querySelector('html') as HTMLHtmlElement;
+  htmlDom.scrollTop = 0;
   console.log('tabbar name:', v);
 };
 </script>

src/stores/modules/app.ts

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia';
-import { useStorage, usePreferredDark } from '@vueuse/core';
-
+import { useStorage, useColorMode } from '@vueuse/core';
 import { AppEnum } from '@/enums/appEnum';
 import { store } from '@/stores';
 
@@ -9,12 +8,16 @@ import type { AppTheme } from '@/types';
 export const useAppStore = defineStore(
   'appStore',
   () => {
-    const systemDark = usePreferredDark();
+    const { system: systemColor, store: storeColor } = useColorMode();
+
+    const storageColor = useStorage<AppTheme>(AppEnum.APP_THEME, storeColor.value);
 
-    const theme = ref(useStorage<AppTheme>(AppEnum.APP_THEME, systemDark.value ? 'dark' : 'light'));
+    const theme = computed(() => {
+      return storageColor.value == 'auto' ? systemColor.value : storageColor.value;
+    });
 
     const setTheme = (appTheme: AppTheme) => {
-      theme.value = appTheme;
+      storageColor.value = appTheme;
     };
 
     const watchTheme = () => {
@@ -30,7 +33,9 @@ export const useAppStore = defineStore(
     };
 
     return {
-      systemDark,
+      systemColor,
+      storeColor,
+      storageColor,
       theme,
       setTheme,
       watchTheme

src/types/app.ts

@@ -1,3 +1 @@
-import type { ConfigProviderTheme } from 'vant';
-
-export type AppTheme = ConfigProviderTheme;
+export type AppTheme = 'light' | 'dark' | 'auto';

src/utils/request.ts

@@ -54,7 +54,7 @@ const errorHandler = (error: ResponseError) => {
     let tipMsg: string;
 
     if (response && response.__code) {
-      tipMsg = `<p>错误信息：${response.__msg}</p><p>错误码：${response.__code}</p>`;
+      tipMsg = `<p style="text-align: left;">错误信息：${response.__msg}</p><p style="text-align: left;padding-top: 10px;">错误码：${response.__code}</p>`;
     } else if (type === 'AbortError') {
       tipMsg = '用户取消请求';
     } else {

src/views/info.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="project-info">
+  <div class="pb-5 project-info">
     <van-nav-bar title="项目信息" />
 
     <div class="project-info-wrap">

src/views/theme.vue

@@ -2,11 +2,23 @@
   <div class="theme">
     <van-nav-bar title="主题切换" />
 
-    <van-cell center :title="title">
-      <template #right-icon>
-        <van-switch v-model="darkMode" @change="changeTheme" />
-      </template>
-    </van-cell>
+    <van-field
+      v-model="fieldValue"
+      is-link
+      readonly
+      label="主题"
+      placeholder="选择主题"
+      @click="showPicker = true"
+    />
+
+    <van-popup v-model:show="showPicker" round position="bottom">
+      <van-picker
+        title="选择主题"
+        :columns="columns"
+        @cancel="showPicker = false"
+        @confirm="onConfirm"
+      />
+    </van-popup>
 
     <p class="p-5 leading-7">
       Vant 4 开始支持动态主题切换和深色模式，具体使用请查看 Vant 4
@@ -33,26 +45,43 @@
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from 'pinia';
-
 import { useAppStore } from '@/stores/modules/app';
 
+import type { AppTheme } from '@/types';
+
 defineOptions({
   name: 'ThemeIndex'
 });
 
+type Column = {
+  text: string;
+  value: AppTheme;
+};
+
 const appStore = useAppStore();
 
-const { theme } = storeToRefs(appStore);
+const fieldValue = ref('');
+
+const init = () => {
+  const column = columns.value.find((it) => it.value === appStore.storageColor);
+  fieldValue.value = column?.text || '';
+};
 
-const title = computed(() => (theme.value === 'dark' ? '切换亮色模式' : '切换深色模式'));
+const showPicker = ref(false);
 
-const darkMode = ref(theme.value === 'dark');
+const columns = ref<Column[]>([
+  { text: '浅色', value: 'light' },
+  { text: '深色', value: 'dark' },
+  { text: '跟随系统', value: 'auto' }
+]);
 
-const changeTheme = () => {
-  const t = unref(theme) === 'light' ? 'dark' : 'light';
-  appStore.setTheme(t);
+const onConfirm = ({ selectedOptions }) => {
+  showPicker.value = false;
+  fieldValue.value = selectedOptions[0].text;
+  appStore.setTheme(selectedOptions[0].value);
 };
+
+init();
 </script>
 
 <style lang="scss" scoped></style>

types/components.d.ts

@@ -14,7 +14,10 @@ declare module 'vue' {
     VanCell: (typeof import('vant/es'))['Cell'];
     VanCellGroup: (typeof import('vant/es'))['CellGroup'];
     VanConfigProvider: (typeof import('vant/es'))['ConfigProvider'];
+    VanField: (typeof import('vant/es'))['Field'];
     VanNavBar: (typeof import('vant/es'))['NavBar'];
+    VanPicker: (typeof import('vant/es'))['Picker'];
+    VanPopup: (typeof import('vant/es'))['Popup'];
     VanSwitch: (typeof import('vant/es'))['Switch'];
     VanTabbar: (typeof import('vant/es'))['Tabbar'];
     VanTabbarItem: (typeof import('vant/es'))['TabbarItem'];