wip: 深色主题完善

.eslintrc

@@ -59,6 +59,7 @@
     "@typescript-eslint/no-unused-vars": [0],
     "@typescript-eslint/no-var-requires": [0],
     "import/no-unresolved": "off",
-    "no-unused-vars": "off"
+    "no-unused-vars": "off",
+    "no-useless-escape": [1]
   },
 }

build/vite-plugin-uni-provider.ts

@@ -0,0 +1,78 @@
+/*
+ * @Author: wjc
+ * @Date: 2024-07-10 11:21:52
+ * @LastEditors: wjc
+ * @LastEditTime: 2024-07-10 11:23:48
+ * @Description:
+ */
+import path from 'path'
+import c from 'picocolors'
+import normallize from 'normalize-path'
+
+export interface Options {
+  pagesRE: RegExp
+  name: string
+  configFile: string
+  pagesBasePath: string
+  configPath: string
+  pluginName: string
+  DEBUG: boolean
+}
+
+export default function (options: Partial<Options> = {}) {
+  let {
+    pagesRE = /src[\/\\]pages[\/\\]((?!.+(component(s)?|static).+).)*\.vue$/,
+    name = 'sys',
+    configFile = 'vite.config.js',
+    pagesBasePath = 'src/pages',
+    pluginName = 'uni-provider',
+    DEBUG = process.env.DEBUG,
+  } = options
+
+  return {
+    name: 'vite-plugin-' + pluginName,
+    enforce: 'pre',
+    transform(code, id) {
+      id = normalizePagePathFromBase(id)
+      if (pagesRE.test(normalizePagePathFromBase(id))) {
+        // 三种情况:
+        // 1. 前后都存在页面根级组件 => 不做操作
+        // 2. 页面根级组件只存在于第一行 => 第一行修正结束符,最后一行添加结束符
+        // 3. 前后都不存在页面根级组件 => 第一行添加开始符,最后一行添加结束符
+        // 其他情况直接语法报错,不需要处理
+        let startTag = new RegExp(`\<${name}`).test(code)
+        let endTag = new RegExp(`\<\/${name}`).test(code)
+        if (startTag && !endTag)
+          code = code
+            .replace(new RegExp(`(?<=\<${name}.*?)(\/\>|>.*?\<\/${name}\>)`), '>')
+            .replace(/([\s\S]*)(\<\/template\>)/, `$1</${name}>\n</template>`)
+        if (!startTag && !endTag)
+          code = code
+            .replace('<template>', `<template>\n<${name}>`)
+            .replace(/([\s\S]*)(\<\/template\>)/, `$1</${name}>\n</template>`)
+        debug(c.yellow(id), `startTag: ${startTag}`, `endTag: ${endTag}`)
+      }
+      return { code, map: null }
+    },
+  }
+
+  function normalizePagePath(file) {
+    return normallize(path.relative(pagesBasePath, file))
+  }
+
+  function normalizePagePathFromBase(file) {
+    return normallize(path.relative(process.cwd(), file))
+  }
+
+  function log(...args) {
+    console.log(c.dim(new Date().toLocaleTimeString()), c.bold(c.red(`[${pluginName}]`)), ...args)
+  }
+  function debug(...args) {
+    DEBUG &&
+      console.log(
+        c.dim(new Date().toLocaleTimeString()),
+        c.bold(c.red(`[debug:${pluginName}]`)),
+        ...args
+      )
+  }
+}

package.json

@@ -66,6 +66,8 @@
     "eslint-plugin-vue": "^9.26.0",
     "husky": "8.0.3",
     "lint-staged": "^15.2.5",
+    "normalize-path": "^3.0.0",
+    "picocolors": "^1.0.1",
     "postcss": "^8.4.38",
     "postcss-html": "^1.7.0",
     "postcss-scss": "^4.0.9",

pnpm-lock.yaml

@@ -135,6 +135,12 @@ importers:
       lint-staged:
         specifier: ^15.2.5
         version: 15.2.5
+      normalize-path:
+        specifier: ^3.0.0
+        version: 3.0.0
+      picocolors:
+        specifier: ^1.0.1
+        version: 1.0.1
       postcss:
         specifier: ^8.4.38
         version: 8.4.38

src/components/MNavBar/index.vue

@@ -2,22 +2,21 @@
  * @Author: wjc
  * @Date: 2024-07-03 10:35:44
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-09 10:48:54
+ * @LastEditTime: 2024-07-10 16:12:32
  * @Description: 
 -->
 <template>
-  <up-navbar
-    ref="mNavBarRef"
-    v-bind="$attrs"
-    class="m-navbar"
-    :title="title"
-    placeholder
-    :bg-color="bgColor"
-    auto-back
-  >
+  <up-navbar ref="mNavBarRef" v-bind="$attrs" class="m-navbar" placeholder :bg-color="bgColor">
+    <template #left>
+      <view v-if="notBack"></view>
+      <view v-else class="i-ep-arrow-left wh-24px cursor-pointer" @click="goBack"></view>
+    </template>
+    <template #center>
+      <view class="m-navbar-title">{{ title }}</view>
+    </template>
     <template #right>
       <slot name="right">
-        <view v-if="rightMenu" class="right-box">
+        <view v-if="rightMenu && rightMenu.length > 0" class="right-box">
           <view class="i-ep-more-filled wh-24px cursor-pointer" @click="triggerMore"></view>
           <view v-if="showMore" class="overlay" @click="() => (showMore = false)"></view>
           <view v-if="showMore" class="menu-box">
@@ -51,10 +50,16 @@
     defineProps<{
       title?: string
       placeholder?: boolean
+      notBack?: boolean
       bgColor?: string
       rightMenu?: RightMenuItem[]
     }>(),
-    { boolean: true, bgColor: '#fff' }
+    {
+      title: '',
+      notBack: false,
+      bgColor: 'var(--bg-card)',
+      rightMenu: () => [],
+    }
   )
   const emits = defineEmits<{
     (e: 'right-click', command: string): void
@@ -63,6 +68,10 @@
   const mNavBarRef = ref()
   const showMore = ref(false)
 
+  const goBack = () => {
+    uni.navigateBack()
+  }
+
   const triggerMore = () => {
     showMore.value = !showMore.value
   }
@@ -75,6 +84,9 @@
 
 <style scoped lang="scss">
   .m-navbar {
+    .m-navbar-title {
+      @apply text-16px color-text-1;
+    }
     .right-box {
       @apply relative w-full z-1;
       .overlay {
@@ -82,7 +94,7 @@
         background: rgba(0, 0, 0, 0);
       }
       .menu-box {
-        @apply absolute right-0px z-10 flex flex-col gap-6px w-auto whitespace-nowrap rounded-6px bg-white;
+        @apply absolute right-0px z-10 flex flex-col gap-6px w-auto whitespace-nowrap rounded-6px bg-bg-card;
         box-shadow: 0px 0px 10px rgba(0, 0, 0, 20%);
         .menu-item {
           @apply flex items-center gap-8px h-full flex-1 px-16px py-8px text-left;

src/components/MPage/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-06-18 11:40:55
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-09 17:24:26
+ * @LastEditTime: 2024-07-10 15:22:20
  * @Description: 
 -->
 <template>
@@ -32,8 +32,10 @@
   .m-page {
     @apply relative flex-1 h-full p-12px overflow-y-auto;
     background: linear-gradient(180deg, var(--color-primary-2) 0%, var(--bg-page) 100%);
-    :deep(.m-footer) {
-      padding-bottom: 25px;
+    &:has(.m-tabbar) {
+      :deep(.m-footer) {
+        padding-bottom: 25px;
+      }
     }
   }
 </style>

src/components/MTabBar/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-07-08 16:31:21
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-08 17:56:11
+ * @LastEditTime: 2024-07-10 15:18:29
  * @Description: 
 -->
 <template>
@@ -10,6 +10,7 @@
     :value="selected"
     class="m-tabbar"
     :fixed="true"
+    :z-index="99"
     :placeholder="true"
     :safe-area-inset-bottom="true"
     @change="handleChange"
@@ -50,8 +51,12 @@
 <style scoped lang="scss">
   .m-tabbar {
     @apply h-50px;
-  }
-  .tabbar-icon {
-    @apply wh-32px;
+    :deep(.u-tabbar__content) {
+      @apply bg-bg-card;
+      border-color: var(--border-color) !important;
+    }
+    .tabbar-icon {
+      @apply wh-32px;
+    }
   }
 </style>

src/pages.json

@@ -2,6 +2,7 @@
 	"easycom": {
 		"autoscan": true,
 		"custom": {
+			"^sys$": "@/sys.vue",
 			"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
 			"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
 			"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue",
@@ -36,14 +37,14 @@
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
 			"path": "pages/splash/index",
-      "layout": false,
+			"layout": false,
 			"style": {
 				"navigationStyle": "custom"
 			}
 		},
 		{
 			"path": "pages/login/index",
-      "layout": false,
+			"layout": false,
 			"style": {
 				"navigationStyle": "custom"
 			}
@@ -51,7 +52,7 @@
 		{
 			"path": "pages/mine/index",
 			"style": {
-				"navigationStyle": "custom"
+				"navigationBarTitleText": "我的"
 			}
 		},
 		{
@@ -63,7 +64,7 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -74,7 +75,9 @@
 		},
 		{
 			"path": "pages/test/index",
-			"actions": ["login"],
+			"actions": [
+				"login"
+			],
 			"layout": true,
 			"style": {
 				"navigationStyle": "custom"

src/pages/index/index.vue

@@ -2,10 +2,11 @@
  * @Author: wjc
  * @Date: 2019-08-22 19:41:20
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-09 17:56:17
+ * @LastEditTime: 2024-07-10 16:08:13
  * @Description: 
 -->
 <template>
+  <MNavBar title="首页" :not-back="true"></MNavBar>
   <view class="content">
     <image class="logo" src="/static/logo.png"></image>
     <view class="text-area">

src/pages/mine/index.vue

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-06-17 16:02:59
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-09 17:36:34
+ * @LastEditTime: 2024-07-10 11:40:21
  * @Description: 
 -->
 <template>
@@ -35,7 +35,53 @@
   const userStore = useUserStore()
   const appStore = useAppStore()
   const logoutShow = ref(false)
-  const darkValue = ref(false)
+
+  const originNavBarStyle = computed(() => {
+    if (appStore.isDark) {
+      return {
+        frontColor: '#ffffff',
+        backgroundColor: '#1a1a1a',
+        animation: {
+          duration: 0,
+          timingFunc: 'easeIn',
+        },
+      }
+    } else {
+      return {
+        frontColor: '#000000',
+        backgroundColor: '#f8f8f8',
+        animation: {
+          duration: 0,
+          timingFunc: 'easeIn',
+        },
+      }
+    }
+  })
+
+  // watch(
+  //   () => appStore.isDark,
+  //   (value) => {
+  //     if (value) {
+  //       uni.setNavigationBarColor({
+  //         frontColor: '#ffffff',
+  //         backgroundColor: '#1a1a1a',
+  //         animation: {
+  //           duration: 0,
+  //           timingFunc: 'easeIn',
+  //         },
+  //       })
+  //     } else {
+  //       uni.setNavigationBarColor({
+  //         frontColor: '#000000',
+  //         backgroundColor: '#f8f8f8',
+  //         animation: {
+  //           duration: 0,
+  //           timingFunc: 'easeIn',
+  //         },
+  //       })
+  //     }
+  //   }
+  // )
 
   const handleCancel = () => {
     logoutShow.value = false
@@ -48,10 +94,6 @@
     onLogout()
   }
 
-  // const changeDark = (value: boolean) => {
-  //   appStore.isDark = value
-  // }
-
   const onLogout = () => {
     userStore.logoutAction().then((res) => {
       if (res) {

src/static/styles/vars.scss

@@ -11,6 +11,8 @@
 
   --bg-page: #f1f1f3;
   --bg-card: #fff;
+
+  --border-color: #e3e8f7;
 }
 
 .dark {
@@ -19,5 +21,7 @@
   --bg-page: #242424;
   --bg-card: #1a1a1a;
 
+  --border-color: rgba(84, 84, 84, 0.48);
+
   --text-color-1: rgba(255, 255, 255, 0.87);
 }

src/sys.vue

@@ -0,0 +1,35 @@
+<template>
+  <page-meta>
+    <navigation-bar v-bind="originNavBarStyle" />
+  </page-meta>
+  <slot></slot>
+</template>
+
+<script setup lang="ts">
+  import { useAppStore } from '@/stores/modules/appStore'
+
+  defineOptions({ name: 'Sys' })
+
+  const appStore = useAppStore()
+  const originNavBarStyle = computed(() => {
+    if (appStore.isDark) {
+      return {
+        frontColor: '#ffffff',
+        backgroundColor: '#1a1a1a',
+        animation: {
+          duration: 0,
+          timingFunc: 'easeIn',
+        },
+      }
+    } else {
+      return {
+        frontColor: '#000000',
+        backgroundColor: '#f8f8f8',
+        animation: {
+          duration: 0,
+          timingFunc: 'easeIn',
+        },
+      }
+    }
+  })
+</script>

vite.config.ts

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Date: 2024-05-27 10:17:11
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-01 10:07:07
+ * @LastEditTime: 2024-07-10 11:56:30
  * @Description:
  */
 import path from 'node:path'
@@ -16,6 +16,8 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import UniLayouts from '@uni-helper/vite-plugin-uni-layouts'
 // import UniPages from '@uni-helper/vite-plugin-uni-pages'
 
+import UniProvider from './build/vite-plugin-uni-provider'
+
 const root = process.cwd()
 
 function pathResolve(dir: string) {
@@ -44,6 +46,8 @@ export default defineConfig(({ mode }) => {
       uni(),
       UniLayouts(),
       // UniPages(),
+      //自动注册页面全局组件
+      UniProvider(),
       UnoCSS(),
       createSvgIconsPlugin({
         iconDirs: [pathResolve('src/static/icons')],