@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/dev/mp-weixin/pages/demo/basic.js

@@ -0,0 +1,77 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const store_app = require("../../store/app.js");
+if (!Array) {
+  const _easycom_PrismNavBar2 = common_vendor.resolveComponent("PrismNavBar");
+  _easycom_PrismNavBar2();
+}
+const _easycom_PrismNavBar = () => "../../components/PrismNavBar/PrismNavBar.js";
+if (!Math) {
+  (_easycom_PrismNavBar + PrismCode)();
+}
+const PrismCode = () => "../../components/PrismCode/PrismCode.js";
+const _sfc_main = {
+  __name: "basic",
+  setup(__props) {
+    const appStore = store_app.useAppStore();
+    const navbarHeight = common_vendor.computed(() => {
+      return appStore.statusBarHeight + 44;
+    });
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.p({
+          title: "基础组件",
+          icon: "fa-cube",
+          ["icon-color"]: "blue",
+          ["show-back"]: true
+        }),
+        b: common_vendor.p({
+          code: "prism-btn primary [solid/gradient/glass/outline]"
+        }),
+        c: common_vendor.p({
+          code: "prism-btn danger [solid/gradient/glass/outline]"
+        }),
+        d: common_vendor.p({
+          code: "prism-btn xs / sm / md / lg / xl"
+        }),
+        e: common_vendor.p({
+          code: "prism-btn block"
+        }),
+        f: common_vendor.p({
+          code: "prism-btn round"
+        }),
+        g: common_vendor.p({
+          code: "prism-icon-btn primary md [solid]"
+        }),
+        h: common_vendor.p({
+          code: "xs / sm / md / lg / xl"
+        }),
+        i: common_vendor.p({
+          code: "默认 / solid / gradient / glass / outline"
+        }),
+        j: common_vendor.p({
+          code: "prism-icon-btn {颜色} {尺寸} round [形态]"
+        }),
+        k: common_vendor.p({
+          code: "blue / green / red / orange / purple / cyan / ai / ..."
+        }),
+        l: common_vendor.p({
+          code: "prism-text-btn primary sm [solid]"
+        }),
+        m: common_vendor.p({
+          code: "xs / sm / md / lg / xl"
+        }),
+        n: common_vendor.p({
+          code: "prism-badge"
+        }),
+        o: common_vendor.p({
+          code: "prism-number-badge"
+        }),
+        p: navbarHeight.value + "px",
+        q: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      };
+    };
+  }
+};
+wx.createPage(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/demo/basic.js.map

package/dist/dev/mp-weixin/pages/demo/basic.json

@@ -0,0 +1,7 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "prism-nav-bar": "../../components/PrismNavBar/PrismNavBar",
+    "prism-code": "../../components/PrismCode/PrismCode"
+  }
+}

package/dist/dev/mp-weixin/pages/demo/basic.wxml

@@ -0,0 +1 @@
+<view class="{{['prism-page', q && 'dark-mode']}}"><prism-nav-bar wx:if="{{a}}" u-i="0f64cac2-0" bind:__l="__l" u-p="{{a}}"/><scroll-view class="prism-main" scroll-y style="{{'padding-top:' + p}}"><view class="prism-section"><view class="section-title">按钮样式</view><view class="section-desc">每种颜色支持五种形态：自适应(默认)、实心(-solid)、渐变(-gradient)、玻璃(-glass)、轮廓(-outline)</view><view class="prism-card"><view class="card-title">主要按钮 (primary)</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap"><button class="prism-btn primary">自适应</button><button class="prism-btn primary solid">实心</button><button class="prism-btn primary gradient">渐变</button><button class="prism-btn primary glass">玻璃</button><button class="prism-btn primary outline">轮廓</button></view><prism-code wx:if="{{b}}" u-i="0f64cac2-1" bind:__l="__l" u-p="{{b}}"/></view><view class="prism-card"><view class="card-title">危险按钮 (danger)</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap"><button class="prism-btn danger">自适应</button><button class="prism-btn danger solid">实心</button><button class="prism-btn danger gradient">渐变</button><button class="prism-btn danger glass">玻璃</button><button class="prism-btn danger outline">轮廓</button></view><prism-code wx:if="{{c}}" u-i="0f64cac2-2" bind:__l="__l" u-p="{{c}}"/></view><view class="prism-card"><view class="card-title">成功按钮 (success)</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap"><button class="prism-btn success">自适应</button><button class="prism-btn success solid">实心</button><button class="prism-btn success gradient">渐变</button><button class="prism-btn success glass">玻璃</button><button class="prism-btn success outline">轮廓</button></view></view><view class="prism-card"><view class="card-title">警告按钮 (warning)</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap"><button class="prism-btn warning">自适应</button><button class="prism-btn warning solid">实心</button><button class="prism-btn warning gradient">渐变</button><button class="prism-btn warning glass">玻璃</button><button class="prism-btn warning outline">轮廓</button></view></view><view class="prism-card"><view class="card-title">按钮尺寸</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap items-center"><button class="prism-btn primary xs solid">xs</button><button class="prism-btn primary sm solid">sm</button><button class="prism-btn primary md solid">md</button><button class="prism-btn primary lg solid">lg</button><button class="prism-btn primary xl solid">xl</button></view><prism-code wx:if="{{d}}" u-i="0f64cac2-3" bind:__l="__l" u-p="{{d}}"/></view><view class="prism-card"><view class="card-title">块级按钮 (Block)</view><button class="prism-btn primary md solid block">块级按钮</button><prism-code wx:if="{{e}}" u-i="0f64cac2-4" bind:__l="__l" u-p="{{e}}"/></view><view class="prism-card"><view class="card-title">圆角按钮 (Round)</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap"><button class="prism-btn primary solid round">圆角按钮</button><button class="prism-btn primary outline round">圆角轮廓</button></view><prism-code wx:if="{{f}}" u-i="0f64cac2-5" bind:__l="__l" u-p="{{f}}"/></view></view><view class="prism-section"><view class="section-title">图标按钮</view><view class="section-desc">原子化类：prism-icon-btn + {颜色} + {尺寸} + {形态}</view><view class="prism-card"><view class="card-title">基础用法</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap items-center"><view class="prism-icon-btn primary md"><text class="fa fa-plus"></text></view><view class="prism-icon-btn success md solid"><text class="fa fa-check"></text></view><view class="prism-icon-btn danger md gradient"><text class="fa fa-heart"></text></view><view class="prism-icon-btn ai md glass"><text class="fa fa-magic"></text></view></view><prism-code wx:if="{{g}}" u-i="0f64cac2-6" bind:__l="__l" u-p="{{g}}"/></view><view class="prism-card"><view class="card-title">尺寸</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap items-center"><view class="prism-icon-btn blue xs"><text class="fa fa-star"></text></view><view class="prism-icon-btn blue sm"><text class="fa fa-star"></text></view><view class="prism-icon-btn blue md"><text class="fa fa-star"></text></view><view class="prism-icon-btn blue lg"><text class="fa fa-star"></text></view><view class="prism-icon-btn blue xl"><text class="fa fa-star"></text></view></view><prism-code wx:if="{{h}}" u-i="0f64cac2-7" bind:__l="__l" u-p="{{h}}"/></view><view class="prism-card"><view class="card-title">形态</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap"><view class="prism-icon-btn purple md"><text class="fa fa-heart"></text></view><view class="prism-icon-btn purple md solid"><text class="fa fa-heart"></text></view><view class="prism-icon-btn purple md gradient"><text class="fa fa-heart"></text></view><view class="prism-icon-btn purple md glass"><text class="fa fa-heart"></text></view><view class="prism-icon-btn purple md outline"><text class="fa fa-heart"></text></view></view><prism-code wx:if="{{i}}" u-i="0f64cac2-8" bind:__l="__l" u-p="{{i}}"/></view><view class="prism-card"><view class="card-title">圆形</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap items-center"><view class="prism-icon-btn blue sm round"><text class="fa fa-plus"></text></view><view class="prism-icon-btn green md round solid"><text class="fa fa-check"></text></view><view class="prism-icon-btn purple lg round gradient"><text class="fa fa-heart"></text></view><view class="prism-icon-btn ai md round glass"><text class="fa fa-magic"></text></view></view><prism-code wx:if="{{j}}" u-i="0f64cac2-9" bind:__l="__l" u-p="{{j}}"/></view><view class="prism-card"><view class="card-title">颜色</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap"><view class="prism-icon-btn blue sm solid"><text class="fa fa-circle"></text></view><view class="prism-icon-btn green sm solid"><text class="fa fa-circle"></text></view><view class="prism-icon-btn red sm solid"><text class="fa fa-circle"></text></view><view class="prism-icon-btn orange sm solid"><text class="fa fa-circle"></text></view><view class="prism-icon-btn purple sm solid"><text class="fa fa-circle"></text></view><view class="prism-icon-btn cyan sm solid"><text class="fa fa-circle"></text></view><view class="prism-icon-btn ai sm gradient"><text class="fa fa-magic"></text></view></view><prism-code wx:if="{{k}}" u-i="0f64cac2-10" bind:__l="__l" u-p="{{k}}"/></view></view><view class="prism-section"><view class="section-title">图标文字按钮</view><view class="section-desc">原子化类：prism-text-btn + {颜色} + {尺寸} + {形态}</view><view class="prism-card"><view class="card-title">基础用法</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap"><view class="prism-text-btn primary sm"><text class="fa fa-plus"></text><text>新增</text></view><view class="prism-text-btn success sm solid"><text class="fa fa-check"></text><text>确认</text></view><view class="prism-text-btn danger sm gradient"><text class="fa fa-trash"></text><text>删除</text></view></view><prism-code wx:if="{{l}}" u-i="0f64cac2-11" bind:__l="__l" u-p="{{l}}"/></view><view class="prism-card"><view class="card-title">形态</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap"><view class="prism-text-btn blue sm"><text class="fa fa-edit"></text><text>默认</text></view><view class="prism-text-btn blue sm solid"><text class="fa fa-edit"></text><text>实心</text></view><view class="prism-text-btn blue sm gradient"><text class="fa fa-edit"></text><text>渐变</text></view><view class="prism-text-btn blue sm glass"><text class="fa fa-edit"></text><text>玻璃</text></view><view class="prism-text-btn blue sm outline"><text class="fa fa-edit"></text><text>轮廓</text></view></view></view><view class="prism-card"><view class="card-title">尺寸</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap items-center"><view class="prism-text-btn primary xs solid"><text class="fa fa-star"></text><text>迷你</text></view><view class="prism-text-btn primary sm solid"><text class="fa fa-star"></text><text>小</text></view><view class="prism-text-btn primary md solid"><text class="fa fa-star"></text><text>中</text></view><view class="prism-text-btn primary lg solid"><text class="fa fa-star"></text><text>大</text></view><view class="prism-text-btn primary xl solid"><text class="fa fa-star"></text><text>更大</text></view></view><prism-code wx:if="{{m}}" u-i="0f64cac2-12" bind:__l="__l" u-p="{{m}}"/></view></view><view class="prism-section"><view class="section-title">徽章</view><view class="prism-card"><view class="card-title">红点徽章</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap"><view class="prism-icon-btn primary md"><text class="fa fa-bell"></text><view class="prism-badge"></view></view></view><prism-code wx:if="{{n}}" u-i="0f64cac2-13" bind:__l="__l" u-p="{{n}}"/></view><view class="prism-card"><view class="card-title">数字徽章</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap"><view class="prism-icon-btn primary md"><text class="fa fa-bell"></text><view class="prism-number-badge">5</view></view><view class="prism-icon-btn primary md"><text class="fa fa-envelope"></text><view class="prism-number-badge">99+</view></view></view><prism-code wx:if="{{o}}" u-i="0f64cac2-14" bind:__l="__l" u-p="{{o}}"/></view></view><view class="prism-safe-area-bottom"></view></scroll-view></view>

package/dist/dev/mp-weixin/pages/demo/basic.wxss

@@ -0,0 +1,54 @@
+/**
+ * Prism UI - SCSS 变量定义
+ * 此文件包含所有设计令牌和变量
+ * 所有变量使用 $prism- 前缀，避免与用户项目冲突
+ *
+ * 主题切换：修改下面的引入文件即可切换主题
+ * 可选主题：blue(默认) / green / purple / orange / red / cyan
+ */
+/**
+ * Prism UI - 蓝色主题（默认）
+ *
+ * 使用方式：在 variables.scss 中修改引入
+ * @import '../theme/blue.scss';
+ *
+ * 颜色值来自 colors.scss 中的 $prism-blue-* 变量
+ */
+/* ============================================================
+   一、浅色模式变量（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* -------------------- 主题色 -------------------- */
+/* -------------------- 状态色 -------------------- */
+/* -------------------- 文字颜色 -------------------- */
+/* -------------------- 边框颜色 -------------------- */
+/* -------------------- 背景颜色 -------------------- */
+/* ============================================================
+   二、深色模式变量
+   ============================================================ */
+/* -------------------- 主题色（深色） -------------------- */
+/* -------------------- 状态色（深色） -------------------- */
+/* -------------------- 文字颜色（深色） -------------------- */
+/* -------------------- 边框颜色（深色） -------------------- */
+/* -------------------- 背景颜色（深色） -------------------- */
+/* ============================================================
+   三、主题色透明度（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   主题色渐变（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   四、白色透明度
+   ============================================================ */
+/* ============================================================
+   六、第三方品牌色
+   ============================================================ */
+/* ============================================================
+   八、常用阴影（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   九、统一间距
+   ============================================================ */
+/* Demo 页面通用样式 */
+/* 注意：.page-container 和 .main-content 基础样式已在 @/styles/base.scss 中定义 */
+/* 注意：导航栏已统一使用 PrismNavBar 组件 */
+/* 注意：.card-desc 已统一在 @/styles/card.scss 中定义 */

package/dist/dev/mp-weixin/pages/demo/code/index.js

@@ -0,0 +1,190 @@
+"use strict";
+const common_vendor = require("../../../common/vendor.js");
+const store_app = require("../../../store/app.js");
+if (!Array) {
+  const _easycom_PrismNavBar2 = common_vendor.resolveComponent("PrismNavBar");
+  _easycom_PrismNavBar2();
+}
+const _easycom_PrismNavBar = () => "../../../components/PrismNavBar/PrismNavBar.js";
+if (!Math) {
+  (_easycom_PrismNavBar + PrismCode)();
+}
+const PrismCode = () => "../../../components/PrismCode/PrismCode.js";
+const multiLineCode = `<template>
+  <PrismButton type="primary">
+    主要按钮
+  </PrismButton>
+</template>`;
+const jsCode = `function greet(name) {
+  uni.__f__('log','at pages/demo/code/index.vue:110','Hello, ' + name);
+  return true;
+}`;
+const tsCode = `interface User {
+  id: number;
+  name: string;
+  email?: string;
+}
+
+const getUser = (id: number): User => {
+  return { id, name: 'John' };
+};`;
+const vueCode = `<template>
+  <view class="container">
+    <text>{{ message }}</text>
+    <button @click="handleClick">点击</button>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const message = ref('Hello World');
+
+const handleClick = () => {
+  message.value = 'Clicked!';
+};
+<\/script>`;
+const pythonCode = `class Calculator:
+    def __init__(self):
+        self.result = 0
+
+    def add(self, x, y):
+        """两数相加"""
+        return x + y
+
+    def multiply(self, x, y):
+        return x * y
+
+# 使用示例
+calc = Calculator()
+print(calc.add(10, 20))`;
+const cssCode = `.prism-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12rpx 32rpx;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  transition: all 0.3s ease;
+}
+
+.prism-button--primary {
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  color: #ffffff;
+}`;
+const sqlCode = `SELECT
+    u.id,
+    u.username,
+    COUNT(o.id) AS order_count,
+    SUM(o.amount) AS total_amount
+FROM users u
+LEFT JOIN orders o ON u.id = o.user_id
+WHERE u.status = 'active'
+    AND o.created_at >= '2024-01-01'
+GROUP BY u.id, u.username
+HAVING COUNT(o.id) > 5
+ORDER BY total_amount DESC
+LIMIT 10;`;
+const shellCode = `# 安装依赖
+npm install
+
+# 开发模式运行
+npm run dev
+
+# 构建生产版本
+npm run build
+
+# Git 操作
+git add .
+git commit -m "feat: add new feature"
+git push origin main`;
+const jsonCode = `{
+  "name": "prism-ui",
+  "version": "1.0.0",
+  "description": "A modern UI library",
+  "dependencies": {
+    "vue": "^3.4.0",
+    "pinia": "^2.1.0"
+  },
+  "devDependencies": {
+    "vite": "^5.0.0",
+    "typescript": "^5.3.0"
+  }
+}`;
+const _sfc_main = {
+  __name: "index",
+  setup(__props) {
+    const appStore = store_app.useAppStore();
+    const navbarHeight = common_vendor.computed(() => {
+      return appStore.statusBarHeight + 44;
+    });
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.p({
+          title: "Code 代码展示",
+          icon: "fa-code",
+          ["icon-color"]: "purple",
+          ["show-back"]: true
+        }),
+        b: common_vendor.p({
+          code: "npm install prism-ui"
+        }),
+        c: common_vendor.p({
+          code: "<PrismButton type='primary'>按钮</PrismButton>"
+        }),
+        d: common_vendor.p({
+          code: multiLineCode
+        }),
+        e: common_vendor.p({
+          code: jsCode,
+          language: "JavaScript",
+          copyable: true
+        }),
+        f: common_vendor.p({
+          code: tsCode,
+          language: "TypeScript",
+          ["show-line-numbers"]: true,
+          copyable: true
+        }),
+        g: common_vendor.p({
+          code: vueCode,
+          language: "Vue",
+          expandable: true,
+          copyable: true
+        }),
+        h: common_vendor.p({
+          code: pythonCode,
+          language: "Python",
+          ["show-line-numbers"]: true,
+          copyable: true
+        }),
+        i: common_vendor.p({
+          code: cssCode,
+          language: "CSS",
+          copyable: true
+        }),
+        j: common_vendor.p({
+          code: sqlCode,
+          language: "SQL",
+          ["show-line-numbers"]: true,
+          copyable: true
+        }),
+        k: common_vendor.p({
+          code: shellCode,
+          language: "Shell",
+          copyable: true
+        }),
+        l: common_vendor.p({
+          code: jsonCode,
+          language: "JSON",
+          ["show-line-numbers"]: true,
+          copyable: true
+        }),
+        m: navbarHeight.value + "px",
+        n: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      };
+    };
+  }
+};
+wx.createPage(_sfc_main);
+//# sourceMappingURL=../../../../.sourcemap/mp-weixin/pages/demo/code/index.js.map

package/dist/dev/mp-weixin/pages/demo/code/index.json

@@ -0,0 +1,7 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "prism-nav-bar": "../../../components/PrismNavBar/PrismNavBar",
+    "prism-code": "../../../components/PrismCode/PrismCode"
+  }
+}

package/dist/dev/mp-weixin/pages/demo/code/index.wxml

@@ -0,0 +1 @@
+<view class="{{['prism-page', n && 'dark-mode']}}"><prism-nav-bar wx:if="{{a}}" u-i="00bad58f-0" bind:__l="__l" u-p="{{a}}"/><scroll-view class="prism-main" scroll-y style="{{'padding-top:' + m}}"><view class="prism-section"><view class="section-title">基础用法</view><view class="section-desc">展示代码片段或类名</view><prism-code wx:if="{{b}}" u-i="00bad58f-1" bind:__l="__l" u-p="{{b}}"/><prism-code wx:if="{{c}}" u-i="00bad58f-2" bind:__l="__l" u-p="{{c}}"/></view><view class="prism-section"><view class="section-title">多行代码</view><prism-code wx:if="{{d}}" u-i="00bad58f-3" bind:__l="__l" u-p="{{d}}"/></view><view class="prism-section"><view class="section-title">带语言标识</view><view class="section-desc">显示语言类型和复制按钮</view><prism-code wx:if="{{e}}" u-i="00bad58f-4" bind:__l="__l" u-p="{{e}}"/></view><view class="prism-section"><view class="section-title">显示行号</view><prism-code wx:if="{{f}}" u-i="00bad58f-5" bind:__l="__l" u-p="{{f}}"/></view><view class="prism-section"><view class="section-title">可折叠代码</view><view class="section-desc">点击展开/收起代码块</view><prism-code wx:if="{{g}}" u-i="00bad58f-6" bind:__l="__l" u-p="{{g}}"/></view><view class="prism-section"><view class="section-title">Python 代码</view><view class="section-desc">支持多种编程语言高亮</view><prism-code wx:if="{{h}}" u-i="00bad58f-7" bind:__l="__l" u-p="{{h}}"/></view><view class="prism-section"><view class="section-title">CSS 样式</view><prism-code wx:if="{{i}}" u-i="00bad58f-8" bind:__l="__l" u-p="{{i}}"/></view><view class="prism-section"><view class="section-title">SQL 查询</view><prism-code wx:if="{{j}}" u-i="00bad58f-9" bind:__l="__l" u-p="{{j}}"/></view><view class="prism-section"><view class="section-title">Shell 命令</view><view class="section-desc">常用终端命令展示</view><prism-code wx:if="{{k}}" u-i="00bad58f-10" bind:__l="__l" u-p="{{k}}"/></view><view class="prism-section"><view class="section-title">JSON 数据</view><prism-code wx:if="{{l}}" u-i="00bad58f-11" bind:__l="__l" u-p="{{l}}"/></view><view class="prism-safe-area-bottom"></view></scroll-view></view>

package/dist/dev/mp-weixin/pages/demo/code/index.wxss

@@ -0,0 +1,71 @@
+/**
+ * Prism UI - SCSS 变量定义
+ * 此文件包含所有设计令牌和变量
+ * 所有变量使用 $prism- 前缀，避免与用户项目冲突
+ *
+ * 主题切换：修改下面的引入文件即可切换主题
+ * 可选主题：blue(默认) / green / purple / orange / red / cyan
+ */
+/**
+ * Prism UI - 蓝色主题（默认）
+ *
+ * 使用方式：在 variables.scss 中修改引入
+ * @import '../theme/blue.scss';
+ *
+ * 颜色值来自 colors.scss 中的 $prism-blue-* 变量
+ */
+/* ============================================================
+   一、浅色模式变量（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* -------------------- 主题色 -------------------- */
+/* -------------------- 状态色 -------------------- */
+/* -------------------- 文字颜色 -------------------- */
+/* -------------------- 边框颜色 -------------------- */
+/* -------------------- 背景颜色 -------------------- */
+/* ============================================================
+   二、深色模式变量
+   ============================================================ */
+/* -------------------- 主题色（深色） -------------------- */
+/* -------------------- 状态色（深色） -------------------- */
+/* -------------------- 文字颜色（深色） -------------------- */
+/* -------------------- 边框颜色（深色） -------------------- */
+/* -------------------- 背景颜色（深色） -------------------- */
+/* ============================================================
+   三、主题色透明度（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   主题色渐变（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   四、白色透明度
+   ============================================================ */
+/* ============================================================
+   六、第三方品牌色
+   ============================================================ */
+/* ============================================================
+   八、常用阴影（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   九、统一间距
+   ============================================================ */
+/* Demo 页面通用样式 */
+/* 注意：.page-container 和 .main-content 基础样式已在 @/styles/base.scss 中定义 */
+/* 注意：导航栏已统一使用 PrismNavBar 组件 */
+/* 注意：.card-desc 已统一在 @/styles/card.scss 中定义 */
+.prism-section {
+  margin: 24rpx 32rpx;
+  padding: 32rpx;
+  background: var(--prism-bg-color-card, #fff);
+  border-radius: 24rpx;
+}
+.dark-mode .prism-section {
+  background: var(--prism-bg-color-card, #242424);
+}
+.fixed-code-label {
+  font-size: 24rpx;
+  color: var(--prism-text-secondary, #86909C);
+  margin-bottom: 16rpx;
+}
+.prism-fixed-bottom .prism-code {
+  margin-top: 0;
+}

package/dist/dev/mp-weixin/pages/demo/colors.js

@@ -0,0 +1,130 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const store_app = require("../../store/app.js");
+if (!Math) {
+  (PrismNavBar + PrismIndexBar)();
+}
+const PrismNavBar = () => "../../components/PrismNavBar/PrismNavBar.js";
+const PrismIndexBar = () => "../../components/PrismIndexBar/PrismIndexBar.js";
+const _sfc_main = {
+  __name: "colors",
+  setup(__props) {
+    const appStore = store_app.useAppStore();
+    const navbarHeight = common_vendor.computed(() => {
+      return appStore.statusBarHeight + 44;
+    });
+    const currentColorIndex = common_vendor.ref("");
+    const scrollIntoView = common_vendor.ref("");
+    const indexBarItems = common_vendor.computed(() => {
+      return allColors.map((color) => ({
+        value: color.name,
+        label: color.label,
+        background: color.hex
+      }));
+    });
+    const onColorIndexChange = (colorName) => {
+      scrollIntoView.value = "color-" + colorName;
+    };
+    const allColors = [
+      { name: "overview", label: "系统总览", hex: "linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%)", isGradient: true },
+      { name: "icon-usage", label: "组件用法", hex: "linear-gradient(135deg, rgba(102, 126, 234, 0.6) 0%, rgba(118, 75, 162, 0.6) 100%)", isGradient: true },
+      { name: "purple", label: "Purple 紫色", hex: "#722ED1", hexDark: "#A855F7", hexLighter: "#C084FC", icon: "fa-crown" },
+      { name: "blue", label: "Blue 蓝色", hex: "#3478F6", hexDark: "#60A5FA", hexLighter: "#93C5FD", icon: "fa-droplet" },
+      { name: "green", label: "Green 绿色", hex: "#00B42A", hexDark: "#34D399", hexLighter: "#6EE7B7", icon: "fa-leaf" },
+      { name: "red", label: "Red 红色", hex: "#F53F3F", hexDark: "#F87171", hexLighter: "#FCA5A5", icon: "fa-heart" },
+      { name: "orange", label: "Orange 橙色", hex: "#FF7D00", hexDark: "#FB923C", hexLighter: "#FDBA74", icon: "fa-fire" },
+      { name: "cyan", label: "Cyan 青色", hex: "#14C9C9", hexDark: "#22D3EE", hexLighter: "#67E8F9", icon: "fa-water" },
+      { name: "yellow", label: "Yellow 黄色", hex: "#FFB400", hexDark: "#FCD34D", hexLighter: "#FDE68A", icon: "fa-sun" },
+      { name: "pink", label: "Pink 粉色", hex: "#F53F7F", hexDark: "#F472B6", hexLighter: "#F9A8D4", icon: "fa-heart" },
+      { name: "magenta", label: "Magenta 品红", hex: "#EB2F96", hexDark: "#EC4899", hexLighter: "#F472B6", icon: "fa-file-import" },
+      { name: "indigo", label: "Indigo 靛蓝", hex: "#2F54EB", hexDark: "#818CF8", hexLighter: "#A5B4FC", icon: "fa-qrcode" },
+      { name: "teal", label: "Teal 青绿", hex: "#13C2C2", hexDark: "#2DD4BF", hexLighter: "#5EEAD4", icon: "fa-road" },
+      { name: "violet", label: "Violet 紫罗兰", hex: "#667eea", hexDark: "#8599ee", hexLighter: "#a4b4f2", icon: "fa-rocket" },
+      { name: "rose", label: "Rose 玫瑰", hex: "#f093fb", hexDark: "#f5576c", hexLighter: "#f77b8c", icon: "fa-star" },
+      { name: "ai", label: "AI 智能", hex: "#c44569", hexDark: "#ee5a6f", hexLighter: "#ff6b6b", icon: "fa-wand-magic-sparkles" }
+    ];
+    function scrollToColor(colorName) {
+      scrollIntoView.value = "color-" + colorName;
+    }
+    function onScroll(e) {
+    }
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.p({
+          title: "颜色主题系统",
+          icon: "fa-palette",
+          ["icon-color"]: "pink",
+          ["show-back"]: true
+        }),
+        b: common_vendor.f(allColors.filter((c) => !c.isGradient), (color, k0, i0) => {
+          return {
+            a: common_vendor.t(color.name),
+            b: color.name,
+            c: color.hex,
+            d: common_vendor.o(($event) => scrollToColor(color.name), color.name)
+          };
+        }),
+        c: common_vendor.f(allColors.filter((c) => !c.isGradient), (color, k0, i0) => {
+          return {
+            a: color.hex,
+            b: common_vendor.t(color.label),
+            c: common_vendor.t("prism-" + color.name),
+            d: color.hex,
+            e: common_vendor.t(color.hex),
+            f: common_vendor.t("prism-" + color.name + "-dark"),
+            g: color.hexDark,
+            h: common_vendor.t("prism-" + color.name + "-lighter"),
+            i: color.hexLighter,
+            j: common_vendor.t("prism-" + color.name + "-gradient"),
+            k: "linear-gradient(135deg, " + color.hex + " 0%, " + color.hexDark + " 100%)",
+            l: common_vendor.n(color.icon),
+            m: common_vendor.n(color.name),
+            n: common_vendor.n(color.icon),
+            o: common_vendor.n(color.name),
+            p: common_vendor.n(color.icon),
+            q: common_vendor.n(color.name),
+            r: common_vendor.n(color.icon),
+            s: common_vendor.n(color.name),
+            t: common_vendor.n(color.icon),
+            v: common_vendor.n(color.name),
+            w: common_vendor.n(color.name),
+            x: common_vendor.t(color.name),
+            y: common_vendor.n(color.name),
+            z: common_vendor.t(color.name),
+            A: common_vendor.n(color.name),
+            B: common_vendor.t(color.name),
+            C: common_vendor.n(color.name),
+            D: common_vendor.t(color.name),
+            E: common_vendor.n(color.name),
+            F: common_vendor.t(color.name),
+            G: common_vendor.t(color.name),
+            H: common_vendor.n(color.name),
+            I: common_vendor.t(color.name),
+            J: common_vendor.n(color.name),
+            K: common_vendor.t(color.name),
+            L: common_vendor.n(color.name),
+            M: common_vendor.t(color.name),
+            N: common_vendor.n(color.name),
+            O: common_vendor.t(color.name),
+            P: common_vendor.n(color.name),
+            Q: "color-" + color.name,
+            R: color.name
+          };
+        }),
+        d: scrollIntoView.value,
+        e: common_vendor.o(onScroll),
+        f: navbarHeight.value + "px",
+        g: common_vendor.o(onColorIndexChange),
+        h: common_vendor.o(($event) => currentColorIndex.value = $event),
+        i: common_vendor.p({
+          items: indexBarItems.value,
+          ["is-dark-mode"]: common_vendor.unref(appStore).isDarkMode,
+          modelValue: currentColorIndex.value
+        }),
+        j: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      };
+    };
+  }
+};
+wx.createPage(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/demo/colors.js.map

package/dist/dev/mp-weixin/pages/demo/colors.json

@@ -0,0 +1,7 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "prism-nav-bar": "../../components/PrismNavBar/PrismNavBar",
+    "prism-index-bar": "../../components/PrismIndexBar/PrismIndexBar"
+  }
+}