update

Dockerfile

@@ -29,8 +29,8 @@ WORKDIR /app
 # 复制 package.json 和 yarn.lock
 COPY package.json yarn.lock* ./
 
-# 安装依赖，确保 dotenv 被正确安装
+# 安装所有依赖，包括开发依赖
-RUN yarn install --frozen-lockfile && \
+RUN yarn install --frozen-lockfile --production=false && \
     yarn add dotenv@16.3.1 --exact
 
 # 复制项目文件

src/api/finance.js

@@ -79,4 +79,12 @@ export function cancelWithdraw(withdrawId) {
     url: `/api/withdraw/${withdrawId}/cancel`,
     method: 'post'
   });
+}
+
+export function getAccountDetails(params) {
+  return request({
+    url: '/api/account/details',
+    method: 'get',
+    params
+  });
 } 

src/layouts/AdminLayout.vue

@@ -31,6 +31,11 @@
             <template #icon><credit-card-outlined /></template>
             <span>银行卡管理</span>
           </a-menu-item>
+          
+          <a-menu-item key="finance-account-details" @click="() => $router.push('/finance/account-details')">
+            <template #icon><profile-outlined /></template>
+            <span>账户明细</span>
+          </a-menu-item>
         </a-sub-menu>
         
         <a-menu-item key="user-auth" @click="() => $router.push('/user/auth')">
@@ -101,7 +106,8 @@ import {
   DollarOutlined,
   CreditCardOutlined,
   WalletOutlined,
-  UserOutlined
+  UserOutlined,
+  ProfileOutlined
 } from '@ant-design/icons-vue';
 
 export default {
@@ -112,7 +118,8 @@ export default {
     DollarOutlined,
     CreditCardOutlined,
     WalletOutlined,
-    UserOutlined
+    UserOutlined,
+    ProfileOutlined
   },
   setup() {
     const store = useStore();

src/router/index.js

@@ -40,6 +40,12 @@ const routes = [
         component: () => import('../views/BankCard.vue'),
         meta: { title: '银行卡管理', parentTitle: '财务管理', icon: 'credit-card' }
       },
+      {
+        path: 'finance/account-details',
+        name: 'FinanceAccountDetails',
+        component: () => import('../views/AccountDetails.vue'),
+        meta: { title: '账户明细', parentTitle: '财务管理', icon: 'profile' }
+      },
       {
         path: 'bank-card',
         name: 'BankCard',

src/utils/format.js

@@ -0,0 +1,71 @@
+/**
+ * 格式化日期时间
+ * @param {string|Date} date - 日期对象或日期字符串
+ * @param {string} format - 格式化模式，默认为 'YYYY-MM-DD HH:mm:ss'
+ * @returns {string} - 格式化后的日期字符串
+ */
+export function formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
+  if (!date) return '-';
+  
+  const d = typeof date === 'string' ? new Date(date) : date;
+  
+  // 检查日期是否有效
+  if (isNaN(d.getTime())) {
+    return '-';
+  }
+  
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  const hours = String(d.getHours()).padStart(2, '0');
+  const minutes = String(d.getMinutes()).padStart(2, '0');
+  const seconds = String(d.getSeconds()).padStart(2, '0');
+  
+  return format
+    .replace('YYYY', year)
+    .replace('MM', month)
+    .replace('DD', day)
+    .replace('HH', hours)
+    .replace('mm', minutes)
+    .replace('ss', seconds);
+}
+
+/**
+ * 格式化金额，保留两位小数
+ * @param {number|string} amount - 金额
+ * @param {number} decimals - 小数位数，默认为2
+ * @param {string} prefix - 前缀，默认为空
+ * @returns {string} - 格式化后的金额字符串
+ */
+export function formatAmount(amount, decimals = 2, prefix = '') {
+  if (amount === undefined || amount === null) return `${prefix}0.00`;
+  
+  const num = parseFloat(amount);
+  if (isNaN(num)) return `${prefix}0.00`;
+  
+  return `${prefix}${num.toFixed(decimals)}`;
+}
+
+/**
+ * 格式化手机号码，中间四位显示为星号
+ * @param {string} phone - 手机号码
+ * @returns {string} - 格式化后的手机号码
+ */
+export function formatPhone(phone) {
+  if (!phone || phone.length < 11) return phone;
+  
+  return `${phone.substring(0, 3)}****${phone.substring(7)}`;
+}
+
+/**
+ * 格式化银行卡号，仅显示后四位
+ * @param {string} cardNumber - 银行卡号
+ * @returns {string} - 格式化后的银行卡号
+ */
+export function formatBankCard(cardNumber) {
+  if (!cardNumber) return '';
+  
+  if (cardNumber.length <= 4) return cardNumber;
+  
+  return `**** **** **** ${cardNumber.slice(-4)}`;
+} 

src/views/AccountDetails.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="account-details-container">
+    <a-card title="账户明细" :bordered="false">
+      <!-- 筛选区域 -->
+      <div class="filter-container">
+        <a-form layout="inline" :model="filterForm">
+          <a-form-item label="日期范围">
+            <a-range-picker
+              v-model:value="dateRange"
+              format="YYYY-MM-DD"
+              :placeholder="['开始日期', '结束日期']"
+              @change="handleDateChange"
+            />
+          </a-form-item>
+          <a-form-item label="交易类型">
+            <a-select
+              v-model:value="filterForm.type"
+              style="width: 120px"
+              placeholder="全部类型"
+              allowClear
+              @change="handleSearch"
+            >
+              <a-select-option value="INCOME">收入</a-select-option>
+              <a-select-option value="EXPENSE">支出</a-select-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item>
+            <a-button type="primary" @click="handleSearch">查询</a-button>
+            <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
+          </a-form-item>
+        </a-form>
+      </div>
+
+      <!-- 表格区域 -->
+      <a-table
+        :columns="columns"
+        :data-source="detailsList"
+        :pagination="pagination"
+        :loading="loading"
+        @change="handleTableChange"
+        rowKey="id"
+      >
+        <template #bodyCell="{ column, record }">
+          <!-- 金额列 -->
+          <template v-if="column.dataIndex === 'amount'">
+            <span :class="record.type === 'INCOME' ? 'income-amount' : 'expense-amount'">
+              {{ record.type === 'INCOME' ? '+' : '-' }}{{ record.amount.toFixed(2) }}
+            </span>
+          </template>
+          
+          <!-- 类型列 -->
+          <template v-if="column.dataIndex === 'type'">
+            <a-tag :color="record.type === 'INCOME' ? 'green' : 'red'">
+              {{ record.type === 'INCOME' ? '收入' : '支出' }}
+            </a-tag>
+          </template>
+          
+          <!-- 交易号列 -->
+          <template v-if="column.dataIndex === 'transaction_id'">
+            <span v-if="record.transaction_id">{{ record.transaction_id }}</span>
+            <span v-else>-</span>
+          </template>
+        </template>
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { ref, reactive, onMounted, watch } from 'vue';
+import { getAccountDetails } from '../api/finance';
+import { message } from 'ant-design-vue';
+import { formatDate } from '../utils/format';
+
+export default {
+  name: 'AccountDetails',
+  setup() {
+    // 筛选表单
+    const filterForm = reactive({
+      start_date: '',
+      end_date: '',
+      type: undefined
+    });
+    
+    // 日期范围
+    const dateRange = ref([]);
+    
+    // 表格列定义
+    const columns = [
+      {
+        title: '交易时间',
+        dataIndex: 'create_time',
+        width: 180,
+        sorter: true,
+        customRender: ({ text }) => formatDate(text)
+      },
+      {
+        title: '交易类型',
+        dataIndex: 'type',
+        width: 100
+      },
+      {
+        title: '金额(元)',
+        dataIndex: 'amount',
+        width: 120,
+        align: 'right'
+      },
+      {
+        title: '交易描述',
+        dataIndex: 'description'
+      },
+      {
+        title: '交易号',
+        dataIndex: 'transaction_id',
+        width: 180
+      }
+    ];
+    
+    // 明细列表数据
+    const detailsList = ref([]);
+    // 加载状态
+    const loading = ref(false);
+    
+    // 分页配置
+    const pagination = reactive({
+      current: 1,
+      pageSize: 10,
+      total: 0,
+      showSizeChanger: true,
+      showTotal: (total) => `共 ${total} 条记录`
+    });
+    
+    // 处理日期变化
+    const handleDateChange = (dates, dateStrings) => {
+      filterForm.start_date = dateStrings[0] || '';
+      filterForm.end_date = dateStrings[1] || '';
+    };
+    
+    // 获取账户明细列表
+    const fetchAccountDetails = async () => {
+      loading.value = true;
+      try {
+        const params = {
+          skip: (pagination.current - 1) * pagination.pageSize,
+          limit: pagination.pageSize,
+          ...filterForm
+        };
+        
+        // 移除空值
+        Object.keys(params).forEach(key => {
+          if (params[key] === '' || params[key] === undefined) {
+            delete params[key];
+          }
+        });
+        
+        console.log('请求参数:', params);
+        const response = await getAccountDetails(params);
+        console.log('API返回数据:', response);
+        
+        // 根据request.js的处理，response已经是data部分了
+        detailsList.value = response?.items || [];
+        pagination.total = response?.total || 0;
+        console.log('处理后的列表数据:', detailsList.value);
+      } catch (error) {
+        console.error('获取账户明细失败:', error);
+        message.error('获取账户明细失败，请稍后重试');
+        detailsList.value = [];
+        pagination.total = 0;
+      } finally {
+        loading.value = false;
+      }
+    };
+    
+    // 处理查询
+    const handleSearch = () => {
+      pagination.current = 1;
+      fetchAccountDetails();
+    };
+    
+    // 处理重置
+    const handleReset = () => {
+      filterForm.start_date = '';
+      filterForm.end_date = '';
+      filterForm.type = undefined;
+      dateRange.value = [];
+      pagination.current = 1;
+      fetchAccountDetails();
+    };
+    
+    // 处理表格变化（排序、分页）
+    const handleTableChange = (pag) => {
+      pagination.current = pag.current;
+      pagination.pageSize = pag.pageSize;
+      fetchAccountDetails();
+    };
+    
+    // 组件挂载时获取数据
+    onMounted(() => {
+      fetchAccountDetails();
+    });
+    
+    return {
+      filterForm,
+      dateRange,
+      columns,
+      detailsList,
+      loading,
+      pagination,
+      handleDateChange,
+      handleSearch,
+      handleReset,
+      handleTableChange,
+      formatDate
+    };
+  }
+};
+</script>
+
+<style scoped>
+.account-details-container {
+  padding: 0;
+}
+
+.filter-container {
+  margin-bottom: 16px;
+}
+
+.income-amount {
+  color: #52c41a;
+  font-weight: 500;
+}
+
+.expense-amount {
+  color: #f5222d;
+  font-weight: 500;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 16px;
+}
+
+:deep(.ant-table-thead > tr > th) {
+  background-color: #fafafa;
+}
+</style> 

src/views/Finance.vue

@@ -15,6 +15,9 @@
               <span class="currency">¥</span>
               <span class="value">{{ accountInfo.total_balance || '0.00' }}</span>
             </div>
+            <div class="account-details-link">
+              <a @click="goToAccountDetails">查看账户明细 <right-outlined /></a>
+            </div>
           </a-card>
         </a-col>
         <a-col :span="8">
@@ -177,8 +180,8 @@
 </template>
 
 <script>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted, computed } from 'vue';
-import { message } from 'ant-design-vue';
+import { message, Modal } from 'ant-design-vue';
 import { useRouter } from 'vue-router';
 import { 
   getAccountSummary, 
@@ -191,8 +194,10 @@ import {
   WalletOutlined, 
   LockOutlined, 
   DollarOutlined, 
-  ReloadOutlined
+  ReloadOutlined,
+  RightOutlined
 } from '@ant-design/icons-vue';
+import { formatDate } from '../utils/format';
 
 export default {
   name: 'Finance',
@@ -200,7 +205,8 @@ export default {
     WalletOutlined,
     LockOutlined,
     DollarOutlined,
-    ReloadOutlined
+    ReloadOutlined,
+    RightOutlined
   },
   setup() {
     const router = useRouter();
@@ -354,13 +360,6 @@ export default {
       }
     };
 
-    // 格式化日期
-    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 = {
@@ -385,6 +384,11 @@ export default {
       return statusMap[status] || '未知状态';
     };
 
+    // 跳转到账户明细页面
+    const goToAccountDetails = () => {
+      router.push('/finance/account-details');
+    };
+
     onMounted(() => {
       refreshData();
     });
@@ -409,7 +413,8 @@ export default {
       handleCancelWithdraw,
       formatDate,
       getStatusColor,
-      getStatusText
+      getStatusText,
+      goToAccountDetails
     };
   }
 };
@@ -466,10 +471,25 @@ export default {
   color: #1a1a1a;
 }
 
+.account-details-link {
+  margin-top: 16px;
+  text-align: right;
+}
+
+.account-details-link a {
+  color: #1890ff;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.account-details-link a:hover {
+  color: #40a9ff;
+}
+
 .action-buttons {
   margin-top: 16px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
 }
 
 .section-header {