@ruixinkeji/prism-ui 1.0.0 → 1.0.2

package/components/PrismSecureInput/PrismSecureInput.vue

@@ -1,360 +1,360 @@
-<template>
-  <view class="prism-secure-input" :class="{ 'dark-mode': appStore.isDarkMode }">
-    <!-- 密码输入框 -->
-    <view class="password-boxes" @click="showKeyboardModal">
-      <view
-        v-for="i in length"
-        :key="i"
-        class="password-box"
-        :class="{ 'active': isFocused && passwordArray.length === i - 1, 'filled': passwordArray[i - 1] }"
-      >
-        <view class="password-dot" v-if="passwordArray[i - 1]"></view>
-        <view class="cursor" v-if="isFocused && passwordArray.length === i - 1"></view>
-      </view>
-    </view>
-
-    <!-- 自定义数字键盘 -->
-    <view class="keyboard-modal" v-if="showKeyboard" @click="hideKeyboard">
-      <view class="keyboard-content" @click.stop>
-        <view class="keyboard-header">
-          <text class="keyboard-title">{{ title }}</text>
-          <text class="keyboard-done" @click="hideKeyboard">完成</text>
-        </view>
-
-        <!-- 数字键盘 -->
-        <view class="number-keyboard" :class="{ 'random': randomOrder }">
-          <view class="keyboard-row">
-            <view class="key-btn" v-for="n in displayNumbers.slice(0, 3)" :key="n" @click="inputNumber(n)">
-              <text class="key-text">{{ n }}</text>
-            </view>
-          </view>
-          <view class="keyboard-row">
-            <view class="key-btn" v-for="n in displayNumbers.slice(3, 6)" :key="n" @click="inputNumber(n)">
-              <text class="key-text">{{ n }}</text>
-            </view>
-          </view>
-          <view class="keyboard-row">
-            <view class="key-btn" v-for="n in displayNumbers.slice(6, 9)" :key="n" @click="inputNumber(n)">
-              <text class="key-text">{{ n }}</text>
-            </view>
-          </view>
-          <view class="keyboard-row">
-            <view class="key-btn func" @click="clearAll">
-              <text class="key-text">清空</text>
-            </view>
-            <view class="key-btn" @click="inputNumber(displayNumbers[9])">
-              <text class="key-text">{{ displayNumbers[9] }}</text>
-            </view>
-            <view class="key-btn delete" @click="deleteNumber">
-              <text class="delete-text">删除</text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup>
-import { ref, computed, watch, onMounted } from 'vue';
-import { useAppStore } from '@/store/app';
-
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: ''
-  },
-  length: {
-    type: Number,
-    default: 6
-  },
-  title: {
-    type: String,
-    default: '请输入密码'
-  },
-  randomOrder: {
-    type: Boolean,
-    default: false
-  }
-});
-
-const emit = defineEmits(['update:modelValue', 'complete']);
-
-const appStore = useAppStore();
-const passwordValue = ref(props.modelValue);
-const isFocused = ref(false);
-const showKeyboard = ref(false);
-
-// 数字顺序（可随机）
-const displayNumbers = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']);
-
-const passwordArray = computed(() => {
-  return passwordValue.value.split('').slice(0, props.length);
-});
-
-// 打乱数字顺序
-function shuffleNumbers() {
-  if (props.randomOrder) {
-    const arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
-    for (let i = arr.length - 1; i > 0; i--) {
-      const j = Math.floor(Math.random() * (i + 1));
-      [arr[i], arr[j]] = [arr[j], arr[i]];
-    }
-    displayNumbers.value = arr;
-  }
-}
-
-function showKeyboardModal() {
-  isFocused.value = true;
-  showKeyboard.value = true;
-  if (props.randomOrder) {
-    shuffleNumbers();
-  }
-}
-
-function hideKeyboard() {
-  isFocused.value = false;
-  showKeyboard.value = false;
-}
-
-function inputNumber(n) {
-  if (passwordValue.value.length >= props.length) return;
-
-  passwordValue.value += n;
-  emit('update:modelValue', passwordValue.value);
-
-  if (passwordValue.value.length === props.length) {
-    emit('complete', passwordValue.value);
-    setTimeout(() => {
-      hideKeyboard();
-    }, 200);
-  }
-}
-
-function deleteNumber() {
-  if (passwordValue.value.length > 0) {
-    passwordValue.value = passwordValue.value.slice(0, -1);
-    emit('update:modelValue', passwordValue.value);
-  }
-}
-
-function clearAll() {
-  passwordValue.value = '';
-  emit('update:modelValue', '');
-}
-
-watch(() => props.modelValue, (val) => {
-  passwordValue.value = val;
-});
-
-onMounted(() => {
-  if (props.randomOrder) {
-    shuffleNumbers();
-  }
-});
-</script>
-
-<style lang="scss">
-// 白色常量（用于按钮文字等固定白色场景）
-$color-white: #FFFFFF;
-
-.prism-secure-input {
-  .password-boxes {
-    display: flex;
-    justify-content: center;
-    gap: 16rpx;
-  }
-
-  .password-box {
-    width: 76rpx;
-    height: 88rpx;
-    background: var(--prism-input-bg, #EBEEF2);
-    border-radius: 12rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2rpx solid transparent;
-    transition: all 0.2s ease;
-    position: relative;
-
-    &.active {
-      border-color: var(--prism-primary-color, #3478F6);
-      background: rgba(52, 120, 246, 0.08);
-    }
-
-    &.filled {
-      background: rgba(52, 120, 246, 0.08);
-    }
-
-    .password-dot {
-      width: 24rpx;
-      height: 24rpx;
-      background: var(--prism-text-primary, #1D2129);
-      border-radius: 50%;
-    }
-
-    .cursor {
-      width: 4rpx;
-      height: 40rpx;
-      background: var(--prism-primary-color, #3478F6);
-      animation: blink 1s infinite;
-    }
-  }
-
-  .keyboard-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--prism-mask-bg, rgba(0, 0, 0, 0.5));
-    z-index: 9999;
-    display: flex;
-    align-items: flex-end;
-  }
-
-  .keyboard-content {
-    width: 100%;
-    background: var(--prism-bg-color, #F7F8FA);
-    border-radius: 24rpx 24rpx 0 0;
-    padding-bottom: env(safe-area-inset-bottom);
-  }
-
-  .keyboard-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 24rpx 32rpx;
-    background: var(--prism-bg-color-card, #FFFFFF);
-    border-radius: 24rpx 24rpx 0 0;
-
-    .keyboard-title {
-      font-size: 32rpx;
-      font-weight: 600;
-      color: var(--prism-text-primary, #1D2129);
-    }
-
-    .keyboard-done {
-      font-size: 30rpx;
-      color: var(--prism-primary-color, #3478F6);
-      font-weight: 500;
-    }
-  }
-
-  .number-keyboard {
-    padding: 16rpx;
-  }
-
-  .keyboard-row {
-    display: flex;
-    gap: 12rpx;
-    margin-bottom: 12rpx;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .key-btn {
-    flex: 1;
-    height: 100rpx;
-    background: var(--prism-bg-color-card, #FFFFFF);
-    border-radius: 12rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.15s ease;
-    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
-
-    &:active {
-      background: var(--prism-primary-color, #3478F6);
-      transform: scale(0.98);
-
-      .key-text, .fa {
-        color: $color-white;
-      }
-    }
-
-    .key-text {
-      font-size: 44rpx;
-      font-weight: 500;
-      color: var(--prism-text-primary, #1D2129);
-    }
-
-    .fa {
-      font-size: 40rpx;
-      color: var(--prism-text-primary, #1D2129);
-    }
-
-    &.func {
-      background: var(--prism-bg-color, #E8E8E8);
-
-      .key-text {
-        font-size: 28rpx;
-        color: var(--prism-text-secondary, #86909C);
-      }
-    }
-
-    &.delete {
-      background: var(--prism-bg-color, #E8E8E8);
-
-      .delete-text {
-        font-size: 28rpx;
-        font-weight: 500;
-        color: var(--prism-danger-color, #F53F3F);
-      }
-    }
-  }
-
-  @keyframes blink {
-    0%, 50% { opacity: 1; }
-    51%, 100% { opacity: 0; }
-  }
-}
-
-.dark-mode .prism-secure-input {
-  .password-box {
-    background: var(--prism-input-bg, #2A2A2A);
-
-    &.active {
-      background: rgba(52, 120, 246, 0.15);
-    }
-
-    &.filled {
-      background: rgba(52, 120, 246, 0.15);
-    }
-
-    .password-dot {
-      background: var(--prism-text-primary, #E5E6EB);
-    }
-  }
-
-  .keyboard-content {
-    background: var(--prism-bg-color, #1A1A1A);
-  }
-
-  .keyboard-header {
-    background: var(--prism-bg-color-card, #242424);
-
-    .keyboard-title {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-  }
-
-  .key-btn {
-    background: var(--prism-bg-color-card, #242424);
-
-    .key-text {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-
-    .fa {
-      color: var(--prism-text-primary, #E5E6EB);
-    }
-
-    &.func, &.delete {
-      background: rgba(255, 255, 255, 0.1);
-    }
-  }
-}
-</style>
+<template>
+  <view class="prism-secure-input" :class="{ 'dark-mode': appStore.isDarkMode }">
+    <!-- 密码输入框 -->
+    <view class="password-boxes" @click="showKeyboardModal">
+      <view
+        v-for="i in length"
+        :key="i"
+        class="password-box"
+        :class="{ 'active': isFocused && passwordArray.length === i - 1, 'filled': passwordArray[i - 1] }"
+      >
+        <view class="password-dot" v-if="passwordArray[i - 1]"></view>
+        <view class="cursor" v-if="isFocused && passwordArray.length === i - 1"></view>
+      </view>
+    </view>
+
+    <!-- 自定义数字键盘 -->
+    <view class="keyboard-modal" v-if="showKeyboard" @click="hideKeyboard">
+      <view class="keyboard-content" @click.stop>
+        <view class="keyboard-header">
+          <text class="keyboard-title">{{ title }}</text>
+          <text class="keyboard-done" @click="hideKeyboard">完成</text>
+        </view>
+
+        <!-- 数字键盘 -->
+        <view class="number-keyboard" :class="{ 'random': randomOrder }">
+          <view class="keyboard-row">
+            <view class="key-btn" v-for="n in displayNumbers.slice(0, 3)" :key="n" @click="inputNumber(n)">
+              <text class="key-text">{{ n }}</text>
+            </view>
+          </view>
+          <view class="keyboard-row">
+            <view class="key-btn" v-for="n in displayNumbers.slice(3, 6)" :key="n" @click="inputNumber(n)">
+              <text class="key-text">{{ n }}</text>
+            </view>
+          </view>
+          <view class="keyboard-row">
+            <view class="key-btn" v-for="n in displayNumbers.slice(6, 9)" :key="n" @click="inputNumber(n)">
+              <text class="key-text">{{ n }}</text>
+            </view>
+          </view>
+          <view class="keyboard-row">
+            <view class="key-btn func" @click="clearAll">
+              <text class="key-text">清空</text>
+            </view>
+            <view class="key-btn" @click="inputNumber(displayNumbers[9])">
+              <text class="key-text">{{ displayNumbers[9] }}</text>
+            </view>
+            <view class="key-btn delete" @click="deleteNumber">
+              <text class="delete-text">删除</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import { useAppStore } from '@/store/app';
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  length: {
+    type: Number,
+    default: 6
+  },
+  title: {
+    type: String,
+    default: '请输入密码'
+  },
+  randomOrder: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'complete']);
+
+const appStore = useAppStore();
+const passwordValue = ref(props.modelValue);
+const isFocused = ref(false);
+const showKeyboard = ref(false);
+
+// 数字顺序（可随机）
+const displayNumbers = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']);
+
+const passwordArray = computed(() => {
+  return passwordValue.value.split('').slice(0, props.length);
+});
+
+// 打乱数字顺序
+function shuffleNumbers() {
+  if (props.randomOrder) {
+    const arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+    for (let i = arr.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [arr[i], arr[j]] = [arr[j], arr[i]];
+    }
+    displayNumbers.value = arr;
+  }
+}
+
+function showKeyboardModal() {
+  isFocused.value = true;
+  showKeyboard.value = true;
+  if (props.randomOrder) {
+    shuffleNumbers();
+  }
+}
+
+function hideKeyboard() {
+  isFocused.value = false;
+  showKeyboard.value = false;
+}
+
+function inputNumber(n) {
+  if (passwordValue.value.length >= props.length) return;
+
+  passwordValue.value += n;
+  emit('update:modelValue', passwordValue.value);
+
+  if (passwordValue.value.length === props.length) {
+    emit('complete', passwordValue.value);
+    setTimeout(() => {
+      hideKeyboard();
+    }, 200);
+  }
+}
+
+function deleteNumber() {
+  if (passwordValue.value.length > 0) {
+    passwordValue.value = passwordValue.value.slice(0, -1);
+    emit('update:modelValue', passwordValue.value);
+  }
+}
+
+function clearAll() {
+  passwordValue.value = '';
+  emit('update:modelValue', '');
+}
+
+watch(() => props.modelValue, (val) => {
+  passwordValue.value = val;
+});
+
+onMounted(() => {
+  if (props.randomOrder) {
+    shuffleNumbers();
+  }
+});
+</script>
+
+<style lang="scss">
+// 白色常量（用于按钮文字等固定白色场景）
+$color-white: #FFFFFF;
+
+.prism-secure-input {
+  .password-boxes {
+    display: flex;
+    justify-content: center;
+    gap: 16rpx;
+  }
+
+  .password-box {
+    width: 76rpx;
+    height: 88rpx;
+    background: var(--prism-input-bg, #EBEEF2);
+    border-radius: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2rpx solid transparent;
+    transition: all 0.2s ease;
+    position: relative;
+
+    &.active {
+      border-color: var(--prism-primary-color, #3478F6);
+      background: rgba(52, 120, 246, 0.08);
+    }
+
+    &.filled {
+      background: rgba(52, 120, 246, 0.08);
+    }
+
+    .password-dot {
+      width: 24rpx;
+      height: 24rpx;
+      background: var(--prism-text-primary, #1D2129);
+      border-radius: 50%;
+    }
+
+    .cursor {
+      width: 4rpx;
+      height: 40rpx;
+      background: var(--prism-primary-color, #3478F6);
+      animation: blink 1s infinite;
+    }
+  }
+
+  .keyboard-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--prism-mask-bg, rgba(0, 0, 0, 0.5));
+    z-index: 9999;
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .keyboard-content {
+    width: 100%;
+    background: var(--prism-bg-color, #F7F8FA);
+    border-radius: 24rpx 24rpx 0 0;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .keyboard-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 24rpx 32rpx;
+    background: var(--prism-bg-color-card, #FFFFFF);
+    border-radius: 24rpx 24rpx 0 0;
+
+    .keyboard-title {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: var(--prism-text-primary, #1D2129);
+    }
+
+    .keyboard-done {
+      font-size: 30rpx;
+      color: var(--prism-primary-color, #3478F6);
+      font-weight: 500;
+    }
+  }
+
+  .number-keyboard {
+    padding: 16rpx;
+  }
+
+  .keyboard-row {
+    display: flex;
+    gap: 12rpx;
+    margin-bottom: 12rpx;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .key-btn {
+    flex: 1;
+    height: 100rpx;
+    background: var(--prism-bg-color-card, #FFFFFF);
+    border-radius: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
+    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
+
+    &:active {
+      background: var(--prism-primary-color, #3478F6);
+      transform: scale(0.98);
+
+      .key-text, .fa {
+        color: $color-white;
+      }
+    }
+
+    .key-text {
+      font-size: 44rpx;
+      font-weight: 500;
+      color: var(--prism-text-primary, #1D2129);
+    }
+
+    .fa {
+      font-size: 40rpx;
+      color: var(--prism-text-primary, #1D2129);
+    }
+
+    &.func {
+      background: var(--prism-bg-color, #E8E8E8);
+
+      .key-text {
+        font-size: 28rpx;
+        color: var(--prism-text-secondary, #86909C);
+      }
+    }
+
+    &.delete {
+      background: var(--prism-bg-color, #E8E8E8);
+
+      .delete-text {
+        font-size: 28rpx;
+        font-weight: 500;
+        color: var(--prism-danger-color, #F53F3F);
+      }
+    }
+  }
+
+  @keyframes blink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+  }
+}
+
+.dark-mode .prism-secure-input {
+  .password-box {
+    background: var(--prism-input-bg, #2A2A2A);
+
+    &.active {
+      background: rgba(52, 120, 246, 0.15);
+    }
+
+    &.filled {
+      background: rgba(52, 120, 246, 0.15);
+    }
+
+    .password-dot {
+      background: var(--prism-text-primary, #E5E6EB);
+    }
+  }
+
+  .keyboard-content {
+    background: var(--prism-bg-color, #1A1A1A);
+  }
+
+  .keyboard-header {
+    background: var(--prism-bg-color-card, #242424);
+
+    .keyboard-title {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+  }
+
+  .key-btn {
+    background: var(--prism-bg-color-card, #242424);
+
+    .key-text {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+
+    .fa {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+
+    &.func, &.delete {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+</style>