@ruixinkeji/prism-ui 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ruixinkeji/prism-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Prism UI - 现代化玻璃态设计 uni-app 组件库",
   "main": "index.js",
   "module": "index.esm.js",
@@ -9,6 +9,8 @@
     "styles",
     "theme",
     "components",
+    "fonts",
+    "store",
     "index.js",
     "index.esm.js",
     "index.d.ts",
@@ -46,10 +48,14 @@
     "url": "https://github.com/ruixin/prism-ui/issues"
   },
   "peerDependencies": {
+    "pinia": "^2.0.0",
     "sass": "^1.0.0",
     "vue": "^3.0.0"
   },
   "peerDependenciesMeta": {
+    "pinia": {
+      "optional": true
+    },
     "sass": {
       "optional": false
     }

package/store/app.d.ts

@@ -0,0 +1,21 @@
+import { StoreDefinition } from 'pinia';
+
+export interface AppState {
+  themeMode: 'light' | 'dark' | 'system';
+  systemTheme: 'light' | 'dark';
+  statusBarHeight: number;
+  menuButtonBounds: UniApp.GetMenuButtonBoundingClientRectRes | null;
+}
+
+export interface AppGetters {
+  isDarkMode: boolean;
+}
+
+export interface AppActions {
+  updateThemeStyle(): void;
+  setThemeMode(mode: 'light' | 'dark' | 'system'): void;
+  toggleTheme(): void;
+  initTheme(): void;
+}
+
+export const useAppStore: StoreDefinition<'app', AppState, AppGetters, AppActions>;

package/store/app.js

@@ -0,0 +1,68 @@
+import { defineStore } from 'pinia';
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    themeMode: 'system',
+    systemTheme: 'light',
+    statusBarHeight: 0,
+    menuButtonBounds: null
+  }),
+
+  getters: {
+    isDarkMode: (state) => {
+      if (state.themeMode === 'system') {
+        return state.systemTheme === 'dark';
+      }
+      return state.themeMode === 'dark';
+    }
+  },
+
+  actions: {
+    updateThemeStyle() {
+      const isDark = this.isDarkMode;
+      const htmlElement = document.documentElement;
+      const bodyElement = document.body;
+      const bgColor = isDark ? '#121212' : '#F5F7FA';
+
+      if (isDark) {
+        htmlElement.classList.add('dark-mode');
+      } else {
+        htmlElement.classList.remove('dark-mode');
+      }
+
+      htmlElement.style.backgroundColor = bgColor;
+      bodyElement.style.backgroundColor = bgColor;
+    },
+
+    setThemeMode(mode) {
+      this.themeMode = mode;
+      uni.setStorageSync('prism_theme_mode', mode);
+      this.updateThemeStyle();
+    },
+
+    toggleTheme() {
+      const modes = ['light', 'dark', 'system'];
+      const currentIndex = modes.indexOf(this.themeMode);
+      const nextIndex = (currentIndex + 1) % modes.length;
+      this.setThemeMode(modes[nextIndex]);
+    },
+
+    initTheme() {
+      const savedMode = uni.getStorageSync('prism_theme_mode');
+      if (savedMode) {
+        this.themeMode = savedMode;
+      }
+
+      const systemInfo = uni.getSystemInfoSync();
+      this.statusBarHeight = systemInfo.statusBarHeight || 0;
+      this.systemTheme = systemInfo.theme || 'light';
+
+      uni.onThemeChange((res) => {
+        this.systemTheme = res.theme;
+        this.updateThemeStyle();
+      });
+
+      this.updateThemeStyle();
+    }
+  }
+});

package/styles/base.scss

@@ -131,7 +131,7 @@ uni-page-wrapper, uni-page-body {
 /* #endif */
 
 /* -------------------- 页面容器 -------------------- */
-.page-container {
+.prism-page {
   width: 100%;
   min-height: 100vh;
   background: var(--prism-bg-color-page);
@@ -139,7 +139,7 @@ uni-page-wrapper, uni-page-body {
 }
 
 /* -------------------- 主内容区（scroll-view） -------------------- */
-.main-content {
+.prism-main {
   height: 100vh;
   box-sizing: border-box;
   background: var(--prism-bg-color-page);