diff --git a/src/apis/admin.ts b/src/apis/admin.ts
index e3b775c..6b6885c 100644
--- a/src/apis/admin.ts
+++ b/src/apis/admin.ts
@@ -46,10 +46,10 @@ export const getBankCardInfo = (params:any) => request.get('/v1/bank_card/bank_c
 export const delBankCard = (params:any) => request.post('/v1/bank_card/delete_bank_card',params)
 
 // 发票管理-开票记录
-export const invoiceList = (params:any) => request.get('/v1/order/invoice_list',{params})
+export const invoiceList = (params:any) => request.get('/v1/invoice/invoice_list',{params})
 
 // 发票管理-开发记录详情
-export const invoiceDetail = (id:any) => request.delete(`/v1/order/invoice_detail/${id}`)
+export const invoiceDetail = (id:any) => request.delete(`/v1/invoice/invoice_detail/${id}`)
 
 // 获取订单列表
 export const getOrderList = (params:any) => request.get('/v1/order/order_list',{params})
\ No newline at end of file
diff --git a/src/views/admin/account/cost/exchange/index.vue b/src/views/admin/account/cost/exchange/index.vue
index 934887d..ee8b172 100644
--- a/src/views/admin/account/cost/exchange/index.vue
+++ b/src/views/admin/account/cost/exchange/index.vue
@@ -8,224 +8,201 @@
       <a-breadcrumb-item>算力点兑换</a-breadcrumb-item>
     </a-breadcrumb>
 
-    <!-- 页面标题 -->
-    <div class="page-header">
-      <h1 class="page-title">算力点兑换</h1>
-      <p class="page-description">使用余额兑换算力点，提升计算能力</p>
-    </div>
+
+    <!-- 余额卡片 -->
+    <a-card class="balance-card" :bordered="false">
+      <div class="balance-info">
+        <div class="balance-item">
+          <div class="balance-label">
+
+            <span class="label-text">我的余额</span>
+          </div>
+          <div class="balance-value">
+            <span class="currency">¥</span>
+            <span class="amount">{{ formatCurrency(balance) }}</span>
+          </div>
+        </div>
+        <div class="balance-item">
+          <div class="balance-label">
+
+            <span class="label-text">算力点</span>
+          </div>
+          <div class="balance-value">
+            <span class="points">{{ formatPoints(points) }}</span>
+
+          </div>
+        </div>
+      </div>
+
+    </a-card>
+
+
+    <!-- 兑换卡片 -->
+    <a-card class="exchange-card" title="兑换算力点">
+      <div class="exchange-content">
+        <!-- 兑换金额选择 -->
+        <div class="exchange-section">
+          <div class="amount-options">
+            <div class="section-title">选择兑换金额</div>
+            <a-button v-for="option in amountOptions" :key="option.value"
+              :class="['amount-option', { 'selected': selectedAmount === option.value }]"
+              @click="selectAmount(option.value)" size="large">
+              <div class="amount-option-content">
+                <div class="amount-number">{{ option.value }}</div>
+              </div>
+            </a-button>
+          </div>
+
+          <!-- 自定义输入 -->
+          <div class="custom-amount">
+            <a-input-group compact>
+              <a-input v-model:value="customAmount" placeholder="输入其他金额" size="large" style="width: calc(100% - 120px)"
+                @change="handleCustomAmountChange" :disabled="loading" />
+              <!-- <a-button type="primary" size="large" style="width: 120px" :disabled="!isCustomAmountValid || loading"
+                @click="handleCustomAmountConfirm">
+                确认
+              </a-button> -->
+            </a-input-group>
+            <p class="input-name">用户自定义输入算力点数量</p>
+            <div v-if="customAmountError" class="error-text">
+              <ExclamationCircleOutlined />
+              {{ customAmountError }}
+            </div>
+          </div>
+        </div>
+
+        <!-- 兑换规则说明 -->
+        <div class="exchange-section">
+          <h3 class="section-title">兑换规则</h3>
+          <div class="exchange-rules">
+            <div class="rule-item">
+              <CheckCircleOutlined class="rule-icon" />
+              <span>算力点兑换比例为人民币 <strong>1元 = 1算力点</strong></span>
+            </div>
+            <div class="rule-item">
+              <ExclamationCircleOutlined class="rule-icon" />
+              <span><strong>算力点不可退</strong>，兑换前请确认需求</span>
+            </div>
+            <div class="rule-item">
+              <InfoCircleOutlined class="rule-icon" />
+              <span>兑换后算力点立即生效，可用于平台所有计算服务</span>
+            </div>
+            <div class="rule-item">
+              <SafetyOutlined class="rule-icon" />
+              <span>兑换过程安全加密，保障您的资金安全</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 兑换信息展示 -->
+        <div v-if="selectedExchangeAmount > 0" class="exchange-preview">
+          <div class="preview-card">
+            <div class="preview-header">
+              <div class="preview-title">兑换明细</div>
+              <a-button type="text" @click="clearSelection">
+                <CloseOutlined />
+              </a-button>
+            </div>
+            <div class="preview-content">
+              <div class="preview-item">
+                <span class="preview-label">兑换金额：</span>
+                <span class="preview-value">¥{{ selectedExchangeAmount }}</span>
+              </div>
+              <div class="preview-item">
+                <span class="preview-label">获得算力点：</span>
+                <span class="preview-value points-value">{{ selectedExchangeAmount }} 算力点</span>
+              </div>
+              <div class="preview-item">
+                <span class="preview-label">兑换后余额：</span>
+                <span class="preview-value">¥{{ formatCurrency(balance - selectedExchangeAmount) }}</span>
+              </div>
+              <div class="preview-item">
+                <span class="preview-label">兑换后算力点：</span>
+                <span class="preview-value points-value">{{ formatPoints(points + selectedExchangeAmount) }}
+                  算力点</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 用户协议确认 -->
+        <div class="agreement-section">
+          <a-checkbox v-model:checked="agreementChecked" :disabled="loading">
+            在确认兑换算力点前，我已阅读并确认
+            <a @click="showAgreementModal" class="agreement-link">《用户协议》</a>
+          </a-checkbox>
+          <div v-if="!agreementChecked && showAgreementError" class="error-text">
+            请阅读并确认用户协议
+          </div>
+        </div>
+
+        <!-- 操作按钮 -->
+        <div class="action-buttons">
+          <a-button type="primary" size="large" :loading="loading" :disabled="!canExchange" @click="handleExchange"
+            class="exchange-button">
+            <template #icon>
+              <ThunderboltOutlined />
+            </template>
+            确认兑换
+          </a-button>
+          <a-button size="large" @click="handleCancel" :disabled="loading" class="cancel-button">
+            取消
+          </a-button>
+        </div>
+      </div>
+    </a-card>
 
     <!-- 主要内容区域 -->
     <div class="main-content">
-      <!-- 余额卡片 -->
-      <a-card class="balance-card" :bordered="false">
-        <div class="balance-info">
-          <div class="balance-item">
-            <div class="balance-label">
-              <span class="icon-wrapper">
-                <DollarCircleOutlined />
-              </span>
-              <span class="label-text">我的余额</span>
-            </div>
-            <div class="balance-value">
-              <span class="currency">¥</span>
-              <span class="amount">{{ formatCurrency(balance) }}</span>
-            </div>
-          </div>
-          <div class="balance-item">
-            <div class="balance-label">
-              <span class="icon-wrapper">
-                <ThunderboltOutlined />
-              </span>
-              <span class="label-text">当前算力点</span>
-            </div>
-            <div class="balance-value">
-              <span class="points">{{ formatPoints(points) }}</span>
-              <span class="points-unit">算力点</span>
-            </div>
-          </div>
-        </div>
-        <div class="balance-tips">
-          <InfoCircleOutlined />
-          <span>余额可用于兑换算力点，算力点可用于平台计算服务</span>
-        </div>
+      <a-card class="history-card" title="算力点兑换历史">
+        <a-table :columns="historyColumns" :data-source="exchangeHistory" row-key="key" :pagination="false">
+          <!-- 自定义状态列的渲染 -->
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'status'">
+              <span :style="{ color: getStatusColor(record.status) }">{{ getStatusText(record.status) }}</span>
+            </template>
+            <template v-else-if="column.key === 'amount' || column.key === 'points'">
+              <span>{{ formatCurrency(record.amount) }}</span>
+            </template>
+            <template v-else>
+              {{ record[column.dataIndex] }}
+            </template>
+          </template>
+        </a-table>
       </a-card>
 
-      <!-- 兑换卡片 -->
-      <a-card class="exchange-card" title="兑换算力点">
-        <div class="exchange-content">
-          <!-- 兑换金额选择 -->
-          <div class="exchange-section">
-            <h3 class="section-title">选择兑换金额</h3>
-            <p class="section-subtitle">请选择或输入要兑换的金额</p>
-            
-            <div class="amount-options">
-              <a-button
-                v-for="option in amountOptions"
-                :key="option.value"
-                :class="['amount-option', { 'selected': selectedAmount === option.value }]"
-                @click="selectAmount(option.value)"
-                size="large"
-              >
-                <div class="amount-option-content">
-                  <div class="amount-number">¥{{ option.value }}</div>
-                  <div class="amount-points">= {{ option.value }} 算力点</div>
-                </div>
-              </a-button>
-            </div>
 
-            <!-- 自定义输入 -->
-            <div class="custom-amount">
-              <a-input-group compact>
-                <a-input
-                  v-model:value="customAmount"
-                  placeholder="输入其他金额"
-                  size="large"
-                  style="width: calc(100% - 120px)"
-                  @change="handleCustomAmountChange"
-                  :disabled="loading"
-                />
-                <a-button
-                  type="primary"
-                  size="large"
-                  style="width: 120px"
-                  :disabled="!isCustomAmountValid || loading"
-                  @click="handleCustomAmountConfirm"
-                >
-                  确认
-                </a-button>
-              </a-input-group>
-              <div v-if="customAmountError" class="error-text">
-                <ExclamationCircleOutlined />
-                {{ customAmountError }}
-              </div>
-            </div>
-          </div>
 
-          <!-- 兑换规则说明 -->
-          <div class="exchange-section">
-            <h3 class="section-title">兑换规则</h3>
-            <div class="exchange-rules">
-              <div class="rule-item">
-                <CheckCircleOutlined class="rule-icon" />
-                <span>算力点兑换比例为人民币 <strong>1元 = 1算力点</strong></span>
-              </div>
-              <div class="rule-item">
-                <ExclamationCircleOutlined class="rule-icon" />
-                <span><strong>算力点不可退</strong>，兑换前请确认需求</span>
-              </div>
-              <div class="rule-item">
-                <InfoCircleOutlined class="rule-icon" />
-                <span>兑换后算力点立即生效，可用于平台所有计算服务</span>
-              </div>
-              <div class="rule-item">
-                <SafetyOutlined class="rule-icon" />
-                <span>兑换过程安全加密，保障您的资金安全</span>
-              </div>
-            </div>
-          </div>
 
-          <!-- 兑换信息展示 -->
-          <div v-if="selectedExchangeAmount > 0" class="exchange-preview">
-            <div class="preview-card">
-              <div class="preview-header">
-                <div class="preview-title">兑换明细</div>
-                <a-button type="text" @click="clearSelection">
-                  <CloseOutlined />
-                </a-button>
-              </div>
-              <div class="preview-content">
-                <div class="preview-item">
-                  <span class="preview-label">兑换金额：</span>
-                  <span class="preview-value">¥{{ selectedExchangeAmount }}</span>
-                </div>
-                <div class="preview-item">
-                  <span class="preview-label">获得算力点：</span>
-                  <span class="preview-value points-value">{{ selectedExchangeAmount }} 算力点</span>
-                </div>
-                <div class="preview-item">
-                  <span class="preview-label">兑换后余额：</span>
-                  <span class="preview-value">¥{{ formatCurrency(balance - selectedExchangeAmount) }}</span>
-                </div>
-                <div class="preview-item">
-                  <span class="preview-label">兑换后算力点：</span>
-                  <span class="preview-value points-value">{{ formatPoints(points + selectedExchangeAmount) }} 算力点</span>
-                </div>
-              </div>
-            </div>
-          </div>
 
-          <!-- 用户协议确认 -->
-          <div class="agreement-section">
-            <a-checkbox v-model:checked="agreementChecked" :disabled="loading">
-              在确认兑换算力点前，我已阅读并确认
-              <a @click="showAgreementModal" class="agreement-link">《用户协议》</a>
-            </a-checkbox>
-            <div v-if="!agreementChecked && showAgreementError" class="error-text">
-              请阅读并确认用户协议
-            </div>
-          </div>
-
-          <!-- 操作按钮 -->
-          <div class="action-buttons">
-            <a-button
-              type="primary"
-              size="large"
-              :loading="loading"
-              :disabled="!canExchange"
-              @click="handleExchange"
-              class="exchange-button"
-            >
-              <template #icon><ThunderboltOutlined /></template>
-              确认兑换
-            </a-button>
-            <a-button
-              size="large"
-              @click="handleCancel"
-              :disabled="loading"
-              class="cancel-button"
-            >
-              取消
-            </a-button>
-          </div>
-        </div>
-      </a-card>
 
     </div>
 
     <!-- 用户协议模态框 -->
-    <a-modal
-      v-model:visible="agreementModalVisible"
-      title="用户协议"
-      width="800px"
-      :footer="null"
-    >
+    <a-modal v-model:visible="agreementModalVisible" title="用户协议" width="800px" :footer="null">
       <div class="agreement-content">
         <h3>算力点兑换服务协议</h3>
         <p>欢迎使用算力点兑换服务。在兑换算力点前，请您仔细阅读以下协议内容：</p>
-        
+
         <h4>一、兑换规则</h4>
         <p>1. 算力点兑换比例为1元人民币兑换1算力点。</p>
         <p>2. 最小兑换金额为100元，最大单次兑换金额为10000元。</p>
         <p>3. 兑换操作一经确认，不可撤销或退款。</p>
-        
+
         <h4>二、使用规则</h4>
         <p>1. 算力点可用于平台提供的各项计算服务。</p>
         <p>2. 算力点不设有效期，但平台保留根据业务调整的权利。</p>
         <p>3. 算力点不可转让、不可提现、不可兑换为现金。</p>
-        
+
         <h4>三、免责声明</h4>
         <p>1. 如因系统维护、升级等需要暂停服务，平台将提前公告。</p>
         <p>2. 用户应妥善保管账户信息，因用户原因造成的损失平台不承担责任。</p>
-        
+
         <div class="agreement-footer">
           <a-checkbox v-model:checked="modalAgreementChecked">
             我已阅读并同意以上协议
           </a-checkbox>
-          <a-button
-            type="primary"
-            @click="handleAgreementConfirm"
-            :disabled="!modalAgreementChecked"
-          >
+          <a-button type="primary" @click="handleAgreementConfirm" :disabled="!modalAgreementChecked">
             确认并关闭
           </a-button>
         </div>
@@ -235,57 +212,31 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import { 
-  DollarCircleOutlined, 
-  ThunderboltOutlined, 
+import { ref, computed, onMounted } from 'vue'
+import {
+  DollarCircleOutlined,
+  ThunderboltOutlined,
   InfoCircleOutlined,
   CheckCircleOutlined,
   ExclamationCircleOutlined,
   SafetyOutlined,
   CloseOutlined
 } from '@ant-design/icons-vue'
-import { message, Modal } from 'ant-design-vue'
+import { message, Modal, Divider } from 'ant-design-vue'
 
 // 用户余额和算力点
-const balance = ref(3568.50)
+const balance = ref(3568.5)
 const points = ref(1250)
 
 // 金额选项
 const amountOptions = ref([
-  { value: 100, label: '100元' },
-  { value: 200, label: '200元' },
-  { value: 500, label: '500元' },
-  { value: 1000, label: '1000元' },
-  { value: 2000, label: '2000元' },
-  { value: 5000, label: '5000元' }
-])
-
-// 选择的金额
-const selectedAmount = ref(0)
-const customAmount = ref('')
-const customAmountError = ref('')
-
-// 用户协议确认
-const agreementChecked = ref(false)
-const showAgreementError = ref(false)
-
-// 加载状态
-const loading = ref(false)
-
-// 模态框
-const agreementModalVisible = ref(false)
-const modalAgreementChecked = ref(false)
-
-// 兑换记录
-const exchangeHistory = ref([
-  { key: 1, amount: 1000, points: 1000, time: '2024-03-15 14:30:22', status: 'success' },
-  { key: 2, amount: 500, points: 500, time: '2024-03-10 09:15:45', status: 'success' },
-  { key: 3, amount: 2000, points: 2000, time: '2024-03-05 16:20:33', status: 'success' },
-  { key: 4, amount: 100, points: 100, time: '2024-02-28 11:45:12', status: 'success' },
-  { key: 5, amount: 5000, points: 5000, time: '2024-02-20 13:05:27', status: 'success' }
+  { value: 100, label: '100' },
+  { value: 200, label: '200' },
+  { value: 1000, label: '1000' },
+  { value: 5000, label: '5000' }
 ])
 
+// 注意：这里只定义 columns 结构，不包含 customRender
 const historyColumns = [
   {
     title: '兑换金额',
@@ -312,6 +263,31 @@ const historyColumns = [
   }
 ]
 
+// 选择的金额
+const selectedAmount = ref(0)
+const customAmount = ref('')
+const customAmountError = ref('')
+
+// 用户协议确认
+const agreementChecked = ref(false)
+const showAgreementError = ref(false)
+
+// 加载状态
+const loading = ref(false)
+
+// 模态框
+const agreementModalVisible = ref(false)
+const modalAgreementChecked = ref(false)
+
+// 兑换记录
+const exchangeHistory = ref([
+  { key: 1, amount: 1000, points: 1000, time: '2024-03-15 14:30:22', status: 'success' },
+  { key: 2, amount: 500, points: 500, time: '2024-03-10 09:15:45', status: 'success' },
+  { key: 3, amount: 2000, points: 2000, time: '2024-03-05 16:20:33', status: 'success' },
+  { key: 4, amount: 100, points: 100, time: '2024-02-28 11:45:12', status: 'success' },
+  { key: 5, amount: 5000, points: 5000, time: '2024-02-20 13:05:27', status: 'success' }
+])
+
 // 计算选中的兑换金额
 const selectedExchangeAmount = computed(() => {
   if (selectedAmount.value > 0) {
@@ -323,10 +299,10 @@ const selectedExchangeAmount = computed(() => {
 
 // 检查是否可以兑换
 const canExchange = computed(() => {
-  return selectedExchangeAmount.value > 0 && 
-         agreementChecked.value && 
-         selectedExchangeAmount.value <= balance.value &&
-         !loading.value
+  return selectedExchangeAmount.value > 0 &&
+    agreementChecked.value &&
+    selectedExchangeAmount.value <= balance.value &&
+    !loading.value
 })
 
 // 检查自定义金额是否有效
@@ -420,18 +396,18 @@ const handleAgreementConfirm = () => {
 // 处理兑换
 const handleExchange = () => {
   showAgreementError.value = false
-  
+
   if (!agreementChecked.value) {
     showAgreementError.value = true
     message.error('请先阅读并确认用户协议')
     return
   }
-  
+
   if (selectedExchangeAmount.value > balance.value) {
     message.error('兑换金额不能超过余额')
     return
   }
-  
+
   Modal.confirm({
     title: '确认兑换',
     content: `您确定要兑换 ¥${selectedExchangeAmount.value} 获得 ${selectedExchangeAmount.value} 算力点吗？此操作不可撤销。`,
@@ -444,17 +420,15 @@ const handleExchange = () => {
 // 执行兑换
 const performExchange = () => {
   loading.value = true
-  
+
   // 模拟API请求
   setTimeout(() => {
-    // 更新余额和算力点
     balance.value -= selectedExchangeAmount.value
     points.value += selectedExchangeAmount.value
-    
-    // 添加兑换记录
+
     const now = new Date()
     const timeStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
-    
+
     exchangeHistory.value.unshift({
       key: exchangeHistory.value.length + 1,
       amount: selectedExchangeAmount.value,
@@ -462,13 +436,11 @@ const performExchange = () => {
       time: timeStr,
       status: 'success'
     })
-    
-    // 重置选择
+
     clearSelection()
     agreementChecked.value = false
-    
     loading.value = false
-    
+
     message.success(`兑换成功！获得 ${selectedExchangeAmount.value} 算力点`)
   }, 1500)
 }
@@ -480,11 +452,6 @@ const handleCancel = () => {
   showAgreementError.value = false
 }
 
-// 格式化时间
-const formatTime = (timeStr) => {
-  return timeStr
-}
-
 // 获取状态颜色
 const getStatusColor = (status) => {
   const colors = {
@@ -505,14 +472,13 @@ const getStatusText = (status) => {
   return texts[status] || status
 }
 
-// 初始化加载
 onMounted(() => {
-  // 可以在这里加载用户余额和算力点数据
   console.log('页面加载完成')
 })
 </script>
 
 <style scoped>
+/* 你的样式保持不变 */
 .points-exchange-page {
   padding: 20px;
   background-color: #f0f2f5;
@@ -540,10 +506,7 @@ onMounted(() => {
   margin: 0;
 }
 
-.main-content {
-  max-width: 1200px;
-  margin: 0 auto;
-}
+.main-content {}
 
 .balance-card {
   margin-bottom: 20px;
@@ -581,24 +544,25 @@ onMounted(() => {
 }
 
 .label-text {
-  font-size: 14px;
-  color: rgba(0, 0, 0, 0.45);
+  font-size: 20px;
+  font-weight: 500;
+  color: rgba(56, 56, 56, 1);
 }
 
 .balance-value {
-  font-size: 28px;
+  font-size: 18px;
   font-weight: 600;
   color: rgba(0, 0, 0, 0.85);
 }
 
 .balance-value .currency {
   font-size: 20px;
-  color: #52c41a;
+  color: rgba(56, 56, 56, 1);
   margin-right: 4px;
 }
 
 .balance-value .points {
-  color: #722ed1;
+  color: rgba(56, 56, 56, 1);
 }
 
 .balance-value .points-unit {
@@ -648,8 +612,8 @@ onMounted(() => {
 
 .amount-options {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 6px;
   margin-bottom: 24px;
 }
 
@@ -661,7 +625,7 @@ onMounted(() => {
 
 .amount-option {
   height: auto !important;
-  padding: 16px !important;
+  /* padding: 6px !important; */
   border-radius: 8px !important;
   border: 2px solid #f0f0f0 !important;
   background: #fff !important;
@@ -696,7 +660,24 @@ onMounted(() => {
 }
 
 .custom-amount {
+  width: 460px;
   margin-bottom: 24px;
+  margin-left: 170px;
+
+  input {
+    height: 45px;
+  }
+
+  .input-name {
+    width: 350px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(166, 166, 166, 1);
+    height: 35px;
+    line-height: 35px;
+  }
+
 }
 
 .error-text {
@@ -888,7 +869,6 @@ onMounted(() => {
   border-top: 1px solid #f0f0f0;
 }
 
-/* 加载状态 */
 :deep(.ant-btn-loading) {
   opacity: 0.8;
 }
diff --git a/src/views/admin/account/cost/myOrder/index.vue b/src/views/admin/account/cost/myOrder/index.vue
index 9e701b0..4cd8903 100644
--- a/src/views/admin/account/cost/myOrder/index.vue
+++ b/src/views/admin/account/cost/myOrder/index.vue
@@ -38,13 +38,13 @@
                 <div class="batch-operations" style="margin-bottom: 16px;">
                     <a-space>
                         <!--  :disabled="selectedRowKeys.length === 0" -->
-                        <a-button 
+                        <!-- <a-button 
                             type="primary" 
                             @click="handleBatchInvoice"
                            
                         >
                             批量去开票
-                        </a-button>
+                        </a-button> -->
                         <span v-if="selectedRowKeys.length > 0">
                             已选择 {{ selectedRowKeys.length }} 条记录
                         </span>
@@ -95,9 +95,9 @@
                                 {{ getPayStatusText(record.pay_status) }}
                             </a-tag>
                         </template>
-                        <template v-if="column.key === 'action'">
+                        <!-- <template v-if="column.key === 'action'">
                             <a-space>
-                                <!--   :disabled="!canApplyInvoice(record)" -->
+                               
                                 <a-button 
                                     type="link" 
                                     size="small"
@@ -107,7 +107,7 @@
                                     去开票
                                 </a-button>
                             </a-space>
-                        </template>
+                        </template> -->
                     </template>
                 </a-table>
             </a-card>
@@ -485,12 +485,12 @@ const columns = ref([
         key: 'amount',
         width: 120
     },
-    { 
-        title: '操作', 
-        key: 'action', 
-        width: 100,
-        align: 'center'
-    }
+    // { 
+    //     title: '操作', 
+    //     key: 'action', 
+    //     width: 100,
+    //     align: 'center'
+    // }
 ])
 
 // 行选择配置
diff --git a/src/views/admin/fileStore/index.vue b/src/views/admin/fileStore/index.vue
index 04de818..e5edeb4 100644
--- a/src/views/admin/fileStore/index.vue
+++ b/src/views/admin/fileStore/index.vue
@@ -1,255 +1,345 @@
 <template>
-  <div class="container">
-    <!-- 标题 -->
-    <div class="header">
-      <h1>文件存储</h1>
+  <div class="file-storage-page">
+    <div class="page-header">
+      <h2 class="page-title">文件存储</h2>
+      <a-button type="primary" @click="showModal" class="create-btn">
+        <template #icon><PlusOutlined /></template>
+        新建存储
+      </a-button>
     </div>
 
-    <!-- 区域选择 -->
-    <div class="region-section">
-      <h2 class="section-title">选择存储区域</h2>
-      <div class="region-tabs">
-        <button
-          v-for="region in regions"
-          :key="region.id"
-          :class="['region-tab', { active: selectedRegion === region.id }]"
-          @click="selectRegion(region.id)"
+    <!-- 表格 -->
+    <div class="table-container">
+      <a-table
+        :columns="columns"
+        :data-source="storageList"
+        :row-key="record => record.id"
+        :pagination="{ pageSize: 8 }"
+        class="storage-table"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'size'">
+            <span class="data-cell">{{ record.size }} GB</span>
+          </template>
+          <template v-else-if="column.key === 'duration'">
+            <span class="data-cell">{{ record.duration }} 天</span>
+          </template>
+          <template v-else-if="column.key === 'cost'">
+            <span class="cost-cell">¥{{ record.cost.toFixed(2) }}</span>
+          </template>
+          <template v-else-if="column.key === 'name'">
+            <div class="name-cell">
+              <FolderOutlined class="folder-icon" />
+              <span>{{ record.name }}</span>
+            </div>
+          </template>
+        </template>
+      </a-table>
+    </div>
+
+    <!-- 创建弹窗 -->
+    <a-modal
+      v-model:open="modalVisible"
+      title="创建存储空间"
+      @ok="handleCreate"
+      @cancel="modalVisible = false"
+      :width="520"
+      class="create-modal"
+    >
+      <a-form
+        :model="createForm"
+        :label-col="{ span: 6 }"
+        :wrapper-col="{ span: 18 }"
+        ref="createFormRef"
+        class="create-form"
+      >
+        <a-form-item label="存储名称" name="name" :rules="[{ required: true, message: '请输入存储名称' }]">
+          <a-input 
+            v-model:value="createForm.name" 
+            placeholder="请输入存储空间名称"
+            size="large"
+          />
+        </a-form-item>
+
+        <a-form-item
+          label="存储大小"
+          name="size"
+          :rules="[{ required: true, message: '请输入存储大小' }, { type: 'number', min: 1, message: '至少1GB' }]"
         >
-          {{ region.name }}
-        </button>
-      </div>
-    </div>
+          <a-input-number
+            v-model:value="createForm.size"
+            :min="1"
+            :max="10000"
+            style="width: 100%"
+            size="large"
+            addon-after="GB"
+          />
+        </a-form-item>
 
-    <!-- 中心图标 -->
-    <div class="center-section">
-      <div class="center-icon">
-        <i class="icon-book"></i>
-      </div>
-    </div>
+        <a-form-item
+          label="购买时长"
+          name="duration"
+          :rules="[{ required: true, message: '请输入购买时长' }, { type: 'number', min: 1, message: '至少1天' }]"
+        >
+          <a-input-number
+            v-model:value="createForm.duration"
+            :min="1"
+            :max="365"
+            style="width: 100%"
+            size="large"
+            addon-after="天"
+          />
+        </a-form-item>
 
-    <!-- 主要操作按钮 -->
-    <div class="action-section">
-      <button class="btn-primary" @click="initializeStorage">
-        初始化文件存储
-      </button>
-      <p class="action-hint">将在 {{ getSelectedRegionName() }} 创建存储空间</p>
-    </div>
-
-    <!-- 底部帮助链接 -->
-    <div class="help-section">
-      <div class="help-links">
-        <a href="#" class="link" @click.prevent="viewHelp">文件存储使用介绍</a>
-        <a href="#" class="link" @click.prevent="viewPricing">查看计费规则</a>
-      </div>
-    </div>
+        <div class="cost-summary">
+          <div class="cost-label">费用合计</div>
+          <div class="cost-amount">
+            <span class="amount">¥{{ totalCost }}</span>
+            <span class="cost-note">（0.1元/GB/天）</span>
+          </div>
+        </div>
+      </a-form>
+      
+      <template #footer>
+        <a-button @click="modalVisible = false">取消</a-button>
+        <a-button type="primary" @click="handleCreate" :loading="creating">确认创建</a-button>
+      </template>
+    </a-modal>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue'
+<script setup>
+import { ref, reactive, computed } from 'vue'
+import { PlusOutlined, FolderOutlined } from '@ant-design/icons-vue'
 
-// 定义区域选项
-interface Region {
-  id: string
-  name: string
-}
-
-const regions = [
-  { id: 'a100', name: 'A100专区' },
-  { id: 'v100', name: 'V100专区' },
-  { id: 'foshan', name: '佛山区' },
-  { id: 'beijing', name: '北京B区' }
+// 表格列定义
+const columns = [
+  { 
+    title: '名称', 
+    dataIndex: 'name', 
+    key: 'name',
+    width: '30%'
+  },
+  { 
+    title: '存储大小', 
+    dataIndex: 'size', 
+    key: 'size',
+    align: 'right'
+  },
+  { 
+    title: '购买时长', 
+    dataIndex: 'duration', 
+    key: 'duration',
+    align: 'right'
+  },
+  { 
+    title: '费用', 
+    dataIndex: 'cost', 
+    key: 'cost',
+    align: 'right'
+  }
 ]
 
-const selectedRegion = ref('a100') // 默认选中 A100
+// 存储列表（模拟数据）
+const storageList = ref([
+  { id: 1, name: '项目A存储', size: 100, duration: 30, cost: 300 },
+  { id: 2, name: '备份存储', size: 500, duration: 7, cost: 350 }
+])
 
-// 方法：获取选中区域名称
-const getSelectedRegionName = () => {
-  const region = regions.find(r => r.id === selectedRegion.value)
-  return region ? region.name : ''
+// 弹窗控制
+const modalVisible = ref(false)
+const creating = ref(false)
+
+// 表单数据
+const createForm = reactive({
+  name: '',
+  size: 50,
+  duration: 30
+})
+
+// 计算费用：0.1 元 / GB / 天
+const totalCost = computed(() => {
+  return (createForm.size * createForm.duration * 0.1).toFixed(2)
+})
+
+// 表单引用（用于校验）
+const createFormRef = ref()
+
+// 显示弹窗
+const showModal = () => {
+  createForm.name = ''
+  createForm.size = 50
+  createForm.duration = 30
+  modalVisible.value = true
 }
 
-// 方法：选择区域
-const selectRegion = (id: string) => {
-  selectedRegion.value = id
-}
-
-// 方法：初始化存储
-const initializeStorage = () => {
-  alert(`正在初始化 ${selectedRegion.value} 的文件存储...`)
-  // 这里可以跳转到下一步流程
-}
-
-// 方法：查看帮助
-const viewHelp = () => {
-  alert('文件存储使用介绍')
-}
-
-// 方法：查看计费规则
-const viewPricing = () => {
-  alert('计费规则详情')
+// 创建存储
+const handleCreate = async () => {
+  try {
+    await createFormRef.value.validateFields()
+    creating.value = true
+    
+    // 模拟API调用延迟
+    await new Promise(resolve => setTimeout(resolve, 800))
+    
+    // 添加到列表
+    const newStorage = {
+      id: Date.now(),
+      name: createForm.name,
+      size: createForm.size,
+      duration: createForm.duration,
+      cost: parseFloat(totalCost.value)
+    }
+    storageList.value.unshift(newStorage)
+    modalVisible.value = false
+    
+    // 可在此处调用 API
+    console.log('创建成功:', newStorage)
+  } catch (error) {
+    console.log('校验失败:', error)
+  } finally {
+    creating.value = false
+  }
 }
 </script>
 
 <style scoped>
-.container {
-  /* max-width: 800px;
-  margin: 0 auto; */
-  padding: 40px 30px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  color: #333;
+.file-storage-page {
+  padding: 24px;
+  background: #f5f7fa;
+  min-height: 100vh;
 }
 
-/* 标题区域 */
-.header {
-  margin-bottom: 40px;
-}
-
-h1 {
-  font-size: 2rem;
-  font-weight: 600;
-  color: #1a1a1a;
-  margin-bottom: 8px;
-}
-
-/* 区域选择 */
-.region-section {
-  margin-bottom: 40px;
-}
-
-.section-title {
-  font-size: 1.1rem;
-  font-weight: 500;
-  color: #555;
-  margin-bottom: 16px;
-}
-
-.region-tabs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-.region-tab {
-  padding: 12px 24px;
-  border: 1px solid #ddd;
-  background: white;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.2s;
-  font-size: 14px;
-  min-width: 140px;
-}
-
-.region-tab:hover {
-  border-color: #999;
-}
-
-.region-tab.active {
-  background-color: #3498db;
-  color: white;
-  border-color: #3498db;
-}
-
-/* 中心图标区域 */
-.center-section {
-  margin: 40px 0;
-  display: flex;
-  justify-content: center;
-}
-
-.center-icon {
-  width: 80px;
-  height: 80px;
+.page-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  background: #f5f5f5;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #1f2d3d;
+}
+
+.create-btn {
+  height: 40px;
+  padding: 0 20px;
+  font-weight: 500;
+}
+
+.table-container {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+}
+
+.storage-table {
   border-radius: 8px;
 }
 
-.icon-book {
-  font-size: 36px;
-  color: #3498db;
+.storage-table :deep(.ant-table-thead > tr > th) {
+  background: #fafbfc;
+  font-weight: 600;
+  color: #5e6d82;
+  border-bottom: 2px solid #e8e8e8;
+  padding: 16px;
 }
 
-.icon-book::before {
-  content: "📁";
+.storage-table :deep(.ant-table-tbody > tr > td) {
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background-color 0.2s;
 }
 
-/* 操作区域 */
-.action-section {
-  margin: 40px 0;
-  text-align: center;
+.storage-table :deep(.ant-table-tbody > tr:hover > td) {
+  background-color: #f9fafc;
 }
 
-.btn-primary {
-  background-color: #3498db;
-  color: white;
-  border: none;
-  padding: 14px 32px;
-  border-radius: 6px;
-  font-size: 16px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.btn-primary:hover {
-  background-color: #2980b9;
-}
-
-.action-hint {
-  margin-top: 12px;
-  font-size: 0.9rem;
-  color: #666;
-}
-
-/* 帮助区域 */
-.help-section {
-  margin-top: 50px;
-}
-
-.help-links {
+.name-cell {
   display: flex;
-  gap: 30px;
-  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  font-weight: 500;
 }
 
-.link {
-  text-decoration: none;
-  color: #3498db;
+.folder-icon {
+  color: #1890ff;
+  font-size: 18px;
+}
+
+.data-cell {
+  color: #5e6d82;
+  font-weight: 500;
+}
+
+.cost-cell {
+  color: #1890ff;
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.create-form {
+  padding: 8px 0;
+}
+
+.create-form :deep(.ant-form-item-label) {
+  font-weight: 500;
+}
+
+.create-form :deep(.ant-input-number),
+.create-form :deep(.ant-input) {
+  border-radius: 6px;
+}
+
+.cost-summary {
+  background: #f8f9fa;
+  border-radius: 6px;
+  padding: 16px 20px;
+  margin-top: 8px;
+  border: 1px solid #e8e8e8;
+}
+
+.cost-label {
   font-size: 14px;
-  transition: color 0.2s;
+  color: #5e6d82;
+  margin-bottom: 6px;
 }
 
-.link:hover {
-  color: #2980b9;
-  text-decoration: underline;
+.cost-amount {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
 }
 
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .container {
-    padding: 30px 20px;
-  }
-  
-  .region-tabs {
-    flex-direction: column;
-  }
-  
-  .region-tab {
-    width: 100%;
-    max-width: 100%;
-  }
-  
-  .help-links {
-    flex-direction: column;
-    gap: 15px;
-  }
-  
-  .center-section {
-    justify-content: center;
-  }
+.amount {
+  font-size: 24px;
+  font-weight: 600;
+  color: #1890ff;
+}
+
+.cost-note {
+  font-size: 13px;
+  color: #8c98ae;
+}
+
+.create-modal :deep(.ant-modal-header) {
+  border-bottom: 1px solid #e8e8e8;
+  padding: 20px 24px;
+}
+
+.create-modal :deep(.ant-modal-title) {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.create-modal :deep(.ant-modal-footer) {
+  border-top: 1px solid #e8e8e8;
+  padding: 16px 24px;
 }
 </style>
\ No newline at end of file