From d48812821ff66647ef01d396f5d6142ceaf71e25 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Fri, 1 Aug 2025 14:37:45 +0800
Subject: [PATCH] =?UTF-8?q?wip:=20=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components.d.ts | 5 +
src/App.vue | 2 -
src/composables/types/theme.ts | 10 -
src/composables/useTheme.ts | 163 ++-----
src/layouts/default.vue | 2 +-
src/layouts/tabbar.vue | 2 +-
src/pages.json | 18 +-
src/pages/login/index.vue | 2 +-
src/pages/mine/index.vue | 5 +-
src/pages/mine/settings/agreement/index.vue | 16 +-
src/pages/mine/settings/index.vue | 12 +-
src/pages/mine/settings/theme/index.vue | 458 ++++++--------------
src/store/modules/theme.store.ts | 102 +++--
src/types/auto-imports.d.ts | 21 +-
src/types/global.d.ts | 11 +
src/types/uni-mini-router.d.ts | 12 -
src/types/uni-pages.d.ts | 35 ++
src/types/virtual-uni-pages.d.ts | 16 -
src/uni.scss | 66 ---
src/utils/theme.ts | 33 --
tsconfig.json | 2 +-
vite.config.ts | 11 +-
22 files changed, 355 insertions(+), 649 deletions(-)
delete mode 100644 src/types/uni-mini-router.d.ts
create mode 100644 src/types/uni-pages.d.ts
delete mode 100644 src/types/virtual-uni-pages.d.ts
delete mode 100644 src/utils/theme.ts
diff --git a/components.d.ts b/components.d.ts
index 70bedb6..f7d65f8 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -21,11 +21,16 @@ declare module 'vue' {
WdCard: typeof import('wot-design-uni/components/wd-card/wd-card.vue')['default']
WdCell: typeof import('wot-design-uni/components/wd-cell/wd-cell.vue')['default']
WdCellGroup: typeof import('wot-design-uni/components/wd-cell-group/wd-cell-group.vue')['default']
+ WdCollapse: typeof import('wot-design-uni/components/wd-collapse/wd-collapse.vue')['default']
+ WdCollapseItem: typeof import('wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue')['default']
WdConfigProvider: typeof import('wot-design-uni/components/wd-config-provider/wd-config-provider.vue')['default']
WdDivider: typeof import('wot-design-uni/components/wd-divider/wd-divider.vue')['default']
+ WdForm: typeof import('wot-design-uni/components/wd-form/wd-form.vue')['default']
WdGrid: typeof import('wot-design-uni/components/wd-grid/wd-grid.vue')['default']
WdGridItem: typeof import('wot-design-uni/components/wd-grid-item/wd-grid-item.vue')['default']
WdIcon: typeof import('wot-design-uni/components/wd-icon/wd-icon.vue')['default']
+ WdImg: typeof import('wot-design-uni/components/wd-img/wd-img.vue')['default']
+ WdImgCropper: typeof import('wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue')['default']
WdInput: typeof import('wot-design-uni/components/wd-input/wd-input.vue')['default']
WdLoading: typeof import('wot-design-uni/components/wd-loading/wd-loading.vue')['default']
WdMessageBox: typeof import('wot-design-uni/components/wd-message-box/wd-message-box.vue')['default']
diff --git a/src/App.vue b/src/App.vue
index 334099a..8b4b848 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,4 @@
+
+{
+ "name": "theme",
+ "style": {
+ "navigationBarTitleText": "用户协议"
+ }
+}
+
+
diff --git a/src/pages/mine/settings/index.vue b/src/pages/mine/settings/index.vue
index 26467d1..511dc8e 100644
--- a/src/pages/mine/settings/index.vue
+++ b/src/pages/mine/settings/index.vue
@@ -1,5 +1,5 @@
-
+
{
getCacheSize();
});
+
+
+{
+ "name": "settings",
+ "style": {
+ "navigationBarTitleText": "设置"
+ }
+}
+
+
diff --git a/src/store/modules/theme.store.ts b/src/store/modules/theme.store.ts
index 7cda548..9d39fe6 100644
--- a/src/store/modules/theme.store.ts
+++ b/src/store/modules/theme.store.ts
@@ -1,49 +1,83 @@
import { defineStore } from "pinia";
-import { ref } from "vue";
-import { applyThemeToMiniProgram } from "@/utils/theme";
-
-// 从缓存获取主题色
-const getThemeColor = (): string => {
- const savedColor = uni.getStorageSync("themeColor");
- return savedColor || "#165DFF"; // 默认Arco蓝色
-};
-
-// 保存主题色到缓存
-const setThemeColorCache = (color: string) => {
- uni.setStorageSync("themeColor", color);
-};
+import { useStorage } from "@uni-helper/uni-use";
+import type { ThemeColorOption, ThemeMode } from "@/composables/types/theme";
+import { themeColorOptions } from "@/composables/types/theme";
export const useThemeStore = defineStore("theme", () => {
- // 主题色
- const primaryColor = ref(getThemeColor());
+ const theme = useStorage("app-theme", "light");
+ const currentThemeColor = useStorage("app-theme-color", themeColorOptions[0]);
- // 设置主题色
- const setPrimaryColor = (color: string) => {
- primaryColor.value = color;
- setThemeColorCache(color);
+ // 主题变量（响应式对象）
+ const themeVars = reactive({
+ darkBackground: "#0f0f0f",
+ darkBackground2: "#1a1a1a",
+ darkBackground3: "#242424",
+ darkBackground4: "#2f2f2f",
+ darkBackground5: "#3d3d3d",
+ darkBackground6: "#4a4a4a",
+ darkBackground7: "#606060",
+ darkColor: "#ffffff",
+ darkColor2: "#e0e0e0",
+ darkColor3: "#a0a0a0",
+ colorTheme: currentThemeColor.value.primary,
+ });
- // 检测运行环境，区分处理
- if (typeof document !== "undefined") {
- // H5环境
- document.documentElement.style.setProperty("--primary-color", color);
+ // 计算属性
+ const isDark = computed(() => theme.value === "dark");
- // 设置简单的衍生色（不依赖外部工具函数）
- document.documentElement.style.setProperty("--primary-color-light", color + "80"); // 添加透明度
- document.documentElement.style.setProperty("--primary-color-dark", color);
- } else {
- // 小程序环境
- applyThemeToMiniProgram(color);
- }
+ // 设置导航栏颜色
+ const setNavigationBarColor = () => {
+ uni.setNavigationBarColor({
+ frontColor: theme.value === "light" ? "#000000" : "#ffffff",
+ backgroundColor: theme.value === "light" ? "#ffffff" : "#000000",
+ });
};
- // 初始化，应用主题色
+ /**
+ * 切换主题
+ * @param mode 指定主题模式，不传则自动切换
+ */
+ const toggleTheme = (mode?: ThemeMode) => {
+ theme.value = mode || (theme.value === "light" ? "dark" : "light");
+ setNavigationBarColor();
+ };
+
+ /**
+ * 设置主题色
+ * @param color 主题色选项
+ */
+ const setCurrentThemeColor = (color: ThemeColorOption) => {
+ currentThemeColor.value = color;
+ themeVars.colorTheme = color.primary;
+ console.log("主题色已设置:", color.name);
+ };
+
+ /**
+ * 初始化主题
+ */
const initTheme = () => {
- setPrimaryColor(primaryColor.value);
+ // 更新主题变量中的颜色
+ themeVars.colorTheme = currentThemeColor.value.primary;
+
+ // 设置导航栏颜色
+ nextTick(() => {
+ setNavigationBarColor();
+ });
};
return {
- primaryColor,
- setPrimaryColor,
+ // 状态
+ theme,
+ currentThemeColor,
+ themeVars,
+
+ // 计算属性
+ isDark,
+
+ // 方法
+ toggleTheme,
+ setCurrentThemeColor,
+ setNavigationBarColor,
initTheme,
};
});
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index aede7cd..e97823a 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -16,12 +16,12 @@ declare global {
const checkLogin: typeof import('../utils/auth')['checkLogin']
const clearAll: typeof import('../utils/storage')['clearAll']
const clearTokens: typeof import('../utils/auth')['clearTokens']
- const colorColumns: typeof import('../composables/useTheme')['colorColumns']
+ const colorColumns: typeof import('../composables/types/theme')['colorColumns']
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const createPinia: typeof import('pinia')['createPinia']
const createRouter: typeof import('uni-mini-router')['createRouter']
- const currentThemeColor: typeof import('../composables/useTheme')['currentThemeColor']
+ const currentThemeColor: typeof import('../composables/types/theme')['currentThemeColor']
const customRef: typeof import('vue')['customRef']
const debounce: typeof import('../utils/index')['debounce']
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
@@ -38,7 +38,7 @@ declare global {
const getUserInfo: typeof import('../utils/storage')['getUserInfo']
const guessSerializerType: typeof import('@uni-helper/uni-use')['guessSerializerType']
const h: typeof import('vue')['h']
- const initTheme: typeof import('../composables/useTheme')['initTheme']
+ const initTheme: typeof import('../composables/types/theme')['initTheme']
const inject: typeof import('vue')['inject']
const isLoggedIn: typeof import('../utils/auth')['isLoggedIn']
const isProxy: typeof import('vue')['isProxy']
@@ -99,13 +99,13 @@ declare global {
const ref: typeof import('vue')['ref']
const request: typeof import('../utils/request')['default']
const requireLogin: typeof import('../utils/auth')['requireLogin']
- const resetTheme: typeof import('../composables/useTheme')['resetTheme']
+ const resetTheme: typeof import('../composables/types/theme')['resetTheme']
const resolveComponent: typeof import('vue')['resolveComponent']
const setAccessToken: typeof import('../utils/auth')['setAccessToken']
const setActivePinia: typeof import('pinia')['setActivePinia']
const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
const setRefreshToken: typeof import('../utils/auth')['setRefreshToken']
- const setThemeColor: typeof import('../composables/useTheme')['setThemeColor']
+ const setThemeColor: typeof import('../composables/types/theme')['setThemeColor']
const setToken: typeof import('../utils/storage')['setToken']
const setUserInfo: typeof import('../utils/storage')['setUserInfo']
const setupStore: typeof import('../store/index')['setupStore']
@@ -114,14 +114,15 @@ declare global {
const shallowRef: typeof import('vue')['shallowRef']
const store: typeof import('../store/index')['store']
const storeToRefs: typeof import('pinia')['storeToRefs']
- const theme: typeof import('../composables/useTheme')['theme']
+ const testThemeSystem: typeof import('../utils/theme-test')['testThemeSystem']
+ const theme: typeof import('../composables/types/theme')['theme']
const themeColorOptions: typeof import('../composables/useTheme')['themeColorOptions']
- const themeVars: typeof import('../composables/useTheme')['themeVars']
+ const themeVars: typeof import('../composables/types/theme')['themeVars']
const toRaw: typeof import('vue')['toRaw']
const toRef: typeof import('vue')['toRef']
const toRefs: typeof import('vue')['toRefs']
const toValue: typeof import('vue')['toValue']
- const toggleTheme: typeof import('../composables/useTheme')['toggleTheme']
+ const toggleTheme: typeof import('../composables/types/theme')['toggleTheme']
const triggerRef: typeof import('vue')['triggerRef']
const tryOnBackPress: typeof import('@uni-helper/uni-use')['tryOnBackPress']
const tryOnHide: typeof import('@uni-helper/uni-use')['tryOnHide']
@@ -201,8 +202,6 @@ declare module 'vue' {
readonly EffectScope: UnwrapRef
readonly Storage: UnwrapRef
readonly acceptHMRUpdate: UnwrapRef
- readonly applyThemeOnPageShow: UnwrapRef
- readonly applyThemeToMiniProgram: UnwrapRef
readonly auth: UnwrapRef
readonly checkLogin: UnwrapRef
readonly clearAll: UnwrapRef
@@ -297,6 +296,7 @@ declare module 'vue' {
readonly shallowRef: UnwrapRef
readonly store: UnwrapRef
readonly storeToRefs: UnwrapRef
+ readonly themeColorOptions: UnwrapRef
readonly toRaw: UnwrapRef
readonly toRef: UnwrapRef
readonly toRefs: UnwrapRef
@@ -316,6 +316,7 @@ declare module 'vue' {
readonly useStomp: UnwrapRef
readonly useTabbar: UnwrapRef
readonly useTemplateRef: UnwrapRef
+ readonly useTheme: UnwrapRef
readonly useThemeStore: UnwrapRef
readonly useToast: UnwrapRef
readonly useUserStore: UnwrapRef
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index a24184f..8a373f7 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -1,3 +1,13 @@
+// 全局类型声明文件
+// 自动引入 virtual 模块类型
+
+///
+///
+///
+
+// 如果需要其他 virtual 模块类型，可以在这里添加
+// 例如：///
+
declare global {
/**
* 分页查询参数
@@ -38,4 +48,5 @@ declare global {
msg: string;
}
}
+
export {};
diff --git a/src/types/uni-mini-router.d.ts b/src/types/uni-mini-router.d.ts
deleted file mode 100644
index fcd52b4..0000000
--- a/src/types/uni-mini-router.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import "uni-mini-router";
-
-declare module "uni-mini-router" {
- interface Route {
- path: string;
- fullPath: string;
- meta?: {
- requireAuth?: boolean;
- [key: string]: any;
- };
- }
-}
diff --git a/src/types/uni-pages.d.ts b/src/types/uni-pages.d.ts
new file mode 100644
index 0000000..2065725
--- /dev/null
+++ b/src/types/uni-pages.d.ts
@@ -0,0 +1,35 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by vite-plugin-uni-pages
+
+interface NavigateToOptions {
+ url: "/pages/index/index" |
+ "/pages/login/index" |
+ "/pages/mine/index" |
+ "/pages/work/index" |
+ "/pages/mine/about/index" |
+ "/pages/mine/faq/index" |
+ "/pages/mine/feedback/index" |
+ "/pages/mine/profile/complete-profile" |
+ "/pages/mine/profile/index" |
+ "/pages/mine/settings/index" |
+ "/pages/mine/settings/account/index" |
+ "/pages/mine/settings/agreement/index" |
+ "/pages/mine/settings/network/index" |
+ "/pages/mine/settings/theme/index";
+}
+interface RedirectToOptions extends NavigateToOptions {}
+
+interface SwitchTabOptions {
+ url: "/pages/index/index" | "/pages/mine/index"
+}
+
+type ReLaunchOptions = NavigateToOptions | SwitchTabOptions;
+
+declare interface Uni {
+ navigateTo(options: UniNamespace.NavigateToOptions & NavigateToOptions): void;
+ redirectTo(options: UniNamespace.RedirectToOptions & RedirectToOptions): void;
+ switchTab(options: UniNamespace.SwitchTabOptions & SwitchTabOptions): void;
+ reLaunch(options: UniNamespace.ReLaunchOptions & ReLaunchOptions): void;
+}
diff --git a/src/types/virtual-uni-pages.d.ts b/src/types/virtual-uni-pages.d.ts
deleted file mode 100644
index 11267d8..0000000
--- a/src/types/virtual-uni-pages.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-declare module "virtual:uni-pages" {
- interface Page {
- path: string;
- style?: Record;
- [key: string]: any;
- }
-
- interface SubPackage {
- root: string;
- pages: Page[];
- [key: string]: any;
- }
-
- export const pages: Page[];
- export const subPackages: SubPackage[];
-}
diff --git a/src/uni.scss b/src/uni.scss
index bbd676d..d055110 100644
--- a/src/uni.scss
+++ b/src/uni.scss
@@ -74,69 +74,3 @@ $uni-color-subtitle: #555; // 二级标题颜色
$uni-font-size-subtitle: 18px;
$uni-color-paragraph: #3f536e; // 文章段落颜色
$uni-font-size-paragraph: 15px;
-
-/* 暗黑模式全局样式 */
-.wot-theme-dark {
- color: #f5f5f5 !important;
- background-color: #1a1a1a !important;
-
- /* 页面背景 */
- page {
- color: #f5f5f5 !important;
- background-color: #1a1a1a !important;
- }
-
- /* H5 环境 body 样式 */
- body {
- color: #f5f5f5 !important;
- background-color: #1a1a1a !important;
- }
-
- /* 通用组件暗黑模式适配 */
- .uni-page-wrapper {
- color: #f5f5f5 !important;
- background-color: #1a1a1a !important;
- }
-
- /* 导航栏暗黑模式 */
- .uni-navbar {
- color: #f5f5f5 !important;
- background-color: #2a2a2a !important;
- border-bottom-color: #404040 !important;
- }
-
- /* 标签栏暗黑模式 */
- .uni-tabbar {
- background-color: #2a2a2a !important;
- border-top-color: #404040 !important;
- }
-
- /* 卡片组件暗黑模式 */
- .uni-card {
- color: #f5f5f5 !important;
- background-color: #2a2a2a !important;
- }
-
- /* 列表项暗黑模式 */
- .uni-list-item {
- color: #f5f5f5 !important;
- background-color: #2a2a2a !important;
- border-bottom-color: #404040 !important;
- }
-
- /* 输入框暗黑模式 */
- .uni-input {
- color: #f5f5f5 !important;
- background-color: #404040 !important;
- border-color: #606060 !important;
- }
-
- /* 按钮暗黑模式适配 */
- .uni-button {
- &.uni-button-default {
- color: #f5f5f5 !important;
- background-color: #404040 !important;
- border-color: #606060 !important;
- }
- }
-}
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
deleted file mode 100644
index d72a3d6..0000000
--- a/src/utils/theme.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * 小程序主题工具类
- * 用于解决小程序环境中CSS变量不能动态设置的问题
- */
-
-// 注入小程序环境的全局样式
-export function applyThemeToMiniProgram(primaryColor: string) {
- // 确保在小程序环境中执行
- if (typeof document !== "undefined") return;
-
- try {
- // 设置TabBar样式
- uni.setTabBarStyle({
- color: "#000000",
- selectedColor: primaryColor,
- backgroundColor: "#ffffff",
- borderStyle: "black",
- });
-
- console.log("小程序主题色已应用:", primaryColor);
- } catch (error) {
- console.error("应用小程序主题色失败:", error);
- }
-}
-
-// 在页面展示时应用主题
-export function applyThemeOnPageShow(primaryColor: string) {
- // 各平台小程序可能需要不同处理
- const platform = uni.getSystemInfoSync().platform;
- console.log(`当前平台: ${platform}, 应用主题色: ${primaryColor}`);
-
- // 某些平台可能需要特定处理
-}
diff --git a/tsconfig.json b/tsconfig.json
index 6bf4ab8..c6223b4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,7 @@
"@/*": ["./src/*"]
},
"lib": ["esnext", "dom"],
- "types": ["@dcloudio/types", "@uni-helper/uni-types", "wot-design-uni/global", "./src/types/vite-plugin-uni-pages"]
+ "types": ["@dcloudio/types", "@uni-helper/uni-types", "wot-design-uni/global"]
},
"vueCompilerOptions": {
// 调整 Volar（Vue 语言服务工具）解析行为，用于为 uni-app 组件提供 TypeScript 类型
diff --git a/vite.config.ts b/vite.config.ts
index 4212750..1ad0133 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -36,8 +36,15 @@ export default defineConfig(async ({ mode }: ConfigEnv): Promise =>
// make sure put it before `Uni()`
UnoCss(),
UniLayouts(),
- UniPages(),
-
+ UniPages({
+ dts: "src/types/uni-pages.d.ts",
+ subPackages: ["src/subPages"],
+ /**
+ * 排除的页面，相对于 dir 和 subPackages
+ * @default []
+ */
+ exclude: ["**/components/**/*.*"],
+ }),
Components({
resolvers: [WotResolver()],
}),