@ruixinkeji/prism-ui 1.0.8 → 1.0.10

package/components/PrismAIAssist/PrismAIAssist.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-ai-assist" :class="{ 'dark-mode': isDarkMode }">
+  <view class="prism-ai-assist" :class="{ 'dark-mode': appStore.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 { useTheme } from '../../composables/useTheme';
+import { useAppStore } from '../../store/app';
 
 const props = defineProps({
   text: {
@@ -24,7 +24,7 @@ const props = defineProps({
 
 const emit = defineEmits(['click']);
 
-const { isDarkMode } = useTheme();
+const appStore = useAppStore();
 const isLoading = ref(false);
 
 function handleClick() {

package/components/PrismAddressInput/PrismAddressInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-address-input" :class="{ 'dark-mode': isDarkMode }">
+  <view class="prism-address-input" :class="{ 'dark-mode': appStore.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 { useTheme } from '../../composables/useTheme';
+import { useAppStore } from '../../store/app';
 
 const props = defineProps({
   modelValue: {
@@ -153,7 +153,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'update:latitude', 'update:longitude', 'location-change']);
 
-const { isDarkMode } = useTheme();
+const appStore = useAppStore();
 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 = isDarkMode.value ? '&style=4' : '';
+  const style = appStore.isDarkMode ? '&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': isDarkMode }">
+  <view class="prism-city-cascade-select" :class="{ 'dark-mode': appStore.isDarkMode }">
     <!-- 触发器 -->
     <view class="select-trigger" @click="openSelect">
       <slot>
@@ -127,7 +127,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue';
-import { useTheme } from '../../composables/useTheme';
+import { useAppStore } from '../../store/app';
 
 const props = defineProps({
   modelValue: {
@@ -188,7 +188,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'change', 'confirm', 'cancel']);
 
-const { isDarkMode } = useTheme();
+const appStore = useAppStore();
 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': isDarkMode }">
+  <view class="prism-city-picker" :class="{ 'dark-mode': appStore.isDarkMode }">
     <!-- 触发器 -->
     <view class="picker-trigger" @click="openPicker">
       <slot>
@@ -157,7 +157,7 @@
 
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue';
-import { useTheme } from '../../composables/useTheme';
+import { useAppStore } from '../../store/app';
 import { rpx2px } from '../../utils/system';
 
 const props = defineProps({
@@ -227,7 +227,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'change', 'confirm', 'cancel']);
 
-const { isDarkMode } = useTheme();
+const appStore = useAppStore();
 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': isDarkMode }">
+  <view class="prism-city-select" :class="{ 'dark-mode': appStore.isDarkMode }">
     <!-- 触发器 -->
     <view class="picker-trigger" @click="openPicker">
       <slot>
@@ -103,7 +103,7 @@
 
 <script setup>
 import { ref, computed } from 'vue';
-import { useTheme } from '../../composables/useTheme';
+import { useAppStore } from '../../store/app';
 import PrismGroupSticky from '../PrismGroupSticky/PrismGroupSticky.vue';
 
 const props = defineProps({
@@ -143,7 +143,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['update:modelValue', 'change', 'confirm']);
-const { isDarkMode } = useTheme();
+const appStore = useAppStore();
 
 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 { useTheme } from '../../composables/useTheme';
+import { useAppStore } from '../../store/app';
 
 const props = defineProps({
   // 要展示的代码内容
@@ -83,7 +83,7 @@ const props = defineProps({
   highlight: { type: Boolean, default: true }
 });
 
-const { isDarkMode } = useTheme();
+const appStore = useAppStore();
 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 isDarkMode.value ? 'dark' : 'light';
+    return appStore.isDarkMode ? 'dark' : 'light';
   }
   return props.theme;
 });

package/components/PrismCodeInput/PrismCodeInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-code-input" :class="{ 'dark-mode': isDarkMode }">
+  <view class="prism-code-input" :class="{ 'dark-mode': appStore.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 { useTheme } from '../../composables/useTheme';
+import { useAppStore } from '../../store/app';
 
 const props = defineProps({
   length: {
@@ -43,7 +43,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'complete']);
 
-const { isDarkMode } = useTheme();
+const appStore = useAppStore();
 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': isDarkMode }">
+  <view class="prism-datetime-picker" :class="{ 'dark-mode': appStore.isDarkMode }">
     <!-- 触发器 -->
     <view class="picker-trigger" @click="openPicker">
       <slot>
@@ -187,7 +187,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue';
-import { useTheme } from '../../composables/useTheme';
+import { useAppStore } from '../../store/app';
 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 { isDarkMode } = useTheme();
+const appStore = useAppStore();
 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': isDarkMode }">
+  <view class="prism-id-card-input" :class="{ 'dark-mode': appStore.isDarkMode }">
     <!-- 身份证号输入框 -->
     <view class="id-card-input-wrapper">
       <input
@@ -35,7 +35,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue';
-import { useTheme } from '../../composables/useTheme';
+import { useAppStore } from '../../store/app';
 
 const props = defineProps({
   modelValue: {
@@ -54,7 +54,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'complete', 'valid']);
 
-const { isDarkMode } = useTheme();
+const appStore = useAppStore();
 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': isDarkMode }">
+  <view class="prism-image-picker" :class="{ 'dark-mode': appStore.isDarkMode }">
     <!-- 主图片区域 -->
     <view class="picker-main">
       <!-- 已选图片预览 -->
@@ -66,7 +66,7 @@
 
 <script setup>
 import { ref } from 'vue';
-import { useTheme } from '../../composables/useTheme';
+import { useAppStore } from '../../store/app';
 
 const props = defineProps({
   modelValue: {
@@ -128,7 +128,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'change', 'upload', 'remove']);
 
-const { isDarkMode } = useTheme();
+const appStore = useAppStore();
 const showSourcePopup = ref(false);
 
 // 处理上传

package/components/PrismLicensePlateInput/PrismLicensePlateInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-license-plate-input" :class="{ 'dark-mode': isDarkMode }">
+  <view class="prism-license-plate-input" :class="{ 'dark-mode': appStore.isDarkMode }">
     <!-- 车牌号输入框 -->
     <view class="plate-boxes">
       <!-- 第1位 -->
@@ -236,7 +236,7 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue';
-import { useTheme } from '../../composables/useTheme';
+import { useAppStore } from '../../store/app';
 
 const props = defineProps({
   modelValue: {
@@ -247,7 +247,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'complete']);
 
-const { isDarkMode } = useTheme();
+const appStore = useAppStore();
 
 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': isDarkMode, 'glass-effect': glass }" :style="{ paddingTop: statusBarHeight + 'px' }">
+  <view class="prism-nav-bar" :class="{ 'dark-mode': appStore.isDarkMode, 'glass-effect': glass }" :style="{ paddingTop: appStore.statusBarHeight + 'px' }">
     <view class="nav-bar-content">
       <view class="nav-bar-left">
         <!-- 返回按钮 -->
@@ -23,7 +23,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { useTheme } from '../../composables/useTheme';
+import { useAppStore } from '../../store/app';
 
 const props = defineProps({
   title: {
@@ -48,7 +48,7 @@ const props = defineProps({
   }
 });
 
-const { isDarkMode, themeMode, statusBarHeight, toggleTheme } = useTheme();
+const appStore = useAppStore();
 
 // 主题图标
 const themeIcon = computed(() => {
@@ -57,11 +57,11 @@ const themeIcon = computed(() => {
     'dark': 'fa-moon',
     'system': 'fa-circle-half-stroke'
   };
-  return icons[themeMode.value] || 'fa-moon';
+  return icons[appStore.themeMode] || 'fa-moon';
 });
 
 function handleThemeClick() {
-  toggleTheme();
+  appStore.toggleTheme();
 }
 
 function handleBack() {

package/components/PrismSecureInput/PrismSecureInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="prism-secure-input" :class="{ 'dark-mode': isDarkMode }">
+  <view class="prism-secure-input" :class="{ 'dark-mode': appStore.isDarkMode }">
     <!-- 密码输入框 -->
     <view class="password-boxes" @click="showKeyboardModal">
       <view
@@ -57,7 +57,7 @@
 
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue';
-import { useTheme } from '../../composables/useTheme';
+import { useAppStore } from '../../store/app';
 
 const props = defineProps({
   modelValue: {
@@ -80,7 +80,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'complete']);
 
-const { isDarkMode } = useTheme();
+const appStore = useAppStore();
 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': isDarkMode,
+      'dark-mode': appStore.isDarkMode,
       'active': modelValue,
       'square': square,
       'disabled': disabled,
@@ -20,7 +20,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { useTheme } from '../../composables/useTheme';
+import { useAppStore } from '../../store/app';
 
 const props = defineProps({
   modelValue: {
@@ -56,7 +56,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue', 'change']);
 
-const { isDarkMode } = useTheme();
+const appStore = useAppStore();
 
 function handleToggle() {
   if (props.disabled) return;

package/components/PrismTabBar/PrismTabBar.vue

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

package/package.json

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

package/styles/index.scss

@@ -7,40 +7,40 @@
  */
 
 // SCSS 变量（必须最先引入，供其他文件使用）
-@import './variables';
+@use './variables' as *;
 
 // 基础样式和 CSS 变量
-@import './base';
+@use './base';
 
 // 图标颜色主题
-@import './colors.scss';
+@use './colors';
 
 // 按钮组件
-@import './button';
+@use './button';
 
 // 表单组件
-@import './form';
+@use './form';
 
 // 卡片和容器组件
-@import './card';
+@use './card';
 
 // 列表组件
-@import './list';
+@use './list';
 
 // 弹出层组件
-@import './overlay';
+@use './overlay';
 
 // 数据展示组件
-@import './data';
+@use './data';
 
 // 反馈组件
-@import './feedback';
+@use './feedback';
 
 // 导航组件
-@import './navigation';
+@use './navigation';
 
 // 特效组件
-@import './effects';
+@use './effects';
 
 // 工具类
-@import './utilities';
+@use './utilities';

package/styles/variables.scss

@@ -8,7 +8,7 @@
  */
 
 // 引入主题文件（切换主题只需修改这一行）
-@import '../theme/blue.scss';
+@use '../theme/blue.scss' as *;
 
 /* ============================================================
    一、浅色模式变量（使用 !default，允许主题文件覆盖）

package/composables/useTheme.js

@@ -1,111 +0,0 @@
-/**
- * 主题检测 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;