@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/dev/mp-weixin/pages/demo/sticky/group.wxss

@@ -0,0 +1,135 @@
+/**
+ * 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 中定义 */
+.demo-container {
+  height: calc(100vh - 240rpx);
+  overflow: hidden;
+  margin: 0 30rpx;
+}
+.code-float-bottom {
+  position: fixed;
+  left: 30rpx;
+  right: 30rpx;
+  bottom: calc(8rpx + env(safe-area-inset-bottom));
+  z-index: 100;
+}
+.group-index {
+  padding: 16rpx 24rpx;
+  background: var(--prism-bg-color, #F7F8FA);
+  font-size: 26rpx;
+  font-weight: 600;
+  color: var(--prism-text-secondary, #86909C);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+.group-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  border-bottom: 1rpx solid var(--prism-border-color-light, #F2F3F5);
+}
+.group-item:active {
+  background: var(--prism-bg-color, #F7F8FA);
+}
+.group-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background: rgba(52, 120, 246, 0.1);
+  color: var(--prism-primary-color, #3478F6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  font-weight: 600;
+  margin-right: 24rpx;
+  flex-shrink: 0;
+}
+.group-info {
+  flex: 1;
+  min-width: 0;
+}
+.group-title {
+  font-size: 30rpx;
+  font-weight: 500;
+  color: var(--prism-text-primary, #1D2129);
+  margin-bottom: 8rpx;
+}
+.group-desc {
+  font-size: 24rpx;
+  color: var(--prism-text-secondary, #86909C);
+}
+.dark-mode .group-index {
+  background: var(--prism-bg-color, #1A1A1A);
+  color: var(--prism-text-secondary, #A9AEB8);
+}
+.dark-mode .group-item {
+  background: var(--prism-bg-color-card, #242424);
+  border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+.dark-mode .group-item:active {
+  background: var(--prism-bg-color, #1A1A1A);
+}
+.dark-mode .group-avatar {
+  background: rgba(52, 120, 246, 0.2);
+  color: var(--prism-primary-color, #3478F6);
+}
+.dark-mode .group-title {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.dark-mode .group-desc {
+  color: var(--prism-text-secondary, #A9AEB8);
+}

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

@@ -0,0 +1,90 @@
+"use strict";
+const common_vendor = require("../../../common/vendor.js");
+const store_app = require("../../../store/app.js");
+const composables_useNavbar = require("../../../composables/useNavbar.js");
+if (!Array) {
+  const _easycom_PrismNavBar2 = common_vendor.resolveComponent("PrismNavBar");
+  _easycom_PrismNavBar2();
+}
+const _easycom_PrismNavBar = () => "../../../components/PrismNavBar/PrismNavBar.js";
+if (!Math) {
+  (_easycom_PrismNavBar + PrismSwiper + PrismSticky + PrismCode)();
+}
+const PrismSticky = () => "../../../components/PrismSticky/PrismSticky.js";
+const PrismSwiper = () => "../../../components/PrismSwiper/PrismSwiper.js";
+const PrismCode = () => "../../../components/PrismCode/PrismCode.js";
+const _sfc_main = {
+  __name: "index",
+  setup(__props) {
+    const appStore = store_app.useAppStore();
+    const { navbarHeight } = composables_useNavbar.useNavbar();
+    const activeTab = common_vendor.ref(0);
+    const isGridView = common_vendor.ref(true);
+    function toggleViewMode() {
+      isGridView.value = !isGridView.value;
+    }
+    const bannerList = common_vendor.ref([
+      { image: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/banner/1.jpg" },
+      { image: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/banner/2.jpg" },
+      { image: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/banner/3.jpg" },
+      { image: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/banner/4.jpg" }
+    ]);
+    const products = [
+      { id: 1, title: "时尚休闲双肩包", desc: "大容量防水面料", price: "129.00", image: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/product/p1.jpg" },
+      { id: 2, title: "简约商务手提包", desc: "头层牛皮材质", price: "299.00", image: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/product/p2.jpg" },
+      { id: 3, title: "复古帆布斜挎包", desc: "文艺范十足", price: "89.00", image: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/product/p3.jpg" },
+      { id: 4, title: "运动健身背包", desc: "透气网面设计", price: "159.00", image: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/product/p4.jpg" },
+      { id: 5, title: "迷你链条小包", desc: "精致小巧百搭", price: "199.00", image: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/product/p5.jpg" },
+      { id: 6, title: "大容量旅行包", desc: "出行必备神器", price: "259.00", image: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/product/p6.jpg" },
+      { id: 7, title: "学生书包双肩包", desc: "减负护脊设计", price: "149.00", image: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/product/p7.jpg" },
+      { id: 8, title: "女士手拿包", desc: "优雅气质之选", price: "179.00", image: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/product/p8.jpg" },
+      { id: 9, title: "男士公文包", desc: "商务精英首选", price: "399.00", image: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/product/p9.jpg" },
+      { id: 10, title: "户外登山包", desc: "专业户外装备", price: "329.00", image: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/prism-ui/product/p10.jpg" }
+    ];
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.p({
+          title: "Sticky 吸顶",
+          icon: "fa-anchor",
+          ["icon-color"]: "blue",
+          ["show-back"]: true
+        }),
+        b: common_vendor.p({
+          list: bannerList.value,
+          height: "300rpx",
+          radius: "0"
+        }),
+        c: activeTab.value === 0 ? 1 : "",
+        d: common_vendor.o(($event) => activeTab.value = 0),
+        e: activeTab.value === 1 ? 1 : "",
+        f: common_vendor.o(($event) => activeTab.value = 1),
+        g: activeTab.value === 2 ? 1 : "",
+        h: common_vendor.o(($event) => activeTab.value = 2),
+        i: activeTab.value === 3 ? 1 : "",
+        j: common_vendor.o(($event) => activeTab.value = 3),
+        k: common_vendor.n(isGridView.value ? "fa-list" : "fa-table-cells"),
+        l: common_vendor.o(toggleViewMode),
+        m: common_vendor.p({
+          ["nav-height"]: common_vendor.unref(navbarHeight)
+        }),
+        n: common_vendor.p({
+          code: "<PrismSticky>内容</PrismSticky>"
+        }),
+        o: common_vendor.f(products, (item, k0, i0) => {
+          return {
+            a: item.image,
+            b: common_vendor.t(item.title),
+            c: common_vendor.t(item.desc),
+            d: common_vendor.t(item.price),
+            e: item.id
+          };
+        }),
+        p: !isGridView.value ? 1 : "",
+        q: common_vendor.unref(navbarHeight) + "px",
+        r: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      };
+    };
+  }
+};
+wx.createPage(_sfc_main);
+//# sourceMappingURL=../../../../.sourcemap/mp-weixin/pages/demo/sticky/index.js.map

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

@@ -0,0 +1,9 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "prism-nav-bar": "../../../components/PrismNavBar/PrismNavBar",
+    "prism-sticky": "../../../components/PrismSticky/PrismSticky",
+    "prism-swiper": "../../../components/PrismSwiper/PrismSwiper",
+    "prism-code": "../../../components/PrismCode/PrismCode"
+  }
+}

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

@@ -0,0 +1 @@
+<view class="{{['prism-page', r && 'dark-mode']}}"><prism-nav-bar wx:if="{{a}}" u-i="2bf10e6a-0" bind:__l="__l" u-p="{{a}}"/><view class="prism-main" style="{{'padding-top:' + q}}"><prism-swiper wx:if="{{b}}" u-i="2bf10e6a-1" bind:__l="__l" u-p="{{b}}"/><prism-sticky wx:if="{{m}}" u-s="{{['d']}}" u-i="2bf10e6a-2" bind:__l="__l" u-p="{{m}}"><view class="sticky-tabs-wrapper"><view class="prism-tabs"><view class="{{['tab-item', c && 'active']}}" bindtap="{{d}}">综合</view><view class="{{['tab-item', e && 'active']}}" bindtap="{{f}}">销量</view><view class="{{['tab-item', g && 'active']}}" bindtap="{{h}}">价格</view><view class="{{['tab-item', i && 'active']}}" bindtap="{{j}}">新品</view></view><view class="view-toggle" bindtap="{{l}}"><text class="{{['fa', k]}}"></text></view></view></prism-sticky><view class="p-_a_10rpx_a_"><prism-code wx:if="{{n}}" u-i="2bf10e6a-3" bind:__l="__l" u-p="{{n}}"/></view><view class="{{['demo-content', p && 'list-view']}}"><view wx:for="{{o}}" wx:for-item="item" wx:key="e" class="product-item"><image class="product-image" src="{{item.a}}" mode="aspectFill"/><view class="product-info"><view class="product-title">{{item.b}}</view><view class="product-desc">{{item.c}}</view><view class="product-footer"><view class="product-price">¥{{item.d}}</view><view class="product-btn">购买</view></view></view></view></view><view class="prism-safe-area-bottom"></view></view></view>

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

@@ -0,0 +1,175 @@
+/**
+ * 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 中定义 */
+/* 覆盖页面容器样式，让 sticky 正常工作 */
+.prism-page {
+  height: auto;
+  overflow: visible;
+}
+.prism-main {
+  height: auto;
+  min-height: 100vh;
+  overflow: visible;
+}
+.sticky-tabs-wrapper {
+  padding: 20rpx 30rpx;
+  background: var(--prism-bg-color-card, #fff);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.dark-mode .sticky-tabs-wrapper {
+  background: var(--prism-bg-color-card, #242424);
+}
+.sticky-tabs-wrapper .prism-tabs {
+  margin-bottom: 0;
+  flex: 1;
+}
+.view-toggle {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--prism-text-secondary, #86909C);
+  font-size: 36rpx;
+}
+.view-toggle:active {
+  opacity: 0.7;
+}
+.demo-content {
+  padding: 20rpx;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20rpx;
+  transition: all 0.3s ease;
+  /* 列表视图 */
+}
+.demo-content.list-view {
+  grid-template-columns: 1fr;
+}
+.demo-content.list-view .product-item {
+  display: flex;
+  flex-direction: row;
+}
+.demo-content.list-view .product-image {
+  width: 200rpx;
+  height: 200rpx;
+  flex-shrink: 0;
+}
+.demo-content.list-view .product-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.product-item {
+  background: var(--prism-bg-color-card, #FFFFFF);
+  border-radius: 12rpx;
+  overflow: hidden;
+}
+.product-item:active {
+  opacity: 0.9;
+}
+.dark-mode .product-item {
+  background: var(--prism-bg-color-card, #242424);
+}
+.product-image {
+  width: 100%;
+  height: 280rpx;
+  background: var(--prism-bg-color, #F7F8FA);
+}
+.dark-mode .product-image {
+  background: var(--prism-bg-color, #1A1A1A);
+}
+.product-info {
+  padding: 20rpx;
+}
+.product-title {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: var(--prism-text-primary, #1D2129);
+  margin-bottom: 8rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dark-mode .product-title {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.product-desc {
+  font-size: 22rpx;
+  color: var(--prism-text-secondary, #86909C);
+  margin-bottom: 16rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.product-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.product-price {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: var(--prism-danger-color, #F53F3F);
+}
+.product-btn {
+  padding: 8rpx 24rpx;
+  background: var(--prism-primary-color, #3478F6);
+  color: #FFFFFF;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+}

package/dist/dev/mp-weixin/pages/examples/examples.js

@@ -0,0 +1,65 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const store_app = require("../../store/app.js");
+const composables_useNavbar = require("../../composables/useNavbar.js");
+if (!Array) {
+  const _easycom_PrismNavBar2 = common_vendor.resolveComponent("PrismNavBar");
+  const _easycom_PrismMusicPlayer2 = common_vendor.resolveComponent("PrismMusicPlayer");
+  const _easycom_PrismTabBar2 = common_vendor.resolveComponent("PrismTabBar");
+  (_easycom_PrismNavBar2 + _easycom_PrismMusicPlayer2 + _easycom_PrismTabBar2)();
+}
+const _easycom_PrismNavBar = () => "../../components/PrismNavBar/PrismNavBar.js";
+const _easycom_PrismMusicPlayer = () => "../../components/PrismMusicPlayer/PrismMusicPlayer.js";
+const _easycom_PrismTabBar = () => "../../components/PrismTabBar/PrismTabBar.js";
+if (!Math) {
+  (_easycom_PrismNavBar + _easycom_PrismMusicPlayer + _easycom_PrismTabBar)();
+}
+const COVER_BASE = "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/awesome/music/covers/";
+const _sfc_main = {
+  __name: "examples",
+  setup(__props) {
+    const appStore = store_app.useAppStore();
+    const { navbarHeight } = composables_useNavbar.useNavbar();
+    const musicSongs = {
+      "放松舒缓": [
+        { name: "01.僕は帰ろう", file: "http://music.ruixinkeji.com/1.mp3", cover: COVER_BASE + "僕は帰ろう.jpg", album: "1Y Music 大自然轻音乐/最好听" },
+        { name: "05.優しさは風のように", file: "http://music.ruixinkeji.com/5.mp3", cover: COVER_BASE + "優しさは風のように.jpg", album: "妹尾武 - 優しさは風のように" },
+        { name: "木兰诗", file: "https://ruixinkeji.oss-cn-hangzhou.aliyuncs.com/docs/Mulan_Poem.mp3", album: "古诗词吟唱" }
+      ],
+      "专注冥想": [
+        { name: "02.Yuunagi", file: "http://music.ruixinkeji.com/2.mp3", cover: COVER_BASE + "Yuunagi.jpg", album: "Paniyolo - Yuunagi" },
+        { name: "06.Music for Dreaming", file: "http://music.ruixinkeji.com/6.mp3", cover: COVER_BASE + "Music for Dreaming.jpg", album: "PianoPeace - Music for Dreaming" }
+      ],
+      "情绪提振": [
+        { name: "03.风の诗", file: "http://music.ruixinkeji.com/3.mp3", cover: COVER_BASE + "风の诗.jpg", album: "神山純一 - 风の诗" },
+        { name: "07.Memory Lane", file: "http://music.ruixinkeji.com/7.mp3", cover: COVER_BASE + "Memory Lane.jpg", album: "yutaka hirasaka - Memory Lane" },
+        { name: "09.南国之舞", file: "http://music.ruixinkeji.com/9.mp3", cover: COVER_BASE + "南国之舞.jpg", album: "梁翘柏 - 南国之舞" }
+      ],
+      "助眠安神": [
+        { name: "04.Inside the Hut", file: "http://music.ruixinkeji.com/4.mp3", cover: COVER_BASE + "Inside the Hut.jpg", album: "陈越龙 - Inside the Hut" },
+        { name: "08.Respite", file: "http://music.ruixinkeji.com/8.mp3", cover: COVER_BASE + "Respite.jpg", album: "Ólafur Arnalds - Respite" }
+      ]
+    };
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.p({
+          title: "案例",
+          icon: "fa-layer-group",
+          ["icon-color"]: "green"
+        }),
+        b: common_vendor.p({
+          title: "疗愈音乐",
+          songs: musicSongs,
+          ["is-dark-mode"]: common_vendor.unref(appStore).isDarkMode
+        }),
+        c: common_vendor.unref(navbarHeight) + "px",
+        d: common_vendor.p({
+          current: "/pages/examples/examples"
+        }),
+        e: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      };
+    };
+  }
+};
+wx.createPage(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/examples/examples.js.map

package/dist/dev/mp-weixin/pages/examples/examples.json

@@ -0,0 +1,8 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "prism-nav-bar": "../../components/PrismNavBar/PrismNavBar",
+    "prism-music-player": "../../components/PrismMusicPlayer/PrismMusicPlayer",
+    "prism-tab-bar": "../../components/PrismTabBar/PrismTabBar"
+  }
+}

package/dist/dev/mp-weixin/pages/examples/examples.wxml

@@ -0,0 +1 @@
+<view class="{{['prism-page', e && 'dark-mode']}}"><prism-nav-bar wx:if="{{a}}" u-i="21e19ec2-0" bind:__l="__l" u-p="{{a}}"/><scroll-view class="prism-main" scroll-y style="{{'padding-top:' + c}}"><view class="example-section"><view class="section-title">精选案例</view><view class="example-grid"><view class="example-card" style="background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)"><view class="card-cover"><text class="fa fa-lock"></text></view><view class="card-content"><text class="card-title">登录页面</text><text class="card-desc">玻璃态登录表单设计</text></view></view><view class="example-card" style="background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"><view class="card-cover"><text class="fa fa-user"></text></view><view class="card-content"><text class="card-title">个人中心</text><text class="card-desc">用户信息展示页面</text></view></view><view class="example-card" style="background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"><view class="card-cover"><text class="fa fa-chart-line"></text></view><view class="card-content"><text class="card-title">数据看板</text><text class="card-desc">数据统计可视化</text></view></view><view class="example-card" style="background:linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"><view class="card-cover"><text class="fa fa-bag-shopping"></text></view><view class="card-content"><text class="card-title">商品列表</text><text class="card-desc">电商商品展示</text></view></view></view></view><view class="example-section"><view class="section-title">快速开始</view><view class="quick-actions-grid"><view class="quick-action-card cyan-gradient"><view class="action-icon-wrapper"><text class="fa fa-comments action-icon"></text></view><text class="action-title">聊天界面</text><text class="action-desc">即时通讯聊天</text></view><view class="quick-action-card orange-gradient"><view class="action-icon-wrapper"><text class="fa fa-bell action-icon"></text></view><text class="action-title">消息中心</text><text class="action-desc">通知消息列表</text></view><view class="quick-action-card green-gradient"><view class="action-icon-wrapper"><text class="fa fa-gear action-icon"></text></view><text class="action-title">设置页面</text><text class="action-desc">应用设置选项</text></view><view class="quick-action-card purple-gradient"><view class="action-icon-wrapper"><text class="fa fa-magnifying-glass action-icon"></text></view><text class="action-title">搜索页面</text><text class="action-desc">搜索与筛选功能</text></view></view></view><view class="example-section"><view class="section-title">快速功能</view><view class="quick-grid"><view class="quick-card"><view class="prism-icon cyan"><text class="fa fa-camera"></text></view><text class="quick-title">拍照上传</text></view><view class="quick-card"><view class="prism-icon orange"><text class="fa fa-qrcode"></text></view><text class="quick-title">扫一扫</text></view><view class="quick-card"><view class="prism-icon green"><text class="fa fa-location-dot"></text></view><text class="quick-title">定位签到</text></view><view class="quick-card"><view class="prism-icon purple"><text class="fa fa-share-nodes"></text></view><text class="quick-title">分享</text></view></view></view><view class="example-section"><view class="section-title">任务入口</view><view class="task-actions-grid"><view class="task-action-card primary-gradient"><view class="task-icon-wrapper"><text class="fa fa-plus task-icon"></text></view><text class="task-title">创建任务</text><text class="task-desc">新建施工、采购或验收任务</text></view><view class="task-action-card pink-gradient"><view class="task-icon-wrapper"><text class="fa fa-list-check task-icon"></text></view><text class="task-title">我的任务</text><text class="task-desc">查看分配给我的所有任务</text></view></view></view><view class="example-section"><view class="section-title">项目视图</view><view class="view-cards-grid"><view class="view-card"><view class="view-icon" style="background:rgba(52, 120, 246, 0.15)"><text class="fa fa-table" style="color:#3478F6"></text></view><text class="view-title">项目报表</text><text class="view-desc">数据统计与分析</text></view><view class="view-card"><view class="view-icon" style="background:rgba(0, 180, 42, 0.15)"><text class="fa fa-map" style="color:#00B42A"></text></view><text class="view-title">地图视图</text><text class="view-desc">项目地理分布</text></view><view class="view-card"><view class="view-icon" style="background:rgba(255, 125, 0, 0.15)"><text class="fa fa-filter" style="color:#FF7D00"></text></view><text class="view-title">数据筛选</text><text class="view-desc">多维度筛选查询</text></view><view class="view-card"><view class="view-icon" style="background:rgba(114, 46, 209, 0.15)"><text class="fa fa-calendar" style="color:#722ED1"></text></view><text class="view-title">日历视图</text><text class="view-desc">项目日程安排</text></view></view></view><view class="example-section"><view class="section-title">项目配置</view><view class="config-cards-grid"><view class="config-card"><view class="config-icon" style="background:rgba(52, 120, 246, 0.15)"><text class="fa fa-bars" style="color:#3478F6"></text></view><text class="config-title">阶段配置</text><text class="config-desc">项目阶段管理</text></view><view class="config-card"><view class="config-icon" style="background:rgba(0, 180, 42, 0.15)"><text class="fa fa-file-lines" style="color:#00B42A"></text></view><text class="config-title">项目模板</text><text class="config-desc">项目模板管理</text></view><view class="config-card"><view class="config-icon" style="background:rgba(255, 125, 0, 0.15)"><text class="fa fa-list" style="color:#FF7D00"></text></view><text class="config-title">任务模板</text><text class="config-desc">任务模板管理</text></view></view></view><view class="example-section"><view class="section-title">音乐播放器</view><prism-music-player wx:if="{{b}}" u-i="21e19ec2-1" bind:__l="__l" u-p="{{b}}"/></view><view class="prism-bottom-placeholder"></view></scroll-view><prism-tab-bar wx:if="{{d}}" u-i="21e19ec2-2" bind:__l="__l" u-p="{{d}}"/></view>