From b66cd95bda17882ff0254a4d23982d5c1ff9624c Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Sun, 9 Mar 2025 13:41:40 +0800
Subject: [PATCH] update

---
 src/layouts/AdminLayout.vue |  16 +-
 src/router/index.js         |  12 +
 src/utils/config.js         |   6 +-
 src/views/BankCard.vue      | 288 +++++++++++++++++++
 src/views/Finance.vue       | 544 ++++++++++++++++++++++++++++++++++++
 5 files changed, 863 insertions(+), 3 deletions(-)
 create mode 100644 src/views/BankCard.vue
 create mode 100644 src/views/Finance.vue

diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index e022783..8a98a56 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -16,6 +16,14 @@
           <template #icon><dashboard-outlined /></template>
           <span>仪表盘</span>
         </a-menu-item>
+        <a-menu-item key="finance" @click="() => $router.push('/finance')">
+          <template #icon><dollar-outlined /></template>
+          <span>财务管理</span>
+        </a-menu-item>
+        <a-menu-item key="bank-card" @click="() => $router.push('/bank-card')">
+          <template #icon><credit-card-outlined /></template>
+          <span>银行卡管理</span>
+        </a-menu-item>
       </a-menu>
     </a-layout-sider>
     
@@ -71,14 +79,18 @@ import { useStore } from 'vuex';
 import { useRoute, useRouter } from 'vue-router';
 import { 
   DashboardOutlined,
-  HomeOutlined
+  HomeOutlined,
+  DollarOutlined,
+  CreditCardOutlined
 } from '@ant-design/icons-vue';
 
 export default {
   name: 'AdminLayout',
   components: {
     DashboardOutlined,
-    HomeOutlined
+    HomeOutlined,
+    DollarOutlined,
+    CreditCardOutlined
   },
   setup() {
     const store = useStore();
diff --git a/src/router/index.js b/src/router/index.js
index fb6133a..1ed109e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -12,6 +12,18 @@ const routes = [
         name: 'Dashboard',
         component: () => import('../views/Dashboard.vue'),
         meta: { title: '仪表盘', icon: 'dashboard' }
+      },
+      {
+        path: 'finance',
+        name: 'Finance',
+        component: () => import('../views/Finance.vue'),
+        meta: { title: '财务管理', icon: 'money' }
+      },
+      {
+        path: 'bank-card',
+        name: 'BankCard',
+        component: () => import('../views/BankCard.vue'),
+        meta: { title: '银行卡管理', icon: 'credit-card' }
       }
     ]
   },
diff --git a/src/utils/config.js b/src/utils/config.js
index b2e501c..085e2b7 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -28,7 +28,11 @@ export default {
   BASE_URL,
   BUILD_TIMESTAMP,
   API: {
-    LOGIN: '/api/user/password-login'
+    LOGIN: '/api/user/password-login',
+    ACCOUNT_SUMMARY: '/api/account/summary',
+    ACCOUNT_WITHDRAWALS: '/api/withdraw/user',
+    BANK_CARDS: '/api/bank-cards',
+    WITHDRAW: '/api/withdraw'
   },
   // 添加时间戳参数到 URL，用于破除缓存
   addTimestamp: (url) => {
diff --git a/src/views/BankCard.vue b/src/views/BankCard.vue
new file mode 100644
index 0000000..3a8e07c
--- /dev/null
+++ b/src/views/BankCard.vue
@@ -0,0 +1,288 @@
+<template>
+  <div class="bank-card-container">
+    <a-card title="银行卡管理" :bordered="false">
+      <div class="section-header">
+        <h3>我的银行卡</h3>
+        <div class="section-actions">
+          <a-button type="primary" @click="showAddBankCardModal">
+            <plus-outlined style="color: #fff;" />
+            添加银行卡
+          </a-button>
+        </div>
+      </div>
+      
+      <a-spin :spinning="loading">
+        <div v-if="bankCards.length === 0" class="empty-data">
+          <a-empty description="暂无银行卡" />
+          <div class="empty-action">
+            <a-button type="primary" @click="showAddBankCardModal">
+              <plus-outlined style="color: #fff;" />
+              添加银行卡
+            </a-button>
+          </div>
+        </div>
+        
+        <a-row :gutter="16" v-else>
+          <a-col :span="8" v-for="card in bankCards" :key="card.id">
+            <a-card class="bank-card">
+              <div class="bank-card-header">
+                <div class="bank-name">{{ card.bank_name }}</div>
+                <div class="card-type">储蓄卡</div>
+              </div>
+              <div class="card-number">{{ card.card_number }}</div>
+              <div class="card-holder">{{ card.name }}</div>
+            </a-card>
+          </a-col>
+        </a-row>
+      </a-spin>
+    </a-card>
+
+    <!-- 添加银行卡弹窗 -->
+    <a-modal
+      v-model:visible="addBankCardModalVisible"
+      title="添加银行卡"
+      @ok="handleAddBankCard"
+      @cancel="addBankCardModalVisible = false"
+    >
+      <a-form :model="bankCardForm" layout="vertical">
+        <a-form-item name="name" label="持卡人姓名" required>
+          <a-input
+            v-model:value="bankCardForm.name"
+            placeholder="请输入持卡人姓名"
+          />
+        </a-form-item>
+        <a-form-item name="card_number" label="银行卡号" required>
+          <a-input
+            v-model:value="bankCardForm.card_number"
+            placeholder="请输入银行卡号"
+          />
+        </a-form-item>
+        <a-form-item name="bank_name" label="银行名称" required>
+          <a-select
+            v-model:value="bankCardForm.bank_name"
+            placeholder="请选择银行"
+          >
+            <a-select-option value="工商银行">工商银行</a-select-option>
+            <a-select-option value="建设银行">建设银行</a-select-option>
+            <a-select-option value="农业银行">农业银行</a-select-option>
+            <a-select-option value="招商银行">招商银行</a-select-option>
+            <a-select-option value="中国银行">中国银行</a-select-option>
+            <a-select-option value="交通银行">交通银行</a-select-option>
+            <a-select-option value="邮储银行">邮储银行</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { ref, reactive, onMounted } from 'vue';
+import { message } from 'ant-design-vue';
+import { getBankCards, addBankCard } from '../api/finance';
+import { 
+  PlusOutlined
+} from '@ant-design/icons-vue';
+
+export default {
+  name: 'BankCard',
+  components: {
+    PlusOutlined
+  },
+  setup() {
+    // 银行卡数据
+    const bankCards = ref([]);
+    const loading = ref(false);
+    const addBankCardModalVisible = ref(false);
+    const bankCardForm = reactive({
+      name: '',
+      card_number: '',
+      bank_name: ''
+    });
+
+    // 获取银行卡列表
+    const fetchBankCards = async () => {
+      loading.value = true;
+      try {
+        const data = await getBankCards();
+        bankCards.value = data || [];
+      } catch (error) {
+        console.error('获取银行卡列表失败:', error);
+        message.error('获取银行卡列表失败');
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    // 显示添加银行卡弹窗
+    const showAddBankCardModal = () => {
+      bankCardForm.name = '';
+      bankCardForm.card_number = '';
+      bankCardForm.bank_name = '';
+      addBankCardModalVisible.value = true;
+    };
+
+    // 处理添加银行卡
+    const handleAddBankCard = async () => {
+      // 表单验证
+      if (!bankCardForm.name) {
+        message.error('请输入持卡人姓名');
+        return;
+      }
+      if (!bankCardForm.card_number) {
+        message.error('请输入银行卡号');
+        return;
+      }
+      if (!bankCardForm.bank_name) {
+        message.error('请选择银行');
+        return;
+      }
+
+      try {
+        await addBankCard(bankCardForm);
+        message.success('银行卡添加成功');
+        addBankCardModalVisible.value = false;
+        
+        // 刷新银行卡列表
+        fetchBankCards();
+      } catch (error) {
+        console.error('添加银行卡失败:', error);
+        message.error('添加银行卡失败');
+      }
+    };
+
+    onMounted(() => {
+      fetchBankCards();
+    });
+
+    return {
+      bankCards,
+      loading,
+      addBankCardModalVisible,
+      bankCardForm,
+      showAddBankCardModal,
+      handleAddBankCard
+    };
+  }
+};
+</script>
+
+<style scoped>
+.bank-card-container {
+  padding: 0;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.section-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.section-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.empty-data {
+  padding: 32px 0;
+  text-align: center;
+}
+
+.empty-action {
+  margin-top: 16px;
+}
+
+.bank-card {
+  height: 200px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
+  color: white;
+  margin-bottom: 16px;
+  position: relative;
+  overflow: hidden;
+}
+
+.bank-card::before {
+  content: '';
+  position: absolute;
+  top: -50px;
+  right: -50px;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.bank-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.bank-name {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.card-type {
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+.card-number {
+  font-size: 20px;
+  letter-spacing: 2px;
+  margin-bottom: 24px;
+}
+
+.card-holder {
+  font-size: 14px;
+  opacity: 0.8;
+  margin-bottom: 16px;
+}
+
+.action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.action-button :deep(.ant-btn-icon) {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  margin-right: 4px !important;
+}
+
+/* 确保所有按钮中的图标和文字都能正确对齐 */
+.ant-btn {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.ant-btn :deep(.anticon) {
+  display: flex !important;
+  align-items: center !important;
+  line-height: 0 !important;
+}
+
+/* 确保主要按钮中的图标颜色为白色 */
+.ant-btn-primary :deep(.anticon) {
+  color: #fff !important;
+}
+
+/* 确保默认按钮中的图标颜色可见 */
+.ant-btn-default :deep(.anticon) {
+  color: rgba(0, 0, 0, 0.85) !important;
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/Finance.vue b/src/views/Finance.vue
new file mode 100644
index 0000000..74b0346
--- /dev/null
+++ b/src/views/Finance.vue
@@ -0,0 +1,544 @@
+<template>
+  <div class="finance-container">
+    <a-card title="账户管理" :bordered="false">
+      <!-- 账户信息卡片 -->
+      <a-row :gutter="16" class="account-summary">
+        <a-col :span="8">
+          <a-card class="summary-card">
+            <template #title>
+              <div class="card-title">
+                <wallet-outlined />
+                <span>账户余额</span>
+              </div>
+            </template>
+            <div class="amount">
+              <span class="currency">¥</span>
+              <span class="value">{{ accountInfo.total_balance || '0.00' }}</span>
+            </div>
+          </a-card>
+        </a-col>
+        <a-col :span="8">
+          <a-card class="summary-card">
+            <template #title>
+              <div class="card-title">
+                <dollar-outlined />
+                <span>可提现金额</span>
+              </div>
+            </template>
+            <div class="amount">
+              <span class="currency">¥</span>
+              <span class="value">{{ accountInfo.balance || '0.00' }}</span>
+            </div>
+            <div class="action-buttons">
+              <a-button type="primary" @click="showWithdrawalModal">申请提现</a-button>
+              <a-button @click="goToBankCardPage" style="margin-left: 8px">管理银行卡</a-button>
+            </div>
+          </a-card>
+        </a-col>
+        <a-col :span="8">
+          <a-card class="summary-card">
+            <template #title>
+              <div class="card-title">
+                <lock-outlined />
+                <span>锁定金额</span>
+              </div>
+            </template>
+            <div class="amount">
+              <span class="currency">¥</span>
+              <span class="value">{{ accountInfo.lock_balance || '0.00' }}</span>
+            </div>
+          </a-card>
+        </a-col>
+        
+      </a-row>
+
+      <!-- 提现记录表格 -->
+      <div class="withdrawal-list">
+        <div class="section-header">
+          <h3>提现记录</h3>
+          <div class="section-actions">
+            <a-input-search
+              v-model:value="searchText"
+              placeholder="搜索提现记录"
+              style="width: 250px"
+              @search="handleSearch"
+            />
+            <a-button type="primary" @click="refreshData">
+              <reload-outlined style="color: #fff;" />
+              刷新
+            </a-button>
+          </div>
+        </div>
+        
+        <a-table
+          :dataSource="withdrawalList"
+          :loading="loading"
+          :pagination="{
+            total: total,
+            current: currentPage,
+            pageSize: pageSize,
+            showTotal: total => `共 ${total} 条记录`,
+            showSizeChanger: true,
+          }"
+          @change="handleTableChange"
+        >
+          <a-table-column title="提现单号" dataIndex="id" key="id" />
+          <a-table-column title="申请时间" dataIndex="create_time" key="create_time">
+            <template #default="{ text }">
+              {{ formatDate(text) }}
+            </template>
+          </a-table-column>
+          <a-table-column title="提现金额" dataIndex="amount" key="amount">
+            <template #default="{ text }">
+              ¥ {{ text }}
+            </template>
+          </a-table-column>
+          <a-table-column title="状态" dataIndex="status" key="status">
+            <template #default="{ text }">
+              <a-tag :color="getStatusColor(text)">
+                {{ getStatusText(text) }}
+              </a-tag>
+            </template>
+          </a-table-column>
+          <a-table-column title="银行卡" key="bank_card">
+            <template #default="{ record }">
+              {{ record.bank_name }} ({{ record.bank_card_number }})
+            </template>
+          </a-table-column>
+          <a-table-column title="持卡人" dataIndex="name" key="name" />
+          <a-table-column title="更新时间" dataIndex="update_time" key="update_time">
+            <template #default="{ text }">
+              {{ text ? formatDate(text) : '-' }}
+            </template>
+          </a-table-column>
+          <a-table-column title="操作" key="action" width="120px">
+            <template #default="{ record }">
+              <a-popconfirm
+                v-if="record.status === 'PENDING'"
+                title="确定要取消此提现申请吗？"
+                ok-text="确定"
+                cancel-text="取消"
+                @confirm="handleCancelWithdraw(record.id)"
+              >
+                <a-button type="link" danger>
+                  取消申请
+                </a-button>
+              </a-popconfirm>
+              <span v-else-if="record.status === 'CANCELLED'" class="status-text">已取消</span>
+              <span v-else-if="record.status === 'REJECTED'" class="status-text">已驳回</span>
+              <span v-else-if="record.status === 'APPROVED'" class="status-text">处理中</span>
+              <span v-else-if="record.status === 'COMPLETED'" class="status-text">已完成</span>
+            </template>
+          </a-table-column>
+        </a-table>
+      </div>
+    </a-card>
+
+    <!-- 提现申请弹窗 -->
+    <a-modal
+      v-model:visible="withdrawalModalVisible"
+      title="申请提现"
+      @ok="handleWithdrawalSubmit"
+      @cancel="withdrawalModalVisible = false"
+    >
+      <a-form :model="withdrawalForm" layout="vertical">
+        <a-form-item name="amount" label="提现金额" required>
+          <a-input-number
+            v-model:value="withdrawalForm.amount"
+            placeholder="请输入提现金额"
+            style="width: 100%"
+            :min="1"
+            :max="accountInfo.balance"
+            :precision="2"
+          />
+          <div class="form-tip">
+            可提现金额: ¥{{ accountInfo.balance || '0.00' }}，最低提现金额: ¥1.00
+          </div>
+        </a-form-item>
+        <a-form-item name="bank_card_id" label="收款银行账户" required>
+          <a-select
+            v-model:value="withdrawalForm.bank_card_id"
+            placeholder="请选择收款银行账户"
+          >
+            <a-select-option v-for="card in bankCards" :key="card.id" :value="card.id">
+              {{ card.bank_name }} ({{ card.card_number }})
+            </a-select-option>
+          </a-select>
+          <div v-if="bankCards.length === 0" class="form-tip">
+            <a-alert type="warning" message="您还没有添加银行卡，请先添加银行卡" banner />
+            <div style="margin-top: 8px;">
+              <a @click="goToBankCardPage">添加银行卡</a>
+            </div>
+          </div>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { ref, reactive, onMounted } from 'vue';
+import { message } from 'ant-design-vue';
+import { useRouter } from 'vue-router';
+import { 
+  getAccountSummary, 
+  getWithdrawalList, 
+  getBankCards, 
+  applyWithdraw,
+  cancelWithdraw
+} from '../api/finance';
+import { 
+  WalletOutlined, 
+  LockOutlined, 
+  DollarOutlined, 
+  ReloadOutlined
+} from '@ant-design/icons-vue';
+
+export default {
+  name: 'Finance',
+  components: {
+    WalletOutlined,
+    LockOutlined,
+    DollarOutlined,
+    ReloadOutlined
+  },
+  setup() {
+    const router = useRouter();
+
+    // 账户信息
+    const accountInfo = ref({
+      total_balance: '0.00',
+      lock_balance: '0.00',
+      balance: '0.00'
+    });
+
+    // 提现列表数据
+    const withdrawalList = ref([]);
+    const loading = ref(false);
+    const total = ref(0);
+    const currentPage = ref(1);
+    const pageSize = ref(10);
+    const searchText = ref('');
+
+    // 银行卡数据
+    const bankCards = ref([]);
+    const bankCardsLoading = ref(false);
+
+    // 提现申请表单
+    const withdrawalModalVisible = ref(false);
+    const withdrawalForm = reactive({
+      amount: null,
+      bank_card_id: null
+    });
+
+    // 获取账户信息
+    const fetchAccountInfo = async () => {
+      try {
+        const data = await getAccountSummary();
+        accountInfo.value = data;
+      } catch (error) {
+        console.error('获取账户信息失败:', error);
+        message.error('获取账户信息失败');
+      }
+    };
+
+    // 获取提现列表
+    const fetchWithdrawalList = async () => {
+      loading.value = true;
+      try {
+        const params = {
+          page: currentPage.value,
+          pageSize: pageSize.value,
+          keyword: searchText.value
+        };
+        const response = await getWithdrawalList(params);
+        withdrawalList.value = response.items || [];
+        total.value = response.total || 0;
+      } catch (error) {
+        console.error('获取提现列表失败:', error);
+        message.error('获取提现列表失败');
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    // 获取银行卡列表
+    const fetchBankCards = async () => {
+      bankCardsLoading.value = true;
+      try {
+        const data = await getBankCards();
+        bankCards.value = data || [];
+      } catch (error) {
+        console.error('获取银行卡列表失败:', error);
+        message.error('获取银行卡列表失败');
+      } finally {
+        bankCardsLoading.value = false;
+      }
+    };
+
+    // 刷新数据
+    const refreshData = () => {
+      fetchAccountInfo();
+      fetchWithdrawalList();
+      fetchBankCards();
+    };
+
+    // 处理表格变化（分页、排序、筛选）
+    const handleTableChange = (pagination, filters, sorter) => {
+      currentPage.value = pagination.current;
+      pageSize.value = pagination.pageSize;
+      fetchWithdrawalList();
+    };
+
+    // 处理搜索
+    const handleSearch = () => {
+      currentPage.value = 1;
+      fetchWithdrawalList();
+    };
+
+    // 跳转到银行卡管理页面
+    const goToBankCardPage = () => {
+      router.push('/bank-card');
+      if (withdrawalModalVisible.value) {
+        withdrawalModalVisible.value = false;
+      }
+    };
+
+    // 显示提现弹窗
+    const showWithdrawalModal = () => {
+      withdrawalForm.amount = null;
+      withdrawalForm.bank_card_id = null;
+      withdrawalModalVisible.value = true;
+    };
+
+    // 处理提现提交
+    const handleWithdrawalSubmit = async () => {
+      if (!withdrawalForm.amount) {
+        message.error('请输入提现金额');
+        return;
+      }
+      if (!withdrawalForm.bank_card_id) {
+        message.error('请选择收款银行账户');
+        return;
+      }
+      
+      try {
+        await applyWithdraw({
+          bank_card_id: withdrawalForm.bank_card_id,
+          amount: withdrawalForm.amount
+        });
+        message.success('提现申请已提交，请等待审核');
+        withdrawalModalVisible.value = false;
+        
+        // 刷新数据
+        setTimeout(() => {
+          refreshData();
+        }, 1000);
+      } catch (error) {
+        console.error('提现申请失败:', error);
+        message.error('提现申请失败');
+      }
+    };
+
+    // 处理取消提现申请
+    const handleCancelWithdraw = async (id) => {
+      try {
+        await cancelWithdraw(id);
+        message.success('提现申请已取消');
+        
+        // 刷新数据
+        refreshData();
+      } catch (error) {
+        console.error('取消提现申请失败:', error);
+        message.error('取消提现申请失败');
+      }
+    };
+
+    // 格式化日期
+    const formatDate = (dateString) => {
+      if (!dateString) return '-';
+      const date = new Date(dateString);
+      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+    };
+
+    // 获取状态颜色
+    const getStatusColor = (status) => {
+      const statusMap = {
+        PENDING: 'orange',
+        APPROVED: 'blue',
+        COMPLETED: 'green',
+        REJECTED: 'red',
+        CANCELLED: 'gray'
+      };
+      return statusMap[status] || 'default';
+    };
+
+    // 获取状态文本
+    const getStatusText = (status) => {
+      const statusMap = {
+        PENDING: '已申请',
+        APPROVED: '已通过',
+        COMPLETED: '已完成',
+        REJECTED: '已驳回',
+        CANCELLED: '已取消'
+      };
+      return statusMap[status] || '未知状态';
+    };
+
+    onMounted(() => {
+      refreshData();
+    });
+
+    return {
+      accountInfo,
+      withdrawalList,
+      loading,
+      total,
+      currentPage,
+      pageSize,
+      searchText,
+      bankCards,
+      withdrawalModalVisible,
+      withdrawalForm,
+      refreshData,
+      handleTableChange,
+      handleSearch,
+      goToBankCardPage,
+      showWithdrawalModal,
+      handleWithdrawalSubmit,
+      handleCancelWithdraw,
+      formatDate,
+      getStatusColor,
+      getStatusText
+    };
+  }
+};
+</script>
+
+<style scoped>
+.finance-container {
+  padding: 0;
+}
+
+.account-summary {
+  margin-bottom: 24px;
+}
+
+.summary-card {
+  height: 100%;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+  transition: all 0.3s;
+}
+
+.summary-card:hover {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.card-title :deep(.anticon) {
+  margin-right: 8px;
+  font-size: 18px;
+}
+
+.amount {
+  margin-top: 16px;
+  display: flex;
+  align-items: baseline;
+}
+
+.currency {
+  font-size: 16px;
+  margin-right: 4px;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.value {
+  font-size: 28px;
+  font-weight: 500;
+  color: #1a1a1a;
+}
+
+.action-buttons {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.section-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.section-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.withdrawal-list {
+  margin-top: 24px;
+}
+
+.form-tip {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  margin-top: 4px;
+}
+
+.status-text {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 14px;
+}
+
+.action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.action-button :deep(.ant-btn-icon) {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  margin-right: 4px !important;
+}
+
+/* 确保所有按钮中的图标和文字都能正确对齐 */
+.ant-btn {
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+.ant-btn :deep(.anticon) {
+  display: flex !important;
+  align-items: center !important;
+  line-height: 0 !important;
+}
+
+/* 确保主要按钮中的图标颜色为白色 */
+.ant-btn-primary :deep(.anticon) {
+  color: #fff !important;
+}
+
+/* 确保默认按钮中的图标颜色可见 */
+.ant-btn-default :deep(.anticon) {
+  color: rgba(0, 0, 0, 0.85) !important;
+}
+</style> 
\ No newline at end of file