From fa3bdcbc7e2c72fbe83b6814292781c78d1f72e5 Mon Sep 17 00:00:00 2001
From: shiran <admin@example.com>
Date: Tue, 14 Jul 2026 18:17:05 +0800
Subject: [PATCH 1/7] feat: extend SMS signature and setting file support

---
 src/components/admin/ImageSelector.vue |  97 +++++++--
 src/views/sms/SmsSignature.vue         | 270 +++++++++++++++++++++++--
 src/views/system/SettingManage.vue     |  58 ++++--
 3 files changed, 375 insertions(+), 50 deletions(-)

diff --git a/src/components/admin/ImageSelector.vue b/src/components/admin/ImageSelector.vue
index 10585f6..3f794d6 100644
--- a/src/components/admin/ImageSelector.vue
+++ b/src/components/admin/ImageSelector.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     v-model="visible"
-    title="选择图片"
+    :title="props.acceptAll ? '选择文件' : '选择图片'"
     width="900px"
     append-to-body
     @close="handleClose"
@@ -12,13 +12,13 @@
         <el-tab-pane label="文件库" name="fileLibrary">
           <div class="file-list-container">
             <div class="file-list-header">
-              <h4>图片文件库</h4>
+              <h4>{{ props.acceptAll ? '文件库' : '图片文件库' }}</h4>
               <div class="header-actions">
                 <span v-if="props.multiple && selectedIds.size > 0" class="selected-count">
                   已选 {{ selectedIds.size }} 个文件
                 </span>
                 <el-button type="primary" @click="switchToUpload" :icon="Upload">
-                  上传新图片
+                  {{ props.acceptAll ? '上传新文件' : '上传新图片' }}
                 </el-button>
               </div>
             </div>
@@ -52,10 +52,15 @@
                 </div>
                 <div class="file-preview">
                   <img 
+                    v-if="isImageFile(file.realName, file.url)"
                     :src="processImageUrl(file.url)" 
                     :alt="file.realName"
                     @error="handleImageError"
                   />
+                  <div v-else class="file-type-icon">
+                    <el-icon :size="32"><Document /></el-icon>
+                    <span class="file-ext">{{ getFileExt(file.realName) }}</span>
+                  </div>
                 </div>
                 <div class="file-info">
                   <p class="file-name" :title="file.realName">{{ file.realName }}</p>
@@ -63,7 +68,7 @@
                 </div>
               </div>
             </div>
-            <el-empty v-if="filteredFileList.length === 0 && !loading" description="暂无图片文件" />
+            <el-empty v-if="filteredFileList.length === 0 && !loading" :description="props.acceptAll ? '暂无文件' : '暂无图片文件'" />
             
             <!-- 分页 -->
             <div class="pagination-container" v-if="total > 0">
@@ -81,14 +86,14 @@
           </div>
         </el-tab-pane>
         
-        <!-- 上传图片 -->
-        <el-tab-pane label="上传图片" name="upload">
+        <!-- 上传文件 -->
+        <el-tab-pane :label="props.acceptAll ? '上传文件' : '上传图片'" name="upload">
           <div class="upload-section">
             <el-upload
               :auto-upload="false"
               :show-file-list="false"
               :on-change="handleFileChange"
-              accept="image/*"
+              :accept="props.acceptAll ? undefined : 'image/*'"
               multiple
               drag
             >
@@ -98,7 +103,7 @@
               </div>
               <template #tip>
                 <div class="el-upload__tip">
-                  支持jpg、png、gif、webp等图片格式，单个文件不超过5MB
+                  {{ props.acceptAll ? '支持所有文件类型，单个文件不超过50MB' : '支持jpg、png、gif、webp等图片格式，单个文件不超过5MB' }}
                 </div>
               </template>
             </el-upload>
@@ -111,7 +116,10 @@
               </div>
               <div class="pending-list">
                 <div v-for="(file, index) in pendingFiles" :key="index" class="pending-item">
-                  <img :src="file.previewUrl" class="pending-preview" />
+                  <img v-if="file.isImage" :src="file.previewUrl" class="pending-preview" />
+                  <div v-else class="pending-preview pending-file-icon">
+                    <el-icon :size="20"><Document /></el-icon>
+                  </div>
                   <span class="pending-name" :title="file.name">{{ file.name }}</span>
                   <span class="pending-size">{{ formatFileSize(file.size) }}</span>
                   <el-button type="danger" link size="small" @click="removePendingFile(index)">移除</el-button>
@@ -149,7 +157,7 @@
 <script setup>
 import { ref, watch, computed } from 'vue'
 import { ElMessage } from 'element-plus'
-import { Upload, UploadFilled, Search, Select, Delete } from '@element-plus/icons-vue'
+import { Upload, UploadFilled, Search, Select, Delete, Document } from '@element-plus/icons-vue'
 import { getFileList, getFileDetail, uploadFile } from '@/api/admin/file'
 
 // Props
@@ -165,6 +173,10 @@ const props = defineProps({
   multiple: {
     type: Boolean,
     default: false
+  },
+  acceptAll: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -349,22 +361,37 @@ const selectFile = (file) => {
   }
 }
 
+// 判断是否为图片文件
+const isImageFile = (name, url) => {
+  const imgExts = /\.(jpe?g|png|gif|webp|bmp|svg|ico|avif)$/i
+  if (name && imgExts.test(name)) return true
+  if (url && imgExts.test(url.split('?')[0])) return true
+  return false
+}
+
+const getFileExt = (name) => {
+  if (!name) return ''
+  const dotIndex = name.lastIndexOf('.')
+  if (dotIndex === -1) return ''
+  return name.slice(dotIndex + 1).toUpperCase()
+}
+
 // 文件选择变化（收集待上传文件）
 const handleFileChange = (file) => {
   const rawFile = file.raw
   if (!rawFile) return
   
-  // 验证文件类型
-  const isImage = rawFile.type.startsWith('image/')
-  if (!isImage) {
-    ElMessage.error(`${rawFile.name} 不是图片文件，已跳过`)
-    return
+  if (!props.acceptAll) {
+    const isImage = rawFile.type.startsWith('image/')
+    if (!isImage) {
+      ElMessage.error(`${rawFile.name} 不是图片文件，已跳过`)
+      return
+    }
   }
   
-  // 验证文件大小
-  const isLt5M = rawFile.size / 1024 / 1024 < 5
-  if (!isLt5M) {
-    ElMessage.error(`${rawFile.name} 超过 5MB，已跳过`)
+  const sizeLimit = props.acceptAll ? 50 : 5
+  if (rawFile.size / 1024 / 1024 > sizeLimit) {
+    ElMessage.error(`${rawFile.name} 超过 ${sizeLimit}MB，已跳过`)
     return
   }
   
@@ -372,12 +399,13 @@ const handleFileChange = (file) => {
   const exists = pendingFiles.value.some(f => f.name === rawFile.name && f.size === rawFile.size)
   if (exists) return
   
-  // 添加到待上传列表，生成本地预览URL
+  const fileIsImage = rawFile.type.startsWith('image/')
   pendingFiles.value.push({
     raw: rawFile,
     name: rawFile.name,
     size: rawFile.size,
-    previewUrl: URL.createObjectURL(rawFile)
+    isImage: fileIsImage,
+    previewUrl: fileIsImage ? URL.createObjectURL(rawFile) : ''
   })
 }
 
@@ -593,6 +621,25 @@ const handleConfirm = () => {
   object-fit: cover;
 }
 
+.file-type-icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: #909399;
+}
+
+.file-ext {
+  font-size: 10px;
+  font-weight: 600;
+  color: #606266;
+  max-width: 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .file-info {
   text-align: center;
 }
@@ -670,6 +717,14 @@ const handleConfirm = () => {
   border: 1px solid #ebeef5;
 }
 
+.pending-file-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f7fa;
+  color: #909399;
+}
+
 .pending-name {
   flex: 1;
   font-size: 13px;
diff --git a/src/views/sms/SmsSignature.vue b/src/views/sms/SmsSignature.vue
index 2e24732..a272912 100644
--- a/src/views/sms/SmsSignature.vue
+++ b/src/views/sms/SmsSignature.vue
@@ -108,6 +108,7 @@
         </div>
 
         <div class="sig-card-footer">
+          <el-button size="small" @click="handleDetail(item)">详情</el-button>
           <el-button type="primary" size="small" @click="handleEdit(item)">编辑</el-button>
           <el-button v-if="item.status === 0" type="warning" size="small" @click="handleSubmit(item)">提交审核</el-button>
           <el-button v-if="item.status === 1" type="success" size="small" @click="handleApprove(item)">通过</el-button>
@@ -159,18 +160,52 @@
         <el-form-item label="签名标题" prop="title">
           <el-input v-model="form.title" placeholder="如：某某公司" maxlength="30" show-word-limit />
         </el-form-item>
+
+        <el-divider content-position="left">申请人资料</el-divider>
         <el-form-item label="申请人姓名">
-          <el-input v-model="form.applicant_name" placeholder="申请人真实姓名" />
+          <el-input v-model="form.applicant_name" placeholder="申请人真实姓名（可选）" />
         </el-form-item>
-        <el-form-item label="身份证号">
-          <el-input v-model="form.applicant_id_card" placeholder="申请人身份证号" />
+        <el-form-item label="申请人身份证号" prop="applicant_id_card">
+          <el-input v-model="form.applicant_id_card" placeholder="申请人身份证号（可选）" />
         </el-form-item>
-        <el-form-item label="公司名称">
-          <el-input v-model="form.applicant_company" placeholder="申请人公司（可选）" />
+
+        <el-divider content-position="left">主体资料</el-divider>
+        <el-form-item label="主体名称">
+          <el-input v-model="form.applicant_company" placeholder="企业/主体名称（可选）" />
+        </el-form-item>
+        <el-form-item label="统一社会信用代码">
+          <el-input v-model="form.credit_code" placeholder="统一社会信用代码（可选）" />
         </el-form-item>
         <el-form-item label="营业执照URL">
           <el-input v-model="form.license_url" placeholder="营业执照图片地址（可选）" />
         </el-form-item>
+
+        <el-divider content-position="left">法人资料</el-divider>
+        <el-form-item label="法人姓名">
+          <el-input v-model="form.legal_person_name" placeholder="法人姓名（可选）" />
+        </el-form-item>
+        <el-form-item label="法人手机号" prop="legal_person_phone">
+          <el-input v-model="form.legal_person_phone" placeholder="法人手机号（可选）" />
+        </el-form-item>
+        <el-form-item label="法人身份证号" prop="legal_person_id_card">
+          <el-input v-model="form.legal_person_id_card" placeholder="法人身份证号（可选）" />
+        </el-form-item>
+
+        <el-divider content-position="left">经办人资料</el-divider>
+        <el-form-item label="经办人手机号" prop="agent_phone">
+          <el-input v-model="form.agent_phone" placeholder="经办人手机号（可选）" />
+        </el-form-item>
+        <el-form-item label="身份证正面URL">
+          <el-input v-model="form.agent_id_card_front_url" placeholder="经办人身份证正面图片地址（可选）" />
+        </el-form-item>
+        <el-form-item label="身份证反面URL">
+          <el-input v-model="form.agent_id_card_back_url" placeholder="经办人身份证反面图片地址（可选）" />
+        </el-form-item>
+
+        <el-divider content-position="left">承诺函</el-divider>
+        <el-form-item label="承诺函URL">
+          <el-input v-model="form.commitment_letter_url" placeholder="签署盖章后的承诺函照片地址（可选）" />
+        </el-form-item>
       </el-form>
       <template #footer>
         <el-button @click="dialogVisible = false">取消</el-button>
@@ -191,6 +226,77 @@
       </template>
     </el-dialog>
 
+    <!-- 详情对话框 -->
+    <el-dialog v-model="detailVisible" title="签名详情" width="640px" append-to-body destroy-on-close>
+      <div v-if="detailData" class="detail-wrap">
+        <el-descriptions title="基础信息" :column="2" border size="small">
+          <el-descriptions-item label="签名标题">{{ detailData.title || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="statusTagType(detailData.status)" size="small" effect="dark">{{ statusText(detailData.status) }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="用户">
+            <el-link type="primary" :underline="false" @click="$router.push({ path: '/user/detail', query: { user_id: detailData.user_id } })">ID: {{ detailData.user_id }}</el-link>
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间">{{ formatDate(detailData.CreatedAt) }}</el-descriptions-item>
+          <el-descriptions-item v-if="detailData.reject_reason" label="驳回原因" :span="2">
+            <span class="reject-text">{{ detailData.reject_reason }}</span>
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions title="申请人资料" :column="2" border size="small" class="detail-section">
+          <el-descriptions-item label="申请人姓名">{{ detailData.applicant_name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="申请人身份证号">{{ detailData.applicant_id_card || '-' }}</el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions title="主体资料" :column="2" border size="small" class="detail-section">
+          <el-descriptions-item label="主体名称">{{ detailData.applicant_company || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="统一社会信用代码">{{ detailData.credit_code || '-' }}</el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions title="法人资料" :column="2" border size="small" class="detail-section">
+          <el-descriptions-item label="法人姓名">{{ detailData.legal_person_name || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="法人手机号">{{ detailData.legal_person_phone || '-' }}</el-descriptions-item>
+          <el-descriptions-item label="法人身份证号" :span="2">{{ detailData.legal_person_id_card || '-' }}</el-descriptions-item>
+        </el-descriptions>
+
+        <el-descriptions title="经办人资料" :column="2" border size="small" class="detail-section">
+          <el-descriptions-item label="经办人手机号">{{ detailData.agent_phone || '-' }}</el-descriptions-item>
+        </el-descriptions>
+
+        <div class="detail-section detail-images-title">证件与文件</div>
+        <div class="detail-images">
+          <div class="detail-img-item">
+            <span class="detail-img-label">营业执照</span>
+            <el-image v-if="detailData.license_url" :src="detailData.license_url" :preview-src-list="[detailData.license_url]" fit="cover" class="detail-img" preview-teleported />
+            <div v-else class="detail-img-empty">未上传</div>
+          </div>
+          <div class="detail-img-item">
+            <span class="detail-img-label">身份证正面</span>
+            <el-image v-if="detailData.agent_id_card_front_url" :src="detailData.agent_id_card_front_url" :preview-src-list="[detailData.agent_id_card_front_url]" fit="cover" class="detail-img" preview-teleported />
+            <div v-else class="detail-img-empty">未上传</div>
+          </div>
+          <div class="detail-img-item">
+            <span class="detail-img-label">身份证反面</span>
+            <el-image v-if="detailData.agent_id_card_back_url" :src="detailData.agent_id_card_back_url" :preview-src-list="[detailData.agent_id_card_back_url]" fit="cover" class="detail-img" preview-teleported />
+            <div v-else class="detail-img-empty">未上传</div>
+          </div>
+          <div class="detail-img-item">
+            <span class="detail-img-label">承诺函</span>
+            <el-image v-if="detailData.commitment_letter_url" :src="detailData.commitment_letter_url" :preview-src-list="[detailData.commitment_letter_url]" fit="cover" class="detail-img" preview-teleported />
+            <div v-else class="detail-img-empty">未上传</div>
+          </div>
+        </div>
+        <div class="detail-file-row">
+          <span class="detail-img-label">申请文件</span>
+          <el-link v-if="detailData.application_file_url" type="primary" :href="detailData.application_file_url" target="_blank">查看申请文件</el-link>
+          <span v-else class="detail-empty-text">未上传</span>
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="detailVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+
     <!-- 表单用户选择器 -->
     <UserListSelector
       v-model="userSelectorVisible"
@@ -229,17 +335,64 @@ const queryParams = reactive({ service_id: null, page: 1, count: 10, user_id: ''
 const dialogVisible = ref(false)
 const dialogType = ref('add')
 const formRef = ref(null)
-const form = reactive({ service_id: null, user_id: null, title: '', applicant_name: '', applicant_id_card: '', applicant_company: '', license_url: '' })
+
+const createEmptyForm = () => ({
+  service_id: null,
+  user_id: null,
+  title: '',
+  // 主体资料
+  applicant_company: '',
+  credit_code: '',
+  license_url: '',
+  // 法人资料
+  legal_person_name: '',
+  legal_person_phone: '',
+  legal_person_id_card: '',
+  // 经办人资料
+  applicant_name: '',
+  agent_phone: '',
+  applicant_id_card: '',
+  agent_id_card_front_url: '',
+  agent_id_card_back_url: '',
+  commitment_letter_url: ''
+})
+
+const form = reactive(createEmptyForm())
+const originalEditForm = ref(null)
+
+// 非必填字段：仅当填写时才校验格式，接口未声明必填的字段不设为必填
+const validatePhone = (rule, value, callback) => {
+  if (value && !/^1[3-9]\d{9}$/.test(value)) {
+    callback(new Error('请输入正确的手机号'))
+  } else {
+    callback()
+  }
+}
+const validateIdCard = (rule, value, callback) => {
+  if (value && !/(^\d{15}$)|(^\d{17}[\dXx]$)/.test(value)) {
+    callback(new Error('请输入正确的身份证号'))
+  } else {
+    callback()
+  }
+}
+
 const formRules = {
   service_id: [{ required: true, message: '请选择服务', trigger: 'change' }],
   user_id: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
-  title: [{ required: true, message: '请输入签名标题', trigger: 'blur' }]
+  title: [{ required: true, message: '请输入签名标题', trigger: 'blur' }],
+  legal_person_phone: [{ validator: validatePhone, trigger: 'blur' }],
+  agent_phone: [{ validator: validatePhone, trigger: 'blur' }],
+  legal_person_id_card: [{ validator: validateIdCard, trigger: 'blur' }],
+  applicant_id_card: [{ validator: validateIdCard, trigger: 'blur' }]
 }
 
 const rejectDialogVisible = ref(false)
 const rejectReason = ref('')
 const currentRow = ref(null)
 
+const detailVisible = ref(false)
+const detailData = ref(null)
+
 const userSelectorVisible = ref(false)
 const selectedUserInfo = ref(null)
 const filterUserSelectorVisible = ref(false)
@@ -308,26 +461,42 @@ const clearUser = () => {
   selectedUserInfo.value = null
 }
 
+const handleDetail = (row) => {
+  detailData.value = row
+  detailVisible.value = true
+}
+
 const handleAdd = () => {
   dialogType.value = 'add'
   selectedUserInfo.value = null
-  Object.assign(form, { service_id: queryParams.service_id, user_id: null, title: '', applicant_name: '', applicant_id_card: '', applicant_company: '', license_url: '' })
+  originalEditForm.value = null
+  Object.assign(form, createEmptyForm(), { service_id: queryParams.service_id })
+  delete form.signature_id
   dialogVisible.value = true
 }
 
 const handleEdit = (row) => {
   dialogType.value = 'edit'
   selectedUserInfo.value = { user_id: row.user_id, user_name: `用户${row.user_id}` }
-  Object.assign(form, {
+  Object.assign(form, createEmptyForm(), {
     service_id: queryParams.service_id,
     signature_id: row.ID,
     user_id: row.user_id,
     title: row.title,
-    applicant_name: row.applicant_name || '',
-    applicant_id_card: row.applicant_id_card || '',
     applicant_company: row.applicant_company || '',
-    license_url: row.license_url || ''
+    credit_code: row.credit_code || '',
+    license_url: row.license_url || '',
+    legal_person_name: row.legal_person_name || '',
+    legal_person_phone: row.legal_person_phone || '',
+    legal_person_id_card: row.legal_person_id_card || '',
+    applicant_name: row.applicant_name || '',
+    agent_phone: row.agent_phone || '',
+    applicant_id_card: row.applicant_id_card || '',
+    agent_id_card_front_url: row.agent_id_card_front_url || '',
+    agent_id_card_back_url: row.agent_id_card_back_url || '',
+    commitment_letter_url: row.commitment_letter_url || ''
   })
+  originalEditForm.value = { ...form }
   dialogVisible.value = true
 }
 
@@ -336,11 +505,34 @@ const handleFormSubmit = () => {
     if (!valid) return
     submitting.value = true
     try {
-      const data = { ...form }
       let res
       if (dialogType.value === 'add') {
-        res = await createSmsSignature(data)
+        res = await createSmsSignature({ ...form })
       } else {
+        const data = {
+          service_id: form.service_id,
+          signature_id: form.signature_id
+        }
+        const editableFields = [
+          'title',
+          'applicant_name',
+          'applicant_id_card',
+          'applicant_company',
+          'license_url',
+          'credit_code',
+          'legal_person_name',
+          'legal_person_phone',
+          'legal_person_id_card',
+          'agent_phone',
+          'agent_id_card_front_url',
+          'agent_id_card_back_url',
+          'commitment_letter_url'
+        ]
+        editableFields.forEach((field) => {
+          if (form[field] !== originalEditForm.value?.[field]) {
+            data[field] = form[field]
+          }
+        })
         res = await updateSmsSignature(data)
       }
       if (res.data.code === 200) {
@@ -546,4 +738,54 @@ onMounted(async () => {
   border-top: 1px solid #f0f2f5;
   flex-wrap: wrap;
 }
+
+/* 详情弹窗 */
+.detail-wrap { max-height: 60vh; overflow-y: auto; padding-right: 4px; }
+.detail-section { margin-top: 16px; }
+.detail-images-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 12px;
+}
+.detail-images {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.detail-img-item {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.detail-img-label {
+  font-size: 12px;
+  color: #909399;
+}
+.detail-img {
+  width: 140px;
+  height: 90px;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
+  cursor: pointer;
+}
+.detail-img-empty {
+  width: 140px;
+  height: 90px;
+  border-radius: 6px;
+  background: #f5f7fa;
+  border: 1px dashed #dcdfe6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #c0c4cc;
+  font-size: 12px;
+}
+.detail-file-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 16px;
+}
+.detail-empty-text { color: #c0c4cc; font-size: 13px; }
 </style>
diff --git a/src/views/system/SettingManage.vue b/src/views/system/SettingManage.vue
index f9dd7be..027766b 100644
--- a/src/views/system/SettingManage.vue
+++ b/src/views/system/SettingManage.vue
@@ -303,7 +303,7 @@
           <div v-else-if="settingForm.type === 'file'" class="file-upload-section">
             <div class="file-info-display" v-if="settingForm.value && fileInfo">
               <div class="file-item" :class="{ 'uploading': fileUploading && fileInfo.isLocal }">
-                <div class="file-preview" v-if="fileInfo.url || fileInfo.localUrl" @click="openImageSelector" style="cursor: pointer;">
+                <div class="file-preview" v-if="isImageFileName(fileInfo.realName || fileInfo.saveName) && (fileInfo.url || fileInfo.localUrl)" @click="openImageSelector" style="cursor: pointer;">
                   <img :src="fileInfo.localUrl || processImageUrl(fileInfo.url)" :alt="fileInfo.realName" class="preview-image" @click.stop="previewImage(fileInfo.localUrl || fileInfo.url)" @error="handleImageError" />
                   <div v-if="fileUploading && fileInfo.isLocal" class="upload-overlay">
                     <el-icon class="is-loading"><Loading /></el-icon>
@@ -313,6 +313,11 @@
                 <div class="file-preview" v-else @click="openImageSelector" style="cursor: pointer;">
                   <div class="file-placeholder">
                     <el-icon><Document /></el-icon>
+                    <span v-if="fileInfo.realName" class="file-ext-label">{{ getFileExtLabel(fileInfo.realName) }}</span>
+                  </div>
+                  <div v-if="fileUploading && fileInfo.isLocal" class="upload-overlay">
+                    <el-icon class="is-loading"><Loading /></el-icon>
+                    <span>上传中...</span>
                   </div>
                 </div>
                 <div class="file-details">
@@ -321,8 +326,8 @@
                   <span class="file-size">{{ formatFileSize(fileInfo.size) }}</span>
                 </div>
                 <div class="file-actions">
-                  <el-button type="primary" size="small" @click="openImageSelector" :icon="Picture">
-                    修改图片
+                  <el-button type="primary" size="small" @click="openImageSelector" :icon="FolderOpened">
+                    修改文件
                   </el-button>
                   <el-button type="danger" size="small" @click="clearFile">删除</el-button>
                 </div>
@@ -333,10 +338,10 @@
                 <el-button 
                   type="primary" 
                   @click="openImageSelector"
-                  :icon="Picture"
+                  :icon="FolderOpened"
                   class="image-selector-btn"
                 >
-                  从文件库选择图片
+                  从文件库选择文件
                 </el-button>
               </div>
             </div>
@@ -346,7 +351,7 @@
               <div class="file-list-header">
                 <span class="list-title">文件列表 ({{ getEditableFormFileList().length }} 项)</span>
                 <div class="header-actions">
-                  <el-button size="small" @click="openImageSelectorForList" :icon="Picture">
+                  <el-button size="small" @click="openImageSelectorForList" :icon="FolderOpened">
                     从文件库选择
                   </el-button>
                 </div>
@@ -366,7 +371,7 @@
                   </div>
                   <div class="file-preview">
                     <img 
-                      v-if="fileItem.url || fileItem.localUrl" 
+                      v-if="isImageFileName(fileItem.realName || fileItem.saveName) && (fileItem.url || fileItem.localUrl)"
                       :src="fileItem.localUrl || processImageUrl(fileItem.url)" 
                       :alt="fileItem.realName" 
                       class="preview-image" 
@@ -375,6 +380,7 @@
                     />
                     <div v-else class="file-placeholder">
                       <el-icon><Document /></el-icon>
+                      <span v-if="fileItem.realName || fileItem.saveName" class="file-ext-label">{{ getFileExtLabel(fileItem.realName || fileItem.saveName) }}</span>
                     </div>
                     <div v-if="fileItem.uploading" class="upload-overlay">
                       <el-icon class="is-loading"><Loading /></el-icon>
@@ -509,7 +515,7 @@
                       <div class="file-thumb" @click="openStructFileSelector('struct', field.key)">
                         <img v-if="structFileUrls[field.key]" :src="structFileUrls[field.key]" @error="(e) => e.target.style.display='none'" />
                         <div v-else class="file-thumb-empty">
-                          <el-icon><Picture /></el-icon>
+                          <el-icon><Document /></el-icon>
                         </div>
                       </div>
                       <el-button v-if="structValue[field.key]" type="danger" link size="small" class="file-clear-btn" @click="structValue[field.key] = ''; delete structFileUrls[field.key]"><el-icon><Delete /></el-icon></el-button>
@@ -525,7 +531,7 @@
                         >
                           <div class="file-thumb" @click="previewFile(fid)">
                             <img v-if="structFileUrls[field.key + '_' + fi]" :src="structFileUrls[field.key + '_' + fi]" @error="(e) => e.target.style.display='none'" />
-                            <div v-else class="file-thumb-empty"><el-icon><Picture /></el-icon></div>
+                            <div v-else class="file-thumb-empty"><el-icon><Document /></el-icon></div>
                           </div>
                           <el-button class="thumb-del-btn" type="danger" link size="small" @click="removeInlineListItem('file_list', 'struct', field.key, null, -1, fi)"><el-icon><Delete /></el-icon></el-button>
                         </div>
@@ -591,7 +597,7 @@
                         <div v-else-if="sub.type === 'file'" class="struct-file-picker">
                           <div class="file-thumb" @click="openStructFileSelector('struct-nested', field.key, sub.key)">
                             <img v-if="structFileUrls[field.key + '.' + sub.key]" :src="structFileUrls[field.key + '.' + sub.key]" @error="(e) => e.target.style.display='none'" />
-                            <div v-else class="file-thumb-empty"><el-icon><Picture /></el-icon></div>
+                            <div v-else class="file-thumb-empty"><el-icon><Document /></el-icon></div>
                           </div>
                           <el-button v-if="getNestedValue(field.key)[sub.key]" type="danger" link size="small" class="file-clear-btn" @click="getNestedValue(field.key)[sub.key] = ''; delete structFileUrls[field.key + '.' + sub.key]"><el-icon><Delete /></el-icon></el-button>
                         </div>
@@ -606,7 +612,7 @@
                             >
                               <div class="file-thumb" @click="previewFile(fid)">
                                 <img v-if="structFileUrls[field.key + '.' + sub.key + '_' + fi]" :src="structFileUrls[field.key + '.' + sub.key + '_' + fi]" @error="(e) => e.target.style.display='none'" />
-                                <div v-else class="file-thumb-empty"><el-icon><Picture /></el-icon></div>
+                                <div v-else class="file-thumb-empty"><el-icon><Document /></el-icon></div>
                               </div>
                               <el-button class="thumb-del-btn" type="danger" link size="small" @click="removeInlineListItem('file_list', 'struct-nested', field.key, sub.key, -1, fi)"><el-icon><Delete /></el-icon></el-button>
                             </div>
@@ -800,7 +806,7 @@
                         <div v-else-if="field.type === 'file'" class="struct-file-picker">
                           <div class="file-thumb small" @click="openStructFileSelector('struct-list', field.key, null, itemIndex)">
                             <img v-if="structFileUrls['list_' + itemIndex + '_' + field.key]" :src="structFileUrls['list_' + itemIndex + '_' + field.key]" @error="(e) => e.target.style.display='none'" />
-                            <div v-else class="file-thumb-empty"><el-icon><Picture /></el-icon></div>
+                            <div v-else class="file-thumb-empty"><el-icon><Document /></el-icon></div>
                           </div>
                           <el-button v-if="item[field.key]" type="danger" link size="small" class="file-clear-btn" @click="item[field.key] = ''; delete structFileUrls['list_' + itemIndex + '_' + field.key]"><el-icon><Delete /></el-icon></el-button>
                         </div>
@@ -815,7 +821,7 @@
                             >
                               <div class="file-thumb small" @click="previewFile(fid)">
                                 <img v-if="structFileUrls['list_' + itemIndex + '_' + field.key + '_' + fi]" :src="structFileUrls['list_' + itemIndex + '_' + field.key + '_' + fi]" @error="(e) => e.target.style.display='none'" />
-                                <div v-else class="file-thumb-empty"><el-icon><Picture /></el-icon></div>
+                                <div v-else class="file-thumb-empty"><el-icon><Document /></el-icon></div>
                               </div>
                               <el-button class="thumb-del-btn" type="danger" link size="small" @click="removeInlineListItem('file_list', 'struct-list', field.key, null, itemIndex, fi)"><el-icon><Delete /></el-icon></el-button>
                             </div>
@@ -1056,11 +1062,12 @@
       <img :src="currentViewImage" style="max-width: 100%; max-height: 80vh;" />
     </el-dialog>
 
-    <!-- 图片选择器 -->
+    <!-- 文件选择器 -->
     <ImageSelector 
       v-model="imageSelectorVisible" 
       :current-file-id="currentImageSelectorFileId"
       :multiple="imageSelectorMode === 'list' || imageSelectorMode === 'struct-file-list'"
+      :accept-all="true"
       @confirm="handleImageSelectorConfirm"
     />
   </div>
@@ -1070,7 +1077,7 @@
 import { ref, reactive, onMounted, watch, nextTick, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Search, Plus, Delete, UploadFilled, Folder, Document, Loading, Picture, Edit, Rank, FolderAdd, CopyDocument, CircleCheck, CircleClose, InfoFilled, Clock, Setting, EditPen, Connection, ArrowRight, View } from '@element-plus/icons-vue'
+import { Search, Plus, Delete, UploadFilled, Folder, FolderOpened, Document, Loading, Picture, Edit, Rank, FolderAdd, CopyDocument, CircleCheck, CircleClose, InfoFilled, Clock, Setting, EditPen, Connection, ArrowRight, View } from '@element-plus/icons-vue'
 import {
   getSettingGroupList,
   getSettingGroupInfo,
@@ -2213,6 +2220,18 @@ const formatFileSize = (bytes) => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
 }
 
+const isImageFileName = (name) => {
+  if (!name) return false
+  return /\.(jpe?g|png|gif|webp|bmp|svg|ico|avif)$/i.test(name)
+}
+
+const getFileExtLabel = (name) => {
+  if (!name) return ''
+  const dotIndex = name.lastIndexOf('.')
+  if (dotIndex === -1) return ''
+  return name.slice(dotIndex + 1).toUpperCase()
+}
+
 const truncateFileName = (fileName, maxLength = 25) => {
   if (!fileName) return ''
   if (fileName.length <= maxLength) return fileName
@@ -3485,13 +3504,22 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: 2px;
   background: #f5f7fa;
   color: #909399;
   font-size: 24px;
 }
 
+.file-ext-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: #606266;
+  line-height: 1;
+}
+
 .file-details {
   display: flex;
   flex-direction: column;
-- 
2.54.0


From 9b369a4dd54dcff34dffbe1e7fd75640d478397f Mon Sep 17 00:00:00 2001
From: shiran <admin@example.com>
Date: Fri, 17 Jul 2026 17:18:14 +0800
Subject: [PATCH 2/7] feat: adapt admin payment configuration and refunds

---
 src/api/admin/order.js            |   9 +
 src/api/admin/pay007.js           |  15 ++
 src/config/menus.js               |   6 +-
 src/router/index.js               |  10 +-
 src/views/order/OrderList.vue     | 332 +++++++++++++++++++++++++++-
 src/views/order/PaymentConfig.vue | 346 ++++++++++++++++++++++++++++++
 src/views/user/UserDetail.vue     |  41 +++-
 7 files changed, 744 insertions(+), 15 deletions(-)
 create mode 100644 src/api/admin/pay007.js
 create mode 100644 src/views/order/PaymentConfig.vue

diff --git a/src/api/admin/order.js b/src/api/admin/order.js
index 7a4340f..69fcb62 100644
--- a/src/api/admin/order.js
+++ b/src/api/admin/order.js
@@ -41,3 +41,12 @@ export const retryOrderHook = (data) => {
     }
   })
 }
+
+/**订单退款 */
+export const refundOrder = (data) => {
+  return http2.post('/api/v1/admin/order/refund', data, {
+    headers:{
+      'Content-Type':'multipart/form-data'
+    }
+  })
+}
diff --git a/src/api/admin/pay007.js b/src/api/admin/pay007.js
new file mode 100644
index 0000000..2dd5253
--- /dev/null
+++ b/src/api/admin/pay007.js
@@ -0,0 +1,15 @@
+import { http2 } from '@/utils/request.js'
+
+/** 获取 007pay 支付配置 */
+export const getPay007Config = () => {
+  return http2.get('/api/v1/admin/pay007/config')
+}
+
+/** 更新 007pay 支付配置 */
+export const updatePay007Config = (data) => {
+  return http2.post('/api/v1/admin/pay007/config/update', data, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
diff --git a/src/config/menus.js b/src/config/menus.js
index 43cbf5d..fcc3776 100644
--- a/src/config/menus.js
+++ b/src/config/menus.js
@@ -68,6 +68,10 @@ export const menus = [
       {
         path: '/order/list',
         title: '订单列表'
+      },
+      {
+        path: '/order/payment-config',
+        title: '支付配置'
       }
     ]
   },
@@ -227,4 +231,4 @@ export const menus = [
       }
     ]
   }
-]
\ No newline at end of file
+]
diff --git a/src/router/index.js b/src/router/index.js
index a262f78..97b9a04 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -313,6 +313,14 @@ const routes = [
             meta: {
               title: '订单列表'
             }
+          },
+          {
+            path: 'payment-config',
+            name: 'PaymentConfig',
+            component: () => import('../views/order/PaymentConfig.vue'),
+            meta: {
+              title: '支付配置'
+            }
           }
         ]
       },
@@ -806,4 +814,4 @@ router.afterEach(() => {
   window.scrollTo(0, 0)
 })
 
-export default router 
\ No newline at end of file
+export default router 
diff --git a/src/views/order/OrderList.vue b/src/views/order/OrderList.vue
index 54ff4b8..de73d90 100644
--- a/src/views/order/OrderList.vue
+++ b/src/views/order/OrderList.vue
@@ -130,7 +130,15 @@
           </el-table-column>
           <el-table-column label="支付方式" width="100">
             <template #default="{ row }">
-              <span>{{ row.payType || '-' }}</span>
+              <span>{{ getPayTypeText(row.payType) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="退款状态" width="120">
+            <template #default="{ row }">
+              <el-tag v-if="row.refundStatus" :type="getRefundStatusType(row.refundStatus)" size="small">
+                {{ getRefundStatusText(row.refundStatus) }}
+              </el-tag>
+              <span v-else class="text-muted">-</span>
             </template>
           </el-table-column>
           <el-table-column label="过期时间" width="170">
@@ -143,11 +151,12 @@
               <span>{{ formatDate(row.CreatedAt) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="250" fixed="right">
+          <el-table-column label="操作" width="310" fixed="right">
             <template #default="{ row }">
               <div class="action-buttons">
                 <el-button type="primary" link @click="handleView(row)">查看</el-button>
                 <el-button type="warning" link @click="handleEdit(row)">编辑</el-button>
+                <el-button type="success" link :disabled="!canRefund(row)" @click="handleOpenRefund(row)">退款</el-button>
                 <el-button type="danger" link @click="handleRetryOrder(row)">重试流程</el-button>
               </div>
             </template>
@@ -187,6 +196,9 @@
                 {{ getStatusText(orderDetail.state) }}
               </el-tag>
               <el-tag type="info" size="small" effect="plain">{{ getTypeText(orderDetail.type) }}</el-tag>
+              <el-tag v-if="orderDetail.refundStatus" :type="getRefundStatusType(orderDetail.refundStatus)" size="small" effect="plain">
+                {{ getRefundStatusText(orderDetail.refundStatus) }}
+              </el-tag>
             </div>
             <div class="od-hero-sub">
               <span>订单号 #{{ orderDetail.id }}</span>
@@ -202,7 +214,16 @@
 
         <!-- 订单信息 -->
         <div class="od-section">
-          <div class="od-section-title"><el-icon><Document /></el-icon><span>订单信息</span></div>
+          <div class="od-section-title">
+            <el-icon><Document /></el-icon><span>订单信息</span>
+            <el-button
+              v-if="canRefund(orderDetail)"
+              type="success"
+              link
+              class="od-section-action"
+              @click="handleOpenRefund(orderDetail)"
+            >发起退款</el-button>
+          </div>
           <el-descriptions :column="2" border size="small">
             <el-descriptions-item label="订单ID">{{ orderDetail.id }}</el-descriptions-item>
             <el-descriptions-item label="订单类型">
@@ -217,7 +238,12 @@
               <span class="od-mono">{{ orderDetail.paymentOrderId || '-' }}</span>
             </el-descriptions-item>
             <el-descriptions-item label="到期时间">{{ formatDate(orderDetail.expireTime) }}</el-descriptions-item>
-            <el-descriptions-item label="退款时间">{{ orderDetail.refundTime ? formatDate(orderDetail.refundTime) : '-' }}</el-descriptions-item>
+            <el-descriptions-item label="退款状态">
+              <el-tag v-if="orderDetail.refundStatus" :type="getRefundStatusType(orderDetail.refundStatus)" size="small">
+                {{ getRefundStatusText(orderDetail.refundStatus) }}
+              </el-tag>
+              <span v-else>-</span>
+            </el-descriptions-item>
             <el-descriptions-item label="创建时间">{{ formatDate(orderDetail.createdAt || orderDetail.CreatedAt) }}</el-descriptions-item>
             <el-descriptions-item label="更新时间">{{ formatDate(orderDetail.updatedAt || orderDetail.UpdatedAt) }}</el-descriptions-item>
             <el-descriptions-item label="参数信息" :span="2">
@@ -231,6 +257,26 @@
           </el-descriptions>
         </div>
 
+        <!-- 退款信息 -->
+        <div class="od-section" v-if="hasRefundInfo(orderDetail)">
+          <div class="od-section-title">
+            <el-icon><Money /></el-icon><span>退款信息</span>
+          </div>
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item label="退款状态">
+              <el-tag :type="getRefundStatusType(orderDetail.refundStatus)" size="small">
+                {{ getRefundStatusText(orderDetail.refundStatus) }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="退款金额">¥{{ formatYuan(orderDetail.refundAmount) }}</el-descriptions-item>
+            <el-descriptions-item label="退款单号">
+              <span class="od-mono">{{ orderDetail.refundNo || '-' }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item label="退款时间">{{ orderDetail.refundTime ? formatDate(orderDetail.refundTime) : '-' }}</el-descriptions-item>
+            <el-descriptions-item label="退款原因" :span="2">{{ orderDetail.refundReason || '-' }}</el-descriptions-item>
+          </el-descriptions>
+        </div>
+
         <!-- 用户信息 -->
         <div class="od-section">
           <div class="od-section-title">
@@ -514,9 +560,12 @@
             </el-form-item>
             <el-form-item label="支付方式">
               <el-select v-model="orderForm.pay_type" placeholder="请选择" clearable style="width: 100%">
-                <el-option label="默认（余额）" value="default" />
-                <el-option label="支付宝" value="ali" />
-                <el-option label="微信" value="wx" />
+                <el-option label="默认/余额" value="default" />
+                <el-option label="余额" value="balance" />
+                <el-option label="007pay" value="007pay" />
+                <el-option label="管理员" value="admin" />
+                <el-option label="支付宝（旧）" value="ali" />
+                <el-option label="微信（旧）" value="wx" />
               </el-select>
             </el-form-item>
             <el-row :gutter="16">
@@ -568,6 +617,79 @@
       </template>
     </el-dialog>
 
+    <!-- 退款对话框 -->
+    <el-dialog
+      v-model="refundDialogVisible"
+      title="订单退款"
+      width="560px"
+      append-to-body
+      destroy-on-close
+    >
+      <div v-if="refundOrderInfo" class="refund-dialog-body">
+        <div class="refund-summary">
+          <div class="refund-summary-main">
+            <div class="refund-order-name">{{ refundOrderInfo.name || '未命名订单' }}</div>
+            <div class="refund-order-meta">
+              <span>订单 #{{ refundOrderInfo.id }}</span>
+              <el-divider direction="vertical" />
+              <span>{{ getPayTypeText(refundOrderInfo.payType) }}</span>
+            </div>
+          </div>
+          <div class="refund-order-amount">¥{{ formatYuan(refundOrderInfo.price) }}</div>
+        </div>
+
+        <el-form ref="refundFormRef" :model="refundForm" :rules="refundRules" label-width="110px">
+          <el-form-item label="退款方式" prop="refund_method">
+            <el-radio-group v-model="refundForm.refund_method">
+              <el-radio-button value="original" :disabled="!canOriginalRefund(refundOrderInfo)">原路退款</el-radio-button>
+              <el-radio-button value="balance" :disabled="!canBalanceRefund(refundOrderInfo)">退到余额</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="退款金额" prop="amount">
+            <div class="unit-input-row">
+              <el-input-number
+                v-model="refundForm.amount"
+                :min="0"
+                :max="Number(formatYuan(refundOrderInfo.price))"
+                :precision="2"
+                :step="0.01"
+                style="flex: 1"
+              />
+              <span class="unit-text">元</span>
+            </div>
+            <div class="form-tip">金额为 0 时退订单全额</div>
+          </el-form-item>
+
+          <el-form-item v-if="refundForm.refund_method === 'balance'" label="余额类型">
+            <el-select v-model="refundForm.balance_type" style="width: 100%">
+              <el-option label="云币" value="general" />
+              <el-option label="云钻" value="entity" />
+              <el-option label="云点" value="withdraw" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="退款原因">
+            <el-input
+              v-model="refundForm.reason"
+              type="textarea"
+              :rows="3"
+              maxlength="120"
+              show-word-limit
+              placeholder="请输入退款原因"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <template #footer>
+        <div class="wizard-footer">
+          <el-button @click="refundDialogVisible = false">取消</el-button>
+          <el-button type="primary" :loading="refundSubmitLoading" @click="submitRefund">确认退款</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
     <!-- 用户选择器 -->
     <UserListSelector
       v-model="userSelectorVisible"
@@ -603,7 +725,7 @@ import { ref, reactive, onMounted, onActivated, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus, Delete, Search, Download, Refresh, User, ShoppingCart, Ticket, Money, Close, Setting, Loading, Lock, Document, ArrowRight, Goods, Box } from '@element-plus/icons-vue'
-import { getOrderList, getOrderDetail, createOrder, updateOrder, deleteOrder, retryOrderHook } from '@/api/admin/order'
+import { getOrderList, getOrderDetail, createOrder, updateOrder, deleteOrder, retryOrderHook, refundOrder } from '@/api/admin/order'
 import { getProductPlanList, getProductParameterList, getProductParameterDetail } from '@/api/admin/product'
 import UserListSelector from '@/components/admin/UserListSelector.vue'
 import ProductSelector from '@/components/admin/ProductSelector.vue'
@@ -688,6 +810,10 @@ const selectedRows = ref([])
 const dialogVisible = ref(false)
 const detailDialogVisible = ref(false)
 const dialogType = ref('add')
+const refundDialogVisible = ref(false)
+const refundSubmitLoading = ref(false)
+const refundFormRef = ref(null)
+const refundOrderInfo = ref(null)
 
 // 选择器弹窗状态
 const userSelectorVisible = ref(false)
@@ -701,6 +827,34 @@ const selectedProductInfo = ref(null)
 const selectedDiscountCodeInfo = ref(null)
 const selectedVoucherInfo = ref(null)
 
+// 退款表单
+const refundForm = reactive({
+  order_id: undefined,
+  refund_method: 'balance',
+  amount: 0,
+  reason: '订单退款',
+  balance_type: 'general'
+})
+
+const validateRefundAmount = (rule, value, callback) => {
+  const priceYuan = (Number(refundOrderInfo.value?.price) || 0) / 100
+  const amount = Number(value) || 0
+  if (amount < 0) {
+    callback(new Error('退款金额不能小于 0'))
+    return
+  }
+  if (priceYuan > 0 && amount > priceYuan) {
+    callback(new Error('退款金额不能超过订单金额'))
+    return
+  }
+  callback()
+}
+
+const refundRules = {
+  refund_method: [{ required: true, message: '请选择退款方式', trigger: 'change' }],
+  amount: [{ validator: validateRefundAmount, trigger: 'blur' }]
+}
+
 // 获取订单列表
 const fetchOrderList = async () => {
   loading.value = true
@@ -765,10 +919,49 @@ const getTypeText = (type) => {
 
 // 获取支付方式文本
 const getPayTypeText = (payType) => {
-  const map = { ali: '支付宝', wx: '微信', default: '余额/默认' }
+  const map = {
+    default: '默认/余额',
+    balance: '余额',
+    '007pay': '007pay',
+    admin: '管理员',
+    ali: '支付宝',
+    wx: '微信'
+  }
   return map[payType] || payType || '-'
 }
 
+// 获取退款状态文本
+const getRefundStatusText = (status) => {
+  const map = { pending: '退款中', success: '已退款', failed: '退款失败' }
+  return map[status] || status || '未退款'
+}
+
+// 获取退款状态标签类型
+const getRefundStatusType = (status) => {
+  const map = { pending: 'warning', success: 'success', failed: 'danger' }
+  return map[status] || 'info'
+}
+
+const hasRefundInfo = (order) => {
+  return Boolean(order?.refundStatus || order?.refundAmount || order?.refundNo || order?.refundReason || order?.refundTime)
+}
+
+const isRefundLocked = (order) => {
+  return Boolean(order?.refundTime || order?.refundStatus === 'pending' || order?.refundStatus === 'success')
+}
+
+const canOriginalRefund = (order) => {
+  return Boolean(order?.state === 1 && order?.payType === '007pay' && order?.paymentOrderId)
+}
+
+const canBalanceRefund = (order) => {
+  return Boolean(order?.state === 1 && order?.table !== 'userBalance')
+}
+
+const canRefund = (order) => {
+  return Boolean(order?.state === 1 && !isRefundLocked(order) && (canOriginalRefund(order) || canBalanceRefund(order)))
+}
+
 // 分转元
 const formatYuan = (fen) => {
   return ((Number(fen) || 0) / 100).toFixed(2)
@@ -1002,6 +1195,80 @@ const handleRetryOrder = (row) => {
   }).catch(() => {})
 }
 
+// 打开退款弹窗
+const handleOpenRefund = (row) => {
+  if (!canRefund(row)) {
+    ElMessage.warning('当前订单不满足退款条件')
+    return
+  }
+  const refundMethod = canOriginalRefund(row) ? 'original' : 'balance'
+  refundOrderInfo.value = row
+  Object.assign(refundForm, {
+    order_id: row.id,
+    refund_method: refundMethod,
+    amount: Number(formatYuan(row.price)),
+    reason: '订单退款',
+    balance_type: 'general'
+  })
+  refundDialogVisible.value = true
+  refundFormRef.value?.clearValidate()
+}
+
+// 提交退款
+const submitRefund = async () => {
+  const formEl = refundFormRef.value
+  if (formEl) {
+    const valid = await formEl.validate().catch(() => false)
+    if (!valid) return
+  }
+
+  const methodText = refundForm.refund_method === 'original' ? '原路退款' : '退到余额'
+  const amountText = Number(refundForm.amount) > 0 ? `¥${Number(refundForm.amount).toFixed(2)}` : '订单全额'
+  try {
+    await ElMessageBox.confirm(
+      `确认将订单「${refundOrderInfo.value?.name || refundForm.order_id}」${methodText} ${amountText} 吗？`,
+      '订单退款',
+      {
+        confirmButtonText: '确认退款',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+  } catch {
+    return
+  }
+
+  refundSubmitLoading.value = true
+  try {
+    const submitData = {
+      order_id: Number(refundForm.order_id),
+      refund_method: refundForm.refund_method,
+      amount: Number(refundForm.amount) || 0,
+      reason: refundForm.reason || '订单退款'
+    }
+    if (refundForm.refund_method === 'balance') {
+      submitData.balance_type = refundForm.balance_type || 'general'
+    }
+
+    const res = await refundOrder(submitData)
+    if (res.data.code === 200) {
+      ElMessage.success('退款成功')
+      refundDialogVisible.value = false
+      await fetchOrderList()
+      if (detailDialogVisible.value && orderDetail.value?.id === submitData.order_id) {
+        await handleView(submitData.order_id)
+      }
+    } else {
+      ElMessage.error(res.data.message || '退款失败')
+    }
+  } catch (error) {
+    console.error('订单退款失败:', error)
+    ElMessage.error(error.response?.data?.message || '订单退款失败')
+  } finally {
+    refundSubmitLoading.value = false
+  }
+}
+
 // 删除订单
 const handleDelete = (row) => {
   ElMessageBox.confirm(`确认删除订单 ${row.name} 吗？`, '警告', {
@@ -1696,6 +1963,9 @@ watch(() => route.query.order_id, (newId) => {
   font-size: 13px;
   font-weight: 400;
 }
+.od-section-action {
+  margin-left: auto;
+}
 .od-section-link .el-icon {
   color: inherit;
   margin-left: 2px;
@@ -1707,4 +1977,48 @@ watch(() => route.query.order_id, (newId) => {
 .od-args {
   word-break: break-all;
 }
+
+.refund-dialog-body {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.refund-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 14px 16px;
+  background: #f7f8fa;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+}
+
+.refund-summary-main {
+  min-width: 0;
+}
+
+.refund-order-name {
+  font-weight: 600;
+  color: #303133;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.refund-order-meta {
+  display: flex;
+  align-items: center;
+  margin-top: 6px;
+  color: #909399;
+  font-size: 12px;
+}
+
+.refund-order-amount {
+  color: #f56c6c;
+  font-size: 20px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
 </style>
diff --git a/src/views/order/PaymentConfig.vue b/src/views/order/PaymentConfig.vue
new file mode 100644
index 0000000..2fd6474
--- /dev/null
+++ b/src/views/order/PaymentConfig.vue
@@ -0,0 +1,346 @@
+<template>
+  <div class="payment-config-page">
+    <div class="page-toolbar">
+      <div class="title-block">
+        <div class="title-icon">
+          <el-icon><Money /></el-icon>
+        </div>
+        <div>
+          <h2>007pay 支付配置</h2>
+          <p>管理 007pay 收银台、回调与支付通道参数</p>
+        </div>
+      </div>
+      <div class="toolbar-actions">
+        <el-button :loading="loading" @click="fetchConfig">
+          <el-icon><Refresh /></el-icon>刷新
+        </el-button>
+        <el-button type="primary" :loading="saving" @click="submitForm">
+          <el-icon><Check /></el-icon>保存配置
+        </el-button>
+      </div>
+    </div>
+
+    <div class="summary-grid">
+      <div class="summary-item">
+        <div class="summary-label">配置状态</div>
+        <div class="summary-value">
+          <el-tag :type="isConfigured ? 'success' : 'warning'" effect="plain">
+            {{ isConfigured ? '已配置' : '待完善' }}
+          </el-tag>
+        </div>
+      </div>
+      <div class="summary-item">
+        <div class="summary-label">商户 PID</div>
+        <div class="summary-value mono">{{ form.pid || '-' }}</div>
+      </div>
+      <div class="summary-item">
+        <div class="summary-label">通道类型</div>
+        <div class="summary-value">
+          <el-tag type="info" effect="plain">{{ getChannelText(form.channel_type) }}</el-tag>
+        </div>
+      </div>
+    </div>
+
+    <div class="config-panel" v-loading="loading">
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="150px"
+        class="config-form"
+      >
+        <el-form-item label="API 地址" prop="base_url">
+          <el-input v-model.trim="form.base_url" placeholder="https://pay.example.com" clearable>
+            <template #prefix><el-icon><Connection /></el-icon></template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="商户 PID" prop="pid">
+          <el-input v-model.trim="form.pid" placeholder="请输入商户 PID" clearable>
+            <template #prefix><el-icon><Setting /></el-icon></template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="商户密钥" prop="key">
+          <el-input v-model.trim="form.key" placeholder="请输入商户密钥" show-password clearable>
+            <template #prefix><el-icon><Key /></el-icon></template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="异步回调地址" prop="notify_url">
+          <el-input v-model.trim="form.notify_url" placeholder="https://api.example.com/api/v1/callback/007pay/pay" clearable>
+            <template #prefix><el-icon><Connection /></el-icon></template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="同步跳转地址" prop="return_url">
+          <el-input v-model.trim="form.return_url" placeholder="https://example.com/pay/return" clearable>
+            <template #prefix><el-icon><Connection /></el-icon></template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item label="通道类型" prop="channel_type">
+          <el-select
+            v-model="form.channel_type"
+            placeholder="请选择或输入通道类型"
+            filterable
+            allow-create
+            default-first-option
+            clearable
+            style="width: 100%"
+          >
+            <el-option label="支付宝" value="alipay" />
+            <el-option label="微信支付" value="wxpay" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+      <div class="panel-footer">
+        <el-button @click="resetForm">重置</el-button>
+        <el-button type="primary" :loading="saving" @click="submitForm">保存配置</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Check, Connection, Key, Money, Refresh, Setting } from '@element-plus/icons-vue'
+import { getPay007Config, updatePay007Config } from '@/api/admin/pay007'
+
+const formRef = ref(null)
+const loading = ref(false)
+const saving = ref(false)
+
+const emptyForm = {
+  base_url: '',
+  pid: '',
+  key: '',
+  notify_url: '',
+  return_url: '',
+  channel_type: ''
+}
+
+const form = reactive({ ...emptyForm })
+const originalForm = ref({ ...emptyForm })
+
+const optionalUrlValidator = (rule, value, callback) => {
+  if (!value) {
+    callback()
+    return
+  }
+  try {
+    const url = new URL(value)
+    if (!['http:', 'https:'].includes(url.protocol)) {
+      callback(new Error('请输入 http 或 https 地址'))
+      return
+    }
+    callback()
+  } catch {
+    callback(new Error('请输入有效地址'))
+  }
+}
+
+const rules = {
+  base_url: [{ validator: optionalUrlValidator, trigger: 'blur' }],
+  notify_url: [{ validator: optionalUrlValidator, trigger: 'blur' }],
+  return_url: [{ validator: optionalUrlValidator, trigger: 'blur' }]
+}
+
+const isConfigured = computed(() => {
+  return Boolean(form.base_url && form.pid && form.key && form.notify_url)
+})
+
+const getChannelText = (channel) => {
+  const map = {
+    alipay: '支付宝',
+    wxpay: '微信支付'
+  }
+  return map[channel] || channel || '-'
+}
+
+const assignForm = (data = {}) => {
+  Object.assign(form, {
+    base_url: data.base_url || '',
+    pid: data.pid || '',
+    key: data.key || '',
+    notify_url: data.notify_url || '',
+    return_url: data.return_url || '',
+    channel_type: data.channel_type || ''
+  })
+  originalForm.value = { ...form }
+}
+
+const fetchConfig = async () => {
+  loading.value = true
+  try {
+    const res = await getPay007Config()
+    if (res.data.code === 200) {
+      assignForm(res.data.data || {})
+    } else {
+      ElMessage.error(res.data.message || '获取支付配置失败')
+    }
+  } catch (error) {
+    console.error('获取 007pay 支付配置失败:', error)
+    ElMessage.error(error.response?.data?.message || '获取支付配置失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const submitForm = async () => {
+  const formEl = formRef.value
+  if (formEl) {
+    const valid = await formEl.validate().catch(() => false)
+    if (!valid) return
+  }
+
+  saving.value = true
+  try {
+    const res = await updatePay007Config({ ...form })
+    if (res.data.code === 200) {
+      assignForm(res.data.data || form)
+      ElMessage.success('支付配置已保存')
+    } else {
+      ElMessage.error(res.data.message || '保存支付配置失败')
+    }
+  } catch (error) {
+    console.error('保存 007pay 支付配置失败:', error)
+    ElMessage.error(error.response?.data?.message || '保存支付配置失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+const resetForm = () => {
+  Object.assign(form, originalForm.value)
+  formRef.value?.clearValidate()
+}
+
+onMounted(fetchConfig)
+</script>
+
+<style scoped>
+.payment-config-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.page-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  padding: 18px 20px;
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+}
+
+.title-block {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.title-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f0f9eb;
+  color: #67c23a;
+  font-size: 22px;
+  flex-shrink: 0;
+}
+
+.title-block h2 {
+  margin: 0;
+  color: #1f2d3d;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.title-block p {
+  margin: 4px 0 0;
+  color: #909399;
+  font-size: 13px;
+}
+
+.toolbar-actions {
+  display: flex;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.summary-item {
+  padding: 14px 16px;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+}
+
+.summary-label {
+  color: #909399;
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+.summary-value {
+  min-height: 24px;
+  color: #303133;
+  font-size: 15px;
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.summary-value.mono {
+  font-family: Consolas, Monaco, monospace;
+}
+
+.config-panel {
+  padding: 24px 22px 18px;
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+}
+
+.config-form {
+  max-width: 880px;
+}
+
+.panel-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding-top: 18px;
+  border-top: 1px solid #f0f2f5;
+}
+
+@media (max-width: 900px) {
+  .page-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .toolbar-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/views/user/UserDetail.vue b/src/views/user/UserDetail.vue
index 73fc0e0..2b9d17b 100644
--- a/src/views/user/UserDetail.vue
+++ b/src/views/user/UserDetail.vue
@@ -213,6 +213,17 @@
                         <el-tag :type="getOrderStatusType(row.state)" size="small">{{ getOrderStatusText(row.state) }}</el-tag>
                       </template>
                     </el-table-column>
+                    <el-table-column label="支付方式" width="100">
+                      <template #default="{row}">{{ getOrderPayTypeText(row.payType) }}</template>
+                    </el-table-column>
+                    <el-table-column label="退款" width="95">
+                      <template #default="{row}">
+                        <el-tag v-if="row.refundStatus" :type="getOrderRefundStatusType(row.refundStatus)" size="small">
+                          {{ getOrderRefundStatusText(row.refundStatus) }}
+                        </el-tag>
+                        <span v-else>-</span>
+                      </template>
+                    </el-table-column>
                     <el-table-column label="到期时间" width="160">
                       <template #default="{row}">{{ row.expireTime ? formatDate(row.expireTime) : '-' }}</template>
                     </el-table-column>
@@ -1463,26 +1474,48 @@ const fetchUserBalance = async () => {
 
 // 订单状态
 const getOrderStatusText = (state) => {
-  const map = { 0: '待支付', 1: '已支付', 2: '已取消', 3: '已退款', 4: '已完成' }
+  const map = { 0: '待支付', 1: '已支付', 2: '已失效' }
   return map[state] || '未知'
 }
 
 const getOrderStatusType = (state) => {
-  const map = { 0: 'warning', 1: 'success', 2: 'info', 3: 'danger', 4: 'success' }
+  const map = { 0: 'warning', 1: 'success', 2: 'info' }
   return map[state] || 'info'
 }
 
 // 订单类型
 const getOrderTypeText = (type) => {
-  const map = { create: '新购', renew: '续费', upgrade: '升级' }
+  const map = { create: '新购', renew: '续费', update: '升级', snapshot: '快照', backup: '备份', data_volume: '数据盘', ipv4: 'IPv4', ipv6: 'IPv6', traffic: '流量', rebuild_image_diff: '重装差价' }
   return map[type] || type || '未知'
 }
 
 const getOrderTypeTag = (type) => {
-  const map = { create: 'primary', renew: 'success', upgrade: 'warning' }
+  const map = { create: 'primary', renew: 'success', update: 'warning' }
   return map[type] || 'info'
 }
 
+const getOrderPayTypeText = (payType) => {
+  const map = {
+    default: '默认/余额',
+    balance: '余额',
+    '007pay': '007pay',
+    admin: '管理员',
+    ali: '支付宝',
+    wx: '微信'
+  }
+  return map[payType] || payType || '-'
+}
+
+const getOrderRefundStatusText = (status) => {
+  const map = { pending: '退款中', success: '已退款', failed: '退款失败' }
+  return map[status] || status || '-'
+}
+
+const getOrderRefundStatusType = (status) => {
+  const map = { pending: 'warning', success: 'success', failed: 'danger' }
+  return map[status] || 'info'
+}
+
 // 工单状态
 const getTicketStatusText = (status) => {
   const map = { 0: '待处理', 1: '处理中', 2: '已回复', 3: '已关闭' }
-- 
2.54.0


From afc00141f7abfcdb4490c7844a4abd6cfc112a2d Mon Sep 17 00:00:00 2001
From: shiran <admin@example.com>
Date: Fri, 17 Jul 2026 17:26:10 +0800
Subject: [PATCH 3/7] fix: support sms signature file download

---
 src/views/sms/SmsSignature.vue | 94 ++++++++++++++++++++++++++++++++--
 1 file changed, 91 insertions(+), 3 deletions(-)

diff --git a/src/views/sms/SmsSignature.vue b/src/views/sms/SmsSignature.vue
index a272912..db18dd7 100644
--- a/src/views/sms/SmsSignature.vue
+++ b/src/views/sms/SmsSignature.vue
@@ -288,8 +288,17 @@
         </div>
         <div class="detail-file-row">
           <span class="detail-img-label">申请文件</span>
-          <el-link v-if="detailData.application_file_url" type="primary" :href="detailData.application_file_url" target="_blank">查看申请文件</el-link>
-          <span v-else class="detail-empty-text">未上传</span>
+          <el-button
+            v-if="getApplicationFileUrl(detailData)"
+            link
+            type="primary"
+            :loading="applicationFileDownloading"
+            @click="downloadApplicationFile(detailData)"
+          >
+            <el-icon v-if="!applicationFileDownloading"><Download /></el-icon>
+            下载申请文件
+          </el-button>
+          <span v-else class="detail-empty-text">暂无可下载文件</span>
         </div>
       </div>
       <template #footer>
@@ -314,8 +323,9 @@
 
 <script setup>
 import { ref, reactive, onMounted } from 'vue'
+import axios from 'axios'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, User, Close, Picture } from '@element-plus/icons-vue'
+import { Plus, User, Close, Picture, Download } from '@element-plus/icons-vue'
 import { formatDate } from '@/utils/tool'
 import {
   getSmsServiceList,
@@ -392,6 +402,7 @@ const currentRow = ref(null)
 
 const detailVisible = ref(false)
 const detailData = ref(null)
+const applicationFileDownloading = ref(false)
 
 const userSelectorVisible = ref(false)
 const selectedUserInfo = ref(null)
@@ -466,6 +477,83 @@ const handleDetail = (row) => {
   detailVisible.value = true
 }
 
+const getSignatureService = (row) => {
+  const serviceId = row.service_id || queryParams.service_id
+  return serviceOptions.value.find(item => String(item.id) === String(serviceId))
+}
+
+const getApplicationFileUrl = (row) => {
+  if (!row?.ID || !row?.application_file_url) return ''
+  const service = getSignatureService(row)
+  const endpoint = String(service?.host || '').replace(/\/+$/, '')
+  if (!endpoint) return ''
+  return `${endpoint}/api/sms/admin/signature/${row.ID}/application-file`
+}
+
+const getDownloadFilename = (headers, signatureId) => {
+  const disposition = headers?.['content-disposition'] || ''
+  const utf8Match = disposition.match(/filename\*=UTF-8''([^;]+)/i)
+  const plainMatch = disposition.match(/filename="?([^";]+)"?/i)
+  const encodedName = utf8Match?.[1] || plainMatch?.[1]
+  if (!encodedName) return `签名申请文件_${signatureId}.xlsx`
+  try {
+    return decodeURIComponent(encodedName)
+  } catch {
+    return encodedName
+  }
+}
+
+const downloadApplicationFile = async (row) => {
+  const url = getApplicationFileUrl(row)
+  if (!url || applicationFileDownloading.value) return
+
+  const service = getSignatureService(row)
+  const endpoint = String(service?.host || '').replace(/\/+$/, '')
+  const serviceToken = service?.serviceToken || service?.service_token
+  if (!serviceToken) {
+    ElMessage.error('当前短信平台未配置 Service Token')
+    return
+  }
+
+  applicationFileDownloading.value = true
+  try {
+    const loginResponse = await axios.post(
+      `${endpoint}/api/auth/service-token-login`,
+      { service_token: serviceToken },
+      { timeout: 15000 }
+    )
+    const loginBody = loginResponse.data || {}
+    const platformToken = loginBody.data?.token
+    if (loginBody.code !== 200 || !platformToken) {
+      throw new Error(loginBody.message || '短信平台 Token 获取失败')
+    }
+
+    const response = await axios.get(url, {
+      headers: { Authorization: `Bearer ${platformToken}` },
+      responseType: 'blob',
+      timeout: 60000
+    })
+    const contentType = response.headers?.['content-type'] || ''
+    if (contentType.includes('application/json')) {
+      const body = JSON.parse(await response.data.text())
+      throw new Error(body.message || body.msg || '下载申请文件失败')
+    }
+
+    const objectUrl = window.URL.createObjectURL(response.data)
+    const link = document.createElement('a')
+    link.href = objectUrl
+    link.download = getDownloadFilename(response.headers, row.ID)
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+    window.URL.revokeObjectURL(objectUrl)
+  } catch (error) {
+    ElMessage.error(error.message || '下载申请文件失败')
+  } finally {
+    applicationFileDownloading.value = false
+  }
+}
+
 const handleAdd = () => {
   dialogType.value = 'add'
   selectedUserInfo.value = null
-- 
2.54.0


From c5d4dbc0dbddac53dd7acad2e9fb61c06ee387de Mon Sep 17 00:00:00 2001
From: shiran <admin@example.com>
Date: Mon, 20 Jul 2026 18:33:46 +0800
Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E8=AE=A2?=
 =?UTF-8?q?=E5=8D=95=E5=AE=9A=E4=BB=B7=E4=B8=8E=E6=94=AF=E4=BB=98=E6=94=B6?=
 =?UTF-8?q?=E7=9B=8A=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/order.js                |   8 +
 src/api/admin/pay007.js               |  10 +
 src/config/menus.js                   |   4 +
 src/router/index.js                   |   8 +
 src/views/dashboard/Dashboard.vue     | 721 +++++++++++++++++++++++++-
 src/views/order/OrderList.vue         | 280 +++++++++-
 src/views/order/Pay007Orders.vue      | 479 +++++++++++++++++
 src/views/product/UserGoodsDetail.vue |  28 +-
 src/views/product/UserGoodsList.vue   |   3 +-
 src/views/user/UserBalance.vue        | 115 ++--
 src/views/user/UserDetail.vue         |  42 +-
 11 files changed, 1600 insertions(+), 98 deletions(-)
 create mode 100644 src/views/order/Pay007Orders.vue

diff --git a/src/api/admin/order.js b/src/api/admin/order.js
index 69fcb62..f656685 100644
--- a/src/api/admin/order.js
+++ b/src/api/admin/order.js
@@ -7,6 +7,14 @@ export const getOrderList = (params) => {
 export const getOrderDetail = (params) => {
   return http2.get('/api/v1/admin/order/detail', {params: params})
 }
+/**计算新购订单价格 */
+export const getOrderPrice = (data) => {
+  return http2.post('/api/v1/admin/order/price', data, {
+    headers:{
+      'Content-Type':'multipart/form-data'
+    }
+  })
+}
 /**删除订单 (未提供删除接口,暂时保留) */
 /**删除订单 */
 export const deleteOrder = (data) => {
diff --git a/src/api/admin/pay007.js b/src/api/admin/pay007.js
index 2dd5253..c03e275 100644
--- a/src/api/admin/pay007.js
+++ b/src/api/admin/pay007.js
@@ -13,3 +13,13 @@ export const updatePay007Config = (data) => {
     }
   })
 }
+
+/** 查询 007pay 订单 */
+export const getPay007Orders = (params) => {
+  return http2.get('/api/v1/admin/pay007/orders', { params })
+}
+
+/** 查询 007pay 收益统计 */
+export const getPay007Stats = (params) => {
+  return http2.get('/api/v1/admin/pay007/stats', { params })
+}
diff --git a/src/config/menus.js b/src/config/menus.js
index fcc3776..394f289 100644
--- a/src/config/menus.js
+++ b/src/config/menus.js
@@ -69,6 +69,10 @@ export const menus = [
         path: '/order/list',
         title: '订单列表'
       },
+      {
+        path: '/order/pay007-orders',
+        title: '007pay订单'
+      },
       {
         path: '/order/payment-config',
         title: '支付配置'
diff --git a/src/router/index.js b/src/router/index.js
index 97b9a04..656d932 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -314,6 +314,14 @@ const routes = [
               title: '订单列表'
             }
           },
+          {
+            path: 'pay007-orders',
+            name: 'Pay007Orders',
+            component: () => import('../views/order/Pay007Orders.vue'),
+            meta: {
+              title: '007pay订单'
+            }
+          },
           {
             path: 'payment-config',
             name: 'PaymentConfig',
diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue
index f74beb1..f1108fa 100644
--- a/src/views/dashboard/Dashboard.vue
+++ b/src/views/dashboard/Dashboard.vue
@@ -28,6 +28,77 @@
       </el-col>
     </el-row>
 
+    <!-- 007pay 收益计算 -->
+    <el-row :gutter="24" class="revenue-row">
+      <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
+        <el-card class="revenue-card" shadow="hover" v-loading="revenueLoading">
+          <div class="revenue-header">
+            <div>
+              <div class="revenue-eyebrow">007pay Revenue</div>
+              <h3>收益计算中心</h3>
+              <p>日维度与月维度的到账、退款、手续费、净收益联动对比</p>
+            </div>
+            <el-button circle plain :loading="revenueLoading" @click="fetchRevenueStats">
+              <el-icon><Refresh /></el-icon>
+            </el-button>
+          </div>
+
+          <div class="revenue-kpis">
+            <div v-for="item in revenueMetricCards" :key="item.label" class="revenue-kpi" :class="item.accent">
+              <div class="kpi-label">{{ item.label }}</div>
+              <div class="kpi-value">{{ item.value }}</div>
+              <div class="kpi-footer">
+                <span>{{ item.compare }}</span>
+                <span :class="['kpi-change', item.changeClass]">{{ item.change }}</span>
+              </div>
+              <div class="kpi-detail">{{ item.detail }}</div>
+            </div>
+          </div>
+
+          <el-alert
+            v-if="revenueError"
+            type="warning"
+            :closable="false"
+            show-icon
+            class="revenue-alert"
+            :title="revenueError"
+          />
+          <div ref="revenueChartRef" class="revenue-chart"></div>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+        <el-card class="revenue-side-card" shadow="hover" v-loading="revenueLoading">
+          <div class="side-header">
+            <div>
+              <h3>日月对比</h3>
+              <p>{{ revenueSnapshotText }}</p>
+            </div>
+          </div>
+          <div class="revenue-compare">
+            <div v-for="row in revenueCompareRows" :key="row.label" class="compare-row">
+              <div class="compare-main">
+                <span class="compare-label">{{ row.label }}</span>
+                <span class="compare-value">{{ row.value }}</span>
+              </div>
+              <div class="compare-sub">
+                <span>{{ row.subLabel }}</span>
+                <span>{{ row.subValue }}</span>
+              </div>
+              <div class="compare-track">
+                <div class="compare-bar" :style="{ width: row.percent + '%', background: row.color }"></div>
+              </div>
+            </div>
+          </div>
+          <div class="revenue-health">
+            <div v-for="item in revenueHealthItems" :key="item.label" class="health-item">
+              <div class="health-value">{{ item.value }}</div>
+              <div class="health-label">{{ item.label }}</div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
     <!-- 图表部分 -->
     <!-- <el-row :gutter="24" class="chart-row">
       <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
@@ -339,7 +410,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted, onUnmounted, watch, computed, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { 
   User, ShoppingCart, Money, DataAnalysis, 
@@ -352,6 +423,7 @@ import Qrcode from '@/components/Qrcode.vue'
 import {useUserStore} from "@/store/userStore.js";
 import { getUserList } from '@/api/admin/user'
 import { getOrderList } from '@/api/admin/order'
+import { getPay007Stats } from '@/api/admin/pay007'
 import { getTicketCount, getTickerList } from '@/api/ticket'
 
 const userStore = useUserStore()
@@ -368,6 +440,268 @@ const recentOrders = ref([])
 const recentTickets = ref([])
 const listLoading = ref(false)
 
+const emptyPay007Stats = () => ({
+  order_count: 0,
+  total_amount: 0,
+  total_fee: 0,
+  net_amount: 0,
+  total_order_count: 0,
+  paid_order_count: 0,
+  unpaid_order_count: 0,
+  refunded_order_count: 0,
+  closed_order_count: 0,
+  manual_order_count: 0,
+  received_amount: 0,
+  refund_amount: 0,
+  refund_count: 0
+})
+
+const revenueLoading = ref(false)
+const revenueError = ref('')
+const revenueChartRef = ref(null)
+let revenueChart = null
+
+const revenueStats = ref({
+  today: emptyPay007Stats(),
+  yesterday: emptyPay007Stats(),
+  thisMonth: emptyPay007Stats(),
+  lastMonth: emptyPay007Stats(),
+  daily: [],
+  monthly: []
+})
+
+const normalizePay007Stats = (data = {}) => {
+  const stats = emptyPay007Stats()
+  Object.keys(stats).forEach(key => {
+    stats[key] = Number(data?.[key]) || 0
+  })
+  if (!stats.order_count && stats.paid_order_count) {
+    stats.order_count = stats.paid_order_count
+  }
+  return stats
+}
+
+const padNumber = (num) => String(num).padStart(2, '0')
+const formatApiDateTime = (date) => {
+  return [
+    date.getFullYear(),
+    padNumber(date.getMonth() + 1),
+    padNumber(date.getDate())
+  ].join('-') + ' ' + [
+    padNumber(date.getHours()),
+    padNumber(date.getMinutes()),
+    padNumber(date.getSeconds())
+  ].join(':')
+}
+
+const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0)
+const endOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59)
+const startOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0)
+const endOfMonth = (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0, 23, 59, 59)
+const addDays = (date, days) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + days)
+const addMonths = (date, months) => new Date(date.getFullYear(), date.getMonth() + months, 1)
+
+const formatDayLabel = (date) => `${date.getMonth() + 1}/${date.getDate()}`
+const formatMonthLabel = (date) => `${date.getFullYear()}.${padNumber(date.getMonth() + 1)}`
+const centToYuan = (value) => (Number(value) || 0) / 100
+const formatCurrency = (value) => `¥${centToYuan(value).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+const formatPercent = (value) => `${((Number(value) || 0) * 100).toFixed(1)}%`
+const ratio = (part, total) => total > 0 ? Math.min(100, Math.max(0, Math.round((part / total) * 100))) : 0
+
+const calcChange = (current, previous) => {
+  const c = Number(current) || 0
+  const p = Number(previous) || 0
+  if (p === 0) return c === 0 ? 0 : null
+  return ((c - p) / Math.abs(p)) * 100
+}
+
+const getChangeText = (current, previous) => {
+  const change = calcChange(current, previous)
+  if (change === null) return '新增'
+  if (Math.abs(change) < 0.05) return '持平'
+  return `${change > 0 ? '+' : ''}${change.toFixed(1)}%`
+}
+
+const getChangeClass = (current, previous, inverse = false) => {
+  const change = calcChange(current, previous)
+  if (change === null) return current > 0 ? (inverse ? 'down' : 'up') : 'flat'
+  if (Math.abs(change) < 0.05) return 'flat'
+  const positive = change > 0
+  return positive === !inverse ? 'up' : 'down'
+}
+
+const safePercent = (part, total) => {
+  if (!total) return '0.0%'
+  return `${((part / total) * 100).toFixed(1)}%`
+}
+
+const revenueMetricCards = computed(() => {
+  const { today, yesterday, thisMonth, lastMonth } = revenueStats.value
+  return [
+    {
+      label: '今日净收益',
+      value: formatCurrency(today.net_amount),
+      compare: '较昨日',
+      change: getChangeText(today.net_amount, yesterday.net_amount),
+      changeClass: getChangeClass(today.net_amount, yesterday.net_amount),
+      detail: `到账 ${formatCurrency(today.received_amount)} · ${today.paid_order_count} 单`,
+      accent: 'emerald'
+    },
+    {
+      label: '本月净收益',
+      value: formatCurrency(thisMonth.net_amount),
+      compare: '较上月',
+      change: getChangeText(thisMonth.net_amount, lastMonth.net_amount),
+      changeClass: getChangeClass(thisMonth.net_amount, lastMonth.net_amount),
+      detail: `手续费 ${formatCurrency(thisMonth.total_fee)} · 退款 ${formatCurrency(thisMonth.refund_amount)}`,
+      accent: 'blue'
+    },
+    {
+      label: '本月到账',
+      value: formatCurrency(thisMonth.received_amount),
+      compare: '较上月',
+      change: getChangeText(thisMonth.received_amount, lastMonth.received_amount),
+      changeClass: getChangeClass(thisMonth.received_amount, lastMonth.received_amount),
+      detail: `总订单 ${thisMonth.total_order_count} · 已支付 ${thisMonth.paid_order_count}`,
+      accent: 'violet'
+    },
+    {
+      label: '本月退款',
+      value: formatCurrency(thisMonth.refund_amount),
+      compare: '较上月',
+      change: getChangeText(thisMonth.refund_amount, lastMonth.refund_amount),
+      changeClass: getChangeClass(thisMonth.refund_amount, lastMonth.refund_amount, true),
+      detail: `退款 ${thisMonth.refund_count} 笔 · 关闭 ${thisMonth.closed_order_count} 单`,
+      accent: 'amber'
+    }
+  ]
+})
+
+const revenueCompareRows = computed(() => {
+  const { today, yesterday, thisMonth, lastMonth } = revenueStats.value
+  return [
+    {
+      label: '今日净收益',
+      value: formatCurrency(today.net_amount),
+      subLabel: '昨日',
+      subValue: formatCurrency(yesterday.net_amount),
+      percent: ratio(today.net_amount, Math.max(today.net_amount, yesterday.net_amount)),
+      color: 'linear-gradient(90deg, #10b981, #34d399)'
+    },
+    {
+      label: '本月净收益',
+      value: formatCurrency(thisMonth.net_amount),
+      subLabel: '上月',
+      subValue: formatCurrency(lastMonth.net_amount),
+      percent: ratio(thisMonth.net_amount, Math.max(thisMonth.net_amount, lastMonth.net_amount)),
+      color: 'linear-gradient(90deg, #2563eb, #60a5fa)'
+    },
+    {
+      label: '本月手续费',
+      value: formatCurrency(thisMonth.total_fee),
+      subLabel: '费率',
+      subValue: safePercent(thisMonth.total_fee, thisMonth.received_amount),
+      percent: ratio(thisMonth.total_fee, thisMonth.received_amount),
+      color: 'linear-gradient(90deg, #f59e0b, #fbbf24)'
+    },
+    {
+      label: '本月退款',
+      value: formatCurrency(thisMonth.refund_amount),
+      subLabel: '退款率',
+      subValue: safePercent(thisMonth.refund_amount, thisMonth.total_amount || thisMonth.received_amount),
+      percent: ratio(thisMonth.refund_amount, thisMonth.total_amount || thisMonth.received_amount),
+      color: 'linear-gradient(90deg, #ef4444, #fb7185)'
+    }
+  ]
+})
+
+const revenueHealthItems = computed(() => {
+  const month = revenueStats.value.thisMonth
+  return [
+    { label: '净收益率', value: formatPercent(month.received_amount ? month.net_amount / month.received_amount : 0) },
+    { label: '支付完成率', value: formatPercent(month.total_order_count ? month.paid_order_count / month.total_order_count : 0) },
+    { label: '手工入账', value: `${month.manual_order_count} 单` },
+    { label: '待支付', value: `${month.unpaid_order_count} 单` }
+  ]
+})
+
+const revenueSnapshotText = computed(() => {
+  const month = revenueStats.value.thisMonth
+  return `本月已支付 ${month.paid_order_count} 单，净收益 ${formatCurrency(month.net_amount)}`
+})
+
+const fetchPay007StatsRange = async (begin, end) => {
+  const res = await getPay007Stats({
+    begin: formatApiDateTime(begin),
+    end: formatApiDateTime(end)
+  })
+  if (res?.data?.code === 200) {
+    return normalizePay007Stats(res.data.data)
+  }
+  throw new Error(res?.data?.message || '007pay 收益统计获取失败')
+}
+
+const fetchRevenueStats = async () => {
+  revenueLoading.value = true
+  revenueError.value = ''
+
+  const todayBase = new Date()
+  const yesterdayBase = addDays(todayBase, -1)
+  const lastMonthBase = addMonths(todayBase, -1)
+  let hasError = false
+  const safeFetch = async (begin, end) => {
+    try {
+      return await fetchPay007StatsRange(begin, end)
+    } catch (error) {
+      if (!hasError) {
+        console.warn('获取 007pay 收益统计失败:', error)
+      }
+      hasError = true
+      return emptyPay007Stats()
+    }
+  }
+
+  try {
+    const dailyRanges = Array.from({ length: 7 }, (_, index) => {
+      const date = addDays(todayBase, index - 6)
+      return { label: formatDayLabel(date), begin: startOfDay(date), end: endOfDay(date) }
+    })
+    const monthlyRanges = Array.from({ length: 6 }, (_, index) => {
+      const date = addMonths(todayBase, index - 5)
+      return { label: formatMonthLabel(date), begin: startOfMonth(date), end: endOfMonth(date) }
+    })
+
+    const [
+      today,
+      yesterday,
+      thisMonth,
+      lastMonth,
+      dailyStats,
+      monthlyStats
+    ] = await Promise.all([
+      safeFetch(startOfDay(todayBase), endOfDay(todayBase)),
+      safeFetch(startOfDay(yesterdayBase), endOfDay(yesterdayBase)),
+      safeFetch(startOfMonth(todayBase), endOfDay(todayBase)),
+      safeFetch(startOfMonth(lastMonthBase), endOfMonth(lastMonthBase)),
+      Promise.all(dailyRanges.map(async item => ({ ...item, stats: await safeFetch(item.begin, item.end) }))),
+      Promise.all(monthlyRanges.map(async item => ({ ...item, stats: await safeFetch(item.begin, item.end) })))
+    ])
+
+    revenueStats.value = {
+      today,
+      yesterday,
+      thisMonth,
+      lastMonth,
+      daily: dailyStats,
+      monthly: monthlyStats
+    }
+    revenueError.value = hasError ? '007pay 收益统计暂不可用，请检查支付配置或稍后刷新。' : ''
+  } finally {
+    revenueLoading.value = false
+    updateRevenueChart()
+  }
+}
+
 // 数据统计卡片
 const statisticsCards = computed(() => [
   { 
@@ -618,19 +952,159 @@ const getPriorityType = (priority) => {
   }
 }
 
+const updateRevenueChart = async () => {
+  await nextTick()
+  if (!revenueChartRef.value) return
+  if (!revenueChart) {
+    revenueChart = echarts.init(revenueChartRef.value)
+  }
+
+  const daily = revenueStats.value.daily
+  const monthly = revenueStats.value.monthly
+  const dayLabels = daily.map(item => item.label)
+  const monthLabels = monthly.map(item => item.label)
+  const toYuanSeries = (items, key) => items.map(item => Number(centToYuan(item.stats?.[key]).toFixed(2)))
+
+  revenueChart.setOption({
+    color: ['#2563eb', '#10b981', '#f59e0b', '#7c3aed'],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      backgroundColor: 'rgba(255,255,255,0.96)',
+      borderColor: '#e5e7eb',
+      borderWidth: 1,
+      textStyle: { color: '#111827' },
+      formatter(params) {
+        const title = params?.[0]?.axisValue || ''
+        const lines = params.map(item => {
+          return `${item.marker}${item.seriesName}：¥${Number(item.value || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+        })
+        return [title, ...lines].join('<br/>')
+      }
+    },
+    legend: {
+      top: 0,
+      right: 8,
+      itemWidth: 10,
+      itemHeight: 10,
+      textStyle: { color: '#6b7280' }
+    },
+    grid: [
+      { left: 48, right: 24, top: 52, height: 142 },
+      { left: 48, right: 24, top: 248, height: 132 }
+    ],
+    xAxis: [
+      {
+        type: 'category',
+        gridIndex: 0,
+        data: dayLabels,
+        axisTick: { show: false },
+        axisLine: { lineStyle: { color: '#e5e7eb' } },
+        axisLabel: { color: '#6b7280' }
+      },
+      {
+        type: 'category',
+        gridIndex: 1,
+        data: monthLabels,
+        axisTick: { show: false },
+        axisLine: { lineStyle: { color: '#e5e7eb' } },
+        axisLabel: { color: '#6b7280' }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        gridIndex: 0,
+        splitLine: { lineStyle: { color: '#eef2f7' } },
+        axisLabel: { color: '#6b7280', formatter: value => `¥${value}` }
+      },
+      {
+        type: 'value',
+        gridIndex: 1,
+        splitLine: { lineStyle: { color: '#eef2f7' } },
+        axisLabel: { color: '#6b7280', formatter: value => `¥${value}` }
+      }
+    ],
+    graphic: [
+      { type: 'text', left: 4, top: 24, style: { text: '最近 7 日', fill: '#111827', fontSize: 13, fontWeight: 600 } },
+      { type: 'text', left: 4, top: 220, style: { text: '最近 6 月', fill: '#111827', fontSize: 13, fontWeight: 600 } }
+    ],
+    series: [
+      {
+        name: '日到账',
+        type: 'bar',
+        xAxisIndex: 0,
+        yAxisIndex: 0,
+        barWidth: 14,
+        itemStyle: { borderRadius: [6, 6, 0, 0] },
+        data: toYuanSeries(daily, 'received_amount')
+      },
+      {
+        name: '日净收益',
+        type: 'line',
+        xAxisIndex: 0,
+        yAxisIndex: 0,
+        smooth: true,
+        symbolSize: 7,
+        lineStyle: { width: 3 },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(16,185,129,0.22)' },
+            { offset: 1, color: 'rgba(16,185,129,0.02)' }
+          ])
+        },
+        data: toYuanSeries(daily, 'net_amount')
+      },
+      {
+        name: '月到账',
+        type: 'bar',
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        barWidth: 18,
+        itemStyle: { borderRadius: [7, 7, 0, 0] },
+        data: toYuanSeries(monthly, 'received_amount')
+      },
+      {
+        name: '月净收益',
+        type: 'line',
+        xAxisIndex: 1,
+        yAxisIndex: 1,
+        smooth: true,
+        symbolSize: 7,
+        lineStyle: { width: 3 },
+        data: toYuanSeries(monthly, 'net_amount')
+      }
+    ]
+  }, true)
+}
+
+const handleDashboardResize = () => {
+  salesChart?.resize()
+  customerChart?.resize()
+  revenueChart?.resize()
+}
+
 onMounted(() => {
   // 获取统计数据和列表数据
   fetchStatistics()
   fetchRecentLists()
+  fetchRevenueStats()
   
   initSalesChart()
   initCustomerChart()
   
   // 窗口大小变化时重新调整图表大小
-  window.addEventListener('resize', () => {
-    salesChart?.resize()
-    customerChart?.resize()
-  })
+  window.addEventListener('resize', handleDashboardResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleDashboardResize)
+  salesChart?.dispose()
+  customerChart?.dispose()
+  revenueChart?.dispose()
+  salesChart = null
+  customerChart = null
+  revenueChart = null
 })
 
 // 初始化销售趋势图表
@@ -924,6 +1398,220 @@ watch(salesRange, (newVal) => {
   transition: width 0.8s ease;
 }
 
+.revenue-row {
+  margin-bottom: 24px;
+}
+
+.revenue-card,
+.revenue-side-card {
+  height: 100%;
+  border: 1px solid #e5e7eb;
+  overflow: hidden;
+}
+
+.revenue-card :deep(.el-card__body),
+.revenue-side-card :deep(.el-card__body) {
+  padding: 0;
+}
+
+.revenue-header,
+.side-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 22px 24px 18px;
+  border-bottom: 1px solid #eef2f7;
+  background: #fbfcff;
+}
+
+.revenue-eyebrow {
+  font-size: 12px;
+  font-weight: 700;
+  color: #2563eb;
+  text-transform: uppercase;
+  margin-bottom: 6px;
+}
+
+.revenue-header h3,
+.side-header h3 {
+  margin: 0 0 6px;
+  font-size: 20px;
+  color: #111827;
+  font-weight: 700;
+}
+
+.revenue-header p,
+.side-header p {
+  margin: 0;
+  font-size: 13px;
+  color: #6b7280;
+  line-height: 1.5;
+}
+
+.revenue-kpis {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  padding: 18px 20px 8px;
+}
+
+.revenue-kpi {
+  min-height: 132px;
+  padding: 16px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #fff;
+  position: relative;
+  overflow: hidden;
+}
+
+.revenue-kpi::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: #2563eb;
+}
+
+.revenue-kpi.emerald::before { background: #10b981; }
+.revenue-kpi.blue::before { background: #2563eb; }
+.revenue-kpi.violet::before { background: #7c3aed; }
+.revenue-kpi.amber::before { background: #f59e0b; }
+
+.kpi-label {
+  color: #6b7280;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.kpi-value {
+  font-size: 24px;
+  color: #111827;
+  font-weight: 800;
+  line-height: 1.15;
+}
+
+.kpi-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+  color: #8a95a3;
+  font-size: 12px;
+}
+
+.kpi-change {
+  font-weight: 700;
+}
+
+.kpi-change.up { color: #059669; }
+.kpi-change.down { color: #dc2626; }
+.kpi-change.flat { color: #64748b; }
+
+.kpi-detail {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed #e5e7eb;
+  color: #6b7280;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.revenue-alert {
+  margin: 8px 20px 0;
+}
+
+.revenue-chart {
+  height: 420px;
+  padding: 12px 20px 22px;
+}
+
+.revenue-compare {
+  padding: 18px 20px 4px;
+}
+
+.compare-row {
+  padding: 14px 0;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.compare-row:last-child {
+  border-bottom: none;
+}
+
+.compare-main,
+.compare-sub {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.compare-label {
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.compare-value {
+  font-size: 17px;
+  color: #111827;
+  font-weight: 700;
+}
+
+.compare-sub {
+  margin-top: 6px;
+  color: #94a3b8;
+  font-size: 12px;
+}
+
+.compare-track {
+  height: 7px;
+  margin-top: 10px;
+  background: #eef2f7;
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.compare-bar {
+  height: 100%;
+  border-radius: 999px;
+  transition: width 0.3s ease;
+}
+
+.revenue-health {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  padding: 16px 20px 20px;
+  background: #fbfcff;
+  border-top: 1px solid #eef2f7;
+}
+
+.health-item {
+  padding: 14px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.health-value {
+  font-size: 18px;
+  color: #111827;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.health-label {
+  margin-top: 6px;
+  color: #6b7280;
+  font-size: 12px;
+}
+
 /* 图表样式 */
 .chart-row {
   margin-bottom: 24px;
@@ -1305,10 +1993,31 @@ watch(salesRange, (newVal) => {
   gap: 12px;
 }
 
+@media (max-width: 1200px) {
+  .revenue-kpis {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 @media (max-width: 768px) {
   .dashboard-container {
     padding: 12px;
   }
+
+  .revenue-header,
+  .side-header {
+    flex-direction: column;
+  }
+
+  .revenue-kpis,
+  .revenue-health {
+    grid-template-columns: 1fr;
+  }
+
+  .revenue-chart {
+    height: 360px;
+    padding: 8px 12px 18px;
+  }
   
   .chart-overview {
     flex-wrap: wrap;
@@ -1349,4 +2058,4 @@ watch(salesRange, (newVal) => {
     font-size: 13px;
   }
 }
-</style> 
\ No newline at end of file
+</style>
diff --git a/src/views/order/OrderList.vue b/src/views/order/OrderList.vue
index de73d90..063d8a9 100644
--- a/src/views/order/OrderList.vue
+++ b/src/views/order/OrderList.vue
@@ -453,6 +453,25 @@
             <el-form-item label="订单名称" prop="name">
               <el-input v-model="orderForm.name" placeholder="选择商品后自动生成，可手动修改" maxlength="200" show-word-limit />
             </el-form-item>
+            <el-form-item v-if="orderForm.type === 'create'" label="购买时长" prop="pay_num">
+              <el-select
+                v-model="orderForm.pay_num"
+                filterable
+                allow-create
+                default-first-option
+                placeholder="请选择购买月数"
+                style="width: 100%"
+                @change="handleDurationChange"
+              >
+                <el-option
+                  v-for="month in durationOptions"
+                  :key="month"
+                  :label="`${month} 个月`"
+                  :value="month"
+                />
+              </el-select>
+              <div v-if="maxPurchaseDuration" class="form-tip">产品首购上限：{{ maxPurchaseDuration }} 个月</div>
+            </el-form-item>
 
             <!-- 套餐固定参数（只读展示） -->
             <div v-if="planFixedArgs.length" class="args-section plan-fixed-args">
@@ -521,9 +540,39 @@
 
           <!-- Step 3: 价格与支付 -->
           <el-form v-show="currentStep === 2" ref="step3FormRef" :model="orderForm" :rules="step3Rules" label-width="110px">
+            <div v-if="isAutoPriceMode" class="price-quote-panel" v-loading="priceLoading">
+              <div class="price-quote-header">
+                <div class="price-quote-title">
+                  <span>实时价格</span>
+                  <el-tag v-if="isPriceManuallyAdjusted" type="warning" size="small">已手动调整</el-tag>
+                </div>
+                <el-button link type="primary" :loading="priceLoading" @click="fetchOrderPrice()">
+                  <el-icon><Refresh /></el-icon>重新计算
+                </el-button>
+              </div>
+              <div v-if="orderPriceQuote" class="price-quote-grid">
+                <div class="price-quote-item">
+                  <span class="price-quote-label">月基础价</span>
+                  <strong>¥{{ formatYuan(orderPriceQuote.base_price) }}</strong>
+                </div>
+                <div class="price-quote-item">
+                  <span class="price-quote-label">优惠前总价</span>
+                  <strong>¥{{ formatYuan(orderPriceQuote.all_price) }}</strong>
+                </div>
+                <div class="price-quote-item is-primary">
+                  <span class="price-quote-label">实际应付</span>
+                  <strong>¥{{ formatYuan(orderPriceQuote.price) }}</strong>
+                </div>
+                <div class="price-quote-item">
+                  <span class="price-quote-label">续费月价</span>
+                  <strong>¥{{ formatYuan(orderPriceQuote.renew_price) }}</strong>
+                </div>
+              </div>
+              <div v-else class="price-quote-empty">等待报价</div>
+            </div>
             <el-row :gutter="16">
               <el-col :span="12">
-                <el-form-item label="价格" prop="price">
+                <el-form-item label="本次价格" prop="price">
                   <div class="unit-input-row">
                     <el-input-number v-model="orderForm.price" :min="0" :precision="0" style="flex:1" />
                     <span class="unit-text">分</span>
@@ -531,7 +580,7 @@
                 </el-form-item>
               </el-col>
               <el-col :span="12">
-                <el-form-item label="续费价格">
+                <el-form-item label="续费月价">
                   <div class="unit-input-row">
                     <el-input-number v-model="orderForm.renew_price" :min="0" :precision="0" style="flex:1" />
                     <span class="unit-text">分</span>
@@ -540,12 +589,12 @@
               </el-col>
             </el-row>
             <el-row :gutter="16">
-              <el-col :span="12">
+              <el-col v-if="orderForm.type !== 'create'" :span="12">
                 <el-form-item label="购买数量" prop="pay_num">
                   <el-input-number v-model="orderForm.pay_num" :min="1" style="width: 100%" />
                 </el-form-item>
               </el-col>
-              <el-col :span="12">
+              <el-col :span="orderForm.type === 'create' ? 24 : 12">
                 <el-form-item label="过期时间">
                   <el-date-picker v-model="orderForm.expire_time" type="datetime" placeholder="请选择" format="YYYY-MM-DD HH:mm:ss" value-format="x" style="width: 100%" />
                 </el-form-item>
@@ -568,6 +617,16 @@
                 <el-option label="微信（旧）" value="wx" />
               </el-select>
             </el-form-item>
+            <el-form-item v-if="Number(orderForm.state) === 1" label="收益入账">
+              <div class="account-amount-field">
+                <el-switch
+                  v-model="orderForm.account_amount"
+                  active-text="计入 007pay"
+                  inactive-text="不计入"
+                />
+                <div class="form-tip">用于管理员手动创建或改为已支付的订单，后端会同步生成 007pay 手工入账记录。</div>
+              </div>
+            </el-form-item>
             <el-row :gutter="16">
               <el-col :span="12">
                 <el-form-item label="优惠码">
@@ -721,11 +780,11 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onActivated, watch } from 'vue'
+import { ref, reactive, computed, onMounted, onActivated, onUnmounted, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus, Delete, Search, Download, Refresh, User, ShoppingCart, Ticket, Money, Close, Setting, Loading, Lock, Document, ArrowRight, Goods, Box } from '@element-plus/icons-vue'
-import { getOrderList, getOrderDetail, createOrder, updateOrder, deleteOrder, retryOrderHook, refundOrder } from '@/api/admin/order'
+import { getOrderList, getOrderDetail, getOrderPrice, createOrder, updateOrder, deleteOrder, retryOrderHook, refundOrder } from '@/api/admin/order'
 import { getProductPlanList, getProductParameterList, getProductParameterDetail } from '@/api/admin/product'
 import UserListSelector from '@/components/admin/UserListSelector.vue'
 import ProductSelector from '@/components/admin/ProductSelector.vue'
@@ -765,6 +824,7 @@ const orderForm = reactive({
   state: 0,
   pay_type: 'default',
   payment_order_id: '',
+  account_amount: false,
   args: '',
   note: ''
 })
@@ -776,7 +836,8 @@ const step1Rules = {
 }
 const step2Rules = {
   commodity_id: [{ required: true, message: '请选择商品', trigger: 'change' }],
-  name: [{ required: true, message: '请输入订单名称', trigger: 'blur' }]
+  name: [{ required: true, message: '请输入订单名称', trigger: 'blur' }],
+  pay_num: [{ required: true, message: '请选择购买时长', trigger: 'change' }]
 }
 const step3Rules = {
   price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
@@ -789,6 +850,8 @@ const submitLoading = ref(false)
 const step1FormRef = ref(null)
 const step2FormRef = ref(null)
 const step3FormRef = ref(null)
+const priceLoading = ref(false)
+const orderPriceQuote = ref(null)
 
 // 套餐相关
 const planList = ref([])
@@ -827,6 +890,22 @@ const selectedProductInfo = ref(null)
 const selectedDiscountCodeInfo = ref(null)
 const selectedVoucherInfo = ref(null)
 
+const isAutoPriceMode = computed(() => dialogType.value === 'add' && orderForm.type === 'create')
+const maxPurchaseDuration = computed(() => Number(
+  selectedProductInfo.value?.maxFirstPurchaseDuration || selectedProductInfo.value?.max_first_purchase_duration || 0
+))
+const durationOptions = computed(() => {
+  const max = maxPurchaseDuration.value
+  if (max > 0 && max <= 60) return Array.from({ length: max }, (_, index) => index + 1)
+  const options = [1, 2, 3, 6, 12, 18, 24, 36]
+  return max > 0 ? options.filter(month => month <= max) : options
+})
+const isPriceManuallyAdjusted = computed(() => {
+  if (!orderPriceQuote.value) return false
+  return Number(orderForm.price) !== Number(orderPriceQuote.value.price)
+    || Number(orderForm.renew_price) !== Number(orderPriceQuote.value.renew_price)
+})
+
 // 退款表单
 const refundForm = reactive({
   order_id: undefined,
@@ -1028,6 +1107,7 @@ const handleCurrentChange = (page) => {
 
 // 新增订单
 const handleAdd = () => {
+  resetOrderPriceQuote()
   dialogType.value = 'add'
   currentStep.value = 0
   clearAllSelections()
@@ -1053,6 +1133,7 @@ const handleAdd = () => {
     state: 0,
     pay_type: 'default',
     payment_order_id: '',
+    account_amount: false,
     args: '',
     note: ''
   })
@@ -1077,6 +1158,7 @@ const handleView = async (rowOrId) => {
 
 // 编辑订单
 const handleEdit = (row) => {
+  resetOrderPriceQuote()
   dialogType.value = 'edit'
   currentStep.value = 0
   clearAllSelections()
@@ -1110,6 +1192,7 @@ const handleEdit = (row) => {
     state: row.state,
     pay_type: row.payType || 'default',
     payment_order_id: row.paymentOrderId || '',
+    account_amount: false,
     args: row.args || '',
     note: row.note || ''
   })
@@ -1307,11 +1390,21 @@ const handleBatchDelete = () => {
 
 // 订单类型变更
 const handleTypeChange = (type) => {
+  resetOrderPriceQuote()
   if (type === 'create') {
     orderForm.table = 'good'
   }
 }
 
+const handleDurationChange = (value) => {
+  let duration = Math.max(1, Math.floor(Number(value) || 1))
+  if (maxPurchaseDuration.value && duration > maxPurchaseDuration.value) {
+    duration = maxPurchaseDuration.value
+    ElMessage.warning(`该产品首购最多可选择 ${maxPurchaseDuration.value} 个月`)
+  }
+  orderForm.pay_num = duration
+}
+
 // 分步导航
 const handleNextStep = async () => {
   if (currentStep.value === 0) {
@@ -1324,6 +1417,10 @@ const handleNextStep = async () => {
     if (!formEl) return
     const valid = await formEl.validate().catch(() => false)
     if (!valid) return
+    if (isAutoPriceMode.value) {
+      const priced = await fetchOrderPrice()
+      if (!priced) return
+    }
   }
   currentStep.value++
 }
@@ -1431,6 +1528,62 @@ const buildArgsJson = () => {
   return args.length > 0 ? JSON.stringify(args) : ''
 }
 
+const getCurrentArgsJson = () => {
+  return productParams.value.length || planFixedArgs.value.length
+    ? buildArgsJson()
+    : orderForm.args || ''
+}
+
+let priceRequestId = 0
+const resetOrderPriceQuote = () => {
+  priceRequestId++
+  priceLoading.value = false
+  orderPriceQuote.value = null
+}
+
+const fetchOrderPrice = async () => {
+  if (!isAutoPriceMode.value || !orderForm.user_id || !orderForm.commodity_id) return false
+
+  const requestId = ++priceRequestId
+  priceLoading.value = true
+  orderPriceQuote.value = null
+  try {
+    const data = {
+      user_id: Number(orderForm.user_id),
+      commodity_id: Number(orderForm.commodity_id),
+      purchase_duration: Number(orderForm.pay_num),
+      plan_id: Number(orderForm.plan_id) || 0,
+      args: getCurrentArgsJson(),
+      user_coupon_id: Number(orderForm.user_coupon_id) || 0,
+      discount_code_id: Number(orderForm.discount_code_id) || 0
+    }
+    const res = await getOrderPrice(data)
+    if (requestId !== priceRequestId) return false
+    if (res.data.code !== 200) {
+      ElMessage.error(res.data.message || '订单价格计算失败')
+      return false
+    }
+
+    const quote = res.data.data || {}
+    orderPriceQuote.value = {
+      base_price: Number(quote.base_price) || 0,
+      all_price: Number(quote.all_price) || 0,
+      price: Number(quote.price) || 0,
+      renew_price: Number(quote.renew_price) || 0
+    }
+    orderForm.price = orderPriceQuote.value.price
+    orderForm.renew_price = orderPriceQuote.value.renew_price
+    return true
+  } catch (error) {
+    if (requestId === priceRequestId) {
+      ElMessage.error(error.response?.data?.message || '订单价格计算失败')
+    }
+    return false
+  } finally {
+    if (requestId === priceRequestId) priceLoading.value = false
+  }
+}
+
 const findMatchedAttr = (param, numValue) => {
   if (!param.attrs || !param.attrs.length) return null
   const sorted = [...param.attrs].sort((a, b) => (a.phase || 0) - (b.phase || 0))
@@ -1445,6 +1598,7 @@ const findMatchedAttr = (param, numValue) => {
 
 // 套餐选择变更
 const handlePlanChange = (planId) => {
+  resetOrderPriceQuote()
   Object.keys(argValues).forEach(k => delete argValues[k])
 
   if (!planId) {
@@ -1489,7 +1643,7 @@ const submitForm = async () => {
       expireTimeStr = new Date(Number(orderForm.expire_time)).toISOString()
     }
 
-    const argsStr = productParams.value.length ? buildArgsJson() : orderForm.args || ''
+    const argsStr = getCurrentArgsJson()
 
     const submitData = {
       name: orderForm.name,
@@ -1511,6 +1665,9 @@ const submitForm = async () => {
     if (orderForm.discount_code_id) submitData.discount_code_id = Number(orderForm.discount_code_id)
     if (orderForm.user_coupon_id) submitData.user_coupon_id = Number(orderForm.user_coupon_id)
     if (orderForm.payment_order_id) submitData.payment_order_id = orderForm.payment_order_id
+    if (Number(orderForm.state) === 1 && orderForm.account_amount) {
+      submitData.account_amount = true
+    }
 
     if (dialogType.value === 'edit') {
       submitData.order_id = Number(orderForm.order_id)
@@ -1541,11 +1698,13 @@ const submitForm = async () => {
 const handleUserSelect = (user) => {
   orderForm.user_id = user.user_id
   selectedUserInfo.value = user
+  resetOrderPriceQuote()
 }
 
 const clearUser = () => {
   orderForm.user_id = undefined
   selectedUserInfo.value = null
+  resetOrderPriceQuote()
 }
 
 // 商品选择处理
@@ -1554,6 +1713,8 @@ const handleProductSelect = (product) => {
   selectedProductInfo.value = product
   if (orderForm.type !== 'create' && product.table) orderForm.table = product.table
   orderForm.plan_id = null
+  orderForm.pay_num = 1
+  resetOrderPriceQuote()
   planFixedArgs.value = []
   // 自动生成订单名称：商品名-时间戳
   const ts = new Date().toLocaleString('zh-CN', { hour12: false }).replace(/\//g, '').replace(/\s/g, '-').replace(/:/g, '')
@@ -1572,6 +1733,7 @@ const clearProduct = () => {
   planFixedArgs.value = []
   productParams.value = []
   allProductParams.value = []
+  resetOrderPriceQuote()
   Object.keys(argValues).forEach(k => delete argValues[k])
 }
 
@@ -1579,22 +1741,26 @@ const clearProduct = () => {
 const handleDiscountCodeSelect = (code) => {
   orderForm.discount_code_id = code.id
   selectedDiscountCodeInfo.value = code
+  if (currentStep.value === 2 && isAutoPriceMode.value) fetchOrderPrice()
 }
 
 const clearDiscountCode = () => {
   orderForm.discount_code_id = 0
   selectedDiscountCodeInfo.value = null
+  if (currentStep.value === 2 && isAutoPriceMode.value) fetchOrderPrice()
 }
 
 // 代金券选择处理
 const handleVoucherSelect = (voucher) => {
   orderForm.user_coupon_id = voucher.id
   selectedVoucherInfo.value = voucher
+  if (currentStep.value === 2 && isAutoPriceMode.value) fetchOrderPrice()
 }
 
 const clearVoucher = () => {
   orderForm.user_coupon_id = 0
   selectedVoucherInfo.value = null
+  if (currentStep.value === 2 && isAutoPriceMode.value) fetchOrderPrice()
 }
 
 // 清除所有选择信息
@@ -1627,6 +1793,21 @@ onActivated(() => { checkAndOpenOrderId() })
 watch(() => route.query.order_id, (newId) => {
   if (newId) checkAndOpenOrderId()
 })
+
+watch(() => orderForm.state, (state) => {
+  if (Number(state) !== 1) {
+    orderForm.account_amount = false
+  }
+})
+
+let durationPriceTimer = null
+watch(() => orderForm.pay_num, (value, oldValue) => {
+  if (value === oldValue || currentStep.value !== 2 || !isAutoPriceMode.value) return
+  clearTimeout(durationPriceTimer)
+  durationPriceTimer = setTimeout(() => fetchOrderPrice(), 300)
+})
+
+onUnmounted(() => clearTimeout(durationPriceTimer))
 </script>
 
 <style scoped>
@@ -1732,6 +1913,89 @@ watch(() => route.query.order_id, (newId) => {
   line-height: 1.4;
 }
 
+.account-amount-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.price-quote-panel {
+  margin-bottom: 18px;
+  padding: 14px 16px;
+  border: 1px solid #d9e2ec;
+  border-left: 3px solid #409eff;
+  background: #f8fafc;
+}
+
+.price-quote-header,
+.price-quote-title {
+  display: flex;
+  align-items: center;
+}
+
+.price-quote-header {
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.price-quote-title {
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.price-quote-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.price-quote-item {
+  min-width: 0;
+  padding-right: 12px;
+  border-right: 1px solid #e4e7ed;
+}
+
+.price-quote-item:last-child {
+  padding-right: 0;
+  border-right: 0;
+}
+
+.price-quote-item strong {
+  display: block;
+  margin-top: 4px;
+  color: #303133;
+  font-size: 16px;
+}
+
+.price-quote-item.is-primary strong {
+  color: #d93f0b;
+}
+
+.price-quote-label,
+.price-quote-empty {
+  color: #909399;
+  font-size: 12px;
+}
+
+.price-quote-empty {
+  min-height: 35px;
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 760px) {
+  .price-quote-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .price-quote-item:nth-child(2) {
+    padding-right: 0;
+    border-right: 0;
+  }
+}
+
 .args-section {
   margin-top: 16px;
   padding: 16px;
diff --git a/src/views/order/Pay007Orders.vue b/src/views/order/Pay007Orders.vue
new file mode 100644
index 0000000..b56d894
--- /dev/null
+++ b/src/views/order/Pay007Orders.vue
@@ -0,0 +1,479 @@
+<template>
+  <div class="pay007-orders-page">
+    <div class="page-toolbar">
+      <div class="title-block">
+        <div class="title-icon">
+          <el-icon><Money /></el-icon>
+        </div>
+        <div>
+          <h2>007pay 订单</h2>
+          <p>查看 007pay 平台订单、到账金额、手续费与手工入账记录</p>
+        </div>
+      </div>
+      <div class="toolbar-actions">
+        <el-button :loading="loading" @click="fetchOrders">
+          <el-icon><Refresh /></el-icon>刷新
+        </el-button>
+      </div>
+    </div>
+
+    <div class="summary-grid">
+      <div v-for="item in summaryCards" :key="item.label" class="summary-item" :class="item.accent">
+        <div class="summary-label">{{ item.label }}</div>
+        <div class="summary-value">{{ item.value }}</div>
+        <div class="summary-sub">{{ item.sub }}</div>
+      </div>
+    </div>
+
+    <div class="table-panel">
+      <div class="filter-section">
+        <el-form :inline="true" :model="queryParams" class="filter-form">
+          <el-form-item label="订单号">
+            <el-input
+              v-model.trim="queryParams.order_no"
+              placeholder="平台订单号/商户订单号"
+              clearable
+              style="width: 240px"
+              @keyup.enter="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="queryParams.status" placeholder="全部状态" clearable style="width: 140px">
+              <el-option label="待支付" :value="0" />
+              <el-option label="已支付" :value="1" />
+              <el-option label="已关闭" :value="2" />
+              <el-option label="已退款" :value="3" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleQuery">
+              <el-icon><Search /></el-icon>搜索
+            </el-button>
+            <el-button @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <el-table
+        v-loading="loading"
+        :data="orderList"
+        row-key="trade_no"
+        style="width: 100%"
+        :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
+      >
+        <el-table-column label="平台订单号" min-width="190" show-overflow-tooltip>
+          <template #default="{ row }">
+            <span class="mono">{{ row.trade_no || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="商户订单号" min-width="190" show-overflow-tooltip>
+          <template #default="{ row }">
+            <el-link
+              v-if="row.out_trade_no"
+              type="primary"
+              :underline="false"
+              class="mono"
+              @click.stop="goToLocalOrder(row.out_trade_no)"
+            >
+              {{ row.out_trade_no }}
+            </el-link>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="subject" label="订单标题" min-width="180" show-overflow-tooltip />
+        <el-table-column label="状态" width="110">
+          <template #default="{ row }">
+            <el-tag :type="getStatusType(row.status)" effect="plain">
+              {{ getStatusText(row.status) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="金额" width="120" align="right">
+          <template #default="{ row }">
+            <span class="amount-text">{{ formatCurrency(row.amount) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="手续费" width="120" align="right">
+          <template #default="{ row }">
+            <span>{{ formatCurrency(row.fee) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="净到账" width="120" align="right">
+          <template #default="{ row }">
+            <span class="net-text">{{ formatCurrency(getNetAmount(row)) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="客户端" width="100">
+          <template #default="{ row }">
+            <el-tag size="small" :type="row.client_type === 'mobile' ? 'success' : 'info'">
+              {{ getClientText(row.client_type) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="入账类型" width="110">
+          <template #default="{ row }">
+            <el-tag v-if="row.is_manual" size="small" type="warning" effect="dark">手工入账</el-tag>
+            <el-tag v-else size="small" effect="plain">在线支付</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="channel_id" label="通道ID" width="90" />
+        <el-table-column prop="channel_trade_no" label="通道订单号" min-width="170" show-overflow-tooltip />
+        <el-table-column label="创建时间" width="170">
+          <template #default="{ row }">
+            {{ formatDate(row.created_at) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="支付时间" width="170">
+          <template #default="{ row }">
+            {{ formatDate(row.paid_at) }}
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        v-model:current-page="queryParams.page"
+        v-model:page-size="queryParams.page_size"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        background
+        class="pagination"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Money, Refresh, Search } from '@element-plus/icons-vue'
+import { getPay007Orders } from '@/api/admin/pay007'
+
+const router = useRouter()
+const loading = ref(false)
+const orderList = ref([])
+const total = ref(0)
+
+const queryParams = reactive({
+  order_no: '',
+  status: '',
+  page: 1,
+  page_size: 20
+})
+
+const centToYuan = (value) => (Number(value) || 0) / 100
+const formatCurrency = (value) => `¥${centToYuan(value).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+const getNetAmount = (row) => (Number(row?.amount) || 0) - (Number(row?.fee) || 0)
+
+const pageStats = computed(() => {
+  return orderList.value.reduce((stats, row) => {
+    const amount = Number(row.amount) || 0
+    const fee = Number(row.fee) || 0
+    stats.amount += amount
+    stats.fee += fee
+    stats.net += amount - fee
+    if (Number(row.status) === 1) stats.paid += 1
+    if (row.is_manual) stats.manual += 1
+    return stats
+  }, { amount: 0, fee: 0, net: 0, paid: 0, manual: 0 })
+})
+
+const summaryCards = computed(() => [
+  {
+    label: '平台订单',
+    value: `${total.value} 单`,
+    sub: `当前页 ${orderList.value.length} 单`,
+    accent: 'blue'
+  },
+  {
+    label: '当前页到账',
+    value: formatCurrency(pageStats.value.amount),
+    sub: `已支付 ${pageStats.value.paid} 单`,
+    accent: 'green'
+  },
+  {
+    label: '当前页手续费',
+    value: formatCurrency(pageStats.value.fee),
+    sub: `净到账 ${formatCurrency(pageStats.value.net)}`,
+    accent: 'amber'
+  },
+  {
+    label: '手工入账',
+    value: `${pageStats.value.manual} 单`,
+    sub: '由后台手动记账产生',
+    accent: 'violet'
+  }
+])
+
+const getStatusText = (status) => {
+  const map = {
+    0: '待支付',
+    1: '已支付',
+    2: '已关闭',
+    3: '已退款'
+  }
+  return map[Number(status)] || '未知'
+}
+
+const getStatusType = (status) => {
+  const map = {
+    0: 'warning',
+    1: 'success',
+    2: 'info',
+    3: 'danger'
+  }
+  return map[Number(status)] || 'info'
+}
+
+const getClientText = (clientType) => {
+  const map = {
+    pc: 'PC',
+    mobile: '移动端'
+  }
+  return map[clientType] || clientType || '-'
+}
+
+const formatDate = (value) => {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+  return date.toLocaleString('zh-CN', { hour12: false })
+}
+
+const buildParams = () => {
+  const params = {
+    page: queryParams.page,
+    page_size: queryParams.page_size
+  }
+  if (queryParams.order_no) params.order_no = queryParams.order_no
+  if (queryParams.status !== '' && queryParams.status !== null && queryParams.status !== undefined) {
+    params.status = Number(queryParams.status)
+  }
+  return params
+}
+
+const fetchOrders = async () => {
+  loading.value = true
+  try {
+    const res = await getPay007Orders(buildParams())
+    if (res.data.code === 200) {
+      const data = res.data.data || {}
+      orderList.value = Array.isArray(data.list) ? data.list : []
+      total.value = Number(data.total) || 0
+    } else {
+      ElMessage.error(res.data.message || '获取 007pay 订单失败')
+    }
+  } catch (error) {
+    console.error('获取 007pay 订单失败:', error)
+    ElMessage.error(error.response?.data?.message || '获取 007pay 订单失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleQuery = () => {
+  queryParams.page = 1
+  fetchOrders()
+}
+
+const resetQuery = () => {
+  Object.assign(queryParams, {
+    order_no: '',
+    status: '',
+    page: 1,
+    page_size: 20
+  })
+  fetchOrders()
+}
+
+const handleSizeChange = (size) => {
+  queryParams.page_size = size
+  queryParams.page = 1
+  fetchOrders()
+}
+
+const handleCurrentChange = (page) => {
+  queryParams.page = page
+  fetchOrders()
+}
+
+const goToLocalOrder = (orderNo) => {
+  router.push({ path: '/order/list', query: { key: orderNo } })
+}
+
+onMounted(fetchOrders)
+</script>
+
+<style scoped>
+.pay007-orders-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.page-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  padding: 18px 20px;
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+}
+
+.title-block {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.title-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #ecf5ff;
+  color: #409eff;
+  font-size: 22px;
+  flex-shrink: 0;
+}
+
+.title-block h2 {
+  margin: 0;
+  color: #1f2d3d;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.title-block p {
+  margin: 4px 0 0;
+  color: #909399;
+  font-size: 13px;
+}
+
+.toolbar-actions {
+  display: flex;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.summary-item {
+  position: relative;
+  padding: 16px;
+  min-height: 112px;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.summary-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: #409eff;
+}
+
+.summary-item.green::before { background: #67c23a; }
+.summary-item.amber::before { background: #e6a23c; }
+.summary-item.violet::before { background: #8b5cf6; }
+
+.summary-label {
+  color: #909399;
+  font-size: 12px;
+  margin-bottom: 10px;
+}
+
+.summary-value {
+  color: #1f2d3d;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1.2;
+  word-break: break-all;
+}
+
+.summary-sub {
+  margin-top: 10px;
+  color: #909399;
+  font-size: 12px;
+}
+
+.table-panel {
+  padding: 16px;
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+}
+
+.filter-section {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.filter-form {
+  width: 100%;
+}
+
+.mono {
+  font-family: Consolas, Monaco, monospace;
+}
+
+.amount-text {
+  color: #409eff;
+  font-weight: 600;
+}
+
+.net-text {
+  color: #67c23a;
+  font-weight: 700;
+}
+
+.pagination {
+  margin-top: 18px;
+  justify-content: flex-end;
+}
+
+@media (max-width: 1200px) {
+  .summary-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .page-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .toolbar-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .table-panel {
+    padding: 12px;
+  }
+}
+</style>
diff --git a/src/views/product/UserGoodsDetail.vue b/src/views/product/UserGoodsDetail.vue
index e396ce8..d7638d4 100644
--- a/src/views/product/UserGoodsDetail.vue
+++ b/src/views/product/UserGoodsDetail.vue
@@ -258,6 +258,16 @@
         <el-form-item v-if="renewForm.complete_pay" label="扣除用户余额">
           <el-switch v-model="renewForm.deduct_balance" />
         </el-form-item>
+        <el-form-item v-if="renewForm.complete_pay" label="收益入账">
+          <div class="account-amount-field">
+            <el-switch
+              v-model="renewForm.account_amount"
+              active-text="计入 007pay"
+              inactive-text="不计入"
+            />
+            <div class="form-tip">仅记录 007pay 手工入账，不等同于扣除用户余额。</div>
+          </div>
+        </el-form-item>
       </el-form>
       <template #footer>
         <el-button @click="renewVisible = false">取消</el-button>
@@ -346,8 +356,10 @@ const formatExpireTime = (t) => {
 }
 
 const expireLabel = computed(() => formatExpireTime(detail.value?.expireTime || detail.value?.expire_time))
+const isPending = computed(() => String(detail.value?.status || detail.value?.Status || '').toLowerCase() === 'pending')
 
 const expireStatusText = computed(() => {
+  if (isPending.value) return '待开通'
   const t = detail.value?.expireTime || detail.value?.expire_time
   if (!t) return '未知'
   const d = dayjs(t)
@@ -359,6 +371,7 @@ const expireStatusText = computed(() => {
 })
 
 const expireStatusClass = computed(() => {
+  if (isPending.value) return 'status-pending'
   const t = detail.value?.expireTime || detail.value?.expire_time
   if (!t) return ''
   const d = dayjs(t)
@@ -452,14 +465,14 @@ const goToOrder = () => {
 // ---- 续费 ----
 const renewVisible = ref(false)
 const renewLoading = ref(false)
-const renewForm = reactive({ purchase_duration: 1, renew_price: 0, complete_pay: false, deduct_balance: false })
+const renewForm = reactive({ purchase_duration: 1, renew_price: 0, complete_pay: false, deduct_balance: false, account_amount: false })
 const renewTotalPrice = computed(() => {
   const price = renewForm.renew_price || (detail.value?.renewPrice || detail.value?.renew_price || 0) / 100
   return (price * renewForm.purchase_duration).toFixed(2)
 })
 const openRenew = () => {
   const rawRenew = detail.value?.renewPrice || detail.value?.renew_price || 0
-  Object.assign(renewForm, { purchase_duration: 1, renew_price: rawRenew / 100, complete_pay: false, deduct_balance: false })
+  Object.assign(renewForm, { purchase_duration: 1, renew_price: rawRenew / 100, complete_pay: false, deduct_balance: false, account_amount: false })
   renewVisible.value = true
 }
 const handleRenew = async () => {
@@ -469,6 +482,7 @@ const handleRenew = async () => {
     if (renewForm.renew_price) data.renew_price = Math.round(renewForm.renew_price * 100)
     if (renewForm.complete_pay) data.complete_pay = true
     if (renewForm.complete_pay && renewForm.deduct_balance) data.deduct_balance = true
+    if (renewForm.complete_pay && renewForm.account_amount) data.account_amount = true
     const res = await renewUserGoods(data)
     if (res?.data?.code === 200) {
       ElMessage.success('续费成功')
@@ -547,6 +561,13 @@ onActivated(() => {
 watch(goodsId, (newId, oldId) => {
   if (newId && newId !== oldId) { detail.value = null; loadDetail() }
 })
+
+watch(() => renewForm.complete_pay, (completePay) => {
+  if (!completePay) {
+    renewForm.deduct_balance = false
+    renewForm.account_amount = false
+  }
+})
 </script>
 
 <style scoped>
@@ -587,6 +608,7 @@ watch(goodsId, (newId, oldId) => {
 }
 .meta-chip.id-chip { font-family: 'SF Mono', 'Consolas', monospace; letter-spacing: 0.3px; }
 .meta-chip.status-ok { color: #52c41a; border-color: #b7eb8f; background: #f6ffed; }
+.meta-chip.status-pending { color: #606266; border-color: #dcdfe6; background: #f4f4f5; }
 .meta-chip.status-warning { color: #fa8c16; border-color: #ffd591; background: #fff7e6; }
 .meta-chip.status-expired { color: #f5222d; border-color: #ffa39e; background: #fff1f0; }
 .meta-chip.status-forever { color: #722ed1; border-color: #d3adf7; background: #f9f0ff; }
@@ -654,6 +676,8 @@ watch(goodsId, (newId, oldId) => {
 .selector-row { display: flex; align-items: center; width: 100%; }
 .unit-input-row { display: flex; align-items: center; gap: 6px; width: 100%; }
 .unit-text { font-size: 13px; color: #606266; flex-shrink: 0; white-space: nowrap; }
+.account-amount-field { display: flex; flex-direction: column; gap: 4px; }
+.form-tip { font-size: 12px; color: #909399; margin-top: 4px; line-height: 1.4; }
 
 :deep(.el-descriptions__label) { font-weight: 500; color: #606266; }
 </style>
diff --git a/src/views/product/UserGoodsList.vue b/src/views/product/UserGoodsList.vue
index 44cb504..56d1e23 100644
--- a/src/views/product/UserGoodsList.vue
+++ b/src/views/product/UserGoodsList.vue
@@ -140,8 +140,8 @@
               <el-tooltip v-if="isDeleted(row)" :content="`删除于 ${formatTime(row.deleteAt || row.DeleteAt || row.deleted_at)}`" placement="top">
                 <el-tag size="small" type="danger">已删除</el-tag>
               </el-tooltip>
+              <el-tag v-else-if="isPending(row)" size="small" type="info">待开通</el-tag>
               <el-tag v-else-if="isExpired(row)" size="small" type="warning">已到期</el-tag>
-              <el-tag v-else-if="row.status === 'pending'" size="small" type="info">待开通</el-tag>
               <el-tag v-else size="small" type="success">正常</el-tag>
             </template>
           </el-table-column>
@@ -559,6 +559,7 @@ const formatExpireTime = (t) => {
 
 // 判断用户商品是否已删除（后端返回 deleteAt 字段，有值即已删除）
 const isDeleted = (row) => !!(row?.deleteAt || row?.DeleteAt || row?.deleted_at)
+const isPending = (row) => String(row?.status || row?.Status || '').toLowerCase() === 'pending'
 
 // 判断用户商品是否已到期（永久商品除外）
 const isExpired = (row) => {
diff --git a/src/views/user/UserBalance.vue b/src/views/user/UserBalance.vue
index d72e3d0..964b5b9 100644
--- a/src/views/user/UserBalance.vue
+++ b/src/views/user/UserBalance.vue
@@ -92,11 +92,6 @@
               {{ formatDateTime(row.CreatedAt) }}
             </template>
           </el-table-column>
-          <el-table-column label="操作" width="100" fixed="right">
-            <template #default="{ row }">
-              <el-button type="warning" size="small" @click="handleRefund(row)">退款</el-button>
-            </template>
-          </el-table-column>
         </el-table>
         
         <div class="pagination-wrapper">
@@ -131,6 +126,16 @@
             <el-radio label="sub">减少</el-radio>
           </el-radio-group>
         </el-form-item>
+        <el-form-item v-if="balanceForm.state === 'add'" label="收益入账">
+          <div class="account-amount-field">
+            <el-switch
+              v-model="balanceForm.account_amount"
+              active-text="计入 007pay"
+              inactive-text="不计入"
+            />
+            <div class="form-tip">加款同时生成 007pay 手工入账记录，用于收益统计。</div>
+          </div>
+        </el-form-item>
         <el-form-item label="变动金额" prop="price">
           <el-input v-model.number="balanceForm.price" placeholder="请输入变动金额">
             <template #prepend>¥</template>
@@ -180,28 +185,6 @@
       </template>
     </el-dialog>
 
-    <!-- 退款对话框 -->
-    <el-dialog v-model="refundDialogVisible" title="退款" width="500px">
-      <el-form ref="refundFormRef" :model="refundForm" :rules="refundRules" label-width="120px">
-        <el-form-item label="余额记录ID">
-          <el-input :value="refundForm.history_id" disabled />
-        </el-form-item>
-        <el-form-item label="订单ID" prop="order_id">
-          <el-input v-model="refundForm.order_id" :min="0" style="width: 100%" placeholder="请输入订单ID" />
-        </el-form-item>
-        <el-form-item label="退款方式" prop="bandwidth">
-          <el-radio-group v-model="refundForm.bandwidth">
-            <el-radio :label="false">退回余额</el-radio>
-            <el-radio :label="true">提现</el-radio>
-          </el-radio-group>
-          <div class="form-tip">退回余额：将退款金额添加到对应余额；提现：将退款金额提现</div>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="refundDialogVisible = false">取消</el-button>
-        <el-button type="warning" @click="submitRefundForm" :loading="refundLoading">确认退款</el-button>
-      </template>
-    </el-dialog>
   </div>
 </template>
 
@@ -210,7 +193,7 @@ import { ref, reactive, onMounted, computed, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { Refresh, ArrowLeft } from '@element-plus/icons-vue'
-import { getUserBalanceRecord, editUserBalance, addUserConsumption, getUserBalanceCount, getUserList, refundBalance } from '@/api/admin/user'
+import { getUserBalanceRecord, editUserBalance, addUserConsumption, getUserBalanceCount, getUserList } from '@/api/admin/user'
 
 const route = useRoute()
 const router = useRouter()
@@ -246,11 +229,8 @@ const userList = ref([])
 // 对话框
 const balanceDialogVisible = ref(false)
 const recordDialogVisible = ref(false)
-const refundDialogVisible = ref(false)
 const balanceFormRef = ref(null)
 const recordFormRef = ref(null)
-const refundFormRef = ref(null)
-const refundLoading = ref(false)
 
 // 余额表单
 const balanceForm = reactive({
@@ -258,7 +238,8 @@ const balanceForm = reactive({
   balance_type: '',
   price: 0,
   state: 'add',
-  note: ''
+  note: '',
+  account_amount: false
 })
 
 const balanceRules = {
@@ -290,18 +271,6 @@ const recordRules = {
   note: [{ required: true, message: '请输入备注', trigger: 'blur' }]
 }
 
-// 退款表单
-const refundForm = reactive({
-  history_id: 0,
-  order_id: 0,
-  bandwidth: false
-})
-
-const refundRules = {
-  order_id: [{ required: true, message: '请输入订单ID', trigger: 'blur' }],
-  bandwidth: [{ required: true, message: '请选择退款方式', trigger: 'change' }]
-}
-
 // 当前余额显示
 const currentBalanceDisplay = computed(() => {
   const balance = balanceList.value.find(b => userBalance[b.type]?.type === balanceForm.balance_type)
@@ -445,7 +414,8 @@ const handleEditBalance = (balanceType) => {
     balance_type: apiType,
     price: 0,
     state: 'add',
-    note: ''
+    note: '',
+    account_amount: false
   })
   balanceDialogVisible.value = true
 }
@@ -471,7 +441,11 @@ const submitBalanceForm = () => {
   balanceFormRef.value?.validate(async (valid) => {
     if (valid) {
       try {
-        const res = await editUserBalance(balanceForm)
+        const submitData = { ...balanceForm }
+        if (submitData.state !== 'add' || !submitData.account_amount) {
+          delete submitData.account_amount
+        }
+        const res = await editUserBalance(submitData)
         if (res.data.code === 200) {
           ElMessage.success('修改成功')
           balanceDialogVisible.value = false
@@ -517,40 +491,6 @@ const handleRecordCurrentChange = () => {
   fetchBalanceRecord()
 }
 
-// 退款
-const handleRefund = (row) => {
-  Object.assign(refundForm, {
-    history_id: row.Id,
-    order_id: String(row.OrderId) || 0,
-    bandwidth: false
-  })
-  refundDialogVisible.value = true
-}
-
-// 提交退款
-const submitRefundForm = () => {
-  refundFormRef.value?.validate(async (valid) => {
-    if (valid) {
-      refundLoading.value = true
-      try {
-        const res = await refundBalance(refundForm)
-        if (res.data.code === 200) {
-          ElMessage.success('退款成功')
-          refundDialogVisible.value = false
-          fetchUserBalance()
-        } else {
-          ElMessage.error(res.data.message || '退款失败')
-        }
-      } catch (error) {
-        console.error('退款错误:', error)
-        ElMessage.error('退款失败')
-      } finally {
-        refundLoading.value = false
-      }
-    }
-  })
-}
-
 // 初始化
 onMounted(() => {
   getUserListData()
@@ -573,6 +513,15 @@ watch(
   },
   { immediate: true }
 )
+
+watch(
+  () => balanceForm.state,
+  (state) => {
+    if (state !== 'add') {
+      balanceForm.account_amount = false
+    }
+  }
+)
 </script>
 
 <style scoped>
@@ -802,6 +751,12 @@ watch(
   margin-top: 4px;
 }
 
+.account-amount-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
 /* 响应式 */
 @media (max-width: 1200px) {
   .balance-cards {
diff --git a/src/views/user/UserDetail.vue b/src/views/user/UserDetail.vue
index 2b9d17b..538ea67 100644
--- a/src/views/user/UserDetail.vue
+++ b/src/views/user/UserDetail.vue
@@ -299,6 +299,7 @@
                     <el-table-column label="状态" min-width="90">
                       <template #default="{row}">
                         <el-tag v-if="isGoodsDeleted(row)" size="small" type="danger">已删除</el-tag>
+                        <el-tag v-else-if="isGoodsPending(row)" size="small" type="info">待开通</el-tag>
                         <el-tag v-else-if="isGoodsExpired(row)" size="small" type="warning">已到期</el-tag>
                         <el-tag v-else size="small" type="success">正常</el-tag>
                       </template>
@@ -662,7 +663,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onActivated } from 'vue'
+import { ref, reactive, onMounted, onActivated, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { baseURL } from '@/utils/request'
@@ -740,6 +741,7 @@ const ticketListPageSize = ref(10)
 const userGoodsList = ref([])
 // 判断用户商品是否已删除（后端返回 deleteAt 字段，有值即已删除）
 const isGoodsDeleted = (row) => !!(row?.deleteAt || row?.DeleteAt || row?.deleted_at)
+const isGoodsPending = (row) => String(row?.status || row?.Status || '').toLowerCase() === 'pending'
 // 判断用户商品是否已到期（永久商品除外）
 const isGoodsExpired = (row) => {
   const t = row?.expireTime || row?.expire_time
@@ -1814,6 +1816,38 @@ const loadUserData = async () => {
   fetchActiveTabData();
 }
 
+const resetUserScopedData = () => {
+  userInfo.value = {}
+  currentAvatarUrl.value = ''
+  userBalanceList.value = []
+  Object.assign(userBalance, {
+    balance: 0,
+    frozen_balance: 0,
+    total_recharge: 0,
+    total_consume: 0
+  })
+
+  loginHistory.value = []
+  operationHistory.value = []
+  userOrderList.value = []
+  userTicketList.value = []
+  userGoodsList.value = []
+  userVoucherList.value = []
+
+  loginHistoryPage.value = 1
+  operationHistoryPage.value = 1
+  orderListPage.value = 1
+  ticketListPage.value = 1
+  goodsListPage.value = 1
+  voucherListPage.value = 1
+  loginHistoryTotal.value = 0
+  operationHistoryTotal.value = 0
+  orderListTotal.value = 0
+  ticketListTotal.value = 0
+  goodsListTotal.value = 0
+  voucherListTotal.value = 0
+}
+
 // 初始化
 onMounted(() => {
   if (route.query.user_id) {
@@ -1831,6 +1865,12 @@ onMounted(() => {
 onActivated(() => {
   loadUserData();
 })
+
+watch(() => route.query.user_id, (newUserId, oldUserId) => {
+  if (route.name !== 'UserDetail' || !newUserId || String(newUserId) === String(oldUserId || '')) return
+  resetUserScopedData()
+  loadUserData()
+})
 </script>
 
 <style scoped>
-- 
2.54.0


From 09918d03e33c78fa642f129213869f29df7e0022 Mon Sep 17 00:00:00 2001
From: shiran <admin@example.com>
Date: Tue, 21 Jul 2026 18:12:21 +0800
Subject: [PATCH 5/7] =?UTF-8?q?fix:=20=E6=96=B0=E8=B4=AD=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E8=AE=A1=E7=AE=97=E5=88=B0=E6=9C=9F=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/order/OrderList.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/views/order/OrderList.vue b/src/views/order/OrderList.vue
index 063d8a9..4f6dab3 100644
--- a/src/views/order/OrderList.vue
+++ b/src/views/order/OrderList.vue
@@ -1405,6 +1405,19 @@ const handleDurationChange = (value) => {
   orderForm.pay_num = duration
 }
 
+const calculateExpireTime = (months) => {
+  const duration = Math.max(1, Math.floor(Number(months) || 1))
+  const expireDate = new Date()
+  const originalDay = expireDate.getDate()
+
+  expireDate.setDate(1)
+  expireDate.setMonth(expireDate.getMonth() + duration)
+  const lastDay = new Date(expireDate.getFullYear(), expireDate.getMonth() + 1, 0).getDate()
+  expireDate.setDate(Math.min(originalDay, lastDay))
+
+  return expireDate.getTime()
+}
+
 // 分步导航
 const handleNextStep = async () => {
   if (currentStep.value === 0) {
@@ -1420,6 +1433,7 @@ const handleNextStep = async () => {
     if (isAutoPriceMode.value) {
       const priced = await fetchOrderPrice()
       if (!priced) return
+      orderForm.expire_time = calculateExpireTime(orderForm.pay_num)
     }
   }
   currentStep.value++
-- 
2.54.0


From 816771f1517f9d799c3b869ad5afd26e5cdaa4ca Mon Sep 17 00:00:00 2001
From: shiran <admin@example.com>
Date: Thu, 23 Jul 2026 22:45:30 +0800
Subject: [PATCH 6/7] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=AE=BF?=
 =?UTF-8?q?=E4=B8=BB=E6=9C=BA=E6=8C=87=E6=A0=87Top=E6=A6=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/admin/kvmService.js             |   5 +
 src/views/virtualization/HostDetail.vue | 275 +++++++++++++++++++++++-
 2 files changed, 278 insertions(+), 2 deletions(-)

diff --git a/src/api/admin/kvmService.js b/src/api/admin/kvmService.js
index a5d545f..f9b6dcf 100644
--- a/src/api/admin/kvmService.js
+++ b/src/api/admin/kvmService.js
@@ -145,6 +145,11 @@ export const getRemoteHostMetrics = (params) => {
   return http2.get('/api/v1/admin/server/host_service/point/host/metrics', { params })
 }
 
+/** 获取宿主机内虚拟机指标 Top 榜单 */
+export const getHostMetricsTop = (params) => {
+  return http2.get('/api/v1/admin/server/host_service/point/host/metrics/top', { params })
+}
+
 /** 查询历史指标（宿主机或虚拟机） */
 export const getMetricsHistory = (params) => {
   return http2.get('/api/v1/admin/server/host_service/point/host/metrics_history', { params })
diff --git a/src/views/virtualization/HostDetail.vue b/src/views/virtualization/HostDetail.vue
index 6a79170..ee65818 100644
--- a/src/views/virtualization/HostDetail.vue
+++ b/src/views/virtualization/HostDetail.vue
@@ -449,6 +449,86 @@
 
         <el-tab-pane label="监控" name="monitor">
           <div class="section-block">
+            <div class="metric-top-section" v-loading="metricTopLoading">
+              <div class="metric-top-header">
+                <div class="metric-top-heading">
+                  <div class="metric-top-title-row">
+                    <h3 class="section-title metric-top-title"><el-icon><DataAnalysis /></el-icon> 虚拟机指标 Top 榜单</h3>
+                    <el-tag size="small" :type="metricTopMode === 'realtime' ? 'success' : 'warning'" effect="plain">
+                      {{ metricTopMode === 'realtime' ? '实时缓存' : '历史快照' }}
+                    </el-tag>
+                  </div>
+                  <p class="metric-top-description">按指标降序展示当前宿主机中有成功采集样本的虚拟机</p>
+                </div>
+                <div class="metric-top-controls">
+                  <el-select v-model="metricTopMetric" size="small" class="metric-select" @change="loadMetricTop">
+                    <el-option-group v-for="group in metricTopOptionGroups" :key="group.label" :label="group.label">
+                      <el-option v-for="option in group.options" :key="option.value" :label="option.label" :value="option.value" />
+                    </el-option-group>
+                  </el-select>
+                  <el-radio-group v-model="metricTopMode" size="small" @change="handleMetricTopModeChange">
+                    <el-radio-button label="realtime">实时</el-radio-button>
+                    <el-radio-button label="historical">历史</el-radio-button>
+                  </el-radio-group>
+                  <el-date-picker
+                    v-if="metricTopMode === 'historical'"
+                    v-model="metricTopAt"
+                    type="datetime"
+                    size="small"
+                    placeholder="选择榜单时间"
+                    :disabled-date="disableFutureMetricTopDate"
+                    class="metric-time-picker"
+                    @change="loadMetricTop"
+                  />
+                  <el-select v-model="metricTopLimit" size="small" class="metric-limit-select" @change="loadMetricTop">
+                    <el-option v-for="limit in metricTopLimitOptions" :key="limit" :label="`Top ${limit}`" :value="limit" />
+                  </el-select>
+                  <el-tooltip content="刷新榜单" placement="top">
+                    <el-button size="small" :icon="Refresh" circle @click="loadMetricTop" :loading="metricTopLoading" />
+                  </el-tooltip>
+                </div>
+              </div>
+
+              <div v-if="metricTopData" class="metric-top-meta">
+                <span><strong>{{ currentMetricTopOption.label }}</strong></span>
+                <span>{{ metricTopItems.length }} 台虚拟机</span>
+                <span>{{ metricTopMode === 'realtime' ? '最新实时样本' : `查询时间 ${formatMetricTopSampleTime(metricTopData.requested_at || metricTopAt)}` }}</span>
+                <span v-if="metricTopLatestSample">最近采样 {{ formatMetricTopSampleTime(metricTopLatestSample) }}</span>
+              </div>
+
+              <div v-if="metricTopItems.length" class="metric-top-list" :style="{ '--metric-color': currentMetricTopOption.color }">
+                <div class="metric-top-list-head">
+                  <span>排名</span>
+                  <span>虚拟机</span>
+                  <span>指标分布</span>
+                  <span>当前值</span>
+                  <span>采样时间</span>
+                </div>
+                <div v-for="item in metricTopItems" :key="`${item.vm_id}-${item.sample_time}`" class="metric-top-item">
+                  <div class="metric-rank" :class="`rank-${item.rank}`">{{ item.rank }}</div>
+                  <div class="metric-vm-cell">
+                    <el-link type="primary" :underline="false" class="metric-vm-name" @click="goToVmDetail(item)">
+                      {{ item.vm_name || `虚拟机 #${item.vm_id}` }}
+                    </el-link>
+                    <div class="metric-vm-ids">
+                      <el-link type="primary" :underline="false" @click="goToVmDetail(item)">VM #{{ item.vm_id }}</el-link>
+                      <span v-if="item.host_vm_id">宿主机 VM #{{ item.host_vm_id }}</span>
+                    </div>
+                  </div>
+                  <div class="metric-bar-cell">
+                    <div class="metric-bar-track">
+                      <span class="metric-bar-fill" :style="{ width: `${getMetricTopBarPercent(item.value)}%` }"></span>
+                    </div>
+                  </div>
+                  <div class="metric-value">{{ formatMetricTopValue(item) }}</div>
+                  <time class="metric-sample-time">{{ formatMetricTopSampleTime(item.sample_time) }}</time>
+                </div>
+              </div>
+              <el-empty v-else-if="!metricTopLoading" description="当前指标暂无可用虚拟机样本" :image-size="64" />
+            </div>
+
+            <div class="monitor-section-divider"></div>
+
             <div class="section-header">
               <h3 class="section-title">监控指标</h3>
               <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap">
@@ -940,12 +1020,12 @@
 import { ref, reactive, computed, onMounted, onActivated, onDeactivated, onBeforeUnmount, watch, nextTick, provide } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { ArrowLeft, ArrowRight, Refresh, Edit, Delete, Monitor, Coin, Connection, Search, Plus, Key, CopyDocument } from '@element-plus/icons-vue'
+import { ArrowLeft, ArrowRight, Refresh, Edit, Delete, Monitor, Coin, Connection, Search, Plus, Key, CopyDocument, DataAnalysis } from '@element-plus/icons-vue'
 import {
   getRemoteHostDetail, getRemoteHostMetrics, updateRemoteHost, deleteRemoteHost,
   getUserNetworkingList, getUserNetworkingDetail, createUserNetworking, deleteUserNetworking,
   assignUserNetworking, removeUserNetworkingNetwork,
-  createHostToken, getMetricsHistory, getHostQuotaStats,
+  createHostToken, getMetricsHistory, getHostMetricsTop, getHostQuotaStats,
   getHostKsmStatus, configureHostKsm
 } from '@/api/admin/kvmService'
 import { extractApiError } from '@/utils/kvmErrorUtil'
@@ -997,6 +1077,7 @@ watch(activeTab, (tab) => {
     if (!historicalMetricsData.value) {
       loadHistoricalMetrics()
     }
+    if (!metricTopData.value) loadMetricTop()
   }
   if (tab === 'networking') loadNetworkingList()
   if (tab === 'quotaStats' && !quotaStats.value) loadQuotaStats()
@@ -1430,6 +1511,118 @@ const monitorTimeMode = ref('relative')
 const monitorRelativeMinutes = ref(10)
 const monitorDateRange = ref(null)
 
+const metricTopOptionGroups = [
+  {
+    label: '资源使用率',
+    options: [
+      { label: 'CPU 使用率', value: 'cpu_usage_percent', color: '#409eff' },
+      { label: '内存使用率', value: 'memory_used_percent', color: '#67c23a' }
+    ]
+  },
+  {
+    label: '网络速率',
+    options: [
+      { label: '网络接收速率', value: 'net_rx_bytes_per_sec', color: '#00a6a6' },
+      { label: '网络发送速率', value: 'net_tx_bytes_per_sec', color: '#e6a23c' },
+      { label: 'OVS 接收速率', value: 'ovs_rx_bytes_per_sec', color: '#7c6ee6' },
+      { label: 'OVS 发送速率', value: 'ovs_tx_bytes_per_sec', color: '#d05a8a' }
+    ]
+  },
+  {
+    label: '磁盘吞吐',
+    options: [
+      { label: '磁盘读取速率', value: 'disk_read_bytes_per_sec', color: '#3f8f62' },
+      { label: '磁盘写入速率', value: 'disk_write_bytes_per_sec', color: '#c27b32' }
+    ]
+  }
+]
+const metricTopOptions = metricTopOptionGroups.flatMap(group => group.options)
+const metricTopLimitOptions = [5, 10, 20, 50]
+const metricTopLoading = ref(false)
+const metricTopData = ref(null)
+const metricTopMetric = ref('cpu_usage_percent')
+const metricTopMode = ref('realtime')
+const metricTopAt = ref(new Date())
+const metricTopLimit = ref(10)
+
+const currentMetricTopOption = computed(() => (
+  metricTopOptions.find(option => option.value === metricTopMetric.value) || metricTopOptions[0]
+))
+const metricTopItems = computed(() => (
+  Array.isArray(metricTopData.value?.items) ? metricTopData.value.items : []
+))
+const metricTopLatestSample = computed(() => {
+  const timestamps = metricTopItems.value
+    .map(item => new Date(item.sample_time).getTime())
+    .filter(timestamp => Number.isFinite(timestamp))
+  return timestamps.length ? new Date(Math.max(...timestamps)) : null
+})
+
+const getMetricTopBarPercent = (value) => {
+  const maxValue = Math.max(...metricTopItems.value.map(item => Number(item.value) || 0), 0)
+  if (!maxValue) return 0
+  return Math.max(2, Math.min(100, ((Number(value) || 0) / maxValue) * 100))
+}
+
+const formatMetricTopValue = (item) => {
+  const value = Number(item?.value) || 0
+  if (item?.unit === '%' || metricTopMetric.value.endsWith('_percent')) return `${value.toFixed(2)}%`
+  return formatSpeedAuto(value)
+}
+
+const formatMetricTopSampleTime = (value) => {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return String(value)
+  return date.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })
+}
+
+const disableFutureMetricTopDate = (date) => date.getTime() > Date.now()
+
+const handleMetricTopModeChange = () => {
+  if (metricTopMode.value === 'historical' && !metricTopAt.value) metricTopAt.value = new Date()
+  loadMetricTop()
+}
+
+const loadMetricTop = async () => {
+  if (!serviceId.value || !hostId.value) return
+  if (metricTopMode.value === 'historical' && !metricTopAt.value) {
+    metricTopData.value = null
+    return
+  }
+  metricTopLoading.value = true
+  try {
+    const params = {
+      service_id: serviceId.value,
+      host_id: hostId.value,
+      metric: metricTopMetric.value,
+      limit: metricTopLimit.value
+    }
+    if (metricTopMode.value === 'historical') params.at = new Date(metricTopAt.value).toISOString()
+    const res = await getHostMetricsTop(params)
+    const body = res?.data
+    if (body?.code === 200 && body?.data) {
+      metricTopData.value = body.data.data ?? body.data
+    } else {
+      metricTopData.value = null
+      ElMessage.error(extractApiError(body, '加载虚拟机指标榜单失败'))
+    }
+  } catch (e) {
+    metricTopData.value = null
+    ElMessage.error(extractApiError(e?.response?.data, '加载虚拟机指标榜单失败'))
+  } finally {
+    metricTopLoading.value = false
+  }
+}
+
+const goToVmDetail = (item) => {
+  if (!item?.vm_id) return
+  router.push({
+    path: '/virtualization/vm-detail',
+    query: { service_id: serviceId.value, service_name: serviceName.value, vm_id: item.vm_id }
+  })
+}
+
 const getMonitorTimeRange = () => {
   if (monitorTimeMode.value === 'relative') {
     const endTime = new Date()
@@ -1939,6 +2132,7 @@ const initPage = () => {
   showPassword.value = false
   showPrivateKey.value = false
   historicalMetricsData.value = null
+  metricTopData.value = null
   disposeCharts()
   loadDetail()
   loadHostMetrics()
@@ -2007,6 +2201,48 @@ onBeforeUnmount(() => { isPageActive = false; disposeCharts() })
 .metrics-title .el-icon { font-size: 16px; color: #409eff; }
 .chart-container { width: 100%; height: 220px; }
 
+/* 虚拟机指标 Top 榜单 */
+.metric-top-section { min-height: 180px; border: 1px solid #e5e9f0; border-radius: 8px; overflow: hidden; background: #fff; }
+.metric-top-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 18px 20px; background: #f8fafc; border-bottom: 1px solid #e8edf3; }
+.metric-top-heading { min-width: 220px; }
+.metric-top-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.metric-top-title { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 0; }
+.metric-top-title .el-icon { color: #409eff; font-size: 17px; }
+.metric-top-description { margin: 6px 0 0; color: #86909c; font-size: 12px; line-height: 1.5; }
+.metric-top-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
+.metric-select { width: 176px; }
+.metric-time-picker { width: 190px !important; }
+.metric-limit-select { width: 92px; }
+.metric-top-meta { min-height: 38px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; padding: 8px 20px; color: #86909c; font-size: 12px; background: #fcfdff; border-bottom: 1px solid #eef1f5; }
+.metric-top-meta span { position: relative; }
+.metric-top-meta span + span::before { content: ''; position: absolute; left: -12px; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #c0c4cc; transform: translateY(-50%); }
+.metric-top-meta strong { color: #303133; font-weight: 600; }
+.metric-top-list { width: 100%; }
+.metric-top-list-head,
+.metric-top-item { display: grid; grid-template-columns: 52px minmax(190px, 1.1fr) minmax(180px, 1.5fr) 126px 164px; align-items: center; column-gap: 16px; }
+.metric-top-list-head { min-height: 38px; padding: 0 20px; color: #909399; font-size: 12px; background: #fafbfc; border-bottom: 1px solid #eef1f5; }
+.metric-top-list-head span:nth-child(4),
+.metric-top-list-head span:nth-child(5) { text-align: right; }
+.metric-top-item { min-height: 70px; padding: 10px 20px; border-bottom: 1px solid #f0f2f5; transition: background-color .2s; }
+.metric-top-item:last-child { border-bottom: none; }
+.metric-top-item:hover { background: #f8fbff; }
+.metric-rank { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #f0f2f5; color: #606266; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.metric-rank.rank-1 { background: #fff3d6; color: #ad6b00; }
+.metric-rank.rank-2 { background: #eef1f5; color: #596577; }
+.metric-rank.rank-3 { background: #f7ede4; color: #9a5b2f; }
+.metric-vm-cell { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
+.metric-vm-name { max-width: 100%; justify-content: flex-start; font-size: 13px; font-weight: 600; }
+.metric-vm-name :deep(.el-link__inner) { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.metric-vm-ids { display: flex; align-items: center; gap: 10px; min-width: 0; color: #a1a7b3; font-size: 11px; }
+.metric-vm-ids .el-link { font-size: 11px; }
+.metric-vm-ids span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.metric-bar-cell { min-width: 0; }
+.metric-bar-track { width: 100%; height: 8px; overflow: hidden; border-radius: 4px; background: #edf1f5; }
+.metric-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--metric-color, #409eff); transition: width .35s ease; }
+.metric-value { color: #1d2129; font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.metric-sample-time { color: #86909c; font-size: 11px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.monitor-section-divider { height: 1px; margin: 28px 0; background: #e8edf3; }
+
 .metric-summary-row { display: flex; gap: 16px; margin-bottom: 16px; }
 .metric-summary-card { flex: 1; min-width: 0; background: #f7f8fa; border-radius: 6px; padding: 14px 16px; border: 1px solid #e8e8e8; display: flex; flex-direction: column; }
 .metric-summary-label { font-size: 12px; color: #86909c; margin-bottom: 8px; }
@@ -2129,4 +2365,39 @@ onBeforeUnmount(() => { isPageActive = false; disposeCharts() })
 .nic-addr.v6 { background: #fdf6ec; border-color: #faecd8; color: #e6a23c; font-size: 11px; }
 .nic-mac { font-size: 12px; color: #606266; }
 
+@media (max-width: 1100px) {
+  .metric-top-header { flex-direction: column; }
+  .metric-top-controls { width: 100%; justify-content: flex-start; }
+  .metric-top-list-head,
+  .metric-top-item { grid-template-columns: 44px minmax(170px, 1.1fr) minmax(140px, 1fr) 108px 150px; column-gap: 12px; }
+}
+
+@media (max-width: 820px) {
+  .metric-top-list-head { display: none; }
+  .metric-top-item {
+    grid-template-columns: 36px minmax(0, 1fr) auto;
+    grid-template-areas:
+      'rank vm value'
+      'rank bar bar'
+      'rank sample sample';
+    row-gap: 8px;
+  }
+  .metric-rank { grid-area: rank; }
+  .metric-vm-cell { grid-area: vm; }
+  .metric-bar-cell { grid-area: bar; }
+  .metric-value { grid-area: value; }
+  .metric-sample-time { grid-area: sample; text-align: left; }
+}
+
+@media (max-width: 620px) {
+  .metric-top-header,
+  .metric-top-meta,
+  .metric-top-item { padding-left: 14px; padding-right: 14px; }
+  .metric-select,
+  .metric-time-picker { width: 100% !important; }
+  .metric-limit-select { flex: 1; }
+  .metric-top-meta { gap: 6px 14px; }
+  .metric-top-meta span + span::before { display: none; }
+}
+
 </style>
-- 
2.54.0


From c9e8f2ae15d40475077eb438c63da30fae0758cd Mon Sep 17 00:00:00 2001
From: shiran <admin@example.com>
Date: Fri, 24 Jul 2026 21:51:58 +0800
Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=E7=BB=9F=E4=B8=80=E6=8C=87=E6=A0=87?=
 =?UTF-8?q?=E6=A6=9C=E5=8D=95=E6=95=B0=E5=80=BC=E7=B2=BE=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/virtualization/HostDetail.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/virtualization/HostDetail.vue b/src/views/virtualization/HostDetail.vue
index ee65818..a6ec006 100644
--- a/src/views/virtualization/HostDetail.vue
+++ b/src/views/virtualization/HostDetail.vue
@@ -1567,7 +1567,14 @@ const getMetricTopBarPercent = (value) => {
 const formatMetricTopValue = (item) => {
   const value = Number(item?.value) || 0
   if (item?.unit === '%' || metricTopMetric.value.endsWith('_percent')) return `${value.toFixed(2)}%`
-  return formatSpeedAuto(value)
+  const units = [
+    { threshold: 1073741824, divisor: 1073741824, label: 'GB/s' },
+    { threshold: 1048576, divisor: 1048576, label: 'MB/s' },
+    { threshold: 1024, divisor: 1024, label: 'KB/s' }
+  ]
+  const unit = units.find(option => Math.abs(value) >= option.threshold)
+  if (unit) return `${(value / unit.divisor).toFixed(2)} ${unit.label}`
+  return `${value.toFixed(2)} B/s`
 }
 
 const formatMetricTopSampleTime = (value) => {
-- 
2.54.0