npm - @ruixinkeji/prism-ui - Versions diffs - 1.0.16 → 1.0.17 - Mend

@ruixinkeji/prism-ui 1.0.16 → 1.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (382) hide show

package/dist/dev/.sourcemap/mp-weixin/pages/demo/colors.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"colors.js","sources":["pages/demo/colors.vue","../uniPage:/cGFnZXMvZGVtby9jb2xvcnMudnVl"],"sourcesContent":["<template>\n <view class=\"prism-page\" :class=\"{ 'dark-mode': appStore.isDarkMode }\">\n \n <PrismNavBar\n title=\"颜色主题系统\"\n icon=\"fa-palette\"\n icon-color=\"pink\"\n :show-back=\"true\"\n />\n\n \n <view class=\"color-content-wrapper\" :style=\"{ paddingTop: navbarHeight + 'px' }\">\n <scroll-view\n class=\"prism-main\"\n scroll-y\n :scroll-into-view=\"scrollIntoView\"\n @scroll=\"onScroll\"\n >\n\n \n <view class=\"prism-section\" id=\"color-overview\">\n <view class=\"prism-card\">\n <view class=\"card-title\">颜色系统总览</view>\n <view class=\"overview-grid\">\n <view class=\"overview-item\">\n <text class=\"overview-value\">14</text>\n <text class=\"overview-label\">种颜色</text>\n </view>\n <view class=\"overview-item\">\n <text class=\"overview-value\">5</text>\n <text class=\"overview-label\">种形态</text>\n </view>\n <view class=\"overview-item\">\n <text class=\"overview-value\">3</text>\n <text class=\"overview-label\">种组件</text>\n </view>\n <view class=\"overview-item\">\n <text class=\"overview-value\">210</text>\n <text class=\"overview-label\">个CSS类</text>\n </view>\n </view>\n\n \n <view class=\"color-palette\">\n <view\n v-for=\"color in allColors.filter(c => !c.isGradient)\"\n :key=\"color.name\"\n class=\"palette-item\"\n :style=\"{ background: color.hex }\"\n @click=\"scrollToColor(color.name)\"\n >\n <text class=\"palette-name\">{{ color.name }}</text>\n </view>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"prism-card\">\n <view class=\"card-title\">基本颜色用法</view>\n <view class=\"style-list\">\n <view class=\"style-item\">\n <view class=\"style-demo-text prism-color-blue\">Aa</view>\n <view class=\"style-info\">\n <text class=\"style-name\">文字颜色 (color)</text>\n <text class=\"style-desc\">设置文字颜色</text>\n <text class=\"style-class\">.prism-color-{颜色}</text>\n </view>\n </view>\n <view class=\"style-item\">\n <view class=\"style-demo-box prism-bg-blue\"></view>\n <view class=\"style-info\">\n <text class=\"style-name\">背景颜色 (bg)</text>\n <text class=\"style-desc\">设置背景颜色</text>\n <text class=\"style-class\">.prism-bg-{颜色}</text>\n </view>\n </view>\n <view class=\"style-item\">\n <view class=\"style-demo-box prism-bg-blue-light\"></view>\n <view class=\"style-info\">\n <text class=\"style-name\">浅色背景 (bg-light)</text>\n <text class=\"style-desc\">设置浅色背景</text>\n <text class=\"style-class\">.prism-bg-{颜色}-light</text>\n </view>\n </view>\n <view class=\"style-item\">\n <view class=\"style-demo-box style-demo-border prism-border-blue\"></view>\n <view class=\"style-info\">\n <text class=\"style-name\">边框颜色 (border)</text>\n <text class=\"style-desc\">设置边框颜色</text>\n <text class=\"style-class\">.prism-border-{颜色}</text>\n </view>\n </view>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section\" id=\"color-icon-usage\">\n <view class=\"prism-card\">\n <view class=\"card-title\">图标容器用法</view>\n <view class=\"style-list\">\n <view class=\"style-item\">\n <view class=\"prism-icon purple\">\n <text class=\"fa fa-palette\"></text>\n </view>\n <view class=\"style-info\">\n <text class=\"style-name\">自适应 (adaptive)</text>\n <text class=\"style-desc\">自动适配深色/浅色模式</text>\n <text class=\"style-class\">.prism-icon .{颜色}</text>\n </view>\n </view>\n <view class=\"style-item\">\n <view class=\"prism-icon purple solid\">\n <text class=\"fa fa-palette\"></text>\n </view>\n <view class=\"style-info\">\n <text class=\"style-name\">实心 (solid)</text>\n <text class=\"style-desc\">纯色背景，白色内容</text>\n <text class=\"style-class\">.prism-icon .{颜色} .solid</text>\n </view>\n </view>\n <view class=\"style-item\">\n <view class=\"prism-icon purple gradient\">\n <text class=\"fa fa-palette\"></text>\n </view>\n <view class=\"style-info\">\n <text class=\"style-name\">渐变 (gradient)</text>\n <text class=\"style-desc\">双色渐变，带阴影</text>\n <text class=\"style-class\">.prism-icon .{颜色} .gradient</text>\n </view>\n </view>\n <view class=\"style-item\">\n <view class=\"prism-icon purple glass\">\n <text class=\"fa fa-palette\"></text>\n </view>\n <view class=\"style-info\">\n <text class=\"style-name\">玻璃 (glass)</text>\n <text class=\"style-desc\">半透明毛玻璃效果</text>\n <text class=\"style-class\">.prism-icon .{颜色} .glass</text>\n </view>\n </view>\n <view class=\"style-item\">\n <view class=\"prism-icon purple outline\">\n <text class=\"fa fa-palette\"></text>\n </view>\n <view class=\"style-info\">\n <text class=\"style-name\">轮廓 (outline)</text>\n <text class=\"style-desc\">透明背景，彩色边框</text>\n <text class=\"style-class\">.prism-icon .{颜色} .outline</text>\n </view>\n </view>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"prism-card\">\n <view class=\"card-title\">按钮用法</view>\n <view class=\"style-list\">\n <view class=\"style-item\">\n <view class=\"prism-btn green style-demo-btn\">按钮</view>\n <view class=\"style-info\">\n <text class=\"style-name\">自适应 (adaptive)</text>\n <text class=\"style-desc\">自动适配深色/浅色模式</text>\n <text class=\"style-class\">.prism-btn .{颜色}</text>\n </view>\n </view>\n <view class=\"style-item\">\n <view class=\"prism-btn green solid style-demo-btn\">按钮</view>\n <view class=\"style-info\">\n <text class=\"style-name\">实心 (solid)</text>\n <text class=\"style-desc\">纯色背景，白色内容</text>\n <text class=\"style-class\">.prism-btn .{颜色} .solid</text>\n </view>\n </view>\n <view class=\"style-item\">\n <view class=\"prism-btn green gradient style-demo-btn\">按钮</view>\n <view class=\"style-info\">\n <text class=\"style-name\">渐变 (gradient)</text>\n <text class=\"style-desc\">双色渐变，带阴影</text>\n <text class=\"style-class\">.prism-btn .{颜色} .gradient</text>\n </view>\n </view>\n <view class=\"style-item\">\n <view class=\"prism-btn green glass style-demo-btn\">按钮</view>\n <view class=\"style-info\">\n <text class=\"style-name\">玻璃 (glass)</text>\n <text class=\"style-desc\">半透明毛玻璃效果</text>\n <text class=\"style-class\">.prism-btn .{颜色} .glass</text>\n </view>\n </view>\n <view class=\"style-item\">\n <view class=\"prism-btn green outline style-demo-btn\">按钮</view>\n <view class=\"style-info\">\n <text class=\"style-name\">轮廓 (outline)</text>\n <text class=\"style-desc\">透明背景，彩色边框</text>\n <text class=\"style-class\">.prism-btn .{颜色} .outline</text>\n </view>\n </view>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"prism-card\">\n <view class=\"card-title\">卡片用法</view>\n <view class=\"card-demos\">\n <view class=\"card-demo-item prism-card orange\">\n <text class=\"card-demo-title\">自适应</text>\n <text class=\"card-demo-class\">.prism-card .{颜色}</text>\n </view>\n <view class=\"card-demo-item prism-card orange solid\">\n <text class=\"card-demo-title\">实心</text>\n <text class=\"card-demo-class\">.prism-card .{颜色} .solid</text>\n </view>\n <view class=\"card-demo-item prism-card orange gradient\">\n <text class=\"card-demo-title\">渐变</text>\n <text class=\"card-demo-class\">.prism-card .{颜色} .gradient</text>\n </view>\n <view class=\"card-demo-item prism-card orange glass\">\n <text class=\"card-demo-title\">玻璃</text>\n <text class=\"card-demo-class\">.prism-card .{颜色} .glass</text>\n </view>\n <view class=\"card-demo-item prism-card orange outline\">\n <text class=\"card-demo-title\">轮廓</text>\n <text class=\"card-demo-class\">.prism-card .{颜色} .outline</text>\n </view>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"prism-card\">\n <view class=\"card-title\">原子化修饰类（推荐）</view>\n <view class=\"section-desc\" style=\"margin-bottom: 24rpx; color: var(--prism-text-secondary); font-size: 24rpx;\">\n 组件 + 颜色 + 尺寸 + 形态，灵活组合\n </view>\n\n \n <view class=\"style-list\">\n <view class=\"style-item\">\n <view class=\"prism-icon-btn blue md\">\n <text class=\"fa fa-star\"></text>\n </view>\n <view class=\"style-info\">\n <text class=\"style-name\">图标按钮</text>\n <text class=\"style-desc\">prism-icon-btn + {颜色} + {尺寸}</text>\n <text class=\"style-class\">.prism-icon-btn .blue .md</text>\n </view>\n </view>\n <view class=\"style-item\">\n <view class=\"prism-icon-btn green md solid\">\n <text class=\"fa fa-check\"></text>\n </view>\n <view class=\"style-info\">\n <text class=\"style-name\">实心形态</text>\n <text class=\"style-desc\">添加 solid 修饰</text>\n <text class=\"style-class\">.prism-icon-btn .green .md .solid</text>\n </view>\n </view>\n <view class=\"style-item\">\n <view class=\"prism-icon-btn ai md gradient\">\n <text class=\"fa fa-magic\"></text>\n </view>\n <view class=\"style-info\">\n <text class=\"style-name\">渐变形态</text>\n <text class=\"style-desc\">添加 gradient 修饰</text>\n <text class=\"style-class\">.prism-icon-btn .ai .md .gradient</text>\n </view>\n </view>\n <view class=\"style-item\">\n <view class=\"prism-text-btn primary sm solid\">\n <text class=\"fa fa-plus\"></text>\n <text>新增</text>\n </view>\n <view class=\"style-info\">\n <text class=\"style-name\">图标文字按钮</text>\n <text class=\"style-desc\">prism-text-btn + 颜色 + 尺寸 + 形态</text>\n <text class=\"style-class\">.prism-text-btn .primary .sm .solid</text>\n </view>\n </view>\n </view>\n </view>\n </view>\n\n \n <view\n class=\"prism-section\"\n v-for=\"color in allColors.filter(c => !c.isGradient)\"\n :key=\"color.name\"\n >\n <view\n :id=\"'color-' + color.name\"\n class=\"prism-card color-section\"\n >\n <view class=\"color-header\">\n <view class=\"color-swatch\" :style=\"{ background: color.hex }\"></view>\n <view class=\"color-title-info\">\n <text class=\"color-name\">{{ color.label }}</text>\n <view class=\"color-var-line\">\n <text class=\"color-var\" :style=\"{ color: color.hex }\">${{ 'prism-' + color.name }}</text>\n <text class=\"color-hex\">{{ color.hex }}</text>\n </view>\n </view>\n </view>\n\n \n <view class=\"color-vars\">\n <view class=\"var-tile\">\n <view class=\"var-tile-preview\" :style=\"{ background: color.hexDark }\">\n <text class=\"var-tile-label\">深色模式</text>\n <text class=\"var-tile-value\">${{ 'prism-' + color.name + '-dark' }}</text>\n </view>\n </view>\n <view class=\"var-tile\">\n <view class=\"var-tile-preview\" :style=\"{ background: color.hexLighter }\">\n <text class=\"var-tile-label\">更亮色</text>\n <text class=\"var-tile-value\">${{ 'prism-' + color.name + '-lighter' }}</text>\n </view>\n </view>\n <view class=\"var-tile\">\n <view class=\"var-tile-preview var-tile-preview--gradient\" :style=\"{ background: 'linear-gradient(135deg, ' + color.hex + ' 0%, ' + color.hexDark + ' 100%)' }\">\n <text class=\"var-tile-label\">渐变</text>\n <text class=\"var-tile-value\">${{ 'prism-' + color.name + '-gradient' }}</text>\n </view>\n </view>\n </view>\n\n \n <view class=\"component-section\">\n <text class=\"component-title\">图标容器 (icon)</text>\n <view class=\"component-demos\">\n <view class=\"demo-item\">\n <view class=\"demo-box prism-icon\" :class=\"color.name\">\n <text class=\"fa\" :class=\"color.icon\"></text>\n </view>\n <text class=\"demo-label\">自适应</text>\n </view>\n <view class=\"demo-item\">\n <view class=\"demo-box prism-icon solid\" :class=\"color.name\">\n <text class=\"fa\" :class=\"color.icon\"></text>\n </view>\n <text class=\"demo-label\">实心</text>\n </view>\n <view class=\"demo-item\">\n <view class=\"demo-box prism-icon gradient\" :class=\"color.name\">\n <text class=\"fa\" :class=\"color.icon\"></text>\n </view>\n <text class=\"demo-label\">渐变</text>\n </view>\n <view class=\"demo-item\">\n <view class=\"demo-box prism-icon glass\" :class=\"color.name\">\n <text class=\"fa\" :class=\"color.icon\"></text>\n </view>\n <text class=\"demo-label\">玻璃</text>\n </view>\n <view class=\"demo-item\">\n <view class=\"demo-box prism-icon outline\" :class=\"color.name\">\n <text class=\"fa\" :class=\"color.icon\"></text>\n </view>\n <text class=\"demo-label\">轮廓</text>\n </view>\n </view>\n </view>\n\n \n <view class=\"component-section\">\n <text class=\"component-title\">按钮 (btn)</text>\n <view class=\"btn-demos\">\n <view class=\"btn-demo-row\">\n <view class=\"prism-btn\" :class=\"color.name\">\n <text>自适应</text>\n </view>\n <text class=\"btn-class\">.prism-btn .{{ color.name }}</text>\n </view>\n <view class=\"btn-demo-row\">\n <view class=\"prism-btn solid\" :class=\"color.name\">\n <text>实心</text>\n </view>\n <text class=\"btn-class\">.prism-btn .{{ color.name }} .solid</text>\n </view>\n <view class=\"btn-demo-row\">\n <view class=\"prism-btn gradient\" :class=\"color.name\">\n <text>渐变</text>\n </view>\n <text class=\"btn-class\">.prism-btn .{{ color.name }} .gradient</text>\n </view>\n <view class=\"btn-demo-row\">\n <view class=\"prism-btn glass\" :class=\"color.name\">\n <text>玻璃</text>\n </view>\n <text class=\"btn-class\">.prism-btn .{{ color.name }} .glass</text>\n </view>\n <view class=\"btn-demo-row\">\n <view class=\"prism-btn outline\" :class=\"color.name\">\n <text>轮廓</text>\n </view>\n <text class=\"btn-class\">.prism-btn .{{ color.name }} .outline</text>\n </view>\n </view>\n </view>\n\n \n <view class=\"component-section\">\n <text class=\"component-title\">卡片 (card)</text>\n <view class=\"card-demos\">\n <view class=\"card-demo-item prism-card\" :class=\"color.name\">\n <text class=\"card-demo-title\">自适应</text>\n <text class=\"card-demo-class\">.prism-card .{{ color.name }}</text>\n </view>\n <view class=\"card-demo-item prism-card solid\" :class=\"color.name\">\n <text class=\"card-demo-title\">实心</text>\n <text class=\"card-demo-class\">.prism-card .{{ color.name }} .solid</text>\n </view>\n <view class=\"card-demo-item prism-card gradient\" :class=\"color.name\">\n <text class=\"card-demo-title\">渐变</text>\n <text class=\"card-demo-class\">.prism-card .{{ color.name }} .gradient</text>\n </view>\n <view class=\"card-demo-item prism-card glass\" :class=\"color.name\">\n <text class=\"card-demo-title\">玻璃</text>\n <text class=\"card-demo-class\">.prism-card .{{ color.name }} .glass</text>\n </view>\n <view class=\"card-demo-item prism-card outline\" :class=\"color.name\">\n <text class=\"card-demo-title\">轮廓</text>\n <text class=\"card-demo-class\">.prism-card .{{ color.name }} .outline</text>\n </view>\n </view>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"prism-card\">\n <view class=\"card-title\">背景色变量</view>\n <view class=\"subsection\">\n <view class=\"subsection-title\">页面背景色（最深）</view>\n <view class=\"color-demo-box\" style=\"background: var(--prism-bg-color-page);\">\n <text class=\"color-demo-text\">var(--prism-bg-color-page)</text>\n <text class=\"color-demo-desc\">用于 page、.prism-page、scroll-view（深色#121212）</text>\n </view>\n </view>\n <view class=\"subsection\">\n <view class=\"subsection-title\">内容背景色</view>\n <view class=\"color-demo-box\" style=\"background: var(--prism-bg-color);\">\n <text class=\"color-demo-text\">var(--prism-bg-color)</text>\n <text class=\"color-demo-desc\">用于区块、分割区域（深色#1A1A1A，比 page 稍亮）</text>\n </view>\n </view>\n <view class=\"subsection\">\n <view class=\"subsection-title\">卡片背景色（最亮）</view>\n <view class=\"color-demo-box\" style=\"background: var(--prism-bg-color-card);\">\n <text class=\"color-demo-text\">var(--prism-bg-color-card)</text>\n <text class=\"color-demo-desc\">用于卡片、弹窗、菜单（深色#242424）</text>\n </view>\n </view>\n <view class=\"subsection\">\n <view class=\"subsection-title\">输入框背景</view>\n <view class=\"color-demo-box\" style=\"background: var(--prism-input-bg);\">\n <text class=\"color-demo-text\">var(--prism-input-bg)</text>\n <text class=\"color-demo-desc\">用于输入框、选择器</text>\n </view>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"prism-card\">\n <view class=\"card-title\">文字色变量</view>\n <view class=\"subsection\">\n <view class=\"subsection-title\">主要文字</view>\n <view class=\"color-demo-box\" style=\"background: var(--prism-bg-color-card);\">\n <text class=\"color-demo-text\" style=\"color: var(--prism-text-primary);\">var(--prism-text-primary)</text>\n <text class=\"color-demo-desc\">用于标题、重要信息</text>\n </view>\n </view>\n <view class=\"subsection\">\n <view class=\"subsection-title\">次要文字</view>\n <view class=\"color-demo-box\" style=\"background: var(--prism-bg-color-card);\">\n <text class=\"color-demo-text\" style=\"color: var(--prism-text-secondary);\">var(--prism-text-secondary)</text>\n <text class=\"color-demo-desc\">用于描述、辅助信息</text>\n </view>\n </view>\n <view class=\"subsection\">\n <view class=\"subsection-title\">占位符文字</view>\n <view class=\"color-demo-box\" style=\"background: var(--prism-bg-color-card);\">\n <text class=\"color-demo-text\" style=\"color: var(--prism-text-placeholder);\">var(--prism-text-placeholder)</text>\n <text class=\"color-demo-desc\">用于输入框占位符</text>\n </view>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"prism-card\">\n <view class=\"card-title\">边框色变量</view>\n <view class=\"subsection\">\n <view class=\"subsection-title\">浅色边框</view>\n <view class=\"color-demo-box\" style=\"background: var(--prism-bg-color-card); border: 2rpx solid var(--prism-border-color-light);\">\n <text class=\"color-demo-text\">var(--prism-border-color-light)</text>\n <text class=\"color-demo-desc\">用于分割线、边框</text>\n </view>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"prism-card\">\n <view class=\"card-title\">主题色变量</view>\n <view class=\"subsection\">\n <view class=\"subsection-title\">主题色</view>\n <view class=\"color-demo-box\" style=\"background: var(--prism-primary-color);\">\n <text class=\"color-demo-text\" style=\"color: #fff;\">var(--prism-primary-color)</text>\n <text class=\"color-demo-desc\" style=\"color: rgba(255,255,255,0.8);\">用于主要按钮、链接</text>\n </view>\n </view>\n <view class=\"subsection\">\n <view class=\"subsection-title\">成功色</view>\n <view class=\"color-demo-box\" style=\"background: var(--prism-success-color);\">\n <text class=\"color-demo-text\" style=\"color: #fff;\">var(--prism-success-color)</text>\n <text class=\"color-demo-desc\" style=\"color: rgba(255,255,255,0.8);\">用于成功提示</text>\n </view>\n </view>\n <view class=\"subsection\">\n <view class=\"subsection-title\">警告色</view>\n <view class=\"color-demo-box\" style=\"background: var(--prism-warning-color);\">\n <text class=\"color-demo-text\" style=\"color: #fff;\">var(--prism-warning-color)</text>\n <text class=\"color-demo-desc\" style=\"color: rgba(255,255,255,0.8);\">用于警告提示</text>\n </view>\n </view>\n <view class=\"subsection\">\n <view class=\"subsection-title\">危险色</view>\n <view class=\"color-demo-box\" style=\"background: var(--prism-danger-color);\">\n <text class=\"color-demo-text\" style=\"color: #fff;\">var(--prism-danger-color)</text>\n <text class=\"color-demo-desc\" style=\"color: rgba(255,255,255,0.8);\">用于错误提示</text>\n </view>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"prism-card\">\n <view class=\"card-title\">语义化别名</view>\n <view class=\"alias-list\">\n <view class=\"alias-item\">\n <text class=\"alias-name\">primary</text>\n <text class=\"alias-arrow\">→</text>\n <text class=\"alias-color\">blue</text>\n </view>\n <view class=\"alias-item\">\n <text class=\"alias-name\">success</text>\n <text class=\"alias-arrow\">→</text>\n <text class=\"alias-color\">green</text>\n </view>\n <view class=\"alias-item\">\n <text class=\"alias-name\">warning</text>\n <text class=\"alias-arrow\">→</text>\n <text class=\"alias-color\">orange</text>\n </view>\n <view class=\"alias-item\">\n <text class=\"alias-name\">danger</text>\n <text class=\"alias-arrow\">→</text>\n <text class=\"alias-color\">red</text>\n </view>\n <view class=\"alias-item\">\n <text class=\"alias-name\">info</text>\n <text class=\"alias-arrow\">→</text>\n <text class=\"alias-color\">cyan</text>\n </view>\n </view>\n <view class=\"alias-example\">\n <text class=\"example-text\">.prism-btn .primary .gradient = .prism-btn .blue .gradient</text>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-safe-area-bottom\"></view>\n </scroll-view>\n </view>\n\n \n <PrismIndexBar\n :items=\"indexBarItems\"\n :is-dark-mode=\"appStore.isDarkMode\"\n v-model=\"currentColorIndex\"\n @change=\"onColorIndexChange\"\n />\n</view>\n</template>\n\n<script setup>\nimport { computed, ref, getCurrentInstance } from 'vue';\nimport { useAppStore } from '@/store/app';\nimport PrismNavBar from \"../../components/PrismNavBar/PrismNavBar.vue\";\nimport PrismIndexBar from \"../../components/PrismIndexBar/PrismIndexBar.vue\";\n\nconst appStore = useAppStore();\nconst instance = getCurrentInstance();\n\nconst navbarHeight = computed(() => {\n return appStore.statusBarHeight + 44;\n});\n\n// 当前选中的颜色索引\nconst currentColorIndex = ref('');\n// 滚动到的视图ID\nconst scrollIntoView = ref('');\n\n// 索引条数据（转换为组件需要的格式）\nconst indexBarItems = computed(() => {\n return allColors.map(color => ({\n value: color.name,\n label: color.label,\n background: color.hex\n }));\n});\n\n// 索引改变处理\nconst onColorIndexChange = (colorName) => {\n scrollIntoView.value = 'color-' + colorName;\n};\n\n// 完整的颜色列表（包含特殊索引项）\nconst allColors = [\n { name: 'overview', label: '系统总览', hex: 'linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%)', isGradient: true },\n { name: 'icon-usage', label: '组件用法', hex: 'linear-gradient(135deg, rgba(102, 126, 234, 0.6) 0%, rgba(118, 75, 162, 0.6) 100%)', isGradient: true },\n { name: 'purple', label: 'Purple 紫色', hex: '#722ED1', hexDark: '#A855F7', hexLighter: '#C084FC', icon: 'fa-crown' },\n { name: 'blue', label: 'Blue 蓝色', hex: '#3478F6', hexDark: '#60A5FA', hexLighter: '#93C5FD', icon: 'fa-droplet' },\n { name: 'green', label: 'Green 绿色', hex: '#00B42A', hexDark: '#34D399', hexLighter: '#6EE7B7', icon: 'fa-leaf' },\n { name: 'red', label: 'Red 红色', hex: '#F53F3F', hexDark: '#F87171', hexLighter: '#FCA5A5', icon: 'fa-heart' },\n { name: 'orange', label: 'Orange 橙色', hex: '#FF7D00', hexDark: '#FB923C', hexLighter: '#FDBA74', icon: 'fa-fire' },\n { name: 'cyan', label: 'Cyan 青色', hex: '#14C9C9', hexDark: '#22D3EE', hexLighter: '#67E8F9', icon: 'fa-water' },\n { name: 'yellow', label: 'Yellow 黄色', hex: '#FFB400', hexDark: '#FCD34D', hexLighter: '#FDE68A', icon: 'fa-sun' },\n { name: 'pink', label: 'Pink 粉色', hex: '#F53F7F', hexDark: '#F472B6', hexLighter: '#F9A8D4', icon: 'fa-heart' },\n { name: 'magenta', label: 'Magenta 品红', hex: '#EB2F96', hexDark: '#EC4899', hexLighter: '#F472B6', icon: 'fa-file-import' },\n { name: 'indigo', label: 'Indigo 靛蓝', hex: '#2F54EB', hexDark: '#818CF8', hexLighter: '#A5B4FC', icon: 'fa-qrcode' },\n { name: 'teal', label: 'Teal 青绿', hex: '#13C2C2', hexDark: '#2DD4BF', hexLighter: '#5EEAD4', icon: 'fa-road' },\n { name: 'violet', label: 'Violet 紫罗兰', hex: '#667eea', hexDark: '#8599ee', hexLighter: '#a4b4f2', icon: 'fa-rocket' },\n { name: 'rose', label: 'Rose 玫瑰', hex: '#f093fb', hexDark: '#f5576c', hexLighter: '#f77b8c', icon: 'fa-star' },\n { name: 'ai', label: 'AI 智能', hex: '#c44569', hexDark: '#ee5a6f', hexLighter: '#ff6b6b', icon: 'fa-wand-magic-sparkles' }\n];\n\n// 滚动到指定颜色\nfunction scrollToColor(colorName) {\n scrollIntoView.value = 'color-' + colorName;\n}\n\n// 滚动事件监听（可选：根据滚动位置自动更新当前颜色）\nfunction onScroll(e) {\n // 可以根据 scrollTop 计算当前浏览的颜色区域\n}\n\n// CSS 变量列表（来自 base.scss）\nconst cssVariables = [\n {\n category: '主题色',\n vars: [\n { name: '--prism-primary-color', desc: '主题色', purpose: '用于主要按钮、链接' },\n { name: '--prism-primary-light', desc: '主题浅色', purpose: '用于浅色背景、hover状态' }\n ]\n },\n {\n category: '状态色',\n vars: [\n { name: '--prism-success-color', desc: '成功色', purpose: '用于成功提示' },\n { name: '--prism-warning-color', desc: '警告色', purpose: '用于警告提示' },\n { name: '--prism-danger-color', desc: '危险色', purpose: '用于错误提示' },\n { name: '--prism-info-color', desc: '信息色', purpose: '用于信息提示' }\n ]\n },\n {\n category: '文字颜色',\n vars: [\n { name: '--prism-text-primary', desc: '主要文字', purpose: '用于标题、重要信息' },\n { name: '--prism-text-regular', desc: '常规文字', purpose: '用于正文内容' },\n { name: '--prism-text-secondary', desc: '次要文字', purpose: '用于描述、辅助信息' },\n { name: '--prism-text-placeholder', desc: '占位符', purpose: '用于输入框占位符' },\n { name: '--prism-icon-color', desc: '图标颜色', purpose: '用于图标默认颜色' }\n ]\n },\n {\n category: '边框颜色',\n vars: [\n { name: '--prism-border-color-base', desc: '基础边框', purpose: '用于基础边框' },\n { name: '--prism-border-color-light', desc: '浅色边框', purpose: '用于分割线' }\n ]\n },\n {\n category: '背景颜色',\n vars: [\n { name: '--prism-bg-color-page', desc: '页面背景', purpose: '用于 page、.prism-page、scroll-view（深色#121212）' },\n { name: '--prism-bg-color', desc: '内容背景', purpose: '用于区块、分割区域（深色#1A1A1A，比 page 稍亮）' },\n { name: '--prism-bg-color-card', desc: '卡片背景', purpose: '用于卡片、弹窗、菜单（深色#242424，最亮）' },\n { name: '--prism-input-bg', desc: '输入框背景', purpose: '用于输入框' }\n ]\n }\n];\n</script>\n\n<style lang=\"scss\">\n@import './demo-common.scss';\n@import '@/styles/card.scss';\n@import '@/styles/colors.scss';\n\n/* 覆盖 demo-common 的 prism-main 样式，让滚动条在右边缘 */\n.color-content-wrapper {\n position: relative;\n height: 100vh;\n}\n\n.prism-main {\n padding: 0;\n height: 100%;\n}\n\n/* 颜色演示框 */\n.color-demo-box {\n padding: 32rpx;\n border-radius: 12rpx;\n margin-bottom: 16rpx;\n display: flex;\n flex-direction: column;\n gap: 8rpx;\n}\n\n.color-demo-text {\n font-size: 28rpx;\n font-weight: 600;\n color: var(--prism-text-primary);\n font-family: monospace;\n}\n\n.color-demo-desc {\n font-size: 24rpx;\n color: var(--prism-text-secondary);\n}\n\n/* 总览网格 */\n.overview-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 12rpx;\n margin-bottom: 24rpx;\n}\n\n.overview-item {\n padding: 20rpx 12rpx;\n background: var(--prism-bg-color);\n border-radius: 12rpx;\n text-align: center;\n border: 1rpx solid var(--prism-border-color-light);\n}\n\n.overview-value {\n display: block;\n font-size: 36rpx;\n font-weight: 700;\n color: var(--prism-primary-color);\n line-height: 1.2;\n}\n\n.overview-label {\n font-size: 22rpx;\n color: var(--prism-text-secondary);\n}\n\n/* 命名规范 */\n.naming-rule {\n padding: 24rpx;\n background: var(--prism-bg-color);\n border-radius: 16rpx;\n margin-bottom: 24rpx;\n border: 1rpx solid var(--prism-border-color-light);\n}\n\n.rule-title {\n display: block;\n font-size: 26rpx;\n font-weight: 600;\n color: var(--prism-text-primary);\n margin-bottom: 16rpx;\n}\n\n.rule-formula {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8rpx;\n margin-bottom: 16rpx;\n}\n\n.rule-part {\n padding: 8rpx 16rpx;\n border-radius: 8rpx;\n font-size: 24rpx;\n font-weight: 600;\n\n &.prefix {\n background: rgba(134, 144, 156, 0.15);\n color: #86909C;\n }\n\n &.component {\n background: rgba(52, 120, 246, 0.15);\n color: #3478F6;\n }\n\n &.style {\n background: rgba(114, 46, 209, 0.15);\n color: #722ED1;\n }\n\n &.color {\n background: rgba(0, 180, 42, 0.15);\n color: #00B42A;\n }\n}\n\n.rule-separator {\n font-size: 28rpx;\n color: var(--prism-text-placeholder);\n}\n\n.rule-examples {\n display: flex;\n flex-wrap: wrap;\n gap: 12rpx;\n justify-content: flex-start;\n}\n\n.rule-group {\n margin-bottom: 20rpx;\n}\n\n.rule-group-title {\n display: block;\n font-size: 24rpx;\n font-weight: 600;\n color: var(--prism-primary-color);\n margin-bottom: 12rpx;\n}\n\n.rule-code-block {\n background: #2d3748;\n border-radius: 12rpx;\n padding: 20rpx 24rpx;\n margin-top: 12rpx;\n}\n\n.rule-code {\n display: block;\n font-size: 24rpx;\n font-family: 'Consolas', 'Monaco', monospace;\n color: #e2e8f0;\n line-height: 2;\n}\n\n.rule-code::before {\n content: '';\n color: #6a9955;\n margin-right: 8rpx;\n}\n\n.rule-options {\n display: flex;\n flex-direction: column;\n gap: 8rpx;\n margin-top: 16rpx;\n padding-top: 16rpx;\n border-top: 1rpx solid var(--prism-border-color-light);\n}\n\n.rule-option-item {\n display: flex;\n align-items: center;\n gap: 12rpx;\n}\n\n.rule-option-label {\n font-size: 22rpx;\n font-weight: 600;\n color: var(--prism-text-secondary);\n min-width: 80rpx;\n}\n\n.rule-option-value {\n font-size: 22rpx;\n font-family: monospace;\n color: var(--prism-text-primary);\n}\n\n.rule-example {\n font-size: 22rpx;\n font-family: monospace;\n color: var(--prism-text-secondary);\n background: var(--prism-bg-color-container);\n padding: 6rpx 12rpx;\n border-radius: 6rpx;\n}\n\n/* 用法示例卡片 */\n.usage-card {\n background: var(--prism-bg-color);\n border-radius: 12rpx;\n border: 1rpx solid var(--prism-border-color-light);\n overflow: hidden;\n}\n\n.usage-row {\n display: flex;\n align-items: center;\n padding: 16rpx 20rpx;\n border-bottom: 1rpx solid var(--prism-border-color-light);\n\n &:last-child {\n border-bottom: none;\n }\n}\n\n.usage-label {\n width: 140rpx;\n font-size: 24rpx;\n color: var(--prism-text-secondary);\n}\n\n.usage-class {\n flex: 1;\n font-size: 22rpx;\n font-family: monospace;\n color: var(--prism-text-primary);\n}\n\n.usage-demo {\n font-size: 28rpx;\n font-weight: 700;\n}\n\n.usage-demo-box {\n width: 48rpx;\n height: 48rpx;\n border-radius: 8rpx;\n}\n\n.usage-icon-demo {\n width: 48rpx;\n height: 48rpx;\n flex-shrink: 0;\n\n .fa {\n font-size: 20rpx;\n }\n}\n\n.usage-btn-demo {\n padding: 8rpx 20rpx;\n font-size: 20rpx;\n border-radius: 8rpx;\n}\n\n.usage-card-demo {\n width: 60rpx;\n height: 40rpx;\n border-radius: 6rpx;\n}\n\n/* 基本颜色演示 */\n.style-demo-text {\n width: 80rpx;\n height: 80rpx;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 36rpx;\n font-weight: 700;\n flex-shrink: 0;\n}\n\n.style-demo-box {\n width: 80rpx;\n height: 80rpx;\n border-radius: 16rpx;\n flex-shrink: 0;\n}\n\n.style-demo-border {\n background: var(--prism-bg-color-card);\n border-width: 4rpx;\n border-style: solid;\n}\n\n.style-demo-btn {\n min-width: 80rpx;\n height: 60rpx;\n padding: 0 24rpx;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24rpx;\n border-radius: 12rpx;\n flex-shrink: 0;\n}\n\n.style-demo-card {\n width: 120rpx;\n padding: 12rpx;\n border-radius: 12rpx;\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n gap: 4rpx;\n}\n\n.card-inner-title {\n font-size: 20rpx;\n font-weight: 600;\n}\n\n.card-inner-desc {\n font-size: 16rpx;\n opacity: 0.8;\n}\n\n/* 快速色板 */\n.color-palette {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 12rpx;\n}\n\n.palette-item {\n aspect-ratio: 1;\n border-radius: 12rpx;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: transform 0.2s;\n\n &:active {\n transform: scale(0.95);\n }\n}\n\n.palette-name {\n font-size: 18rpx;\n color: #FFFFFF;\n font-weight: 600;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n\n/* 形态说明 */\n.style-list {\n display: flex;\n flex-direction: column;\n gap: 16rpx;\n}\n\n.style-item {\n display: flex;\n align-items: center;\n gap: 20rpx;\n padding: 20rpx;\n background: var(--prism-bg-color);\n border-radius: 12rpx;\n border: 1rpx solid var(--prism-border-color-light);\n}\n\n.style-demo {\n width: 80rpx;\n height: 80rpx;\n flex-shrink: 0;\n\n .fa {\n font-size: 32rpx;\n }\n}\n\n.style-info {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 4rpx;\n}\n\n.style-name {\n font-size: 26rpx;\n font-weight: 600;\n color: var(--prism-text-primary);\n}\n\n.style-desc {\n font-size: 22rpx;\n color: var(--prism-text-secondary);\n}\n\n.style-class {\n font-size: 20rpx;\n font-family: monospace;\n color: var(--prism-primary-color);\n}\n\n/* 颜色详情区块 */\n.color-section {\n border: 1rpx solid var(--prism-border-color-light);\n border-radius: 20rpx;\n overflow: hidden;\n}\n\n/* 颜色区块头部 */\n.color-header {\n display: flex;\n align-items: center;\n gap: 20rpx;\n padding: 24rpx;\n background: var(--prism-bg-color);\n border-radius: 20rpx 20rpx 0 0;\n}\n\n.color-swatch {\n width: 80rpx;\n height: 80rpx;\n border-radius: 16rpx;\n flex-shrink: 0;\n}\n\n.color-title-info {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 6rpx;\n}\n\n.color-name {\n display: block;\n font-size: 32rpx;\n font-weight: 700;\n color: var(--prism-text-primary);\n}\n\n.color-var-line {\n display: flex;\n align-items: center;\n gap: 12rpx;\n flex-wrap: wrap;\n}\n\n.color-var {\n font-size: 26rpx;\n font-family: monospace;\n font-weight: 600;\n color: var(--prism-primary-color);\n}\n\n.color-hex {\n font-size: 24rpx;\n font-family: monospace;\n color: var(--prism-text-secondary);\n}\n\n/* 颜色卡片 */\n.color-card {\n border-radius: 16rpx;\n overflow: hidden;\n margin: 0 24rpx 20rpx;\n box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);\n}\n\n.color-card-main {\n padding: 24rpx;\n display: flex;\n flex-direction: column;\n gap: 6rpx;\n}\n\n.color-card-name {\n font-size: 28rpx;\n font-weight: 700;\n color: #fff;\n text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);\n}\n\n.color-card-var {\n font-size: 24rpx;\n font-family: monospace;\n color: rgba(255, 255, 255, 0.9);\n}\n\n.color-card-hex {\n font-size: 22rpx;\n font-family: monospace;\n color: rgba(255, 255, 255, 0.7);\n}\n\n.color-card-variants {\n display: flex;\n height: 60rpx;\n}\n\n.color-variant {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.variant-label {\n font-size: 20rpx;\n font-family: monospace;\n color: #fff;\n text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);\n}\n\n.color-title-info {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 6rpx;\n}\n\n.color-name {\n display: block;\n font-size: 32rpx;\n font-weight: 700;\n color: var(--prism-text-primary);\n}\n\n.color-var-line {\n display: flex;\n align-items: center;\n gap: 12rpx;\n flex-wrap: wrap;\n}\n\n.color-var {\n font-size: 26rpx;\n font-family: monospace;\n font-weight: 600;\n color: var(--prism-primary-color);\n}\n\n.color-hex {\n font-size: 24rpx;\n font-family: monospace;\n color: var(--prism-text-secondary);\n}\n\n/* 颜色变量 - 瓷块网格 */\n.color-vars {\n padding: 16rpx;\n background: var(--prism-bg-color-container);\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12rpx;\n border-radius: 0 0 20rpx 20rpx;\n}\n\n.var-tile {\n background: var(--prism-bg-color-card);\n border-radius: 12rpx;\n overflow: hidden;\n border: 1rpx solid var(--prism-border-color-light);\n transition: all 0.2s ease;\n height: 120rpx; // 固定高度，更扁平\n flex-shrink: 0; // 防止被压缩\n\n &:active {\n transform: scale(0.98);\n opacity: 0.9;\n }\n}\n\n.var-tile-preview {\n width: 100%;\n height: 120rpx; // 明确固定高度\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 8rpx 6rpx; // 减小 padding\n gap: 4rpx; // 减小间距\n overflow: hidden; // 裁剪超出内容，确保高度一致\n\n &--alpha {\n // 棋盘格背景表示透明\n &::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(45deg, #e0e0e0 25%, transparent 25%),\n linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #e0e0e0 75%),\n linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);\n background-size: 16rpx 16rpx;\n background-position: 0 0, 0 8rpx, 8rpx -8rpx, -8rpx 0;\n z-index: 0;\n }\n }\n\n &--shadow {\n background: var(--prism-bg-color);\n position: relative;\n }\n}\n\n// 阴影演示元素\n.var-tile-shadow-demo {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 60rpx;\n height: 60rpx;\n border-radius: 12rpx;\n z-index: 0;\n}\n\n.var-tile-label {\n position: relative;\n z-index: 1;\n font-size: 22rpx;\n font-weight: 600;\n color: #FFFFFF;\n text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.5);\n text-align: center;\n word-break: break-all;\n max-width: 100%;\n line-height: 1.3;\n\n .var-tile-preview--shadow & {\n color: var(--prism-text-primary);\n text-shadow: none;\n }\n}\n\n.var-tile-value {\n position: relative;\n z-index: 1;\n font-size: 18rpx;\n font-family: monospace;\n color: rgba(255, 255, 255, 0.95);\n text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.6);\n text-align: center;\n word-break: break-all;\n max-width: 100%;\n line-height: 1.4;\n\n .var-tile-preview--shadow & {\n color: var(--prism-text-secondary);\n text-shadow: none;\n background: var(--prism-bg-color-container);\n }\n}\n\n/* 组件区块 */\n.component-section {\n padding: 24rpx;\n border-top: 1rpx solid var(--prism-border-color-light);\n}\n\n// 第一个 component-section 紧跟 color-vars，不需要上边框\n.color-vars + .component-section {\n border-top: none;\n}\n\n.component-title {\n display: block;\n font-size: 26rpx;\n font-weight: 600;\n color: var(--prism-text-primary);\n margin-bottom: 16rpx;\n\n .dark-mode & {\n color: var(--prism-text-primary);\n }\n}\n\n/* 图标容器演示 */\n.component-demos {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 12rpx;\n}\n\n.demo-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8rpx;\n overflow: hidden; // 裁剪超出内容\n}\n\n.demo-box {\n width: 80rpx;\n height: 80rpx;\n flex-shrink: 0; // 防止被压缩\n\n .fa {\n font-size: 32rpx;\n }\n}\n\n.demo-label {\n font-size: 20rpx;\n color: var(--prism-text-secondary);\n flex-shrink: 0;\n\n .dark-mode & {\n color: var(--prism-text-secondary);\n }\n}\n\n.demo-class {\n font-size: 16rpx;\n font-family: monospace;\n color: var(--prism-text-placeholder);\n text-align: center;\n word-break: break-all;\n line-height: 1.4;\n max-height: 60rpx; // 限制文字最大高度\n overflow: hidden; // 超出部分隐藏\n}\n\n/* 按钮演示 */\n.btn-demos {\n display: flex;\n flex-direction: column;\n gap: 12rpx;\n}\n\n.btn-demo-row {\n display: flex;\n align-items: center;\n gap: 16rpx;\n\n > view:first-child {\n flex: 1;\n height: 72rpx;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 26rpx;\n font-weight: 600;\n }\n}\n\n.btn-class {\n font-size: 20rpx;\n font-family: monospace;\n color: var(--prism-text-placeholder);\n width: 280rpx;\n flex-shrink: 0;\n}\n\n/* 卡片演示 */\n.card-demos {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12rpx;\n}\n\n.card-demo-item {\n padding: 20rpx;\n height: 120rpx; // 固定高度，不使用min-height\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 8rpx;\n overflow: hidden; // 裁剪超出内容\n}\n\n.card-demo-title {\n font-size: 24rpx;\n font-weight: 600;\n flex-shrink: 0;\n}\n\n.usage-hint {\n margin-top: 16rpx;\n font-size: 22rpx;\n font-family: monospace;\n color: var(--prism-text-placeholder);\n text-align: center;\n}\n\n.card-demo-class {\n font-size: 18rpx;\n font-family: monospace;\n opacity: 0.8;\n text-align: center;\n word-break: break-all;\n line-height: 1.3;\n max-height: 50rpx;\n overflow: hidden;\n}\n\n/* 语义化别名 */\n.alias-list {\n display: flex;\n flex-direction: column;\n gap: 12rpx;\n margin-bottom: 16rpx;\n}\n\n.alias-item {\n display: flex;\n align-items: center;\n gap: 16rpx;\n padding: 16rpx 24rpx;\n background: var(--prism-bg-color);\n border-radius: 12rpx;\n border: 1rpx solid var(--prism-border-color-light);\n}\n\n.alias-name {\n font-size: 26rpx;\n font-weight: 600;\n color: var(--prism-primary-color);\n font-family: monospace;\n}\n\n.alias-arrow {\n font-size: 24rpx;\n color: var(--prism-text-placeholder);\n}\n\n.alias-color {\n font-size: 26rpx;\n color: var(--prism-text-primary);\n font-family: monospace;\n}\n\n.alias-example {\n padding: 16rpx;\n background: var(--prism-bg-color-container);\n border-radius: 8rpx;\n}\n\n.example-text {\n font-size: 22rpx;\n font-family: monospace;\n color: var(--prism-text-secondary);\n}\n\n/* CSS 变量展示 */\n.css-vars-intro {\n margin-bottom: 20rpx;\n}\n\n.intro-text {\n font-size: 24rpx;\n color: var(--prism-text-secondary);\n}\n\n.css-var-group {\n margin-bottom: 24rpx;\n}\n\n.css-var-category {\n display: block;\n font-size: 26rpx;\n font-weight: 600;\n color: var(--prism-primary-color);\n margin-bottom: 12rpx;\n padding-left: 12rpx;\n border-left: 4rpx solid var(--prism-primary-color);\n}\n\n.css-var-list {\n display: flex;\n flex-direction: column;\n gap: 12rpx;\n}\n\n.css-var-item {\n display: flex;\n align-items: center;\n gap: 16rpx;\n padding: 16rpx;\n background: var(--prism-bg-color);\n border-radius: 12rpx;\n border: 1rpx solid var(--prism-border-color-light);\n}\n\n.css-var-swatch {\n width: 88rpx;\n height: 88rpx;\n border-radius: 14rpx;\n flex-shrink: 0;\n border: 1rpx solid var(--prism-border-color-light);\n}\n\n.css-var-info {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 4rpx;\n min-width: 0;\n}\n\n.css-var-name {\n font-size: 24rpx;\n font-family: monospace;\n font-weight: 600;\n color: var(--prism-text-primary);\n word-break: break-all;\n}\n\n.css-var-desc {\n font-size: 22rpx;\n color: var(--prism-text-secondary);\n}\n\n.css-var-purpose {\n font-size: 22rpx;\n color: var(--prism-text-secondary);\n}\n\n/* 通用颜色工具类展示 */\n.util-subsection {\n margin-bottom: 24rpx;\n}\n\n.util-subtitle {\n display: block;\n font-size: 24rpx;\n font-weight: 600;\n color: var(--prism-text-primary);\n margin-bottom: 12rpx;\n font-family: monospace;\n}\n\n.util-color-grid {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 12rpx;\n}\n\n.util-color-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 6rpx;\n}\n\n.util-color-text {\n font-size: 36rpx;\n font-weight: 700;\n}\n\n.util-color-label {\n font-size: 18rpx;\n color: var(--prism-text-secondary);\n}\n\n.util-bg-item {\n aspect-ratio: 1;\n border-radius: 12rpx;\n border: 1rpx solid var(--prism-border-color-light);\n}\n\n.util-border-item {\n aspect-ratio: 1;\n border-radius: 12rpx;\n border-width: 4rpx;\n border-style: solid;\n background: var(--prism-bg-color-card);\n}\n\n/* 深色模式 */\n.dark-mode {\n .overview-item,\n .naming-rule,\n .style-item,\n .alias-item,\n .css-var-item {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.1);\n }\n\n .color-header {\n background: rgba(255, 255, 255, 0.06);\n }\n\n .color-vars {\n background: rgba(255, 255, 255, 0.03);\n }\n\n .color-section {\n border-color: rgba(255, 255, 255, 0.1);\n }\n\n .component-section {\n border-top-color: rgba(255, 255, 255, 0.1);\n }\n\n .rule-example,\n .alias-example {\n background: rgba(255, 255, 255, 0.06);\n }\n\n .btn-class {\n color: var(--prism-text-secondary);\n }\n}\n</style>\n","import MiniProgramPage from 'E:/git/ruixin-gitlab/ruixin-keiji/ruixin-prism-ui-uniApp/src/pages/demo/colors.vue'\nwx.createPage(MiniProgramPage)"],"names":["useAppStore","computed","ref","MiniProgramPage"],"mappings":";;;;;;AA2lBA,MAAM,cAAc,MAAW;AAC/B,MAAM,gBAAgB,MAAW;;;;AAEjC,UAAM,WAAWA,UAAAA,YAAW;AAG5B,UAAM,eAAeC,cAAAA,SAAS,MAAM;AAClC,aAAO,SAAS,kBAAkB;AAAA,IACpC,CAAC;AAGD,UAAM,oBAAoBC,cAAAA,IAAI,EAAE;AAEhC,UAAM,iBAAiBA,cAAAA,IAAI,EAAE;AAG7B,UAAM,gBAAgBD,cAAAA,SAAS,MAAM;AACnC,aAAO,UAAU,IAAI,YAAU;AAAA,QAC7B,OAAO,MAAM;AAAA,QACb,OAAO,MAAM;AAAA,QACb,YAAY,MAAM;AAAA,MACtB,EAAI;AAAA,IACJ,CAAC;AAGD,UAAM,qBAAqB,CAAC,cAAc;AACxC,qBAAe,QAAQ,WAAW;AAAA,IACpC;AAGA,UAAM,YAAY;AAAA,MAChB,EAAE,MAAM,YAAY,OAAO,QAAQ,KAAK,4FAA4F,YAAY,KAAI;AAAA,MACpJ,EAAE,MAAM,cAAc,OAAO,QAAQ,KAAK,sFAAsF,YAAY,KAAI;AAAA,MAChJ,EAAE,MAAM,UAAU,OAAO,aAAa,KAAK,WAAW,SAAS,WAAW,YAAY,WAAW,MAAM,WAAU;AAAA,MACjH,EAAE,MAAM,QAAQ,OAAO,WAAW,KAAK,WAAW,SAAS,WAAW,YAAY,WAAW,MAAM,aAAY;AAAA,MAC/G,EAAE,MAAM,SAAS,OAAO,YAAY,KAAK,WAAW,SAAS,WAAW,YAAY,WAAW,MAAM,UAAS;AAAA,MAC9G,EAAE,MAAM,OAAO,OAAO,UAAU,KAAK,WAAW,SAAS,WAAW,YAAY,WAAW,MAAM,WAAU;AAAA,MAC3G,EAAE,MAAM,UAAU,OAAO,aAAa,KAAK,WAAW,SAAS,WAAW,YAAY,WAAW,MAAM,UAAS;AAAA,MAChH,EAAE,MAAM,QAAQ,OAAO,WAAW,KAAK,WAAW,SAAS,WAAW,YAAY,WAAW,MAAM,WAAU;AAAA,MAC7G,EAAE,MAAM,UAAU,OAAO,aAAa,KAAK,WAAW,SAAS,WAAW,YAAY,WAAW,MAAM,SAAQ;AAAA,MAC/G,EAAE,MAAM,QAAQ,OAAO,WAAW,KAAK,WAAW,SAAS,WAAW,YAAY,WAAW,MAAM,WAAU;AAAA,MAC7G,EAAE,MAAM,WAAW,OAAO,cAAc,KAAK,WAAW,SAAS,WAAW,YAAY,WAAW,MAAM,iBAAgB;AAAA,MACzH,EAAE,MAAM,UAAU,OAAO,aAAa,KAAK,WAAW,SAAS,WAAW,YAAY,WAAW,MAAM,YAAW;AAAA,MAClH,EAAE,MAAM,QAAQ,OAAO,WAAW,KAAK,WAAW,SAAS,WAAW,YAAY,WAAW,MAAM,UAAS;AAAA,MAC5G,EAAE,MAAM,UAAU,OAAO,cAAc,KAAK,WAAW,SAAS,WAAW,YAAY,WAAW,MAAM,YAAW;AAAA,MACnH,EAAE,MAAM,QAAQ,OAAO,WAAW,KAAK,WAAW,SAAS,WAAW,YAAY,WAAW,MAAM,UAAS;AAAA,MAC5G,EAAE,MAAM,MAAM,OAAO,SAAS,KAAK,WAAW,SAAS,WAAW,YAAY,WAAW,MAAM,yBAAwB;AAAA,IACzH;AAGA,aAAS,cAAc,WAAW;AAChC,qBAAe,QAAQ,WAAW;AAAA,IACpC;AAGA,aAAS,SAAS,GAAG;AAAA,IAErB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnpBA,GAAG,WAAWE,SAAe;"}

package/dist/dev/.sourcemap/mp-weixin/pages/demo/container.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"container.js","sources":["pages/demo/container.vue","../uniPage:/cGFnZXMvZGVtby9jb250YWluZXIudnVl"],"sourcesContent":["<template>\n <view class=\"prism-page\" :class=\"{ 'dark-mode': appStore.isDarkMode }\">\n \n <PrismNavBar\n title=\"容器组件\"\n icon=\"fa-layer-group\"\n icon-color=\"purple\"\n :show-back=\"true\"\n />\n\n \n <scroll-view class=\"prism-main\" scroll-y :style=\"{ paddingTop: navbarHeight + 'px' }\">\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Card 卡片</view>\n\n <view class=\"prism-card glass mb-[20rpx]\">\n <view class=\"p-[30rpx]\">\n <text class=\"prism-text-primary text-[32rpx] font-bold\">毛玻璃卡片</text>\n <text class=\"card-desc\">这是一个毛玻璃效果的卡片组件</text>\n </view>\n </view>\n <PrismCode code=\"prism-card glass\" />\n\n <view class=\"prism-card blue glass mt-[20rpx]\">\n <view class=\"p-[30rpx]\">\n <text class=\"prism-text-primary text-[32rpx] font-bold\">蓝色毛玻璃卡片</text>\n <text class=\"card-desc\">带有蓝色渐变效果的卡片</text>\n </view>\n </view>\n <PrismCode code=\"prism-card blue glass\" />\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">ListItem 列表项</view>\n\n <view class=\"prism-list-item mb-[20rpx]\">\n <view class=\"list-item-icon prism-icon blue\">\n <text class=\"fa fa-folder\"></text>\n </view>\n <view class=\"list-item-content\">\n <text class=\"list-item-title\">项目文档</text>\n <text class=\"list-item-desc\">包含所有项目相关的文档资料</text>\n </view>\n <text class=\"list-item-arrow fa fa-angle-right\"></text>\n </view>\n\n <view class=\"prism-list-item mb-[20rpx]\">\n <view class=\"list-item-icon prism-icon green\">\n <text class=\"fa fa-circle-check\"></text>\n </view>\n <view class=\"list-item-content\">\n <text class=\"list-item-title\">已完成任务</text>\n <text class=\"list-item-desc\">查看所有已完成的任务列表</text>\n </view>\n <text class=\"list-item-arrow fa fa-angle-right\"></text>\n </view>\n\n <view class=\"prism-list-item\">\n <view class=\"list-item-icon prism-icon orange\">\n <text class=\"fa fa-clock\"></text>\n </view>\n <view class=\"list-item-content\">\n <text class=\"list-item-title\">待处理事项</text>\n <text class=\"list-item-desc\">需要尽快处理的紧急事项</text>\n </view>\n <text class=\"list-item-arrow fa fa-angle-right\"></text>\n </view>\n\n <PrismCode code=\"prism-list-item > list-item-icon + list-item-content + list-item-arrow\" />\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Collapse 折叠面板</view>\n\n <view class=\"prism-collapse mb-[20rpx]\">\n <view class=\"prism-collapse-item\" v-for=\"(item, index) in collapseItems\" :key=\"index\">\n <view class=\"prism-collapse-item__header\" @click=\"toggleCollapse(index)\">\n <text>{{ item.title }}</text>\n <text class=\"prism-collapse-item__arrow fa fa-chevron-down\" :class=\"{ 'prism-collapse-item__arrow--active': item.open }\"></text>\n </view>\n <view class=\"prism-collapse-item__content\" :class=\"{ 'prism-collapse-item__content--show': item.open }\">\n <view class=\"prism-collapse-item__body\">{{ item.content }}</view>\n </view>\n </view>\n </view>\n\n <PrismCode code=\"prism-collapse > prism-collapse-item\" />\n </view>\n\n \n <view class=\"prism-safe-area-bottom\"></view>\n </scroll-view>\n </view>\n</template>\n\n<script setup>\nimport { reactive, computed } from 'vue';\nimport { useAppStore } from '@/store/app';\nimport PrismCode from '@/components/PrismCode/PrismCode.vue';\n\nconst appStore = useAppStore();\n\nconst navbarHeight = computed(() => {\n return appStore.statusBarHeight + 44;\n});\n\n// 折叠面板数据\nconst collapseItems = reactive([\n { title: '什么是 Prism UI？', content: 'Prism UI 是一个现代化的 uni-app 组件库，支持深浅主题切换。', open: true },\n { title: '如何使用？', content: '直接引入样式文件，使用对应的 CSS 类名即可。', open: false },\n { title: '支持哪些平台？', content: '支持 H5、微信小程序、App 等多端平台。', open: false }\n]);\n\nfunction toggleCollapse(index) {\n collapseItems[index].open = !collapseItems[index].open;\n}\n</script>\n\n<style lang=\"scss\">\n@import './demo-common.scss';\n</style>\n","import MiniProgramPage from 'E:/git/ruixin-gitlab/ruixin-keiji/ruixin-prism-ui-uniApp/src/pages/demo/container.vue'\nwx.createPage(MiniProgramPage)"],"names":["useAppStore","computed","reactive","MiniProgramPage"],"mappings":";;;;;;;;;;;AAAA,MAAA,YAAA,MAAA;;;;AAAA,UAAA,WAAAA,UAAAA,YAAA;AAAA,UAAA,eAAAC,cAAAA,SAAA,MAAA;AAAA,aAAA,SAAA,kBAAA;AAAA,IAAA,CAAA;AAAA,UAAA,gBAAAC,cAAAA,SAAA;AAAA,MAAA,EAAA,OAAA,iBAAA,SAAA,0CAAA,MAAA,KAAA;AAAA,MAAA,EAAA,OAAA,SAAA,SAAA,4BAAA,MAAA,MAAA;AAAA,MAAA,EAAA,OAAA,WAAA,SAAA,0BAAA,MAAA,MAAA;AAAA,IAAA,CAAA;AAAA,aAAA,eAAA,OAAA;AAAA,oBAAA,KAAA,EAAA,OAAA,CAAA,cAAA,KAAA,EAAA;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACCA,GAAG,WAAWC,SAAe;"}

package/dist/dev/.sourcemap/mp-weixin/pages/demo/data.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"data.js","sources":["pages/demo/data.vue","../uniPage:/cGFnZXMvZGVtby9kYXRhLnZ1ZQ"],"sourcesContent":["<template>\n <view class=\"prism-page\" :class=\"{ 'dark-mode': appStore.isDarkMode }\">\n \n <PrismNavBar\n title=\"数据展示\"\n icon=\"fa-chart-bar\"\n icon-color=\"orange\"\n :show-back=\"true\"\n />\n\n \n <scroll-view class=\"prism-main\" scroll-y :style=\"{ paddingTop: navbarHeight + 'px' }\">\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">头像</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">尺寸</view>\n <view class=\"flex flex-row gap-[15rpx] flex-wrap mb-[24rpx]\" style=\"align-items: center;\">\n <view class=\"prism-avatar xs\">\n <image class=\"avatar-image\" src=\"https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/1.png\" mode=\"aspectFill\" />\n </view>\n <view class=\"prism-avatar sm\">\n <image class=\"avatar-image\" src=\"https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/2.jpg\" mode=\"aspectFill\" />\n </view>\n <view class=\"prism-avatar md\">\n <image class=\"avatar-image\" src=\"https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/3.png\" mode=\"aspectFill\" />\n </view>\n <view class=\"prism-avatar lg\">\n <image class=\"avatar-image\" src=\"https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/4.png\" mode=\"aspectFill\" />\n </view>\n <view class=\"prism-avatar xl\">\n <image class=\"avatar-image\" src=\"https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/5.png\" mode=\"aspectFill\" />\n </view>\n </view>\n\n <view class=\"card-title\">带边框</view>\n <view class=\"flex flex-row gap-[15rpx] flex-wrap mb-[24rpx]\">\n <view class=\"prism-avatar lg bordered\">\n <image class=\"avatar-image\" src=\"https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/6.png\" mode=\"aspectFill\" />\n </view>\n </view>\n\n <view class=\"card-title\">方形头像</view>\n <view class=\"flex flex-row gap-[15rpx] flex-wrap mb-[24rpx]\">\n <view class=\"prism-avatar lg square\">\n <image class=\"avatar-image\" src=\"https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/7.jpg\" mode=\"aspectFill\" />\n </view>\n </view>\n\n <view class=\"card-title\">在线状态</view>\n <view class=\"flex flex-row gap-[15rpx] flex-wrap mb-[24rpx]\">\n <view class=\"prism-avatar lg\">\n <image class=\"avatar-image\" src=\"https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/8.png\" mode=\"aspectFill\" />\n <view class=\"avatar-status online\"></view>\n </view>\n <view class=\"prism-avatar lg\">\n <image class=\"avatar-image\" src=\"https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/9.png\" mode=\"aspectFill\" />\n <view class=\"avatar-status busy\"></view>\n </view>\n <view class=\"prism-avatar lg\">\n <image class=\"avatar-image\" src=\"https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/10.png\" mode=\"aspectFill\" />\n <view class=\"avatar-status offline\"></view>\n </view>\n </view>\n\n <view class=\"card-title\">头像组</view>\n <view class=\"prism-avatar-group\">\n <view class=\"prism-avatar sm\">\n <image class=\"avatar-image\" src=\"https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/1.png\" mode=\"aspectFill\" />\n </view>\n <view class=\"prism-avatar sm\">\n <image class=\"avatar-image\" src=\"https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/2.jpg\" mode=\"aspectFill\" />\n </view>\n <view class=\"prism-avatar sm\">\n <image class=\"avatar-image\" src=\"https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/3.png\" mode=\"aspectFill\" />\n </view>\n <view class=\"avatar-more\">+5</view>\n </view>\n\n <view class=\"card-title\">文字头像</view>\n <view class=\"flex flex-row gap-[15rpx] flex-wrap mb-[24rpx]\">\n <view class=\"prism-avatar xs blue\">\n <text class=\"avatar-text\">张</text>\n </view>\n <view class=\"prism-avatar sm green\">\n <text class=\"avatar-text\">李</text>\n </view>\n <view class=\"prism-avatar md orange\">\n <text class=\"avatar-text\">王</text>\n </view>\n <view class=\"prism-avatar lg purple\">\n <text class=\"avatar-text\">赵</text>\n </view>\n <view class=\"prism-avatar xl red\">\n <text class=\"avatar-text\">刘</text>\n </view>\n </view>\n\n <view class=\"card-title\">文字头像 - 多色</view>\n <view class=\"flex flex-row gap-[15rpx] flex-wrap mb-[24rpx]\">\n <view class=\"prism-avatar md blue\">\n <text class=\"avatar-text\">A</text>\n </view>\n <view class=\"prism-avatar md cyan\">\n <text class=\"avatar-text\">B</text>\n </view>\n <view class=\"prism-avatar md green\">\n <text class=\"avatar-text\">C</text>\n </view>\n <view class=\"prism-avatar md orange\">\n <text class=\"avatar-text\">D</text>\n </view>\n <view class=\"prism-avatar md pink\">\n <text class=\"avatar-text\">E</text>\n </view>\n <view class=\"prism-avatar md purple\">\n <text class=\"avatar-text\">F</text>\n </view>\n <view class=\"prism-avatar md indigo\">\n <text class=\"avatar-text\">G</text>\n </view>\n <view class=\"prism-avatar md red\">\n <text class=\"avatar-text\">H</text>\n </view>\n </view>\n\n <PrismCode code=\"prism-avatar xs/sm/md/lg/xl + bordered/square/blue/green/orange/purple/red\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">进度条</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础进度条</view>\n <view class=\"prism-progress mb-[24rpx]\">\n <view class=\"progress-bar\" style=\"width: 60%;\"></view>\n </view>\n\n <view class=\"card-title\">颜色</view>\n <view class=\"prism-progress mb-[10rpx]\">\n <view class=\"progress-bar\" style=\"width: 80%;\"></view>\n </view>\n <view class=\"prism-progress prism-progress--success mb-[10rpx]\">\n <view class=\"progress-bar\" style=\"width: 70%;\"></view>\n </view>\n <view class=\"prism-progress prism-progress--warning mb-[10rpx]\">\n <view class=\"progress-bar\" style=\"width: 50%;\"></view>\n </view>\n <view class=\"prism-progress prism-progress--danger mb-[24rpx]\">\n <view class=\"progress-bar\" style=\"width: 30%;\"></view>\n </view>\n\n <view class=\"card-title\">大尺寸</view>\n <view class=\"prism-progress prism-progress--lg\">\n <view class=\"progress-bar\" style=\"width: 65%;\"></view>\n </view>\n <PrismCode code=\"prism-progress + --success/--warning/--danger/--lg\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">统计卡片</view>\n\n <view class=\"prism-stats-grid\">\n <view class=\"prism-card glass prism-stat-card\">\n <view class=\"stat-icon prism-icon blue\">\n <text class=\"fa fa-folder-open\"></text>\n </view>\n <view class=\"stat-info\">\n <text class=\"stat-value\">12</text>\n <text class=\"stat-label\">项目总数</text>\n </view>\n <view class=\"stat-trend up\">\n <text class=\"fa fa-arrow-trend-up\"></text>\n <text>5进行中</text>\n </view>\n </view>\n <view class=\"prism-card glass prism-stat-card\">\n <view class=\"stat-icon prism-icon orange\">\n <text class=\"fa fa-list-check\"></text>\n </view>\n <view class=\"stat-info\">\n <text class=\"stat-value\">48</text>\n <text class=\"stat-label\">任务总数</text>\n </view>\n <view class=\"stat-trend down\">\n <text class=\"fa fa-triangle-exclamation\"></text>\n <text>2个逾期</text>\n </view>\n </view>\n <view class=\"prism-card glass prism-stat-card\">\n <view class=\"stat-icon prism-icon green\">\n <text class=\"fa fa-chart-pie\"></text>\n </view>\n <view class=\"stat-info\">\n <text class=\"stat-value\">85%</text>\n <text class=\"stat-label\">完成率</text>\n </view>\n </view>\n <view class=\"prism-card glass prism-stat-card\">\n <view class=\"stat-icon prism-icon purple\">\n <text class=\"fa fa-users\"></text>\n </view>\n <view class=\"stat-info\">\n <text class=\"stat-value\">8</text>\n <text class=\"stat-label\">团队成员</text>\n </view>\n <view class=\"stat-trend up\">\n <text class=\"fa fa-user-plus\"></text>\n <text>协作中</text>\n </view>\n </view>\n </view>\n <PrismCode code=\"prism-stats-grid > prism-stat-card\" />\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">核心指标</view>\n\n <view class=\"prism-metric-grid\">\n <view\n v-for=\"(metric, index) in coreMetrics\"\n :key=\"index\"\n class=\"prism-card glass prism-metric-card\"\n >\n <view class=\"metric-header\">\n <view class=\"metric-icon-wrapper\" :class=\"'icon-bg-' + metric.type\">\n <text :class=\"'fa ' + metric.icon\"></text>\n </view>\n <view class=\"prism-badge\" :class=\"metric.level\">\n {{ metric.status }}\n </view>\n </view>\n <view class=\"metric-body\">\n <view class=\"metric-value\" :class=\"'text-' + metric.level\">\n {{ metric.value }}\n <text class=\"metric-unit\" v-if=\"metric.unit\">{{ metric.unit }}</text>\n </view>\n <view class=\"metric-label\">{{ metric.label }}</view>\n \n <view class=\"metric-sparkline\" v-if=\"metric.trendData\">\n <canvas\n :canvas-id=\"'trend-' + metric.type + '-' + index\"\n :id=\"'trend-' + metric.type + '-' + index\"\n class=\"trend-canvas\"\n ></canvas>\n </view>\n </view>\n </view>\n </view>\n\n <PrismCode code=\"prism-metric-grid > prism-metric-card\" />\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">空状态</view>\n\n <view class=\"prism-placeholder\">\n <text class=\"placeholder-icon fa fa-inbox\"></text>\n <text class=\"placeholder-text\">暂无数据</text>\n <view class=\"placeholder-action\">\n <view class=\"prism-btn primary sm\">\n <text>刷新</text>\n </view>\n </view>\n </view>\n <PrismCode code=\"prism-placeholder\" />\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Milestone 里程碑</view>\n\n <view class=\"prism-card glass\">\n <view class=\"prism-milestone\">\n <view\n class=\"prism-milestone-item\"\n v-for=\"(item, index) in milestoneData\"\n :key=\"index\"\n :class=\"{ 'completed': item.completed, 'active': item.active }\"\n >\n <view class=\"milestone-dot\">\n <text class=\"fa\" :class=\"item.completed ? 'fa-check' : 'fa-regular fa-circle'\"></text>\n </view>\n <view class=\"milestone-content\">\n <view class=\"milestone-title\">{{ item.title }}</view>\n <view class=\"milestone-time\">{{ item.time }}</view>\n <view class=\"milestone-desc\" v-if=\"item.desc\">{{ item.desc }}</view>\n </view>\n </view>\n </view>\n </view>\n\n <PrismCode code=\"prism-milestone > prism-milestone-item\" />\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Project Logs 项目日志</view>\n\n <view class=\"prism-card glass\">\n <view class=\"card-header\">\n <view class=\"card-title\">活动日志</view>\n <view class=\"add-log-btn\">\n <text class=\"fa fa-plus\"></text>\n <text>写日志</text>\n </view>\n </view>\n\n <view class=\"logs-card\">\n <view class=\"log-item\" v-for=\"(log, index) in projectLogs\" :key=\"index\">\n <view class=\"log-icon\" :class=\"'log-icon--' + log.type\">\n <text class=\"fa\" :class=\"getLogIcon(log.type)\"></text>\n </view>\n <view class=\"log-content\">\n <view class=\"log-header\">\n <text class=\"log-title\">{{ log.title }}</text>\n <text class=\"log-time\">{{ log.time }}</text>\n </view>\n <text class=\"log-desc\">{{ log.content }}</text>\n <view class=\"log-user\" v-if=\"log.user\">\n <text class=\"fa fa-user\"></text>\n <text>{{ log.user }}</text>\n </view>\n </view>\n </view>\n </view>\n\n <PrismCode code=\"log-item > log-icon--{type} + log-content\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">CountDown 倒计时</view>\n\n <view class=\"prism-countdown mb-[20rpx]\">\n <view class=\"prism-countdown__block\">{{ countdownTime.hours }}</view>\n <text class=\"prism-countdown__colon\">:</text>\n <view class=\"prism-countdown__block\">{{ countdownTime.minutes }}</view>\n <text class=\"prism-countdown__colon\">:</text>\n <view class=\"prism-countdown__block\">{{ countdownTime.seconds }}</view>\n </view>\n\n <PrismCode code=\"prism-countdown > prism-countdown__block\" />\n </view>\n\n \n <view class=\"prism-safe-area-bottom\"></view>\n </scroll-view>\n </view>\n</template>\n\n<script setup>\nimport { ref, reactive, computed, onMounted, onUnmounted, getCurrentInstance } from 'vue';\nimport { useAppStore } from '@/store/app';\nimport PrismCode from '@/components/PrismCode/PrismCode.vue';\nimport uCharts from '@qiun/ucharts';\n\nconst appStore = useAppStore();\nconst instance = getCurrentInstance();\n\n// 图表实例存储\nconst charts = {};\n\nconst navbarHeight = computed(() => {\n return appStore.statusBarHeight + 44;\n});\n\n// 核心指标数据 - 14天趋势数据\nconst coreMetrics = reactive([\n {\n label: '睡眠时长',\n value: '7.2',\n unit: 'h',\n status: '正常',\n level: 'success',\n icon: 'fa-moon',\n type: 'sleep',\n chartType: 'column',\n trendData: [7.5, 6.8, 7.2, 8.0, 7.1, 6.5, 7.8, 7.2, 8.2, 6.9, 7.5, 7.0, 7.3, 7.2],\n colors: ['#C4B5FD', '#8B5CF6']\n },\n {\n label: '血氧 SpO₂',\n value: '98',\n unit: '%',\n status: '正常',\n level: 'success',\n icon: 'fa-droplet',\n type: 'oxygen',\n chartType: 'area',\n trendData: [97, 98, 96, 99, 98, 97, 98, 99, 96, 98, 97, 98, 99, 98],\n colors: ['#6EE7B7', '#10B981']\n },\n {\n label: '血压',\n value: '118/75',\n unit: 'mmHg',\n status: '正常',\n level: 'success',\n icon: 'fa-heart-circle-check',\n type: 'pressure',\n chartType: 'column',\n trendData: [115, 118, 120, 116, 119, 117, 118, 122, 115, 119, 117, 120, 118, 118],\n colors: ['#93C5FD', '#3B82F6']\n },\n {\n label: '心率',\n value: '72',\n unit: 'bpm',\n status: '正常',\n level: 'success',\n icon: 'fa-heart',\n type: 'heart',\n chartType: 'line',\n trendData: [72, 85, 62, 78, 95, 68, 72, 80, 65, 88, 70, 75, 82, 69],\n colors: ['#FCA5A5', '#EF4444']\n },\n {\n label: 'HRV',\n value: '45',\n unit: 'ms',\n status: '偏低',\n level: 'warning',\n icon: 'fa-chart-line',\n type: 'hrv',\n chartType: 'area',\n trendData: [42, 45, 43, 48, 44, 41, 46, 45, 40, 47, 43, 46, 44, 45],\n colors: ['#FDE68A', '#F59E0B']\n },\n {\n label: '体温',\n value: '36.5',\n unit: '°C',\n status: '正常',\n level: 'success',\n icon: 'fa-thermometer-half',\n type: 'temp',\n chartType: 'line',\n trendData: [36.3, 36.5, 36.4, 36.6, 36.5, 36.4, 36.5, 36.7, 36.4, 36.5, 36.6, 36.4, 36.5, 36.5],\n colors: ['#FBCFE8', '#EC4899']\n },\n {\n label: '步数',\n value: '8,562',\n unit: '步',\n status: '达标',\n level: 'success',\n icon: 'fa-shoe-prints',\n type: 'steps',\n chartType: 'column',\n trendData: [6500, 8200, 7800, 9500, 5200, 10200, 8562, 7200, 8900, 6800, 9200, 7500, 8100, 8562],\n colors: ['#A5F3FC', '#06B6D4']\n },\n {\n label: '卡路里',\n value: '1,856',\n unit: 'kcal',\n status: '正常',\n level: 'success',\n icon: 'fa-fire',\n type: 'calories',\n chartType: 'area',\n trendData: [1650, 1920, 1780, 2100, 1450, 2250, 1856, 1720, 1980, 1580, 2050, 1750, 1890, 1856],\n colors: ['#FED7AA', '#F97316']\n }\n]);\n\n// 初始化单个指标图表\nfunction initMetricChart(metric, index) {\n const canvasId = 'trend-' + metric.type + '-' + index;\n\n try {\n const context = uni.createCanvasContext(canvasId, instance.proxy);\n if (!context) return;\n\n const categories = metric.trendData.map((_, i) => String(i + 1));\n\n charts[metric.type] = new uCharts({\n $this: instance.proxy,\n canvasId: canvasId,\n context: context,\n type: metric.chartType,\n fontSize: 0,\n padding: [5, 5, 5, 5],\n legend: { show: false },\n dataLabel: false,\n dataPointShape: false,\n background: 'transparent',\n pixelRatio: 1,\n enableMarkLine: false,\n categories: categories,\n series: [{\n name: metric.label,\n data: metric.trendData,\n color: metric.colors[1]\n }],\n animation: true,\n animationDuration: 300,\n enableScroll: false,\n xAxis: {\n disabled: true,\n disableGrid: true,\n axisLine: false\n },\n yAxis: {\n disabled: true,\n disableGrid: true,\n axisLine: false\n },\n width: uni.upx2px(280),\n height: uni.upx2px(100),\n extra: {\n column: {\n type: 'group',\n width: 8,\n linearType: 'custom',\n linearOpacity: 0.9,\n barBorderCircle: true,\n customColor: metric.colors\n },\n line: {\n type: 'curve',\n width: 2\n },\n area: {\n type: 'curve',\n opacity: 0.4,\n gradient: true,\n addLine: true,\n width: 2,\n gradientColor: metric.colors\n },\n tooltip: { show: false }\n }\n });\n } catch (error) {\n console.error('图表初始化失败:', metric.label, error);\n }\n}\n\n// 初始化所有图表\nfunction initAllCharts() {\n coreMetrics.forEach((metric, index) => {\n initMetricChart(metric, index);\n });\n}\n\n// 里程碑数据\nconst milestoneData = reactive([\n {\n title: '项目启动',\n time: '2024-01-15',\n desc: '项目需求确认，团队组建完成',\n completed: true,\n active: false\n },\n {\n title: '设计阶段',\n time: '2024-02-20',\n desc: 'UI/UX 设计完成，原型评审通过',\n completed: true,\n active: false\n },\n {\n title: '开发阶段',\n time: '2024-03-10',\n desc: '核心功能开发进行中',\n completed: false,\n active: true\n },\n {\n title: '测试上线',\n time: '2024-04-05',\n desc: '测试完成后正式发布',\n completed: false,\n active: false\n }\n]);\n\n// 倒计时数据\nconst countdownTime = reactive({ hours: '02', minutes: '30', seconds: '00' });\nlet countdownTimer = null;\n\n// 项目日志数据\nconst projectLogs = reactive([\n {\n type: 'status',\n title: '状态变更',\n content: '项目状态从\"设计中\"变更为\"施工中\"',\n time: '10分钟前',\n user: '王经理'\n },\n {\n type: 'progress',\n title: '进度更新',\n content: '水电阶段进度更新至 80%，预计明天完成验收',\n time: '2小时前',\n user: '李工'\n },\n {\n type: 'task',\n title: '任务完成',\n content: '完成任务\"水电管线铺设\"，用时3天',\n time: '昨天',\n user: '张师傅'\n },\n {\n type: 'stage',\n title: '阶段完成',\n content: '拆改阶段已完成，进入水电阶段',\n time: '3天前',\n user: '系统'\n },\n {\n type: 'member',\n title: '成员变动',\n content: '添加新成员\"赵师傅\"，负责泥瓦工程',\n time: '5天前',\n user: '王经理'\n }\n]);\n\n// 获取日志类型图标\nfunction getLogIcon(type) {\n const icons = {\n status: 'fa-exchange-alt', // 状态变更\n progress: 'fa-chart-line', // 进度更新\n task: 'fa-check-circle', // 任务完成\n stage: 'fa-flag', // 阶段完成\n member: 'fa-user-plus', // 成员变动\n file: 'fa-file-alt', // 文件上传\n comment: 'fa-comment', // 评论\n default: 'fa-info-circle'\n };\n return icons[type] || icons.default;\n}\n\nfunction startCountdown() {\n let total = 2 * 3600 + 30 * 60;\n countdownTimer = setInterval(() => {\n if (total <= 0) {\n clearInterval(countdownTimer);\n return;\n }\n total--;\n const h = Math.floor(total / 3600);\n const m = Math.floor((total % 3600) / 60);\n const s = total % 60;\n countdownTime.hours = String(h).padStart(2, '0');\n countdownTime.minutes = String(m).padStart(2, '0');\n countdownTime.seconds = String(s).padStart(2, '0');\n }, 1000);\n}\n\nonMounted(() => {\n startCountdown();\n // 延迟初始化图表，确保 canvas 已渲染\n setTimeout(() => {\n initAllCharts();\n }, 500);\n});\n\nonUnmounted(() => {\n if (countdownTimer) clearInterval(countdownTimer);\n});\n</script>\n\n<style lang=\"scss\">\n@import './demo-common.scss';\n\n/* ============================================================\n 项目日志\n ============================================================ */\n\n.card-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 20rpx;\n}\n\n/* 添加日志按钮 */\n.add-log-btn {\n display: flex;\n align-items: center;\n gap: 8rpx;\n padding: 8rpx 16rpx;\n background: rgba(52, 120, 246, 0.12);\n border-radius: 8rpx;\n font-size: 24rpx;\n color: var(--prism-primary-color, #3478F6);\n\n .fa {\n font-size: 20rpx;\n }\n\n &:active {\n opacity: 0.8;\n }\n}\n\n.logs-card {\n padding: 0;\n}\n\n.log-item {\n display: flex;\n gap: 20rpx;\n padding: 20rpx 0;\n\n &:not(:last-child) {\n border-bottom: 1px solid var(--prism-border-color-light, #F2F3F5);\n }\n}\n\n.log-icon {\n width: 56rpx;\n height: 56rpx;\n border-radius: 12rpx;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n\n .fa {\n font-size: 24rpx;\n }\n\n // 状态变更 - 蓝色\n &--status {\n background: rgba(52, 120, 246, 0.12);\n .fa { color: #3478F6; }\n }\n\n // 进度更新 - 绿色\n &--progress {\n background: rgba(0, 180, 42, 0.12);\n .fa { color: #00B42A; }\n }\n\n // 任务完成 - 青色\n &--task {\n background: rgba(20, 201, 201, 0.12);\n .fa { color: #14C9C9; }\n }\n\n // 阶段完成 - 橙色\n &--stage {\n background: rgba(255, 125, 0, 0.12);\n .fa { color: #FF7D00; }\n }\n\n // 成员变动 - 紫色\n &--member {\n background: rgba(114, 46, 209, 0.12);\n .fa { color: #722ED1; }\n }\n\n // 文件上传 - 灰色\n &--file {\n background: rgba(134, 144, 156, 0.12);\n .fa { color: #86909C; }\n }\n\n // 评论 - 粉色\n &--comment {\n background: rgba(245, 63, 126, 0.12);\n .fa { color: #F53F7E; }\n }\n}\n\n.log-content {\n flex: 1;\n min-width: 0;\n}\n\n.log-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8rpx;\n}\n\n.log-title {\n font-size: 28rpx;\n font-weight: 500;\n color: var(--prism-text-primary, #1D2129);\n}\n\n.log-time {\n font-size: 22rpx;\n color: var(--prism-text-placeholder, #C9CDD4);\n flex-shrink: 0;\n}\n\n.log-desc {\n display: block;\n font-size: 26rpx;\n color: var(--prism-text-secondary, #86909C);\n line-height: 1.5;\n margin-bottom: 8rpx;\n}\n\n.log-user {\n display: flex;\n align-items: center;\n gap: 8rpx;\n font-size: 22rpx;\n color: var(--prism-text-placeholder, #C9CDD4);\n\n .fa {\n font-size: 20rpx;\n }\n}\n\n/* 深色模式 */\n.dark-mode {\n .add-log-btn {\n background: rgba(52, 120, 246, 0.2);\n color: #5da3f5;\n }\n\n .log-item {\n border-bottom-color: #2D2D2D;\n }\n\n .log-title {\n color: #E5E6EB;\n }\n\n .log-icon {\n // 深色模式下增强背景透明度\n &--status {\n background: rgba(52, 120, 246, 0.2);\n .fa { color: #5da3f5; }\n }\n\n &--progress {\n background: rgba(0, 180, 42, 0.2);\n .fa { color: #23C343; }\n }\n\n &--task {\n background: rgba(20, 201, 201, 0.2);\n .fa { color: #33D4D4; }\n }\n\n &--stage {\n background: rgba(255, 125, 0, 0.2);\n .fa { color: #FF9A33; }\n }\n\n &--member {\n background: rgba(114, 46, 209, 0.2);\n .fa { color: #9254DE; }\n }\n\n &--file {\n background: rgba(134, 144, 156, 0.2);\n .fa { color: #A0A5AD; }\n }\n\n &--comment {\n background: rgba(245, 63, 126, 0.2);\n .fa { color: #F76393; }\n }\n }\n}\n</style>\n","import MiniProgramPage from 'E:/git/ruixin-gitlab/ruixin-keiji/ruixin-prism-ui-uniApp/src/pages/demo/data.vue'\nwx.createPage(MiniProgramPage)"],"names":["useAppStore","getCurrentInstance","computed","reactive","uni","uCharts","onMounted","onUnmounted","MiniProgramPage"],"mappings":"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"}

package/dist/dev/.sourcemap/mp-weixin/pages/demo/effects.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"effects.js","sources":["pages/demo/effects.vue","../uniPage:/cGFnZXMvZGVtby9lZmZlY3RzLnZ1ZQ"],"sourcesContent":["\n<template>\n <view class=\"prism-page\" :class=\"{ 'dark-mode': appStore.isDarkMode }\">\n \n <PrismNavBar\n title=\"特效组件\"\n icon=\"fa-wand-magic-sparkles\"\n icon-color=\"yellow\"\n :show-back=\"true\"\n />\n\n \n <scroll-view class=\"prism-main\" scroll-y :style=\"{ paddingTop: navbarHeight + 'px' }\">\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">悬浮按钮</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础悬浮按钮</view>\n <view class=\"float-btn-demo\">\n <view class=\"prism-float-btn\">\n <text class=\"fa fa-plus\"></text>\n </view>\n </view>\n <PrismCode code=\"prism-float-btn（深色模式下有霓虹效果）\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">渐变文字 (VitePress风格)</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">流动渐变效果</view>\n <view class=\"flex flex-col gap-[20rpx] items-center py-[30rpx]\">\n <text class=\"prism-neon-text prism-neon-text--blue text-[48rpx] font-bold\">PRISM UI</text>\n <text class=\"prism-neon-text prism-neon-text--pink text-[48rpx] font-bold\">GRADIENT</text>\n <text class=\"prism-neon-text prism-neon-text--green text-[48rpx] font-bold\">EFFECT</text>\n </view>\n <PrismCode code=\"prism-neon-text--blue / --pink / --green\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">渐变边框</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础用法</view>\n <view class=\"prism-gradient-border\">\n <view class=\"p-[30rpx]\">\n <text class=\"prism-text-primary text-[32rpx] font-bold\">渐变边框卡片</text>\n <text class=\"prism-text-secondary mt-[10rpx]\" style=\"display: block;\">带有彩虹渐变边框效果</text>\n </view>\n </view>\n <PrismCode code=\"prism-gradient-border\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">RGB Neon Progress 霓虹进度条</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础用法</view>\n <text class=\"prism-text-secondary mb-[20rpx]\" style=\"display: block;\">浅色模式下为蓝色渐变，深色模式下为 RGB 霓虹流动效果</text>\n\n <view class=\"prism-progress mb-[20rpx]\">\n <view class=\"progress-bar prism-neon-progress-fill\" style=\"width: 60%;\"></view>\n </view>\n\n <view class=\"prism-progress mb-[20rpx]\">\n <view class=\"progress-bar prism-neon-progress-fill\" style=\"width: 75%;\"></view>\n </view>\n\n <view class=\"prism-progress mb-[20rpx]\">\n <view class=\"progress-bar prism-neon-progress-fill\" style=\"width: 45%;\"></view>\n </view>\n\n <view class=\"prism-progress mb-[20rpx]\">\n <view class=\"progress-bar prism-neon-progress-fill\" style=\"width: 90%;\"></view>\n </view>\n\n <view class=\"card-title\">提示</view>\n <text class=\"prism-text-secondary\">切换到深色模式查看 RGB 霓虹流动效果 ✨</text>\n\n <PrismCode code=\"prism-neon-progress-fill (深色模式自动启用霓虹效果)\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">脉冲效果</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础用法</view>\n <view class=\"flex flex-row gap-[15rpx] flex-wrap\" style=\"justify-content: center;\">\n <view class=\"prism-icon-btn xl primary pulse\">\n <text class=\"fa fa-heart\"></text>\n </view>\n </view>\n <PrismCode code=\"pulse\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">工具类</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">布局</view>\n <PrismCode code=\"flex-row / flex-center / flex-between / flex-1\" />\n\n <view class=\"card-title\">文字</view>\n <PrismCode code=\"prism-text-primary / prism-text-secondary / text-lg / text-bold\" />\n\n <view class=\"card-title\">间距</view>\n <PrismCode code=\"m-20 / mt-[20rpx] / p-20 / px-20\" />\n\n <view class=\"card-title\">圆角</view>\n <PrismCode code=\"rounded / rounded-lg / rounded-full\" />\n </view>\n </view>\n\n \n <view class=\"prism-safe-area-bottom\"></view>\n </scroll-view>\n </view>\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { useAppStore } from '@/store/app';\nimport PrismCode from '@/components/PrismCode/PrismCode.vue';\n\nconst appStore = useAppStore();\n\nconst navbarHeight = computed(() => {\n return appStore.statusBarHeight + 44;\n});\n\n</script>\n\n<style lang=\"scss\">\n@import './demo-common.scss';\n\n.float-btn-demo {\n display: flex;\n justify-content: center;\n padding: 40rpx 0;\n position: relative;\n}\n</style>\n","import MiniProgramPage from 'E:/git/ruixin-gitlab/ruixin-keiji/ruixin-prism-ui-uniApp/src/pages/demo/effects.vue'\nwx.createPage(MiniProgramPage)"],"names":["useAppStore","computed","MiniProgramPage"],"mappings":";;;;;;;;;;;AAAA,MAAA,YAAA,MAAA;;;;AAAA,UAAA,WAAAA,UAAAA,YAAA;AAAA,UAAA,eAAAC,cAAAA,SAAA,MAAA;AAAA,aAAA,SAAA,kBAAA;AAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACCA,GAAG,WAAWC,SAAe;"}

package/dist/dev/.sourcemap/mp-weixin/pages/demo/feedback.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"feedback.js","sources":["pages/demo/feedback.vue","../uniPage:/cGFnZXMvZGVtby9mZWVkYmFjay52dWU"],"sourcesContent":["<template>\n <view class=\"prism-page\" :class=\"{ 'dark-mode': appStore.isDarkMode }\">\n \n <PrismNavBar\n title=\"反馈组件\"\n icon=\"fa-comment-dots\"\n icon-color=\"red\"\n :show-back=\"true\"\n />\n\n \n <scroll-view class=\"prism-main\" scroll-y :style=\"{ paddingTop: navbarHeight + 'px' }\">\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Toast 轻提示</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">单行布局（默认）</view>\n <view class=\"flex flex-row gap-[16rpx] flex-wrap mb-[24rpx]\">\n <button class=\"prism-btn primary sm solid\" @click=\"showToast('success', false)\">\n <text>成功</text>\n </button>\n <button class=\"prism-btn primary sm solid\" @click=\"showToast('error', false)\">\n <text>错误</text>\n </button>\n <button class=\"prism-btn primary sm solid\" @click=\"showToast('warning', false)\">\n <text>警告</text>\n </button>\n <button class=\"prism-btn primary sm solid\" @click=\"showToast('info', false)\">\n <text>信息</text>\n </button>\n </view>\n\n <view class=\"card-title\">竖向布局</view>\n <view class=\"flex flex-row gap-[16rpx] flex-wrap mb-[24rpx]\">\n <button class=\"prism-btn success sm solid\" @click=\"showToast('success', true)\">\n <text>成功</text>\n </button>\n <button class=\"prism-btn danger sm solid\" @click=\"showToast('error', true)\">\n <text>错误</text>\n </button>\n <button class=\"prism-btn warning sm solid\" @click=\"showToast('loading', true)\">\n <text>加载中</text>\n </button>\n </view>\n\n <PrismCode code=\"prism-toast + success/error/warning/info | column\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Alert 警告提示</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">静态展示</view>\n\n <view class=\"prism-alert mb-[16rpx]\">\n <text class=\"prism-alert__icon fa fa-circle-info\"></text>\n <view class=\"prism-alert__content\">\n <view class=\"prism-alert__title\">信息提示</view>\n <view class=\"prism-alert__text\">这是一条普通的信息提示</view>\n </view>\n </view>\n\n <view class=\"prism-alert success mb-[16rpx]\">\n <text class=\"prism-alert__icon fa fa-circle-check\"></text>\n <view class=\"prism-alert__content\">\n <view class=\"prism-alert__title\">成功提示</view>\n <view class=\"prism-alert__text\">操作已成功完成</view>\n </view>\n </view>\n\n <view class=\"prism-alert warning mb-[16rpx]\">\n <text class=\"prism-alert__icon fa fa-triangle-exclamation\"></text>\n <view class=\"prism-alert__content\">\n <view class=\"prism-alert__title\">警告提示</view>\n <view class=\"prism-alert__text\">请注意某些重要事项</view>\n </view>\n </view>\n\n <view class=\"prism-alert error mb-[16rpx]\">\n <text class=\"prism-alert__icon fa fa-circle-xmark\"></text>\n <view class=\"prism-alert__content\">\n <view class=\"prism-alert__title\">错误提示</view>\n <view class=\"prism-alert__text\">操作失败，请稍后重试</view>\n </view>\n </view>\n\n <view class=\"card-title\">可关闭</view>\n <view class=\"prism-alert success\" v-if=\"!alertClosed\">\n <text class=\"prism-alert__icon fa fa-circle-check\"></text>\n <view class=\"prism-alert__content\">\n <view class=\"prism-alert__text\">这是一条可以关闭的提示信息</view>\n </view>\n <text class=\"prism-alert__close fa fa-xmark\" @click=\"alertClosed = true\"></text>\n </view>\n\n <PrismCode code=\"prism-alert + success/warning/error | prism-alert-popup\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">NoticeBar 通知栏</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础用法</view>\n\n <view class=\"prism-notice mb-[16rpx]\">\n <text class=\"prism-notice__icon fa fa-bullhorn\"></text>\n <view class=\"prism-notice__content\">\n <text class=\"prism-notice__text\">这是一条默认的通知消息</text>\n </view>\n </view>\n\n <view class=\"prism-notice info mb-[16rpx]\">\n <text class=\"prism-notice__icon fa fa-circle-info\"></text>\n <view class=\"prism-notice__content\">\n <text class=\"prism-notice__text\">这是一条信息通知</text>\n </view>\n </view>\n\n <view class=\"prism-notice success mb-[20rpx]\">\n <text class=\"prism-notice__icon fa fa-circle-check\"></text>\n <view class=\"prism-notice__content\">\n <text class=\"prism-notice__text\">操作成功！</text>\n </view>\n </view>\n\n <PrismCode code=\"prism-notice + info/success/error\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Skeleton 骨架屏</view>\n\n <view class=\"prism-card glass\">\n <view class=\"card-title\">基础用法</view>\n <view class=\"skeleton-demo\">\n <view class=\"flex flex-row items-center mb-[20rpx]\">\n <view class=\"prism-skeleton prism-skeleton--avatar\"></view>\n <view class=\"flex-1 ml-[20rpx]\">\n <view class=\"prism-skeleton prism-skeleton--title\"></view>\n <view class=\"prism-skeleton prism-skeleton--text\" style=\"width: 80%;\"></view>\n </view>\n </view>\n <view class=\"prism-skeleton prism-skeleton--text\"></view>\n <view class=\"prism-skeleton prism-skeleton--text\"></view>\n <view class=\"prism-skeleton prism-skeleton--text\" style=\"width: 60%;\"></view>\n <view class=\"prism-skeleton prism-skeleton--button mt-[20rpx]\"></view>\n </view>\n <PrismCode code=\"prism-skeleton--avatar / --title / --text / --button\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Dialog 对话框</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">不同类型</view>\n <view class=\"flex flex-row gap-[16rpx] flex-wrap mb-[24rpx]\">\n <button class=\"prism-btn primary sm solid\" @click=\"openDialog('alert')\">\n <text>Alert</text>\n </button>\n <button class=\"prism-btn primary sm solid\" @click=\"openDialog('confirm')\">\n <text>Confirm</text>\n </button>\n <button class=\"prism-btn success sm solid\" @click=\"openDialog('success')\">\n <text>成功</text>\n </button>\n <button class=\"prism-btn danger sm solid\" @click=\"openDialog('error')\">\n <text>错误</text>\n </button>\n </view>\n <PrismCode code=\"prism-dialog + alert/confirm\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Loading 加载中</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">全局加载</view>\n <button class=\"prism-btn primary sm solid mb-[24rpx]\" @click=\"showLoading\">\n <text>显示 Loading</text>\n </button>\n\n <view class=\"card-title\">局部加载</view>\n <view class=\"prism-loading-inline mb-[20rpx]\">\n <view class=\"spinner\"></view>\n <text class=\"text\">加载中...</text>\n </view>\n\n <PrismCode code=\"prism-loading / prism-loading-inline\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">ActionSheet 动作面板</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础用法</view>\n <button class=\"prism-btn primary sm solid\" @click=\"showSheet = true\">\n <text>打开动作面板</text>\n </button>\n <PrismCode code=\"prism-bottom-sheet\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Tips 轻提示</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">四个方向弹出</view>\n <view class=\"flex flex-row gap-[16rpx] flex-wrap mb-[16rpx]\">\n <button class=\"prism-btn primary sm solid\" @click=\"showTips('top')\">\n <text>从上弹出</text>\n </button>\n <button class=\"prism-btn success sm solid\" @click=\"showTips('bottom')\">\n <text>从下弹出</text>\n </button>\n <button class=\"prism-btn warning sm solid\" @click=\"showTips('left')\">\n <text>从左弹出</text>\n </button>\n <button class=\"prism-btn danger sm solid\" @click=\"showTips('right')\">\n <text>从右弹出</text>\n </button>\n </view>\n <PrismCode code=\"prism-tips-popup + top/bottom/left/right\" />\n </view>\n </view>\n\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Modal 模态框</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">升级提示示例</view>\n <button class=\"prism-btn primary sm solid\" @click=\"showModal = true\">\n <text>查看升级提示</text>\n </button>\n <PrismCode code=\"prism-modal\" />\n </view>\n </view>\n\n \n <view class=\"prism-safe-area-bottom\"></view>\n </scroll-view>\n\n \n <view class=\"prism-toast\" :class=\"[toastType, { column: toastColumn }]\" v-if=\"toastVisible\">\n <text class=\"prism-toast__icon fa\" :class=\"toastIcon\"></text>\n <text class=\"prism-toast__text\">{{ toastText }}</text>\n </view>\n\n \n <view class=\"prism-dialog\" v-if=\"dialogVisible\" @click=\"dialogVisible = false\">\n <view class=\"prism-dialog__content\" @click.stop>\n <view class=\"prism-dialog__header\">\n <text class=\"prism-dialog__icon fa\" :class=\"[dialogIcon, dialogType]\"></text>\n <view class=\"prism-dialog__title\">{{ dialogTitle }}</view>\n </view>\n <view class=\"prism-dialog__body\">{{ dialogContent }}</view>\n <view class=\"prism-dialog__footer\">\n <view class=\"prism-dialog__btn\" v-if=\"dialogType === 'confirm'\" @click=\"dialogVisible = false\">\n <text>取消</text>\n </view>\n <view class=\"prism-dialog__btn\" :class=\"{\n 'primary': dialogType === 'alert' || dialogType === 'confirm',\n 'success': dialogType === 'success',\n 'danger': dialogType === 'error'\n }\" @click=\"handleDialogConfirm\">\n <text>{{ dialogType === 'confirm' ? '确定' : '知道了' }}</text>\n </view>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-loading\" v-if=\"loadingVisible\">\n <view class=\"prism-loading__content\">\n <view class=\"prism-loading__spinner\"></view>\n <text class=\"prism-loading__text\">加载中...</text>\n </view>\n </view>\n\n \n <view class=\"prism-bottom-sheet\" v-if=\"showSheet\" @click=\"showSheet = false\">\n <view class=\"sheet-content\" @click.stop>\n <view class=\"sheet-title\">选择操作</view>\n <view class=\"sheet-options\">\n <view class=\"sheet-option\" @click=\"handleSheetSelect('edit')\">\n <view class=\"option-icon prism-icon blue\">\n <text class=\"fa fa-edit\"></text>\n </view>\n <text class=\"option-text\">编辑</text>\n <text class=\"fa fa-angle-right option-arrow\"></text>\n </view>\n <view class=\"sheet-option\" @click=\"handleSheetSelect('share')\">\n <view class=\"option-icon prism-icon green\">\n <text class=\"fa fa-share\"></text>\n </view>\n <text class=\"option-text\">分享</text>\n <text class=\"fa fa-angle-right option-arrow\"></text>\n </view>\n <view class=\"sheet-option\" @click=\"handleSheetSelect('download')\">\n <view class=\"option-icon prism-icon orange\">\n <text class=\"fa fa-download\"></text>\n </view>\n <text class=\"option-text\">下载</text>\n <text class=\"fa fa-angle-right option-arrow\"></text>\n </view>\n <view class=\"sheet-option\" @click=\"handleSheetSelect('delete')\">\n <view class=\"option-icon prism-icon red\">\n <text class=\"fa fa-trash\"></text>\n </view>\n <text class=\"option-text\">删除</text>\n <text class=\"fa fa-angle-right option-arrow\"></text>\n </view>\n </view>\n <view class=\"sheet-cancel\" @click=\"showSheet = false\">取消</view>\n </view>\n </view>\n\n \n <view class=\"prism-modal\" v-if=\"showModal\" @click=\"showModal = false\">\n <view class=\"prism-modal__content centered\" @click.stop>\n <view class=\"prism-modal__header\">\n <view class=\"prism-modal__title\">发现新版本</view>\n <text class=\"prism-modal__close fa fa-xmark\" @click=\"showModal = false\"></text>\n </view>\n <view class=\"prism-modal__body\">\n \n <view class=\"version-info mb-[24rpx]\">\n <view class=\"version-header\">\n <view class=\"version-number\">V2.1.0</view>\n <text class=\"version-date\">2024-03-15</text>\n </view>\n </view>\n\n \n <view class=\"update-section mb-[32rpx]\">\n <view class=\"update-title\">更新内容</view>\n <view class=\"update-list\">\n <view class=\"update-item\">\n <text class=\"fa fa-circle-check update-icon\"></text>\n <text class=\"update-text\">新增深色模式支持</text>\n </view>\n <view class=\"update-item\">\n <text class=\"fa fa-circle-check update-icon\"></text>\n <text class=\"update-text\">优化页面加载速度</text>\n </view>\n <view class=\"update-item\">\n <text class=\"fa fa-circle-check update-icon\"></text>\n <text class=\"update-text\">修复已知问题</text>\n </view>\n </view>\n </view>\n\n \n <view class=\"flex flex-row gap-[16rpx]\">\n <button class=\"prism-btn sm outline flex-1\" @click=\"showModal = false\">\n <text>稍后提醒</text>\n </button>\n <button class=\"prism-btn primary sm solid flex-1\" @click=\"handleUpgrade\">\n <text>立即升级</text>\n </button>\n </view>\n </view>\n </view>\n </view>\n\n \n <view\n class=\"prism-tips-popup\"\n :class=\"[tipsDirection, { closing: tipsClosing }]\"\n v-if=\"tipsVisible\"\n >\n <view class=\"prism-tips\">\n <text class=\"prism-tips__icon fa fa-circle-info\"></text>\n <text class=\"prism-tips__text\">{{ tipsText }}</text>\n </view>\n </view>\n </view>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\nimport { useAppStore } from '@/store/app';\nimport PrismCode from '@/components/PrismCode/PrismCode.vue';\n\nconst appStore = useAppStore();\n\nconst navbarHeight = computed(() => {\n return appStore.statusBarHeight + 44;\n});\n\n// Alert\nconst alertClosed = ref(false);\n\n// Toast\nconst toastVisible = ref(false);\nconst toastType = ref('success');\nconst toastText = ref('');\nconst toastIcon = ref('fa-circle-check');\nconst toastColumn = ref(false);\n\nfunction showToast(type, isColumn = false) {\n const config = {\n success: { icon: 'fa-circle-check', text: '操作成功' },\n error: { icon: 'fa-circle-xmark', text: '操作失败' },\n warning: { icon: 'fa-triangle-exclamation', text: '警告信息' },\n info: { icon: 'fa-circle-info', text: '提示信息' },\n loading: { icon: 'fa-spinner', text: '加载中...' }\n };\n\n toastType.value = type;\n toastIcon.value = config[type].icon;\n toastText.value = config[type].text;\n toastColumn.value = isColumn;\n toastVisible.value = true;\n\n setTimeout(() => {\n toastVisible.value = false;\n }, 2000);\n}\n\n// Dialog\nconst dialogVisible = ref(false);\nconst dialogType = ref('alert');\nconst dialogTitle = ref('');\nconst dialogContent = ref('');\nconst dialogIcon = ref('');\n\nfunction openDialog(type) {\n const config = {\n alert: {\n title: '提示',\n content: '这是一个简单的提示对话框',\n icon: 'fa-circle-info'\n },\n confirm: {\n title: '确认操作',\n content: '确定要执行此操作吗？',\n icon: 'fa-circle-question'\n },\n success: {\n title: '操作成功',\n content: '操作已成功完成！',\n icon: 'fa-circle-check'\n },\n error: {\n title: '操作失败',\n content: '操作失败，请稍后重试',\n icon: 'fa-circle-xmark'\n }\n };\n\n dialogType.value = type;\n dialogTitle.value = config[type].title;\n dialogContent.value = config[type].content;\n dialogIcon.value = config[type].icon;\n dialogVisible.value = true;\n}\n\nfunction handleDialogConfirm() {\n dialogVisible.value = false;\n if (dialogType.value === 'confirm') {\n showToast('success');\n }\n}\n\n// Loading\nconst loadingVisible = ref(false);\n\nfunction showLoading() {\n loadingVisible.value = true;\n setTimeout(() => {\n loadingVisible.value = false;\n }, 2000);\n}\n\n// ActionSheet\nconst showSheet = ref(false);\n\nfunction handleSheetSelect(action) {\n showSheet.value = false;\n const messages = {\n edit: '编辑',\n share: '分享',\n download: '下载',\n delete: '删除'\n };\n uni.showToast({\n title: `选择了：${messages[action]}`,\n icon: 'none'\n });\n}\n\n// Modal\nconst showModal = ref(false);\n\n// Tips\nconst tipsVisible = ref(false);\nconst tipsDirection = ref('top');\nconst tipsText = ref('');\nconst tipsClosing = ref(false);\n\nfunction showTips(direction) {\n tipsDirection.value = direction;\n const messages = {\n top: '这是从上方弹出的提示',\n bottom: '这是从下方弹出的提示',\n left: '这是从左侧弹出的提示',\n right: '这是从右侧弹出的提示'\n };\n tipsText.value = messages[direction];\n tipsVisible.value = true;\n\n // Auto-hide after 2 seconds\n setTimeout(() => {\n hideTips();\n }, 2000);\n}\n\nfunction hideTips() {\n tipsClosing.value = true;\n setTimeout(() => {\n tipsVisible.value = false;\n tipsClosing.value = false;\n }, 300);\n}\n\n// 升级处理\nfunction handleUpgrade() {\n showModal.value = false;\n showToast('success', false);\n}\n</script>\n\n<style lang=\"scss\">\n@import './demo-common.scss';\n\n// Skeleton 样式\n.skeleton-demo {\n padding: 20rpx;\n background: var(--prism-bg-color, #F7F8FA);\n border-radius: 12rpx;\n}\n\n.dark-mode .skeleton-demo {\n background: rgba(255, 255, 255, 0.05);\n}\n\n// 版本信息\n.version-info {\n display: flex;\n flex-direction: column;\n gap: 8rpx;\n}\n\n.version-header {\n display: flex;\n align-items: baseline;\n gap: 16rpx;\n}\n\n.version-number {\n font-size: 40rpx;\n font-weight: 700;\n color: var(--prism-text-primary, #1D2129);\n\n .dark-mode & {\n color: var(--prism-text-primary, #E5E6EB);\n }\n}\n\n.version-date {\n font-size: 24rpx;\n color: var(--prism-text-placeholder, #C9CDD4);\n}\n\n// 更新区块\n.update-section {\n display: flex;\n flex-direction: column;\n gap: 16rpx;\n}\n\n.update-title {\n font-size: 28rpx;\n font-weight: 600;\n color: var(--prism-text-primary, #1D2129);\n margin-bottom: 8rpx;\n\n .dark-mode & {\n color: var(--prism-text-primary, #E5E6EB);\n }\n}\n\n// 更新列表\n.update-list {\n display: flex;\n flex-direction: column;\n gap: 16rpx;\n}\n\n.update-item {\n display: flex;\n align-items: flex-start;\n line-height: 1.6;\n gap: 12rpx;\n}\n\n.update-icon {\n color: var(--prism-success-color, #00B42A);\n font-size: 20rpx;\n margin-top: 4rpx;\n flex-shrink: 0;\n}\n\n.update-text {\n font-size: 26rpx;\n color: var(--prism-text-secondary, #86909C);\n flex: 1;\n}\n</style>\n","import MiniProgramPage from 'E:/git/ruixin-gitlab/ruixin-keiji/ruixin-prism-ui-uniApp/src/pages/demo/feedback.vue'\nwx.createPage(MiniProgramPage)"],"names":["useAppStore","computed","ref","uni","MiniProgramPage"],"mappings":"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"}

package/dist/dev/.sourcemap/mp-weixin/pages/demo/form.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"form.js","sources":["pages/demo/form.vue","../uniPage:/cGFnZXMvZGVtby9mb3JtLnZ1ZQ"],"sourcesContent":["<template>\n <view class=\"prism-page\" :class=\"{ 'dark-mode': appStore.isDarkMode }\">\n \n <PrismNavBar\n title=\"表单组件\"\n icon=\"fa-keyboard\"\n icon-color=\"teal\"\n :show-back=\"true\"\n />\n\n \n <scroll-view class=\"prism-main\" scroll-y :style=\"{ paddingTop: navbarHeight + 'px' }\">\n\n \n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">输入框</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础输入框</view>\n <view class=\"prism-input-box mb-[20rpx]\">\n <input placeholder=\"请输入内容\" />\n </view>\n\n <view class=\"card-title\">带前置图标</view>\n <view class=\"prism-input-box mb-[20rpx]\">\n <view class=\"prefix-icon\">\n <text class=\"fa fa-user\"></text>\n </view>\n <input placeholder=\"请输入用户名\" />\n </view>\n <view class=\"prism-input-box mb-[20rpx]\">\n <view class=\"prefix-icon\">\n <text class=\"fa fa-phone\"></text>\n </view>\n <input type=\"number\" placeholder=\"请输入手机号\" />\n </view>\n\n <view class=\"card-title\">带清除按钮</view>\n <view class=\"prism-input-box mb-[20rpx]\">\n <input placeholder=\"请输入内容\" v-model=\"inputValue\" />\n <view class=\"clear-icon\" v-if=\"inputValue\" @click=\"inputValue = ''\">\n <text class=\"fa fa-circle-xmark\"></text>\n </view>\n </view>\n\n <view class=\"card-title\">带语音输入</view>\n <view class=\"prism-input-box mb-[20rpx]\">\n <input placeholder=\"点击右侧语音输入\" v-model=\"voiceInputValue\" />\n <view class=\"prism-voice-icon\" @click=\"handleVoiceInput\">\n <text class=\"fa fa-microphone\"></text>\n </view>\n </view>\n\n <view class=\"card-title\">密码输入框</view>\n <view class=\"prism-input-box mb-[20rpx]\">\n <input :type=\"showPassword ? 'text' : 'password'\" placeholder=\"请输入密码\" />\n <view class=\"eye-icon\" @click=\"showPassword = !showPassword\">\n <text class=\"fa\" :class=\"showPassword ? 'fa-eye' : 'fa-eye-slash'\"></text>\n </view>\n </view>\n\n <view class=\"card-title\">带验证码按钮</view>\n <view class=\"prism-input-box\">\n <input placeholder=\"请输入验证码\" />\n <view class=\"code-btn\" :class=\"{ disabled: countdown > 0 }\" @click=\"sendCode\">\n {{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}\n </view>\n </view>\n <PrismCode code=\"prism-input-box\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">验证码输入框</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">4位验证码</view>\n <PrismCodeInput :length=\"4\" v-model=\"code4Value\" @complete=\"onCode4Complete\" />\n <view class=\"prism-text-secondary mt-[16rpx]\">已输入：{{ code4Value || '空' }}</view>\n\n <view class=\"card-title mt-[32rpx]\">6位验证码</view>\n <PrismCodeInput :length=\"6\" v-model=\"code6Value\" @complete=\"onCode6Complete\" />\n <view class=\"prism-text-secondary mt-[16rpx]\">已输入：{{ code6Value || '空' }}</view>\n <PrismCode code=\"<PrismCodeInput :length='6' v-model='code' />\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">安全密码输入</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">6位支付密码（自定义键盘）</view>\n <PrismSecureInput :length=\"6\" v-model=\"securePassword\" @complete=\"onSecureComplete\" />\n <view class=\"prism-text-secondary mt-[16rpx]\">已输入：{{ securePassword ? '******' : '空' }}</view>\n\n <view class=\"card-title mt-[32rpx]\">随机键盘</view>\n <PrismSecureInput :length=\"6\" v-model=\"securePasswordRandom\" :randomOrder=\"true\" title=\"请输入交易密码\" />\n <PrismCode code=\"<PrismSecureInput :length='6' :randomOrder='true' />\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">车牌号输入</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">自定义键盘</view>\n <PrismLicensePlateInput v-model=\"licensePlate\" @complete=\"onLicenseComplete\" />\n <view class=\"prism-text-secondary mt-[16rpx]\">已输入：{{ licensePlate || '空' }}</view>\n <PrismCode code=\"<PrismLicensePlateInput v-model='plate' />\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">身份证输入</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">18位身份证号</view>\n <PrismIdCardInput v-model=\"idCardNumber\" @complete=\"onIdCardComplete\" />\n <PrismCode code=\"<PrismIdCardInput v-model='idCard' />\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Search 搜索框</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础用法</view>\n <view class=\"prism-search\">\n <text class=\"prism-search__icon fa fa-search\"></text>\n <input class=\"prism-search__input\" placeholder=\"搜索...\" v-model=\"searchValue\" />\n <text v-if=\"searchValue\" class=\"prism-search__clear fa fa-circle-xmark\" @click=\"searchValue = ''\"></text>\n </view>\n <PrismCode code=\"prism-search\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">地址输入</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">带定位按钮（组件化）</view>\n <PrismAddressInput\n v-model=\"addressValue2\"\n v-model:latitude=\"locationData2.latitude\"\n v-model:longitude=\"locationData2.longitude\"\n placeholder=\"点击右侧按钮选择位置\"\n :showMap=\"false\"\n @location-change=\"onLocationChange\"\n />\n <view class=\"prism-text-secondary mt-[16rpx]\">\n 地址：{{ addressValue2 || '未选择' }}\n </view>\n <PrismCode code=\"<PrismAddressInput v-model='address' />\" />\n\n <view class=\"card-title mt-[32rpx]\">带地图回显（样式类）</view>\n <view class=\"prism-address-wrapper\">\n <view class=\"prism-input-box\">\n <input placeholder=\"请输入或选择地址\" v-model=\"addressValue\" />\n </view>\n <view class=\"location-btn\" @click=\"handleLocation\">\n <text class=\"fa fa-location-crosshairs\"></text>\n </view>\n </view>\n \n <view class=\"prism-map-container\" v-if=\"locationData.latitude && locationData.longitude\" @click=\"handleLocation\">\n <image\n class=\"prism-location-map\"\n :src=\"staticMapUrl\"\n mode=\"aspectFill\"\n ></image>\n <view class=\"prism-relocate-tip\">\n <text class=\"fa fa-location-crosshairs\"></text>\n <text>点击重新选择位置</text>\n </view>\n </view>\n <PrismCode code=\"prism-address-wrapper + prism-map-container\" />\n </view>\n </view>\n\n \n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Textarea 文本域</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础用法</view>\n <view class=\"prism-textarea-wrapper\">\n <textarea class=\"prism-textarea prism-textarea--count\" placeholder=\"请输入内容...\" v-model=\"textareaValue\" maxlength=\"200\"></textarea>\n <view class=\"prism-textarea-count\">{{ textareaValue.length }}/200</view>\n </view>\n\n <view class=\"card-title mt-[32rpx]\">AI辅助 + 语音 + 拍照</view>\n <view class=\"prism-textarea-tools-wrapper\">\n <textarea\n class=\"prism-textarea\"\n v-model=\"descriptionValue\"\n placeholder=\"请输入详细描述...\"\n :maxlength=\"500\"\n ></textarea>\n <view class=\"prism-textarea-tools\">\n <view class=\"prism-ai-assist-btn\" @click=\"handleAIAssist\">\n <text class=\"fa fa-wand-magic-sparkles\"></text>\n <text>AI帮我完善</text>\n </view>\n <view class=\"prism-textarea-tools-right\">\n <view class=\"prism-tool-icon-btn\" @click=\"handleVoiceInput\">\n <text class=\"fa fa-microphone\"></text>\n </view>\n <view class=\"prism-tool-icon-btn\" @click=\"handleCamera\">\n <text class=\"fa fa-camera\"></text>\n </view>\n </view>\n </view>\n </view>\n <view class=\"prism-text-secondary text-[24rpx] mt-[12rpx]\">{{ descriptionValue.length }}/500</view>\n <PrismCode code=\"prism-textarea-wrapper / prism-textarea-tools-wrapper\" />\n </view>\n </view>\n\n \n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">表单项</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础表单项</view>\n <view class=\"prism-form-item\">\n <text class=\"label\">用户名</text>\n <view class=\"prism-input-box\">\n <input placeholder=\"请输入用户名\" />\n </view>\n </view>\n <view class=\"prism-form-item\">\n <text class=\"label\">手机号</text>\n <view class=\"prism-input-box\">\n <input type=\"number\" placeholder=\"请输入手机号\" />\n </view>\n </view>\n <PrismCode code=\"prism-form-item + .label\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">分割线</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础用法</view>\n <view class=\"prism-divider\">\n <text class=\"text\">分割线文字</text>\n </view>\n <PrismCode code=\"prism-divider > .text\" />\n </view>\n </view>\n\n \n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">复选框</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础用法</view>\n <view class=\"flex flex-row gap-[15rpx] flex-wrap\">\n <view class=\"flex flex-row items-center\" @click=\"checked1 = !checked1\">\n <view class=\"prism-checkbox\" :class=\"{ checked: checked1 }\">\n <text v-if=\"checked1\" class=\"check-icon fa fa-check\"></text>\n </view>\n <text class=\"prism-text-primary ml-[10rpx]\">选项一</text>\n </view>\n <view class=\"flex flex-row items-center\" @click=\"checked2 = !checked2\">\n <view class=\"prism-checkbox\" :class=\"{ checked: checked2 }\">\n <text v-if=\"checked2\" class=\"check-icon fa fa-check\"></text>\n </view>\n <text class=\"prism-text-primary ml-[10rpx]\">选项二</text>\n </view>\n </view>\n <PrismCode code=\"prism-checkbox + .checked\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">开关</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">圆形开关</view>\n <view class=\"flex flex-row gap-[30rpx] flex-wrap mb-[24rpx]\">\n <PrismSwitch v-model=\"switchValue\" />\n </view>\n\n <view class=\"card-title\">方形开关</view>\n <view class=\"flex flex-row gap-[30rpx] flex-wrap mb-[24rpx]\">\n <PrismSwitch v-model=\"switchSquareValue\" :square=\"true\" />\n <PrismSwitch v-model=\"switchSquareTextValue\" :square=\"true\" :showText=\"true\" onText=\"是\" offText=\"否\" />\n </view>\n\n <view class=\"card-title\">带文字开关</view>\n <view class=\"flex flex-row gap-[30rpx] flex-wrap mb-[24rpx]\">\n <PrismSwitch v-model=\"switchTextValue\" :showText=\"true\" />\n <PrismSwitch v-model=\"switchTextValue2\" :showText=\"true\" onText=\"开\" offText=\"关\" />\n </view>\n\n <view class=\"card-title\">禁用状态</view>\n <view class=\"flex flex-row gap-[30rpx] flex-wrap\">\n <PrismSwitch :modelValue=\"false\" :disabled=\"true\" />\n <PrismSwitch :modelValue=\"true\" :disabled=\"true\" />\n </view>\n <PrismCode code=\"<PrismSwitch v-model='value' :showText='true' />\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Radio 单选框</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础用法</view>\n <view class=\"flex flex-row gap-[30rpx] flex-wrap\">\n <view class=\"flex flex-row items-center\" @click=\"radioValue = 1\">\n <view class=\"prism-radio\" :class=\"{ checked: radioValue === 1 }\"></view>\n <text class=\"prism-text-primary ml-[10rpx]\">选项一</text>\n </view>\n <view class=\"flex flex-row items-center\" @click=\"radioValue = 2\">\n <view class=\"prism-radio\" :class=\"{ checked: radioValue === 2 }\"></view>\n <text class=\"prism-text-primary ml-[10rpx]\">选项二</text>\n </view>\n <view class=\"flex flex-row items-center\" @click=\"radioValue = 3\">\n <view class=\"prism-radio\" :class=\"{ checked: radioValue === 3 }\"></view>\n <text class=\"prism-text-primary ml-[10rpx]\">选项三</text>\n </view>\n </view>\n <PrismCode code=\"prism-radio + .checked\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">标签选择器</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">胶囊标签（圆角）</view>\n <view class=\"prism-tag-selector mb-[24rpx]\">\n <view\n v-for=\"tag in tagOptions\"\n :key=\"tag.value\"\n class=\"prism-tag-option\"\n :class=\"{ 'active': selectedTags.includes(tag.value) }\"\n @click=\"toggleTag(tag.value)\"\n >\n {{ tag.label }}\n </view>\n </view>\n\n <view class=\"card-title\">方形标签（小圆角）</view>\n <view class=\"prism-tag-selector mb-[24rpx]\">\n <view\n v-for=\"tag in tagOptions\"\n :key=\"tag.value\"\n class=\"prism-tag-option square\"\n :class=\"{ 'active': selectedSquareTags.includes(tag.value) }\"\n @click=\"toggleSquareTag(tag.value)\"\n >\n {{ tag.label }}\n </view>\n </view>\n\n <view class=\"card-title\">带图标标签</view>\n <view class=\"prism-tag-selector mb-[24rpx]\">\n <view\n v-for=\"tag in iconTagOptions\"\n :key=\"tag.value\"\n class=\"prism-tag-option\"\n :class=\"{ 'active': selectedIconTags.includes(tag.value) }\"\n @click=\"toggleIconTag(tag.value)\"\n >\n <text class=\"fa mr-[8rpx]\" :class=\"tag.icon\"></text>\n {{ tag.label }}\n </view>\n </view>\n\n <view class=\"card-title\">彩色标签</view>\n <view class=\"prism-tag-selector\">\n <view\n v-for=\"tag in colorTagOptions\"\n :key=\"tag.value\"\n class=\"prism-tag-option\"\n :class=\"{ 'active': selectedColorTags.includes(tag.value) }\"\n :style=\"selectedColorTags.includes(tag.value) ? { background: tag.bgColor, borderColor: tag.color, color: tag.color } : {}\"\n @click=\"toggleColorTag(tag.value)\"\n >\n {{ tag.label }}\n </view>\n </view>\n <PrismCode code=\"prism-tag-option / prism-tag-option.square\" />\n </view>\n </view>\n\n \n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Picker 选择器</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础用法（仅样式）</view>\n <view class=\"card-desc\">以下仅展示选择器样式类，需配合业务逻辑使用</view>\n <view class=\"prism-picker\">\n <text v-if=\"pickerValue\" class=\"prism-picker__value\">{{ pickerValue }}</text>\n <text v-else class=\"prism-picker__placeholder\">请选择城市</text>\n <text class=\"prism-picker__arrow fa fa-chevron-right\"></text>\n </view>\n <PrismCode code=\"prism-picker\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">日期/时间/地区选择器</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">日期选择器（原生-不支持深色）</view>\n <picker mode=\"date\" :value=\"dateValue\" @change=\"onDateChange\">\n <view class=\"prism-select-box mb-[20rpx]\">\n <text :class=\"{ 'placeholder': !dateValue, 'select-text': dateValue }\">{{ dateValue || '请选择日期' }}</text>\n <text class=\"select-arrow fa fa-calendar\"></text>\n </view>\n </picker>\n\n <view class=\"card-title\">时间选择器（原生-不支持深色）</view>\n <picker mode=\"time\" :value=\"timeValue\" @change=\"onTimeChange\">\n <view class=\"prism-select-box mb-[20rpx]\">\n <text :class=\"{ 'placeholder': !timeValue, 'select-text': timeValue }\">{{ timeValue || '请选择时间' }}</text>\n <text class=\"select-arrow fa fa-clock\"></text>\n </view>\n </picker>\n\n\n\n <view class=\"card-title mt-[32rpx]\">城市选择器（组件化-滚轮模式）</view>\n <PrismCityPicker\n v-model=\"cityValue\"\n mode=\"picker\"\n :level=\"3\"\n placeholder=\"请选择城市\"\n @change=\"onCityChange\"\n />\n <view class=\"prism-text-secondary mt-[16rpx]\" v-if=\"cityValue.length\">\n 已选：{{ cityValue.map(c => c.name).join(' ') }}\n </view>\n\n <view class=\"card-title mt-[32rpx]\">城市选择器（组件化-列表模式）</view>\n <PrismCityPicker\n v-model=\"cityValue2\"\n mode=\"cascade\"\n :level=\"3\"\n placeholder=\"请选择城市\"\n />\n <view class=\"prism-text-secondary mt-[16rpx]\" v-if=\"cityValue2.length\">\n 已选：{{ cityValue2.map(c => c.name).join(' ') }}\n </view>\n <PrismCode code=\"<PrismCityPicker mode='picker/cascade' />\" />\n\n <view class=\"card-title mt-[32rpx]\">城市选择器（全屏模式）</view>\n <PrismCityCascadeSelect\n v-model=\"cityValue4\"\n placeholder=\"请选择城市\"\n />\n <view class=\"prism-text-secondary mt-[16rpx]\" v-if=\"cityValue4.length\">\n 已选：{{ cityValue4.map(c => c.name).join('/') }}\n </view>\n\n <view class=\"card-title mt-[32rpx]\">城市选择器（字母索引）</view>\n <PrismCitySelect\n v-model=\"cityValue5\"\n placeholder=\"请选择城市\"\n />\n <view class=\"prism-text-secondary mt-[16rpx]\" v-if=\"cityValue5\">\n 已选：{{ cityValue5.name }}（{{ cityValue5.provinceName }}）\n </view>\n </view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">日期时间选择器（滚轮模式）</view>\n <PrismDateTimePicker\n v-model=\"dateTimeValue\"\n mode=\"picker\"\n placeholder=\"请选择日期\"\n />\n\n <view class=\"card-title mt-[32rpx]\">日期时间选择器（含时间）</view>\n <PrismDateTimePicker\n v-model=\"dateTimeValue2\"\n mode=\"picker\"\n :showTime=\"true\"\n placeholder=\"请选择日期时间\"\n />\n\n <view class=\"card-title mt-[32rpx]\">日期选择器（日历模式）</view>\n <PrismDateTimePicker\n v-model=\"dateTimeValue3\"\n mode=\"calendar\"\n placeholder=\"请选择日期\"\n />\n\n <view class=\"card-title mt-[32rpx]\">日历模式（显示农历）</view>\n <PrismDateTimePicker\n v-model=\"dateTimeValue4\"\n mode=\"calendar\"\n :showLunar=\"true\"\n placeholder=\"请选择日期\"\n />\n <view class=\"prism-text-secondary mt-[16rpx]\" v-if=\"dateTimeValue4\">\n 已选：{{ dateTimeValue4 }}\n </view>\n\n <view class=\"card-title mt-[32rpx]\">日期范围选择</view>\n <PrismDateTimePicker\n v-model=\"dateRangeValue\"\n mode=\"calendar\"\n :range=\"true\"\n placeholder=\"请选择日期范围\"\n />\n <view class=\"prism-text-secondary mt-[16rpx]\" v-if=\"dateRangeValue && dateRangeValue.length === 2\">\n 已选：{{ dateRangeValue[0] }} 至 {{ dateRangeValue[1] }}\n </view>\n\n <view class=\"card-title mt-[32rpx]\">日期范围 + 农历</view>\n <PrismDateTimePicker\n v-model=\"dateRangeValue2\"\n mode=\"calendar\"\n :range=\"true\"\n :showLunar=\"true\"\n placeholder=\"请选择日期范围\"\n />\n <view class=\"prism-text-secondary mt-[16rpx]\" v-if=\"dateRangeValue2 && dateRangeValue2.length === 2\">\n 已选：{{ dateRangeValue2[0] }} 至 {{ dateRangeValue2[1] }}\n </view>\n <PrismCode code=\"<PrismDateTimePicker mode='picker/calendar' />\" />\n </view>\n </view>\n\n \n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Stepper 步进器</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础用法</view>\n <view class=\"prism-stepper\">\n <view class=\"prism-stepper__btn\" :class=\"{ 'prism-stepper__btn--disabled': stepperValue <= 1 }\" @click=\"stepperValue > 1 && stepperValue--\">\n <text class=\"fa fa-minus\"></text>\n </view>\n <input class=\"prism-stepper__input\" type=\"number\" v-model=\"stepperValue\" />\n <view class=\"prism-stepper__btn\" @click=\"stepperValue++\">\n <text class=\"fa fa-plus\"></text>\n </view>\n </view>\n <PrismCode code=\"prism-stepper\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Slider 滑块</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础用法</view>\n <view class=\"prism-slider-label\">\n <text class=\"prism-text-secondary\">完成进度</text>\n <text class=\"value-text\">{{ sliderValue }}%</text>\n </view>\n <view class=\"prism-slider-wrapper\">\n <slider\n :value=\"sliderValue\"\n :min=\"0\"\n :max=\"100\"\n :step=\"5\"\n activeColor=\"#3478F6\"\n backgroundColor=\"#EBEEF2\"\n block-size=\"20\"\n @change=\"onSliderChange\"\n />\n </view>\n <PrismCode code=\"prism-slider-wrapper + slider\" />\n </view>\n </view>\n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">Rate 评分</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">基础用法</view>\n <view class=\"prism-rate\">\n <text v-for=\"i in 5\" :key=\"i\" class=\"prism-rate__item fa fa-star\" :class=\"{ 'prism-rate__item--active': i <= rateValue }\" @click=\"rateValue = i\"></text>\n </view>\n <PrismCode code=\"prism-rate > prism-rate__item--active\" />\n </view>\n </view>\n\n \n\n \n <view class=\"prism-section\">\n <view class=\"section-title\">图片上传</view>\n\n <view class=\"prism-card\">\n <view class=\"card-title\">多图上传</view>\n <view class=\"prism-image-upload-grid\">\n \n <view class=\"prism-image-item has-image\" v-for=\"(img, index) in uploadedImages\" :key=\"index\">\n <image class=\"prism-image-preview\" :src=\"img\" mode=\"aspectFill\"></image>\n <view class=\"prism-image-remove\" @click=\"removeImage(index)\">\n <text class=\"fa fa-times\"></text>\n </view>\n <view class=\"prism-image-main-badge\" v-if=\"index === 0\">主图</view>\n </view>\n \n <view class=\"prism-image-item\" @click=\"uploadImage\" v-if=\"uploadedImages.length < 9\">\n <view class=\"prism-image-upload-btn\">\n <text class=\"fa fa-camera\"></text>\n <text>添加图片</text>\n </view>\n </view>\n </view>\n <view class=\"prism-upload-tip\">最多上传9张图片，第一张为主图</view>\n\n <view class=\"card-title mt-[32rpx]\">头像上传</view>\n <view class=\"prism-avatar-selector\">\n \n <view class=\"prism-avatar-upload\" @click=\"uploadAvatar\">\n <image class=\"prism-avatar-preview\" v-if=\"avatarUrl\" :src=\"avatarUrl\" mode=\"aspectFill\"></image>\n <view class=\"prism-avatar-placeholder\" v-else>\n <text class=\"fa fa-user\"></text>\n </view>\n <view class=\"prism-avatar-edit\">\n <text class=\"fa fa-camera\"></text>\n </view>\n </view>\n \n <view class=\"prism-default-avatars\">\n <view\n class=\"prism-default-avatar-item\"\n :class=\"{ 'active': avatarUrl === img }\"\n v-for=\"(img, index) in defaultAvatars\"\n :key=\"index\"\n @click=\"selectDefaultAvatar(img)\"\n >\n <image :src=\"img\" mode=\"aspectFill\"></image>\n </view>\n </view>\n </view>\n <PrismCode code=\"prism-avatar-selector\" />\n </view>\n </view>\n\n \n <view class=\"prism-safe-area-bottom\"></view>\n </scroll-view>\n\n \n <PrismVoiceInput\n mode=\"modal\"\n v-model:visible=\"showVoicePanel\"\n @confirm=\"onVoiceConfirm\"\n />\n </view>\n</template>\n\n<script setup>\nimport { ref, reactive, computed } from 'vue';\nimport { useAppStore } from '@/store/app';\nimport PrismCode from '@/components/PrismCode/PrismCode.vue';\nimport PrismCodeInput from '@/components/PrismCodeInput/PrismCodeInput.vue';\nimport PrismSecureInput from '@/components/PrismSecureInput/PrismSecureInput.vue';\nimport PrismVoiceInput from '@/components/PrismVoiceInput/PrismVoiceInput.vue';\nimport PrismLicensePlateInput from '@/components/PrismLicensePlateInput/PrismLicensePlateInput.vue';\nimport PrismIdCardInput from '@/components/PrismIdCardInput/PrismIdCardInput.vue';\nimport PrismAddressInput from '@/components/PrismAddressInput/PrismAddressInput.vue';\nimport PrismSwitch from '@/components/PrismSwitch/PrismSwitch.vue';\nimport PrismCityPicker from '@/components/PrismCityPicker/PrismCityPicker.vue';\nimport PrismCityCascadeSelect from '@/components/PrismCityCascadeSelect/PrismCityCascadeSelect.vue';\nimport PrismCitySelect from '@/components/PrismCitySelect/PrismCitySelect.vue';\nimport PrismDateTimePicker from '@/components/PrismDateTimePicker/PrismDateTimePicker.vue';\n\nconst appStore = useAppStore();\n\nconst navbarHeight = computed(() => {\n return appStore.statusBarHeight + 44;\n});\n\nconst inputValue = ref('');\nconst voiceInputValue = ref('');\nconst showPassword = ref(false);\nconst countdown = ref(0);\nconst checked1 = ref(true);\nconst checked2 = ref(false);\nconst switchValue = ref(true);\nconst switchSquareValue = ref(false);\nconst switchSquareTextValue = ref(true);\nconst switchTextValue = ref(true);\nconst switchTextValue2 = ref(false);\n\n// 语音录制状态\nconst showVoicePanel = ref(false);\n\n// 模拟语音识别结果\nconst voiceTexts = [\n '这是语音识别的结果文本',\n '用户通过语音输入的内容',\n '语音转文字示例',\n '测试语音输入功能',\n '你好，这是一段测试文字'\n];\n\n// 验证码输入框\nconst code4Value = ref('');\nconst code6Value = ref('');\n\n// 安全密码输入\nconst securePassword = ref('');\nconst securePasswordRandom = ref('');\n\n// 车牌号输入\nconst licensePlate = ref('');\n\n// 身份证输入\nconst idCardNumber = ref('');\n\n// 新增组件数据\nconst textareaValue = ref('');\nconst searchValue = ref('');\nconst radioValue = ref(1);\nconst pickerValue = ref('');\nconst stepperValue = ref(1);\nconst rateValue = ref(3);\n\n// 选择器数据\nconst dateValue = ref('');\nconst timeValue = ref('');\nconst regionValue = ref([]);\nconst cityValue = ref([]);\nconst cityValue2 = ref([]);\nconst cityValue3 = ref([]);\nconst cityValue4 = ref([]);\nconst cityValue5 = ref(null);\nconst dateTimeValue = ref('');\nconst dateTimeValue2 = ref('');\nconst dateTimeValue3 = ref('');\nconst dateTimeValue4 = ref('');\nconst dateRangeValue = ref([]);\nconst dateRangeValue2 = ref([]);\n\n// 地址输入\nconst addressValue = ref('');\nconst addressValue2 = ref('');\n\n// 地图回显数据\nconst locationData = reactive({\n latitude: 0,\n longitude: 0\n});\nconst locationData2 = reactive({\n latitude: 0,\n longitude: 0\n});\n\n// 静态地图URL\nconst staticMapUrl = computed(() => {\n if (!locationData.latitude || !locationData.longitude) return '';\n const lat = locationData.latitude;\n const lng = locationData.longitude;\n const style = appStore.isDarkMode ? '&style=4' : '';\n return `https://apis.map.qq.com/ws/staticmap/v2/?center=${lat},${lng}&zoom=16&size=600*300&maptype=roadmap${style}&markers=size:large|color:0x3478F6|label:A|${lat},${lng}&key=H3QBZ-6KT3B-O5YU7-NLGYT-OKNJZ-NKBTJ`;\n});\n\n// 标签选择器\nconst tagOptions = ref([\n { label: '紧急', value: 'urgent' },\n { label: '重点', value: 'important' },\n { label: '普通', value: 'normal' },\n { label: '长期', value: 'longterm' },\n { label: 'VIP客户', value: 'vip' }\n]);\nconst selectedTags = ref(['important']);\nconst selectedSquareTags = ref(['urgent']);\n\n// 带图标标签\nconst iconTagOptions = ref([\n { label: '住宅', value: 'residential', icon: 'fa-home' },\n { label: '商业', value: 'commercial', icon: 'fa-store' },\n { label: '办公', value: 'office', icon: 'fa-building' },\n { label: '别墅', value: 'villa', icon: 'fa-house-chimney' }\n]);\nconst selectedIconTags = ref(['residential']);\n\n// 彩色标签\nconst colorTagOptions = ref([\n { label: '进行中', value: 'processing', color: '#3478F6', bgColor: 'rgba(52, 120, 246, 0.1)' },\n { label: '已完成', value: 'completed', color: '#00B42A', bgColor: 'rgba(0, 180, 42, 0.1)' },\n { label: '已逾期', value: 'overdue', color: '#F53F3F', bgColor: 'rgba(245, 63, 63, 0.1)' },\n { label: '待确认', value: 'pending', color: '#FF7D00', bgColor: 'rgba(255, 125, 0, 0.1)' }\n]);\nconst selectedColorTags = ref(['processing']);\n\n// Textarea 带工具栏\nconst descriptionValue = ref('');\n\n// Slider\nconst sliderValue = ref(65);\n\n// 图片上传\nconst uploadedImages = ref([]);\nconst avatarUrl = ref('');\n\n// 预设头像列表\nconst defaultAvatars = ref([\n 'https://api.dicebear.com/7.x/avataaars/svg?seed=Felix',\n 'https://api.dicebear.com/7.x/avataaars/svg?seed=Aneka',\n 'https://api.dicebear.com/7.x/avataaars/svg?seed=Jasmine',\n 'https://api.dicebear.com/7.x/avataaars/svg?seed=Max',\n 'https://api.dicebear.com/7.x/avataaars/svg?seed=Sophie',\n 'https://api.dicebear.com/7.x/avataaars/svg?seed=Jack',\n 'https://api.dicebear.com/7.x/avataaars/svg?seed=Emma',\n 'https://api.dicebear.com/7.x/avataaars/svg?seed=Oliver'\n]);\n\nfunction sendCode() {\n if (countdown.value > 0) return;\n countdown.value = 60;\n const timer = setInterval(() => {\n countdown.value--;\n if (countdown.value <= 0) {\n clearInterval(timer);\n }\n }, 1000);\n}\n\n// 验证码完成回调\nfunction onCode4Complete(code) {\n uni.showToast({ title: `4位验证码: ${code}`, icon: 'none' });\n}\n\nfunction onCode6Complete(code) {\n uni.showToast({ title: `6位验证码: ${code}`, icon: 'none' });\n}\n\n// 安全密码完成回调\nfunction onSecureComplete(password) {\n uni.showToast({ title: '密码输入完成', icon: 'success' });\n}\n\n// 车牌号完成回调\nfunction onLicenseComplete(plate) {\n uni.showToast({ title: `车牌号: ${plate}`, icon: 'none' });\n}\n\n// 身份证完成回调\nfunction onIdCardComplete(idCard) {\n uni.showToast({ title: '身份证号输入完成', icon: 'success' });\n}\n\n// 语音输入 - 打开弹窗\nfunction handleVoiceInput() {\n showVoicePanel.value = true;\n}\n\n// 语音确认回调\nfunction onVoiceConfirm(data) {\n // 随机选择一个模拟结果\n const randomText = voiceTexts[Math.floor(Math.random() * voiceTexts.length)];\n voiceInputValue.value = randomText;\n}\n\n// AI辅助\nfunction handleAIAssist() {\n uni.showToast({ title: 'AI正在优化...', icon: 'none' });\n}\n\n// 拍照\nfunction handleCamera() {\n uni.chooseImage({\n count: 1,\n sourceType: ['camera'],\n success: () => {\n uni.showToast({ title: '拍照成功', icon: 'success' });\n }\n });\n}\n\n// 日期选择\nfunction onDateChange(e) {\n dateValue.value = e.detail.value;\n}\n\n// 时间选择\nfunction onTimeChange(e) {\n timeValue.value = e.detail.value;\n}\n\n// 地区选择\nfunction onRegionChange(e) {\n regionValue.value = e.detail.value;\n}\n\n// 城市选择\nfunction onCityChange(val) {\n console.log('城市选择:', val);\n}\n\n// 定位\nfunction handleLocation() {\n uni.showToast({ title: '正在获取位置...', icon: 'loading' });\n setTimeout(() => {\n addressValue.value = '北京市朝阳区建国路88号';\n // 模拟定位数据\n locationData.latitude = 39.9087;\n locationData.longitude = 116.4716;\n uni.showToast({ title: '定位成功', icon: 'success' });\n }, 1000);\n}\n\n// 组件地址变化回调\nfunction onLocationChange(data) {\n console.log('位置已选择:', data);\n uni.showToast({ title: '位置已选择', icon: 'success' });\n}\n\n// 标签切换\nfunction toggleTag(value) {\n const index = selectedTags.value.indexOf(value);\n if (index > -1) {\n selectedTags.value.splice(index, 1);\n } else {\n selectedTags.value.push(value);\n }\n}\n\n// 方形标签切换\nfunction toggleSquareTag(value) {\n const index = selectedSquareTags.value.indexOf(value);\n if (index > -1) {\n selectedSquareTags.value.splice(index, 1);\n } else {\n selectedSquareTags.value.push(value);\n }\n}\n\n// 图标标签切换\nfunction toggleIconTag(value) {\n const index = selectedIconTags.value.indexOf(value);\n if (index > -1) {\n selectedIconTags.value.splice(index, 1);\n } else {\n selectedIconTags.value.push(value);\n }\n}\n\n// 彩色标签切换\nfunction toggleColorTag(value) {\n const index = selectedColorTags.value.indexOf(value);\n if (index > -1) {\n selectedColorTags.value.splice(index, 1);\n } else {\n selectedColorTags.value.push(value);\n }\n}\n\n// Slider 变化\nfunction onSliderChange(e) {\n sliderValue.value = e.detail.value;\n}\n\n// 上传图片\nfunction uploadImage() {\n uni.showActionSheet({\n itemList: ['从相册选择', '拍照'],\n success: (res) => {\n const sourceType = res.tapIndex === 0 ? ['album'] : ['camera'];\n uni.chooseImage({\n count: 9 - uploadedImages.value.length,\n sizeType: ['compressed'],\n sourceType: sourceType,\n success: (res) => {\n uploadedImages.value = [...uploadedImages.value, ...res.tempFilePaths];\n uni.showToast({ title: '上传成功', icon: 'success' });\n }\n });\n }\n });\n}\n\n// 删除图片\nfunction removeImage(index) {\n uploadedImages.value.splice(index, 1);\n}\n\n// 上传头像\nfunction uploadAvatar() {\n uni.showActionSheet({\n itemList: ['从相册选择', '拍照'],\n success: (res) => {\n const sourceType = res.tapIndex === 0 ? ['album'] : ['camera'];\n uni.chooseImage({\n count: 1,\n sizeType: ['compressed'],\n sourceType: sourceType,\n success: (res) => {\n avatarUrl.value = res.tempFilePaths[0];\n uni.showToast({ title: '头像已更新', icon: 'success' });\n }\n });\n }\n });\n}\n\n// 选择默认头像\nfunction selectDefaultAvatar(img) {\n avatarUrl.value = img;\n uni.showToast({ title: '头像已更新', icon: 'success' });\n}\n\n</script>\n\n<style lang=\"scss\">\n@import './demo-common.scss';\n</style>\n","import MiniProgramPage from 'E:/git/ruixin-gitlab/ruixin-keiji/ruixin-prism-ui-uniApp/src/pages/demo/form.vue'\nwx.createPage(MiniProgramPage)"],"names":["useAppStore","computed","ref","reactive","uni","res","MiniProgramPage"],"mappings":"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"}

package/dist/dev/.sourcemap/mp-weixin/pages/demo/layout/card-layout.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"card-layout.js","sources":["pages/demo/layout/card-layout.vue","../uniPage:/cGFnZXMvZGVtby9sYXlvdXQvY2FyZC1sYXlvdXQudnVl"],"sourcesContent":["<template>\n <view class=\"prism-page\" :class=\"{ 'dark-mode': appStore.isDarkMode }\">\n \n <PrismNavBar\n title=\"案例\"\n icon=\"fa-layer-group\"\n icon-color=\"green\"\n :show-back=\"true\"\n />\n\n \n <scroll-view class=\"prism-main\" scroll-y :style=\"{ paddingTop: navbarHeight + 'px' }\">\n \n <view class=\"prism-section example-section\">\n <view class=\"section-title\">精选案例</view>\n <view class=\"example-grid\">\n <view class=\"prism-card highlight violet gradient example-card\">\n <view class=\"card-cover\">\n <view class=\"prism-icon light\">\n <text class=\"fa fa-lock\"></text>\n </view>\n </view>\n <view class=\"card-content\">\n <text class=\"card-title\">登录页面</text>\n <text class=\"card-desc\">玻璃态登录表单设计</text>\n </view>\n </view>\n <view class=\"prism-card highlight rose gradient example-card\">\n <view class=\"card-cover\">\n <view class=\"prism-icon light\">\n <text class=\"fa fa-user\"></text>\n </view>\n </view>\n <view class=\"card-content\">\n <text class=\"card-title\">个人中心</text>\n <text class=\"card-desc\">用户信息展示页面</text>\n </view>\n </view>\n <view class=\"prism-card highlight cyan gradient example-card\">\n <view class=\"card-cover\">\n <view class=\"prism-icon light\">\n <text class=\"fa fa-chart-line\"></text>\n </view>\n </view>\n <view class=\"card-content\">\n <text class=\"card-title\">数据看板</text>\n <text class=\"card-desc\">数据统计可视化</text>\n </view>\n </view>\n <view class=\"prism-card highlight green gradient example-card\">\n <view class=\"card-cover\">\n <view class=\"prism-icon light\">\n <text class=\"fa fa-bag-shopping\"></text>\n </view>\n </view>\n <view class=\"card-content\">\n <text class=\"card-title\">商品列表</text>\n <text class=\"card-desc\">电商商品展示</text>\n </view>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section example-section\">\n <view class=\"section-title\">快速开始</view>\n \n <view class=\"quick-row\">\n <view class=\"prism-card action-card prism-bubble cyan gradient\">\n <view class=\"prism-icon light\">\n <text class=\"fa fa-comments\"></text>\n </view>\n <text class=\"action-title\">聊天界面</text>\n <text class=\"action-desc\">即时通讯聊天</text>\n </view>\n <view class=\"quick-col\">\n <view class=\"prism-card action-card-mini prism-bubble green gradient\">\n <view class=\"prism-icon light\">\n <text class=\"fa fa-gear\"></text>\n </view>\n <text class=\"action-title\">设置</text>\n </view>\n <view class=\"prism-card action-card-mini prism-bubble purple gradient\">\n <view class=\"prism-icon light\">\n <text class=\"fa fa-magnifying-glass\"></text>\n </view>\n <text class=\"action-title\">搜索</text>\n </view>\n </view>\n </view>\n \n <view class=\"quick-row\">\n <view class=\"prism-card action-card prism-bubble orange gradient\">\n <view class=\"prism-icon light\">\n <text class=\"fa fa-bell\"></text>\n </view>\n <text class=\"action-title\">消息中心</text>\n <text class=\"action-desc\">通知消息列表</text>\n </view>\n <view class=\"quick-grid-2x2\">\n <view class=\"prism-card action-card-mini prism-bubble rose gradient\">\n <view class=\"prism-icon light\">\n <text class=\"fa fa-heart\"></text>\n </view>\n <text class=\"action-title\">收藏</text>\n </view>\n <view class=\"prism-card action-card-mini prism-bubble blue gradient\">\n <view class=\"prism-icon light\">\n <text class=\"fa fa-user\"></text>\n </view>\n <text class=\"action-title\">我的</text>\n </view>\n <view class=\"prism-card action-card-mini prism-bubble teal gradient\">\n <view class=\"prism-icon light\">\n <text class=\"fa fa-thumbs-up\"></text>\n </view>\n <text class=\"action-title\">点赞</text>\n </view>\n <view class=\"prism-card action-card-mini prism-bubble indigo gradient\">\n <view class=\"prism-icon light\">\n <text class=\"fa fa-share\"></text>\n </view>\n <text class=\"action-title\">分享</text>\n </view>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section example-section\">\n <view class=\"section-title\">快速功能</view>\n <view class=\"quick-grid\">\n <view class=\"prism-card glass flex flex-col items-center p-[24rpx]\">\n <view class=\"prism-icon cyan md round\">\n <text class=\"fa fa-camera\"></text>\n </view>\n <text class=\"quick-title\">拍照上传</text>\n </view>\n <view class=\"prism-card glass flex flex-col items-center p-[24rpx]\">\n <view class=\"prism-icon orange md round\">\n <text class=\"fa fa-qrcode\"></text>\n </view>\n <text class=\"quick-title\">扫一扫</text>\n </view>\n <view class=\"prism-card glass flex flex-col items-center p-[24rpx]\">\n <view class=\"prism-icon green md round\">\n <text class=\"fa fa-location-dot\"></text>\n </view>\n <text class=\"quick-title\">定位签到</text>\n </view>\n <view class=\"prism-card glass flex flex-col items-center p-[24rpx]\">\n <view class=\"prism-icon purple md round\">\n <text class=\"fa fa-share-nodes\"></text>\n </view>\n <text class=\"quick-title\">分享</text>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section example-section\">\n <view class=\"section-title\">任务入口</view>\n <view class=\"task-actions-grid\">\n <view class=\"prism-card task-card highlight violet gradient\">\n <view class=\"prism-icon light\">\n <text class=\"fa fa-plus\"></text>\n </view>\n <text class=\"task-title\">创建任务</text>\n <text class=\"task-desc\">新建施工、采购或验收任务</text>\n </view>\n <view class=\"prism-card task-card highlight rose gradient\">\n <view class=\"prism-icon light\">\n <text class=\"fa fa-list-check\"></text>\n </view>\n <text class=\"task-title\">我的任务</text>\n <text class=\"task-desc\">查看分配给我的所有任务</text>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section example-section\">\n <view class=\"section-title\">项目视图</view>\n <view class=\"view-cards-grid\">\n <view class=\"prism-card glass flex flex-col items-center gap-[16rpx] p-[32rpx]\">\n <view class=\"prism-icon blue lg\">\n <text class=\"fa fa-table\"></text>\n </view>\n <text class=\"view-title\">项目报表</text>\n <text class=\"view-desc\">数据统计与分析</text>\n </view>\n <view class=\"prism-card glass flex flex-col items-center gap-[16rpx] p-[32rpx]\">\n <view class=\"prism-icon green lg\">\n <text class=\"fa fa-map\"></text>\n </view>\n <text class=\"view-title\">地图视图</text>\n <text class=\"view-desc\">项目地理分布</text>\n </view>\n <view class=\"prism-card glass flex flex-col items-center gap-[16rpx] p-[32rpx]\">\n <view class=\"prism-icon orange lg\">\n <text class=\"fa fa-filter\"></text>\n </view>\n <text class=\"view-title\">数据筛选</text>\n <text class=\"view-desc\">多维度筛选查询</text>\n </view>\n <view class=\"prism-card glass flex flex-col items-center gap-[16rpx] p-[32rpx]\">\n <view class=\"prism-icon purple lg\">\n <text class=\"fa fa-calendar\"></text>\n </view>\n <text class=\"view-title\">日历视图</text>\n <text class=\"view-desc\">项目日程安排</text>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section example-section\">\n <view class=\"section-title\">项目配置</view>\n <view class=\"config-cards-grid\">\n <view class=\"prism-card glass flex flex-col items-center gap-[12rpx] p-[28rpx]\">\n <view class=\"prism-icon blue sm\">\n <text class=\"fa fa-bars\"></text>\n </view>\n <text class=\"config-title\">阶段配置</text>\n <text class=\"config-desc\">项目阶段管理</text>\n </view>\n <view class=\"prism-card glass flex flex-col items-center gap-[12rpx] p-[28rpx]\">\n <view class=\"prism-icon green sm\">\n <text class=\"fa fa-file-lines\"></text>\n </view>\n <text class=\"config-title\">项目模板</text>\n <text class=\"config-desc\">项目模板管理</text>\n </view>\n <view class=\"prism-card glass flex flex-col items-center gap-[12rpx] p-[28rpx]\">\n <view class=\"prism-icon orange sm\">\n <text class=\"fa fa-list\"></text>\n </view>\n <text class=\"config-title\">任务模板</text>\n <text class=\"config-desc\">任务模板管理</text>\n </view>\n </view>\n </view>\n\n \n <view class=\"prism-section example-section\">\n <view class=\"section-title\">音乐播放器</view>\n <PrismMusicPlayer\n title=\"疗愈音乐\"\n :songs=\"musicSongs\"\n :is-dark-mode=\"appStore.isDarkMode\"\n />\n </view>\n\n \n <view class=\"prism-bottom-placeholder\"></view>\n </scroll-view>\n\n </view>\n</template>\n\n<script setup>\nimport { useAppStore } from '@/store/app';\nimport { useNavbar } from '@/composables/useNavbar';\n\nconst appStore = useAppStore();\nconst { navbarHeight } = useNavbar();\n\n// 音乐播放器数据\nconst COVER_BASE = 'https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/music/covers/';\nconst musicSongs = {\n '放松舒缓': [\n { name: '01.僕は帰ろう', file: 'http://music.ruixinkeji.com/1.mp3', cover: COVER_BASE + '僕は帰ろう.jpg', album: '1Y Music 大自然轻音乐/最好听' },\n { name: '05.優しさは風のように', file: 'http://music.ruixinkeji.com/5.mp3', cover: COVER_BASE + '優しさは風のように.jpg', album: '妹尾武 - 優しさは風のように' },\n { name: '木兰诗', file: 'https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/docs/Mulan_Poem.mp3', album: '古诗词吟唱' }\n ],\n '专注冥想': [\n { name: '02.Yuunagi', file: 'http://music.ruixinkeji.com/2.mp3', cover: COVER_BASE + 'Yuunagi.jpg', album: 'Paniyolo - Yuunagi' },\n { name: '06.Music for Dreaming', file: 'http://music.ruixinkeji.com/6.mp3', cover: COVER_BASE + 'Music for Dreaming.jpg', album: 'PianoPeace - Music for Dreaming' }\n ],\n '情绪提振': [\n { name: '03.风の诗', file: 'http://music.ruixinkeji.com/3.mp3', cover: COVER_BASE + '风の诗.jpg', album: '神山純一 - 风の诗' },\n { name: '07.Memory Lane', file: 'http://music.ruixinkeji.com/7.mp3', cover: COVER_BASE + 'Memory Lane.jpg', album: 'yutaka hirasaka - Memory Lane' },\n { name: '09.南国之舞', file: 'http://music.ruixinkeji.com/9.mp3', cover: COVER_BASE + '南国之舞.jpg', album: '梁翘柏 - 南国之舞' }\n ],\n '助眠安神': [\n { name: '04.Inside the Hut', file: 'http://music.ruixinkeji.com/4.mp3', cover: COVER_BASE + 'Inside the Hut.jpg', album: '陈越龙 - Inside the Hut' },\n { name: '08.Respite', file: 'http://music.ruixinkeji.com/8.mp3', cover: COVER_BASE + 'Respite.jpg', album: 'Ólafur Arnalds - Respite' }\n ]\n};\n</script>\n\n<style lang=\"scss\">\n.prism-page {\n width: 100%;\n min-height: 100vh;\n background: var(--prism-bg-color-page, #F7F8FA);\n}\n\n.prism-main {\n height: 100vh;\n padding-bottom: 120rpx;\n}\n\n.example-section {\n padding: 24rpx !important;\n\n .prism-card {\n margin-bottom: 0 !important;\n }\n}\n\n.example-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20rpx;\n}\n\n.quick-row {\n display: flex !important;\n flex-direction: row !important;\n gap: 20rpx;\n margin-bottom: 20rpx;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n > .action-card {\n flex: 1;\n }\n\n .quick-col {\n flex: 1;\n display: flex !important;\n flex-direction: column !important;\n gap: 16rpx;\n\n > .action-card-mini {\n flex: 1 !important;\n }\n }\n\n .quick-grid-2x2 {\n flex: 1;\n display: grid !important;\n grid-template-columns: repeat(2, 1fr) !important;\n grid-template-rows: repeat(2, 1fr) !important;\n gap: 16rpx !important;\n }\n}\n\n.quick-grid {\n display: flex;\n gap: 16rpx;\n\n .prism-card {\n flex: 1;\n }\n\n .prism-icon {\n margin-bottom: 12rpx;\n }\n\n .quick-title {\n font-size: 24rpx;\n color: var(--prism-text-secondary);\n }\n}\n\n/* 项目视图卡片 */\n.view-cards-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20rpx;\n\n .view-title {\n font-size: 28rpx;\n font-weight: 600;\n color: var(--prism-text-primary, #1D2129);\n\n .dark-mode & {\n color: #E5E6EB;\n }\n }\n\n .view-desc {\n font-size: 22rpx;\n color: var(--prism-text-secondary, #86909C);\n }\n}\n\n/* 项目配置卡片 */\n.config-cards-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20rpx;\n\n .config-title {\n font-size: 26rpx;\n font-weight: 600;\n color: var(--prism-text-primary, #1D2129);\n\n .dark-mode & {\n color: #E5E6EB;\n }\n }\n\n .config-desc {\n font-size: 20rpx;\n color: var(--prism-text-secondary, #86909C);\n }\n}\n\n/* 任务入口卡片 */\n.task-actions-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 20rpx;\n}\n\n.task-card {\n padding: 32rpx 24rpx !important;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n border-radius: 20rpx;\n position: relative;\n overflow: hidden;\n\n &:active {\n transform: scale(0.98);\n }\n\n .prism-icon.light {\n width: 64rpx !important;\n height: 64rpx !important;\n border-radius: 16rpx;\n margin-bottom: 16rpx;\n\n .fa {\n font-size: 32rpx !important;\n }\n }\n\n .task-title {\n font-size: 32rpx;\n font-weight: 600;\n color: #ffffff;\n margin-bottom: 8rpx;\n }\n\n .task-desc {\n font-size: 24rpx;\n color: rgba(255, 255, 255, 0.85);\n }\n}\n\n.action-card {\n padding: 32rpx 20rpx !important;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12rpx;\n position: relative;\n overflow: hidden;\n\n &:active {\n transform: translateY(-4rpx);\n }\n\n .prism-icon.light {\n width: 96rpx !important;\n height: 96rpx !important;\n border-radius: 24rpx;\n\n .fa {\n font-size: 48rpx !important;\n }\n }\n\n .action-title {\n font-size: 32rpx;\n font-weight: 600;\n color: #ffffff;\n position: relative;\n z-index: 1;\n }\n\n .action-desc {\n font-size: 24rpx;\n color: rgba(255, 255, 255, 0.85);\n text-align: center;\n position: relative;\n z-index: 1;\n }\n}\n\n.action-card-mini {\n padding: 20rpx 12rpx !important;\n display: flex !important;\n flex-direction: column !important;\n align-items: center;\n justify-content: center;\n gap: 8rpx;\n position: relative;\n overflow: hidden;\n\n &:active {\n transform: scale(0.98);\n }\n\n .prism-icon.light {\n width: 64rpx !important;\n height: 64rpx !important;\n border-radius: 16rpx;\n\n .fa {\n font-size: 28rpx !important;\n }\n }\n\n .action-title {\n font-size: 24rpx;\n font-weight: 600;\n color: #ffffff;\n position: relative;\n z-index: 1;\n }\n}\n\n.example-card {\n padding: 0 !important;\n border-radius: 16rpx;\n overflow: hidden;\n box-shadow: none !important;\n border: none !important;\n\n &:active {\n opacity: 0.8;\n }\n\n .card-cover {\n height: 160rpx;\n display: flex;\n align-items: center;\n justify-content: center;\n\n .prism-icon.light {\n width: 88rpx !important;\n height: 88rpx !important;\n border-radius: 20rpx;\n\n .fa {\n font-size: 48rpx !important;\n }\n }\n }\n\n .card-content {\n padding: 16rpx;\n background: rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n }\n\n .card-title {\n display: block;\n font-size: 28rpx;\n font-weight: 600;\n color: rgba(255, 255, 255, 0.95);\n margin-bottom: 4rpx;\n padding-left: 0;\n\n &::before {\n display: none;\n }\n }\n\n .card-desc {\n display: block;\n font-size: 22rpx;\n color: rgba(255, 255, 255, 0.7);\n }\n}\n\n/* 深色模式 */\n.dark-mode {\n .example-card {\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.3);\n pointer-events: none;\n }\n\n .card-content {\n background: rgba(0, 0, 0, 0.15);\n position: relative;\n z-index: 1;\n }\n\n .card-cover {\n position: relative;\n z-index: 1;\n }\n\n .card-title {\n color: var(--prism-text-primary, #E5E6EB);\n }\n\n .card-desc {\n color: rgba(255, 255, 255, 0.6);\n }\n }\n}\n</style>\n","import MiniProgramPage from 'E:/git/ruixin-gitlab/ruixin-keiji/ruixin-prism-ui-uniApp/src/pages/demo/layout/card-layout.vue'\nwx.createPage(MiniProgramPage)"],"names":["useAppStore","useNavbar","MiniProgramPage"],"mappings":";;;;;;;;;;;;;;AAAA,MAAA,aAAA;;;;AAAA,UAAA,WAAAA,UAAAA,YAAA;AAAA,UAAA,EAAA,aAAA,IAAAC,gCAAA;AAAA,UAAA,aAAA;AAAA,MAAA,QAAA;AAAA,QAAA,EAAA,MAAA,YAAA,MAAA,qCAAA,OAAA,aAAA,aAAA,OAAA,sBAAA;AAAA,QAAA,EAAA,MAAA,gBAAA,MAAA,qCAAA,OAAA,aAAA,iBAAA,OAAA,kBAAA;AAAA,QAAA,EAAA,MAAA,OAAA,MAAA,uEAAA,OAAA,QAAA;AAAA,MAAA;AAAA,MAAA,QAAA;AAAA,QAAA,EAAA,MAAA,cAAA,MAAA,qCAAA,OAAA,aAAA,eAAA,OAAA,qBAAA;AAAA,QAAA,EAAA,MAAA,yBAAA,MAAA,qCAAA,OAAA,aAAA,0BAAA,OAAA,kCAAA;AAAA,MAAA;AAAA,MAAA,QAAA;AAAA,QAAA,EAAA,MAAA,UAAA,MAAA,qCAAA,OAAA,aAAA,WAAA,OAAA,aAAA;AAAA,QAAA,EAAA,MAAA,kBAAA,MAAA,qCAAA,OAAA,aAAA,mBAAA,OAAA,gCAAA;AAAA,QAAA,EAAA,MAAA,WAAA,MAAA,qCAAA,OAAA,aAAA,YAAA,OAAA,aAAA;AAAA,MAAA;AAAA,MAAA,QAAA;AAAA,QAAA,EAAA,MAAA,qBAAA,MAAA,qCAAA,OAAA,aAAA,sBAAA,OAAA,uBAAA;AAAA,QAAA,EAAA,MAAA,cAAA,MAAA,qCAAA,OAAA,aAAA,eAAA,OAAA,2BAAA;AAAA,MAAA;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;ACCA,GAAG,WAAWC,SAAe;"}