ui: 暗色金融风重构 + 自定义货币选择器

- 深色主题：深蓝背景 + 毛玻璃卡片 + 金色结果数字
- 自定义底部弹窗货币选择器，替换原生白色 Picker
- 换算卡片内容居中竖排布局
- 汇率信息条改为竖排独立卡片
- 实时脉冲徽章 + 蓝紫渐变互换按钮

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

miniprogram/app.json

@@ -4,10 +4,10 @@
     "pages/overview/overview"
   ],
   "window": {
-    "navigationBarTitleText": "汇率换算",
+    "navigationBarTitleText": "",
-    "navigationBarBackgroundColor": "#FFFFFF",
+    "navigationBarBackgroundColor": "#0B1120",
-    "navigationBarTextStyle": "black",
+    "navigationBarTextStyle": "white",
-    "backgroundColor": "#F5F5F5",
+    "backgroundColor": "#0B1120",
     "backgroundTextStyle": "dark"
   },
   "style": "v2",

miniprogram/app.wxss

@@ -1,19 +1,23 @@
 page {
-  background: linear-gradient(180deg, #EEF2FF 0%, #F5F5F5 320rpx);
+  background: #0B1120;
-  color: #1E293B;
+  color: #E2E8F0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
   font-size: 28rpx;
   line-height: 1.6;
 }
 
 .container {
-  padding: 32rpx;
+  min-height: 100vh;
-  padding-top: 24rpx;
+  padding: 24rpx 28rpx;
+  background:
+    radial-gradient(ellipse at 20% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
+    radial-gradient(ellipse at 80% 100%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
+    #0B1120;
 }
 
 .card {
-  background-color: #FFFFFF;
+  background: rgba(30, 41, 59, 0.7);
-  border-radius: 24rpx;
+  border: 2rpx solid rgba(148, 163, 184, 0.1);
+  border-radius: 28rpx;
   margin-bottom: 24rpx;
-  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
 }

miniprogram/components/currency-picker/currency-picker.js

@@ -0,0 +1,24 @@
+Component({
+  properties: {
+    show: { type: Boolean, value: false },
+    list: { type: Array, value: [] },
+    current: { type: Number, value: 0 },
+  },
+
+  methods: {
+    handleSelect(e) {
+      const index = e.currentTarget.dataset.index;
+      this.triggerEvent('select', { value: index });
+    },
+
+    handleClose() {
+      this.triggerEvent('close');
+    },
+
+    handleMaskTap() {
+      this.triggerEvent('close');
+    },
+
+    preventBubble() {},
+  },
+});

miniprogram/components/currency-picker/currency-picker.json

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

miniprogram/components/currency-picker/currency-picker.wxml

@@ -0,0 +1,20 @@
+<view class="picker-mask" wx:if="{{show}}" bindtap="handleMaskTap">
+  <view class="picker-sheet" catchtap="preventBubble">
+    <view class="sheet-header">
+      <text class="sheet-title">选择货币</text>
+      <text class="sheet-close" bindtap="handleClose">✕</text>
+    </view>
+    <scroll-view class="sheet-scroll" scroll-y enhanced show-scrollbar="{{false}}">
+      <view
+        class="sheet-item {{index === current ? 'sheet-item-active' : ''}}"
+        wx:for="{{list}}"
+        wx:key="index"
+        data-index="{{index}}"
+        bindtap="handleSelect"
+      >
+        <text class="item-text">{{item}}</text>
+        <text class="item-check" wx:if="{{index === current}}">✓</text>
+      </view>
+    </scroll-view>
+  </view>
+</view>

miniprogram/components/currency-picker/currency-picker.wxss

@@ -0,0 +1,84 @@
+.picker-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 1000;
+  display: flex;
+  align-items: flex-end;
+}
+
+.picker-sheet {
+  width: 100%;
+  max-height: 70vh;
+  background: #1E293B;
+  border-top-left-radius: 36rpx;
+  border-top-right-radius: 36rpx;
+  border-top: 2rpx solid rgba(148, 163, 184, 0.15);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.sheet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 36rpx 40rpx 24rpx;
+  border-bottom: 2rpx solid rgba(148, 163, 184, 0.08);
+}
+
+.sheet-title {
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #F1F5F9;
+  letter-spacing: 2rpx;
+}
+
+.sheet-close {
+  font-size: 32rpx;
+  color: #64748B;
+  width: 64rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(148, 163, 184, 0.08);
+}
+
+.sheet-scroll {
+  max-height: 56vh;
+  padding: 12rpx 0;
+}
+
+.sheet-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 28rpx 40rpx;
+  margin: 0 16rpx;
+  border-radius: 16rpx;
+}
+
+.sheet-item-active {
+  background: rgba(99, 102, 241, 0.12);
+  border: 2rpx solid rgba(99, 102, 241, 0.25);
+}
+
+.item-text {
+  font-size: 30rpx;
+  color: #CBD5E1;
+  font-weight: 500;
+}
+
+.sheet-item-active .item-text {
+  color: #A5B4FC;
+  font-weight: 600;
+}
+
+.item-check {
+  font-size: 30rpx;
+  color: #818CF8;
+  font-weight: 700;
+}

miniprogram/pages/index/index.js

@@ -2,8 +2,8 @@ const { CURRENCIES, getPickerData } = require('../../utils/currencies');
 const { getRates, convert, formatAmount, formatRate } = require('../../utils/rate');
 
 const pickerData = getPickerData();
-const DEFAULT_FROM = 0;  // CNY
+const DEFAULT_FROM = 0;
-const DEFAULT_TO = 1;    // USD
+const DEFAULT_TO = 1;
 
 Page({
   data: {
@@ -18,7 +18,9 @@ Page({
     loading: true,
     error: '',
     rates: null,
-    baseCurrency: 'CNY',
+    // picker state
+    showPicker: false,
+    pickerTarget: '',  // 'from' or 'to'
   },
 
   onLoad() {
@@ -35,23 +37,15 @@ Page({
     this.setData({ loading: true, error: '' });
     try {
       const { rates, updatedAt } = await getRates('CNY');
-      this.setData({
+      this.setData({ rates, baseCurrency: 'CNY', updatedAt, loading: false });
-        rates,
-        baseCurrency: 'CNY',
-        updatedAt,
-        loading: false,
-      });
       this.calculate();
     } catch (e) {
-      this.setData({
+      this.setData({ loading: false, error: '汇率获取失败，请下拉刷新重试' });
-        loading: false,
-        error: '汇率获取失败，请检查网络后下拉刷新',
-      });
     }
   },
 
   calculate() {
-    const { rates, fromIndex, toIndex, amount, baseCurrency } = this.data;
+    const { rates, fromIndex, toIndex, amount } = this.data;
     if (!rates) return;
 
     const num = parseFloat(amount);
@@ -74,33 +68,39 @@ Page({
   },
 
   handleAmountInput(e) {
-    const value = e.detail.value;
+    this.setData({ amount: e.detail.value });
-    this.setData({ amount: value });
     this.calculate();
   },
 
-  handleFromChange(e) {
+  openFromPicker() {
-    this.setData({ fromIndex: Number(e.detail.value) });
+    this.setData({ showPicker: true, pickerTarget: 'from' });
+  },
+
+  openToPicker() {
+    this.setData({ showPicker: true, pickerTarget: 'to' });
+  },
+
+  handlePickerSelect(e) {
+    const index = e.detail.value;
+    if (this.data.pickerTarget === 'from') {
+      this.setData({ fromIndex: index, showPicker: false });
+    } else {
+      this.setData({ toIndex: index, showPicker: false });
+    }
     this.calculate();
   },
 
-  handleToChange(e) {
+  handlePickerClose() {
-    this.setData({ toIndex: Number(e.detail.value) });
+    this.setData({ showPicker: false });
-    this.calculate();
   },
 
   handleSwap() {
     const { fromIndex, toIndex } = this.data;
-    this.setData({
+    this.setData({ fromIndex: toIndex, toIndex: fromIndex });
-      fromIndex: toIndex,
-      toIndex: fromIndex,
-    });
     this.calculate();
   },
 
   goOverview() {
-    wx.navigateTo({
+    wx.navigateTo({ url: '/pages/overview/overview' });
-      url: '/pages/overview/overview',
-    });
   },
 });

miniprogram/pages/index/index.json

@@ -1,5 +1,7 @@
 {
-  "navigationBarTitleText": "汇率换算",
+  "navigationBarTitleText": "",
   "enablePullDownRefresh": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "currency-picker": "/components/currency-picker/currency-picker"
+  }
 }

miniprogram/pages/index/index.wxml

@@ -1,76 +1,84 @@
 <view class="container">
-  <!-- 顶部标题区 -->
+  <!-- 顶部 -->
   <view class="hero">
-    <view class="hero-title">💱 汇率换算</view>
+    <view class="hero-row">
-    <view class="hero-desc" wx:if="{{updatedAt}}">{{updatedAt}} 更新</view>
+      <view class="hero-title">汇率换算</view>
-    <view class="hero-desc" wx:if="{{loading}}">正在获取最新汇率...</view>
+      <view class="hero-badge" wx:if="{{!loading}}">
+        <view class="badge-dot"></view>
+        <text class="badge-text">实时</text>
+      </view>
+    </view>
+    <view class="hero-desc" wx:if="{{updatedAt}}">{{updatedAt}}</view>
+    <view class="hero-desc" wx:if="{{loading}}">正在同步汇率数据...</view>
   </view>
 
   <!-- 换算主卡片 -->
   <view class="card converter-card">
     <!-- 源币种 -->
     <view class="currency-block from-block">
-      <picker range="{{pickerData}}" value="{{fromIndex}}" bindchange="handleFromChange">
+      <text class="block-label">从</text>
-        <view class="currency-tag">
+      <view class="currency-chip" bindtap="openFromPicker">
-          <text class="currency-tag-text">{{pickerData[fromIndex]}}</text>
+        <text class="chip-text">{{pickerData[fromIndex]}}</text>
-          <text class="tag-arrow">▼</text>
+        <text class="chip-arrow">›</text>
       </view>
-      </picker>
       <input
         class="amount-input"
         type="digit"
         value="{{amount}}"
         bindinput="handleAmountInput"
-        placeholder="输入金额"
+        placeholder="0.00"
         placeholder-class="amount-placeholder"
       />
     </view>
 
-    <!-- 互换按钮 -->
+    <!-- 互换 -->
-    <view class="swap-wrapper">
+    <view class="swap-zone" bindtap="handleSwap">
-      <view class="swap-line"></view>
+      <view class="swap-track"></view>
-      <view class="swap-btn" bindtap="handleSwap">
+      <view class="swap-btn">
         <text class="swap-icon">⇅</text>
       </view>
-      <view class="swap-line"></view>
+      <view class="swap-track"></view>
     </view>
 
     <!-- 目标币种 -->
     <view class="currency-block to-block">
-      <picker range="{{pickerData}}" value="{{toIndex}}" bindchange="handleToChange">
+      <text class="block-label">到</text>
-        <view class="currency-tag">
+      <view class="currency-chip" bindtap="openToPicker">
-          <text class="currency-tag-text">{{pickerData[toIndex]}}</text>
+        <text class="chip-text">{{pickerData[toIndex]}}</text>
-          <text class="tag-arrow">▼</text>
+        <text class="chip-arrow">›</text>
       </view>
-      </picker>
+      <view class="result-amount">{{result || '0.00'}}</view>
-      <view class="result-display">{{result || '—'}}</view>
     </view>
   </view>
 
-  <!-- 单位汇率卡片 -->
+  <!-- 汇率信息 -->
-  <view class="card rate-card" wx:if="{{unitRate}}">
+  <view class="rate-list" wx:if="{{unitRate}}">
-    <view class="rate-row">
+    <view class="card rate-item">
-      <text class="rate-dot from-dot"></text>
       <text class="rate-text">{{unitRate}}</text>
     </view>
-    <view class="rate-row">
+    <view class="card rate-item">
-      <text class="rate-dot to-dot"></text>
       <text class="rate-text">{{reverseRate}}</text>
     </view>
   </view>
 
-  <!-- 错误提示 -->
+  <!-- 错误 -->
   <view class="card error-card" wx:if="{{error}}">
-    <text class="error-icon">⚠</text>
     <text class="error-text">{{error}}</text>
   </view>
 
-  <!-- 汇率总览入口 -->
+  <!-- 总览入口 -->
-  <view class="card overview-entry" bindtap="goOverview">
+  <view class="overview-btn" bindtap="goOverview">
-    <view class="overview-left">
+    <view class="overview-inner">
-      <text class="overview-icon">📊</text>
+      <text class="overview-label">查看全部汇率</text>
-      <text class="overview-label">查看汇率总览</text>
+      <text class="overview-arrow">→</text>
     </view>
-    <text class="overview-arrow">›</text>
   </view>
 </view>
+
+<currency-picker
+  show="{{showPicker}}"
+  list="{{pickerData}}"
+  current="{{pickerTarget === 'from' ? fromIndex : toIndex}}"
+  bind:select="handlePickerSelect"
+  bind:close="handlePickerClose"
+/>

miniprogram/pages/index/index.wxss

@@ -1,192 +1,225 @@
-/* ===== 顶部标题 ===== */
+/* ===== HERO ===== */
 .hero {
-  padding: 16rpx 8rpx 24rpx;
+  padding: 12rpx 4rpx 28rpx;
+}
+
+.hero-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .hero-title {
-  font-size: 48rpx;
+  font-size: 50rpx;
   font-weight: 800;
-  color: #1E293B;
+  color: #F8FAFC;
-  letter-spacing: 2rpx;
+  letter-spacing: 3rpx;
+}
+
+.hero-badge {
+  display: flex;
+  align-items: center;
+  background: rgba(16, 185, 129, 0.1);
+  border: 2rpx solid rgba(16, 185, 129, 0.2);
+  border-radius: 40rpx;
+  padding: 8rpx 20rpx;
+}
+
+.badge-dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  background: #10B981;
+  margin-right: 10rpx;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+.badge-text {
+  font-size: 22rpx;
+  color: #10B981;
+  font-weight: 600;
 }
 
 .hero-desc {
   font-size: 24rpx;
-  color: #94A3B8;
+  color: #475569;
   margin-top: 8rpx;
 }
 
-/* ===== 换算主卡片 ===== */
+/* ===== CONVERTER ===== */
 .converter-card {
-  padding: 40rpx 36rpx;
+  padding: 32rpx;
+  background: linear-gradient(160deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
+  border: 2rpx solid rgba(148, 163, 184, 0.1);
 }
 
 .currency-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24rpx;
   border-radius: 20rpx;
-  padding: 28rpx;
 }
 
 .from-block {
-  background: #F8FAFC;
+  background: rgba(148, 163, 184, 0.04);
-  border: 2rpx solid #E2E8F0;
+  border: 2rpx solid rgba(148, 163, 184, 0.06);
 }
 
 .to-block {
-  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
+  background: rgba(251, 191, 36, 0.03);
-  border: 2rpx solid #C7D2FE;
+  border: 2rpx solid rgba(251, 191, 36, 0.08);
 }
 
-.currency-tag {
+.block-label {
+  font-size: 22rpx;
+  color: #475569;
+  font-weight: 700;
+  letter-spacing: 6rpx;
+  margin-bottom: 16rpx;
+}
+
+.currency-chip {
   display: inline-flex;
   align-items: center;
-  background: #FFFFFF;
+  background: rgba(148, 163, 184, 0.06);
-  border-radius: 12rpx;
+  border: 2rpx solid rgba(148, 163, 184, 0.12);
-  padding: 10rpx 20rpx;
+  border-radius: 14rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  padding: 14rpx 24rpx;
+  margin-bottom: 24rpx;
 }
 
-.currency-tag-text {
+.chip-text {
-  font-size: 26rpx;
+  font-size: 28rpx;
-  font-weight: 500;
+  font-weight: 600;
-  color: #334155;
+  color: #CBD5E1;
 }
 
-.tag-arrow {
+.chip-arrow {
-  font-size: 18rpx;
+  font-size: 28rpx;
-  color: #94A3B8;
+  color: #475569;
-  margin-left: 10rpx;
+  margin-left: 12rpx;
 }
 
 .amount-input {
   width: 100%;
-  margin-top: 20rpx;
+  font-size: 64rpx;
-  font-size: 56rpx;
   font-weight: 800;
-  color: #1E293B;
+  color: #F1F5F9;
-  text-align: right;
+  text-align: center;
+  letter-spacing: 2rpx;
 }
 
 .amount-placeholder {
-  color: #CBD5E1;
+  color: #1E293B;
-  font-weight: 400;
+  font-weight: 600;
 }
 
-.result-display {
+.result-amount {
-  margin-top: 20rpx;
+  font-size: 64rpx;
-  font-size: 56rpx;
   font-weight: 800;
-  color: #4F46E5;
+  color: #FBBF24;
-  text-align: right;
+  text-align: center;
+  letter-spacing: 2rpx;
+  text-shadow: 0 0 48rpx rgba(251, 191, 36, 0.12);
 }
 
-/* ===== 互换按钮 ===== */
+/* ===== SWAP ===== */
-.swap-wrapper {
+.swap-zone {
   display: flex;
   align-items: center;
-  justify-content: center;
+  padding: 16rpx 0;
-  padding: 12rpx 0;
 }
 
-.swap-line {
+.swap-track {
   flex: 1;
   height: 2rpx;
-  background: #E2E8F0;
+  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.1), transparent);
 }
 
 .swap-btn {
-  width: 80rpx;
+  width: 84rpx;
-  height: 80rpx;
+  height: 84rpx;
   border-radius: 50%;
-  background: #4F46E5;
+  background: linear-gradient(140deg, #3B82F6 0%, #6366F1 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 24rpx;
-  box-shadow: 0 6rpx 20rpx rgba(79, 70, 229, 0.3);
+  box-shadow:
+    0 8rpx 28rpx rgba(99, 102, 241, 0.3),
+    inset 0 2rpx 4rpx rgba(255, 255, 255, 0.1);
 }
 
 .swap-icon {
-  font-size: 36rpx;
+  font-size: 38rpx;
   color: #FFFFFF;
+  font-weight: 700;
 }
 
-/* ===== 单位汇率 ===== */
+/* ===== RATE LIST (竖排) ===== */
-.rate-card {
+.rate-list {
-  padding: 28rpx 36rpx;
-}
-
-.rate-row {
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  padding: 8rpx 0;
+  gap: 12rpx;
+  margin-bottom: 28rpx;
 }
 
-.rate-dot {
+.rate-item {
-  width: 14rpx;
+  padding: 24rpx 32rpx;
-  height: 14rpx;
+  text-align: center;
-  border-radius: 50%;
-  margin-right: 16rpx;
-  flex-shrink: 0;
-}
-
-.from-dot {
-  background: #64748B;
-}
-
-.to-dot {
-  background: #4F46E5;
 }
 
 .rate-text {
   font-size: 26rpx;
   color: #64748B;
-  font-weight: 500;
+  font-weight: 600;
+  letter-spacing: 1rpx;
 }
 
-/* ===== 错误提示 ===== */
+/* ===== ERROR ===== */
 .error-card {
-  display: flex;
+  padding: 28rpx 32rpx;
-  align-items: center;
+  background: rgba(239, 68, 68, 0.08);
-  padding: 28rpx 36rpx;
+  border: 2rpx solid rgba(239, 68, 68, 0.15);
-  background: #FEF2F2;
+  text-align: center;
-}
-
-.error-icon {
-  font-size: 32rpx;
-  margin-right: 16rpx;
 }
 
 .error-text {
   font-size: 26rpx;
-  color: #DC2626;
+  color: #FCA5A5;
 }
 
-/* ===== 汇率总览入口 ===== */
+/* ===== OVERVIEW ENTRY ===== */
-.overview-entry {
+.overview-btn {
+  margin-top: 8rpx;
+  margin-bottom: 48rpx;
+}
+
+.overview-inner {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
-  padding: 36rpx;
+  gap: 12rpx;
-}
+  padding: 34rpx;
-
+  border-radius: 20rpx;
-.overview-left {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%);
-  display: flex;
+  border: 2rpx solid rgba(99, 102, 241, 0.15);
-  align-items: center;
-}
-
-.overview-icon {
-  font-size: 36rpx;
-  margin-right: 16rpx;
 }
 
 .overview-label {
   font-size: 30rpx;
-  font-weight: 500;
+  font-weight: 600;
-  color: #334155;
+  color: #93C5FD;
+  letter-spacing: 2rpx;
 }
 
 .overview-arrow {
-  font-size: 40rpx;
+  font-size: 30rpx;
-  color: #CBD5E1;
+  color: #93C5FD;
-  font-weight: 300;
 }

miniprogram/pages/overview/overview.js

@@ -6,13 +6,14 @@ const pickerData = getPickerData();
 Page({
   data: {
     pickerData,
-    baseIndex: 0, // CNY
+    baseIndex: 0,
     amount: '100',
     list: [],
     updatedAt: '',
     loading: true,
     error: '',
     rates: null,
+    showPicker: false,
   },
 
   onLoad() {
@@ -30,17 +31,10 @@ Page({
     try {
       const baseCode = CURRENCIES[this.data.baseIndex].code;
       const { rates, updatedAt } = await getRates(baseCode);
-      this.setData({
+      this.setData({ rates, updatedAt, loading: false });
-        rates,
-        updatedAt,
-        loading: false,
-      });
       this.buildList();
     } catch (e) {
-      this.setData({
+      this.setData({ loading: false, error: '汇率获取失败，请下拉刷新重试' });
-        loading: false,
-        error: '汇率获取失败，请检查网络后下拉刷新',
-      });
     }
   },
 
@@ -72,11 +66,19 @@ Page({
     this.setData({ list });
   },
 
-  handleBaseChange(e) {
+  openBasePicker() {
-    this.setData({ baseIndex: Number(e.detail.value) });
+    this.setData({ showPicker: true });
+  },
+
+  handlePickerSelect(e) {
+    this.setData({ baseIndex: e.detail.value, showPicker: false });
     this.loadRates();
   },
 
+  handlePickerClose() {
+    this.setData({ showPicker: false });
+  },
+
   handleAmountInput(e) {
     this.setData({ amount: e.detail.value });
     this.buildList();

miniprogram/pages/overview/overview.json

@@ -1,5 +1,7 @@
 {
-  "navigationBarTitleText": "汇率总览",
+  "navigationBarTitleText": "",
   "enablePullDownRefresh": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "currency-picker": "/components/currency-picker/currency-picker"
+  }
 }

miniprogram/pages/overview/overview.wxml

@@ -1,64 +1,73 @@
 <view class="container">
-  <!-- 顶部控制区 -->
+  <!-- 控制区 -->
-  <view class="card header-card">
+  <view class="card ctrl-card">
-    <view class="header-top">
+    <view class="ctrl-top">
-      <text class="header-title">📊 汇率总览</text>
+      <text class="ctrl-title">汇率总览</text>
+      <view class="ctrl-badge" wx:if="{{updatedAt}}">
+        <text class="badge-text">{{updatedAt}}</text>
+      </view>
     </view>
 
-    <view class="control-row">
+    <view class="ctrl-row">
-      <text class="control-label">基准</text>
+      <text class="ctrl-label">基准货币</text>
-      <picker range="{{pickerData}}" value="{{baseIndex}}" bindchange="handleBaseChange">
+      <view class="ctrl-chip" bindtap="openBasePicker">
-        <view class="base-tag">
+        <text class="chip-text">{{pickerData[baseIndex]}}</text>
-          <text class="base-tag-text">{{pickerData[baseIndex]}}</text>
+        <text class="chip-arrow">›</text>
-          <text class="tag-arrow">▼</text>
       </view>
-      </picker>
     </view>
 
-    <view class="control-row">
+    <view class="ctrl-row">
-      <text class="control-label">金额</text>
+      <text class="ctrl-label">换算金额</text>
       <input
-        class="amount-input"
+        class="ctrl-input"
         type="digit"
         value="{{amount}}"
         bindinput="handleAmountInput"
-        placeholder="输入金额"
+        placeholder="100"
-        placeholder-class="amount-placeholder"
+        placeholder-class="ctrl-placeholder"
       />
     </view>
-
-    <view class="updated-at" wx:if="{{updatedAt}}">{{updatedAt}} 更新</view>
   </view>
 
-  <!-- 错误提示 -->
+  <!-- 错误 -->
   <view class="card error-card" wx:if="{{error}}">
-    <text class="error-icon">⚠</text>
     <text class="error-text">{{error}}</text>
   </view>
 
-  <!-- 加载中 -->
+  <!-- 加载 -->
-  <view class="loading-card" wx:if="{{loading}}">
+  <view class="loading-wrap" wx:if="{{loading}}">
-    <text>正在获取汇率数据...</text>
+    <view class="loading-dot"></view>
+    <text class="loading-text">加载中</text>
   </view>
 
-  <!-- 汇率列表 -->
+  <!-- 列表 -->
-  <view class="card list-card" wx:if="{{list.length}}">
+  <view class="list-wrap" wx:if="{{list.length}}">
     <view
-      class="rate-item"
+      class="card rate-row"
       wx:for="{{list}}"
       wx:key="code"
     >
-      <view class="rate-left">
+      <view class="row-left">
-        <text class="rate-flag">{{item.flag}}</text>
+        <view class="flag-circle">
-        <view class="rate-info">
+          <text class="flag-emoji">{{item.flag}}</text>
-          <text class="rate-code">{{item.code}}</text>
+        </view>
-          <text class="rate-name">{{item.name}}</text>
+        <view class="row-info">
+          <text class="row-code">{{item.code}}</text>
+          <text class="row-name">{{item.name}}</text>
         </view>
       </view>
-      <view class="rate-right">
+      <view class="row-right">
-        <text class="rate-value">{{item.converted}}</text>
+        <text class="row-value">{{item.converted}}</text>
-        <text class="rate-unit">1 = {{item.unitRate}}</text>
+        <text class="row-unit">1 = {{item.unitRate}}</text>
       </view>
     </view>
   </view>
 </view>
+
+<currency-picker
+  show="{{showPicker}}"
+  list="{{pickerData}}"
+  current="{{baseIndex}}"
+  bind:select="handlePickerSelect"
+  bind:close="handlePickerClose"
+/>

miniprogram/pages/overview/overview.wxss

@@ -1,157 +1,197 @@
-/* ===== 顶部控制区 ===== */
+/* ===== CONTROL CARD ===== */
-.header-card {
+.ctrl-card {
   padding: 36rpx;
+  background:
+    linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
+  border: 2rpx solid rgba(148, 163, 184, 0.12);
 }
 
-.header-top {
+.ctrl-top {
-  margin-bottom: 28rpx;
-}
-
-.header-title {
-  font-size: 40rpx;
-  font-weight: 800;
-  color: #1E293B;
-}
-
-.control-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20rpx 0;
+  margin-bottom: 28rpx;
-  border-top: 2rpx solid #F1F5F9;
 }
 
-.control-label {
+.ctrl-title {
-  font-size: 28rpx;
+  font-size: 44rpx;
+  font-weight: 800;
+  color: #F8FAFC;
+  letter-spacing: 4rpx;
+}
+
+.ctrl-badge {
+  background: rgba(148, 163, 184, 0.08);
+  border: 2rpx solid rgba(148, 163, 184, 0.12);
+  border-radius: 40rpx;
+  padding: 8rpx 20rpx;
+}
+
+.badge-text {
+  font-size: 20rpx;
   color: #64748B;
   font-weight: 500;
 }
 
-.base-tag {
+.ctrl-row {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  background: #F8FAFC;
+  justify-content: space-between;
-  border: 2rpx solid #E2E8F0;
+  padding: 24rpx 0;
-  border-radius: 12rpx;
+  border-top: 2rpx solid rgba(148, 163, 184, 0.06);
-  padding: 10rpx 20rpx;
 }
 
-.base-tag-text {
+.ctrl-label {
+  font-size: 26rpx;
+  color: #64748B;
+  font-weight: 600;
+  letter-spacing: 2rpx;
+}
+
+.ctrl-chip {
+  display: flex;
+  align-items: center;
+  background: rgba(148, 163, 184, 0.08);
+  border: 2rpx solid rgba(148, 163, 184, 0.15);
+  border-radius: 16rpx;
+  padding: 12rpx 20rpx;
+}
+
+.chip-text {
   font-size: 26rpx;
   font-weight: 500;
-  color: #334155;
+  color: #CBD5E1;
 }
 
-.tag-arrow {
+.chip-arrow {
-  font-size: 18rpx;
+  font-size: 28rpx;
-  color: #94A3B8;
+  color: #475569;
-  margin-left: 10rpx;
+  margin-left: 12rpx;
 }
 
-.amount-input {
+.ctrl-input {
   flex: 1;
   text-align: right;
-  font-size: 40rpx;
+  font-size: 44rpx;
   font-weight: 800;
-  color: #1E293B;
+  color: #F1F5F9;
   margin-left: 24rpx;
 }
 
-.amount-placeholder {
+.ctrl-placeholder {
-  color: #CBD5E1;
+  color: #334155;
-  font-weight: 400;
+  font-weight: 500;
 }
 
-.updated-at {
+/* ===== ERROR & LOADING ===== */
-  font-size: 22rpx;
-  color: #94A3B8;
-  margin-top: 16rpx;
-}
-
-/* ===== 错误 & 加载 ===== */
 .error-card {
-  display: flex;
-  align-items: center;
   padding: 28rpx 36rpx;
-  background: #FEF2F2;
+  background: rgba(239, 68, 68, 0.1);
-}
+  border: 2rpx solid rgba(239, 68, 68, 0.2);
-
+  text-align: center;
-.error-icon {
-  font-size: 32rpx;
-  margin-right: 16rpx;
 }
 
 .error-text {
   font-size: 26rpx;
-  color: #DC2626;
+  color: #FCA5A5;
 }
 
-.loading-card {
+.loading-wrap {
-  padding: 40rpx;
+  display: flex;
-  text-align: center;
+  align-items: center;
-  color: #94A3B8;
+  justify-content: center;
+  padding: 48rpx;
+  gap: 16rpx;
+}
+
+.loading-dot {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background: #6366F1;
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.3; transform: scale(0.8); }
+}
+
+.loading-text {
   font-size: 26rpx;
+  color: #64748B;
 }
 
-/* ===== 汇率列表 ===== */
+/* ===== RATE LIST ===== */
-.list-card {
+.list-wrap {
-  padding: 8rpx 0;
+  margin-bottom: 32rpx;
 }
 
-.rate-item {
+.rate-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 28rpx 36rpx;
+  padding: 28rpx 32rpx;
-  border-bottom: 2rpx solid #F8FAFC;
+  margin-bottom: 16rpx;
-  transition: background 0.15s;
+  background: rgba(30, 41, 59, 0.5);
+  border: 2rpx solid rgba(148, 163, 184, 0.06);
 }
 
-.rate-item:last-child {
+.row-left {
-  border-bottom: none;
-}
-
-.rate-left {
   display: flex;
   align-items: center;
 }
 
-.rate-flag {
+.flag-circle {
-  font-size: 44rpx;
+  width: 76rpx;
-  margin-right: 20rpx;
+  height: 76rpx;
+  border-radius: 50%;
+  background: rgba(148, 163, 184, 0.08);
+  border: 2rpx solid rgba(148, 163, 184, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 24rpx;
 }
 
-.rate-info {
+.flag-emoji {
+  font-size: 40rpx;
+}
+
+.row-info {
   display: flex;
   flex-direction: column;
 }
 
-.rate-code {
+.row-code {
   font-size: 30rpx;
   font-weight: 700;
-  color: #1E293B;
+  color: #E2E8F0;
+  letter-spacing: 2rpx;
 }
 
-.rate-name {
+.row-name {
   font-size: 22rpx;
-  color: #94A3B8;
+  color: #64748B;
   margin-top: 4rpx;
 }
 
-.rate-right {
+.row-right {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
 }
 
-.rate-value {
+.row-value {
-  font-size: 32rpx;
+  font-size: 34rpx;
   font-weight: 800;
-  color: #1E293B;
+  color: #FBBF24;
+  letter-spacing: 1rpx;
 }
 
-.rate-unit {
+.row-unit {
   font-size: 22rpx;
-  color: #94A3B8;
+  color: #475569;
-  margin-top: 4rpx;
+  margin-top: 6rpx;
+  font-weight: 500;
 }