@ruixinkeji/prism-ui 1.0.6 → 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,8 +157,8 @@
 
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue';
-import { useAppStore } from '@/store/app';
-import { rpx2px } from '@/utils/system';
+import { useTheme } from '../../composables/useTheme';
+import { rpx2px } from '../../utils/system';
 
 const props = defineProps({
   modelValue: {
@@ -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,8 +103,8 @@
 
 <script setup>
 import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/app';
-import PrismGroupSticky from '@/components/PrismGroupSticky/PrismGroupSticky.vue';
+import { useTheme } from '../../composables/useTheme';
+import PrismGroupSticky from '../PrismGroupSticky/PrismGroupSticky.vue';
 
 const props = defineProps({
   modelValue: {
@@ -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,9 +187,9 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue';
-import { useAppStore } from '@/store/app';
-import { rpx2px } from '@/utils/system';
-import { getLunarDayStr } from '@/utils/lunar';
+import { useTheme } from '../../composables/useTheme';
+import { rpx2px } from '../../utils/system';
+import { getLunarDayStr } from '../../utils/lunar';
 
 const props = defineProps({
   modelValue: {
@@ -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.6",
+  "version": "1.0.8",
   "description": "Prism UI - 现代化玻璃态设计 uni-app 组件库",
   "main": "index.js",
   "module": "index.esm.js",
@@ -9,8 +9,10 @@
     "styles",
     "theme",
     "components",
+    "composables",
     "fonts",
     "store",
+    "utils",
     "index.js",
     "index.esm.js",
     "index.d.ts",

package/utils/lunar.js

@@ -0,0 +1,188 @@
+/**
+ * 农历工具
+ */
+
+// 农历数据（1900-2100年）
+const lunarInfo = [
+  0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2,
+  0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977,
+  0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970,
+  0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950,
+  0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557,
+  0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0,
+  0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0,
+  0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6,
+  0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570,
+  0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0,
+  0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5,
+  0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930,
+  0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530,
+  0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45,
+  0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0,
+  0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0,
+  0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4,
+  0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0,
+  0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160,
+  0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252,
+  0x0d520
+];
+
+// 农历月份名称
+const lunarMonths = ['正', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊'];
+
+// 农历日期名称
+const lunarDays = [
+  '初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十',
+  '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
+  '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十'
+];
+
+// 天干
+const tianGan = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'];
+
+// 地支
+const diZhi = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
+
+// 生肖
+const animals = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'];
+
+/**
+ * 返回农历年的总天数
+ */
+function getLunarYearDays(year) {
+  let sum = 348;
+  for (let i = 0x8000; i > 0x8; i >>= 1) {
+    sum += (lunarInfo[year - 1900] & i) ? 1 : 0;
+  }
+  return sum + getLeapDays(year);
+}
+
+/**
+ * 返回农历年闰月的天数
+ */
+function getLeapDays(year) {
+  if (getLeapMonth(year)) {
+    return (lunarInfo[year - 1900] & 0x10000) ? 30 : 29;
+  }
+  return 0;
+}
+
+/**
+ * 返回农历年闰月是哪个月（1-12），没有闰月返回0
+ */
+function getLeapMonth(year) {
+  return lunarInfo[year - 1900] & 0xf;
+}
+
+/**
+ * 返回农历年某月的天数
+ */
+function getLunarMonthDays(year, month) {
+  return (lunarInfo[year - 1900] & (0x10000 >> month)) ? 30 : 29;
+}
+
+/**
+ * 公历转农历
+ * @param {number} year - 公历年
+ * @param {number} month - 公历月（1-12）
+ * @param {number} day - 公历日
+ * @returns {Object} 农历信息
+ */
+export function solarToLunar(year, month, day) {
+  // 参数检查
+  if (year < 1900 || year > 2100) {
+    return null;
+  }
+
+  let offset = 0;
+  const baseDate = new Date(1900, 0, 31);
+  const objDate = new Date(year, month - 1, day);
+
+  offset = Math.floor((objDate - baseDate) / 86400000);
+
+  let lunarYear, lunarMonth, lunarDay;
+  let isLeap = false;
+
+  // 计算农历年
+  for (lunarYear = 1900; lunarYear < 2101 && offset > 0; lunarYear++) {
+    const yearDays = getLunarYearDays(lunarYear);
+    offset -= yearDays;
+  }
+  if (offset < 0) {
+    offset += getLunarYearDays(--lunarYear);
+  }
+
+  // 计算农历月
+  const leapMonth = getLeapMonth(lunarYear);
+  let isLeapMonth = false;
+
+  for (lunarMonth = 1; lunarMonth < 13 && offset > 0; lunarMonth++) {
+    // 闰月
+    if (leapMonth > 0 && lunarMonth === (leapMonth + 1) && !isLeapMonth) {
+      --lunarMonth;
+      isLeapMonth = true;
+      const leapDays = getLeapDays(lunarYear);
+      offset -= leapDays;
+    } else {
+      offset -= getLunarMonthDays(lunarYear, lunarMonth);
+    }
+
+    if (isLeapMonth && lunarMonth === (leapMonth + 1)) {
+      isLeapMonth = false;
+    }
+  }
+
+  if (offset === 0 && leapMonth > 0 && lunarMonth === leapMonth + 1) {
+    if (isLeapMonth) {
+      isLeapMonth = false;
+    } else {
+      isLeapMonth = true;
+      --lunarMonth;
+    }
+  }
+
+  if (offset < 0) {
+    offset += getLunarMonthDays(lunarYear, --lunarMonth);
+  }
+
+  lunarDay = offset + 1;
+  isLeap = isLeapMonth;
+
+  return {
+    year: lunarYear,
+    month: lunarMonth,
+    day: lunarDay,
+    isLeap,
+    monthStr: (isLeap ? '闰' : '') + lunarMonths[lunarMonth - 1] + '月',
+    dayStr: lunarDays[lunarDay - 1],
+    yearGanZhi: getGanZhiYear(lunarYear),
+    animal: animals[(lunarYear - 4) % 12]
+  };
+}
+
+/**
+ * 获取农历年的干支
+ */
+function getGanZhiYear(year) {
+  const ganIndex = (year - 4) % 10;
+  const zhiIndex = (year - 4) % 12;
+  return tianGan[ganIndex] + diZhi[zhiIndex];
+}
+
+/**
+ * 获取农历日期的简短显示（用于日历）
+ * @param {number} year - 公历年
+ * @param {number} month - 公历月（1-12）
+ * @param {number} day - 公历日
+ * @returns {string} 农历日期简短显示
+ */
+export function getLunarDayStr(year, month, day) {
+  const lunar = solarToLunar(year, month, day);
+  if (!lunar) return '';
+
+  // 初一显示月份，其他显示日期
+  if (lunar.day === 1) {
+    return lunar.monthStr;
+  }
+  return lunar.dayStr;
+}

package/utils/system.js

@@ -0,0 +1,154 @@
+/**
+ * 系统工具方法
+ */
+
+// 缓存系统信息，避免重复获取
+let systemInfoCache = null;
+
+/**
+ * 获取系统信息（带缓存）
+ * @returns {Object} 系统信息
+ */
+export function getSystemInfo() {
+  if (!systemInfoCache) {
+    systemInfoCache = uni.getSystemInfoSync();
+  }
+  return systemInfoCache;
+}
+
+/**
+ * 获取屏幕宽度
+ * @returns {number} 屏幕宽度（px）
+ */
+export function getScreenWidth() {
+  return getSystemInfo().windowWidth;
+}
+
+/**
+ * 获取屏幕高度
+ * @returns {number} 屏幕高度（px）
+ */
+export function getScreenHeight() {
+  return getSystemInfo().windowHeight;
+}
+
+/**
+ * rpx 转 px
+ * @param {number} rpx - rpx 值
+ * @returns {number} px 值（取整）
+ */
+export function rpx2px(rpx) {
+  const screenWidth = getScreenWidth();
+  return Math.round(rpx * screenWidth / 750);
+}
+
+/**
+ * px 转 rpx
+ * @param {number} px - px 值
+ * @returns {number} rpx 值（取整）
+ */
+export function px2rpx(px) {
+  const screenWidth = getScreenWidth();
+  return Math.round(px * 750 / screenWidth);
+}
+
+/**
+ * 获取状态栏高度
+ * @returns {number} 状态栏高度（px）
+ */
+export function getStatusBarHeight() {
+  return getSystemInfo().statusBarHeight || 0;
+}
+
+/**
+ * 获取导航栏高度（状态栏 + 标题栏）
+ * @returns {number} 导航栏高度（px）
+ */
+export function getNavBarHeight() {
+  const statusBarHeight = getStatusBarHeight();
+  // 标题栏高度：iOS 44px，Android 48px
+  const titleBarHeight = getSystemInfo().platform === 'ios' ? 44 : 48;
+  return statusBarHeight + titleBarHeight;
+}
+
+/**
+ * 获取安全区域信息
+ * @returns {Object} 安全区域 { top, bottom, left, right }
+ */
+export function getSafeArea() {
+  const info = getSystemInfo();
+  return info.safeArea || {
+    top: info.statusBarHeight || 0,
+    bottom: 0,
+    left: 0,
+    right: info.windowWidth
+  };
+}
+
+/**
+ * 获取底部安全区域高度
+ * @returns {number} 底部安全区域高度（px）
+ */
+export function getSafeAreaBottom() {
+  const info = getSystemInfo();
+  const safeArea = info.safeArea;
+  if (safeArea) {
+    return info.screenHeight - safeArea.bottom;
+  }
+  return 0;
+}
+
+/**
+ * 判断是否为 iOS 系统
+ * @returns {boolean}
+ */
+export function isIOS() {
+  return getSystemInfo().platform === 'ios';
+}
+
+/**
+ * 判断是否为 Android 系统
+ * @returns {boolean}
+ */
+export function isAndroid() {
+  return getSystemInfo().platform === 'android';
+}
+
+/**
+ * 判断是否为 H5 环境
+ * @returns {boolean}
+ */
+export function isH5() {
+  // #ifdef H5
+  return true;
+  // #endif
+  // #ifndef H5
+  return false;
+  // #endif
+}
+
+/**
+ * 判断是否为小程序环境
+ * @returns {boolean}
+ */
+export function isMiniProgram() {
+  // #ifdef MP
+  return true;
+  // #endif
+  // #ifndef MP
+  return false;
+  // #endif
+}
+
+/**
+ * 判断是否为 App 环境
+ * @returns {boolean}
+ */
+export function isApp() {
+  // #ifdef APP-PLUS
+  return true;
+  // #endif
+  // #ifndef APP-PLUS
+  return false;
+  // #endif
+}