@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/styles/form.scss

@@ -0,0 +1,1574 @@
+/**
+ * Prism UI - 表单组件样式
+ * 输入框、复选框、选项卡等
+ */
+
+/* ============================================================
+   输入框容器
+   ============================================================ */
+
+.prism-input-box {
+  display: flex;
+  align-items: center;
+  background: var(--prism-input-bg, #EBEEF2);
+  border-radius: 12rpx;
+  padding: 0 28rpx;
+  min-height: 88rpx;
+  transition: all 0.3s ease;
+
+  // 聚焦状态 - 浅色模式
+  &:focus-within {
+    background: var(--prism-primary-light, #E3EEFF);
+  }
+
+  // 前置图标
+  .prefix-icon {
+    margin-right: 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    .fa, .fa-solid {
+      font-size: 32rpx;
+      color: var(--prism-text-secondary, #86909C);
+    }
+  }
+
+  // 输入框
+  .input, input, textarea {
+    flex: 1;
+    font-size: 28rpx;
+    color: var(--prism-text-primary);
+    background: transparent !important;
+    border: none;
+    outline: none;
+  }
+
+  // 清空图标
+  .clear-icon {
+    padding: 16rpx 0 16rpx 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    .fa-circle-xmark {
+      font-size: 32rpx;
+      color: var(--prism-text-placeholder, #C9CDD4);
+    }
+  }
+
+  // 密码眼睛图标
+  .eye-icon {
+    padding: 16rpx 0 16rpx 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    .fa-solid, .fa {
+      font-size: 32rpx;
+      color: var(--prism-text-placeholder, #C9CDD4);
+    }
+  }
+
+  // 验证码按钮
+  .code-btn {
+    padding: 18rpx 0 18rpx 28rpx;
+    font-size: 28rpx;
+    color: var(--prism-primary-color, #3478F6);
+    white-space: nowrap;
+    font-weight: 500;
+    flex-shrink: 0;
+
+    &.disabled {
+      color: var(--prism-text-placeholder, #C9CDD4);
+    }
+  }
+
+  .dark-mode & {
+    background: var(--prism-input-bg, $prism-bg-color-input-dark);
+
+    // 深色模式聚焦效果 - 蓝色边框和发光
+    &:focus-within {
+      background: $prism-primary-alpha-12;
+      box-shadow: 0 0 0 2rpx $prism-primary-alpha-40, 0 4rpx 16rpx $prism-primary-alpha-15;
+    }
+
+    .clear-icon .fa-circle-xmark,
+    .eye-icon .fa-solid,
+    .eye-icon .fa {
+      color: var(--prism-text-placeholder, $prism-text-placeholder-dark);
+    }
+
+    .code-btn {
+      color: var(--prism-primary-color, $prism-primary-color-dark);
+
+      &.disabled {
+        color: var(--prism-text-placeholder, $prism-text-placeholder-dark);
+      }
+    }
+  }
+}
+
+/* ============================================================
+   表单项
+   ============================================================ */
+
+.prism-form-item {
+  margin-bottom: 32rpx;
+
+  .label,
+  text.label {
+    display: block !important;
+    font-size: 28rpx !important;
+    color: var(--prism-text-regular, #4E5969) !important;
+    margin-bottom: 16rpx !important;
+    font-weight: 500 !important;
+    line-height: 1.4 !important;
+  }
+
+  .dark-mode & {
+    .label,
+    text.label {
+      color: var(--prism-text-regular, #D4D6DB) !important;
+    }
+  }
+}
+
+/* ============================================================
+   复选框
+   ============================================================ */
+
+.prism-checkbox {
+  width: 40rpx;
+  height: 40rpx;
+  border: 2rpx solid var(--prism-border-color-base, $prism-border-color-base);
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.25s ease;
+  background: var(--prism-bg-color-card, #fff);
+
+  &.checked {
+    background: var(--prism-primary-color, $prism-primary-color);
+    border-color: var(--prism-primary-color, $prism-primary-color);
+  }
+
+  .check-icon {
+    color: #fff;
+    font-size: 24rpx;
+    font-weight: bold;
+  }
+
+  .dark-mode & {
+    border-color: $prism-primary-alpha-30;
+    background: $prism-primary-alpha-15;
+
+    &.checked {
+      background: $prism-primary-alpha-25;
+      border-color: $prism-primary-alpha-50;
+
+      .check-icon {
+        color: var(--prism-primary-color, $prism-primary-color-dark);
+      }
+    }
+  }
+}
+
+/* ============================================================
+   选项卡组件
+   ============================================================ */
+
+.prism-tabs {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 40rpx;
+  gap: 48rpx;
+
+  .tab-item {
+    padding: 8rpx 0;
+    font-size: 30rpx;
+    font-weight: 500;
+    color: var(--prism-text-secondary, $prism-text-secondary);
+    text-align: center;
+    position: relative;
+    transition: all 0.3s ease;
+
+    &.active {
+      color: var(--prism-text-primary, $prism-text-primary);
+      font-weight: 600;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 4rpx;
+        background: var(--prism-primary-color, $prism-primary-color);
+        border-radius: 2rpx;
+      }
+    }
+  }
+
+  .dark-mode & .tab-item {
+    color: var(--prism-text-secondary, $prism-text-secondary-dark);
+
+    &.active {
+      color: var(--prism-primary-color, $prism-primary-color-dark);
+
+      &::after {
+        background: var(--prism-primary-color, $prism-primary-color-dark);
+      }
+    }
+  }
+}
+
+/* ============================================================
+   胶囊标签
+   ============================================================ */
+
+.prism-capsule-tabs-scroll {
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.prism-capsule-tabs {
+  display: inline-flex;
+  align-items: center;
+  gap: 16rpx;
+  padding: 8rpx 0;
+}
+
+.prism-capsule-tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6rpx;
+  padding: 12rpx 18rpx;
+  font-size: 26rpx;
+  line-height: 1.4;
+  color: var(--prism-text-secondary, #86909C);
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 30rpx;
+  transition: all 0.2s ease;
+
+  &:active {
+    opacity: 0.8;
+    transform: scale(0.98);
+  }
+
+  &.active {
+    color: #ffffff;
+    background: var(--prism-primary-color, #3478F6);
+    box-shadow: 0 4rpx 12rpx rgba(52, 120, 246, 0.3);
+  }
+
+  .tab-count {
+    font-size: 24rpx;
+  }
+
+  .dark-mode & {
+    background: rgba(255, 255, 255, 0.06);
+    color: var(--prism-text-secondary, #86909C);
+
+    &.active {
+      background: var(--prism-primary-color, #3478F6);
+      color: #ffffff;
+    }
+  }
+}
+
+/* ============================================================
+   分割线
+   ============================================================ */
+
+.prism-divider {
+  display: flex;
+  align-items: center;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1rpx;
+    background: var(--prism-border-color-base, $prism-border-color-base);
+  }
+
+  .text {
+    padding: 0 32rpx;
+    font-size: 26rpx;
+    color: var(--prism-text-secondary, $prism-text-secondary);
+  }
+
+  .dark-mode & {
+    &::before,
+    &::after {
+      background: var(--prism-border-color-base, $prism-border-color-base-dark);
+    }
+
+    .text {
+      color: var(--prism-text-secondary, $prism-text-secondary-dark);
+    }
+  }
+}
+
+/* ============================================================
+   开关组件
+   ============================================================ */
+
+.prism-switch {
+  position: relative;
+  width: 100rpx;
+  height: 56rpx;
+  background: var(--prism-border-color-base, #E5E6EB);
+  border-radius: 28rpx;
+  transition: all 0.3s ease;
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 4rpx;
+    left: 4rpx;
+    width: 48rpx;
+    height: 48rpx;
+    background: #FFFFFF;
+    border-radius: 50%;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+  }
+
+  &.active {
+    background: var(--prism-primary-color, #3478F6);
+
+    &::after {
+      left: calc(100% - 52rpx);
+    }
+  }
+
+  // 方形开关
+  &.square {
+    border-radius: 12rpx;
+
+    &::after {
+      border-radius: 8rpx;
+    }
+  }
+
+  .dark-mode & {
+    // 关闭状态 - 灰色
+    background: rgba(255, 255, 255, 0.15);
+    border: 2rpx solid rgba(255, 255, 255, 0.2);
+
+    &::after {
+      background: rgba(255, 255, 255, 0.7);
+    }
+
+    // 开启状态 - 蓝色
+    &.active {
+      background: var(--prism-primary-color, #3478F6);
+      border-color: var(--prism-primary-color, #3478F6);
+
+      &::after {
+        background: #FFFFFF;
+      }
+    }
+  }
+}
+
+/* ============================================================
+   Textarea 文本域
+   ============================================================ */
+
+.prism-textarea {
+  width: 100%;
+  min-height: 200rpx;
+  padding: 24rpx 28rpx;
+  font-size: 28rpx;
+  color: var(--prism-text-primary, #1D2129);
+  background: var(--prism-input-bg, #EBEEF2);
+  border: none;
+  border-radius: 12rpx;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+  resize: none;
+
+  &::placeholder {
+    color: var(--prism-text-placeholder, #C9CDD4);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &--count {
+    padding-bottom: 48rpx;
+  }
+
+  .dark-mode & {
+    background: var(--prism-input-bg, #2A2A2A);
+    color: var(--prism-text-primary, #E5E6EB);
+  }
+}
+
+.prism-textarea-wrapper {
+  position: relative;
+  background: var(--prism-input-bg, #EBEEF2);
+  border-radius: 12rpx;
+  overflow: hidden;
+
+  .prism-textarea {
+    background: transparent;
+  }
+
+  .prism-textarea-count {
+    position: absolute;
+    right: 20rpx;
+    bottom: 16rpx;
+    font-size: 24rpx;
+    color: var(--prism-text-placeholder, #C9CDD4);
+  }
+
+  .dark-mode & {
+    background: var(--prism-input-bg, #2A2A2A);
+  }
+}
+
+/* ============================================================
+   Search 搜索框
+   ============================================================ */
+
+.prism-search {
+  display: flex;
+  align-items: center;
+  background: var(--prism-input-bg, #EBEEF2);
+  border-radius: 40rpx;
+  padding: 0 24rpx;
+  height: 72rpx;
+  transition: all 0.3s ease;
+
+  &__icon {
+    font-size: 28rpx;
+    color: var(--prism-text-placeholder, #C9CDD4);
+    margin-right: 16rpx;
+    flex-shrink: 0;
+  }
+
+  &__input {
+    flex: 1;
+    font-size: 28rpx;
+    color: var(--prism-text-primary, #1D2129);
+    background: transparent;
+    border: none;
+    outline: none;
+  }
+
+  &__clear {
+    font-size: 28rpx;
+    color: var(--prism-text-placeholder, #C9CDD4);
+    padding: 8rpx;
+    margin-left: 8rpx;
+    flex-shrink: 0;
+  }
+
+  &__action {
+    font-size: 28rpx;
+    color: var(--prism-primary-color, #3478F6);
+    margin-left: 16rpx;
+    flex-shrink: 0;
+  }
+
+  .dark-mode & {
+    background: var(--prism-input-bg, #2A2A2A);
+
+    &__input {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+  }
+}
+
+/* ============================================================
+   Radio 单选框
+   ============================================================ */
+
+.prism-radio {
+  width: 40rpx;
+  height: 40rpx;
+  border: 2rpx solid var(--prism-border-color-base, #E5E6EB);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.25s ease;
+  background: var(--prism-bg-color-card, #fff);
+
+  &.checked {
+    border-color: var(--prism-primary-color, #3478F6);
+
+    &::after {
+      content: '';
+      width: 20rpx;
+      height: 20rpx;
+      background: var(--prism-primary-color, #3478F6);
+      border-radius: 50%;
+    }
+  }
+
+  .dark-mode & {
+    border-color: rgba(52, 120, 246, 0.3);
+    background: rgba(52, 120, 246, 0.15);
+
+    &.checked {
+      border-color: rgba(52, 120, 246, 0.5);
+
+      &::after {
+        background: var(--prism-primary-color, #3478F6);
+      }
+    }
+  }
+}
+
+/* ============================================================
+   Picker 选择器触发器
+   ============================================================ */
+
+.prism-picker {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--prism-input-bg, #EBEEF2);
+  border-radius: 12rpx;
+  padding: 0 28rpx;
+  min-height: 88rpx;
+  transition: all 0.3s ease;
+
+  &__value {
+    flex: 1;
+    font-size: 28rpx;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  &__placeholder {
+    flex: 1;
+    font-size: 28rpx;
+    color: var(--prism-text-placeholder, #C9CDD4);
+  }
+
+  &__arrow {
+    font-size: 24rpx;
+    color: var(--prism-text-placeholder, #C9CDD4);
+    margin-left: 16rpx;
+  }
+
+  .dark-mode & {
+    background: var(--prism-input-bg, #2A2A2A);
+
+    &__value {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+  }
+}
+
+/* ============================================================
+   Stepper 步进器
+   ============================================================ */
+
+.prism-stepper {
+  display: inline-flex;
+  align-items: center;
+  background: var(--prism-input-bg, #EBEEF2);
+  border-radius: 8rpx;
+  overflow: hidden;
+
+  &__btn {
+    width: 56rpx;
+    height: 56rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    color: var(--prism-text-primary, #1D2129);
+    transition: all 0.2s ease;
+
+    &:active {
+      background: rgba(0, 0, 0, 0.05);
+    }
+
+    &--disabled {
+      color: var(--prism-text-placeholder, #C9CDD4);
+      pointer-events: none;
+    }
+  }
+
+  &__input {
+    width: 80rpx;
+    height: 56rpx;
+    text-align: center;
+    font-size: 28rpx;
+    color: var(--prism-text-primary, #1D2129);
+    background: transparent;
+    border: none;
+    border-left: 1rpx solid var(--prism-border-color-light, #F2F3F5);
+    border-right: 1rpx solid var(--prism-border-color-light, #F2F3F5);
+  }
+
+  .dark-mode & {
+    background: var(--prism-input-bg, #2A2A2A);
+
+    &__btn {
+      color: var(--prism-text-primary, #E5E6EB);
+
+      &:active {
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+
+    &__input {
+      color: var(--prism-text-primary, #E5E6EB);
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+
+/* ============================================================
+   Rate 评分
+   ============================================================ */
+
+.prism-rate {
+  display: inline-flex;
+  align-items: center;
+  gap: 8rpx;
+
+  &__item {
+    font-size: 40rpx;
+    color: var(--prism-border-color-base, #E5E6EB);
+    transition: all 0.2s ease;
+
+    &--active {
+      color: #FADB14;
+    }
+
+    &--half {
+      position: relative;
+
+      &::before {
+        content: '\f005';
+        font-family: 'Font Awesome 6 Free';
+        font-weight: 900;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 50%;
+        overflow: hidden;
+        color: #FADB14;
+      }
+    }
+  }
+
+  &--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .dark-mode & {
+    &__item {
+      color: rgba(255, 255, 255, 0.2);
+    }
+  }
+}
+
+/* ============================================================
+   语音输入图标
+   ============================================================ */
+
+.prism-voice-icon {
+  padding: 16rpx 0 16rpx 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  .fa, .fa-solid {
+    font-size: 32rpx;
+    color: var(--prism-primary-color, #3478F6);
+  }
+
+  &:active {
+    opacity: 0.6;
+  }
+
+  .dark-mode & {
+    .fa, .fa-solid {
+      color: var(--prism-primary-color, #3478F6);
+    }
+  }
+}
+
+/* ============================================================
+   选择框样式
+   ============================================================ */
+
+.prism-select-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--prism-input-bg, #EBEEF2);
+  border-radius: 12rpx;
+  padding: 0 28rpx;
+  min-height: 88rpx;
+  transition: all 0.3s ease;
+
+  .placeholder {
+    color: var(--prism-text-placeholder, #C9CDD4);
+  }
+
+  .select-text {
+    flex: 1;
+    font-size: 28rpx;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  .select-arrow {
+    font-size: 28rpx;
+    color: var(--prism-text-placeholder, #C9CDD4);
+    flex-shrink: 0;
+    margin-left: 16rpx;
+  }
+
+  .dark-mode & {
+    background: var(--prism-input-bg, #2A2A2A);
+
+    .select-text {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+  }
+}
+
+/* ============================================================
+   地址输入
+   ============================================================ */
+
+.prism-address-wrapper {
+  display: flex;
+  align-items: center;
+  min-height: 88rpx;
+  background: var(--prism-input-bg, #EBEEF2);
+  border-radius: 12rpx;
+  padding: 0 28rpx;
+
+  .prism-input-box {
+    flex: 1;
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+    min-height: auto;
+  }
+
+  .location-btn {
+    padding: 8rpx 0 8rpx 16rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    .fa, .fa-solid {
+      font-size: 32rpx;
+      color: var(--prism-primary-color, #3478F6);
+    }
+
+    &:active {
+      opacity: 0.6;
+    }
+  }
+
+  .dark-mode & {
+    background: var(--prism-input-bg, #2A2A2A);
+  }
+}
+
+/* 地图容器 */
+.prism-map-container {
+  margin-top: 16rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+  position: relative;
+  height: 300rpx;
+}
+
+.prism-location-map {
+  width: 100%;
+  height: 100%;
+  border-radius: 16rpx;
+  display: block;
+}
+
+.prism-relocate-tip {
+  position: absolute;
+  bottom: 16rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10rpx 24rpx;
+  font-size: 24rpx;
+  color: #fff;
+  background-color: rgba(52, 120, 246, 0.9);
+  border-radius: 20rpx;
+  text-align: center;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+}
+
+.dark-mode .prism-map-container {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+/* ============================================================
+   标签选择器
+   ============================================================ */
+
+.prism-tag-selector {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+
+.prism-tag-option {
+  padding: 16rpx 32rpx;
+  background: var(--prism-bg-color, #F7F8FA);
+  border: 1rpx solid var(--prism-border-color-light, #EBEEF2);
+  border-radius: 32rpx;
+  font-size: 26rpx;
+  color: var(--prism-text-secondary, #86909C);
+  transition: all 0.2s ease;
+
+  &.active {
+    background: rgba(52, 120, 246, 0.1);
+    border-color: var(--prism-primary-color, #3478F6);
+    color: var(--prism-primary-color, #3478F6);
+  }
+
+  &:active {
+    opacity: 0.8;
+  }
+
+  // 方形圆角标签
+  &.square {
+    border-radius: 8rpx;
+  }
+
+  .dark-mode & {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, 0.1);
+
+    &.active {
+      background: rgba(52, 120, 246, 0.2);
+    }
+  }
+}
+
+/* ============================================================
+   图片上传
+   ============================================================ */
+
+.prism-image-upload-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16rpx;
+}
+
+.prism-image-item {
+  position: relative;
+  width: 100%;
+  padding-bottom: 100%;
+  background: var(--prism-input-bg, #EBEEF2);
+  border-radius: 12rpx;
+  overflow: hidden;
+
+  &.has-image {
+    background: transparent;
+  }
+}
+
+.prism-image-preview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.prism-image-remove {
+  position: absolute;
+  top: 8rpx;
+  right: 8rpx;
+  width: 40rpx;
+  height: 40rpx;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .fa {
+    font-size: 24rpx;
+    color: #FFFFFF;
+  }
+}
+
+.prism-image-main-badge {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  padding: 4rpx 12rpx;
+  background: var(--prism-primary-color, #3478F6);
+  color: #FFFFFF;
+  font-size: 20rpx;
+  border-radius: 0 8rpx 0 0;
+}
+
+.prism-image-upload-btn {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+
+  .fa {
+    font-size: 48rpx;
+    color: var(--prism-text-placeholder, #C9CDD4);
+  }
+
+  text:last-child {
+    font-size: 24rpx;
+    color: var(--prism-text-placeholder, #C9CDD4);
+  }
+}
+
+.prism-upload-tip {
+  font-size: 24rpx;
+  color: var(--prism-text-secondary, #86909C);
+  margin-top: 16rpx;
+}
+
+/* 头像上传 */
+.prism-avatar-upload {
+  position: relative;
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 50%;
+  overflow: visible;
+}
+
+.prism-avatar-preview {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.prism-avatar-placeholder {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: var(--prism-input-bg, #EBEEF2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .fa {
+    font-size: 64rpx;
+    color: var(--prism-text-placeholder, #C9CDD4);
+  }
+
+  .dark-mode & {
+    background: var(--prism-input-bg, #2A2A2A);
+  }
+}
+
+.prism-avatar-edit {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 48rpx;
+  height: 48rpx;
+  background: var(--prism-primary-color, #3478F6);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 4rpx solid var(--prism-bg-color-card, #FFFFFF);
+
+  .fa {
+    font-size: 24rpx;
+    color: #FFFFFF;
+  }
+
+  .dark-mode & {
+    border-color: var(--prism-bg-color-card, #1A1A1A);
+  }
+}
+
+/* ============================================================
+   Slider 滑块
+   ============================================================ */
+
+.prism-slider-wrapper {
+  padding: 16rpx 0;
+}
+
+.prism-slider-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8rpx;
+
+  .value-text {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: var(--prism-primary-color, #3478F6);
+  }
+}
+
+/* ============================================================
+   Textarea 带工具栏
+   ============================================================ */
+
+.prism-textarea-tools-wrapper {
+  position: relative;
+  background: var(--prism-input-bg, #EBEEF2);
+  border-radius: 12rpx;
+  overflow: hidden;
+
+  .prism-textarea {
+    padding-bottom: 80rpx;
+    background: transparent;
+  }
+
+  .dark-mode & {
+    background: var(--prism-input-bg, #2A2A2A);
+  }
+}
+
+.prism-textarea-tools {
+  position: absolute;
+  bottom: 12rpx;
+  left: 24rpx;
+  right: 24rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 10;
+}
+
+.prism-textarea-tools-right {
+  display: flex;
+  gap: 16rpx;
+}
+
+.prism-tool-icon-btn {
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  border: 1rpx solid var(--prism-border-color-light, #E2E8F0);
+  background: var(--prism-bg-color-card, #FFFFFF);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--prism-text-secondary, #86909C);
+  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+
+  .fa, .fa-solid {
+    font-size: 28rpx;
+  }
+
+  &:active {
+    background: var(--prism-bg-color, #F8F9FA);
+    border-color: var(--prism-primary-color, #3478F6);
+    color: var(--prism-primary-color, #3478F6);
+  }
+
+  .dark-mode & {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.15);
+    color: var(--prism-text-secondary, #86909C);
+  }
+}
+
+/* AI 辅助按钮 */
+.prism-ai-assist-btn {
+  height: 64rpx;
+  padding: 0 4rpx;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  gap: 12rpx;
+  font-size: 30rpx;
+  font-weight: 700;
+  margin-top: 16rpx;
+
+  .fa, .fa-solid {
+    font-size: 36rpx;
+    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 25%, #c44569 50%, #764ba2 75%, #667eea 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  text:last-child {
+    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 25%, #c44569 50%, #764ba2 75%, #667eea 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  &:active {
+    opacity: 0.8;
+  }
+}
+
+/* ============================================================
+   分格输入框（验证码/密码）
+   ============================================================ */
+
+// 公共分格输入框样式
+.prism-box-input {
+  display: flex;
+  justify-content: center;
+  gap: 16rpx;
+}
+
+.prism-box-item {
+  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: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+  }
+
+  &.filled {
+    background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+  }
+
+  .dark-mode & {
+    background: var(--prism-input-bg, #2A2A2A);
+
+    &.active {
+      background: rgba(52, 120, 246, 0.15);
+    }
+
+    &.filled {
+      background: rgba(52, 120, 246, 0.15);
+    }
+  }
+}
+
+// 闪烁光标
+.prism-input-cursor {
+  width: 4rpx;
+  height: 40rpx;
+  background: var(--prism-primary-color, #3478F6);
+  animation: prism-cursor-blink 1s infinite;
+}
+
+@keyframes prism-cursor-blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+// 密码点
+.prism-password-dot {
+  width: 24rpx;
+  height: 24rpx;
+  background: var(--prism-text-primary, #1D2129);
+  border-radius: 50%;
+
+  .dark-mode & {
+    background: var(--prism-text-primary, #E5E6EB);
+  }
+}
+
+// 验证码文字
+.prism-code-text {
+  font-size: 48rpx;
+  font-weight: 600;
+  color: var(--prism-text-primary, #1D2129);
+
+  .dark-mode & {
+    color: var(--prism-text-primary, #E5E6EB);
+  }
+}
+
+/* ============================================================
+   自定义数字键盘
+   ============================================================ */
+
+.prism-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;
+}
+
+.prism-keyboard-content {
+  width: 100%;
+  background: var(--prism-bg-color, #F7F8FA);
+  border-radius: 24rpx 24rpx 0 0;
+  padding-bottom: env(safe-area-inset-bottom);
+
+  .dark-mode & {
+    background: var(--prism-bg-color, #1A1A1A);
+  }
+}
+
+.prism-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;
+  }
+
+  .dark-mode & {
+    background: var(--prism-bg-color-card, #242424);
+
+    .keyboard-title {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+  }
+}
+
+.prism-keyboard-grid {
+  padding: 16rpx;
+}
+
+.prism-keyboard-row {
+  display: flex;
+  gap: 12rpx;
+  margin-bottom: 12rpx;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.prism-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);
+
+  .key-text {
+    font-size: 44rpx;
+    font-weight: 500;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  &:active {
+    background: var(--prism-primary-color, #3478F6);
+    transform: scale(0.98);
+
+    .key-text {
+      color: #FFFFFF;
+    }
+  }
+
+  &--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);
+
+    .key-text {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: var(--prism-danger-color, #F53F3F);
+    }
+  }
+
+  .dark-mode & {
+    background: var(--prism-bg-color-card, #242424);
+
+    .key-text {
+      color: var(--prism-text-primary, #E5E6EB);
+    }
+
+    &--func, &--delete {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+
+/* ============================================================
+   语音输入弹窗
+   ============================================================ */
+
+.voice-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--prism-mask-bg, rgba(0, 0, 0, 0.5));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.voice-content {
+  width: 560rpx;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  border-radius: 24rpx;
+  padding: 40rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .dark-mode & {
+    background: var(--prism-bg-color-card, #1A1A1A);
+  }
+}
+
+.voice-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: var(--prism-text-primary, #1D2129);
+  margin-bottom: 40rpx;
+
+  .dark-mode & {
+    color: var(--prism-text-primary, #E5E6EB);
+  }
+}
+
+.voice-wave {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+  height: 100rpx;
+  margin-bottom: 24rpx;
+
+  .wave-bar {
+    width: 8rpx;
+    height: 20rpx;
+    background: var(--prism-text-placeholder, #C9CDD4);
+    border-radius: 4rpx;
+    transition: all 0.3s;
+  }
+
+  &.recording .wave-bar {
+    background: var(--prism-primary-color, #3478F6);
+    animation: voice-wave 0.5s ease-in-out infinite alternate;
+  }
+
+  &.recording .wave-bar:nth-child(1) { animation-delay: 0s; }
+  &.recording .wave-bar:nth-child(2) { animation-delay: 0.1s; }
+  &.recording .wave-bar:nth-child(3) { animation-delay: 0.2s; }
+  &.recording .wave-bar:nth-child(4) { animation-delay: 0.3s; }
+  &.recording .wave-bar:nth-child(5) { animation-delay: 0.4s; }
+}
+
+@keyframes voice-wave {
+  0% { height: 20rpx; }
+  100% { height: 80rpx; }
+}
+
+.voice-time {
+  font-size: 48rpx;
+  font-weight: 600;
+  color: var(--prism-text-primary, #1D2129);
+  margin-bottom: 16rpx;
+
+  .dark-mode & {
+    color: var(--prism-text-primary, #E5E6EB);
+  }
+}
+
+.voice-tip {
+  font-size: 26rpx;
+  color: var(--prism-text-secondary, #86909C);
+  margin-bottom: 40rpx;
+}
+
+.voice-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.voice-cancel-btn,
+.voice-confirm-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8rpx;
+  color: var(--prism-text-secondary, #86909C);
+
+  .fa {
+    width: 64rpx;
+    height: 64rpx;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+  }
+
+  text:last-child {
+    font-size: 24rpx;
+  }
+
+  &:active {
+    opacity: 0.7;
+  }
+}
+
+.voice-cancel-btn .fa {
+  color: var(--prism-danger-color, #F53F3F);
+  background: rgba(245, 63, 63, 0.15);
+}
+
+.voice-confirm-btn {
+  color: var(--prism-success-color, #00B42A);
+
+  .fa {
+    background: rgba(0, 180, 42, 0.15);
+    color: #00B42A;
+  }
+
+  &.disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}
+
+.voice-record-btn {
+  width: 120rpx;
+  height: 120rpx;
+  background: var(--prism-primary-color, #3478F6);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+
+  .fa {
+    font-size: 48rpx;
+    color: #FFFFFF;
+  }
+
+  &:active,
+  &.recording {
+    transform: scale(1.1);
+    background: #2563EB;
+    box-shadow: 0 0 0 16rpx rgba(52, 120, 246, 0.2);
+  }
+}
+
+.dark-mode .voice-cancel-btn .fa,
+.dark-mode .voice-confirm-btn .fa {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* 头像选择器 */
+.prism-avatar-selector {
+  display: flex;
+  align-items: flex-start;
+  gap: 24rpx;
+}
+
+.prism-default-avatars {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16rpx;
+  flex: 1;
+}
+
+.prism-default-avatar-item {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 3rpx solid var(--prism-border-color-light, #E5E6EB);
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  image {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.active {
+    border-color: var(--prism-primary-color, #3478F6);
+    box-shadow: 0 0 0 4rpx rgba(52, 120, 246, 0.2);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+}
+
+.dark-mode .prism-default-avatar-item {
+  border-color: var(--prism-border-color-base, #3A3A3A);
+
+  &.active {
+    border-color: var(--prism-primary-color, #3478F6);
+  }
+}
+