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

- 深色主题：深蓝背景 + 毛玻璃卡片 + 金色结果数字 - 自定义底部弹窗货币选择器，替换原生白色 Picker - 换算卡片内容居中竖排布局 - 汇率信息条改为竖排独立卡片 - 实时脉冲徽章 + 蓝紫渐变互换按钮 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-18 18:19:02 +08:00
parent 92304d4fa2
commit 2516cc2085
14 changed files with 543 additions and 311 deletions
--- a/miniprogram/app.json
+++ b/miniprogram/app.json
@@ -4,10 +4,10 @@
    "pages/overview/overview"
  ],
  "window": {
-    "navigationBarTitleText": "汇率换算",
-    "navigationBarBackgroundColor": "#FFFFFF",
-    "navigationBarTextStyle": "black",
-    "backgroundColor": "#F5F5F5",
+    "navigationBarTitleText": "",
+    "navigationBarBackgroundColor": "#0B1120",
+    "navigationBarTextStyle": "white",
+    "backgroundColor": "#0B1120",
    "backgroundTextStyle": "dark"
  },
  "style": "v2",
--- a/miniprogram/app.wxss
+++ b/miniprogram/app.wxss
@@ -1,19 +1,23 @@
 page {
-  background: linear-gradient(180deg, #EEF2FF 0%, #F5F5F5 320rpx);
-  color: #1E293B;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #0B1120;
+  color: #E2E8F0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 28rpx;
  line-height: 1.6;
 }

 .container {
-  padding: 32rpx;
-  padding-top: 24rpx;
+  min-height: 100vh;
+  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;
-  border-radius: 24rpx;
+  background: rgba(30, 41, 59, 0.7);
+  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);
 }
--- a/miniprogram/components/currency-picker/currency-picker.js
+++ b/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() {},
+  },
+});
--- a/miniprogram/components/currency-picker/currency-picker.json
+++ b/miniprogram/components/currency-picker/currency-picker.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
--- a/miniprogram/components/currency-picker/currency-picker.wxml
+++ b/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>
--- a/miniprogram/components/currency-picker/currency-picker.wxss
+++ b/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;
+}
--- a/miniprogram/pages/index/index.js
+++ b/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_TO = 1;    // USD
+const DEFAULT_FROM = 0;
+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({
-        rates,
-        baseCurrency: 'CNY',
-        updatedAt,
-        loading: false,
-      });
+      this.setData({ rates, baseCurrency: 'CNY', updatedAt, loading: false });
      this.calculate();
    } catch (e) {
-      this.setData({
-        loading: false,
-        error: '汇率获取失败，请检查网络后下拉刷新',
-      });
+      this.setData({ 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: value });
+    this.setData({ amount: e.detail.value });
    this.calculate();
  },

-  handleFromChange(e) {
-    this.setData({ fromIndex: Number(e.detail.value) });
+  openFromPicker() {
+    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) {
-    this.setData({ toIndex: Number(e.detail.value) });
-    this.calculate();
+  handlePickerClose() {
+    this.setData({ showPicker: false });
  },

  handleSwap() {
    const { fromIndex, toIndex } = this.data;
-    this.setData({
-      fromIndex: toIndex,
-      toIndex: fromIndex,
-    });
+    this.setData({ fromIndex: toIndex, toIndex: fromIndex });
    this.calculate();
  },

  goOverview() {
-    wx.navigateTo({
-      url: '/pages/overview/overview',
-    });
+    wx.navigateTo({ url: '/pages/overview/overview' });
  },
 });
--- a/miniprogram/pages/index/index.json
+++ b/miniprogram/pages/index/index.json
@@ -1,5 +1,7 @@
 {
-  "navigationBarTitleText": "汇率换算",
+  "navigationBarTitleText": "",
  "enablePullDownRefresh": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "currency-picker": "/components/currency-picker/currency-picker"
+  }
 }
--- a/miniprogram/pages/index/index.wxml
+++ b/miniprogram/pages/index/index.wxml
@@ -1,76 +1,84 @@
 <view class="container">
-  <!-- 顶部标题区 -->
+  <!-- 顶部 -->
  <view class="hero">
-    <view class="hero-title">💱 汇率换算</view>
-    <view class="hero-desc" wx:if="{{updatedAt}}">{{updatedAt}} 更新</view>
-    <view class="hero-desc" wx:if="{{loading}}">正在获取最新汇率...</view>
+    <view class="hero-row">
+      <view class="hero-title">汇率换算</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">
-        <view class="currency-tag">
-          <text class="currency-tag-text">{{pickerData[fromIndex]}}</text>
-          <text class="tag-arrow">▼</text>
-        </view>
-      </picker>
+      <text class="block-label">从</text>
+      <view class="currency-chip" bindtap="openFromPicker">
+        <text class="chip-text">{{pickerData[fromIndex]}}</text>
+        <text class="chip-arrow">›</text>
+      </view>
      <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-line"></view>
-      <view class="swap-btn" bindtap="handleSwap">
+    <!-- 互换 -->
+    <view class="swap-zone" bindtap="handleSwap">
+      <view class="swap-track"></view>
+      <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">
-        <view class="currency-tag">
-          <text class="currency-tag-text">{{pickerData[toIndex]}}</text>
-          <text class="tag-arrow">▼</text>
-        </view>
-      </picker>
-      <view class="result-display">{{result || '—'}}</view>
+      <text class="block-label">到</text>
+      <view class="currency-chip" bindtap="openToPicker">
+        <text class="chip-text">{{pickerData[toIndex]}}</text>
+        <text class="chip-arrow">›</text>
+      </view>
+      <view class="result-amount">{{result || '0.00'}}</view>
    </view>
  </view>

-  <!-- 单位汇率卡片 -->
-  <view class="card rate-card" wx:if="{{unitRate}}">
-    <view class="rate-row">
-      <text class="rate-dot from-dot"></text>
+  <!-- 汇率信息 -->
+  <view class="rate-list" wx:if="{{unitRate}}">
+    <view class="card rate-item">
      <text class="rate-text">{{unitRate}}</text>
    </view>
-    <view class="rate-row">
-      <text class="rate-dot to-dot"></text>
+    <view class="card rate-item">
      <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-left">
-      <text class="overview-icon">📊</text>
-      <text class="overview-label">查看汇率总览</text>
+  <!-- 总览入口 -->
+  <view class="overview-btn" bindtap="goOverview">
+    <view class="overview-inner">
+      <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"
+/>
--- a/miniprogram/pages/index/index.wxss
+++ b/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;
-  letter-spacing: 2rpx;
+  color: #F8FAFC;
+  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;
-  border: 2rpx solid #E2E8F0;
+  background: rgba(148, 163, 184, 0.04);
+  border: 2rpx solid rgba(148, 163, 184, 0.06);
 }

 .to-block {
-  background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
-  border: 2rpx solid #C7D2FE;
+  background: rgba(251, 191, 36, 0.03);
+  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;
-  border-radius: 12rpx;
-  padding: 10rpx 20rpx;
-  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  background: rgba(148, 163, 184, 0.06);
+  border: 2rpx solid rgba(148, 163, 184, 0.12);
+  border-radius: 14rpx;
+  padding: 14rpx 24rpx;
+  margin-bottom: 24rpx;
 }

-.currency-tag-text {
-  font-size: 26rpx;
-  font-weight: 500;
-  color: #334155;
+.chip-text {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #CBD5E1;
 }

-.tag-arrow {
-  font-size: 18rpx;
-  color: #94A3B8;
-  margin-left: 10rpx;
+.chip-arrow {
+  font-size: 28rpx;
+  color: #475569;
+  margin-left: 12rpx;
 }

 .amount-input {
  width: 100%;
-  margin-top: 20rpx;
-  font-size: 56rpx;
+  font-size: 64rpx;
  font-weight: 800;
-  color: #1E293B;
-  text-align: right;
+  color: #F1F5F9;
+  text-align: center;
+  letter-spacing: 2rpx;
 }

 .amount-placeholder {
-  color: #CBD5E1;
-  font-weight: 400;
+  color: #1E293B;
+  font-weight: 600;
 }

-.result-display {
-  margin-top: 20rpx;
-  font-size: 56rpx;
+.result-amount {
+  font-size: 64rpx;
  font-weight: 800;
-  color: #4F46E5;
-  text-align: right;
+  color: #FBBF24;
+  text-align: center;
+  letter-spacing: 2rpx;
+  text-shadow: 0 0 48rpx rgba(251, 191, 36, 0.12);
 }

-/* ===== 互换按钮 ===== */
-.swap-wrapper {
+/* ===== SWAP ===== */
+.swap-zone {
  display: flex;
  align-items: center;
-  justify-content: center;
-  padding: 12rpx 0;
+  padding: 16rpx 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;
-  height: 80rpx;
+  width: 84rpx;
+  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-card {
-  padding: 28rpx 36rpx;
-}
-
-.rate-row {
+/* ===== RATE LIST (竖排) ===== */
+.rate-list {
  display: flex;
-  align-items: center;
-  padding: 8rpx 0;
+  flex-direction: column;
+  gap: 12rpx;
+  margin-bottom: 28rpx;
 }

-.rate-dot {
-  width: 14rpx;
-  height: 14rpx;
-  border-radius: 50%;
-  margin-right: 16rpx;
-  flex-shrink: 0;
-}
-
-.from-dot {
-  background: #64748B;
-}
-
-.to-dot {
-  background: #4F46E5;
+.rate-item {
+  padding: 24rpx 32rpx;
+  text-align: center;
 }

 .rate-text {
  font-size: 26rpx;
  color: #64748B;
-  font-weight: 500;
+  font-weight: 600;
+  letter-spacing: 1rpx;
 }

-/* ===== 错误提示 ===== */
+/* ===== ERROR ===== */
 .error-card {
-  display: flex;
-  align-items: center;
-  padding: 28rpx 36rpx;
-  background: #FEF2F2;
-}
-
-.error-icon {
-  font-size: 32rpx;
-  margin-right: 16rpx;
+  padding: 28rpx 32rpx;
+  background: rgba(239, 68, 68, 0.08);
+  border: 2rpx solid rgba(239, 68, 68, 0.15);
+  text-align: center;
 }

 .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;
-  padding: 36rpx;
-}
-
-.overview-left {
-  display: flex;
-  align-items: center;
-}
-
-.overview-icon {
-  font-size: 36rpx;
-  margin-right: 16rpx;
+  justify-content: center;
+  gap: 12rpx;
+  padding: 34rpx;
+  border-radius: 20rpx;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%);
+  border: 2rpx solid rgba(99, 102, 241, 0.15);
 }

 .overview-label {
  font-size: 30rpx;
-  font-weight: 500;
-  color: #334155;
+  font-weight: 600;
+  color: #93C5FD;
+  letter-spacing: 2rpx;
 }

 .overview-arrow {
-  font-size: 40rpx;
-  color: #CBD5E1;
-  font-weight: 300;
+  font-size: 30rpx;
+  color: #93C5FD;
 }
--- a/miniprogram/pages/overview/overview.js
+++ b/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({
-        rates,
-        updatedAt,
-        loading: false,
-      });
+      this.setData({ rates, updatedAt, loading: false });
      this.buildList();
    } catch (e) {
-      this.setData({
-        loading: false,
-        error: '汇率获取失败，请检查网络后下拉刷新',
-      });
+      this.setData({ loading: false, error: '汇率获取失败，请下拉刷新重试' });
    }
  },

@@ -72,11 +66,19 @@ Page({
    this.setData({ list });
  },

-  handleBaseChange(e) {
-    this.setData({ baseIndex: Number(e.detail.value) });
+  openBasePicker() {
+    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();
--- a/miniprogram/pages/overview/overview.json
+++ b/miniprogram/pages/overview/overview.json
@@ -1,5 +1,7 @@
 {
-  "navigationBarTitleText": "汇率总览",
+  "navigationBarTitleText": "",
  "enablePullDownRefresh": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "currency-picker": "/components/currency-picker/currency-picker"
+  }
 }
--- a/miniprogram/pages/overview/overview.wxml
+++ b/miniprogram/pages/overview/overview.wxml
@@ -1,64 +1,73 @@
 <view class="container">
-  <!-- 顶部控制区 -->
-  <view class="card header-card">
-    <view class="header-top">
-      <text class="header-title">📊 汇率总览</text>
+  <!-- 控制区 -->
+  <view class="card ctrl-card">
+    <view class="ctrl-top">
+      <text class="ctrl-title">汇率总览</text>
+      <view class="ctrl-badge" wx:if="{{updatedAt}}">
+        <text class="badge-text">{{updatedAt}}</text>
+      </view>
    </view>

-    <view class="control-row">
-      <text class="control-label">基准</text>
-      <picker range="{{pickerData}}" value="{{baseIndex}}" bindchange="handleBaseChange">
-        <view class="base-tag">
-          <text class="base-tag-text">{{pickerData[baseIndex]}}</text>
-          <text class="tag-arrow">▼</text>
-        </view>
-      </picker>
+    <view class="ctrl-row">
+      <text class="ctrl-label">基准货币</text>
+      <view class="ctrl-chip" bindtap="openBasePicker">
+        <text class="chip-text">{{pickerData[baseIndex]}}</text>
+        <text class="chip-arrow">›</text>
+      </view>
    </view>

-    <view class="control-row">
-      <text class="control-label">金额</text>
+    <view class="ctrl-row">
+      <text class="ctrl-label">换算金额</text>
      <input
-        class="amount-input"
+        class="ctrl-input"
        type="digit"
        value="{{amount}}"
        bindinput="handleAmountInput"
-        placeholder="输入金额"
-        placeholder-class="amount-placeholder"
+        placeholder="100"
+        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}}">
-    <text>正在获取汇率数据...</text>
+  <!-- 加载 -->
+  <view class="loading-wrap" wx:if="{{loading}}">
+    <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">
-        <text class="rate-flag">{{item.flag}}</text>
-        <view class="rate-info">
-          <text class="rate-code">{{item.code}}</text>
-          <text class="rate-name">{{item.name}}</text>
+      <view class="row-left">
+        <view class="flag-circle">
+          <text class="flag-emoji">{{item.flag}}</text>
+        </view>
+        <view class="row-info">
+          <text class="row-code">{{item.code}}</text>
+          <text class="row-name">{{item.name}}</text>
        </view>
      </view>
-      <view class="rate-right">
-        <text class="rate-value">{{item.converted}}</text>
-        <text class="rate-unit">1 = {{item.unitRate}}</text>
+      <view class="row-right">
+        <text class="row-value">{{item.converted}}</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"
+/>
--- a/miniprogram/pages/overview/overview.wxss
+++ b/miniprogram/pages/overview/overview.wxss
@@ -1,157 +1,197 @@
-/* ===== 顶部控制区 ===== */
-.header-card {
+/* ===== CONTROL 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 {
-  margin-bottom: 28rpx;
-}
-
-.header-title {
-  font-size: 40rpx;
-  font-weight: 800;
-  color: #1E293B;
-}
-
-.control-row {
+.ctrl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 20rpx 0;
-  border-top: 2rpx solid #F1F5F9;
+  margin-bottom: 28rpx;
 }

-.control-label {
-  font-size: 28rpx;
+.ctrl-title {
+  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 {
-  display: inline-flex;
+.ctrl-row {
+  display: flex;
  align-items: center;
-  background: #F8FAFC;
-  border: 2rpx solid #E2E8F0;
-  border-radius: 12rpx;
-  padding: 10rpx 20rpx;
+  justify-content: space-between;
+  padding: 24rpx 0;
+  border-top: 2rpx solid rgba(148, 163, 184, 0.06);
 }

-.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 {
-  font-size: 18rpx;
-  color: #94A3B8;
-  margin-left: 10rpx;
+.chip-arrow {
+  font-size: 28rpx;
+  color: #475569;
+  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 {
-  color: #CBD5E1;
-  font-weight: 400;
+.ctrl-placeholder {
+  color: #334155;
+  font-weight: 500;
 }

-.updated-at {
-  font-size: 22rpx;
-  color: #94A3B8;
-  margin-top: 16rpx;
-}
-
-/* ===== 错误 & 加载 ===== */
+/* ===== ERROR & LOADING ===== */
 .error-card {
-  display: flex;
-  align-items: center;
  padding: 28rpx 36rpx;
-  background: #FEF2F2;
-}
-
-.error-icon {
-  font-size: 32rpx;
-  margin-right: 16rpx;
+  background: rgba(239, 68, 68, 0.1);
+  border: 2rpx solid rgba(239, 68, 68, 0.2);
+  text-align: center;
 }

 .error-text {
  font-size: 26rpx;
-  color: #DC2626;
+  color: #FCA5A5;
 }

-.loading-card {
-  padding: 40rpx;
-  text-align: center;
-  color: #94A3B8;
+.loading-wrap {
+  display: flex;
+  align-items: center;
+  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;
 }

-/* ===== 汇率列表 ===== */
-.list-card {
-  padding: 8rpx 0;
+/* ===== RATE LIST ===== */
+.list-wrap {
+  margin-bottom: 32rpx;
 }

-.rate-item {
+.rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 28rpx 36rpx;
-  border-bottom: 2rpx solid #F8FAFC;
-  transition: background 0.15s;
+  padding: 28rpx 32rpx;
+  margin-bottom: 16rpx;
+  background: rgba(30, 41, 59, 0.5);
+  border: 2rpx solid rgba(148, 163, 184, 0.06);
 }

-.rate-item:last-child {
-  border-bottom: none;
-}
-
-.rate-left {
+.row-left {
  display: flex;
  align-items: center;
 }

-.rate-flag {
-  font-size: 44rpx;
-  margin-right: 20rpx;
+.flag-circle {
+  width: 76rpx;
+  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 {
-  font-size: 32rpx;
+.row-value {
+  font-size: 34rpx;
  font-weight: 800;
-  color: #1E293B;
+  color: #FBBF24;
+  letter-spacing: 1rpx;
 }

-.rate-unit {
+.row-unit {
  font-size: 22rpx;
-  color: #94A3B8;
-  margin-top: 4rpx;
+  color: #475569;
+  margin-top: 6rpx;
+  font-weight: 500;
 }