@ruixinkeji/prism-ui 1.0.14 → 1.0.16

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

@@ -0,0 +1,65 @@
+"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: "container",
+  setup(__props) {
+    const appStore = store_app.useAppStore();
+    const navbarHeight = common_vendor.computed(() => {
+      return appStore.statusBarHeight + 44;
+    });
+    const collapseItems = common_vendor.reactive([
+      { title: "什么是 Prism UI？", content: "Prism UI 是一个现代化的 uni-app 组件库，支持深浅主题切换。", open: true },
+      { title: "如何使用？", content: "直接引入样式文件，使用对应的 CSS 类名即可。", open: false },
+      { title: "支持哪些平台？", content: "支持 H5、微信小程序、App 等多端平台。", open: false }
+    ]);
+    function toggleCollapse(index) {
+      collapseItems[index].open = !collapseItems[index].open;
+    }
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.p({
+          title: "容器组件",
+          icon: "fa-layer-group",
+          ["icon-color"]: "purple",
+          ["show-back"]: true
+        }),
+        b: common_vendor.p({
+          code: "prism-card glass"
+        }),
+        c: common_vendor.p({
+          code: "prism-card blue glass"
+        }),
+        d: common_vendor.p({
+          code: "prism-list-item > list-item-icon + list-item-content + list-item-arrow"
+        }),
+        e: common_vendor.f(collapseItems, (item, index, i0) => {
+          return {
+            a: common_vendor.t(item.title),
+            b: item.open ? 1 : "",
+            c: common_vendor.o(($event) => toggleCollapse(index), index),
+            d: common_vendor.t(item.content),
+            e: item.open ? 1 : "",
+            f: index
+          };
+        }),
+        f: common_vendor.p({
+          code: "prism-collapse > prism-collapse-item"
+        }),
+        g: navbarHeight.value + "px",
+        h: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      };
+    };
+  }
+};
+wx.createPage(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/demo/container.js.map

package/dist/dev/mp-weixin/pages/demo/container.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/container.wxml

@@ -0,0 +1 @@
+<view class="{{['prism-page', h && 'dark-mode']}}"><prism-nav-bar wx:if="{{a}}" u-i="f772c61c-0" bind:__l="__l" u-p="{{a}}"/><scroll-view class="prism-main" scroll-y style="{{'padding-top:' + g}}"><view class="prism-section"><view class="section-title">Card 卡片</view><view class="prism-card glass mb-_a_20rpx_a_"><view class="p-_a_30rpx_a_"><text class="prism-text-primary text-_a_32rpx_a_ font-bold">毛玻璃卡片</text><text class="card-desc">这是一个毛玻璃效果的卡片组件</text></view></view><prism-code wx:if="{{b}}" u-i="f772c61c-1" bind:__l="__l" u-p="{{b}}"/><view class="prism-card blue glass mt-_a_20rpx_a_"><view class="p-_a_30rpx_a_"><text class="prism-text-primary text-_a_32rpx_a_ font-bold">蓝色毛玻璃卡片</text><text class="card-desc">带有蓝色渐变效果的卡片</text></view></view><prism-code wx:if="{{c}}" u-i="f772c61c-2" bind:__l="__l" u-p="{{c}}"/></view><view class="prism-section"><view class="section-title">ListItem 列表项</view><view class="prism-list-item mb-_a_20rpx_a_"><view class="list-item-icon prism-icon blue"><text class="fa fa-folder"></text></view><view class="list-item-content"><text class="list-item-title">项目文档</text><text class="list-item-desc">包含所有项目相关的文档资料</text></view><text class="list-item-arrow fa fa-angle-right"></text></view><view class="prism-list-item mb-_a_20rpx_a_"><view class="list-item-icon prism-icon green"><text class="fa fa-circle-check"></text></view><view class="list-item-content"><text class="list-item-title">已完成任务</text><text class="list-item-desc">查看所有已完成的任务列表</text></view><text class="list-item-arrow fa fa-angle-right"></text></view><view class="prism-list-item"><view class="list-item-icon prism-icon orange"><text class="fa fa-clock"></text></view><view class="list-item-content"><text class="list-item-title">待处理事项</text><text class="list-item-desc">需要尽快处理的紧急事项</text></view><text class="list-item-arrow fa fa-angle-right"></text></view><prism-code wx:if="{{d}}" u-i="f772c61c-3" bind:__l="__l" u-p="{{d}}"/></view><view class="prism-section"><view class="section-title">Collapse 折叠面板</view><view class="prism-collapse mb-_a_20rpx_a_"><view wx:for="{{e}}" wx:for-item="item" wx:key="f" class="prism-collapse-item"><view class="prism-collapse-item__header" bindtap="{{item.c}}"><text>{{item.a}}</text><text class="{{['prism-collapse-item__arrow', 'fa', 'fa-chevron-down', item.b && 'prism-collapse-item__arrow--active']}}"></text></view><view class="{{['prism-collapse-item__content', item.e && 'prism-collapse-item__content--show']}}"><view class="prism-collapse-item__body">{{item.d}}</view></view></view></view><prism-code wx:if="{{f}}" u-i="f772c61c-4" bind:__l="__l" u-p="{{f}}"/></view><view class="prism-safe-area-bottom"></view></scroll-view></view>

package/dist/dev/mp-weixin/pages/demo/container.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/data.js

@@ -0,0 +1,398 @@
+"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: "data",
+  setup(__props) {
+    const appStore = store_app.useAppStore();
+    const instance = common_vendor.getCurrentInstance();
+    const charts = {};
+    const navbarHeight = common_vendor.computed(() => {
+      return appStore.statusBarHeight + 44;
+    });
+    const coreMetrics = common_vendor.reactive([
+      {
+        label: "睡眠时长",
+        value: "7.2",
+        unit: "h",
+        status: "正常",
+        level: "success",
+        icon: "fa-moon",
+        type: "sleep",
+        chartType: "column",
+        trendData: [7.5, 6.8, 7.2, 8, 7.1, 6.5, 7.8, 7.2, 8.2, 6.9, 7.5, 7, 7.3, 7.2],
+        colors: ["#C4B5FD", "#8B5CF6"]
+      },
+      {
+        label: "血氧 SpO₂",
+        value: "98",
+        unit: "%",
+        status: "正常",
+        level: "success",
+        icon: "fa-droplet",
+        type: "oxygen",
+        chartType: "area",
+        trendData: [97, 98, 96, 99, 98, 97, 98, 99, 96, 98, 97, 98, 99, 98],
+        colors: ["#6EE7B7", "#10B981"]
+      },
+      {
+        label: "血压",
+        value: "118/75",
+        unit: "mmHg",
+        status: "正常",
+        level: "success",
+        icon: "fa-heart-circle-check",
+        type: "pressure",
+        chartType: "column",
+        trendData: [115, 118, 120, 116, 119, 117, 118, 122, 115, 119, 117, 120, 118, 118],
+        colors: ["#93C5FD", "#3B82F6"]
+      },
+      {
+        label: "心率",
+        value: "72",
+        unit: "bpm",
+        status: "正常",
+        level: "success",
+        icon: "fa-heart",
+        type: "heart",
+        chartType: "line",
+        trendData: [72, 85, 62, 78, 95, 68, 72, 80, 65, 88, 70, 75, 82, 69],
+        colors: ["#FCA5A5", "#EF4444"]
+      },
+      {
+        label: "HRV",
+        value: "45",
+        unit: "ms",
+        status: "偏低",
+        level: "warning",
+        icon: "fa-chart-line",
+        type: "hrv",
+        chartType: "area",
+        trendData: [42, 45, 43, 48, 44, 41, 46, 45, 40, 47, 43, 46, 44, 45],
+        colors: ["#FDE68A", "#F59E0B"]
+      },
+      {
+        label: "体温",
+        value: "36.5",
+        unit: "°C",
+        status: "正常",
+        level: "success",
+        icon: "fa-thermometer-half",
+        type: "temp",
+        chartType: "line",
+        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],
+        colors: ["#FBCFE8", "#EC4899"]
+      },
+      {
+        label: "步数",
+        value: "8,562",
+        unit: "步",
+        status: "达标",
+        level: "success",
+        icon: "fa-shoe-prints",
+        type: "steps",
+        chartType: "column",
+        trendData: [6500, 8200, 7800, 9500, 5200, 10200, 8562, 7200, 8900, 6800, 9200, 7500, 8100, 8562],
+        colors: ["#A5F3FC", "#06B6D4"]
+      },
+      {
+        label: "卡路里",
+        value: "1,856",
+        unit: "kcal",
+        status: "正常",
+        level: "success",
+        icon: "fa-fire",
+        type: "calories",
+        chartType: "area",
+        trendData: [1650, 1920, 1780, 2100, 1450, 2250, 1856, 1720, 1980, 1580, 2050, 1750, 1890, 1856],
+        colors: ["#FED7AA", "#F97316"]
+      }
+    ]);
+    function initMetricChart(metric, index) {
+      const canvasId = "trend-" + metric.type + "-" + index;
+      try {
+        const context = common_vendor.index.createCanvasContext(canvasId, instance.proxy);
+        if (!context) return;
+        const categories = metric.trendData.map((_, i) => String(i + 1));
+        charts[metric.type] = new common_vendor.uCharts({
+          $this: instance.proxy,
+          canvasId,
+          context,
+          type: metric.chartType,
+          fontSize: 0,
+          padding: [5, 5, 5, 5],
+          legend: { show: false },
+          dataLabel: false,
+          dataPointShape: false,
+          background: "transparent",
+          pixelRatio: 1,
+          enableMarkLine: false,
+          categories,
+          series: [{
+            name: metric.label,
+            data: metric.trendData,
+            color: metric.colors[1]
+          }],
+          animation: true,
+          animationDuration: 300,
+          enableScroll: false,
+          xAxis: {
+            disabled: true,
+            disableGrid: true,
+            axisLine: false
+          },
+          yAxis: {
+            disabled: true,
+            disableGrid: true,
+            axisLine: false
+          },
+          width: common_vendor.index.upx2px(280),
+          height: common_vendor.index.upx2px(100),
+          extra: {
+            column: {
+              type: "group",
+              width: 8,
+              linearType: "custom",
+              linearOpacity: 0.9,
+              barBorderCircle: true,
+              customColor: metric.colors
+            },
+            line: {
+              type: "curve",
+              width: 2
+            },
+            area: {
+              type: "curve",
+              opacity: 0.4,
+              gradient: true,
+              addLine: true,
+              width: 2,
+              gradientColor: metric.colors
+            },
+            tooltip: { show: false }
+          }
+        });
+      } catch (error) {
+        common_vendor.index.__f__("error", "at pages/demo/data.vue:546", "图表初始化失败:", metric.label, error);
+      }
+    }
+    function initAllCharts() {
+      coreMetrics.forEach((metric, index) => {
+        initMetricChart(metric, index);
+      });
+    }
+    const milestoneData = common_vendor.reactive([
+      {
+        title: "项目启动",
+        time: "2024-01-15",
+        desc: "项目需求确认，团队组建完成",
+        completed: true,
+        active: false
+      },
+      {
+        title: "设计阶段",
+        time: "2024-02-20",
+        desc: "UI/UX 设计完成，原型评审通过",
+        completed: true,
+        active: false
+      },
+      {
+        title: "开发阶段",
+        time: "2024-03-10",
+        desc: "核心功能开发进行中",
+        completed: false,
+        active: true
+      },
+      {
+        title: "测试上线",
+        time: "2024-04-05",
+        desc: "测试完成后正式发布",
+        completed: false,
+        active: false
+      }
+    ]);
+    const countdownTime = common_vendor.reactive({ hours: "02", minutes: "30", seconds: "00" });
+    let countdownTimer = null;
+    const projectLogs = common_vendor.reactive([
+      {
+        type: "status",
+        title: "状态变更",
+        content: '项目状态从"设计中"变更为"施工中"',
+        time: "10分钟前",
+        user: "王经理"
+      },
+      {
+        type: "progress",
+        title: "进度更新",
+        content: "水电阶段进度更新至 80%，预计明天完成验收",
+        time: "2小时前",
+        user: "李工"
+      },
+      {
+        type: "task",
+        title: "任务完成",
+        content: '完成任务"水电管线铺设"，用时3天',
+        time: "昨天",
+        user: "张师傅"
+      },
+      {
+        type: "stage",
+        title: "阶段完成",
+        content: "拆改阶段已完成，进入水电阶段",
+        time: "3天前",
+        user: "系统"
+      },
+      {
+        type: "member",
+        title: "成员变动",
+        content: '添加新成员"赵师傅"，负责泥瓦工程',
+        time: "5天前",
+        user: "王经理"
+      }
+    ]);
+    function getLogIcon(type) {
+      const icons = {
+        status: "fa-exchange-alt",
+        // 状态变更
+        progress: "fa-chart-line",
+        // 进度更新
+        task: "fa-check-circle",
+        // 任务完成
+        stage: "fa-flag",
+        // 阶段完成
+        member: "fa-user-plus",
+        // 成员变动
+        file: "fa-file-alt",
+        // 文件上传
+        comment: "fa-comment",
+        // 评论
+        default: "fa-info-circle"
+      };
+      return icons[type] || icons.default;
+    }
+    function startCountdown() {
+      let total = 2 * 3600 + 30 * 60;
+      countdownTimer = setInterval(() => {
+        if (total <= 0) {
+          clearInterval(countdownTimer);
+          return;
+        }
+        total--;
+        const h = Math.floor(total / 3600);
+        const m = Math.floor(total % 3600 / 60);
+        const s = total % 60;
+        countdownTime.hours = String(h).padStart(2, "0");
+        countdownTime.minutes = String(m).padStart(2, "0");
+        countdownTime.seconds = String(s).padStart(2, "0");
+      }, 1e3);
+    }
+    common_vendor.onMounted(() => {
+      startCountdown();
+      setTimeout(() => {
+        initAllCharts();
+      }, 500);
+    });
+    common_vendor.onUnmounted(() => {
+      if (countdownTimer) clearInterval(countdownTimer);
+    });
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.p({
+          title: "数据展示",
+          icon: "fa-chart-bar",
+          ["icon-color"]: "orange",
+          ["show-back"]: true
+        }),
+        b: common_vendor.p({
+          code: "prism-avatar xs/sm/md/lg/xl + bordered/square/blue/green/orange/purple/red"
+        }),
+        c: common_vendor.p({
+          code: "prism-progress + --success/--warning/--danger/--lg"
+        }),
+        d: common_vendor.p({
+          code: "prism-stats-grid > prism-stat-card"
+        }),
+        e: common_vendor.f(coreMetrics, (metric, index, i0) => {
+          return common_vendor.e({
+            a: common_vendor.n("fa " + metric.icon),
+            b: common_vendor.n("icon-bg-" + metric.type),
+            c: common_vendor.t(metric.status),
+            d: common_vendor.n(metric.level),
+            e: common_vendor.t(metric.value),
+            f: metric.unit
+          }, metric.unit ? {
+            g: common_vendor.t(metric.unit)
+          } : {}, {
+            h: common_vendor.n("text-" + metric.level),
+            i: common_vendor.t(metric.label),
+            j: metric.trendData
+          }, metric.trendData ? {
+            k: "trend-" + metric.type + "-" + index,
+            l: "trend-" + metric.type + "-" + index
+          } : {}, {
+            m: index
+          });
+        }),
+        f: common_vendor.p({
+          code: "prism-metric-grid > prism-metric-card"
+        }),
+        g: common_vendor.p({
+          code: "prism-placeholder"
+        }),
+        h: common_vendor.f(milestoneData, (item, index, i0) => {
+          return common_vendor.e({
+            a: common_vendor.n(item.completed ? "fa-check" : "fa-regular fa-circle"),
+            b: common_vendor.t(item.title),
+            c: common_vendor.t(item.time),
+            d: item.desc
+          }, item.desc ? {
+            e: common_vendor.t(item.desc)
+          } : {}, {
+            f: index,
+            g: item.completed ? 1 : "",
+            h: item.active ? 1 : ""
+          });
+        }),
+        i: common_vendor.p({
+          code: "prism-milestone > prism-milestone-item"
+        }),
+        j: common_vendor.f(projectLogs, (log, index, i0) => {
+          return common_vendor.e({
+            a: common_vendor.n(getLogIcon(log.type)),
+            b: common_vendor.n("log-icon--" + log.type),
+            c: common_vendor.t(log.title),
+            d: common_vendor.t(log.time),
+            e: common_vendor.t(log.content),
+            f: log.user
+          }, log.user ? {
+            g: common_vendor.t(log.user)
+          } : {}, {
+            h: index
+          });
+        }),
+        k: common_vendor.p({
+          code: "log-item > log-icon--{type} + log-content"
+        }),
+        l: common_vendor.t(countdownTime.hours),
+        m: common_vendor.t(countdownTime.minutes),
+        n: common_vendor.t(countdownTime.seconds),
+        o: common_vendor.p({
+          code: "prism-countdown > prism-countdown__block"
+        }),
+        p: navbarHeight.value + "px",
+        q: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      };
+    };
+  }
+};
+wx.createPage(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/demo/data.js.map

package/dist/dev/mp-weixin/pages/demo/data.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/data.wxml

@@ -0,0 +1 @@
+<view class="{{['prism-page', q && 'dark-mode']}}"><prism-nav-bar wx:if="{{a}}" u-i="33c8a349-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="prism-card"><view class="card-title">尺寸</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap mb-_a_24rpx_a_" style="align-items:center"><view class="prism-avatar xs"><image class="avatar-image" src="https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/1.png" mode="aspectFill"/></view><view class="prism-avatar sm"><image class="avatar-image" src="https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/2.jpg" mode="aspectFill"/></view><view class="prism-avatar md"><image class="avatar-image" src="https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/3.png" mode="aspectFill"/></view><view class="prism-avatar lg"><image class="avatar-image" src="https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/4.png" mode="aspectFill"/></view><view class="prism-avatar xl"><image class="avatar-image" src="https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/5.png" mode="aspectFill"/></view></view><view class="card-title">带边框</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap mb-_a_24rpx_a_"><view class="prism-avatar lg bordered"><image class="avatar-image" src="https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/6.png" mode="aspectFill"/></view></view><view class="card-title">方形头像</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap mb-_a_24rpx_a_"><view class="prism-avatar lg square"><image class="avatar-image" src="https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/7.jpg" mode="aspectFill"/></view></view><view class="card-title">在线状态</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap mb-_a_24rpx_a_"><view class="prism-avatar lg"><image class="avatar-image" src="https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/8.png" mode="aspectFill"/><view class="avatar-status online"></view></view><view class="prism-avatar lg"><image class="avatar-image" src="https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/9.png" mode="aspectFill"/><view class="avatar-status busy"></view></view><view class="prism-avatar lg"><image class="avatar-image" src="https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/10.png" mode="aspectFill"/><view class="avatar-status offline"></view></view></view><view class="card-title">头像组</view><view class="prism-avatar-group"><view class="prism-avatar sm"><image class="avatar-image" src="https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/1.png" mode="aspectFill"/></view><view class="prism-avatar sm"><image class="avatar-image" src="https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/2.jpg" mode="aspectFill"/></view><view class="prism-avatar sm"><image class="avatar-image" src="https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/avatar/3.png" mode="aspectFill"/></view><view class="avatar-more">+5</view></view><view class="card-title">文字头像</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap mb-_a_24rpx_a_"><view class="prism-avatar xs blue"><text class="avatar-text">张</text></view><view class="prism-avatar sm green"><text class="avatar-text">李</text></view><view class="prism-avatar md orange"><text class="avatar-text">王</text></view><view class="prism-avatar lg purple"><text class="avatar-text">赵</text></view><view class="prism-avatar xl red"><text class="avatar-text">刘</text></view></view><view class="card-title">文字头像 - 多色</view><view class="flex flex-row gap-_a_15rpx_a_ flex-wrap mb-_a_24rpx_a_"><view class="prism-avatar md blue"><text class="avatar-text">A</text></view><view class="prism-avatar md cyan"><text class="avatar-text">B</text></view><view class="prism-avatar md green"><text class="avatar-text">C</text></view><view class="prism-avatar md orange"><text class="avatar-text">D</text></view><view class="prism-avatar md pink"><text class="avatar-text">E</text></view><view class="prism-avatar md purple"><text class="avatar-text">F</text></view><view class="prism-avatar md indigo"><text class="avatar-text">G</text></view><view class="prism-avatar md red"><text class="avatar-text">H</text></view></view><prism-code wx:if="{{b}}" u-i="33c8a349-1" bind:__l="__l" u-p="{{b}}"/></view></view><view class="prism-section"><view class="section-title">进度条</view><view class="prism-card"><view class="card-title">基础进度条</view><view class="prism-progress mb-_a_24rpx_a_"><view class="progress-bar" style="width:60%"></view></view><view class="card-title">颜色</view><view class="prism-progress mb-_a_10rpx_a_"><view class="progress-bar" style="width:80%"></view></view><view class="prism-progress prism-progress--success mb-_a_10rpx_a_"><view class="progress-bar" style="width:70%"></view></view><view class="prism-progress prism-progress--warning mb-_a_10rpx_a_"><view class="progress-bar" style="width:50%"></view></view><view class="prism-progress prism-progress--danger mb-_a_24rpx_a_"><view class="progress-bar" style="width:30%"></view></view><view class="card-title">大尺寸</view><view class="prism-progress prism-progress--lg"><view class="progress-bar" style="width:65%"></view></view><prism-code wx:if="{{c}}" u-i="33c8a349-2" bind:__l="__l" u-p="{{c}}"/></view></view><view class="prism-section"><view class="section-title">统计卡片</view><view class="prism-stats-grid"><view class="prism-card glass prism-stat-card"><view class="stat-icon prism-icon blue"><text class="fa fa-folder-open"></text></view><view class="stat-info"><text class="stat-value">12</text><text class="stat-label">项目总数</text></view><view class="stat-trend up"><text class="fa fa-arrow-trend-up"></text><text>5进行中</text></view></view><view class="prism-card glass prism-stat-card"><view class="stat-icon prism-icon orange"><text class="fa fa-list-check"></text></view><view class="stat-info"><text class="stat-value">48</text><text class="stat-label">任务总数</text></view><view class="stat-trend down"><text class="fa fa-triangle-exclamation"></text><text>2个逾期</text></view></view><view class="prism-card glass prism-stat-card"><view class="stat-icon prism-icon green"><text class="fa fa-chart-pie"></text></view><view class="stat-info"><text class="stat-value">85%</text><text class="stat-label">完成率</text></view></view><view class="prism-card glass prism-stat-card"><view class="stat-icon prism-icon purple"><text class="fa fa-users"></text></view><view class="stat-info"><text class="stat-value">8</text><text class="stat-label">团队成员</text></view><view class="stat-trend up"><text class="fa fa-user-plus"></text><text>协作中</text></view></view></view><prism-code wx:if="{{d}}" u-i="33c8a349-3" bind:__l="__l" u-p="{{d}}"/></view><view class="prism-section"><view class="section-title">核心指标</view><view class="prism-metric-grid"><view wx:for="{{e}}" wx:for-item="metric" wx:key="m" class="prism-card glass prism-metric-card"><view class="metric-header"><view class="{{['metric-icon-wrapper', metric.b]}}"><text class="{{metric.a}}"></text></view><view class="{{['prism-badge', metric.d]}}">{{metric.c}}</view></view><view class="metric-body"><view class="{{['metric-value', metric.h]}}">{{metric.e}} <text wx:if="{{metric.f}}" class="metric-unit">{{metric.g}}</text></view><view class="metric-label">{{metric.i}}</view><view wx:if="{{metric.j}}" class="metric-sparkline"><block wx:if="{{r0}}"><canvas canvas-id="{{metric.k}}" id="{{metric.l}}" class="trend-canvas"></canvas></block></view></view></view></view><prism-code wx:if="{{f}}" u-i="33c8a349-4" bind:__l="__l" u-p="{{f}}"/></view><view class="prism-section"><view class="section-title">空状态</view><view class="prism-placeholder"><text class="placeholder-icon fa fa-inbox"></text><text class="placeholder-text">暂无数据</text><view class="placeholder-action"><view class="prism-btn primary sm"><text>刷新</text></view></view></view><prism-code wx:if="{{g}}" u-i="33c8a349-5" bind:__l="__l" u-p="{{g}}"/></view><view class="prism-section"><view class="section-title">Milestone 里程碑</view><view class="prism-card glass"><view class="prism-milestone"><view wx:for="{{h}}" wx:for-item="item" wx:key="f" class="{{['prism-milestone-item', item.g && 'completed', item.h && 'active']}}"><view class="milestone-dot"><text class="{{['fa', item.a]}}"></text></view><view class="milestone-content"><view class="milestone-title">{{item.b}}</view><view class="milestone-time">{{item.c}}</view><view wx:if="{{item.d}}" class="milestone-desc">{{item.e}}</view></view></view></view></view><prism-code wx:if="{{i}}" u-i="33c8a349-6" bind:__l="__l" u-p="{{i}}"/></view><view class="prism-section"><view class="section-title">Project Logs 项目日志</view><view class="prism-card glass"><view class="card-header"><view class="card-title">活动日志</view><view class="add-log-btn"><text class="fa fa-plus"></text><text>写日志</text></view></view><view class="logs-card"><view wx:for="{{j}}" wx:for-item="log" wx:key="h" class="log-item"><view class="{{['log-icon', log.b]}}"><text class="{{['fa', log.a]}}"></text></view><view class="log-content"><view class="log-header"><text class="log-title">{{log.c}}</text><text class="log-time">{{log.d}}</text></view><text class="log-desc">{{log.e}}</text><view wx:if="{{log.f}}" class="log-user"><text class="fa fa-user"></text><text>{{log.g}}</text></view></view></view></view><prism-code wx:if="{{k}}" u-i="33c8a349-7" bind:__l="__l" u-p="{{k}}"/></view></view><view class="prism-section"><view class="section-title">CountDown 倒计时</view><view class="prism-countdown mb-_a_20rpx_a_"><view class="prism-countdown__block">{{l}}</view><text class="prism-countdown__colon">:</text><view class="prism-countdown__block">{{m}}</view><text class="prism-countdown__colon">:</text><view class="prism-countdown__block">{{n}}</view></view><prism-code wx:if="{{o}}" u-i="33c8a349-8" bind:__l="__l" u-p="{{o}}"/></view><view class="prism-safe-area-bottom"></view></scroll-view></view>