refactor(plan): 用 Tailwind CSS 重构 AmountKeyboard 样式

- 删除 80+ 行自定义 Less 样式代码 - 使用 Tailwind CSS 工具类实现现代化 UI - 添加磨砂玻璃效果和动态流光背景 - 优化布局层次和视觉层次 - 改进光标动画效果 - 统一使用项目样式规范（Tailwind 优先）优化收益： - 减少代码量，提高可维护性 - 视觉效果更现代化 - 符合项目 Tailwind 优先原则 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

refactor(plan): 用 Tailwind CSS 重构 AmountKeyboard 样式
- 删除 80+ 行自定义 Less 样式代码 - 使用 Tailwind CSS 工具类实现现代化 UI - 添加磨砂玻璃效果和动态流光背景 - 优化布局层次和视觉层次 - 改进光标动画效果 - 统一使用项目样式规范（Tailwind 优先）优化收益： - 减少代码量，提高可维护性 - 视觉效果更现代化 - 符合项目 Tailwind 优先原则 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
hookehuyr
Commit 6f8b484329188adfeea1e61c67c4e1a751766cd8 6f8b4843 1 parent ed133ed8
Showing 3 changed files with 71 additions and 96 deletions
components.d.ts
docs/CHANGELOG.md
src/components/plan/PlanFields/AmountKeyboard.vue
--- a/components.d.ts
View file @6f8b484
+++ b/components.d.ts
View file @6f8b484
@@ -7,11 +7,9 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
-    AgePicker: typeof import('./src/components/plan/PlanFields/AgePicker.vue')['default']
     AgePickerGlobal: typeof import('./src/components/plan/PlanFields/AgePickerGlobal.vue')['default']
     AmountKeyboard: typeof import('./src/components/plan/PlanFields/AmountKeyboard.vue')['default']
     CriticalIllnessTemplate: typeof import('./src/components/plan/PlanTemplates/CriticalIllnessTemplate.vue')['default']
-    DatePicker: typeof import('./src/components/plan/PlanFields/DatePicker.vue')['default']
     DatePickerGlobal: typeof import('./src/components/plan/PlanFields/DatePickerGlobal.vue')['default']
     DocumentPreview: typeof import('./src/components/documents/DocumentPreview/index.vue')['default']
     FilterTabs: typeof import('./src/components/forms/FilterTabs.vue')['default']
@@ -45,7 +43,6 @@ declare module 'vue' {
     SearchBar: typeof import('./src/components/forms/SearchBar.vue')['default']
     SectionCard: typeof import('./src/components/list/SectionCard.vue')['default']
     SectionItem: typeof import('./src/components/list/SectionItem.vue')['default']
-    SelectPicker: typeof import('./src/components/plan/PlanFields/SelectPicker.vue')['default']
     SelectPickerGlobal: typeof import('./src/components/plan/PlanFields/SelectPickerGlobal.vue')['default']
     TabBar: typeof import('./src/components/navigation/TabBar.vue')['default']
   }
--- a/docs/CHANGELOG.md
View file @6f8b484
+++ b/docs/CHANGELOG.md
View file @6f8b484
@@ -5,6 +5,49 @@
 ---
+## [2026-02-09] - 升级 AmountKeyboard 组件 UI 为现代科技风（V3 - 清新毛玻璃）
+
+### 优化
+- **视觉风格**：切换为明亮的半透明磨砂玻璃风格（Light Glassmorphism）
+  - 背景色调整为 `bg-white/70`，配合 `backdrop-blur-2xl`，通透且有质感
+  - 装饰流光改为更柔和的蓝紫色 `mix-blend-multiply` 模式，避免过度抢眼
+- **色彩调整**：
+  - 文字颜色回归深灰色系（Slate 800/500），保证极佳的可读性
+  - 光标使用清新的天蓝色（Blue 500），带柔和发光效果
+- **细节打磨**：
+  - 顶部标签增加白色半透明背景和微阴影，提升层次感
+  - 底部高光条改为 Slate 色系，与整体色调融合
+
+## [2026-02-09] - 升级 AmountKeyboard 组件 UI 为现代科技风（V2）
+
+### 优化
+- **背景升级**：使用 `bg-slate-900/90` 配合 `backdrop-blur-2xl` 实现真正的磨砂玻璃质感，底部增加微弱的彩色流光
+- **布局重构**：将币种符号调整至金额上方，形成垂直视觉流（Vertical Flow），突出金额数值的核心地位
+- **排版优化**：
+  - 顶部标签改为极简的 `INPUT AMOUNT`，增加字间距（tracking-widest）
+  - 金额数值字号增大至 `100rpx`，增强视觉冲击力
+  - 光标高度和阴影调整，使其更加自然
+- **细节打磨**：
+  - 移除多余的装饰性元素，保持界面干净
+  - 底部增加渐变高光条，提升精致感
+
+## [2026-02-09] - 优化 AmountKeyboard 组件 UI 风格为极简专业风
+
+### 优化
+- 移除 AmountKeyboard 的装饰性背景和渐变效果，回归极简设计
+- 采用白色背景 + 深灰色文字，提升专业感和可读性
+- 增加光标模拟动画，提升交互感知
+- 优化排版布局，强化金额数值的视觉层级
+- 移除多余的阴影和边框，保持界面干净整洁
+
+## [2026-02-09] - 优化 AmountKeyboard 组件 UI 显示
+
+### 优化
+- 重构 AmountKeyboard 弹窗 UI，使用 Tailwind CSS 替代原有 LESS 样式
+- 优化弹窗视觉效果，增加渐变背景和磨砂质感
+- 移除冗余的 LESS 样式代码，遵循项目 CSS 规范
+- 优化数字显示排版，提升可读性
+
 ## [2026-02-09] - 清理未使用的旧版本选择器组件
 ### 重构
--- a/src/components/plan/PlanFields/AmountKeyboard.vue
View file @6f8b484
+++ b/src/components/plan/PlanFields/AmountKeyboard.vue
View file @6f8b484
@@ -47,28 +47,41 @@
       :overlay-style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }"
       :close-on-click-overlay="false"
     >
-      <view class="amount-modal">
+      <view class="relative flex flex-col items-center justify-center min-w-[580rpx] min-h-[500rpx] overflow-hidden bg-white/70 backdrop-blur-2xl border border-white/40 shadow-xl">
-        <!-- 背景装饰 -->
+        <!-- 动态流光背景 (清新亮色) -->
-        <view class="amount-modal-bg">
+        <view class="absolute top-[-20%] left-[10%] w-[300rpx] h-[300rpx] bg-blue-400/20 rounded-full mix-blend-multiply filter blur-[60px] animate-pulse"></view>
-          <view class="amount-modal-circle amount-modal-circle-1"></view>
+        <view class="absolute bottom-[-20%] right-[10%] w-[300rpx] h-[300rpx] bg-purple-400/20 rounded-full mix-blend-multiply filter blur-[60px] animate-pulse" style="animation-delay: 1s"></view>
-          <view class="amount-modal-circle amount-modal-circle-2"></view>
+
-          <view class="amount-modal-circle amount-modal-circle-3"></view>
+        <!-- 磨砂玻璃内容容器 -->
+        <view class="relative z-10 w-full px-8 flex flex-col items-center">
+          <!-- 顶部标签 -->
+          <view class="mb-10 flex items-center gap-2 bg-white/40 px-4 py-1.5 rounded-full border border-white/50 shadow-sm">
+             <text class="text-[22rpx] text-gray-500 font-medium tracking-[0.2em] uppercase">INPUT AMOUNT</text>
           </view>
-        <!-- 内容区域 -->
+          <!-- 垂直布局核心区域 -->
-        <view class="amount-modal-content">
+          <view class="flex flex-col items-center justify-center w-full mb-8">
-          <!-- 币种符号 -->
+            <!-- 币种符号 (放在上方) -->
-          <view class="amount-modal-currency">{{ currencySymbol }}</view>
+            <view class="text-3xl font-medium text-slate-500 mb-4 font-sans">{{ currencySymbol }}</view>
-          <!-- 金额数值 -->
+            <!-- 金额数值 + 光标 -->
-          <view class="amount-modal-value">
+            <view class="flex items-center justify-center relative h-[110rpx]">
+              <view class="text-[100rpx] font-bold text-slate-800 leading-none tracking-tight font-sans drop-shadow-sm tabular-nums">
                 {{ formattedInputValue || '0.00' }}
               </view>
-          <!-- 提示文字 -->
+              <!-- 动态光标 -->
-          <view class="amount-modal-hint">请输入金额</view>
+              <view class="w-[4px] h-[80rpx] bg-blue-500 ml-4 rounded-full animate-pulse shadow-[0_0_10px_rgba(59,130,246,0.5)]"></view>
             </view>
           </view>
+
+          <!-- 底部提示文字 -->
+          <view class="text-xs text-slate-400 font-light tracking-wide">请输入保额金额</view>
+        </view>
+
+        <!-- 底部高光条 -->
+        <view class="absolute bottom-0 w-full h-[1px] bg-gradient-to-r from-transparent via-slate-200 to-transparent"></view>
+      </view>
     </nut-popup>
     <!-- 数字键盘 -->
@@ -522,84 +535,6 @@ const selectCurrency = (value) => {
 }
 .amount-modal {
-  position: relative;
+  /* Removed custom styles in favor of Tailwind CSS */
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-width: 500rpx;
-  min-height: 360rpx;
-  padding: 60rpx 40rpx;
-  overflow: hidden;
-
-  &-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 0;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    opacity: 0.1;
-  }
-
-  &-circle {
-    position: absolute;
-    border-radius: 50%;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    opacity: 0.15;
-  }
-
-  &-circle-1 {
-    width: 400rpx;
-    height: 400rpx;
-    top: -200rpx;
-    right: -100rpx;
-  }
-
-  &-circle-2 {
-    width: 300rpx;
-    height: 300rpx;
-    bottom: -100rpx;
-    left: -80rpx;
-  }
-
-  &-circle-3 {
-    width: 200rpx;
-    height: 200rpx;
-    top: 50%;
-    right: 20%;
-  }
-
-  &-content {
-    position: relative;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  &-currency {
-    font-size: 48rpx;
-    font-weight: bold;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    --webkit-background-clip: text;
-    --webkit-text-fill-color: transparent;
-    background-clip: text;
-    margin-bottom: 20rpx;
-  }
-
-  &-value {
-    font-size: 88rpx;
-    font-weight: bold;
-    color: #333;
-    line-height: 1.2;
-    margin-bottom: 16rpx;
-  }
-
-  &-hint {
-    font-size: 28rpx;
-    color: #999;
-  }
 }
 </style>