@ruixinkeji/prism-ui 1.0.7 → 1.0.8

package/components/PrismAIAssist/PrismAIAssist.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-ai-assist" :class="{ 'dark-mode': appStore.isDarkMode }">
+  <view class="prism-ai-assist" :class="{ 'dark-mode': isDarkMode }">
     <view class="ai-btn" :class="{ 'loading': isLoading }" @click="handleClick">
       <text class="fa" :class="isLoading ? 'fa-spinner fa-spin' : 'fa-wand-magic-sparkles'"></text>
       <text class="ai-text">{{ isLoading ? loadingText : text }}</text>
@@ -9,7 +9,7 @@
 
 <script setup>
 import { ref } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 
 const props = defineProps({
   text: {
@@ -24,7 +24,7 @@ const props = defineProps({
 
 const emit = defineEmits(['click']);
 
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 const isLoading = ref(false);
 
 function handleClick() {

package/components/PrismAddressInput/PrismAddressInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-address-input" :class="{ 'dark-mode': appStore.isDarkMode }">
+  <view class="prism-address-input" :class="{ 'dark-mode': isDarkMode }">
     <!-- 模式1: textarea模式（默认） -->
     <view class="address-wrapper" v-if="mode === 'textarea'">
       <textarea
@@ -101,7 +101,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 
 const props = defineProps({
   modelValue: {
@@ -153,7 +153,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'update:latitude', 'update:longitude', 'location-change']);
 
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 const addressValue = ref(props.modelValue);
 const showListPopup = ref(false);
 const showSelectPopup = ref(false);
@@ -163,7 +163,7 @@ const staticMapUrl = computed(() => {
   if (!props.latitude || !props.longitude || !props.mapKey) return '';
   const lat = props.latitude;
   const lng = props.longitude;
-  const style = appStore.isDarkMode ? '&style=4' : '';
+  const style = isDarkMode.value ? '&style=4' : '';
   return `https://apis.map.qq.com/ws/staticmap/v2/?center=${lat},${lng}&zoom=16&size=600*300&maptype=roadmap&markers=size:large|color:red|${lat},${lng}&key=${props.mapKey}${style}`;
 });
 

package/components/PrismCityCascadeSelect/PrismCityCascadeSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-city-cascade-select" :class="{ 'dark-mode': appStore.isDarkMode }">
+  <view class="prism-city-cascade-select" :class="{ 'dark-mode': isDarkMode }">
     <!-- 触发器 -->
     <view class="select-trigger" @click="openSelect">
       <slot>
@@ -127,7 +127,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 
 const props = defineProps({
   modelValue: {
@@ -188,7 +188,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'change', 'confirm', 'cancel']);
 
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 const showSelect = ref(false);
 const tempSelected = ref([]);
 const currentLevel = ref(0);

package/components/PrismCityPicker/PrismCityPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-city-picker" :class="{ 'dark-mode': appStore.isDarkMode }">
+  <view class="prism-city-picker" :class="{ 'dark-mode': isDarkMode }">
     <!-- 触发器 -->
     <view class="picker-trigger" @click="openPicker">
       <slot>
@@ -157,7 +157,7 @@
 
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 import { rpx2px } from '../../utils/system';
 
 const props = defineProps({
@@ -227,7 +227,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'change', 'confirm', 'cancel']);
 
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 const showPicker = ref(false);
 const pickerIndex = ref([0, 0, 0]);
 const tempSelected = ref([]);

package/components/PrismCitySelect/PrismCitySelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-city-select" :class="{ 'dark-mode': appStore.isDarkMode }">
+  <view class="prism-city-select" :class="{ 'dark-mode': isDarkMode }">
     <!-- 触发器 -->
     <view class="picker-trigger" @click="openPicker">
       <slot>
@@ -103,7 +103,7 @@
 
 <script setup>
 import { ref, computed } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 import PrismGroupSticky from '../PrismGroupSticky/PrismGroupSticky.vue';
 
 const props = defineProps({
@@ -143,7 +143,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['update:modelValue', 'change', 'confirm']);
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 
 const showPicker = ref(false);
 const searchKeyword = ref('');

package/components/PrismCode/PrismCode.vue

@@ -50,7 +50,7 @@
  * <PrismCode code="const a = 1;" language="JavaScript" :copyable="true" />
  */
 import { ref, computed } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 
 const props = defineProps({
   // 要展示的代码内容
@@ -83,7 +83,7 @@ const props = defineProps({
   highlight: { type: Boolean, default: true }
 });
 
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 const copied = ref(false);
 const isExpanded = ref(props.defaultExpanded);
 const foldedRanges = ref(new Set());
@@ -91,7 +91,7 @@ const foldedRanges = ref(new Set());
 // 计算实际主题
 const actualTheme = computed(() => {
   if (props.theme === 'auto') {
-    return appStore.isDarkMode ? 'dark' : 'light';
+    return isDarkMode.value ? 'dark' : 'light';
   }
   return props.theme;
 });

package/components/PrismCodeInput/PrismCodeInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-code-input" :class="{ 'dark-mode': appStore.isDarkMode }">
+  <view class="prism-code-input" :class="{ 'dark-mode': isDarkMode }">
     <view class="code-boxes">
       <view
         v-for="(item, index) in codeLength"
@@ -28,7 +28,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 
 const props = defineProps({
   length: {
@@ -43,7 +43,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'complete']);
 
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 const codeValue = ref(props.modelValue);
 const isFocused = ref(false);
 

package/components/PrismDateTimePicker/PrismDateTimePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-datetime-picker" :class="{ 'dark-mode': appStore.isDarkMode }">
+  <view class="prism-datetime-picker" :class="{ 'dark-mode': isDarkMode }">
     <!-- 触发器 -->
     <view class="picker-trigger" @click="openPicker">
       <slot>
@@ -187,7 +187,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 import { rpx2px } from '../../utils/system';
 import { getLunarDayStr } from '../../utils/lunar';
 
@@ -253,7 +253,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'change', 'confirm', 'cancel']);
 
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 const showPicker = ref(false);
 const pickerIndex = ref([0, 0, 0, 0, 0, 0]);
 

package/components/PrismIdCardInput/PrismIdCardInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-id-card-input" :class="{ 'dark-mode': appStore.isDarkMode }">
+  <view class="prism-id-card-input" :class="{ 'dark-mode': isDarkMode }">
     <!-- 身份证号输入框 -->
     <view class="id-card-input-wrapper">
       <input
@@ -35,7 +35,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 
 const props = defineProps({
   modelValue: {
@@ -54,7 +54,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'complete', 'valid']);
 
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 const idValue = ref(props.modelValue);
 const lastDisplayLength = ref(0);
 

package/components/PrismImagePicker/PrismImagePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-image-picker" :class="{ 'dark-mode': appStore.isDarkMode }">
+  <view class="prism-image-picker" :class="{ 'dark-mode': isDarkMode }">
     <!-- 主图片区域 -->
     <view class="picker-main">
       <!-- 已选图片预览 -->
@@ -66,7 +66,7 @@
 
 <script setup>
 import { ref } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 
 const props = defineProps({
   modelValue: {
@@ -128,7 +128,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'change', 'upload', 'remove']);
 
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 const showSourcePopup = ref(false);
 
 // 处理上传

package/components/PrismLicensePlateInput/PrismLicensePlateInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-license-plate-input" :class="{ 'dark-mode': appStore.isDarkMode }">
+  <view class="prism-license-plate-input" :class="{ 'dark-mode': isDarkMode }">
     <!-- 车牌号输入框 -->
     <view class="plate-boxes">
       <!-- 第1位 -->
@@ -236,7 +236,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 
 const props = defineProps({
   modelValue: {
@@ -247,7 +247,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'complete']);
 
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 
 const isNewEnergy = ref(false);
 const showKeyboard = ref(false);

package/components/PrismNavBar/PrismNavBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-nav-bar" :class="{ 'dark-mode': appStore.isDarkMode, 'glass-effect': glass }" :style="{ paddingTop: appStore.statusBarHeight + 'px' }">
+  <view class="prism-nav-bar" :class="{ 'dark-mode': isDarkMode, 'glass-effect': glass }" :style="{ paddingTop: statusBarHeight + 'px' }">
     <view class="nav-bar-content">
       <view class="nav-bar-left">
         <!-- 返回按钮 -->
@@ -23,7 +23,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 
 const props = defineProps({
   title: {
@@ -48,7 +48,7 @@ const props = defineProps({
   }
 });
 
-const appStore = useAppStore();
+const { isDarkMode, themeMode, statusBarHeight, toggleTheme } = useTheme();
 
 // 主题图标
 const themeIcon = computed(() => {
@@ -57,11 +57,11 @@ const themeIcon = computed(() => {
     'dark': 'fa-moon',
     'system': 'fa-circle-half-stroke'
   };
-  return icons[appStore.themeMode] || 'fa-moon';
+  return icons[themeMode.value] || 'fa-moon';
 });
 
 function handleThemeClick() {
-  appStore.toggleTheme();
+  toggleTheme();
 }
 
 function handleBack() {

package/components/PrismSecureInput/PrismSecureInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-secure-input" :class="{ 'dark-mode': appStore.isDarkMode }">
+  <view class="prism-secure-input" :class="{ 'dark-mode': isDarkMode }">
     <!-- 密码输入框 -->
     <view class="password-boxes" @click="showKeyboardModal">
       <view
@@ -57,7 +57,7 @@
 
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 
 const props = defineProps({
   modelValue: {
@@ -80,7 +80,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'complete']);
 
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 const passwordValue = ref(props.modelValue);
 const isFocused = ref(false);
 const showKeyboard = ref(false);

package/components/PrismSwitch/PrismSwitch.vue

@@ -2,7 +2,7 @@
   <view
     class="prism-switch-component"
     :class="{
-      'dark-mode': appStore.isDarkMode,
+      'dark-mode': isDarkMode,
       'active': modelValue,
       'square': square,
       'disabled': disabled,
@@ -20,7 +20,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 
 const props = defineProps({
   modelValue: {
@@ -56,7 +56,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'change']);
 
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 
 function handleToggle() {
   if (props.disabled) return;

package/components/PrismTabBar/PrismTabBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-tabbar" :class="{ 'dark-mode': appStore.isDarkMode, 'glass-effect': glass, 'wechat-browser': isWechatBrowser }">
+  <view class="prism-tabbar" :class="{ 'dark-mode': isDarkMode, 'glass-effect': glass, 'wechat-browser': isWechatBrowser }">
     <view
       class="prism-tabbar-item"
       v-for="(item, index) in tabList"
@@ -17,7 +17,7 @@
 
 <script setup>
 import { computed, ref, onMounted } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 
 const props = defineProps({
   current: {
@@ -39,7 +39,7 @@ const props = defineProps({
   }
 });
 
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 const currentPath = computed(() => props.current);
 const tabList = computed(() => props.tabs);
 

package/components/PrismVoiceInput/PrismVoiceInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-voice-input" :class="{ 'dark-mode': appStore.isDarkMode }">
+  <view class="prism-voice-input" :class="{ 'dark-mode': isDarkMode }">
     <!-- 模式1: 按钮模式（默认） -->
     <view
       v-if="mode === 'button'"
@@ -67,7 +67,7 @@
 
 <script setup>
 import { ref, watch, onUnmounted } from 'vue';
-import { useAppStore } from '../../store/app';
+import { useTheme } from '../../composables/useTheme';
 
 const props = defineProps({
   // 模式：button（按钮）或 modal（弹窗）
@@ -95,7 +95,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:visible', 'start', 'end', 'cancel', 'result', 'confirm']);
 
-const appStore = useAppStore();
+const { isDarkMode } = useTheme();
 const isRecording = ref(false);
 const cancelHint = ref(false);
 const recordingTime = ref(0);

package/composables/useTheme.js

@@ -0,0 +1,111 @@
+/**
+ * 主题检测 Composable
+ * 组件库内部使用，不依赖外部 store
+ */
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+
+// 全局状态（单例模式，所有组件共享）
+const isDarkMode = ref(false);
+const themeMode = ref('system'); // 'light' | 'dark' | 'system'
+const statusBarHeight = ref(0);
+let initialized = false;
+
+/**
+ * 初始化主题检测
+ */
+function initTheme() {
+  if (initialized) return;
+  initialized = true;
+
+  // 获取状态栏高度
+  try {
+    const systemInfo = uni.getSystemInfoSync();
+    statusBarHeight.value = systemInfo.statusBarHeight || 0;
+  } catch (e) {
+    statusBarHeight.value = 0;
+  }
+
+  // 检测系统深色模式
+  updateSystemTheme();
+
+  // 监听系统主题变化
+  // #ifdef H5
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', updateSystemTheme);
+  }
+  // #endif
+
+  // #ifndef H5
+  uni.onThemeChange && uni.onThemeChange((res) => {
+    if (themeMode.value === 'system') {
+      isDarkMode.value = res.theme === 'dark';
+    }
+  });
+  // #endif
+}
+
+/**
+ * 更新系统主题
+ */
+function updateSystemTheme() {
+  if (themeMode.value !== 'system') return;
+
+  // #ifdef H5
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    isDarkMode.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+  // #endif
+
+  // #ifndef H5
+  try {
+    const systemInfo = uni.getSystemInfoSync();
+    isDarkMode.value = systemInfo.theme === 'dark';
+  } catch (e) {
+    isDarkMode.value = false;
+  }
+  // #endif
+}
+
+/**
+ * 使用主题
+ * @returns {{ isDarkMode: Ref<boolean>, themeMode: Ref<string>, setThemeMode: Function }}
+ */
+export function useTheme() {
+  onMounted(() => {
+    initTheme();
+  });
+
+  /**
+   * 设置主题模式
+   * @param {'light' | 'dark' | 'system'} mode
+   */
+  function setThemeMode(mode) {
+    themeMode.value = mode;
+    if (mode === 'system') {
+      updateSystemTheme();
+    } else {
+      isDarkMode.value = mode === 'dark';
+    }
+  }
+
+  /**
+   * 切换主题模式
+   */
+  function toggleTheme() {
+    const modes = ['light', 'dark', 'system'];
+    const currentIndex = modes.indexOf(themeMode.value);
+    const nextIndex = (currentIndex + 1) % modes.length;
+    setThemeMode(modes[nextIndex]);
+  }
+
+  return {
+    isDarkMode,
+    themeMode,
+    statusBarHeight,
+    setThemeMode,
+    toggleTheme
+  };
+}
+
+export default useTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ruixinkeji/prism-ui",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Prism UI - 现代化玻璃态设计 uni-app 组件库",
   "main": "index.js",
   "module": "index.esm.js",
@@ -9,6 +9,7 @@
     "styles",
     "theme",
     "components",
+    "composables",
     "fonts",
     "store",
     "utils",