首次提交：初始化项目代码

2026-07-31 14:42:05 +08:00
commit ecca407485
84 changed files with 24158 additions and 0 deletions
@@ -0,0 +1,95 @@
+// mixins/themeMixin.js（Vue3 适配版）
+import { 
+  getThemeConfigFromStorage, 
+  THEME_CHANGE_EVENT,
+  THEME_PRESETS,
+  DEFAULT_THEME_KEY
+} from '../utils/theme.js' // 注意路径：Vue3 中 @ 别名需确认，这里先用相对路径
+
+export default {
+  // Vue3 中 data 需为函数（和Vue2一致，无需改）
+  data() {
+    return {
+      themeConfig: getThemeConfigFromStorage()
+    }
+  },
+
+  // Vue3 计算属性写法不变
+  computed: {
+    pageThemeStyle() {
+      return {
+        backgroundColor: this.themeConfig.bgColor,
+        color: this.themeConfig.textPrimary,
+        minHeight: '100vh'
+      }
+    },
+    cardThemeStyle() {
+      return {
+        backgroundColor: this.themeConfig.cardBgColor,
+        borderColor: this.themeConfig.borderColor,
+        boxShadow: `0 6rpx 20rpx ${this.themeConfig.shadowColor}`,
+        borderRadius: '28rpx'
+      }
+    },
+    btnPrimaryStyle() {
+      return {
+        backgroundColor: this.themeConfig.primaryColor,
+        color: '#ffffff',
+        border: 'none',
+        borderRadius: '14rpx'
+      }
+    }
+  },
+
+  // ==================== 关键：Vue3 生命周期适配 ====================
+  // 小程序中 Vue3 仍支持 onLoad/onShow/onUnload 等原生生命周期
+  onLoad() {
+    this.syncThemeConfig()
+    this.watchThemeChange()
+  },
+
+  onShow() {
+    this.syncThemeConfig()
+  },
+
+  onUnload() {
+    // 移除监听，避免内存泄漏
+    uni.$off(THEME_CHANGE_EVENT, this.themeChangeHandler)
+  },
+
+  // 方法部分（和Vue2逻辑一致，无需改）
+  methods: {
+    /**
+     * 同步最新主题配置（优先级：全局 > 本地 > 默认）
+     */
+    syncThemeConfig() {
+      const appInstance = getApp({ allowDefault: true })
+      const globalTheme = appInstance?.globalData?.themeConfig
+      
+      this.themeConfig = globalTheme 
+        || getThemeConfigFromStorage() 
+        || THEME_PRESETS[DEFAULT_THEME_KEY]
+    },
+
+    /**
+     * 监听全局主题变更事件
+     */
+    watchThemeChange() {
+      this.themeChangeHandler = ({ key, config }) => {
+        if (key && config) {
+          this.themeConfig = config
+          // 可选：页面自定义主题更新逻辑
+          this.onThemeUpdated && this.onThemeUpdated()
+        }
+      }
+      uni.$on(THEME_CHANGE_EVENT, this.themeChangeHandler)
+    },
+
+    /**
+     * 【可选】页面自定义主题更新逻辑（供页面重写）
+     */
+    onThemeUpdated() {
+      // 空实现
+    }
+  }
+}