@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/dev/mp-weixin/components/PrismGroupSticky/PrismGroupSticky.wxss

@@ -0,0 +1,191 @@
+/**
+ * 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，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   九、统一间距
+   ============================================================ */
+.prism-group-sticky-wrapper {
+  position: relative;
+  height: 100%;
+}
+.prism-group-sticky {
+  height: 100%;
+}
+.prism-group-sticky .uni-scroll-view-content {
+  height: auto !important;
+}
+.prism-group-sticky .group-index {
+  position: sticky;
+  top: -1px;
+  z-index: 10;
+  margin: 0;
+  padding: 12rpx 24rpx;
+  padding-top: calc(12rpx + 1px);
+  font-size: 26rpx;
+  font-weight: 600;
+  color: var(--prism-primary-color, #3478F6);
+  background: var(--prism-bg-color-page, #F7F8FA);
+}
+.dark-mode .prism-group-sticky .group-index {
+  background: var(--prism-bg-color-page, #121212);
+}
+.prism-group-sticky .group-item {
+  display: flex;
+  align-items: center;
+  min-height: 88rpx;
+  padding: 24rpx 32rpx;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  border-bottom: 1rpx solid var(--prism-border-color-light, #F2F3F5);
+  font-size: 28rpx;
+  color: var(--prism-text-primary, #1D2129);
+}
+.dark-mode .prism-group-sticky .group-item {
+  background: var(--prism-bg-color-card, #242424);
+  border-bottom-color: var(--prism-border-color-light, #2D2D2D);
+}
+.prism-group-sticky .group-item:has(+ .group-index),
+.prism-group-sticky .group-item:last-child {
+  border-radius: 0 0 16rpx 16rpx;
+  border-bottom: none;
+}
+.prism-group-sticky .group-item:active {
+  background: var(--prism-bg-color, #F2F2F2);
+}
+.dark-mode .prism-group-sticky .group-item:active {
+  background: var(--prism-bg-color, #1A1A1A);
+}
+.prism-group-sticky .group-index + .group-item {
+  border-radius: 16rpx 16rpx 0 0;
+}
+.prism-group-sticky .group-index + .group-item:has(+ .group-index),
+.prism-group-sticky .group-index + .group-item:last-child {
+  border-radius: 16rpx;
+}
+.prism-group-sticky .group-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  margin-right: 24rpx;
+  background: var(--prism-primary-light, #EBF2FF);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+  font-weight: 600;
+  color: var(--prism-primary-color, #3478F6);
+  flex-shrink: 0;
+}
+.dark-mode .prism-group-sticky .group-avatar {
+  background: rgba(52, 120, 246, 0.15);
+}
+.prism-group-sticky .group-info {
+  flex: 1;
+  min-width: 0;
+}
+.prism-group-sticky .group-info .group-title {
+  font-size: 30rpx;
+  font-weight: 500;
+  color: var(--prism-text-primary, #1D2129);
+  margin-bottom: 4rpx;
+}
+.dark-mode .prism-group-sticky .group-info .group-title {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.prism-group-sticky .group-info .group-desc {
+  font-size: 24rpx;
+  color: var(--prism-text-secondary, #86909C);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.prism-index-bar {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 12rpx 16rpx 12rpx 24rpx;
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 20rpx 0 0 20rpx;
+  backdrop-filter: blur(8px);
+}
+.prism-index-bar .index-item {
+  width: 36rpx;
+  height: 36rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22rpx;
+  color: var(--prism-text-primary, #1D2129);
+  font-weight: 500;
+  background: transparent;
+}
+.prism-index-bar .index-item:active, .prism-index-bar .index-item.active {
+  color: var(--prism-primary-color, #3478F6);
+  font-weight: 600;
+}
+.index-indicator {
+  position: fixed;
+  right: 120rpx;
+  width: 100rpx;
+  height: 100rpx;
+  margin-top: -50rpx;
+  border-radius: 50%;
+  background: rgba(52, 120, 246, 0.8);
+  backdrop-filter: blur(10px);
+  color: #FFFFFF;
+  font-size: 48rpx;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 32rpx rgba(52, 120, 246, 0.3);
+  z-index: 1000;
+}

package/dist/dev/mp-weixin/components/PrismIdCardInput/PrismIdCardInput.js

@@ -0,0 +1,123 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const store_app = require("../../store/app.js");
+const _sfc_main = {
+  __name: "PrismIdCardInput",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    showInfo: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: "请输入身份证号"
+    }
+  },
+  emits: ["update:modelValue", "complete", "valid"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const appStore = store_app.useAppStore();
+    const idValue = common_vendor.ref(props.modelValue);
+    const lastDisplayLength = common_vendor.ref(0);
+    const displayValue = common_vendor.computed(() => {
+      const val = idValue.value;
+      if (!val) return "";
+      let result = "";
+      for (let i = 0; i < val.length; i++) {
+        if (i === 6 || i === 14) {
+          result += " ";
+        }
+        result += val[i];
+      }
+      return result;
+    });
+    const parsedInfo = common_vendor.computed(() => {
+      const id = idValue.value;
+      if (id.length !== 18) {
+        return { valid: false };
+      }
+      const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+      const checkCodes = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
+      let sum = 0;
+      for (let i = 0; i < 17; i++) {
+        sum += parseInt(id[i]) * weights[i];
+      }
+      const checkCode = checkCodes[sum % 11];
+      if (id[17].toUpperCase() !== checkCode) {
+        return { valid: false };
+      }
+      const year = id.substring(6, 10);
+      const month = id.substring(10, 12);
+      const day = id.substring(12, 14);
+      const birthday = `${year}年${month}月${day}日`;
+      const genderCode = parseInt(id[16]);
+      const gender = genderCode % 2 === 1 ? "男" : "女";
+      return {
+        valid: true,
+        region: "—",
+        birthday,
+        gender
+      };
+    });
+    function onFocus() {
+    }
+    function onBlur() {
+    }
+    function handleInput(e) {
+      const inputValue = e.detail.value;
+      const oldLength = lastDisplayLength.value;
+      const newLength = inputValue.length;
+      let value = inputValue.replace(/\s/g, "").toUpperCase().replace(/[^0-9X]/g, "");
+      if (newLength < oldLength) {
+        const deletedPos = oldLength - 1;
+        if (deletedPos === 7 || deletedPos === 16) {
+          const actualPos = deletedPos === 7 ? 6 : 14;
+          value = value.slice(0, actualPos - 1) + value.slice(actualPos);
+        }
+      }
+      if (value.length < 18) {
+        value = value.replace(/X/g, "");
+      } else if (value.length === 18 && value[17] === "X") {
+        value = value.slice(0, 17).replace(/X/g, "") + "X";
+      } else {
+        value = value.replace(/X/g, "");
+      }
+      value = value.slice(0, 18);
+      idValue.value = value;
+      emit("update:modelValue", value);
+      lastDisplayLength.value = displayValue.value.length;
+      if (value.length === 18) {
+        emit("complete", value);
+        if (parsedInfo.value.valid) {
+          emit("valid", parsedInfo.value);
+        }
+      }
+    }
+    common_vendor.watch(() => props.modelValue, (val) => {
+      idValue.value = val;
+    });
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: displayValue.value,
+        b: __props.placeholder,
+        c: common_vendor.o(handleInput),
+        d: common_vendor.o(onFocus),
+        e: common_vendor.o(onBlur),
+        f: __props.showInfo && parsedInfo.value.valid
+      }, __props.showInfo && parsedInfo.value.valid ? {
+        g: common_vendor.t(parsedInfo.value.region),
+        h: common_vendor.t(parsedInfo.value.birthday),
+        i: common_vendor.t(parsedInfo.value.gender)
+      } : {}, {
+        j: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      });
+    };
+  }
+};
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/PrismIdCardInput/PrismIdCardInput.js.map

package/dist/dev/mp-weixin/components/PrismIdCardInput/PrismIdCardInput.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/dist/dev/mp-weixin/components/PrismIdCardInput/PrismIdCardInput.wxml

@@ -0,0 +1 @@
+<view class="{{['prism-id-card-input', j && 'dark-mode']}}"><view class="id-card-input-wrapper"><input class="id-card-input" type="idcard" value="{{a}}" placeholder="{{b}}" placeholder-class="id-placeholder" maxlength="{{21}}" bindinput="{{c}}" bindfocus="{{d}}" bindblur="{{e}}"/></view><view wx:if="{{f}}" class="id-info"><view class="info-item"><text class="info-label">地区：</text><text class="info-value">{{g}}</text></view><view class="info-item"><text class="info-label">出生日期：</text><text class="info-value">{{h}}</text></view><view class="info-item"><text class="info-label">性别：</text><text class="info-value">{{i}}</text></view></view></view>

package/dist/dev/mp-weixin/components/PrismIdCardInput/PrismIdCardInput.wxss

@@ -0,0 +1,114 @@
+/**
+ * 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，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   九、统一间距
+   ============================================================ */
+.prism-id-card-input .id-card-input-wrapper {
+  background: var(--prism-input-bg, #EBEEF2);
+  border-radius: 12rpx;
+  padding: 0 24rpx;
+  height: 88rpx;
+  display: flex;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+.prism-id-card-input .id-card-input-wrapper:focus-within {
+  background: var(--prism-primary-light, #E3EEFF);
+}
+.prism-id-card-input .id-card-input {
+  flex: 1;
+  font-size: 32rpx;
+  font-weight: 500;
+  color: var(--prism-text-primary, #1D2129);
+  letter-spacing: 2rpx;
+}
+.prism-id-card-input .id-placeholder {
+  color: var(--prism-text-placeholder, #86909C);
+  font-weight: 400;
+}
+.prism-id-card-input .id-info {
+  margin-top: 24rpx;
+  padding: 20rpx;
+  background: rgba(52, 120, 246, 0.08);
+  border-radius: 12rpx;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+.prism-id-card-input .id-info .info-item {
+  display: flex;
+  align-items: center;
+}
+.prism-id-card-input .id-info .info-item .info-label {
+  font-size: 24rpx;
+  color: var(--prism-text-secondary, #86909C);
+}
+.prism-id-card-input .id-info .info-item .info-value {
+  font-size: 24rpx;
+  color: var(--prism-text-primary, #1D2129);
+  font-weight: 500;
+}
+.dark-mode .prism-id-card-input .id-card-input-wrapper {
+  background: var(--prism-input-bg, #2A2A2A);
+}
+.dark-mode .prism-id-card-input .id-card-input-wrapper:focus-within {
+  background: rgba(52, 120, 246, 0.12);
+  box-shadow: 0 0 0 2rpx rgba(52, 120, 246, 0.4), 0 4rpx 16rpx rgba(52, 120, 246, 0.15);
+}
+.dark-mode .prism-id-card-input .id-card-input {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.dark-mode .prism-id-card-input .id-placeholder {
+  color: var(--prism-text-placeholder, #6B7785);
+}
+.dark-mode .prism-id-card-input .id-info {
+  background: rgba(52, 120, 246, 0.15);
+}
+.dark-mode .prism-id-card-input .id-info .info-value {
+  color: var(--prism-text-primary, #E5E6EB);
+}

package/dist/dev/mp-weixin/components/PrismIndexBar/PrismIndexBar.js

@@ -0,0 +1,108 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const _sfc_main = {
+  __name: "PrismIndexBar",
+  props: {
+    // 索引项列表 [{ value: 'key', label: '显示文字', background: '#fff' 或 'linear-gradient(...)' }]
+    items: {
+      type: Array,
+      default: () => []
+    },
+    // 是否深色模式
+    isDarkMode: {
+      type: Boolean,
+      default: false
+    },
+    // 当前选中的索引值（支持 v-model）
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const instance = common_vendor.getCurrentInstance();
+    const currentIndex = common_vendor.ref(props.modelValue);
+    const showIndicator = common_vendor.ref(false);
+    const indicatorTop = common_vendor.ref(0);
+    let indexBarRect = null;
+    const currentItemLabel = common_vendor.computed(() => {
+      const item = props.items.find((i) => i.value === currentIndex.value);
+      return item ? item.label : "";
+    });
+    const currentItemBackground = common_vendor.computed(() => {
+      const item = props.items.find((i) => i.value === currentIndex.value);
+      return item ? item.background : "rgba(0, 0, 0, 0.85)";
+    });
+    const getItemByTouch = (touchY) => {
+      if (!indexBarRect || !props.items.length) return null;
+      const itemHeight = indexBarRect.height / props.items.length;
+      const relativeY = touchY - indexBarRect.top;
+      const index = Math.floor(relativeY / itemHeight);
+      if (index < 0) return props.items[0];
+      if (index >= props.items.length) return props.items[props.items.length - 1];
+      return props.items[index];
+    };
+    const updateIndex = (touchY) => {
+      indicatorTop.value = touchY;
+      const item = getItemByTouch(touchY);
+      if (item && item.value !== currentIndex.value) {
+        currentIndex.value = item.value;
+        emit("update:modelValue", item.value);
+        emit("change", item.value);
+      }
+    };
+    const onIndexTouchStart = (e) => {
+      showIndicator.value = true;
+      const touchY = e.touches[0].clientY;
+      indicatorTop.value = touchY;
+      common_vendor.index.createSelectorQuery().in(instance).select(".prism-index-bar").boundingClientRect((rect) => {
+        if (rect) {
+          indexBarRect = rect;
+          const item = getItemByTouch(touchY);
+          if (item) {
+            currentIndex.value = item.value;
+            emit("update:modelValue", item.value);
+            emit("change", item.value);
+          }
+        }
+      }).exec();
+    };
+    const onIndexTouchMove = (e) => {
+      const touchY = e.touches[0].clientY;
+      if (indexBarRect) {
+        updateIndex(touchY);
+      }
+    };
+    const onIndexTouchEnd = () => {
+      showIndicator.value = false;
+    };
+    return (_ctx, _cache) => {
+      return common_vendor.e({
+        a: common_vendor.f(__props.items, (item, k0, i0) => {
+          return {
+            a: item.value,
+            b: currentIndex.value === item.value ? 1 : "",
+            c: item.background
+          };
+        }),
+        b: __props.isDarkMode ? 1 : "",
+        c: common_vendor.o(onIndexTouchStart),
+        d: common_vendor.o(onIndexTouchMove),
+        e: common_vendor.o(onIndexTouchEnd),
+        f: showIndicator.value && currentIndex.value
+      }, showIndicator.value && currentIndex.value ? {
+        g: common_vendor.t(currentItemLabel.value),
+        h: currentItemBackground.value,
+        i: __props.isDarkMode ? 1 : "",
+        j: indicatorTop.value + "px",
+        k: currentItemBackground.value
+      } : {});
+    };
+  }
+};
+const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-4b4fa71a"]]);
+wx.createComponent(Component);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/PrismIndexBar/PrismIndexBar.js.map

package/dist/dev/mp-weixin/components/PrismIndexBar/PrismIndexBar.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

package/dist/dev/mp-weixin/components/PrismIndexBar/PrismIndexBar.wxml

@@ -0,0 +1 @@
+<view class="data-v-4b4fa71a"><view class="{{['prism-index-bar', 'data-v-4b4fa71a', b && 'dark-mode']}}" bindtouchstart="{{c}}" catchtouchmove="{{d}}" bindtouchend="{{e}}"><view wx:for="{{a}}" wx:for-item="item" wx:key="a" class="{{['prism-index-item', 'data-v-4b4fa71a', item.b && 'active']}}" style="{{'background:' + item.c}}"></view></view><view wx:if="{{f}}" class="{{['prism-index-indicator', 'data-v-4b4fa71a', i && 'dark-mode']}}" style="{{'top:' + j + ';' + ('background:' + k)}}">{{g}} <view class="prism-index-indicator-arrow data-v-4b4fa71a" style="{{'border-left-color:' + h}}"></view></view></view>

package/dist/dev/mp-weixin/components/PrismIndexBar/PrismIndexBar.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，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   九、统一间距
+   ============================================================ */
+/* 右侧索引条 */
+.prism-index-bar.data-v-4b4fa71a {
+  position: fixed;
+  right: 8rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12rpx;
+  z-index: 999;
+  padding: 16rpx 12rpx;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 24rpx;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+.prism-index-item.data-v-4b4fa71a {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  border: 3rpx solid rgba(255, 255, 255, 0.8);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+  position: relative;
+  flex-shrink: 0;
+}
+.prism-index-item.data-v-4b4fa71a:active {
+  transform: scale(1.15);
+}
+.prism-index-item.active.data-v-4b4fa71a {
+  width: 48rpx;
+  height: 48rpx;
+  border-width: 4rpx;
+  border-color: #FFFFFF;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
+}
+
+/* 气泡提示 */
+.prism-index-indicator.data-v-4b4fa71a {
+  position: fixed;
+  right: 80rpx;
+  padding: 12rpx 20rpx;
+  color: #FFFFFF;
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  white-space: nowrap;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
+  animation: fadeIn-4b4fa71a 0.2s ease;
+  z-index: 1000;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+/* 气泡箭头 */
+.prism-index-indicator-arrow.data-v-4b4fa71a {
+  position: absolute;
+  right: -8rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 8rpx solid;
+  border-top: 8rpx solid transparent;
+  border-bottom: 8rpx solid transparent;
+}
+@keyframes fadeIn-4b4fa71a {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+/* 深色模式适配 */
+.dark-mode.prism-index-bar .prism-index-item.data-v-4b4fa71a {
+  border-color: rgba(0, 0, 0, 0.5);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.4);
+}
+.dark-mode.prism-index-bar .prism-index-item.active.data-v-4b4fa71a {
+  border-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.6);
+}