@ruixinkeji/prism-ui 1.0.14 → 1.0.16

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

@@ -0,0 +1,345 @@
+/**
+ * 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-code {
+  border-radius: 12rpx;
+  overflow: hidden;
+  margin: 10rpx auto;
+}
+
+/* 头部 */
+.code-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16rpx 20rpx;
+  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
+}
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+.code-expand {
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+.code-expand .fa {
+  font-size: 22rpx;
+}
+.code-expand:active {
+  opacity: 0.7;
+}
+.code-lang {
+  font-size: 22rpx;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+.code-copy {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 8rpx 16rpx;
+  border-radius: 8rpx;
+  transition: all 0.2s;
+}
+.code-copy:active {
+  opacity: 0.7;
+}
+.code-copy .fa {
+  font-size: 24rpx;
+}
+.code-copy .copy-text {
+  font-size: 22rpx;
+}
+
+/* 代码内容 */
+.code-body {
+  padding: 20rpx;
+  overflow-x: auto;
+  /* 自定义滚动条 - 默认隐藏，悬停显示 */
+}
+.code-body::-webkit-scrollbar {
+  height: 4px;
+  background: transparent;
+}
+.code-body::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 2px;
+}
+.code-body:hover::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.4);
+}
+.code-body::-webkit-scrollbar-thumb:hover {
+  background: rgba(128, 128, 128, 0.6);
+}
+.code-lines {
+  display: flex;
+  flex-direction: column;
+}
+.code-line {
+  display: flex;
+  line-height: 1.6;
+  font-family: "Courier New", Consolas, Monaco, monospace;
+  font-size: 24rpx;
+}
+
+/* 括号折叠按钮 */
+.fold-btn {
+  width: 28rpx;
+  height: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-right: 8rpx;
+  border-radius: 4rpx;
+}
+.fold-btn .fa {
+  font-size: 16rpx;
+}
+.fold-btn:active {
+  opacity: 0.7;
+}
+.fold-placeholder {
+  width: 28rpx;
+  margin-right: 8rpx;
+  flex-shrink: 0;
+}
+.line-number {
+  min-width: 48rpx;
+  padding-right: 16rpx;
+  text-align: right;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  opacity: 0.5;
+}
+.line-content {
+  flex: 1;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* 语法高亮颜色 */
+.hl-keyword {
+  color: #c586c0;
+}
+.hl-string {
+  color: #ce9178;
+}
+.hl-number {
+  color: #b5cea8;
+}
+.hl-comment {
+  color: #6a9955;
+}
+.hl-boolean {
+  color: #569cd6;
+}
+.hl-function {
+  color: #dcdcaa;
+}
+.hl-type {
+  color: #4ec9b0;
+}
+.hl-property {
+  color: #4fc1ff;
+}
+.hl-tag {
+  color: #569cd6;
+}
+.hl-attr {
+  color: #9cdcfe;
+}
+.hl-selector {
+  color: #d7ba7d;
+}
+.hl-color {
+  color: #ce9178;
+}
+.hl-decorator {
+  color: #dcdcaa;
+}
+.hl-operator {
+  color: #d4d4d4;
+}
+.hl-bracket {
+  color: #ffd700;
+}
+
+/* 深色主题（默认） */
+.prism-code.dark {
+  background: #1e1e1e;
+}
+.prism-code.dark .code-header {
+  background: #2d2d2d;
+  border-bottom: 1rpx solid #404040;
+}
+.prism-code.dark .code-lang {
+  color: #9cdcfe;
+}
+.prism-code.dark .code-copy {
+  color: #808080;
+  background: rgba(255, 255, 255, 0.05);
+}
+.prism-code.dark .code-copy:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+.prism-code.dark .line-number {
+  color: #858585;
+}
+.prism-code.dark .line-content {
+  color: #d4d4d4;
+}
+.prism-code.dark .code-expand .fa {
+  color: #808080;
+}
+.prism-code.dark .fold-btn {
+  color: #808080;
+  background: rgba(255, 255, 255, 0.05);
+}
+.prism-code.dark .fold-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* 浅色主题 */
+.prism-code.light {
+  background: #f5f5f5;
+  border: 1rpx solid #e0e0e0;
+}
+.prism-code.light .code-header {
+  background: #ebebeb;
+  border-bottom-color: #e0e0e0;
+}
+.prism-code.light .code-lang {
+  color: #666666;
+}
+.prism-code.light .code-copy {
+  color: #666666;
+  background: rgba(0, 0, 0, 0.05);
+}
+.prism-code.light .code-copy:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+.prism-code.light .line-number {
+  color: #999999;
+}
+.prism-code.light .line-content {
+  color: #333333;
+}
+.prism-code.light .code-expand .fa {
+  color: #666666;
+}
+.prism-code.light .fold-btn {
+  color: #666666;
+  background: rgba(0, 0, 0, 0.05);
+}
+.prism-code.light .fold-btn:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+.prism-code.light {
+  /* 浅色主题高亮颜色 */
+}
+.prism-code.light .hl-keyword {
+  color: #af00db;
+}
+.prism-code.light .hl-string {
+  color: #a31515;
+}
+.prism-code.light .hl-number {
+  color: #098658;
+}
+.prism-code.light .hl-comment {
+  color: #008000;
+}
+.prism-code.light .hl-boolean {
+  color: #0000ff;
+}
+.prism-code.light .hl-function {
+  color: #795e26;
+}
+.prism-code.light .hl-type {
+  color: #267f99;
+}
+.prism-code.light .hl-property {
+  color: #001080;
+}
+.prism-code.light .hl-tag {
+  color: #800000;
+}
+.prism-code.light .hl-attr {
+  color: #e50000;
+}
+.prism-code.light .hl-selector {
+  color: #800000;
+}
+.prism-code.light .hl-color {
+  color: #a31515;
+}
+.prism-code.light .hl-decorator {
+  color: #795e26;
+}
+.prism-code.light .hl-operator {
+  color: #000000;
+}
+.prism-code.light .hl-bracket {
+  color: #0431fa;
+}

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

@@ -0,0 +1,70 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const store_app = require("../../store/app.js");
+const _sfc_main = {
+  __name: "PrismCodeInput",
+  props: {
+    length: {
+      type: Number,
+      default: 6
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "complete"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const appStore = store_app.useAppStore();
+    const codeValue = common_vendor.ref(props.modelValue);
+    const isFocused = common_vendor.ref(false);
+    const codeLength = common_vendor.computed(() => props.length);
+    const codeArray = common_vendor.computed(() => {
+      return codeValue.value.split("").slice(0, props.length);
+    });
+    const focusIndex = common_vendor.computed(() => {
+      if (!isFocused.value) return -1;
+      return Math.min(codeArray.value.length, props.length - 1);
+    });
+    function handleFocus() {
+      isFocused.value = true;
+    }
+    function handleInput(e) {
+      const value = e.detail.value.replace(/\D/g, "").slice(0, props.length);
+      codeValue.value = value;
+      emit("update:modelValue", value);
+      if (value.length === props.length) {
+        emit("complete", value);
+      }
+    }
+    common_vendor.watch(() => props.modelValue, (val) => {
+      codeValue.value = val;
+    });
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.f(codeLength.value, (item, index, i0) => {
+          return common_vendor.e({
+            a: common_vendor.t(codeArray.value[index] || ""),
+            b: focusIndex.value === index && !codeArray.value[index]
+          }, focusIndex.value === index && !codeArray.value[index] ? {} : {}, {
+            c: index,
+            d: focusIndex.value === index ? 1 : "",
+            e: codeArray.value[index] ? 1 : "",
+            f: common_vendor.o(handleFocus, index)
+          });
+        }),
+        b: codeLength.value,
+        c: isFocused.value,
+        d: common_vendor.o([($event) => codeValue.value = $event.detail.value, handleInput]),
+        e: common_vendor.o(($event) => isFocused.value = true),
+        f: common_vendor.o(($event) => isFocused.value = false),
+        g: codeValue.value,
+        h: common_vendor.unref(appStore).isDarkMode ? 1 : ""
+      };
+    };
+  }
+};
+wx.createComponent(_sfc_main);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/components/PrismCodeInput/PrismCodeInput.js.map

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

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

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

@@ -0,0 +1 @@
+<view class="{{['prism-code-input', h && 'dark-mode']}}"><view class="code-boxes"><view wx:for="{{a}}" wx:for-item="item" wx:key="c" class="{{['code-box', item.d && 'active', item.e && 'filled']}}" bindtap="{{item.f}}"><text class="code-text">{{item.a}}</text><view wx:if="{{item.b}}" class="cursor"></view></view></view><input ref="hiddenInput" class="hidden-input" type="number" maxlength="{{b}}" focus="{{c}}" bindinput="{{d}}" bindfocus="{{e}}" bindblur="{{f}}" value="{{g}}"/></view>

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

@@ -0,0 +1,115 @@
+/**
+ * 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-code-input {
+  position: relative;
+}
+.prism-code-input .code-boxes {
+  display: flex;
+  gap: 16rpx;
+}
+.prism-code-input .code-box {
+  width: 76rpx;
+  height: 88rpx;
+  background: var(--prism-input-bg, #EBEEF2);
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  transition: all 0.2s ease;
+  border: 2rpx solid transparent;
+}
+.prism-code-input .code-box.active {
+  border-color: var(--prism-primary-color, #3478F6);
+  background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+}
+.prism-code-input .code-box.filled {
+  background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+}
+.prism-code-input .code-box .code-text {
+  font-size: 48rpx;
+  font-weight: 600;
+  color: var(--prism-text-primary, #1D2129);
+}
+.prism-code-input .code-box .cursor {
+  position: absolute;
+  width: 4rpx;
+  height: 40rpx;
+  background: var(--prism-primary-color, #3478F6);
+  animation: blink 1s infinite;
+}
+.prism-code-input .hidden-input {
+  position: absolute;
+  left: -9999rpx;
+  opacity: 0;
+  width: 1rpx;
+  height: 1rpx;
+}
+@keyframes blink {
+0%, 50% {
+    opacity: 1;
+}
+51%, 100% {
+    opacity: 0;
+}
+}
+.dark-mode .prism-code-input .code-box {
+  background: var(--prism-input-bg, #2A2A2A);
+}
+.dark-mode .prism-code-input .code-box.active {
+  background: rgba(52, 120, 246, 0.15);
+}
+.dark-mode .prism-code-input .code-box.filled {
+  background: rgba(52, 120, 246, 0.15);
+}
+.dark-mode .prism-code-input .code-box .code-text {
+  color: var(--prism-text-primary, #E5E6EB);
+}