@ruixinkeji/prism-ui 1.0.16 → 1.0.17

package/dist/styles/form.scss

@@ -1,1574 +0,0 @@
-/**
- * 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);
-  }
-}
-