fetch(add): 账户管理

src/views/account-management/account/index.vue

@@ -134,7 +134,7 @@
   const loading = ref(false)
   const roleSubmitLoading = ref(false)
   const currentAccountId = ref<number>(0)
-  const selectedRole = ref<number | null>(null)
+  const selectedRole = ref<number | undefined>(undefined)
   const allRoles = ref<PlatformRole[]>([])
 
   // 定义表单搜索初始值
@@ -258,23 +258,19 @@
   const { columnChecks, columns } = useCheckedColumns(() => [
     {
       prop: 'ID',
-      label: 'ID',
-      width: 80
+      label: 'ID'
     },
     {
       prop: 'username',
-      label: '账号名称',
-      minWidth: 120
+      label: '账号名称'
     },
     {
       prop: 'phone',
-      label: '手机号',
-      width: 130
+      label: '手机号'
     },
     {
       prop: 'user_type',
       label: '账号类型',
-      width: 120,
       formatter: (row: any) => {
         const typeMap: Record<number, string> = {
           1: '超级管理员',
@@ -288,7 +284,6 @@
     {
       prop: 'status',
       label: '状态',
-      width: 100,
       formatter: (row: any) => {
         return h(ElSwitch, {
           modelValue: row.status,
@@ -297,20 +292,18 @@
           activeText: getStatusText(CommonStatus.ENABLED),
           inactiveText: getStatusText(CommonStatus.DISABLED),
           inlinePrompt: true,
-          'onUpdate:modelValue': (val: number) => handleStatusChange(row, val)
+          'onUpdate:modelValue': (val: string | number | boolean) => handleStatusChange(row, val as number)
         })
       }
     },
     {
       prop: 'CreatedAt',
       label: '创建时间',
-      width: 180,
       formatter: (row: any) => formatDateTime(row.CreatedAt)
     },
     {
       prop: 'operation',
       label: '操作',
-      width: 180,
       fixed: 'right',
       formatter: (row: any) => {
         return h('div', { style: 'display: flex; gap: 8px;' }, [
@@ -363,7 +356,7 @@
   // 显示分配角色对话框
   const showRoleDialog = async (row: any) => {
     currentAccountId.value = row.ID
-    selectedRole.value = null
+    selectedRole.value = undefined
 
     // 先加载当前账号的角色，再打开对话框
     try {
@@ -371,7 +364,7 @@
       if (res.code === 0) {
         // 提取角色ID（只取第一个角色）
         const roles = res.data || []
-        selectedRole.value = roles.length > 0 ? roles[0].ID : null
+        selectedRole.value = roles.length > 0 ? roles[0].ID : undefined
         // 数据加载完成后再打开对话框
         roleDialogVisible.value = true
       }
@@ -382,7 +375,7 @@
 
   // 提交分配角色
   const handleAssignRoles = async () => {
-    if (selectedRole.value === null) {
+    if (selectedRole.value === undefined) {
       ElMessage.warning('请选择一个角色')
       return
     }
@@ -516,7 +509,7 @@
   }
 
   .role-radio-item {
-    margin-bottom: 16px;
     padding: 8px;
+    margin-bottom: 16px;
   }
 </style>

src/views/account-management/agent/index.vue

@@ -89,8 +89,13 @@
           </ElCol>
           <ElCol :span="12">
             <ElFormItem label="上级代理" prop="parentId">
-              <ElSelect v-model="form.parentId" placeholder="请选择上级代理" clearable style="width: 100%">
-                <ElOption label="无" :value="null" />
+              <ElSelect
+                v-model="form.parentId"
+                placeholder="请选择上级代理"
+                clearable
+                style="width: 100%"
+              >
+                <ElOption label="无" :value="undefined" />
                 <ElOption
                   v-for="agent in parentAgentOptions"
                   :key="agent.id"
@@ -160,7 +165,7 @@
           </ElTableColumn>
           <ElTableColumn label="创建时间" prop="createTime" />
           <ElTableColumn fixed="right" label="操作" width="150">
-            <template #default="scope">
+            <template #default>
               <el-button link>编辑</el-button>
               <el-button link>禁用</el-button>
             </template>
@@ -245,7 +250,7 @@
       address: '上海市浦东新区',
       accountCount: 5,
       simCardCount: 1000,
-      totalCommission: 158900.50,
+      totalCommission: 158900.5,
       status: 'active',
       createTime: '2026-01-01 10:00:00'
     },
@@ -262,7 +267,7 @@
       address: '江苏省南京市',
       accountCount: 3,
       simCardCount: 500,
-      totalCommission: 78500.00,
+      totalCommission: 78500.0,
       status: 'active',
       createTime: '2026-01-05 11:00:00'
     },
@@ -279,7 +284,7 @@
       address: '江苏省南京市玄武区',
       accountCount: 2,
       simCardCount: 200,
-      totalCommission: 32800.00,
+      totalCommission: 32800.0,
       status: 'active',
       createTime: '2026-01-10 12:00:00'
     }
@@ -344,7 +349,8 @@
     if (searchQuery.value) {
       data = data.filter(
         (item) =>
-          item.agentName.includes(searchQuery.value) || item.contactPerson.includes(searchQuery.value)
+          item.agentName.includes(searchQuery.value) ||
+          item.contactPerson.includes(searchQuery.value)
       )
     }
     if (levelFilter.value) {
@@ -359,7 +365,7 @@
   }
 
   const getLevelTagType = (level: number) => {
-    const typeMap: Record<number, string> = { 1: '', 2: 'success', 3: 'warning' }
+    const typeMap: Record<number, string> = { 1: 'primary', 2: 'success', 3: 'warning' }
     return typeMap[level] || 'info'
   }
 
@@ -444,11 +450,14 @@
   const viewAccountList = (row: Agent) => {
     accountDialogVisible.value = true
     // 实际应用中应该根据代理商ID加载账号列表
+    console.log(row)
   }
 
   const viewCommission = (row: Agent) => {
     commissionDialogVisible.value = true
     // 实际应用中应该根据代理商ID加载佣金配置
+    console.log(row)
+
   }
 
   const addSubAccount = () => {

src/views/account-management/customer-account/index.vue

@@ -1,276 +1,570 @@
 <template>
-  <div class="page-content">
-    <ElRow>
-      <ElCol :xs="24" :sm="12" :lg="6">
-        <ElInput v-model="searchQuery" placeholder="账号/姓名/手机号" clearable></ElInput>
-      </ElCol>
-      <div style="width: 12px"></div>
-      <ElCol :xs="24" :sm="12" :lg="6">
-        <ElSelect v-model="typeFilter" placeholder="客户类型" clearable style="width: 100%">
-          <ElOption label="代理商" value="agent" />
-          <ElOption label="企业客户" value="enterprise" />
-        </ElSelect>
-      </ElCol>
-      <div style="width: 12px"></div>
-      <ElCol :xs="24" :sm="12" :lg="6">
-        <ElSelect v-model="statusFilter" placeholder="账号状态" clearable style="width: 100%">
-          <ElOption label="正常" value="active" />
-          <ElOption label="禁用" value="disabled" />
-          <ElOption label="已锁定" value="locked" />
-        </ElSelect>
-      </ElCol>
-      <div style="width: 12px"></div>
-      <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
-        <ElButton v-ripple @click="handleSearch">搜索</ElButton>
-      </ElCol>
-    </ElRow>
+  <ArtTableFullScreen>
+    <div class="customer-account-page" id="table-full-screen">
+      <!-- 搜索栏 -->
+      <ArtSearchBar
+        v-model:filter="searchForm"
+        :items="searchFormItems"
+        :show-expand="false"
+        @reset="handleReset"
+        @search="handleSearch"
+      ></ArtSearchBar>
 
-    <ArtTable :data="filteredData" index>
-      <template #default>
-        <ElTableColumn label="账号" prop="username" min-width="120" />
-        <ElTableColumn label="真实姓名" prop="realName" />
-        <ElTableColumn label="客户类型" prop="customerType">
-          <template #default="scope">
-            <ElTag :type="scope.row.customerType === 'agent' ? '' : 'success'">
-              {{ scope.row.customerType === 'agent' ? '代理商' : '企业客户' }}
-            </ElTag>
+      <ElCard shadow="never" class="art-table-card">
+        <!-- 表格头部 -->
+        <ArtTableHeader
+          :columnList="columnOptions"
+          v-model:columns="columnChecks"
+          @refresh="handleRefresh"
+        >
+          <template #left>
+            <ElButton @click="showDialog('add')">新增代理商账号</ElButton>
           </template>
-        </ElTableColumn>
-        <ElTableColumn label="所属组织" prop="organizationName" show-overflow-tooltip />
-        <ElTableColumn label="手机号" prop="phone" />
-        <ElTableColumn label="邮箱" prop="email" show-overflow-tooltip />
-        <ElTableColumn label="登录次数" prop="loginCount" />
-        <ElTableColumn label="最后登录" prop="lastLoginTime" width="180" />
-        <ElTableColumn label="状态" prop="status">
-          <template #default="scope">
-            <ElTag :type="getStatusTagType(scope.row.status)">
-              {{ getStatusText(scope.row.status) }}
-            </ElTag>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="创建时间" prop="createTime" width="180" />
-        <ElTableColumn fixed="right" label="操作" width="280">
-          <template #default="scope">
-            <el-button link @click="viewDetail(scope.row)">详情</el-button>
-            <el-button link @click="unbindPhone(scope.row)">解绑手机</el-button>
-            <el-button link @click="resetPassword(scope.row)">重置密码</el-button>
-            <el-button
-              link
-              :type="scope.row.status === 'active' ? 'danger' : 'primary'"
-              @click="toggleStatus(scope.row)"
-            >
-              {{ scope.row.status === 'active' ? '禁用' : '启用' }}
-            </el-button>
-          </template>
-        </ElTableColumn>
-      </template>
-    </ArtTable>
+        </ArtTableHeader>
 
-    <!-- 操作记录对话框 -->
-    <ElDialog v-model="detailDialogVisible" title="账号详情" width="800px" align-center>
-      <ElDescriptions :column="2" border>
-        <ElDescriptionsItem label="账号">{{ currentAccount?.username }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="真实姓名">{{ currentAccount?.realName }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="客户类型">{{
-          currentAccount?.customerType === 'agent' ? '代理商' : '企业客户'
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="所属组织">{{
-          currentAccount?.organizationName
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="手机号">{{ currentAccount?.phone }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="邮箱">{{ currentAccount?.email }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="注册时间">{{ currentAccount?.createTime }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="最后登录">{{
-          currentAccount?.lastLoginTime
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="登录次数">{{ currentAccount?.loginCount }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="状态">
-          <ElTag :type="getStatusTagType(currentAccount?.status || 'active')">
-            {{ getStatusText(currentAccount?.status || 'active') }}
-          </ElTag>
-        </ElDescriptionsItem>
-      </ElDescriptions>
+        <!-- 表格 -->
+        <ArtTable
+          ref="tableRef"
+          row-key="id"
+          :loading="loading"
+          :data="accountList"
+          :currentPage="pagination.page"
+          :pageSize="pagination.pageSize"
+          :total="pagination.total"
+          :marginTop="10"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+          <template #default>
+            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+          </template>
+        </ArtTable>
 
-      <ElDivider>操作记录</ElDivider>
-      <ArtTable :data="operationRecords" index max-height="300">
-        <template #default>
-          <ElTableColumn label="操作类型" prop="operationType" />
-          <ElTableColumn label="操作描述" prop="description" />
-          <ElTableColumn label="操作人" prop="operator" />
-          <ElTableColumn label="操作时间" prop="operateTime" width="180" />
-        </template>
-      </ArtTable>
-    </ElDialog>
-  </div>
+        <!-- 新增/编辑对话框 -->
+        <ElDialog
+          v-model="dialogVisible"
+          :title="dialogType === 'add' ? '新增代理商账号' : '编辑账号'"
+          width="500px"
+        >
+          <ElForm ref="formRef" :model="form" :rules="rules" label-width="80px">
+            <ElFormItem label="用户名" prop="username">
+              <ElInput
+                v-model="form.username"
+                placeholder="请输入用户名"
+                :disabled="dialogType === 'edit'"
+              />
+            </ElFormItem>
+            <ElFormItem label="手机号" prop="phone">
+              <ElInput v-model="form.phone" placeholder="请输入手机号" />
+            </ElFormItem>
+            <ElFormItem v-if="dialogType === 'add'" label="密码" prop="password">
+              <ElInput
+                v-model="form.password"
+                type="password"
+                placeholder="请输入密码(6-20位)"
+                show-password
+              />
+            </ElFormItem>
+            <ElFormItem label="店铺" prop="shop_id">
+              <ElSelect
+                v-model="form.shop_id"
+                placeholder="请选择店铺"
+                filterable
+                remote
+                :remote-method="searchShops"
+                :loading="shopLoading"
+                clearable
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="shop in shopList"
+                  :key="shop.id"
+                  :label="shop.shop_name"
+                  :value="shop.id"
+                />
+              </ElSelect>
+            </ElFormItem>
+          </ElForm>
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton @click="dialogVisible = false">取消</ElButton>
+              <ElButton type="primary" @click="handleSubmit(formRef)" :loading="submitLoading">
+                提交
+              </ElButton>
+            </div>
+          </template>
+        </ElDialog>
+
+        <!-- 修改密码对话框 -->
+        <ElDialog v-model="passwordDialogVisible" title="修改密码" width="400px">
+          <ElForm ref="passwordFormRef" :model="passwordForm" :rules="passwordRules">
+            <ElFormItem label="新密码" prop="password">
+              <ElInput
+                v-model="passwordForm.password"
+                type="password"
+                placeholder="请输入新密码(6-20位)"
+                show-password
+              />
+            </ElFormItem>
+          </ElForm>
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton @click="passwordDialogVisible = false">取消</ElButton>
+              <ElButton
+                type="primary"
+                @click="handlePasswordSubmit(passwordFormRef)"
+                :loading="passwordSubmitLoading"
+              >
+                提交
+              </ElButton>
+            </div>
+          </template>
+        </ElDialog>
+      </ElCard>
+    </div>
+  </ArtTableFullScreen>
 </template>
 
 <script setup lang="ts">
-  import { ElMessage, ElMessageBox } from 'element-plus'
+  import { h } from 'vue'
+  import { CustomerAccountService, ShopService } from '@/api/modules'
+  import { ElMessage, ElTag, ElSwitch } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import type { CustomerAccountItem, ShopResponse } from '@/types/api'
+  import type { SearchFormItem } from '@/types'
+  import { useCheckedColumns } from '@/composables/useCheckedColumns'
+  import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
+  import { formatDateTime } from '@/utils/business/format'
 
   defineOptions({ name: 'CustomerAccount' })
 
-  interface CustomerAccount {
-    id: string
-    username: string
-    realName: string
-    customerType: 'agent' | 'enterprise'
-    organizationName: string
-    phone: string
-    email: string
-    loginCount: number
-    lastLoginTime: string
-    status: 'active' | 'disabled' | 'locked'
-    createTime: string
+  const dialogVisible = ref(false)
+  const passwordDialogVisible = ref(false)
+  const loading = ref(false)
+  const submitLoading = ref(false)
+  const passwordSubmitLoading = ref(false)
+  const shopLoading = ref(false)
+  const tableRef = ref()
+  const currentAccountId = ref<number>(0)
+  const shopList = ref<ShopResponse[]>([])
+
+  // 搜索表单初始值
+  const initialSearchState = {
+    username: '',
+    phone: '',
+    user_type: undefined as number | undefined,
+    status: undefined as number | undefined
   }
 
-  // Mock 数据
-  const mockData = ref<CustomerAccount[]>([
+  // 搜索表单
+  const searchForm = reactive({ ...initialSearchState })
+
+  // 用户类型选项
+  const userTypeOptions = [
+    { label: '个人账号', value: 2 },
+    { label: '代理账号', value: 3 },
+    { label: '企业账号', value: 4 }
+  ]
+
+  // 状态选项
+  const statusOptions = [
+    { label: '启用', value: 1 },
+    { label: '禁用', value: 0 }
+  ]
+
+  // 搜索表单配置
+  const searchFormItems = computed<SearchFormItem[]>(() => [
     {
-      id: '1',
-      username: 'agent001',
-      realName: '张三',
-      customerType: 'agent',
-      organizationName: '华东区总代理',
-      phone: '13800138001',
-      email: 'zhangsan@example.com',
-      loginCount: 328,
-      lastLoginTime: '2026-01-09 08:30:00',
-      status: 'active',
-      createTime: '2026-01-01 10:00:00'
+      label: '用户名',
+      prop: 'username',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入用户名'
+      }
     },
     {
-      id: '2',
-      username: 'enterprise001',
-      realName: '李四',
-      customerType: 'enterprise',
-      organizationName: '某某科技有限公司',
-      phone: '13800138002',
-      email: 'lisi@example.com',
-      loginCount: 156,
-      lastLoginTime: '2026-01-08 18:45:00',
-      status: 'active',
-      createTime: '2026-01-03 11:00:00'
+      label: '手机号',
+      prop: 'phone',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入手机号'
+      }
     },
     {
-      id: '3',
-      username: 'agent002',
-      realName: '王五',
-      customerType: 'agent',
-      organizationName: '江苏省代理',
-      phone: '13800138003',
-      email: 'wangwu@example.com',
-      loginCount: 89,
-      lastLoginTime: '2026-01-07 14:20:00',
-      status: 'disabled',
-      createTime: '2026-01-05 12:00:00'
+      label: '用户类型',
+      prop: 'user_type',
+      type: 'select',
+      options: userTypeOptions,
+      config: {
+        clearable: true,
+        placeholder: '请选择用户类型'
+      }
+    },
+    {
+      label: '状态',
+      prop: 'status',
+      type: 'select',
+      options: statusOptions,
+      config: {
+        clearable: true,
+        placeholder: '请选择状态'
+      }
     }
   ])
 
-  const operationRecords = ref([
-    {
-      operationType: '重置密码',
-      description: '管理员重置登录密码',
-      operator: 'admin',
-      operateTime: '2026-01-08 10:00:00'
-    },
-    {
-      operationType: '解绑手机',
-      description: '解绑原手机号并重新绑定',
-      operator: 'admin',
-      operateTime: '2026-01-06 15:30:00'
-    }
-  ])
-
-  const searchQuery = ref('')
-  const typeFilter = ref('')
-  const statusFilter = ref('')
-  const detailDialogVisible = ref(false)
-  const currentAccount = ref<CustomerAccount | null>(null)
-
-  const filteredData = computed(() => {
-    let data = mockData.value
-    if (searchQuery.value) {
-      const query = searchQuery.value.toLowerCase()
-      data = data.filter(
-        (item) =>
-          item.username.toLowerCase().includes(query) ||
-          item.realName.includes(query) ||
-          item.phone.includes(query)
-      )
-    }
-    if (typeFilter.value) {
-      data = data.filter((item) => item.customerType === typeFilter.value)
-    }
-    if (statusFilter.value) {
-      data = data.filter((item) => item.status === statusFilter.value)
-    }
-    return data
+  // 分页
+  const pagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
   })
 
-  const getStatusText = (status: string) => {
-    const statusMap: Record<string, string> = {
-      active: '正常',
-      disabled: '禁用',
-      locked: '已锁定'
+  // 列配置
+  const columnOptions = [
+    { label: 'ID', prop: 'id' },
+    { label: '用户名', prop: 'username' },
+    { label: '手机号', prop: 'phone' },
+    { label: '用户类型', prop: 'user_type_name' },
+    { label: '店铺名称', prop: 'shop_name' },
+    { label: '企业名称', prop: 'enterprise_name' },
+    { label: '状态', prop: 'status' },
+    { label: '创建时间', prop: 'created_at' },
+    { label: '操作', prop: 'operation' }
+  ]
+
+  const formRef = ref<FormInstance>()
+  const passwordFormRef = ref<FormInstance>()
+
+  const rules = reactive<FormRules>({
+    username: [
+      { required: true, message: '请输入用户名', trigger: 'blur' },
+      { min: 2, max: 50, message: '用户名长度为2-50个字符', trigger: 'blur' }
+    ],
+    phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+    password: [
+      { required: true, message: '请输入密码', trigger: 'blur' },
+      { min: 6, max: 20, message: '密码长度为6-20位', trigger: 'blur' }
+    ],
+    shop_id: [{ required: true, message: '请输入店铺ID', trigger: 'blur' }]
+  })
+
+  const passwordRules = reactive<FormRules>({
+    password: [
+      { required: true, message: '请输入新密码', trigger: 'blur' },
+      { min: 6, max: 20, message: '密码长度为6-20位', trigger: 'blur' }
+    ]
+  })
+
+  const dialogType = ref('add')
+
+  const form = reactive<any>({
+    id: 0,
+    username: '',
+    phone: '',
+    password: '',
+    shop_id: null
+  })
+
+  const passwordForm = reactive({
+    password: ''
+  })
+
+  const accountList = ref<CustomerAccountItem[]>([])
+
+  // 动态列配置
+  const { columnChecks, columns } = useCheckedColumns(() => [
+    {
+      prop: 'id',
+      label: 'ID',
+      width: 80
+    },
+    {
+      prop: 'username',
+      label: '用户名',
+      minWidth: 120
+    },
+    {
+      prop: 'phone',
+      label: '手机号',
+      width: 130
+    },
+    {
+      prop: 'user_type_name',
+      label: '用户类型',
+      width: 100,
+      formatter: (row: CustomerAccountItem) => {
+        return h(
+          ElTag,
+          { type: row.user_type === 3 ? 'primary' : 'success' },
+          () => row.user_type_name
+        )
+      }
+    },
+    {
+      prop: 'shop_name',
+      label: '店铺名称',
+      minWidth: 150,
+      showOverflowTooltip: true,
+      formatter: (row: CustomerAccountItem) => row.shop_name || '-'
+    },
+    {
+      prop: 'enterprise_name',
+      label: '企业名称',
+      minWidth: 150,
+      showOverflowTooltip: true,
+      formatter: (row: CustomerAccountItem) => row.enterprise_name || '-'
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 100,
+      formatter: (row: CustomerAccountItem) => {
+        return h(ElSwitch, {
+          modelValue: row.status,
+          activeValue: 1,
+          inactiveValue: 0,
+          activeText: '启用',
+          inactiveText: '禁用',
+          inlinePrompt: true,
+          'onUpdate:modelValue': (val: string | number | boolean) => handleStatusChange(row, val as number)
+        })
+      }
+    },
+    {
+      prop: 'created_at',
+      label: '创建时间',
+      width: 180,
+      formatter: (row: CustomerAccountItem) => formatDateTime(row.created_at)
+    },
+    {
+      prop: 'operation',
+      label: '操作',
+      width: 160,
+      fixed: 'right',
+      formatter: (row: CustomerAccountItem) => {
+        return h('div', { style: 'display: flex; gap: 8px;' }, [
+          h(ArtButtonTable, {
+            icon: '&#xe72b;',
+            onClick: () => showPasswordDialog(row)
+          }),
+          h(ArtButtonTable, {
+            type: 'edit',
+            onClick: () => showDialog('edit', row)
+          })
+        ])
+      }
+    }
+  ])
+
+  onMounted(() => {
+    getTableData()
+    loadShopList()
+  })
+
+  // 加载店铺列表(默认加载20条)
+  const loadShopList = async (shopName?: string) => {
+    shopLoading.value = true
+    try {
+      const params: any = {
+        page: 1,
+        pageSize: 20
+      }
+      if (shopName) {
+        params.shop_name = shopName
+      }
+      const res = await ShopService.getShops(params)
+      if (res.code === 0) {
+        shopList.value = res.data.items || []
+      }
+    } catch (error) {
+      console.error('获取店铺列表失败:', error)
+    } finally {
+      shopLoading.value = false
     }
-    return statusMap[status] || '未知'
   }
 
-  const getStatusTagType = (status: string) => {
-    const typeMap: Record<string, string> = {
-      active: 'success',
-      disabled: 'info',
-      locked: 'danger'
+  // 搜索店铺
+  const searchShops = (query: string) => {
+    if (query) {
+      loadShopList(query)
+    } else {
+      loadShopList()
     }
-    return typeMap[status] || 'info'
   }
 
+  // 获取客户账号列表
+  const getTableData = async () => {
+    loading.value = true
+    try {
+      const params = {
+        page: pagination.page,
+        page_size: pagination.pageSize,
+        username: searchForm.username || undefined,
+        phone: searchForm.phone || undefined,
+        user_type: searchForm.user_type,
+        status: searchForm.status
+      }
+      const res = await CustomerAccountService.getCustomerAccounts(params)
+      if (res.code === 0) {
+        accountList.value = res.data.items || []
+        pagination.total = res.data.total || 0
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 重置搜索
+  const handleReset = () => {
+    Object.assign(searchForm, { ...initialSearchState })
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 搜索
   const handleSearch = () => {
-    // 搜索逻辑已通过 computed 实现
+    pagination.page = 1
+    getTableData()
   }
 
-  const viewDetail = (row: CustomerAccount) => {
-    currentAccount.value = row
-    detailDialogVisible.value = true
+  // 刷新表格
+  const handleRefresh = () => {
+    getTableData()
   }
 
-  const unbindPhone = (row: CustomerAccount) => {
-    ElMessageBox.confirm(`确定要解绑账号 ${row.username} 的手机号吗？`, '解绑确认', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }).then(() => {
-      ElMessage.success('手机号解绑成功')
+  // 处理表格分页变化
+  const handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    getTableData()
+  }
+
+  const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.page = newCurrentPage
+    getTableData()
+  }
+
+  // 显示新增/编辑对话框
+  const showDialog = (type: string, row?: CustomerAccountItem) => {
+    dialogType.value = type
+
+    if (type === 'edit' && row) {
+      form.id = row.id
+      form.username = row.username
+      form.phone = row.phone
+      form.shop_id = row.shop_id
+    } else {
+      form.id = 0
+      form.username = ''
+      form.phone = ''
+      form.password = ''
+      form.shop_id = null
+    }
+
+    // 重置表单验证状态
+    nextTick(() => {
+      formRef.value?.clearValidate()
+    })
+
+    dialogVisible.value = true
+  }
+
+  // 显示修改密码对话框
+  const showPasswordDialog = (row: CustomerAccountItem) => {
+    currentAccountId.value = row.id
+    passwordForm.password = ''
+
+    // 重置表单验证状态
+    nextTick(() => {
+      passwordFormRef.value?.clearValidate()
+    })
+
+    passwordDialogVisible.value = true
+  }
+
+  // 提交表单
+  const handleSubmit = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+
+    await formEl.validate(async (valid) => {
+      if (valid) {
+        submitLoading.value = true
+        try {
+          if (dialogType.value === 'add') {
+            const data = {
+              username: form.username,
+              phone: form.phone,
+              password: form.password,
+              shop_id: form.shop_id
+            }
+            await CustomerAccountService.createCustomerAccount(data)
+            ElMessage.success('新增成功')
+          } else {
+            const data: any = {}
+            if (form.username) data.username = form.username
+            if (form.phone) data.phone = form.phone
+            await CustomerAccountService.updateCustomerAccount(form.id, data)
+            ElMessage.success('修改成功')
+          }
+
+          dialogVisible.value = false
+          formEl.resetFields()
+          getTableData()
+        } catch (error) {
+          console.error(error)
+        } finally {
+          submitLoading.value = false
+        }
+      }
     })
   }
 
-  const resetPassword = (row: CustomerAccount) => {
-    ElMessageBox.confirm(`确定要重置账号 ${row.username} 的密码吗？新密码将发送至其手机。`, '重置密码', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }).then(() => {
-      ElMessage.success('密码重置成功，新密码已发送至手机')
+  // 提交修改密码
+  const handlePasswordSubmit = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+
+    await formEl.validate(async (valid) => {
+      if (valid) {
+        passwordSubmitLoading.value = true
+        try {
+          await CustomerAccountService.updateCustomerAccountPassword(currentAccountId.value, {
+            password: passwordForm.password
+          })
+          ElMessage.success('密码修改成功')
+          passwordDialogVisible.value = false
+          formEl.resetFields()
+        } catch (error) {
+          console.error(error)
+        } finally {
+          passwordSubmitLoading.value = false
+        }
+      }
     })
   }
 
-  const toggleStatus = (row: CustomerAccount) => {
-    const action = row.status === 'active' ? '禁用' : '启用'
-    ElMessageBox.confirm(`确定要${action}账号 ${row.username} 吗？`, `${action}确认`, {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }).then(() => {
-      row.status = row.status === 'active' ? 'disabled' : 'active'
-      ElMessage.success(`${action}成功`)
-    })
+  // 状态切换
+  const handleStatusChange = async (row: CustomerAccountItem, newStatus: number) => {
+    const oldStatus = row.status
+    // 先更新UI
+    row.status = newStatus
+    try {
+      await CustomerAccountService.updateCustomerAccountStatus(row.id, {
+        status: newStatus as 0 | 1
+      })
+      ElMessage.success('状态切换成功')
+    } catch (error) {
+      // 切换失败，恢复原状态
+      row.status = oldStatus
+      console.error(error)
+    }
   }
 </script>
 
 <style lang="scss" scoped>
-  .page-content {
-    :deep(.el-descriptions__label) {
-      font-weight: 500;
-    }
+  .customer-account-page {
+    // 可以在这里添加客户账号页面特定样式
   }
 </style>

src/views/account-management/customer-commission/index.vue

@@ -30,7 +30,9 @@
               ¥{{ statistics.totalWithdrawn.toFixed(2) }}
             </div>
           </div>
-          <el-icon class="stat-icon" style="color: var(--el-color-warning)"><WalletFilled /></el-icon>
+          <el-icon class="stat-icon" style="color: var(--el-color-warning)"
+            ><WalletFilled
+          /></el-icon>
         </ElCard>
       </ElCol>
       <ElCol :xs="24" :sm="12" :lg="6">
@@ -59,7 +61,12 @@
         </ElSelect>
       </ElCol>
       <ElCol :xs="24" :sm="12" :lg="6">
-        <ElSelect v-model="commissionRangeFilter" placeholder="佣金范围" clearable style="width: 100%">
+        <ElSelect
+          v-model="commissionRangeFilter"
+          placeholder="佣金范围"
+          clearable
+          style="width: 100%"
+        >
           <ElOption label="全部" value="" />
           <ElOption label="0-1000元" value="0-1000" />
           <ElOption label="1000-5000元" value="1000-5000" />
@@ -87,7 +94,7 @@
         <ElTableColumn label="联系电话" prop="phone" width="130" />
         <ElTableColumn label="累计佣金" prop="totalCommission" width="130" sortable>
           <template #default="scope">
-            <span style="color: var(--el-color-success); font-weight: 600">
+            <span style="font-weight: 600; color: var(--el-color-success)">
               ¥{{ scope.row.totalCommission.toFixed(2) }}
             </span>
           </template>
@@ -101,7 +108,7 @@
         </ElTableColumn>
         <ElTableColumn label="待提现" prop="pendingAmount" width="130" sortable>
           <template #default="scope">
-            <span style="color: var(--el-color-danger); font-weight: 600">
+            <span style="font-weight: 600; color: var(--el-color-danger)">
               ¥{{ scope.row.pendingAmount.toFixed(2) }}
             </span>
           </template>
@@ -116,8 +123,12 @@
         <ElTableColumn label="注册时间" prop="registerTime" width="180" />
         <ElTableColumn fixed="right" label="操作" width="220">
           <template #default="scope">
-            <el-button link :icon="View" @click="viewCommissionDetail(scope.row)">佣金详情</el-button>
-            <el-button link :icon="List" @click="viewWithdrawalHistory(scope.row)">提现记录</el-button>
+            <el-button link :icon="View" @click="viewCommissionDetail(scope.row)"
+              >佣金详情</el-button
+            >
+            <el-button link :icon="List" @click="viewWithdrawalHistory(scope.row)"
+              >提现记录</el-button
+            >
           </template>
         </ElTableColumn>
       </template>
@@ -133,7 +144,7 @@
           </ElTag>
         </ElDescriptionsItem>
         <ElDescriptionsItem label="累计佣金">
-          <span style="color: var(--el-color-success); font-weight: 600">
+          <span style="font-weight: 600; color: var(--el-color-success)">
             ¥{{ currentCustomer.totalCommission.toFixed(2) }}
           </span>
         </ElDescriptionsItem>
@@ -143,11 +154,13 @@
           </span>
         </ElDescriptionsItem>
         <ElDescriptionsItem label="待提现">
-          <span style="color: var(--el-color-danger); font-weight: 600">
+          <span style="font-weight: 600; color: var(--el-color-danger)">
             ¥{{ currentCustomer.pendingAmount.toFixed(2) }}
           </span>
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="提现次数">{{ currentCustomer.withdrawalCount }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="提现次数">{{
+          currentCustomer.withdrawalCount
+        }}</ElDescriptionsItem>
       </ElDescriptions>
 
       <ElDivider content-position="left">佣金明细</ElDivider>
@@ -157,7 +170,9 @@
           <ElTableColumn label="订单号" prop="orderNo" width="180" />
           <ElTableColumn label="佣金金额" prop="amount" width="120">
             <template #default="scope">
-              <span style="color: var(--el-color-success)">+¥{{ scope.row.amount.toFixed(2) }}</span>
+              <span style="color: var(--el-color-success)"
+                >+¥{{ scope.row.amount.toFixed(2) }}</span
+              >
             </template>
           </ElTableColumn>
           <ElTableColumn label="佣金比例" prop="rate" width="100" />
@@ -184,7 +199,7 @@
           <ElTableColumn label="提现单号" prop="withdrawalNo" width="180" />
           <ElTableColumn label="提现金额" prop="amount" width="120">
             <template #default="scope">
-              <span style="color: var(--el-color-danger); font-weight: 600">
+              <span style="font-weight: 600; color: var(--el-color-danger)">
                 ¥{{ scope.row.amount.toFixed(2) }}
               </span>
             </template>
@@ -253,9 +268,9 @@
 
   const statistics = reactive({
     totalCustomers: 156,
-    totalCommission: 580000.00,
-    totalWithdrawn: 420000.00,
-    pendingWithdrawal: 160000.00
+    totalCommission: 580000.0,
+    totalWithdrawn: 420000.0,
+    pendingWithdrawal: 160000.0
   })
 
   const mockData = ref<CustomerCommission[]>([
@@ -264,9 +279,9 @@
       customerName: '华东区总代理',
       customerType: 'agent',
       phone: '13800138000',
-      totalCommission: 85000.00,
-      withdrawnAmount: 70000.00,
-      pendingAmount: 15000.00,
+      totalCommission: 85000.0,
+      withdrawnAmount: 70000.0,
+      pendingAmount: 15000.0,
       withdrawalCount: 12,
       cardCount: 500,
       lastWithdrawalTime: '2026-01-08 10:00:00',
@@ -277,9 +292,9 @@
       customerName: '深圳市科技有限公司',
       customerType: 'enterprise',
       phone: '13900139000',
-      totalCommission: 45000.00,
-      withdrawnAmount: 30000.00,
-      pendingAmount: 15000.00,
+      totalCommission: 45000.0,
+      withdrawnAmount: 30000.0,
+      pendingAmount: 15000.0,
       withdrawalCount: 8,
       cardCount: 300,
       lastWithdrawalTime: '2026-01-05 14:30:00',
@@ -290,9 +305,9 @@
       customerName: '北京智能制造',
       customerType: 'enterprise',
       phone: '13700137000',
-      totalCommission: 68000.00,
-      withdrawnAmount: 55000.00,
-      pendingAmount: 13000.00,
+      totalCommission: 68000.0,
+      withdrawnAmount: 55000.0,
+      pendingAmount: 13000.0,
       withdrawalCount: 10,
       cardCount: 450,
       lastWithdrawalTime: '2026-01-07 16:00:00',
@@ -319,7 +334,7 @@
       id: '1',
       source: '套餐销售',
       orderNo: 'ORD202601090001',
-      amount: 150.00,
+      amount: 150.0,
       rate: '10%',
       orderAmount: '¥1,500.00',
       createTime: '2026-01-09 09:30:00',
@@ -329,7 +344,7 @@
       id: '2',
       source: '卡片激活',
       orderNo: 'ORD202601080025',
-      amount: 80.00,
+      amount: 80.0,
       rate: '8%',
       orderAmount: '¥1,000.00',
       createTime: '2026-01-08 15:20:00',
@@ -341,9 +356,9 @@
     {
       id: '1',
       withdrawalNo: 'WD202601080001',
-      amount: 10000.00,
-      fee: 20.00,
-      actualAmount: 9980.00,
+      amount: 10000.0,
+      fee: 20.0,
+      actualAmount: 9980.0,
       method: '银行卡',
       status: 'completed',
       applyTime: '2026-01-08 10:00:00',
@@ -352,9 +367,9 @@
     {
       id: '2',
       withdrawalNo: 'WD202601050002',
-      amount: 5000.00,
-      fee: 10.00,
-      actualAmount: 4990.00,
+      amount: 5000.0,
+      fee: 10.0,
+      actualAmount: 4990.0,
       method: '支付宝',
       status: 'completed',
       applyTime: '2026-01-05 14:00:00',
@@ -368,8 +383,7 @@
     if (searchQuery.value) {
       data = data.filter(
         (item) =>
-          item.customerName.includes(searchQuery.value) ||
-          item.phone.includes(searchQuery.value)
+          item.customerName.includes(searchQuery.value) || item.phone.includes(searchQuery.value)
       )
     }
 
@@ -381,8 +395,10 @@
       data = data.filter((item) => {
         const commission = item.totalCommission
         if (commissionRangeFilter.value === '0-1000') return commission >= 0 && commission < 1000
-        if (commissionRangeFilter.value === '1000-5000') return commission >= 1000 && commission < 5000
-        if (commissionRangeFilter.value === '5000-10000') return commission >= 5000 && commission < 10000
+        if (commissionRangeFilter.value === '1000-5000')
+          return commission >= 1000 && commission < 5000
+        if (commissionRangeFilter.value === '5000-10000')
+          return commission >= 5000 && commission < 10000
         if (commissionRangeFilter.value === '10000+') return commission >= 10000
         return true
       })
@@ -420,9 +436,9 @@
 
       .stat-content {
         .stat-label {
+          margin-bottom: 8px;
           font-size: 14px;
           color: var(--el-text-color-secondary);
-          margin-bottom: 8px;
         }
 
         .stat-value {

src/views/account-management/customer-role/index.vue

@@ -72,7 +72,12 @@
           </ElCheckboxGroup>
         </ElFormItem>
         <ElFormItem label="描述" prop="description">
-          <ElInput v-model="form.description" type="textarea" :rows="3" placeholder="请输入角色描述" />
+          <ElInput
+            v-model="form.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入角色描述"
+          />
         </ElFormItem>
         <ElFormItem label="状态">
           <ElSwitch v-model="form.status" active-value="active" inactive-value="inactive" />
@@ -128,7 +133,15 @@
       id: '3',
       roleName: '企业客户',
       roleCode: 'CUSTOMER_ENTERPRISE',
-      abilities: ['查看网卡', '操作网卡', '查看套餐', '购买套餐', '查看设备', '管理设备', '查看佣金'],
+      abilities: [
+        '查看网卡',
+        '操作网卡',
+        '查看套餐',
+        '购买套餐',
+        '查看设备',
+        '管理设备',
+        '查看佣金'
+      ],
       description: '企业客户角色，拥有完整业务权限',
       status: 'active',
       createTime: '2026-01-03 12:00:00'

src/views/account-management/platform-account/index.vue

@@ -333,23 +333,19 @@
   const { columnChecks, columns } = useCheckedColumns(() => [
     {
       prop: 'ID',
-      label: 'ID',
-      width: 80
+      label: 'ID'
     },
     {
       prop: 'username',
-      label: '账号名称',
-      minWidth: 120
+      label: '账号名称'
     },
     {
       prop: 'phone',
-      label: '手机号',
-      width: 130
+      label: '手机号'
     },
     {
       prop: 'user_type',
       label: '账号类型',
-      width: 120,
       formatter: (row: PlatformAccountResponse) => {
         const typeMap: Record<number, string> = {
           1: '超级管理员',
@@ -363,7 +359,6 @@
     {
       prop: 'status',
       label: '状态',
-      width: 100,
       formatter: (row: PlatformAccountResponse) => {
         return h(ElSwitch, {
           modelValue: row.status,
@@ -372,14 +367,13 @@
           activeText: getStatusText(CommonStatus.ENABLED),
           inactiveText: getStatusText(CommonStatus.DISABLED),
           inlinePrompt: true,
-          'onUpdate:modelValue': (val: number) => handleStatusChange(row, val)
+          'onUpdate:modelValue': (val: string | number | boolean) => handleStatusChange(row, val as number)
         })
       }
     },
     {
       prop: 'CreatedAt',
       label: '创建时间',
-      width: 180,
       formatter: (row: PlatformAccountResponse) => formatDateTime(row.CreatedAt)
     },
     {

src/views/account-management/shop-account/index.vue

@@ -46,43 +46,72 @@
           :title="dialogType === 'add' ? '新增代理账号' : '编辑代理账号'"
           width="500px"
         >
-          <ElForm ref="formRef" :model="formData" :rules="rules" label-width="120px">
+          <ElForm ref="formRef" :model="formData" :rules="rules" label-width="80px">
             <ElFormItem label="用户名" prop="username">
               <ElInput v-model="formData.username" placeholder="请输入用户名" />
             </ElFormItem>
             <ElFormItem v-if="dialogType === 'add'" label="密码" prop="password">
-              <ElInput v-model="formData.password" type="password" placeholder="请输入密码" show-password />
+              <ElInput
+                v-model="formData.password"
+                type="password"
+                placeholder="请输入密码"
+                show-password
+              />
             </ElFormItem>
             <ElFormItem label="手机号" prop="phone">
               <ElInput v-model="formData.phone" placeholder="请输入手机号" maxlength="11" />
             </ElFormItem>
-            <ElFormItem label="店铺ID" prop="shop_id">
-              <ElInputNumber v-model="formData.shop_id" :min="1" placeholder="请输入店铺ID" style="width: 100%" />
+            <ElFormItem label="店铺" prop="shop_id">
+              <ElSelect
+                v-model="formData.shop_id"
+                placeholder="请选择店铺"
+                filterable
+                remote
+                :remote-method="searchShops"
+                :loading="shopLoading"
+                clearable
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="shop in shopList"
+                  :key="shop.id"
+                  :label="shop.shop_name"
+                  :value="shop.id"
+                />
+              </ElSelect>
             </ElFormItem>
           </ElForm>
           <template #footer>
             <div class="dialog-footer">
               <ElButton @click="dialogVisible = false">取消</ElButton>
-              <ElButton type="primary" @click="handleSubmit" :loading="submitLoading">提交</ElButton>
+              <ElButton type="primary" @click="handleSubmit" :loading="submitLoading"
+                >提交</ElButton
+              >
             </div>
           </template>
         </ElDialog>
 
         <!-- 修改密码对话框 -->
-        <ElDialog
-          v-model="passwordDialogVisible"
-          title="重置密码"
-          width="400px"
-        >
+        <ElDialog v-model="passwordDialogVisible" title="重置密码" width="400px">
           <ElForm ref="passwordFormRef" :model="passwordForm" :rules="passwordRules">
             <ElFormItem label="新密码" prop="new_password">
-              <ElInput v-model="passwordForm.new_password" type="password" placeholder="请输入新密码" show-password />
+              <ElInput
+                v-model="passwordForm.new_password"
+                type="password"
+                placeholder="请输入新密码"
+                show-password
+              />
             </ElFormItem>
           </ElForm>
           <template #footer>
             <div class="dialog-footer">
               <ElButton @click="passwordDialogVisible = false">取消</ElButton>
-              <ElButton type="primary" @click="handleChangePassword" :loading="passwordSubmitLoading">提交</ElButton>
+              <ElButton
+                type="primary"
+                @click="handleChangePassword"
+                :loading="passwordSubmitLoading"
+                >提交</ElButton
+              >
             </div>
           </template>
         </ElDialog>
@@ -93,13 +122,13 @@
 
 <script setup lang="ts">
   import { h } from 'vue'
-  import { FormInstance, ElMessage, ElMessageBox, ElSwitch } from 'element-plus'
+  import { FormInstance, ElMessage, ElMessageBox, ElSwitch, ElSelect, ElOption } from 'element-plus'
   import type { FormRules } from 'element-plus'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
-  import { ShopAccountService } from '@/api/modules'
+  import { ShopAccountService, ShopService } from '@/api/modules'
   import type { SearchFormItem } from '@/types'
-  import type { ShopAccountResponse } from '@/types/api'
+  import type { ShopAccountResponse, ShopResponse } from '@/types/api'
   import { formatDateTime } from '@/utils/business/format'
   import { CommonStatus, getStatusText, STATUS_SELECT_OPTIONS } from '@/config/constants'
 
@@ -111,7 +140,10 @@
   const loading = ref(false)
   const submitLoading = ref(false)
   const passwordSubmitLoading = ref(false)
+  const shopLoading = ref(false)
   const currentAccountId = ref<number>(0)
+  const shopList = ref<ShopResponse[]>([])
+  const searchShopList = ref<ShopResponse[]>([])
 
   // 定义表单搜索初始值
   const initialSearchState = {
@@ -154,7 +186,7 @@
   }
 
   // 表单配置项
-  const searchFormItems: SearchFormItem[] = [
+  const searchFormItems = computed<SearchFormItem[]>(() => [
     {
       label: '用户名',
       prop: 'username',
@@ -174,12 +206,17 @@
       }
     },
     {
-      label: '店铺ID',
+      label: '店铺',
       prop: 'shop_id',
-      type: 'input',
+      type: 'select',
+      options: searchShopList.value.map((shop) => ({ label: shop.shop_name, value: shop.id })),
       config: {
         clearable: true,
-        placeholder: '请输入店铺ID'
+        filterable: true,
+        remote: true,
+        remoteMethod: handleSearchShop,
+        loading: shopLoading.value,
+        placeholder: '请选择或搜索店铺'
       }
     },
     {
@@ -192,14 +229,14 @@
         placeholder: '请选择状态'
       }
     }
-  ]
+  ])
 
   // 列配置
   const columnOptions = [
     { label: 'ID', prop: 'id' },
     { label: '用户名', prop: 'username' },
     { label: '手机号', prop: 'phone' },
-    { label: '店铺ID', prop: 'shop_id' },
+    { label: '店铺名称', prop: 'shop_name' },
     { label: '状态', prop: 'status' },
     { label: '创建时间', prop: 'created_at' },
     { label: '操作', prop: 'operation' }
@@ -207,14 +244,8 @@
 
   // 显示对话框
   const showDialog = (type: string, row?: ShopAccountResponse) => {
-    dialogVisible.value = true
     dialogType.value = type
 
-    // 重置表单验证状态
-    if (formRef.value) {
-      formRef.value.resetFields()
-    }
-
     if (type === 'edit' && row) {
       formData.id = row.id
       formData.username = row.username
@@ -228,16 +259,26 @@
       formData.shop_id = 0
       formData.password = ''
     }
+
+    // 重置表单验证状态
+    nextTick(() => {
+      formRef.value?.clearValidate()
+    })
+
+    dialogVisible.value = true
   }
 
   // 显示修改密码对话框
   const showPasswordDialog = (row: ShopAccountResponse) => {
     currentAccountId.value = row.id
     passwordForm.new_password = ''
+
+    // 重置表单验证状态
+    nextTick(() => {
+      passwordFormRef.value?.clearValidate()
+    })
+
     passwordDialogVisible.value = true
-    if (passwordFormRef.value) {
-      passwordFormRef.value.resetFields()
-    }
   }
 
   // 状态切换处理
@@ -260,27 +301,23 @@
     {
       prop: 'id',
       label: 'ID',
-      width: 80
     },
     {
       prop: 'username',
       label: '用户名',
-      minWidth: 120
     },
     {
       prop: 'phone',
       label: '手机号',
-      width: 130
     },
     {
-      prop: 'shop_id',
-      label: '店铺ID',
-      width: 100
+      prop: 'shop_name',
+      label: '店铺名称',
+      showOverflowTooltip: true
     },
     {
       prop: 'status',
       label: '状态',
-      width: 100,
       formatter: (row: ShopAccountResponse) => {
         return h(ElSwitch, {
           modelValue: row.status,
@@ -289,14 +326,13 @@
           activeText: getStatusText(CommonStatus.ENABLED),
           inactiveText: getStatusText(CommonStatus.DISABLED),
           inlinePrompt: true,
-          'onUpdate:modelValue': (val: number) => handleStatusChange(row, val)
+          'onUpdate:modelValue': (val: string | number | boolean) => handleStatusChange(row, val as number)
         })
       }
     },
     {
       prop: 'created_at',
       label: '创建时间',
-      width: 180,
       formatter: (row: ShopAccountResponse) => formatDateTime(row.created_at)
     },
     {
@@ -339,8 +375,69 @@
 
   onMounted(() => {
     getAccountList()
+    loadShopList()
+    loadSearchShopList()
   })
 
+  // 加载店铺列表(用于新增/编辑对话框,默认加载20条)
+  const loadShopList = async (shopName?: string) => {
+    shopLoading.value = true
+    try {
+      const params: any = {
+        page: 1,
+        pageSize: 20
+      }
+      if (shopName) {
+        params.shop_name = shopName
+      }
+      const res = await ShopService.getShops(params)
+      if (res.code === 0) {
+        shopList.value = res.data.items || []
+      }
+    } catch (error) {
+      console.error('获取店铺列表失败:', error)
+    } finally {
+      shopLoading.value = false
+    }
+  }
+
+  // 加载搜索栏店铺列表(默认加载20条)
+  const loadSearchShopList = async (shopName?: string) => {
+    try {
+      const params: any = {
+        page: 1,
+        pageSize: 20
+      }
+      if (shopName) {
+        params.shop_name = shopName
+      }
+      const res = await ShopService.getShops(params)
+      if (res.code === 0) {
+        searchShopList.value = res.data.items || []
+      }
+    } catch (error) {
+      console.error('获取店铺列表失败:', error)
+    }
+  }
+
+  // 搜索店铺(用于新增/编辑对话框)
+  const searchShops = (query: string) => {
+    if (query) {
+      loadShopList(query)
+    } else {
+      loadShopList()
+    }
+  }
+
+  // 搜索店铺(用于搜索栏)
+  const handleSearchShop = (query: string) => {
+    if (query) {
+      loadSearchShopList(query)
+    } else {
+      loadSearchShopList()
+    }
+  }
+
   // 提交修改密码
   const handleChangePassword = async () => {
     if (!passwordFormRef.value) return
@@ -412,8 +509,8 @@
       { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
     ],
     shop_id: [
-      { required: true, message: '请输入店铺ID', trigger: 'blur' },
-      { type: 'number', min: 1, message: '店铺ID必须大于0', trigger: 'blur' }
+      { required: true, message: '请选择店铺', trigger: 'change' },
+      { type: 'number', min: 0, message: '店铺ID必须大于0', trigger: 'change' }
     ]
   })
 

src/views/asset-management/asset-assign/index.vue

@@ -1,36 +1,17 @@
 <template>
   <div class="page-content">
-    <!-- 操作提示 -->
-    <ElAlert type="info" :closable="false" style="margin-bottom: 20px">
-      <template #title>
-        <div style="line-height: 1.8">
-          <p><strong>资产分配说明：</strong></p>
-          <p>1. <strong>网卡批量分配</strong>：仅分配选中的网卡资产</p>
-          <p>2. <strong>设备批量分配</strong>：仅分配选中的设备资产</p>
-          <p>3. <strong>网卡+设备分配</strong>：如果网卡有绑定设备，将同时分配网卡和设备</p>
-          <p>4. 分配后资产所有权将转移至目标代理商</p>
-        </div>
-      </template>
-    </ElAlert>
-
     <!-- 分配模式选择 -->
     <ElCard shadow="never" style="margin-bottom: 20px">
       <ElRadioGroup v-model="assignMode" size="large">
         <ElRadioButton value="sim">网卡批量分配</ElRadioButton>
         <ElRadioButton value="device">设备批量分配</ElRadioButton>
-        <ElRadioButton value="both">网卡+设备分配</ElRadioButton>
       </ElRadioGroup>
     </ElCard>
 
     <!-- 网卡分配 -->
-    <ElCard v-if="assignMode === 'sim' || assignMode === 'both'" shadow="never" style="margin-bottom: 20px">
+    <ElCard v-if="assignMode === 'sim'" shadow="never" style="margin-bottom: 20px">
       <template #header>
-        <div style="display: flex; justify-content: space-between; align-items: center">
-          <span style="font-weight: 500">选择网卡资产</span>
-          <ElButton type="primary" size="small" :disabled="selectedSims.length === 0" @click="showAssignDialog('sim')">
-            分配选中的 {{ selectedSims.length }} 张网卡
-          </ElButton>
-        </div>
+        <span style="font-weight: 500">选择网卡资产</span>
       </template>
 
       <ElRow :gutter="12" style="margin-bottom: 16px">
@@ -50,9 +31,8 @@
         </ElCol>
       </ElRow>
 
-      <ArtTable :data="filteredSimData" index @selection-change="handleSimSelectionChange">
+      <ArtTable :data="filteredSimData" index>
         <template #default>
-          <ElTableColumn type="selection" width="55" />
           <ElTableColumn label="ICCID" prop="iccid" width="200" />
           <ElTableColumn label="IMSI" prop="imsi" width="180" />
           <ElTableColumn label="运营商" prop="operator" width="100">
@@ -63,7 +43,9 @@
           <ElTableColumn label="状态" prop="status" width="100">
             <template #default="scope">
               <ElTag v-if="scope.row.status === 'active'" type="success" size="small">激活</ElTag>
-              <ElTag v-else-if="scope.row.status === 'inactive'" type="info" size="small">未激活</ElTag>
+              <ElTag v-else-if="scope.row.status === 'inactive'" type="info" size="small"
+                >未激活</ElTag
+              >
               <ElTag v-else type="warning" size="small">停机</ElTag>
             </template>
           </ElTableColumn>
@@ -84,12 +66,7 @@
     <!-- 设备分配 -->
     <ElCard v-if="assignMode === 'device'" shadow="never">
       <template #header>
-        <div style="display: flex; justify-content: space-between; align-items: center">
-          <span style="font-weight: 500">选择设备资产</span>
-          <ElButton type="primary" size="small" :disabled="selectedDevices.length === 0" @click="showAssignDialog('device')">
-            分配选中的 {{ selectedDevices.length }} 个设备
-          </ElButton>
-        </div>
+        <span style="font-weight: 500">选择设备资产</span>
       </template>
 
       <ElRow :gutter="12" style="margin-bottom: 16px">
@@ -109,9 +86,8 @@
         </ElCol>
       </ElRow>
 
-      <ArtTable :data="filteredDeviceData" index @selection-change="handleDeviceSelectionChange">
+      <ArtTable :data="filteredDeviceData" index>
         <template #default>
-          <ElTableColumn type="selection" width="55" />
           <ElTableColumn label="设备编号" prop="deviceCode" width="180" />
           <ElTableColumn label="设备名称" prop="deviceName" min-width="180" />
           <ElTableColumn label="设备类型" prop="deviceType" width="120">
@@ -129,7 +105,9 @@
           </ElTableColumn>
           <ElTableColumn label="在线状态" prop="onlineStatus" width="100">
             <template #default="scope">
-              <ElTag v-if="scope.row.onlineStatus === 'online'" type="success" size="small">在线</ElTag>
+              <ElTag v-if="scope.row.onlineStatus === 'online'" type="success" size="small"
+                >在线</ElTag
+              >
               <ElTag v-else type="info" size="small">离线</ElTag>
             </template>
           </ElTableColumn>
@@ -143,21 +121,23 @@
       <ElForm ref="formRef" :model="assignForm" :rules="assignRules" label-width="120px">
         <ElFormItem label="分配类型">
           <ElTag v-if="assignForm.type === 'sim'" type="primary">网卡资产</ElTag>
-          <ElTag v-else-if="assignForm.type === 'device'" type="success">设备资产</ElTag>
-          <ElTag v-else type="warning">网卡+设备</ElTag>
+          <ElTag v-else type="success">设备资产</ElTag>
         </ElFormItem>
 
         <ElFormItem label="分配数量">
           <div>
-            <span v-if="assignForm.type === 'sim'" style="font-size: 18px; font-weight: 600; color: var(--el-color-primary)">
+            <span
+              v-if="assignForm.type === 'sim'"
+              style="font-size: 18px; font-weight: 600; color: var(--el-color-primary)"
+            >
               {{ selectedSims.length }} 张网卡
             </span>
-            <span v-else-if="assignForm.type === 'device'" style="font-size: 18px; font-weight: 600; color: var(--el-color-success)">
+            <span
+              v-else
+              style="font-size: 18px; font-weight: 600; color: var(--el-color-success)"
+            >
               {{ selectedDevices.length }} 个设备
             </span>
-            <span v-else style="font-size: 18px; font-weight: 600">
-              {{ selectedSims.length }} 张网卡 + {{ selectedSims.filter(s => s.deviceCode).length }} 个设备
-            </span>
           </div>
         </ElFormItem>
 
@@ -185,10 +165,6 @@
             placeholder="请输入分配说明"
           />
         </ElFormItem>
-
-        <ElAlert type="warning" :closable="false">
-          分配后资产所有权将转移至目标代理商，原账号将无法管理这些资产！
-        </ElAlert>
       </ElForm>
 
       <template #footer>
@@ -198,31 +174,6 @@
         </div>
       </template>
     </ElDialog>
-
-    <!-- 分配记录 -->
-    <ElCard shadow="never" style="margin-top: 20px">
-      <template #header>
-        <span style="font-weight: 500">最近分配记录</span>
-      </template>
-
-      <ArtTable :data="assignHistory" index>
-        <template #default>
-          <ElTableColumn label="分配批次号" prop="batchNo" width="180" />
-          <ElTableColumn label="分配类型" prop="type" width="120">
-            <template #default="scope">
-              <ElTag v-if="scope.row.type === 'sim'" type="primary" size="small">网卡</ElTag>
-              <ElTag v-else-if="scope.row.type === 'device'" type="success" size="small">设备</ElTag>
-              <ElTag v-else type="warning" size="small">网卡+设备</ElTag>
-            </template>
-          </ElTableColumn>
-          <ElTableColumn label="分配数量" prop="quantity" width="100" />
-          <ElTableColumn label="目标代理商" prop="targetAgentName" min-width="150" />
-          <ElTableColumn label="分配说明" prop="remark" min-width="200" show-overflow-tooltip />
-          <ElTableColumn label="分配时间" prop="assignTime" width="180" />
-          <ElTableColumn label="操作人" prop="operator" width="100" />
-        </template>
-      </ArtTable>
-    </ElCard>
   </div>
 </template>
 
@@ -323,34 +274,13 @@
     }
   ])
 
-  const assignHistory = ref([
-    {
-      id: '1',
-      batchNo: 'ASSIGN202601090001',
-      type: 'sim',
-      quantity: 100,
-      targetAgentName: '华东区总代理',
-      remark: '批量分配给华东区',
-      assignTime: '2026-01-09 10:00:00',
-      operator: 'admin'
-    },
-    {
-      id: '2',
-      batchNo: 'ASSIGN202601080001',
-      type: 'both',
-      quantity: 50,
-      targetAgentName: '华南区代理',
-      remark: '网卡和设备一起分配',
-      assignTime: '2026-01-08 14:00:00',
-      operator: 'admin'
-    }
-  ])
 
   const filteredSimData = computed(() => {
     let data = simMockData.value
     if (simSearchQuery.value) {
       data = data.filter(
-        (item) => item.iccid.includes(simSearchQuery.value) || item.imsi.includes(simSearchQuery.value)
+        (item) =>
+          item.iccid.includes(simSearchQuery.value) || item.imsi.includes(simSearchQuery.value)
       )
     }
     if (simStatusFilter.value) {
@@ -363,7 +293,9 @@
     let data = deviceMockData.value
     if (deviceSearchQuery.value) {
       data = data.filter(
-        (item) => item.deviceCode.includes(deviceSearchQuery.value) || item.deviceName.includes(deviceSearchQuery.value)
+        (item) =>
+          item.deviceCode.includes(deviceSearchQuery.value) ||
+          item.deviceName.includes(deviceSearchQuery.value)
       )
     }
     if (deviceTypeFilter.value) {
@@ -401,28 +333,6 @@
     if (!formRef.value) return
     await formRef.value.validate((valid) => {
       if (valid) {
-        const agent = agentList.value.find((a) => a.id === assignForm.targetAgentId)
-        let quantity = 0
-
-        if (assignForm.type === 'sim') {
-          quantity = selectedSims.value.length
-        } else if (assignForm.type === 'device') {
-          quantity = selectedDevices.value.length
-        } else {
-          quantity = selectedSims.value.length
-        }
-
-        assignHistory.value.unshift({
-          id: Date.now().toString(),
-          batchNo: `ASSIGN${Date.now()}`,
-          type: assignForm.type,
-          quantity,
-          targetAgentName: agent?.agentName || '',
-          remark: assignForm.remark,
-          assignTime: new Date().toLocaleString('zh-CN'),
-          operator: 'admin'
-        })
-
         assignDialogVisible.value = false
         formRef.value.resetFields()
         selectedSims.value = []

src/views/asset-management/card-replacement-request/index.vue

@@ -36,7 +36,9 @@
         <ElCard shadow="hover" class="stat-card">
           <div class="stat-content">
             <div class="stat-label">待处理</div>
-            <div class="stat-value" style="color: var(--el-color-warning)">{{ statistics.pending }}</div>
+            <div class="stat-value" style="color: var(--el-color-warning)">{{
+              statistics.pending
+            }}</div>
           </div>
           <el-icon class="stat-icon" style="color: var(--el-color-warning)"><Clock /></el-icon>
         </ElCard>
@@ -45,7 +47,9 @@
         <ElCard shadow="hover" class="stat-card">
           <div class="stat-content">
             <div class="stat-label">处理中</div>
-            <div class="stat-value" style="color: var(--el-color-primary)">{{ statistics.processing }}</div>
+            <div class="stat-value" style="color: var(--el-color-primary)">{{
+              statistics.processing
+            }}</div>
           </div>
           <el-icon class="stat-icon" style="color: var(--el-color-primary)"><Loading /></el-icon>
         </ElCard>
@@ -54,16 +58,22 @@
         <ElCard shadow="hover" class="stat-card">
           <div class="stat-content">
             <div class="stat-label">已完成</div>
-            <div class="stat-value" style="color: var(--el-color-success)">{{ statistics.completed }}</div>
+            <div class="stat-value" style="color: var(--el-color-success)">{{
+              statistics.completed
+            }}</div>
           </div>
-          <el-icon class="stat-icon" style="color: var(--el-color-success)"><CircleCheck /></el-icon>
+          <el-icon class="stat-icon" style="color: var(--el-color-success)"
+            ><CircleCheck
+          /></el-icon>
         </ElCard>
       </ElCol>
       <ElCol :xs="24" :sm="12" :lg="6">
         <ElCard shadow="hover" class="stat-card">
           <div class="stat-content">
             <div class="stat-label">已拒绝</div>
-            <div class="stat-value" style="color: var(--el-color-danger)">{{ statistics.rejected }}</div>
+            <div class="stat-value" style="color: var(--el-color-danger)">{{
+              statistics.rejected
+            }}</div>
           </div>
           <el-icon class="stat-icon" style="color: var(--el-color-danger)"><CircleClose /></el-icon>
         </ElCard>
@@ -186,14 +196,17 @@
             <ElTag v-if="validationResult === 'success'" type="success" size="small">
               验证通过，该卡可用
             </ElTag>
-            <ElTag v-else type="danger" size="small">
-              验证失败，{{ validationMessage }}
-            </ElTag>
+            <ElTag v-else type="danger" size="small"> 验证失败，{{ validationMessage }} </ElTag>
           </div>
         </ElFormItem>
 
         <ElFormItem label="备注">
-          <ElInput v-model="fillForm.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
+          <ElInput
+            v-model="fillForm.remark"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入备注信息"
+          />
         </ElFormItem>
 
         <ElAlert type="info" :closable="false">
@@ -235,7 +248,13 @@
 <script setup lang="ts">
   import { computed } from 'vue'
   import { ElMessage, ElMessageBox } from 'element-plus'
-  import { View, Clock, Loading as LoadingIcon, CircleCheck, CircleClose } from '@element-plus/icons-vue'
+  import {
+    View,
+    Clock,
+    Loading as LoadingIcon,
+    CircleCheck,
+    CircleClose
+  } from '@element-plus/icons-vue'
   import type { FormInstance, FormRules } from 'element-plus'
 
   defineOptions({ name: 'CardReplacementRequest' })
@@ -502,9 +521,9 @@
 
       .stat-content {
         .stat-label {
+          margin-bottom: 8px;
           font-size: 14px;
           color: var(--el-text-color-secondary);
-          margin-bottom: 8px;
         }
 
         .stat-value {

src/views/batch/card-change-notice/index.vue

@@ -60,7 +60,13 @@
           <template #default="scope">
             <ElProgress
               :percentage="scope.row.progress"
-              :status="scope.row.status === 'failed' ? 'exception' : scope.row.status === 'sent' ? 'success' : undefined"
+              :status="
+                scope.row.status === 'failed'
+                  ? 'exception'
+                  : scope.row.status === 'sent'
+                    ? 'success'
+                    : undefined
+              "
             />
           </template>
         </ElTableColumn>
@@ -131,7 +137,12 @@
     >
       <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
         <ElFormItem label="通知标题" prop="title">
-          <ElInput v-model="form.title" placeholder="请输入通知标题" maxlength="50" show-word-limit />
+          <ElInput
+            v-model="form.title"
+            placeholder="请输入通知标题"
+            maxlength="50"
+            show-word-limit
+          />
         </ElFormItem>
 
         <ElFormItem label="通知类型" prop="type">
@@ -163,7 +174,12 @@
         </ElFormItem>
 
         <ElFormItem v-if="form.targetType === 'specific'" label="用户列表">
-          <ElSelect v-model="form.targetUsers" multiple placeholder="请选择目标用户" style="width: 100%">
+          <ElSelect
+            v-model="form.targetUsers"
+            multiple
+            placeholder="请选择目标用户"
+            style="width: 100%"
+          >
             <ElOption label="张三 (13800138000)" value="user1" />
             <ElOption label="李四 (13900139000)" value="user2" />
             <ElOption label="王五 (13700137000)" value="user3" />
@@ -242,12 +258,19 @@
           <ElTag v-else type="info">待发送</ElTag>
         </ElDescriptionsItem>
         <ElDescriptionsItem label="发送方式" :span="2">
-          <ElTag v-for="method in currentDetail.sendMethods" :key="method" size="small" style="margin-right: 4px">
+          <ElTag
+            v-for="method in currentDetail.sendMethods"
+            :key="method"
+            size="small"
+            style="margin-right: 4px"
+          >
             {{ getSendMethodText(method) }}
           </ElTag>
         </ElDescriptionsItem>
         <ElDescriptionsItem label="创建时间">{{ currentDetail.createTime }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="发送时间">{{ currentDetail.sendTime || '-' }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="发送时间">{{
+          currentDetail.sendTime || '-'
+        }}</ElDescriptionsItem>
         <ElDescriptionsItem label="通知内容" :span="2">
           {{ currentDetail.content }}
         </ElDescriptionsItem>
@@ -530,14 +553,15 @@
 <style lang="scss" scoped>
   .page-content {
     :deep(.is-loading) {
-      animation: rotating 2s linear infinite;
       margin-right: 4px;
+      animation: rotating 2s linear infinite;
     }
 
     @keyframes rotating {
       0% {
         transform: rotate(0deg);
       }
+
       100% {
         transform: rotate(360deg);
       }

src/views/batch/device-import/index.vue

@@ -21,7 +21,9 @@
             </template>
           </ElAlert>
 
-          <ElButton type="primary" :icon="Download" @click="downloadTemplate">下载导入模板</ElButton>
+          <ElButton type="primary" :icon="Download" @click="downloadTemplate"
+            >下载导入模板</ElButton
+          >
         </ElCol>
 
         <ElCol :xs="24" :lg="12">
@@ -44,7 +46,12 @@
               </template>
             </ElUpload>
             <div style="margin-top: 16px; text-align: center">
-              <ElButton type="success" :loading="uploading" :disabled="!fileList.length" @click="submitUpload">
+              <ElButton
+                type="success"
+                :loading="uploading"
+                :disabled="!fileList.length"
+                @click="submitUpload"
+              >
                 开始导入
               </ElButton>
               <ElButton @click="clearFiles">清空</ElButton>
@@ -71,7 +78,9 @@
             <div class="stat-label">成功绑定</div>
             <div class="stat-value" style="color: var(--el-color-success)">1,180</div>
           </div>
-          <el-icon class="stat-icon" style="color: var(--el-color-success)"><SuccessFilled /></el-icon>
+          <el-icon class="stat-icon" style="color: var(--el-color-success)"
+            ><SuccessFilled
+          /></el-icon>
         </ElCard>
       </ElCol>
       <ElCol :xs="24" :sm="12" :lg="6">
@@ -80,7 +89,9 @@
             <div class="stat-label">导入失败</div>
             <div class="stat-value" style="color: var(--el-color-danger)">70</div>
           </div>
-          <el-icon class="stat-icon" style="color: var(--el-color-danger)"><CircleCloseFilled /></el-icon>
+          <el-icon class="stat-icon" style="color: var(--el-color-danger)"
+            ><CircleCloseFilled
+          /></el-icon>
         </ElCard>
       </ElCol>
       <ElCol :xs="24" :sm="12" :lg="6">
@@ -89,7 +100,9 @@
             <div class="stat-label">成功率</div>
             <div class="stat-value">94.4%</div>
           </div>
-          <el-icon class="stat-icon" style="color: var(--el-color-warning)"><TrendCharts /></el-icon>
+          <el-icon class="stat-icon" style="color: var(--el-color-warning)"
+            ><TrendCharts
+          /></el-icon>
         </ElCard>
       </ElCol>
     </ElRow>
@@ -97,10 +110,15 @@
     <!-- 导入记录 -->
     <ElCard shadow="never" style="margin-top: 20px">
       <template #header>
-        <div style="display: flex; justify-content: space-between; align-items: center">
+        <div style="display: flex; align-items: center; justify-content: space-between">
           <span style="font-weight: 500">导入记录</span>
           <div>
-            <ElSelect v-model="statusFilter" placeholder="状态筛选" style="width: 120px; margin-right: 12px" clearable>
+            <ElSelect
+              v-model="statusFilter"
+              placeholder="状态筛选"
+              style="width: 120px; margin-right: 12px"
+              clearable
+            >
               <ElOption label="全部" value="" />
               <ElOption label="处理中" value="processing" />
               <ElOption label="完成" value="success" />
@@ -190,7 +208,10 @@
       </ElDescriptions>
 
       <ElDivider content-position="left">失败明细</ElDivider>
-      <div v-if="currentDetail.failReasons && currentDetail.failReasons.length" style="max-height: 300px; overflow-y: auto">
+      <div
+        v-if="currentDetail.failReasons && currentDetail.failReasons.length"
+        style="max-height: 300px; overflow-y: auto"
+      >
         <ElTable :data="currentDetail.failReasons" border size="small">
           <ElTableColumn label="行号" prop="row" width="80" />
           <ElTableColumn label="设备编号" prop="deviceCode" width="150" />
@@ -202,7 +223,12 @@
 
       <template #footer>
         <ElButton @click="detailDialogVisible = false">关闭</ElButton>
-        <ElButton v-if="currentDetail.failCount > 0" type="primary" :icon="Download" @click="downloadFailData(currentDetail)">
+        <ElButton
+          v-if="currentDetail.failCount > 0"
+          type="primary"
+          :icon="Download"
+          @click="downloadFailData(currentDetail)"
+        >
           下载失败数据
         </ElButton>
       </template>
@@ -303,7 +329,12 @@
       importTime: '2026-01-07 10:15:00',
       operator: 'operator01',
       failReasons: [
-        { row: 10, deviceCode: 'GPS001', iccid: '89860123456789012349', message: 'ICCID 已被其他设备绑定' },
+        {
+          row: 10,
+          deviceCode: 'GPS001',
+          iccid: '89860123456789012349',
+          message: 'ICCID 已被其他设备绑定'
+        },
         { row: 20, deviceCode: 'GPS002', iccid: '89860123456789012350', message: 'ICCID 状态异常' }
       ]
     }
@@ -368,7 +399,12 @@
         importTime: new Date().toLocaleString('zh-CN'),
         operator: 'admin',
         failReasons: [
-          { row: 12, deviceCode: 'TEST001', iccid: '89860123456789012351', message: 'ICCID 不存在' },
+          {
+            row: 12,
+            deviceCode: 'TEST001',
+            iccid: '89860123456789012351',
+            message: 'ICCID 不存在'
+          },
           { row: 34, deviceCode: 'TEST002', iccid: '89860123456789012352', message: '设备类型无效' }
         ]
       }
@@ -421,18 +457,18 @@
     }
 
     :deep(.el-icon--upload) {
+      margin-bottom: 16px;
       font-size: 67px;
       color: var(--el-text-color-placeholder);
-      margin-bottom: 16px;
     }
 
     :deep(.el-upload__text) {
-      color: var(--el-text-color-regular);
       font-size: 14px;
+      color: var(--el-text-color-regular);
 
       em {
-        color: var(--el-color-primary);
         font-style: normal;
+        color: var(--el-color-primary);
       }
     }
 
@@ -444,6 +480,7 @@
       0% {
         transform: rotate(0deg);
       }
+
       100% {
         transform: rotate(360deg);
       }
@@ -459,9 +496,9 @@
 
       .stat-content {
         .stat-label {
+          margin-bottom: 8px;
           font-size: 14px;
           color: var(--el-text-color-secondary);
-          margin-bottom: 8px;
         }
 
         .stat-value {

src/views/batch/sim-import/index.vue

@@ -20,7 +20,9 @@
             </template>
           </ElAlert>
 
-          <ElButton type="primary" :icon="Download" @click="downloadTemplate">下载导入模板</ElButton>
+          <ElButton type="primary" :icon="Download" @click="downloadTemplate"
+            >下载导入模板</ElButton
+          >
         </ElCol>
 
         <ElCol :xs="24" :lg="12">
@@ -43,7 +45,12 @@
               </template>
             </ElUpload>
             <div style="margin-top: 16px; text-align: center">
-              <ElButton type="success" :loading="uploading" :disabled="!fileList.length" @click="submitUpload">
+              <ElButton
+                type="success"
+                :loading="uploading"
+                :disabled="!fileList.length"
+                @click="submitUpload"
+              >
                 开始导入
               </ElButton>
               <ElButton @click="clearFiles">清空</ElButton>
@@ -56,7 +63,7 @@
     <!-- 导入记录 -->
     <ElCard shadow="never" style="margin-top: 20px">
       <template #header>
-        <div style="display: flex; justify-content: space-between; align-items: center">
+        <div style="display: flex; align-items: center; justify-content: space-between">
           <span style="font-weight: 500">导入记录</span>
           <ElButton size="small" @click="refreshList">刷新</ElButton>
         </div>
@@ -133,7 +140,11 @@
         <ElDescriptionsItem label="操作人">{{ currentDetail.operator }}</ElDescriptionsItem>
         <ElDescriptionsItem label="失败原因" :span="2">
           <div v-if="currentDetail.failReasons && currentDetail.failReasons.length">
-            <div v-for="(reason, index) in currentDetail.failReasons" :key="index" style="margin-bottom: 4px">
+            <div
+              v-for="(reason, index) in currentDetail.failReasons"
+              :key="index"
+              style="margin-bottom: 4px"
+            >
               <ElTag type="danger" size="small">行{{ reason.row }}</ElTag>
               {{ reason.message }}
             </div>
@@ -292,7 +303,9 @@
       importRecords.value.unshift(newRecord)
       uploading.value = false
       clearFiles()
-      ElMessage.success(`导入完成！成功 ${newRecord.successCount} 条，失败 ${newRecord.failCount} 条`)
+      ElMessage.success(
+        `导入完成！成功 ${newRecord.successCount} 条，失败 ${newRecord.failCount} 条`
+      )
     }, 2000)
   }
 
@@ -335,18 +348,18 @@
     }
 
     :deep(.el-icon--upload) {
+      margin-bottom: 16px;
       font-size: 67px;
       color: var(--el-text-color-placeholder);
-      margin-bottom: 16px;
     }
 
     :deep(.el-upload__text) {
-      color: var(--el-text-color-regular);
       font-size: 14px;
+      color: var(--el-text-color-regular);
 
       em {
-        color: var(--el-color-primary);
         font-style: normal;
+        color: var(--el-color-primary);
       }
     }
 
@@ -358,6 +371,7 @@
       0% {
         transform: rotate(0deg);
       }
+
       100% {
         transform: rotate(360deg);
       }

src/views/card-management/card-detail/index.vue

@@ -58,6 +58,13 @@
             <ElButton type="danger" size="small" @click="deleteCard(item)"> 删除 </ElButton>
           </template>
         </ArtDataViewer>
+
+        <!-- 右键菜单 -->
+        <ArtMenuRight
+          ref="contextMenuRef"
+          :menu-items="contextMenuItems"
+          @select="handleContextMenuSelect"
+        />
       </ElCard>
 
       <!-- 网卡分销弹框 -->
@@ -109,6 +116,8 @@
   import { RoutesAlias } from '@/router/routesAlias'
   import ArtDataViewer from '@/components/core/views/ArtDataViewer.vue'
   import CardOperationDialog from '@/components/business/CardOperationDialog.vue'
+  import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
+  import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
 
   defineOptions({ name: 'CardDetail' })
 
@@ -123,6 +132,30 @@
   const rechargeDialogVisible = ref(false)
   const packageChangeDialogVisible = ref(false)
 
+  // 右键菜单
+  const contextMenuRef = ref()
+  const currentContextRow = ref<any>(null)
+
+  // 右键菜单配置
+  const contextMenuItems: MenuItemType[] = [
+    {
+      key: 'cardOperation',
+      label: '卡务操作',
+      icon: '&#xe72b;'
+    },
+    {
+      key: 'download',
+      label: '下载',
+      icon: '&#xe614;'
+    },
+    {
+      key: 'delete',
+      label: '删除',
+      icon: '&#xe783;',
+      showLine: true
+    }
+  ]
+
   // 定义表单搜索初始值
   const initialSearchState = {
     cardPackage: '',
@@ -734,36 +767,27 @@
     {
       prop: 'operation',
       label: '操作',
-      width: 200,
+      width: 120,
       formatter: (row: any) => {
-        return h('div', { class: 'operation-buttons' }, [
-          h(
-            'button',
-            {
-              class: 'el-button el-button--primary el-button--small',
-              onClick: () => handleCardOperation(row)
-            },
-            '卡务操作'
-          ),
-          h(
-            'button',
-            {
-              class: 'el-button el-button--success el-button--small',
-              onClick: () => downloadCard(row),
-              style: { marginLeft: '5px' }
-            },
-            '下载'
-          ),
-          h(
-            'button',
-            {
-              class: 'el-button el-button--danger el-button--small',
-              onClick: () => deleteCard(row),
-              style: { marginLeft: '5px' }
-            },
-            '删除'
-          )
-        ])
+        return h(
+          'div',
+          {
+            style:
+              'display: flex; justify-content: center; align-items: center; gap: 4px; cursor: pointer; color: var(--el-color-primary);',
+            onClick: (e: MouseEvent) => {
+              e.stopPropagation()
+              handleOperationClick(row, e)
+            }
+          },
+          [
+            h('i', {
+              class: 'iconfont-sys',
+              innerHTML: '&#xe79c;',
+              style: 'font-size: 16px;'
+            }),
+            h('span', { style: 'font-size: 14px;' }, '更多操作')
+          ]
+        )
       }
     }
   ])
@@ -872,7 +896,7 @@
     // 根据查询条件过滤
     let filteredAgents = allAgents
     if (query) {
-      filteredAgents = allAgents.filter(agent =>
+      filteredAgents = allAgents.filter((agent) =>
         agent.label.toLowerCase().includes(query.toLowerCase())
       )
     }
@@ -908,7 +932,7 @@
     // 根据查询条件过滤
     let filteredPackages = allPackages
     if (query) {
-      filteredPackages = allPackages.filter(pkg =>
+      filteredPackages = allPackages.filter((pkg) =>
         pkg.label.toLowerCase().includes(query.toLowerCase())
       )
     }
@@ -939,9 +963,7 @@
       // 模拟API调用
       await new Promise((resolve) => setTimeout(resolve, 1000))
 
-      ElMessage.success(
-        `成功为 ${data.selectedCards.length} 张网卡充值 ${data.amount} 元`
-      )
+      ElMessage.success(`成功为 ${data.selectedCards.length} 张网卡充值 ${data.amount} 元`)
       rechargeDialogVisible.value = false
 
       // 刷新列表
@@ -976,10 +998,9 @@
       ElMessage.success(`成功回收 ${selectedRows.value.length} 张网卡`)
 
       // 从列表中移除回收的网卡
-      const recycledIds = selectedRows.value.map(row => row.id)
-      tableData.value = tableData.value.filter(item => !recycledIds.includes(item.id))
+      const recycledIds = selectedRows.value.map((row) => row.id)
+      tableData.value = tableData.value.filter((item) => !recycledIds.includes(item.id))
       selectedRows.value = []
-
     } catch (error) {
       ElMessage.error('回收操作失败，请重试')
     }
@@ -989,6 +1010,29 @@
   const handleDialogClose = () => {
     // 可以在这里添加额外的关闭逻辑
   }
+
+  // 处理操作列点击
+  const handleOperationClick = (row: any, event: MouseEvent) => {
+    currentContextRow.value = row
+    contextMenuRef.value?.show(event)
+  }
+
+  // 处理右键菜单选择
+  const handleContextMenuSelect = (item: MenuItemType) => {
+    if (!currentContextRow.value) return
+
+    switch (item.key) {
+      case 'cardOperation':
+        handleCardOperation(currentContextRow.value)
+        break
+      case 'download':
+        downloadCard(currentContextRow.value)
+        break
+      case 'delete':
+        deleteCard(currentContextRow.value)
+        break
+    }
+  }
 </script>
 
 <style lang="scss" scoped>

src/views/card-management/offline-batch-recharge/index.vue

@@ -48,18 +48,9 @@
           </template>
 
           <template #card-actions="{ item }">
-            <ArtButtonTable
-              text="查看"
-              @click="viewDetails(item)"
-            />
-            <ArtButtonTable
-              text="重试"
-              @click="retryRecharge(item)"
-            />
-            <ArtButtonTable
-              text="删除"
-              @click="deleteRecord(item)"
-            />
+            <ArtButtonTable text="查看" @click="viewDetails(item)" />
+            <ArtButtonTable text="重试" @click="retryRecharge(item)" />
+            <ArtButtonTable text="删除" @click="deleteRecord(item)" />
           </template>
         </ArtDataViewer>
 

src/views/dashboard/ecommerce/widget/Banner.vue

@@ -1,7 +1,7 @@
 <template>
   <ArtBasicBanner
     class="banner"
-    :title="`欢迎回来 ${userInfo.userName}`"
+    :title="`欢迎回来 ${userInfo.username}`"
     :showButton="false"
     backgroundColor="var(--el-color-primary-light-9)"
     titleColor="var(--art-gray-900)"

src/views/finance/commission/agent-commission/index.vue

@@ -0,0 +1,558 @@
+<template>
+  <ArtTableFullScreen>
+    <div class="agent-commission-page" id="table-full-screen">
+      <!-- 搜索栏 -->
+      <ElCard shadow="never" class="search-card">
+        <ElForm :inline="true" :model="searchForm" class="search-form">
+          <ElFormItem label="店铺名称">
+            <ElInput
+              v-model="searchForm.shop_name"
+              placeholder="请输入店铺名称"
+              clearable
+              style="width: 200px"
+            />
+          </ElFormItem>
+          <ElFormItem label="店铺编码">
+            <ElInput
+              v-model="searchForm.shop_code"
+              placeholder="请输入店铺编码"
+              clearable
+              style="width: 200px"
+            />
+          </ElFormItem>
+          <ElFormItem>
+            <ElButton type="primary" @click="handleSearch">查询</ElButton>
+            <ElButton @click="handleReset">重置</ElButton>
+          </ElFormItem>
+        </ElForm>
+      </ElCard>
+
+      <ElCard shadow="never" class="art-table-card">
+        <!-- 表格头部 -->
+        <ArtTableHeader
+          :columnList="columnOptions"
+          v-model:columns="columnChecks"
+          @refresh="handleRefresh"
+        />
+
+        <!-- 表格 -->
+        <ArtTable
+          ref="tableRef"
+          row-key="shop_id"
+          :loading="loading"
+          :data="summaryList"
+          :currentPage="pagination.page"
+          :pageSize="pagination.pageSize"
+          :total="pagination.total"
+          :marginTop="10"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+          <template #default>
+            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+          </template>
+        </ArtTable>
+      </ElCard>
+    </div>
+  </ArtTableFullScreen>
+
+  <!-- 详情抽屉 -->
+  <ElDrawer
+    v-model="detailDrawerVisible"
+    :title="`${currentShop?.shop_name || ''} - 佣金详情`"
+    size="60%"
+    destroy-on-close
+  >
+    <ElTabs v-model="activeTab" class="detail-tabs">
+      <!-- 佣金明细 Tab -->
+      <ElTabPane label="佣金明细" name="commission">
+        <ArtTable
+          ref="commissionTableRef"
+          row-key="id"
+          :loading="commissionLoading"
+          :data="commissionRecords"
+          :currentPage="commissionPagination.page"
+          :pageSize="commissionPagination.pageSize"
+          :total="commissionPagination.total"
+          :marginTop="10"
+          :height="500"
+          @size-change="handleCommissionSizeChange"
+          @current-change="handleCommissionCurrentChange"
+        >
+          <template #default>
+            <ElTableColumn label="佣金金额" prop="amount" width="120">
+              <template #default="scope">
+                <span style="font-weight: 500; color: var(--el-color-success)">
+                  {{ formatMoney(scope.row.amount) }}
+                </span>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="入账后余额" prop="balance_after" width="120">
+              <template #default="scope">
+                {{ formatMoney(scope.row.balance_after) }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="佣金类型" prop="commission_type" width="120">
+              <template #default="scope">
+                <ElTag
+                  :type="
+                    CommissionTypeMap[scope.row.commission_type as keyof typeof CommissionTypeMap]
+                      ?.type || 'info'
+                  "
+                >
+                  {{
+                    CommissionTypeMap[scope.row.commission_type as keyof typeof CommissionTypeMap]
+                      ?.label || scope.row.commission_type
+                  }}
+                </ElTag>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="状态" prop="status" width="100">
+              <template #default="scope">
+                <ElTag
+                  :type="
+                    CommissionStatusMap[scope.row.status as keyof typeof CommissionStatusMap]
+                      ?.type || 'info'
+                  "
+                >
+                  {{
+                    CommissionStatusMap[scope.row.status as keyof typeof CommissionStatusMap]
+                      ?.label || scope.row.status
+                  }}
+                </ElTag>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="订单号" prop="order_no" min-width="180" show-overflow-tooltip />
+            <ElTableColumn label="ICCID" prop="iccid" min-width="150" show-overflow-tooltip />
+            <ElTableColumn label="设备号" prop="device_no" min-width="150" show-overflow-tooltip />
+            <ElTableColumn label="入账时间" prop="created_at" width="180">
+              <template #default="scope">
+                {{ formatDateTime(scope.row.created_at) }}
+              </template>
+            </ElTableColumn>
+          </template>
+        </ArtTable>
+      </ElTabPane>
+
+      <!-- 提现记录 Tab -->
+      <ElTabPane label="提现记录" name="withdrawal">
+        <ArtTable
+          ref="withdrawalTableRef"
+          row-key="id"
+          :loading="withdrawalLoading"
+          :data="withdrawalRecords"
+          :currentPage="withdrawalPagination.page"
+          :pageSize="withdrawalPagination.pageSize"
+          :total="withdrawalPagination.total"
+          :marginTop="10"
+          :height="500"
+          @size-change="handleWithdrawalSizeChange"
+          @current-change="handleWithdrawalCurrentChange"
+        >
+          <template #default>
+            <ElTableColumn
+              label="提现单号"
+              prop="withdrawal_no"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <ElTableColumn label="提现金额" prop="amount" width="120">
+              <template #default="scope">
+                <span style="font-weight: 500; color: var(--el-color-danger)">
+                  {{ formatMoney(scope.row.amount) }}
+                </span>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="实际到账" prop="actual_amount" width="120">
+              <template #default="scope">
+                {{ formatMoney(scope.row.actual_amount) }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="手续费" prop="fee" width="100">
+              <template #default="scope">
+                {{ formatMoney(scope.row.fee) }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="提现方式" prop="withdrawal_method" width="100">
+              <template #default="scope">
+                {{
+                  WithdrawalMethodMap[
+                    scope.row.withdrawal_method as keyof typeof WithdrawalMethodMap
+                  ]?.label || scope.row.withdrawal_method
+                }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="状态" prop="status" width="100">
+              <template #default="scope">
+                <ElTag
+                  :type="
+                    WithdrawalStatusMap[scope.row.status as keyof typeof WithdrawalStatusMap]
+                      ?.type || 'info'
+                  "
+                >
+                  {{
+                    WithdrawalStatusMap[scope.row.status as keyof typeof WithdrawalStatusMap]
+                      ?.label || scope.row.status
+                  }}
+                </ElTag>
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="申请时间" prop="created_at" width="180">
+              <template #default="scope">
+                {{ formatDateTime(scope.row.created_at) }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="处理时间" prop="processed_at" width="180">
+              <template #default="scope">
+                {{ formatDateTime(scope.row.processed_at) }}
+              </template>
+            </ElTableColumn>
+          </template>
+        </ArtTable>
+      </ElTabPane>
+    </ElTabs>
+  </ElDrawer>
+</template>
+
+<script setup lang="ts">
+  import { h } from 'vue'
+  import { CommissionService } from '@/api/modules'
+  import { ElMessage, ElTag } from 'element-plus'
+  import type {
+    ShopCommissionSummaryItem,
+    ShopCommissionRecordItem,
+    WithdrawalRequestItem
+  } from '@/types/api/commission'
+  import { useCheckedColumns } from '@/composables/useCheckedColumns'
+  import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
+  import { formatDateTime, formatMoney } from '@/utils/business/format'
+  import {
+    CommissionStatusMap,
+    WithdrawalStatusMap,
+    WithdrawalMethodMap,
+    CommissionTypeMap
+  } from '@/config/constants/commission'
+
+  defineOptions({ name: 'AgentCommission' })
+
+  // 主表格状态
+  const loading = ref(false)
+  const tableRef = ref()
+  const summaryList = ref<ShopCommissionSummaryItem[]>([])
+
+  // 搜索表单
+  const searchForm = reactive({
+    shop_name: '',
+    shop_code: ''
+  })
+
+  // 主表格分页
+  const pagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  })
+
+  // 详情抽屉状态
+  const detailDrawerVisible = ref(false)
+  const activeTab = ref<'commission' | 'withdrawal'>('commission')
+  const currentShop = ref<ShopCommissionSummaryItem | null>(null)
+
+  // 佣金明细状态
+  const commissionLoading = ref(false)
+  const commissionTableRef = ref()
+  const commissionRecords = ref<ShopCommissionRecordItem[]>([])
+  const commissionPagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  })
+
+  // 提现记录状态
+  const withdrawalLoading = ref(false)
+  const withdrawalTableRef = ref()
+  const withdrawalRecords = ref<WithdrawalRequestItem[]>([])
+  const withdrawalPagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  })
+
+  // 列配置
+  const columnOptions = [
+    { label: '店铺ID', prop: 'shop_id' },
+    { label: '店铺编码', prop: 'shop_code' },
+    { label: '店铺名称', prop: 'shop_name' },
+    { label: '用户名', prop: 'username' },
+    { label: '手机号', prop: 'phone' },
+    { label: '总佣金', prop: 'total_commission' },
+    { label: '可提现', prop: 'available_commission' },
+    { label: '冻结中', prop: 'frozen_commission' },
+    { label: '提现中', prop: 'withdrawing_commission' },
+    { label: '已提现', prop: 'withdrawn_commission' },
+    { label: '未提现', prop: 'unwithdraw_commission' },
+    { label: '操作', prop: 'operation' }
+  ]
+
+  // 动态列配置
+  const { columnChecks, columns } = useCheckedColumns(() => [
+    {
+      prop: 'shop_id',
+      label: '店铺ID',
+      width: 100
+    },
+    {
+      prop: 'shop_code',
+      label: '店铺编码',
+      minWidth: 150
+    },
+    {
+      prop: 'shop_name',
+      label: '店铺名称',
+      minWidth: 180,
+      showOverflowTooltip: true
+    },
+    {
+      prop: 'username',
+      label: '用户名',
+      minWidth: 120
+    },
+    {
+      prop: 'phone',
+      label: '手机号',
+      width: 130
+    },
+    {
+      prop: 'total_commission',
+      label: '总佣金',
+      width: 120,
+      formatter: (row: ShopCommissionSummaryItem) => formatMoney(row.total_commission)
+    },
+    {
+      prop: 'available_commission',
+      label: '可提现',
+      width: 120,
+      formatter: (row: ShopCommissionSummaryItem) => {
+        return h(
+          'span',
+          { style: 'color: var(--el-color-success); font-weight: 500' },
+          formatMoney(row.available_commission)
+        )
+      }
+    },
+    {
+      prop: 'frozen_commission',
+      label: '冻结中',
+      width: 120,
+      formatter: (row: ShopCommissionSummaryItem) => formatMoney(row.frozen_commission)
+    },
+    {
+      prop: 'withdrawing_commission',
+      label: '提现中',
+      width: 120,
+      formatter: (row: ShopCommissionSummaryItem) => {
+        return h(
+          'span',
+          { style: 'color: var(--el-color-warning)' },
+          formatMoney(row.withdrawing_commission)
+        )
+      }
+    },
+    {
+      prop: 'withdrawn_commission',
+      label: '已提现',
+      width: 120,
+      formatter: (row: ShopCommissionSummaryItem) => formatMoney(row.withdrawn_commission)
+    },
+    {
+      prop: 'unwithdraw_commission',
+      label: '未提现',
+      width: 120,
+      formatter: (row: ShopCommissionSummaryItem) => formatMoney(row.unwithdraw_commission)
+    },
+    {
+      prop: 'operation',
+      label: '操作',
+      width: 120,
+      fixed: 'right',
+      formatter: (row: ShopCommissionSummaryItem) => {
+        return h(ArtButtonTable, {
+          icon: '&#xe72b;',
+          onClick: () => showDetail(row)
+        })
+      }
+    }
+  ])
+
+  onMounted(() => {
+    getTableData()
+  })
+
+  // 获取代理商佣金汇总列表
+  const getTableData = async () => {
+    loading.value = true
+    try {
+      const params = {
+        page: pagination.page,
+        pageSize: pagination.pageSize,
+        shop_name: searchForm.shop_name || undefined,
+        shop_code: searchForm.shop_code || undefined
+      }
+      const res = await CommissionService.getShopCommissionSummary(params)
+      if (res.code === 0) {
+        summaryList.value = res.data.items || []
+        pagination.total = res.data.total || 0
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取数据失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 搜索
+  const handleSearch = () => {
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 重置
+  const handleReset = () => {
+    searchForm.shop_name = ''
+    searchForm.shop_code = ''
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 刷新
+  const handleRefresh = () => {
+    getTableData()
+  }
+
+  // 分页变化
+  const handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    getTableData()
+  }
+
+  const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.page = newCurrentPage
+    getTableData()
+  }
+
+  // 显示详情抽屉
+  const showDetail = (row: ShopCommissionSummaryItem) => {
+    currentShop.value = row
+    detailDrawerVisible.value = true
+    activeTab.value = 'commission'
+
+    // 重置分页
+    commissionPagination.page = 1
+    withdrawalPagination.page = 1
+
+    // 加载佣金明细
+    loadCommissionRecords()
+  }
+
+  // 监听tab切换
+  watch(activeTab, (newTab) => {
+    if (newTab === 'commission') {
+      loadCommissionRecords()
+    } else if (newTab === 'withdrawal') {
+      loadWithdrawalRecords()
+    }
+  })
+
+  // 加载佣金明细
+  const loadCommissionRecords = async () => {
+    if (!currentShop.value) return
+
+    commissionLoading.value = true
+    try {
+      const params = {
+        page: commissionPagination.page,
+        pageSize: commissionPagination.pageSize
+      }
+      const res = await CommissionService.getShopCommissionRecords(
+        currentShop.value.shop_id,
+        params
+      )
+      if (res.code === 0) {
+        commissionRecords.value = res.data.items || []
+        commissionPagination.total = res.data.total || 0
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取佣金明细失败')
+    } finally {
+      commissionLoading.value = false
+    }
+  }
+
+  // 佣金明细分页
+  const handleCommissionSizeChange = (newPageSize: number) => {
+    commissionPagination.pageSize = newPageSize
+    loadCommissionRecords()
+  }
+
+  const handleCommissionCurrentChange = (newCurrentPage: number) => {
+    commissionPagination.page = newCurrentPage
+    loadCommissionRecords()
+  }
+
+  // 加载提现记录
+  const loadWithdrawalRecords = async () => {
+    if (!currentShop.value) return
+
+    withdrawalLoading.value = true
+    try {
+      const params = {
+        page: withdrawalPagination.page,
+        pageSize: withdrawalPagination.pageSize
+      }
+      const res = await CommissionService.getShopWithdrawalRequests(
+        currentShop.value.shop_id,
+        params
+      )
+      if (res.code === 0) {
+        withdrawalRecords.value = res.data.items || []
+        withdrawalPagination.total = res.data.total || 0
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取提现记录失败')
+    } finally {
+      withdrawalLoading.value = false
+    }
+  }
+
+  // 提现记录分页
+  const handleWithdrawalSizeChange = (newPageSize: number) => {
+    withdrawalPagination.pageSize = newPageSize
+    loadWithdrawalRecords()
+  }
+
+  const handleWithdrawalCurrentChange = (newCurrentPage: number) => {
+    withdrawalPagination.page = newCurrentPage
+    loadWithdrawalRecords()
+  }
+</script>
+
+<style lang="scss" scoped>
+  .agent-commission-page {
+    .search-card {
+      margin-bottom: 16px;
+    }
+
+    .search-form {
+      margin-bottom: 0;
+    }
+  }
+
+  .detail-tabs {
+    :deep(.el-tabs__content) {
+      padding: 0;
+    }
+  }
+</style>

src/views/finance/commission/my-commission/index.vue

@@ -0,0 +1,874 @@
+<template>
+  <div class="my-commission-page">
+    <!-- 佣金概览卡片 -->
+    <ElRow :gutter="20" style="margin-bottom: 20px">
+      <ElCol :xs="24" :sm="12" :md="8" :lg="4">
+        <ElCard shadow="hover">
+          <div class="stat-card">
+            <div
+              class="stat-icon"
+              style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+            >
+              <i class="iconfont-sys">&#xe71d;</i>
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">总佣金</div>
+              <div class="stat-value">{{ formatMoney(summary.total_commission) }}</div>
+            </div>
+          </div>
+        </ElCard>
+      </ElCol>
+      <ElCol :xs="24" :sm="12" :md="8" :lg="4">
+        <ElCard shadow="hover">
+          <div class="stat-card">
+            <div
+              class="stat-icon"
+              style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
+            >
+              <i class="iconfont-sys">&#xe71e;</i>
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">可提现佣金</div>
+              <div class="stat-value">{{ formatMoney(summary.available_commission) }}</div>
+            </div>
+          </div>
+        </ElCard>
+      </ElCol>
+      <ElCol :xs="24" :sm="12" :md="8" :lg="4">
+        <ElCard shadow="hover">
+          <div class="stat-card">
+            <div
+              class="stat-icon"
+              style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
+            >
+              <i class="iconfont-sys">&#xe720;</i>
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">冻结佣金</div>
+              <div class="stat-value">{{ formatMoney(summary.frozen_commission) }}</div>
+            </div>
+          </div>
+        </ElCard>
+      </ElCol>
+      <ElCol :xs="24" :sm="12" :md="8" :lg="4">
+        <ElCard shadow="hover">
+          <div class="stat-card">
+            <div
+              class="stat-icon"
+              style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
+            >
+              <i class="iconfont-sys">&#xe71f;</i>
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">提现中佣金</div>
+              <div class="stat-value">{{ formatMoney(summary.withdrawing_commission) }}</div>
+            </div>
+          </div>
+        </ElCard>
+      </ElCol>
+      <ElCol :xs="24" :sm="12" :md="8" :lg="4">
+        <ElCard shadow="hover">
+          <div class="stat-card">
+            <div
+              class="stat-icon"
+              style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
+            >
+              <i class="iconfont-sys">&#xe721;</i>
+            </div>
+            <div class="stat-content">
+              <div class="stat-label">已提现佣金</div>
+              <div class="stat-value">{{ formatMoney(summary.withdrawn_commission) }}</div>
+            </div>
+          </div>
+        </ElCard>
+      </ElCol>
+    </ElRow>
+
+    <!-- 标签页 -->
+    <ElCard shadow="never">
+      <ElTabs v-model="activeTab">
+        <!-- 佣金明细 -->
+        <ElTabPane label="佣金明细" name="commission">
+          <!-- 搜索栏 -->
+          <ArtSearchBar
+            v-model:filter="commissionSearchForm"
+            :items="commissionSearchItems"
+            :show-expand="false"
+            @reset="handleCommissionReset"
+            @search="handleCommissionSearch"
+          />
+
+          <!-- 表格头部 -->
+          <ArtTableHeader
+            :columnList="commissionColumnOptions"
+            v-model:columns="commissionColumnChecks"
+            @refresh="handleCommissionRefresh"
+            style="margin-top: 20px"
+          >
+            <template #left>
+              <ElButton type="primary" @click="showWithdrawalDialog">发起提现</ElButton>
+            </template>
+          </ArtTableHeader>
+
+          <!-- 表格 -->
+          <ArtTable
+            ref="commissionTableRef"
+            row-key="id"
+            :loading="commissionLoading"
+            :data="commissionList"
+            :currentPage="commissionPagination.page"
+            :pageSize="commissionPagination.pageSize"
+            :total="commissionPagination.total"
+            :marginTop="10"
+            :height="420"
+            @size-change="handleCommissionSizeChange"
+            @current-change="handleCommissionCurrentChange"
+          >
+            <template #default>
+              <ElTableColumn
+                v-for="col in commissionColumns"
+                :key="col.prop || col.type"
+                v-bind="col"
+              />
+            </template>
+          </ArtTable>
+        </ElTabPane>
+
+        <!-- 提现记录 -->
+        <ElTabPane label="提现记录" name="withdrawal">
+          <!-- 搜索栏 -->
+          <ArtSearchBar
+            v-model:filter="withdrawalSearchForm"
+            :items="withdrawalSearchItems"
+            :show-expand="false"
+            @reset="handleWithdrawalReset"
+            @search="handleWithdrawalSearch"
+          />
+
+          <!-- 表格头部 -->
+          <ArtTableHeader
+            :columnList="withdrawalColumnOptions"
+            v-model:columns="withdrawalColumnChecks"
+            @refresh="handleWithdrawalRefresh"
+            style="margin-top: 20px"
+          />
+
+          <!-- 表格 -->
+          <ArtTable
+            ref="withdrawalTableRef"
+            row-key="id"
+            :loading="withdrawalLoading"
+            :data="withdrawalList"
+            :currentPage="withdrawalPagination.page"
+            :pageSize="withdrawalPagination.pageSize"
+            :total="withdrawalPagination.total"
+            :marginTop="10"
+            :height="500"
+            @size-change="handleWithdrawalSizeChange"
+            @current-change="handleWithdrawalCurrentChange"
+          >
+            <template #default>
+              <ElTableColumn
+                v-for="col in withdrawalColumns"
+                :key="col.prop || col.type"
+                v-bind="col"
+              />
+            </template>
+          </ArtTable>
+        </ElTabPane>
+      </ElTabs>
+    </ElCard>
+
+    <!-- 发起提现对话框 -->
+    <ElDialog
+      v-model="withdrawalDialogVisible"
+      title="发起提现"
+      width="600px"
+      @close="handleDialogClose"
+    >
+      <ElForm
+        ref="withdrawalFormRef"
+        :model="withdrawalForm"
+        :rules="withdrawalRules"
+        label-width="120px"
+      >
+        <ElFormItem label="可提现金额">
+          <span style="font-size: 20px; font-weight: 500; color: var(--el-color-success)">
+            {{ formatMoney(summary.available_commission) }}
+          </span>
+        </ElFormItem>
+        <ElFormItem label="提现金额" prop="amount">
+          <ElInputNumber
+            v-model="withdrawalForm.amount"
+            :min="100"
+            :max="summary.available_commission"
+            :precision="0"
+            :step="100"
+            style="width: 100%"
+            placeholder="请输入提现金额(分)"
+          />
+          <div style="margin-top: 4px; font-size: 12px; color: var(--el-text-color-secondary)">
+            金额单位为分，如1元=100分
+          </div>
+        </ElFormItem>
+        <ElFormItem label="提现方式" prop="withdrawal_method">
+          <ElRadioGroup v-model="withdrawalForm.withdrawal_method">
+            <ElRadio :label="WithdrawalMethod.ALIPAY">支付宝</ElRadio>
+            <ElRadio :label="WithdrawalMethod.WECHAT">微信</ElRadio>
+            <ElRadio :label="WithdrawalMethod.BANK">银行卡</ElRadio>
+          </ElRadioGroup>
+        </ElFormItem>
+
+        <!-- 支付宝/微信 -->
+        <template v-if="withdrawalForm.withdrawal_method !== WithdrawalMethod.BANK">
+          <ElFormItem label="账户名" prop="account_name">
+            <ElInput v-model="withdrawalForm.account_name" placeholder="请输入账户名" />
+          </ElFormItem>
+          <ElFormItem label="账号" prop="account_number">
+            <ElInput v-model="withdrawalForm.account_number" placeholder="请输入账号" />
+          </ElFormItem>
+        </template>
+
+        <!-- 银行卡 -->
+        <template v-if="withdrawalForm.withdrawal_method === WithdrawalMethod.BANK">
+          <ElFormItem label="银行名称" prop="bank_name">
+            <ElSelect
+              v-model="withdrawalForm.bank_name"
+              placeholder="请选择银行"
+              style="width: 100%"
+            >
+              <ElOption label="中国工商银行" value="中国工商银行" />
+              <ElOption label="中国建设银行" value="中国建设银行" />
+              <ElOption label="中国农业银行" value="中国农业银行" />
+              <ElOption label="中国银行" value="中国银行" />
+              <ElOption label="招商银行" value="招商银行" />
+              <ElOption label="交通银行" value="交通银行" />
+              <ElOption label="中国邮政储蓄银行" value="中国邮政储蓄银行" />
+              <ElOption label="其他银行" value="其他银行" />
+            </ElSelect>
+          </ElFormItem>
+          <ElFormItem label="账户名" prop="account_name">
+            <ElInput v-model="withdrawalForm.account_name" placeholder="请输入账户名" />
+          </ElFormItem>
+          <ElFormItem label="卡号" prop="account_number">
+            <ElInput v-model="withdrawalForm.account_number" placeholder="请输入银行卡号" />
+          </ElFormItem>
+        </template>
+
+        <ElFormItem label="备注" prop="remark">
+          <ElInput v-model="withdrawalForm.remark" type="textarea" :rows="3" placeholder="选填" />
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <div class="dialog-footer">
+          <ElButton @click="withdrawalDialogVisible = false">取消</ElButton>
+          <ElButton type="primary" @click="handleSubmitWithdrawal" :loading="submitLoading">
+            提交
+          </ElButton>
+        </div>
+      </template>
+    </ElDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { h } from 'vue'
+  import { CommissionService } from '@/api/modules'
+  import { ElMessage, ElTag } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import type {
+    MyCommissionSummary,
+    MyCommissionRecordItem,
+    WithdrawalRequestItem,
+    CommissionRecordQueryParams,
+    WithdrawalRequestQueryParams,
+    SubmitWithdrawalParams,
+    CommissionType,
+    CommissionStatus,
+    WithdrawalStatus
+  } from '@/types/api/commission'
+  import { WithdrawalMethod } from '@/types/api/commission'
+  import {
+    CommissionStatusMap,
+    CommissionTypeMap,
+    WithdrawalStatusMap,
+    WithdrawalMethodMap
+  } from '@/config/constants/commission'
+  import type { SearchFormItem } from '@/types'
+  import { useCheckedColumns } from '@/composables/useCheckedColumns'
+  import { formatDateTime, formatMoney } from '@/utils/business/format'
+
+  defineOptions({ name: 'MyCommission' })
+
+  // 标签页
+  const activeTab = ref('commission')
+
+  // 佣金概览
+  const summary = ref<MyCommissionSummary>({
+    total_commission: 0,
+    available_commission: 0,
+    frozen_commission: 0,
+    withdrawing_commission: 0,
+    withdrawn_commission: 0
+  })
+
+  // ==================== 佣金明细 ====================
+
+  const commissionLoading = ref(false)
+  const commissionTableRef = ref()
+
+  // 搜索表单初始值
+  const initialCommissionSearchState = {
+    commission_type: undefined as CommissionType | undefined,
+    status: undefined as CommissionStatus | undefined,
+    start_time: '',
+    end_time: ''
+  }
+
+  // 搜索表单
+  const commissionSearchForm = reactive({ ...initialCommissionSearchState })
+
+  // 搜索表单配置
+  const commissionSearchItems = computed<SearchFormItem[]>(() => [
+    {
+      label: '佣金类型',
+      prop: 'commission_type',
+      type: 'select',
+      options: [
+        { label: '一次性佣金', value: 'one_time' },
+        { label: '长期佣金', value: 'long_term' }
+      ],
+      config: {
+        clearable: true,
+        placeholder: '请选择佣金类型'
+      }
+    },
+    {
+      label: '状态',
+      prop: 'status',
+      type: 'select',
+      options: [
+        { label: '已冻结', value: 1 },
+        { label: '解冻中', value: 2 },
+        { label: '已发放', value: 3 },
+        { label: '已失效', value: 4 }
+      ],
+      config: {
+        clearable: true,
+        placeholder: '请选择状态'
+      }
+    },
+    {
+      label: '时间范围',
+      prop: 'dateRange',
+      type: 'date',
+      config: {
+        type: 'daterange',
+        clearable: true,
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        startPlaceholder: '开始日期',
+        endPlaceholder: '结束日期'
+      },
+      onChange: ({ val }: { prop: string; val: any }) => {
+        if (val && val.length === 2) {
+          commissionSearchForm.start_time = val[0]
+          commissionSearchForm.end_time = val[1]
+        } else {
+          commissionSearchForm.start_time = ''
+          commissionSearchForm.end_time = ''
+        }
+      }
+    }
+  ])
+
+  // 分页
+  const commissionPagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  })
+
+  // 列配置
+  const commissionColumnOptions = [
+    { label: 'ID', prop: 'id' },
+    { label: '佣金金额', prop: 'amount' },
+    { label: '佣金类型', prop: 'commission_type' },
+    { label: '状态', prop: 'status' },
+    { label: '订单ID', prop: 'order_id' },
+    { label: '创建时间', prop: 'created_at' }
+  ]
+
+  const commissionList = ref<MyCommissionRecordItem[]>([])
+
+  // 动态列配置
+  const { columnChecks: commissionColumnChecks, columns: commissionColumns } = useCheckedColumns(
+    () => [
+      {
+        prop: 'id',
+        label: 'ID',
+        width: 80
+      },
+      {
+        prop: 'amount',
+        label: '佣金金额',
+        width: 140,
+        formatter: (row: MyCommissionRecordItem) => formatMoney(row.amount)
+      },
+      {
+        prop: 'commission_type',
+        label: '佣金类型',
+        width: 120,
+        formatter: (row: MyCommissionRecordItem) => {
+          const config = CommissionTypeMap[row.commission_type as keyof typeof CommissionTypeMap]
+          return h(ElTag, { type: config.type }, () => config.label)
+        }
+      },
+      {
+        prop: 'status',
+        label: '状态',
+        width: 100,
+        formatter: (row: MyCommissionRecordItem) => {
+          const config = CommissionStatusMap[row.status as keyof typeof CommissionStatusMap]
+          return h(ElTag, { type: config.type }, () => config.label)
+        }
+      },
+      {
+        prop: 'order_id',
+        label: '订单ID',
+        width: 100,
+        formatter: (row: MyCommissionRecordItem) => row.order_id || '-'
+      },
+      {
+        prop: 'shop_id',
+        label: '店铺ID',
+        width: 100
+      },
+      {
+        prop: 'created_at',
+        label: '创建时间',
+        width: 180,
+        formatter: (row: MyCommissionRecordItem) => formatDateTime(row.created_at)
+      }
+    ]
+  )
+
+  // 获取佣金明细
+  const getCommissionList = async () => {
+    commissionLoading.value = true
+    try {
+      const params = {
+        pageSize: commissionPagination.pageSize,
+        current: commissionPagination.page,
+        commission_type: commissionSearchForm.commission_type,
+        status: commissionSearchForm.status,
+        start_time: commissionSearchForm.start_time || undefined,
+        end_time: commissionSearchForm.end_time || undefined
+      } as CommissionRecordQueryParams
+      const res = await CommissionService.getMyCommissionRecords(params)
+      if (res.code === 0) {
+        commissionList.value = res.data.items || []
+        commissionPagination.total = res.data.total || 0
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      commissionLoading.value = false
+    }
+  }
+
+  // 重置搜索
+  const handleCommissionReset = () => {
+    Object.assign(commissionSearchForm, { ...initialCommissionSearchState })
+    commissionPagination.page = 1
+    getCommissionList()
+  }
+
+  // 搜索
+  const handleCommissionSearch = () => {
+    commissionPagination.page = 1
+    getCommissionList()
+  }
+
+  // 刷新表格
+  const handleCommissionRefresh = () => {
+    getCommissionList()
+  }
+
+  // 处理表格分页变化
+  const handleCommissionSizeChange = (newPageSize: number) => {
+    commissionPagination.pageSize = newPageSize
+    getCommissionList()
+  }
+
+  const handleCommissionCurrentChange = (newCurrentPage: number) => {
+    commissionPagination.page = newCurrentPage
+    getCommissionList()
+  }
+
+  // ==================== 提现记录 ====================
+
+  const withdrawalLoading = ref(false)
+  const withdrawalTableRef = ref()
+
+  // 搜索表单初始值
+  const initialWithdrawalSearchState = {
+    status: undefined as WithdrawalStatus | undefined,
+    start_time: '',
+    end_time: ''
+  }
+
+  // 搜索表单
+  const withdrawalSearchForm = reactive({ ...initialWithdrawalSearchState })
+
+  // 搜索表单配置
+  const withdrawalSearchItems = computed<SearchFormItem[]>(() => [
+    {
+      label: '状态',
+      prop: 'status',
+      type: 'select',
+      options: [
+        { label: '待审核', value: 1 },
+        { label: '已通过', value: 2 },
+        { label: '已拒绝', value: 3 },
+        { label: '已到账', value: 4 }
+      ],
+      config: {
+        clearable: true,
+        placeholder: '请选择状态'
+      }
+    },
+    {
+      label: '时间范围',
+      prop: 'dateRange',
+      type: 'date',
+      config: {
+        type: 'daterange',
+        clearable: true,
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        startPlaceholder: '开始日期',
+        endPlaceholder: '结束日期'
+      },
+      onChange: ({ val }: { prop: string; val: any }) => {
+        if (val && val.length === 2) {
+          withdrawalSearchForm.start_time = val[0]
+          withdrawalSearchForm.end_time = val[1]
+        } else {
+          withdrawalSearchForm.start_time = ''
+          withdrawalSearchForm.end_time = ''
+        }
+      }
+    }
+  ])
+
+  // 分页
+  const withdrawalPagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  })
+
+  // 列配置
+  const withdrawalColumnOptions = [
+    { label: 'ID', prop: 'id' },
+    { label: '提现单号', prop: 'withdrawal_no' },
+    { label: '金额', prop: 'amount' },
+    { label: '手续费', prop: 'fee' },
+    { label: '实际到账', prop: 'actual_amount' },
+    { label: '提现方式', prop: 'withdrawal_method' },
+    { label: '状态', prop: 'status' },
+    { label: '申请时间', prop: 'created_at' }
+  ]
+
+  const withdrawalList = ref<WithdrawalRequestItem[]>([])
+
+  // 动态列配置
+  const { columnChecks: withdrawalColumnChecks, columns: withdrawalColumns } = useCheckedColumns(
+    () => [
+      {
+        prop: 'id',
+        label: 'ID',
+        width: 80
+      },
+      {
+        prop: 'withdrawal_no',
+        label: '提现单号',
+        minWidth: 160
+      },
+      {
+        prop: 'amount',
+        label: '金额',
+        width: 120,
+        formatter: (row: WithdrawalRequestItem) => formatMoney(row.amount)
+      },
+      {
+        prop: 'fee',
+        label: '手续费',
+        width: 100,
+        formatter: (row: WithdrawalRequestItem) => formatMoney(row.fee)
+      },
+      {
+        prop: 'actual_amount',
+        label: '实际到账',
+        width: 120,
+        formatter: (row: WithdrawalRequestItem) => formatMoney(row.actual_amount)
+      },
+      {
+        prop: 'withdrawal_method',
+        label: '提现方式',
+        width: 100,
+        formatter: (row: WithdrawalRequestItem) => {
+          const config =
+            WithdrawalMethodMap[row.withdrawal_method as keyof typeof WithdrawalMethodMap]
+          return config ? config.label : row.withdrawal_method
+        }
+      },
+      {
+        prop: 'status',
+        label: '状态',
+        width: 100,
+        formatter: (row: WithdrawalRequestItem) => {
+          const config = WithdrawalStatusMap[row.status as keyof typeof WithdrawalStatusMap]
+          return h(ElTag, { type: config.type }, () => config.label)
+        }
+      },
+      {
+        prop: 'created_at',
+        label: '申请时间',
+        width: 180,
+        formatter: (row: WithdrawalRequestItem) => formatDateTime(row.created_at)
+      }
+    ]
+  )
+
+  // 获取提现记录
+  const getWithdrawalList = async () => {
+    withdrawalLoading.value = true
+    try {
+      const params = {
+        pageSize: withdrawalPagination.pageSize,
+        current: withdrawalPagination.page,
+        status: withdrawalSearchForm.status,
+        start_time: withdrawalSearchForm.start_time || undefined,
+        end_time: withdrawalSearchForm.end_time || undefined
+      } as WithdrawalRequestQueryParams
+      const res = await CommissionService.getMyWithdrawalRequests(params)
+      if (res.code === 0) {
+        withdrawalList.value = res.data.items || []
+        withdrawalPagination.total = res.data.total || 0
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      withdrawalLoading.value = false
+    }
+  }
+
+  // 重置搜索
+  const handleWithdrawalReset = () => {
+    Object.assign(withdrawalSearchForm, { ...initialWithdrawalSearchState })
+    withdrawalPagination.page = 1
+    getWithdrawalList()
+  }
+
+  // 搜索
+  const handleWithdrawalSearch = () => {
+    withdrawalPagination.page = 1
+    getWithdrawalList()
+  }
+
+  // 刷新表格
+  const handleWithdrawalRefresh = () => {
+    getWithdrawalList()
+  }
+
+  // 处理表格分页变化
+  const handleWithdrawalSizeChange = (newPageSize: number) => {
+    withdrawalPagination.pageSize = newPageSize
+    getWithdrawalList()
+  }
+
+  const handleWithdrawalCurrentChange = (newCurrentPage: number) => {
+    withdrawalPagination.page = newCurrentPage
+    getWithdrawalList()
+  }
+
+  // ==================== 发起提现 ====================
+
+  const withdrawalDialogVisible = ref(false)
+  const submitLoading = ref(false)
+  const withdrawalFormRef = ref<FormInstance>()
+
+  // 提现表单
+  const withdrawalForm = reactive<SubmitWithdrawalParams>({
+    amount: 0,
+    withdrawal_method: WithdrawalMethod.ALIPAY,
+    account_name: '',
+    account_number: '',
+    bank_name: '',
+    remark: ''
+  })
+
+  // 提现表单验证规则
+  const withdrawalRules = reactive<FormRules>({
+    amount: [
+      { required: true, message: '请输入提现金额', trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          if (value < 100) {
+            callback(new Error('提现金额不能小于100分（1元）'))
+          } else if (value > summary.value.available_commission) {
+            callback(new Error('提现金额不能大于可提现佣金'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'blur'
+      }
+    ],
+    withdrawal_method: [{ required: true, message: '请选择提现方式', trigger: 'change' }],
+    account_name: [
+      { required: true, message: '请输入账户名', trigger: 'blur' },
+      { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
+    ],
+    account_number: [
+      { required: true, message: '请输入账号', trigger: 'blur' },
+      { min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur' }
+    ],
+    bank_name: [
+      {
+        validator: (rule, value, callback) => {
+          if (withdrawalForm.withdrawal_method === WithdrawalMethod.BANK && !value) {
+            callback(new Error('请选择银行名称'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'change'
+      }
+    ]
+  })
+
+  // 显示提现对话框
+  const showWithdrawalDialog = () => {
+    if (summary.value.available_commission < 100) {
+      ElMessage.warning('可提现佣金不足100分（1元），无法发起提现')
+      return
+    }
+    withdrawalDialogVisible.value = true
+  }
+
+  // 关闭对话框
+  const handleDialogClose = () => {
+    withdrawalFormRef.value?.resetFields()
+    withdrawalForm.amount = 0
+    withdrawalForm.withdrawal_method = WithdrawalMethod.ALIPAY
+    withdrawalForm.account_name = ''
+    withdrawalForm.account_number = ''
+    withdrawalForm.bank_name = ''
+    withdrawalForm.remark = ''
+  }
+
+  // 提交提现申请
+  const handleSubmitWithdrawal = async () => {
+    if (!withdrawalFormRef.value) return
+
+    await withdrawalFormRef.value.validate(async (valid) => {
+      if (valid) {
+        submitLoading.value = true
+        try {
+          const params: SubmitWithdrawalParams = {
+            amount: withdrawalForm.amount,
+            withdrawal_method: withdrawalForm.withdrawal_method,
+            account_name: withdrawalForm.account_name,
+            account_number: withdrawalForm.account_number,
+            remark: withdrawalForm.remark
+          }
+
+          // 如果是银行卡提现，添加银行名称
+          if (withdrawalForm.withdrawal_method === WithdrawalMethod.BANK) {
+            params.bank_name = withdrawalForm.bank_name
+          }
+
+          await CommissionService.submitWithdrawalRequest(params)
+          ElMessage.success('提现申请提交成功')
+          withdrawalDialogVisible.value = false
+
+          // 刷新数据
+          loadSummary()
+          if (activeTab.value === 'withdrawal') {
+            getWithdrawalList()
+          }
+        } catch (error) {
+          console.error(error)
+        } finally {
+          submitLoading.value = false
+        }
+      }
+    })
+  }
+
+  // ==================== 初始化 ====================
+
+  // 加载佣金概览
+  const loadSummary = async () => {
+    try {
+      const res = await CommissionService.getMyCommissionSummary()
+      if (res.code === 0) {
+        summary.value = res.data
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  // 监听标签页切换
+  watch(activeTab, (newTab) => {
+    if (newTab === 'commission') {
+      getCommissionList()
+    } else if (newTab === 'withdrawal') {
+      getWithdrawalList()
+    }
+  })
+
+  onMounted(() => {
+    loadSummary()
+    getCommissionList()
+  })
+</script>
+
+<style lang="scss" scoped>
+  .my-commission-page {
+    .stat-card {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+
+      .stat-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 60px;
+        height: 60px;
+        font-size: 28px;
+        color: white;
+        border-radius: 12px;
+      }
+
+      .stat-content {
+        flex: 1;
+
+        .stat-label {
+          margin-bottom: 8px;
+          font-size: 14px;
+          color: var(--el-text-color-secondary);
+        }
+
+        .stat-value {
+          font-size: 20px;
+          font-weight: 600;
+          color: var(--el-text-color-primary);
+        }
+      }
+    }
+  }
+</style>

src/views/finance/commission/withdrawal-approval/index.vue

@@ -0,0 +1,425 @@
+<template>
+  <ArtTableFullScreen>
+    <div class="withdrawal-approval-page" id="table-full-screen">
+      <!-- 搜索栏 -->
+      <ArtSearchBar
+        v-model:filter="searchForm"
+        :items="searchFormItems"
+        :show-expand="false"
+        @reset="handleReset"
+        @search="handleSearch"
+      ></ArtSearchBar>
+
+      <ElCard shadow="never" class="art-table-card">
+        <!-- 表格头部 -->
+        <ArtTableHeader
+          :columnList="columnOptions"
+          v-model:columns="columnChecks"
+          @refresh="handleRefresh"
+        >
+        </ArtTableHeader>
+
+        <!-- 表格 -->
+        <ArtTable
+          ref="tableRef"
+          row-key="id"
+          :loading="loading"
+          :data="withdrawalList"
+          :currentPage="pagination.page"
+          :pageSize="pagination.pageSize"
+          :total="pagination.total"
+          :marginTop="10"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+          <template #default>
+            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+          </template>
+        </ArtTable>
+
+        <!-- 拒绝提现对话框 -->
+        <ElDialog
+          v-model="rejectDialogVisible"
+          :title="$t('commission.dialog.reject')"
+          width="500px"
+        >
+          <ElForm ref="rejectFormRef" :model="rejectForm" :rules="rejectRules" label-width="100px">
+            <ElFormItem :label="$t('commission.form.rejectReason')" prop="reject_reason">
+              <ElInput
+                v-model="rejectForm.reject_reason"
+                type="textarea"
+                :rows="4"
+                :placeholder="$t('commission.form.rejectReasonPlaceholder')"
+              />
+            </ElFormItem>
+            <ElFormItem :label="$t('commission.form.remark')" prop="remark">
+              <ElInput
+                v-model="rejectForm.remark"
+                type="textarea"
+                :rows="3"
+                :placeholder="$t('commission.form.remarkPlaceholder')"
+              />
+            </ElFormItem>
+          </ElForm>
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton @click="rejectDialogVisible = false">{{ $t('common.cancel') }}</ElButton>
+              <ElButton type="primary" @click="handleRejectSubmit" :loading="rejectSubmitLoading">
+                {{ $t('common.confirm') }}
+              </ElButton>
+            </div>
+          </template>
+        </ElDialog>
+      </ElCard>
+    </div>
+  </ArtTableFullScreen>
+</template>
+
+<script setup lang="ts">
+  import { h } from 'vue'
+  import { CommissionService } from '@/api/modules'
+  import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import type {
+    WithdrawalRequestItem,
+    WithdrawalStatus,
+    WithdrawalMethod
+  } from '@/types/api/commission'
+  import type { SearchFormItem } from '@/types'
+  import { useCheckedColumns } from '@/composables/useCheckedColumns'
+  import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
+  import { formatDateTime, formatMoney } from '@/utils/business/format'
+  import { WithdrawalStatusMap, WithdrawalMethodMap } from '@/config/constants'
+  import { useI18n } from 'vue-i18n'
+
+  defineOptions({ name: 'WithdrawalApproval' })
+
+  const { t } = useI18n()
+
+  const rejectDialogVisible = ref(false)
+  const loading = ref(false)
+  const rejectSubmitLoading = ref(false)
+  const tableRef = ref()
+  const currentWithdrawalId = ref<number>(0)
+
+  // 搜索表单初始值
+  const initialSearchState = {
+    withdrawal_no: '',
+    shop_name: '',
+    status: undefined as WithdrawalStatus | undefined,
+    start_time: '',
+    end_time: ''
+  }
+
+  // 搜索表单
+  const searchForm = reactive({ ...initialSearchState })
+
+  // 提现状态选项
+  const withdrawalStatusOptions = [
+    { label: t('commission.status.pending'), value: 1 },
+    { label: t('commission.status.approved'), value: 2 },
+    { label: t('commission.status.rejected'), value: 3 },
+    { label: t('commission.status.completed'), value: 4 }
+  ]
+
+  // 搜索表单配置
+  const searchFormItems: SearchFormItem[] = [
+    {
+      label: t('commission.searchForm.status'),
+      prop: 'status',
+      type: 'select',
+      options: withdrawalStatusOptions,
+      config: {
+        clearable: true,
+        placeholder: t('commission.searchForm.statusPlaceholder')
+      }
+    },
+    {
+      label: t('commission.searchForm.withdrawalNo'),
+      prop: 'withdrawal_no',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: t('commission.searchForm.withdrawalNoPlaceholder')
+      }
+    },
+    {
+      label: t('commission.searchForm.shopName'),
+      prop: 'shop_name',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: t('commission.searchForm.shopNamePlaceholder')
+      }
+    },
+    {
+      label: t('commission.searchForm.dateRange'),
+      prop: 'dateRange',
+      type: 'daterange',
+      config: {
+        clearable: true,
+        startPlaceholder: t('commission.searchForm.dateRangePlaceholder.0'),
+        endPlaceholder: t('commission.searchForm.dateRangePlaceholder.1'),
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        onChange: (val: [string, string] | null) => {
+          if (val && val.length === 2) {
+            searchForm.start_time = val[0]
+            searchForm.end_time = val[1]
+          } else {
+            searchForm.start_time = ''
+            searchForm.end_time = ''
+          }
+        }
+      }
+    }
+  ]
+
+  // 分页
+  const pagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  })
+
+  // 列配置
+  const columnOptions = [
+    { label: t('commission.table.withdrawalNo'), prop: 'withdrawal_no' },
+    { label: t('commission.table.shopName'), prop: 'shop_name' },
+    { label: t('commission.table.applicant'), prop: 'applicant_name' },
+    { label: t('commission.table.withdrawalAmount'), prop: 'amount' },
+    { label: t('commission.table.fee'), prop: 'fee' },
+    { label: t('commission.table.actualAmount'), prop: 'actual_amount' },
+    { label: t('commission.table.withdrawalMethod'), prop: 'withdrawal_method' },
+    { label: t('commission.table.status'), prop: 'status' },
+    { label: t('commission.table.applyTime'), prop: 'created_at' },
+    { label: t('commission.table.approveTime'), prop: 'processed_at' },
+    { label: t('commission.table.actions'), prop: 'operation' }
+  ]
+
+  const rejectFormRef = ref<FormInstance>()
+
+  const rejectRules = reactive<FormRules>({
+    reject_reason: [
+      { required: true, message: t('commission.validation.rejectReasonRequired'), trigger: 'blur' }
+    ]
+  })
+
+  const rejectForm = reactive({
+    reject_reason: '',
+    remark: ''
+  })
+
+  const withdrawalList = ref<WithdrawalRequestItem[]>([])
+
+  // 动态列配置
+  const { columnChecks, columns } = useCheckedColumns(() => [
+    {
+      prop: 'withdrawal_no',
+      label: t('commission.table.withdrawalNo'),
+      minWidth: 180
+    },
+    {
+      prop: 'shop_name',
+      label: t('commission.table.shopName'),
+      minWidth: 150
+    },
+    {
+      prop: 'applicant_name',
+      label: t('commission.table.applicant'),
+      width: 120
+    },
+    {
+      prop: 'amount',
+      label: t('commission.table.withdrawalAmount'),
+      width: 120,
+      align: 'right',
+      formatter: (row: WithdrawalRequestItem) => formatMoney(row.amount)
+    },
+    {
+      prop: 'fee',
+      label: t('commission.table.fee'),
+      width: 100,
+      align: 'right',
+      formatter: (row: WithdrawalRequestItem) => formatMoney(row.fee)
+    },
+    {
+      prop: 'actual_amount',
+      label: t('commission.table.actualAmount'),
+      width: 120,
+      align: 'right',
+      formatter: (row: WithdrawalRequestItem) => formatMoney(row.actual_amount)
+    },
+    {
+      prop: 'withdrawal_method',
+      label: t('commission.table.withdrawalMethod'),
+      width: 120,
+      formatter: (row: WithdrawalRequestItem) => {
+        const method = WithdrawalMethodMap[row.withdrawal_method as WithdrawalMethod]
+        return method?.label || row.withdrawal_method
+      }
+    },
+    {
+      prop: 'status',
+      label: t('commission.table.status'),
+      width: 100,
+      formatter: (row: WithdrawalRequestItem) => {
+        const statusInfo = WithdrawalStatusMap[row.status as keyof typeof WithdrawalStatusMap]
+        return h(ElTag, { type: statusInfo?.type || 'info' }, () => statusInfo?.label || '未知')
+      }
+    },
+    {
+      prop: 'created_at',
+      label: t('commission.table.applyTime'),
+      width: 180,
+      formatter: (row: WithdrawalRequestItem) => formatDateTime(row.created_at)
+    },
+    {
+      prop: 'processed_at',
+      label: t('commission.table.approveTime'),
+      width: 180,
+      formatter: (row: WithdrawalRequestItem) => formatDateTime(row.processed_at)
+    },
+    {
+      prop: 'operation',
+      label: t('commission.table.actions'),
+      width: 150,
+      fixed: 'right',
+      formatter: (row: WithdrawalRequestItem) => {
+        // 只有待审核状态才显示操作按钮
+        if (row.status === 1) {
+          return h('div', { style: 'display: flex; gap: 8px;' }, [
+            h(ArtButtonTable, {
+              text: t('commission.buttons.approve'),
+              iconColor: '#67C23A',
+              onClick: () => handleApprove(row)
+            }),
+            h(ArtButtonTable, {
+              text: t('commission.buttons.reject'),
+              iconColor: '#F56C6C',
+              onClick: () => showRejectDialog(row)
+            })
+          ])
+        }
+        return '-'
+      }
+    }
+  ])
+
+  onMounted(() => {
+    getTableData()
+  })
+
+  // 获取提现申请列表
+  const getTableData = async () => {
+    loading.value = true
+    try {
+      const params = {
+        page: pagination.page,
+        pageSize: pagination.pageSize,
+        withdrawal_no: searchForm.withdrawal_no || undefined,
+        shop_name: searchForm.shop_name || undefined,
+        status: searchForm.status,
+        start_time: searchForm.start_time || undefined,
+        end_time: searchForm.end_time || undefined
+      }
+      const res = await CommissionService.getWithdrawalRequests(params)
+      if (res.code === 0) {
+        withdrawalList.value = res.data.items || []
+        pagination.total = res.data.total || 0
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 重置搜索
+  const handleReset = () => {
+    Object.assign(searchForm, { ...initialSearchState })
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 搜索
+  const handleSearch = () => {
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 刷新表格
+  const handleRefresh = () => {
+    getTableData()
+  }
+
+  // 处理表格分页变化
+  const handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    getTableData()
+  }
+
+  const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.page = newCurrentPage
+    getTableData()
+  }
+
+  // 审批通过
+  const handleApprove = (row: WithdrawalRequestItem) => {
+    ElMessageBox.confirm(t('commission.messages.approveConfirm'), t('common.tips'), {
+      confirmButtonText: t('common.confirm'),
+      cancelButtonText: t('common.cancel'),
+      type: 'warning'
+    })
+      .then(async () => {
+        try {
+          await CommissionService.approveWithdrawal(row.id)
+          ElMessage.success(t('commission.messages.approveSuccess'))
+          getTableData()
+        } catch (error) {
+          console.error(error)
+        }
+      })
+      .catch(() => {
+        // 用户取消
+      })
+  }
+
+  // 显示拒绝对话框
+  const showRejectDialog = (row: WithdrawalRequestItem) => {
+    currentWithdrawalId.value = row.id
+    rejectForm.reject_reason = ''
+    rejectForm.remark = ''
+    rejectDialogVisible.value = true
+  }
+
+  // 提交拒绝
+  const handleRejectSubmit = async () => {
+    if (!rejectFormRef.value) return
+
+    await rejectFormRef.value.validate(async (valid) => {
+      if (valid) {
+        rejectSubmitLoading.value = true
+        try {
+          await CommissionService.rejectWithdrawal(currentWithdrawalId.value, {
+            reject_reason: rejectForm.reject_reason,
+            remark: rejectForm.remark || undefined
+          })
+          ElMessage.success(t('commission.messages.rejectSuccess'))
+          rejectDialogVisible.value = false
+          rejectFormRef.value?.resetFields()
+          getTableData()
+        } catch (error) {
+          console.error(error)
+        } finally {
+          rejectSubmitLoading.value = false
+        }
+      }
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .withdrawal-approval-page {
+    // 可以在这里添加提现审批页面特定样式
+  }
+</style>

src/views/finance/commission/withdrawal-settings/index.vue

@@ -0,0 +1,453 @@
+<template>
+  <ArtTableFullScreen>
+    <div class="withdrawal-settings-page" id="table-full-screen">
+      <!-- 当前生效配置卡片 -->
+      <ElCard shadow="never" class="current-setting-card" v-if="currentSetting">
+        <template #header>
+          <div class="card-header">
+            <div class="header-left">
+              <span class="header-title">当前生效配置</span>
+              <ElTag type="success" effect="dark">生效中</ElTag>
+            </div>
+            <div class="header-right">
+              <span class="creator-info"
+                >{{ currentSetting.creator_name || '-' }} 创建于
+                {{ formatDateTime(currentSetting.created_at) }}</span
+              >
+            </div>
+          </div>
+        </template>
+        <div class="setting-info">
+          <div class="info-card">
+            <div
+              class="info-icon"
+              style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+            >
+              <i class="el-icon">💰</i>
+            </div>
+            <div class="info-content">
+              <div class="info-label">最低提现金额</div>
+              <div class="info-value">{{ formatMoney(currentSetting.min_withdrawal_amount) }}</div>
+            </div>
+          </div>
+          <div class="info-card">
+            <div
+              class="info-icon"
+              style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
+            >
+              <i class="el-icon">📊</i>
+            </div>
+            <div class="info-content">
+              <div class="info-label">手续费率</div>
+              <div class="info-value">{{ formatFeeRate(currentSetting.fee_rate) }}</div>
+            </div>
+          </div>
+          <div class="info-card">
+            <div
+              class="info-icon"
+              style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
+            >
+              <i class="el-icon">🔢</i>
+            </div>
+            <div class="info-content">
+              <div class="info-label">每日提现次数</div>
+              <div class="info-value">{{ currentSetting.daily_withdrawal_limit }} 次</div>
+            </div>
+          </div>
+          <div class="info-card">
+            <div
+              class="info-icon"
+              style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
+            >
+              <i class="el-icon">⏰</i>
+            </div>
+            <div class="info-content">
+              <div class="info-label">到账天数</div>
+              <div class="info-value">{{
+                currentSetting.arrival_days === 0 ? '实时到账' : `${currentSetting.arrival_days} 天`
+              }}</div>
+            </div>
+          </div>
+        </div>
+      </ElCard>
+
+      <!-- 配置列表 -->
+      <ElCard shadow="never" class="art-table-card" style="margin-top: 20px">
+        <!-- 表格头部 -->
+        <ArtTableHeader
+          :columnList="columnOptions"
+          v-model:columns="columnChecks"
+          @refresh="handleRefresh"
+        >
+          <template #left>
+            <ElButton type="primary" @click="showDialog">新增配置</ElButton>
+          </template>
+        </ArtTableHeader>
+
+        <!-- 表格 -->
+        <ArtTable
+          ref="tableRef"
+          row-key="id"
+          :loading="loading"
+          :data="settingsList"
+          :marginTop="10"
+        >
+          <template #default>
+            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+          </template>
+        </ArtTable>
+      </ElCard>
+
+      <!-- 新增配置对话框 -->
+      <ElDialog v-model="dialogVisible" title="新增提现配置" width="500px">
+        <ElForm ref="formRef" :model="form" :rules="rules" label-width="100px">
+          <ElFormItem label="最低提现金额" prop="min_withdrawal_amount">
+            <ElInputNumber
+              v-model="form.min_withdrawal_amount"
+              :min="1"
+              :precision="2"
+              :step="10"
+              style="width: 100%"
+            />
+            <div class="form-tip">单位：元</div>
+          </ElFormItem>
+
+          <ElFormItem label="手续费率" prop="fee_rate">
+            <ElInputNumber
+              v-model="form.fee_rate"
+              :min="0"
+              :max="100"
+              :precision="2"
+              :step="0.1"
+              style="width: 100%"
+            />
+            <div class="form-tip">单位：%（百分比）</div>
+          </ElFormItem>
+
+          <ElFormItem label="每日提现次数" prop="daily_withdrawal_limit">
+            <ElInputNumber
+              v-model="form.daily_withdrawal_limit"
+              :min="1"
+              :max="100"
+              :step="1"
+              style="width: 100%"
+            />
+            <div class="form-tip">单位：次</div>
+          </ElFormItem>
+
+          <ElFormItem label="到账天数" prop="arrival_days">
+            <ElInputNumber
+              v-model="form.arrival_days"
+              :min="0"
+              :max="30"
+              :step="1"
+              style="width: 100%"
+            />
+            <div class="form-tip">单位：天（0表示实时到账）</div>
+          </ElFormItem>
+        </ElForm>
+        <template #footer>
+          <div class="dialog-footer">
+            <ElButton @click="dialogVisible = false">取消</ElButton>
+            <ElButton type="primary" @click="handleSubmit(formRef)" :loading="submitLoading">
+              提交
+            </ElButton>
+          </div>
+        </template>
+      </ElDialog>
+    </div>
+  </ArtTableFullScreen>
+</template>
+
+<script setup lang="ts">
+  import { h } from 'vue'
+  import { CommissionService } from '@/api/modules'
+  import { ElMessage, ElTag } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import type { WithdrawalSettingItem } from '@/types/api/commission'
+  import { useCheckedColumns } from '@/composables/useCheckedColumns'
+  import { formatDateTime, formatMoney, formatFeeRate } from '@/utils/business/format'
+
+  defineOptions({ name: 'CommissionWithdrawalSettings' })
+
+  const dialogVisible = ref(false)
+  const loading = ref(false)
+  const submitLoading = ref(false)
+  const tableRef = ref()
+  const formRef = ref<FormInstance>()
+
+  // 当前生效的配置
+  const currentSetting = ref<WithdrawalSettingItem | null>(null)
+
+  // 配置列表
+  const settingsList = ref<WithdrawalSettingItem[]>([])
+
+  // 表单数据（使用元和百分比）
+  const form = reactive({
+    min_withdrawal_amount: 100,
+    fee_rate: 0.2,
+    daily_withdrawal_limit: 3,
+    arrival_days: 1
+  })
+
+  // 表单验证规则
+  const rules = reactive<FormRules>({
+    min_withdrawal_amount: [
+      { required: true, message: '请输入最低提现金额', trigger: 'blur' },
+      { type: 'number', min: 1, message: '最低提现金额必须大于0', trigger: 'blur' }
+    ],
+    fee_rate: [
+      { required: true, message: '请输入手续费率', trigger: 'blur' },
+      { type: 'number', min: 0, max: 100, message: '手续费率必须在0-100之间', trigger: 'blur' }
+    ],
+    daily_withdrawal_limit: [
+      { required: true, message: '请输入每日提现次数', trigger: 'blur' },
+      { type: 'number', min: 1, message: '每日提现次数必须大于0', trigger: 'blur' }
+    ],
+    arrival_days: [
+      { required: true, message: '请输入到账天数', trigger: 'blur' },
+      { type: 'number', min: 0, message: '到账天数不能为负数', trigger: 'blur' }
+    ]
+  })
+
+  // 列配置
+  const columnOptions = [
+    { label: '最低提现金额', prop: 'min_withdrawal_amount' },
+    { label: '手续费率', prop: 'fee_rate' },
+    { label: '每日提现次数', prop: 'daily_withdrawal_limit' },
+    { label: '到账天数', prop: 'arrival_days' },
+    { label: '是否生效', prop: 'is_active' },
+    { label: '创建人', prop: 'creator_name' },
+    { label: '创建时间', prop: 'created_at' }
+  ]
+
+  // 动态列配置
+  const { columnChecks, columns } = useCheckedColumns(() => [
+    {
+      prop: 'min_withdrawal_amount',
+      label: '最低提现金额',
+      formatter: (row: WithdrawalSettingItem) => formatMoney(row.min_withdrawal_amount)
+    },
+    {
+      prop: 'fee_rate',
+      label: '手续费率',
+      formatter: (row: WithdrawalSettingItem) => formatFeeRate(row.fee_rate)
+    },
+    {
+      prop: 'daily_withdrawal_limit',
+      label: '每日提现次数',
+      formatter: (row: WithdrawalSettingItem) => `${row.daily_withdrawal_limit} 次`
+    },
+    {
+      prop: 'arrival_days',
+      label: '到账天数',
+      formatter: (row: WithdrawalSettingItem) => {
+        return row.arrival_days === 0 ? '实时到账' : `${row.arrival_days} 天`
+      }
+    },
+    {
+      prop: 'is_active',
+      label: '是否生效',
+      formatter: (row: WithdrawalSettingItem) => {
+        return h(ElTag, { type: row.is_active ? 'success' : 'info' }, () =>
+          row.is_active ? '生效中' : '已失效'
+        )
+      }
+    },
+    {
+      prop: 'creator_name',
+      label: '创建人',
+      formatter: (row: WithdrawalSettingItem) => row.creator_name || '-'
+    },
+    {
+      prop: 'created_at',
+      label: '创建时间',
+      formatter: (row: WithdrawalSettingItem) => formatDateTime(row.created_at)
+    }
+  ])
+
+  onMounted(() => {
+    loadData()
+  })
+
+  // 加载数据
+  const loadData = async () => {
+    await Promise.all([loadCurrentSetting(), loadSettingsList()])
+  }
+
+  // 加载当前生效配置
+  const loadCurrentSetting = async () => {
+    try {
+      const res = await CommissionService.getCurrentWithdrawalSetting()
+      if (res.code === 0 && res.data) {
+        currentSetting.value = res.data
+      }
+    } catch (error) {
+      console.error('获取当前配置失败:', error)
+    }
+  }
+
+  // 加载配置列表
+  const loadSettingsList = async () => {
+    loading.value = true
+    try {
+      const res = await CommissionService.getWithdrawalSettings()
+      if (res.code === 0) {
+        settingsList.value = res.data.items || []
+      }
+    } catch (error) {
+      console.error('获取配置列表失败:', error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 刷新数据
+  const handleRefresh = () => {
+    loadData()
+  }
+
+  // 显示新增对话框
+  const showDialog = () => {
+    dialogVisible.value = true
+    // 重置表单
+    form.min_withdrawal_amount = 100
+    form.fee_rate = 0.2
+    form.daily_withdrawal_limit = 3
+    form.arrival_days = 1
+    formRef.value?.clearValidate()
+  }
+
+  // 提交表单
+  const handleSubmit = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+
+    await formEl.validate(async (valid) => {
+      if (valid) {
+        submitLoading.value = true
+        try {
+          // 转换单位：元 -> 分，百分比 -> 基点
+          const params = {
+            min_withdrawal_amount: Math.round(form.min_withdrawal_amount * 100), // 元转分
+            fee_rate: Math.round(form.fee_rate * 100), // 百分比转基点
+            daily_withdrawal_limit: form.daily_withdrawal_limit,
+            arrival_days: form.arrival_days
+          }
+
+          await CommissionService.createWithdrawalSetting(params)
+          ElMessage.success('新增配置成功')
+          dialogVisible.value = false
+          formEl.resetFields()
+          loadData()
+        } catch (error) {
+          console.error(error)
+        } finally {
+          submitLoading.value = false
+        }
+      }
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .withdrawal-settings-page {
+    .current-setting-card {
+      :deep(.el-card__header) {
+        padding: 20px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      }
+
+      .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .header-left {
+          display: flex;
+          gap: 12px;
+          align-items: center;
+
+          .header-title {
+            font-size: 16px;
+            font-weight: 600;
+            color: #fff;
+          }
+        }
+
+        .header-right {
+          .creator-info {
+            font-size: 13px;
+            color: rgb(255 255 255 / 90%);
+          }
+        }
+      }
+
+      .setting-info {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 20px;
+        padding: 4px 0;
+
+        @media (width <= 1400px) {
+          grid-template-columns: repeat(2, 1fr);
+        }
+
+        @media (width <= 768px) {
+          grid-template-columns: 1fr;
+        }
+
+        .info-card {
+          display: flex;
+          gap: 16px;
+          align-items: center;
+          padding: 20px;
+          background: var(--el-fill-color-light);
+          border-radius: 8px;
+          transition: all 0.3s ease;
+
+          &:hover {
+            box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
+            transform: translateY(-2px);
+          }
+
+          .info-icon {
+            display: flex;
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: center;
+            width: 48px;
+            height: 48px;
+            font-size: 24px;
+            border-radius: 12px;
+          }
+
+          .info-content {
+            flex: 1;
+            min-width: 0;
+
+            .info-label {
+              margin-bottom: 4px;
+              font-size: 13px;
+              color: var(--el-text-color-secondary);
+            }
+
+            .info-value {
+              overflow: hidden;
+              font-size: 18px;
+              font-weight: 600;
+              color: var(--el-text-color-primary);
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+          }
+        }
+      }
+    }
+
+    .form-tip {
+      margin-top: 4px;
+      font-size: 12px;
+      color: var(--el-text-color-secondary);
+    }
+  }
+</style>

src/views/finance/customer-account/index.vue

@@ -4,13 +4,28 @@
       <!-- 搜索栏 -->
       <ElForm :inline="true" :model="searchForm" class="search-form">
         <ElFormItem label="客户账号">
-          <ElInput v-model="searchForm.accountNo" placeholder="请输入客户账号" clearable style="width: 200px" />
+          <ElInput
+            v-model="searchForm.accountNo"
+            placeholder="请输入客户账号"
+            clearable
+            style="width: 200px"
+          />
         </ElFormItem>
         <ElFormItem label="客户名称">
-          <ElInput v-model="searchForm.customerName" placeholder="请输入客户名称" clearable style="width: 200px" />
+          <ElInput
+            v-model="searchForm.customerName"
+            placeholder="请输入客户名称"
+            clearable
+            style="width: 200px"
+          />
         </ElFormItem>
         <ElFormItem label="客户类型">
-          <ElSelect v-model="searchForm.customerType" placeholder="请选择" clearable style="width: 150px">
+          <ElSelect
+            v-model="searchForm.customerType"
+            placeholder="请选择"
+            clearable
+            style="width: 150px"
+          >
             <ElOption label="代理商" value="agent" />
             <ElOption label="企业客户" value="enterprise" />
           </ElSelect>
@@ -38,12 +53,16 @@
           </ElTableColumn>
           <ElTableColumn label="可提现金额" prop="availableAmount" width="150">
             <template #default="scope">
-              <span style="color: var(--el-color-success)"> ¥{{ scope.row.availableAmount.toFixed(2) }} </span>
+              <span style="color: var(--el-color-success)">
+                ¥{{ scope.row.availableAmount.toFixed(2) }}
+              </span>
             </template>
           </ElTableColumn>
           <ElTableColumn label="待入账金额" prop="pendingAmount" width="150">
             <template #default="scope">
-              <span style="color: var(--el-color-warning)"> ¥{{ scope.row.pendingAmount.toFixed(2) }} </span>
+              <span style="color: var(--el-color-warning)">
+                ¥{{ scope.row.pendingAmount.toFixed(2) }}
+              </span>
             </template>
           </ElTableColumn>
           <ElTableColumn label="已提现金额" prop="withdrawnAmount" width="150">
@@ -67,7 +86,7 @@
         :total="pagination.total"
         :page-sizes="[10, 20, 50, 100]"
         layout="total, sizes, prev, pager, next, jumper"
-        style="margin-top: 20px; justify-content: flex-end"
+        style="justify-content: flex-end; margin-top: 20px"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
@@ -84,18 +103,30 @@
           </ElTag>
         </ElDescriptionsItem>
         <ElDescriptionsItem label="联系电话">{{ currentRow?.phone }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="佣金总额">¥{{ currentRow?.totalCommission.toFixed(2) }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="佣金总额"
+          >¥{{ currentRow?.totalCommission.toFixed(2) }}</ElDescriptionsItem
+        >
         <ElDescriptionsItem label="可提现金额">
-          <span style="color: var(--el-color-success)"> ¥{{ currentRow?.availableAmount.toFixed(2) }} </span>
+          <span style="color: var(--el-color-success)">
+            ¥{{ currentRow?.availableAmount.toFixed(2) }}
+          </span>
         </ElDescriptionsItem>
         <ElDescriptionsItem label="待入账金额">
-          <span style="color: var(--el-color-warning)"> ¥{{ currentRow?.pendingAmount.toFixed(2) }} </span>
+          <span style="color: var(--el-color-warning)">
+            ¥{{ currentRow?.pendingAmount.toFixed(2) }}
+          </span>
         </ElDescriptionsItem>
-        <ElDescriptionsItem label="已提现金额">¥{{ currentRow?.withdrawnAmount.toFixed(2) }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="已提现金额"
+          >¥{{ currentRow?.withdrawnAmount.toFixed(2) }}</ElDescriptionsItem
+        >
         <ElDescriptionsItem label="提现次数">{{ currentRow?.withdrawCount }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="最后提现时间">{{ currentRow?.lastWithdrawTime }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="最后提现时间">{{
+          currentRow?.lastWithdrawTime
+        }}</ElDescriptionsItem>
         <ElDescriptionsItem label="注册时间">{{ currentRow?.createTime }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="备注" :span="2">{{ currentRow?.remark || '无' }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="备注" :span="2">{{
+          currentRow?.remark || '无'
+        }}</ElDescriptionsItem>
       </ElDescriptions>
     </ElDialog>
   </div>

src/views/finance/my-account/index.vue

@@ -5,7 +5,10 @@
       <ElCol :xs="24" :sm="12" :lg="6">
         <ElCard shadow="hover">
           <div class="stat-card">
-            <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
+            <div
+              class="stat-icon"
+              style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+            >
               <i class="iconfont-sys">&#xe71d;</i>
             </div>
             <div class="stat-content">
@@ -18,7 +21,10 @@
       <ElCol :xs="24" :sm="12" :lg="6">
         <ElCard shadow="hover">
           <div class="stat-card">
-            <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)">
+            <div
+              class="stat-icon"
+              style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
+            >
               <i class="iconfont-sys">&#xe71e;</i>
             </div>
             <div class="stat-content">
@@ -31,7 +37,10 @@
       <ElCol :xs="24" :sm="12" :lg="6">
         <ElCard shadow="hover">
           <div class="stat-card">
-            <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)">
+            <div
+              class="stat-icon"
+              style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
+            >
               <i class="iconfont-sys">&#xe720;</i>
             </div>
             <div class="stat-content">
@@ -44,7 +53,10 @@
       <ElCol :xs="24" :sm="12" :lg="6">
         <ElCard shadow="hover">
           <div class="stat-card">
-            <div class="stat-icon" style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)">
+            <div
+              class="stat-icon"
+              style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%)"
+            >
               <i class="iconfont-sys">&#xe71f;</i>
             </div>
             <div class="stat-content">
@@ -65,7 +77,7 @@
     <!-- 收支流水 -->
     <ElCard shadow="never">
       <template #header>
-        <div style="display: flex; justify-content: space-between; align-items: center">
+        <div style="display: flex; align-items: center; justify-content: space-between">
           <span style="font-weight: 500">收支流水</span>
           <ElRadioGroup v-model="flowType" size="small">
             <ElRadioButton value="all">全部</ElRadioButton>
@@ -87,7 +99,14 @@
           </ElTableColumn>
           <ElTableColumn label="金额" prop="amount">
             <template #default="scope">
-              <span :style="{ color: scope.row.type === 'income' ? 'var(--el-color-success)' : 'var(--el-color-danger)' }">
+              <span
+                :style="{
+                  color:
+                    scope.row.type === 'income'
+                      ? 'var(--el-color-success)'
+                      : 'var(--el-color-danger)'
+                }"
+              >
                 {{ scope.row.type === 'income' ? '+' : '-' }}¥{{ scope.row.amount.toFixed(2) }}
               </span>
             </template>
@@ -103,9 +122,14 @@
 
     <!-- 提现申请对话框 -->
     <ElDialog v-model="withdrawDialogVisible" title="申请提现" width="600px" align-center>
-      <ElForm ref="withdrawFormRef" :model="withdrawForm" :rules="withdrawRules" label-width="120px">
+      <ElForm
+        ref="withdrawFormRef"
+        :model="withdrawForm"
+        :rules="withdrawRules"
+        label-width="120px"
+      >
         <ElFormItem label="可提现金额">
-          <span style="color: var(--el-color-success); font-size: 20px; font-weight: 500">
+          <span style="font-size: 20px; font-weight: 500; color: var(--el-color-success)">
             ¥{{ accountInfo.availableAmount.toFixed(2) }}
           </span>
         </ElFormItem>
@@ -125,12 +149,16 @@
           </span>
         </ElFormItem>
         <ElFormItem label="实际到账">
-          <span style="color: var(--el-color-success); font-size: 18px; font-weight: 500">
+          <span style="font-size: 18px; font-weight: 500; color: var(--el-color-success)">
             ¥{{ actualAmount.toFixed(2) }}
           </span>
         </ElFormItem>
         <ElFormItem label="收款银行" prop="bankName">
-          <ElSelect v-model="withdrawForm.bankName" placeholder="请选择收款银行" style="width: 100%">
+          <ElSelect
+            v-model="withdrawForm.bankName"
+            placeholder="请选择收款银行"
+            style="width: 100%"
+          >
             <ElOption label="中国工商银行" value="工商银行" />
             <ElOption label="中国建设银行" value="建设银行" />
             <ElOption label="中国农业银行" value="农业银行" />
@@ -271,27 +299,27 @@
   .page-content {
     .stat-card {
       display: flex;
-      align-items: center;
       gap: 16px;
+      align-items: center;
 
       .stat-icon {
-        width: 60px;
-        height: 60px;
-        border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: white;
+        width: 60px;
+        height: 60px;
         font-size: 28px;
+        color: white;
+        border-radius: 12px;
       }
 
       .stat-content {
         flex: 1;
 
         .stat-label {
+          margin-bottom: 8px;
           font-size: 14px;
           color: var(--el-text-color-secondary);
-          margin-bottom: 8px;
         }
 
         .stat-value {

src/views/finance/withdrawal-settings/index.vue

@@ -1,220 +0,0 @@
-<template>
-  <div class="page-content">
-    <ElCard shadow="never">
-      <template #header>
-        <span style="font-weight: 500">提现参数配置</span>
-      </template>
-
-      <ElForm ref="formRef" :model="form" :rules="rules" label-width="150px" style="max-width: 800px">
-        <ElFormItem label="最低提现金额" prop="minAmount">
-          <ElInputNumber v-model="form.minAmount" :min="1" :precision="2" />
-          <span style="margin-left: 8px">元</span>
-        </ElFormItem>
-
-        <ElFormItem label="手续费模式" prop="feeMode">
-          <ElRadioGroup v-model="form.feeMode">
-            <ElRadio value="fixed">固定手续费</ElRadio>
-            <ElRadio value="percent">比例手续费</ElRadio>
-          </ElRadioGroup>
-        </ElFormItem>
-
-        <ElFormItem v-if="form.feeMode === 'fixed'" label="固定手续费" prop="fixedFee">
-          <ElInputNumber v-model="form.fixedFee" :min="0" :precision="2" />
-          <span style="margin-left: 8px">元/笔</span>
-        </ElFormItem>
-
-        <ElFormItem v-if="form.feeMode === 'percent'" label="手续费比例" prop="feePercent">
-          <ElInputNumber v-model="form.feePercent" :min="0" :max="100" :precision="2" />
-          <span style="margin-left: 8px">%</span>
-        </ElFormItem>
-
-        <ElFormItem label="单日提现次数" prop="dailyLimit">
-          <ElInputNumber v-model="form.dailyLimit" :min="1" :max="10" />
-          <span style="margin-left: 8px">次</span>
-        </ElFormItem>
-
-        <ElFormItem label="提现到账时间" prop="arrivalTime">
-          <ElSelect v-model="form.arrivalTime" style="width: 200px">
-            <ElOption label="实时到账" value="realtime" />
-            <ElOption label="2小时内到账" value="2hours" />
-            <ElOption label="24小时内到账" value="24hours" />
-            <ElOption label="T+1到账" value="t1" />
-            <ElOption label="T+3到账" value="t3" />
-          </ElSelect>
-        </ElFormItem>
-
-        <ElFormItem label="工作日提现" prop="workdayOnly">
-          <ElSwitch v-model="form.workdayOnly" />
-          <span style="margin-left: 8px; color: var(--el-text-color-secondary)">
-            {{ form.workdayOnly ? '仅工作日可提现' : '每天都可提现' }}
-          </span>
-        </ElFormItem>
-
-        <ElFormItem label="提现时间段" prop="timeRange">
-          <ElTimePicker
-            v-model="form.timeRange"
-            is-range
-            range-separator="至"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            format="HH:mm"
-          />
-        </ElFormItem>
-
-        <ElFormItem label="配置说明" prop="description">
-          <ElInput
-            v-model="form.description"
-            type="textarea"
-            :rows="3"
-            placeholder="请输入配置说明，如配置生效时间等"
-          />
-        </ElFormItem>
-
-        <ElFormItem>
-          <ElButton type="primary" @click="handleSave">保存配置</ElButton>
-          <ElButton @click="resetForm">重置</ElButton>
-        </ElFormItem>
-      </ElForm>
-    </ElCard>
-
-    <ElCard shadow="never" style="margin-top: 20px">
-      <template #header>
-        <span style="font-weight: 500">配置历史记录</span>
-      </template>
-
-      <ArtTable :data="historyData" index>
-        <template #default>
-          <ElTableColumn label="配置时间" prop="configTime" width="180" />
-          <ElTableColumn label="最低金额" prop="minAmount">
-            <template #default="scope"> ¥{{ scope.row.minAmount.toFixed(2) }} </template>
-          </ElTableColumn>
-          <ElTableColumn label="手续费" prop="fee">
-            <template #default="scope">
-              {{
-                scope.row.feeMode === 'fixed'
-                  ? `¥${scope.row.fixedFee.toFixed(2)}/笔`
-                  : `${scope.row.feePercent}%`
-              }}
-            </template>
-          </ElTableColumn>
-          <ElTableColumn label="单日限制" prop="dailyLimit">
-            <template #default="scope"> {{ scope.row.dailyLimit }}次/天 </template>
-          </ElTableColumn>
-          <ElTableColumn label="到账时间" prop="arrivalTime">
-            <template #default="scope">
-              {{ getArrivalTimeText(scope.row.arrivalTime) }}
-            </template>
-          </ElTableColumn>
-          <ElTableColumn label="配置人" prop="operator" />
-          <ElTableColumn label="状态" prop="status">
-            <template #default="scope">
-              <ElTag :type="scope.row.status === 'active' ? 'success' : 'info'">
-                {{ scope.row.status === 'active' ? '当前生效' : '已过期' }}
-              </ElTag>
-            </template>
-          </ElTableColumn>
-        </template>
-      </ArtTable>
-    </ElCard>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ElMessage } from 'element-plus'
-  import type { FormInstance, FormRules } from 'element-plus'
-
-  defineOptions({ name: 'WithdrawalSettings' })
-
-  const formRef = ref<FormInstance>()
-
-  const form = reactive({
-    minAmount: 100,
-    feeMode: 'percent',
-    fixedFee: 2,
-    feePercent: 0.2,
-    dailyLimit: 3,
-    arrivalTime: '24hours',
-    workdayOnly: false,
-    timeRange: [new Date(2024, 0, 1, 0, 0), new Date(2024, 0, 1, 23, 59)],
-    description: ''
-  })
-
-  const rules = reactive<FormRules>({
-    minAmount: [{ required: true, message: '请输入最低提现金额', trigger: 'blur' }],
-    feeMode: [{ required: true, message: '请选择手续费模式', trigger: 'change' }],
-    dailyLimit: [{ required: true, message: '请输入单日提现次数', trigger: 'blur' }],
-    arrivalTime: [{ required: true, message: '请选择到账时间', trigger: 'change' }]
-  })
-
-  const historyData = ref([
-    {
-      id: '1',
-      configTime: '2026-01-09 10:00:00',
-      minAmount: 100,
-      feeMode: 'percent',
-      fixedFee: 0,
-      feePercent: 0.2,
-      dailyLimit: 3,
-      arrivalTime: '24hours',
-      operator: 'admin',
-      status: 'active'
-    },
-    {
-      id: '2',
-      configTime: '2026-01-01 10:00:00',
-      minAmount: 50,
-      feeMode: 'fixed',
-      fixedFee: 2.0,
-      feePercent: 0,
-      dailyLimit: 5,
-      arrivalTime: 't1',
-      operator: 'admin',
-      status: 'expired'
-    }
-  ])
-
-  const getArrivalTimeText = (value: string) => {
-    const map: Record<string, string> = {
-      realtime: '实时到账',
-      '2hours': '2小时内',
-      '24hours': '24小时内',
-      t1: 'T+1',
-      t3: 'T+3'
-    }
-    return map[value] || '未知'
-  }
-
-  const handleSave = async () => {
-    if (!formRef.value) return
-    await formRef.value.validate((valid) => {
-      if (valid) {
-        // 添加到历史记录
-        historyData.value.unshift({
-          id: Date.now().toString(),
-          configTime: new Date().toLocaleString('zh-CN'),
-          ...form,
-          operator: 'admin',
-          status: 'active'
-        })
-        // 将之前的配置标记为过期
-        historyData.value.slice(1).forEach((item) => {
-          item.status = 'expired'
-        })
-        ElMessage.success('配置保存成功')
-      }
-    })
-  }
-
-  const resetForm = () => {
-    formRef.value?.resetFields()
-  }
-</script>
-
-<style lang="scss" scoped>
-  .page-content {
-    :deep(.el-card__header) {
-      padding: 16px 20px;
-      border-bottom: 1px solid var(--el-border-color-light);
-    }
-  }
-</style>

src/views/finance/withdrawal/index.vue

@@ -1,351 +0,0 @@
-<template>
-  <div class="page-content">
-    <ElRow>
-      <ElCol :xs="24" :sm="12" :lg="6">
-        <ElInput v-model="searchQuery" placeholder="申请人/手机号" clearable></ElInput>
-      </ElCol>
-      <div style="width: 12px"></div>
-      <ElCol :xs="24" :sm="12" :lg="6">
-        <ElSelect v-model="statusFilter" placeholder="审核状态" clearable style="width: 100%">
-          <ElOption label="待审核" value="pending" />
-          <ElOption label="已通过" value="approved" />
-          <ElOption label="已拒绝" value="rejected" />
-        </ElSelect>
-      </ElCol>
-      <div style="width: 12px"></div>
-      <ElCol :xs="24" :sm="12" :lg="6">
-        <ElDatePicker
-          v-model="dateRange"
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          style="width: 100%"
-        />
-      </ElCol>
-      <div style="width: 12px"></div>
-      <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
-        <ElButton v-ripple @click="handleSearch">搜索</ElButton>
-        <ElButton v-ripple @click="handleBatchApprove" :disabled="selectedIds.length === 0"
-          >批量审核</ElButton
-        >
-      </ElCol>
-    </ElRow>
-
-    <ArtTable :data="filteredData" index @selection-change="handleSelectionChange">
-      <template #default>
-        <ElTableColumn type="selection" width="55" />
-        <ElTableColumn label="申请单号" prop="orderNo" min-width="180" />
-        <ElTableColumn label="申请人" prop="applicantName" />
-        <ElTableColumn label="客户类型" prop="customerType">
-          <template #default="scope">
-            <ElTag :type="scope.row.customerType === 'agent' ? '' : 'success'">
-              {{ scope.row.customerType === 'agent' ? '代理商' : '企业客户' }}
-            </ElTag>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="提现金额" prop="amount">
-          <template #default="scope">
-            <span style="color: var(--el-color-danger); font-weight: 500">
-              ¥{{ scope.row.amount.toFixed(2) }}
-            </span>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="手续费" prop="fee">
-          <template #default="scope"> ¥{{ scope.row.fee.toFixed(2) }} </template>
-        </ElTableColumn>
-        <ElTableColumn label="实际到账" prop="actualAmount">
-          <template #default="scope">
-            <span style="color: var(--el-color-success); font-weight: 500">
-              ¥{{ scope.row.actualAmount.toFixed(2) }}
-            </span>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="收款账户" prop="bankAccount" show-overflow-tooltip />
-        <ElTableColumn label="状态" prop="status">
-          <template #default="scope">
-            <ElTag :type="getStatusTagType(scope.row.status)">
-              {{ getStatusText(scope.row.status) }}
-            </ElTag>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn label="申请时间" prop="createTime" width="180" />
-        <ElTableColumn fixed="right" label="操作" width="180">
-          <template #default="scope">
-            <el-button link @click="viewDetail(scope.row)">详情</el-button>
-            <el-button
-              v-if="scope.row.status === 'pending'"
-              link
-              type="success"
-              @click="handleApprove(scope.row)"
-              >通过</el-button
-            >
-            <el-button
-              v-if="scope.row.status === 'pending'"
-              link
-              type="danger"
-              @click="handleReject(scope.row)"
-              >拒绝</el-button
-            >
-          </template>
-        </ElTableColumn>
-      </template>
-    </ArtTable>
-
-    <!-- 详情对话框 -->
-    <ElDialog v-model="detailDialogVisible" title="提现申请详情" width="700px" align-center>
-      <ElDescriptions :column="2" border>
-        <ElDescriptionsItem label="申请单号">{{ currentItem?.orderNo }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="申请人">{{ currentItem?.applicantName }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="手机号">{{ currentItem?.phone }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="客户类型">
-          {{ currentItem?.customerType === 'agent' ? '代理商' : '企业客户' }}
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="提现金额">
-          <span style="color: var(--el-color-danger); font-weight: 500">
-            ¥{{ currentItem?.amount.toFixed(2) }}
-          </span>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="手续费">¥{{ currentItem?.fee.toFixed(2) }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="实际到账">
-          <span style="color: var(--el-color-success); font-weight: 500">
-            ¥{{ currentItem?.actualAmount.toFixed(2) }}
-          </span>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="收款银行">{{ currentItem?.bankName }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="收款账户" :span="2">{{
-          currentItem?.bankAccount
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="开户姓名">{{ currentItem?.accountName }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="申请时间">{{ currentItem?.createTime }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="审核状态">
-          <ElTag :type="getStatusTagType(currentItem?.status || 'pending')">
-            {{ getStatusText(currentItem?.status || 'pending') }}
-          </ElTag>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem v-if="currentItem?.status !== 'pending'" label="审核时间">{{
-          currentItem?.auditTime
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem v-if="currentItem?.rejectReason" label="拒绝原因" :span="2">{{
-          currentItem?.rejectReason
-        }}</ElDescriptionsItem>
-      </ElDescriptions>
-    </ElDialog>
-
-    <!-- 拒绝对话框 -->
-    <ElDialog v-model="rejectDialogVisible" title="拒绝提现" width="500px" align-center>
-      <ElForm ref="rejectFormRef" :model="rejectForm" :rules="rejectRules" label-width="100px">
-        <ElFormItem label="拒绝原因" prop="reason">
-          <ElInput
-            v-model="rejectForm.reason"
-            type="textarea"
-            :rows="4"
-            placeholder="请输入拒绝原因"
-          />
-        </ElFormItem>
-      </ElForm>
-      <template #footer>
-        <div class="dialog-footer">
-          <ElButton @click="rejectDialogVisible = false">取消</ElButton>
-          <ElButton type="primary" @click="confirmReject">确认拒绝</ElButton>
-        </div>
-      </template>
-    </ElDialog>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ElMessage, ElMessageBox } from 'element-plus'
-  import type { FormInstance, FormRules } from 'element-plus'
-
-  defineOptions({ name: 'WithdrawalManagement' })
-
-  interface WithdrawalItem {
-    id: string
-    orderNo: string
-    applicantName: string
-    phone: string
-    customerType: 'agent' | 'enterprise'
-    amount: number
-    fee: number
-    actualAmount: number
-    bankName: string
-    bankAccount: string
-    accountName: string
-    status: 'pending' | 'approved' | 'rejected'
-    createTime: string
-    auditTime?: string
-    rejectReason?: string
-  }
-
-  const mockData = ref<WithdrawalItem[]>([
-    {
-      id: '1',
-      orderNo: 'WD202601090001',
-      applicantName: '张三',
-      phone: '13800138001',
-      customerType: 'agent',
-      amount: 5000.0,
-      fee: 10.0,
-      actualAmount: 4990.0,
-      bankName: '中国工商银行',
-      bankAccount: '6222 **** **** 1234',
-      accountName: '张三',
-      status: 'pending',
-      createTime: '2026-01-09 10:00:00'
-    },
-    {
-      id: '2',
-      orderNo: 'WD202601090002',
-      applicantName: '李四',
-      phone: '13800138002',
-      customerType: 'enterprise',
-      amount: 3000.0,
-      fee: 6.0,
-      actualAmount: 2994.0,
-      bankName: '中国建设银行',
-      bankAccount: '6227 **** **** 5678',
-      accountName: '李四',
-      status: 'approved',
-      createTime: '2026-01-08 14:30:00',
-      auditTime: '2026-01-08 15:00:00'
-    },
-    {
-      id: '3',
-      orderNo: 'WD202601090003',
-      applicantName: '王五',
-      phone: '13800138003',
-      customerType: 'agent',
-      amount: 2000.0,
-      fee: 4.0,
-      actualAmount: 1996.0,
-      bankName: '中国农业银行',
-      bankAccount: '6228 **** **** 9012',
-      accountName: '王五',
-      status: 'rejected',
-      createTime: '2026-01-07 16:20:00',
-      auditTime: '2026-01-07 17:00:00',
-      rejectReason: '账户信息与实名不符'
-    }
-  ])
-
-  const searchQuery = ref('')
-  const statusFilter = ref('')
-  const dateRange = ref<[Date, Date] | null>(null)
-  const selectedIds = ref<string[]>([])
-  const detailDialogVisible = ref(false)
-  const rejectDialogVisible = ref(false)
-  const currentItem = ref<WithdrawalItem | null>(null)
-  const rejectFormRef = ref<FormInstance>()
-
-  const rejectForm = reactive({
-    reason: ''
-  })
-
-  const rejectRules = reactive<FormRules>({
-    reason: [{ required: true, message: '请输入拒绝原因', trigger: 'blur' }]
-  })
-
-  const filteredData = computed(() => {
-    let data = mockData.value
-    if (searchQuery.value) {
-      data = data.filter(
-        (item) => item.applicantName.includes(searchQuery.value) || item.phone.includes(searchQuery.value)
-      )
-    }
-    if (statusFilter.value) {
-      data = data.filter((item) => item.status === statusFilter.value)
-    }
-    return data
-  })
-
-  const getStatusText = (status: string) => {
-    const map: Record<string, string> = {
-      pending: '待审核',
-      approved: '已通过',
-      rejected: '已拒绝'
-    }
-    return map[status] || '未知'
-  }
-
-  const getStatusTagType = (status: string) => {
-    const map: Record<string, string> = {
-      pending: 'warning',
-      approved: 'success',
-      rejected: 'danger'
-    }
-    return map[status] || 'info'
-  }
-
-  const handleSearch = () => {}
-
-  const handleSelectionChange = (selection: WithdrawalItem[]) => {
-    selectedIds.value = selection.map((item) => item.id)
-  }
-
-  const viewDetail = (row: WithdrawalItem) => {
-    currentItem.value = row
-    detailDialogVisible.value = true
-  }
-
-  const handleApprove = (row: WithdrawalItem) => {
-    ElMessageBox.confirm(
-      `确认通过提现申请？金额：¥${row.amount.toFixed(2)}，实际到账：¥${row.actualAmount.toFixed(2)}`,
-      '审核确认',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'success'
-      }
-    ).then(() => {
-      row.status = 'approved'
-      row.auditTime = new Date().toLocaleString('zh-CN')
-      ElMessage.success('审核通过')
-    })
-  }
-
-  const handleReject = (row: WithdrawalItem) => {
-    currentItem.value = row
-    rejectForm.reason = ''
-    rejectDialogVisible.value = true
-  }
-
-  const confirmReject = async () => {
-    if (!rejectFormRef.value) return
-    await rejectFormRef.value.validate((valid) => {
-      if (valid && currentItem.value) {
-        currentItem.value.status = 'rejected'
-        currentItem.value.auditTime = new Date().toLocaleString('zh-CN')
-        currentItem.value.rejectReason = rejectForm.reason
-        rejectDialogVisible.value = false
-        ElMessage.success('已拒绝提现申请')
-      }
-    })
-  }
-
-  const handleBatchApprove = () => {
-    ElMessageBox.confirm(`确认批量审核 ${selectedIds.value.length} 条提现申请吗？`, '批量审核', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    }).then(() => {
-      selectedIds.value.forEach((id) => {
-        const item = mockData.value.find((i) => i.id === id)
-        if (item && item.status === 'pending') {
-          item.status = 'approved'
-          item.auditTime = new Date().toLocaleString('zh-CN')
-        }
-      })
-      ElMessage.success('批量审核成功')
-      selectedIds.value = []
-    })
-  }
-</script>
-
-<style lang="scss" scoped>
-  .page-content {
-    :deep(.el-descriptions__label) {
-      font-weight: 500;
-    }
-  }
-</style>

src/views/my-simcard/single-card/index.vue

@@ -472,20 +472,20 @@
 
         &.two-columns {
           .col {
-            flex: 1;
             display: flex;
+            flex: 1;
             flex-direction: column;
 
             .info-card {
-              margin-bottom: 0;
               height: 100%;
+              margin-bottom: 0;
             }
           }
         }
       }
 
       // 响应式调整
-      @media (max-width: 1200px) {
+      @media (width <= 1200px) {
         .row.two-columns {
           flex-direction: column;
           gap: 16px;
@@ -498,7 +498,7 @@
         }
       }
 
-      @media (max-width: 768px) {
+      @media (width <= 768px) {
         gap: 16px;
 
         .row {
@@ -516,8 +516,8 @@
 
         .card-header {
           display: flex;
-          align-items: center;
           gap: 8px;
+          align-items: center;
           font-size: 16px;
           font-weight: 600;
           color: var(--el-text-color-primary, #1f2937);
@@ -562,30 +562,30 @@
               padding: 20px 16px;
 
               :deep(.el-card__body) {
-                padding: 0;
-                width: 100%;
-                height: 100%;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
                 justify-content: center;
+                width: 100%;
+                height: 100%;
+                padding: 0;
               }
 
               .stat-label {
-                text-align: center;
+                margin-bottom: 8px;
                 font-size: 14px;
                 font-weight: 500;
-                color: var(--el-text-color-regular);
-                margin-bottom: 8px;
                 line-height: 1.4;
+                color: var(--el-text-color-regular);
+                text-align: center;
               }
 
               .stat-value {
-                text-align: center;
                 font-size: 16px;
                 font-weight: 600;
-                color: var(--el-text-color-primary);
                 line-height: 1.2;
+                color: var(--el-text-color-primary);
+                text-align: center;
                 word-break: break-all;
               }
             }
@@ -598,29 +598,29 @@
           min-width: 0;
 
           .usage-display {
-            background: var(--el-bg-color, #ffffff);
-            border: 1px solid var(--el-border-color-light);
-            border-radius: 12px;
-            height: 100%;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
+            height: 100%;
             padding: 20px;
+            background: var(--el-bg-color, #fff);
+            border: 1px solid var(--el-border-color-light);
+            border-radius: 12px;
 
             .usage-title {
-              font-size: 14px;
-              color: var(--el-text-color-regular);
               margin-bottom: 12px;
+              font-size: 14px;
               font-weight: 500;
+              color: var(--el-text-color-regular);
             }
 
             .usage-chart {
               .chart-value {
                 font-size: 32px;
                 font-weight: 700;
-                color: #667eea;
                 line-height: 1;
+                color: #667eea;
               }
             }
           }
@@ -632,35 +632,35 @@
           min-width: 0;
 
           .package-display {
-            background: var(--el-bg-color, #ffffff);
-            border: 1px solid var(--el-border-color-light);
-            border-radius: 12px;
-            height: 100%;
             display: flex;
             flex-direction: column;
             justify-content: center;
+            height: 100%;
             padding: 20px;
             text-align: center;
+            background: var(--el-bg-color, #fff);
+            border: 1px solid var(--el-border-color-light);
+            border-radius: 12px;
 
             .package-label {
-              font-size: 14px;
-              color: var(--el-text-color-regular);
               margin-bottom: 8px;
+              font-size: 14px;
               font-weight: 500;
+              color: var(--el-text-color-regular);
             }
 
             .package-name {
+              margin-bottom: 8px;
               font-size: 16px;
               font-weight: 600;
-              color: var(--el-text-color-primary);
-              margin-bottom: 8px;
               line-height: 1.4;
+              color: var(--el-text-color-primary);
             }
 
             .package-actual {
               font-size: 14px;
-              color: #667eea;
               font-weight: 500;
+              color: #667eea;
             }
           }
         }
@@ -673,8 +673,8 @@
         .package-table {
           :deep(.el-table__header) {
             th {
-              color: var(--el-text-color-primary, #374151);
               font-weight: 600;
+              color: var(--el-text-color-primary, #374151);
             }
           }
         }
@@ -689,36 +689,37 @@
       }
 
       .operations-grid {
-        flex: 1;
         display: flex;
+        flex: 1;
         flex-direction: column;
 
         .operation-group {
           margin-bottom: 24px;
 
           &:last-child {
-            margin-bottom: 0;
             flex: 1;
+            margin-bottom: 0;
           }
 
           .group-title {
+            padding-bottom: 8px;
+            margin: 0 0 16px;
             font-size: 14px;
             font-weight: 600;
             color: var(--el-text-color-primary, #374151);
-            margin: 0 0 16px 0;
-            padding-bottom: 8px;
             border-bottom: 2px solid var(--el-border-color-light, #e5e7eb);
           }
 
           .operation-buttons {
             display: flex;
             flex-wrap: wrap;
+            gap: 10px;
             align-items: center;
             justify-content: flex-start;
-            gap: 10px;
+
             .operation-btn {
-              margin-left: 0;
               margin-right: 0;
+              margin-left: 0;
             }
           }
         }
@@ -731,13 +732,13 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      background: var(--el-bg-color, #ffffff);
-      border-radius: 16px;
       margin: 24px auto;
+      background: var(--el-bg-color, #fff);
+      border-radius: 16px;
     }
 
     // 响应式设计
-    @media (max-width: 768px) {
+    @media (width <= 768px) {
       padding: 16px;
 
       .main-content-layout {
@@ -780,8 +781,8 @@
             }
 
             .stat-label {
-              font-size: 12px;
               margin-bottom: 6px;
+              font-size: 12px;
             }
 
             .stat-value {
@@ -816,7 +817,7 @@
       //}
     }
 
-    @media (max-width: 480px) {
+    @media (width <= 480px) {
       .traffic-left .traffic-stats-grid {
         grid-template-columns: 1fr;
         gap: 6px;
@@ -825,8 +826,8 @@
           padding: 10px 6px;
 
           .stat-label {
-            font-size: 11px;
             margin-bottom: 4px;
+            font-size: 11px;
           }
 
           .stat-value {
@@ -842,6 +843,7 @@
         opacity: 0;
         transform: translateY(30px);
       }
+
       to {
         opacity: 1;
         transform: translateY(0);

src/views/package-management/package-create/index.vue

@@ -47,15 +47,9 @@
           </template>
 
           <template #card-actions="{ item }">
-            <ElButton type="primary" size="small" @click="editPackage(item)">
-              编辑
-            </ElButton>
-            <ElButton type="warning" size="small" @click="offlinePackage(item)">
-              下架
-            </ElButton>
-            <ElButton type="success" size="small" @click="copyPackage(item)">
-              复制套餐
-            </ElButton>
+            <ElButton type="primary" size="small" @click="editPackage(item)"> 编辑 </ElButton>
+            <ElButton type="warning" size="small" @click="offlinePackage(item)"> 下架 </ElButton>
+            <ElButton type="success" size="small" @click="copyPackage(item)"> 复制套餐 </ElButton>
           </template>
         </ArtDataViewer>
 
@@ -611,7 +605,11 @@
         return `<el-tag type="${type}" size="small">${row.levelOneMerge}</el-tag>`
       }
     },
-    { prop: 'levelOneMergeCode', label: '一级合并编号', formatter: (row: any) => row.levelOneMergeCode || '-' },
+    {
+      prop: 'levelOneMergeCode',
+      label: '一级合并编号',
+      formatter: (row: any) => row.levelOneMergeCode || '-'
+    },
     {
       prop: 'levelTwoMerge',
       label: '二级是否合并',
@@ -620,7 +618,11 @@
         return `<el-tag type="${type}" size="small">${row.levelTwoMerge}</el-tag>`
       }
     },
-    { prop: 'levelTwoMergeCode', label: '二级合并编号', formatter: (row: any) => row.levelTwoMergeCode || '-' },
+    {
+      prop: 'levelTwoMergeCode',
+      label: '二级合并编号',
+      formatter: (row: any) => row.levelTwoMergeCode || '-'
+    },
     {
       prop: 'isSpecial',
       label: '是否特殊',

src/views/product/shop/index.vue

@@ -31,6 +31,9 @@
           :pageSize="pagination.pageSize"
           :total="pagination.total"
           :marginTop="10"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+          :default-expand-all="false"
+          :pagination="false"
           @selection-change="handleSelectionChange"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
@@ -62,8 +65,24 @@
 
             <ElRow :gutter="20" v-if="dialogType === 'add'">
               <ElCol :span="12">
-                <ElFormItem label="上级店铺ID" prop="parent_id">
-                  <ElInputNumber v-model="formData.parent_id" :min="1" placeholder="一级店铺可不填" style="width: 100%" clearable />
+                <ElFormItem label="上级店铺" prop="parent_id">
+                  <ElSelect
+                    v-model="formData.parent_id"
+                    placeholder="一级店铺可不选"
+                    filterable
+                    remote
+                    :remote-method="searchParentShops"
+                    :loading="parentShopLoading"
+                    clearable
+                    style="width: 100%"
+                  >
+                    <ElOption
+                      v-for="shop in parentShopList"
+                      :key="shop.id"
+                      :label="shop.shop_name"
+                      :value="shop.id"
+                    />
+                  </ElSelect>
                 </ElFormItem>
               </ElCol>
             </ElRow>
@@ -102,7 +121,11 @@
               </ElCol>
               <ElCol :span="12">
                 <ElFormItem label="联系电话" prop="contact_phone">
-                  <ElInput v-model="formData.contact_phone" placeholder="请输入联系电话" maxlength="11" />
+                  <ElInput
+                    v-model="formData.contact_phone"
+                    placeholder="请输入联系电话"
+                    maxlength="11"
+                  />
                 </ElFormItem>
               </ElCol>
             </ElRow>
@@ -118,14 +141,23 @@
                 </ElCol>
                 <ElCol :span="12">
                   <ElFormItem label="密码" prop="init_password">
-                    <ElInput v-model="formData.init_password" type="password" placeholder="请输入初始账号密码" show-password />
+                    <ElInput
+                      v-model="formData.init_password"
+                      type="password"
+                      placeholder="请输入初始账号密码"
+                      show-password
+                    />
                   </ElFormItem>
                 </ElCol>
               </ElRow>
               <ElRow :gutter="20">
                 <ElCol :span="12">
                   <ElFormItem label="手机号" prop="init_phone">
-                    <ElInput v-model="formData.init_phone" placeholder="请输入初始账号手机号" maxlength="11" />
+                    <ElInput
+                      v-model="formData.init_phone"
+                      placeholder="请输入初始账号手机号"
+                      maxlength="11"
+                    />
                   </ElFormItem>
                 </ElCol>
               </ElRow>
@@ -142,7 +174,9 @@
           <template #footer>
             <div class="dialog-footer">
               <ElButton @click="dialogVisible = false">取消</ElButton>
-              <ElButton type="primary" @click="handleSubmit" :loading="submitLoading">提交</ElButton>
+              <ElButton type="primary" @click="handleSubmit" :loading="submitLoading"
+                >提交</ElButton
+              >
             </div>
           </template>
         </ElDialog>
@@ -153,7 +187,15 @@
 
 <script setup lang="ts">
   import { h } from 'vue'
-  import { FormInstance, ElMessage, ElMessageBox, ElTag, ElSwitch } from 'element-plus'
+  import {
+    FormInstance,
+    ElMessage,
+    ElMessageBox,
+    ElTag,
+    ElSwitch,
+    ElSelect,
+    ElOption
+  } from 'element-plus'
   import type { FormRules } from 'element-plus'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
@@ -169,6 +211,9 @@
   const dialogVisible = ref(false)
   const loading = ref(false)
   const submitLoading = ref(false)
+  const parentShopLoading = ref(false)
+  const parentShopList = ref<ShopResponse[]>([])
+  const searchParentShopList = ref<ShopResponse[]>([])
 
   // 定义表单搜索初始值
   const initialSearchState = {
@@ -211,7 +256,7 @@
   }
 
   // 表单配置项
-  const searchFormItems: SearchFormItem[] = [
+  const searchFormItems = computed<SearchFormItem[]>(() => [
     {
       label: '店铺名称',
       prop: 'shop_name',
@@ -231,12 +276,20 @@
       }
     },
     {
-      label: '上级ID',
+      label: '上级店铺',
       prop: 'parent_id',
-      type: 'input',
+      type: 'select',
+      options: searchParentShopList.value.map((shop) => ({
+        label: shop.shop_name,
+        value: shop.id
+      })),
       config: {
         clearable: true,
-        placeholder: '请输入上级店铺ID'
+        filterable: true,
+        remote: true,
+        remoteMethod: handleSearchParentShop,
+        loading: parentShopLoading.value,
+        placeholder: '请选择或搜索上级店铺'
       }
     },
     {
@@ -267,15 +320,13 @@
         placeholder: '请选择状态'
       }
     }
-  ]
+  ])
 
   // 列配置
   const columnOptions = [
-    { label: 'ID', prop: 'id' },
     { label: '店铺名称', prop: 'shop_name' },
     { label: '店铺编号', prop: 'shop_code' },
     { label: '层级', prop: 'level' },
-    { label: '上级ID', prop: 'parent_id' },
     { label: '所在地区', prop: 'region' },
     { label: '联系人', prop: 'contact_name' },
     { label: '联系电话', prop: 'contact_phone' },
@@ -286,19 +337,13 @@
 
   // 显示对话框
   const showDialog = (type: string, row?: ShopResponse) => {
-    dialogVisible.value = true
     dialogType.value = type
 
-    // 重置表单验证状态
-    if (formRef.value) {
-      formRef.value.resetFields()
-    }
-
     if (type === 'edit' && row) {
       formData.id = row.id
       formData.shop_name = row.shop_name
       formData.shop_code = ''
-      formData.parent_id = null
+      formData.parent_id = undefined
       formData.province = row.province || ''
       formData.city = row.city || ''
       formData.district = row.district || ''
@@ -313,7 +358,7 @@
       formData.id = 0
       formData.shop_name = ''
       formData.shop_code = ''
-      formData.parent_id = null
+      formData.parent_id = undefined
       formData.province = ''
       formData.city = ''
       formData.district = ''
@@ -325,6 +370,13 @@
       formData.init_password = ''
       formData.init_phone = ''
     }
+
+    // 重置表单验证状态
+    nextTick(() => {
+      formRef.value?.clearValidate()
+    })
+
+    dialogVisible.value = true
   }
 
   // 删除店铺
@@ -350,11 +402,6 @@
 
   // 动态列配置
   const { columnChecks, columns } = useCheckedColumns(() => [
-    {
-      prop: 'id',
-      label: 'ID',
-      width: 80
-    },
     {
       prop: 'shop_name',
       label: '店铺名称',
@@ -373,12 +420,6 @@
         return h(ElTag, { type: 'info', size: 'small' }, () => `${row.level}级`)
       }
     },
-    {
-      prop: 'parent_id',
-      label: '上级ID',
-      width: 100,
-      formatter: (row: ShopResponse) => row.parent_id || '-'
-    },
     {
       prop: 'region',
       label: '所在地区',
@@ -388,6 +429,7 @@
         if (row.province) parts.push(row.province)
         if (row.city) parts.push(row.city)
         if (row.district) parts.push(row.district)
+        if (row.address) parts.push(row.address)
         return parts.length > 0 ? parts.join(' / ') : '-'
       }
     },
@@ -413,7 +455,7 @@
           activeText: getStatusText(CommonStatus.ENABLED),
           inactiveText: getStatusText(CommonStatus.DISABLED),
           inlinePrompt: true,
-          'onUpdate:modelValue': (val: number) => handleStatusChange(row, val)
+          'onUpdate:modelValue': (val: string | number | boolean) => handleStatusChange(row, val as number)
         })
       }
     },
@@ -451,7 +493,7 @@
     id: 0,
     shop_name: '',
     shop_code: '',
-    parent_id: null as number | null,
+    parent_id: undefined as number | undefined,
     province: '',
     city: '',
     district: '',
@@ -466,15 +508,76 @@
 
   onMounted(() => {
     getShopList()
+    loadParentShopList()
+    loadSearchParentShopList()
   })
 
+  // 加载上级店铺列表(用于新增对话框,默认加载20条)
+  const loadParentShopList = async (shopName?: string) => {
+    parentShopLoading.value = true
+    try {
+      const params: any = {
+        page: 1,
+        pageSize: 20
+      }
+      if (shopName) {
+        params.shop_name = shopName
+      }
+      const res = await ShopService.getShops(params)
+      if (res.code === 0) {
+        parentShopList.value = res.data.items || []
+      }
+    } catch (error) {
+      console.error('获取上级店铺列表失败:', error)
+    } finally {
+      parentShopLoading.value = false
+    }
+  }
+
+  // 加载搜索栏上级店铺列表(默认加载20条)
+  const loadSearchParentShopList = async (shopName?: string) => {
+    try {
+      const params: any = {
+        page: 1,
+        pageSize: 20
+      }
+      if (shopName) {
+        params.shop_name = shopName
+      }
+      const res = await ShopService.getShops(params)
+      if (res.code === 0) {
+        searchParentShopList.value = res.data.items || []
+      }
+    } catch (error) {
+      console.error('获取上级店铺列表失败:', error)
+    }
+  }
+
+  // 搜索上级店铺(用于新增对话框)
+  const searchParentShops = (query: string) => {
+    if (query) {
+      loadParentShopList(query)
+    } else {
+      loadParentShopList()
+    }
+  }
+
+  // 搜索上级店铺(用于搜索栏)
+  const handleSearchParentShop = (query: string) => {
+    if (query) {
+      loadSearchParentShopList(query)
+    } else {
+      loadSearchParentShopList()
+    }
+  }
+
   // 获取店铺列表
   const getShopList = async () => {
     loading.value = true
     try {
       const params = {
-        page: pagination.currentPage,
-        page_size: pagination.pageSize,
+        page: 1,
+        page_size: 9999, // 获取所有数据用于构建树形结构
         shop_name: searchForm.shop_name || undefined,
         shop_code: searchForm.shop_code || undefined,
         parent_id: searchForm.parent_id,
@@ -483,7 +586,8 @@
       }
       const res = await ShopService.getShops(params)
       if (res.code === 0) {
-        tableData.value = res.data.items || []
+        const items = res.data.items || []
+        tableData.value = buildTreeData(items)
         pagination.total = res.data.total || 0
       }
     } catch (error) {
@@ -493,6 +597,33 @@
     }
   }
 
+  // 构建树形数据
+  const buildTreeData = (items: ShopResponse[]) => {
+    const map = new Map<number, ShopResponse & { children?: ShopResponse[] }>()
+    const tree: ShopResponse[] = []
+
+    // 先将所有项放入 map
+    items.forEach((item) => {
+      map.set(item.id, { ...item, children: [] })
+    })
+
+    // 构建树形结构
+    items.forEach((item) => {
+      const node = map.get(item.id)!
+      if (item.parent_id && map.has(item.parent_id)) {
+        // 有父节点，添加到父节点的 children 中
+        const parent = map.get(item.parent_id)!
+        if (!parent.children) parent.children = []
+        parent.children.push(node)
+      } else {
+        // 没有父节点或父节点不存在，作为根节点
+        tree.push(node)
+      }
+    })
+
+    return tree
+  }
+
   const handleRefresh = () => {
     getShopList()
   }
@@ -512,19 +643,15 @@
       { required: true, message: '请输入店铺编号', trigger: 'blur' },
       { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
     ],
-    address: [
-      { max: 255, message: '地址不能超过255个字符', trigger: 'blur' }
-    ],
-    contact_name: [
-      { max: 50, message: '联系人姓名不能超过50个字符', trigger: 'blur' }
-    ],
+    address: [{ max: 255, message: '地址不能超过255个字符', trigger: 'blur' }],
+    contact_name: [{ max: 50, message: '联系人姓名不能超过50个字符', trigger: 'blur' }],
     contact_phone: [
       { len: 11, message: '联系电话必须为 11 位', trigger: 'blur' },
       { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
     ],
     init_username: [
       { required: true, message: '请输入初始账号用户名', trigger: 'blur' },
-      { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
+      { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
     ],
     init_password: [
       { required: true, message: '请输入初始账号密码', trigger: 'blur' },
@@ -611,7 +738,10 @@
     // 先更新UI
     row.status = newStatus
     try {
-      await ShopService.updateShop(row.id, { status: newStatus })
+      await ShopService.updateShop(row.id, {
+        shop_name: row.shop_name,
+        status: newStatus
+      })
       ElMessage.success('状态切换成功')
     } catch (error) {
       // 切换失败，恢复原状态

src/views/product/sim-card-assign/index.vue

@@ -27,7 +27,12 @@
     </ElRow>
 
     <!-- 号卡产品列表 -->
-    <ArtTable :data="filteredData" index style="margin-top: 20px" @selection-change="handleSelectionChange">
+    <ArtTable
+      :data="filteredData"
+      index
+      style="margin-top: 20px"
+      @selection-change="handleSelectionChange"
+    >
       <template #default>
         <ElTableColumn type="selection" width="55" />
         <ElTableColumn label="产品名称" prop="productName" min-width="180" show-overflow-tooltip />
@@ -96,7 +101,7 @@
             :max="currentProduct.stock"
             style="width: 100%"
           />
-          <div style="color: var(--el-text-color-secondary); font-size: 12px; margin-top: 4px">
+          <div style="margin-top: 4px; font-size: 12px; color: var(--el-text-color-secondary)">
             当前库存：{{ currentProduct.stock }} 张
           </div>
         </ElFormItem>
@@ -109,18 +114,41 @@
           </ElRadioGroup>
         </ElFormItem>
 
-        <ElFormItem v-if="assignForm.commissionMode === 'fixed'" label="固定金额" prop="fixedAmount">
-          <ElInputNumber v-model="assignForm.fixedAmount" :min="0" :precision="2" style="width: 100%" />
+        <ElFormItem
+          v-if="assignForm.commissionMode === 'fixed'"
+          label="固定金额"
+          prop="fixedAmount"
+        >
+          <ElInputNumber
+            v-model="assignForm.fixedAmount"
+            :min="0"
+            :precision="2"
+            style="width: 100%"
+          />
           <span style="margin-left: 8px">元/张</span>
         </ElFormItem>
 
         <ElFormItem v-if="assignForm.commissionMode === 'percent'" label="佣金比例" prop="percent">
-          <ElInputNumber v-model="assignForm.percent" :min="0" :max="100" :precision="2" style="width: 100%" />
+          <ElInputNumber
+            v-model="assignForm.percent"
+            :min="0"
+            :max="100"
+            :precision="2"
+            style="width: 100%"
+          />
           <span style="margin-left: 8px">%</span>
         </ElFormItem>
 
-        <ElFormItem v-if="assignForm.commissionMode === 'template'" label="分佣模板" prop="templateId">
-          <ElSelect v-model="assignForm.templateId" placeholder="请选择分佣模板" style="width: 100%">
+        <ElFormItem
+          v-if="assignForm.commissionMode === 'template'"
+          label="分佣模板"
+          prop="templateId"
+        >
+          <ElSelect
+            v-model="assignForm.templateId"
+            placeholder="请选择分佣模板"
+            style="width: 100%"
+          >
             <ElOption
               v-for="template in commissionTemplates"
               :key="template.id"
@@ -128,7 +156,7 @@
               :value="template.id"
             >
               <span>{{ template.templateName }}</span>
-              <span style="float: right; color: var(--el-text-color-secondary); font-size: 12px">
+              <span style="float: right; font-size: 12px; color: var(--el-text-color-secondary)">
                 {{ template.mode === 'fixed' ? `¥${template.value}元/张` : `${template.value}%` }}
               </span>
             </ElOption>
@@ -136,15 +164,26 @@
         </ElFormItem>
 
         <ElFormItem label="特殊折扣" prop="discount">
-          <ElInputNumber v-model="assignForm.discount" :min="0" :max="100" :precision="2" style="width: 100%" />
+          <ElInputNumber
+            v-model="assignForm.discount"
+            :min="0"
+            :max="100"
+            :precision="2"
+            style="width: 100%"
+          />
           <span style="margin-left: 8px">%</span>
-          <div style="color: var(--el-text-color-secondary); font-size: 12px; margin-top: 4px">
+          <div style="margin-top: 4px; font-size: 12px; color: var(--el-text-color-secondary)">
             0表示无折扣，设置后代理商可以此折扣价格销售
           </div>
         </ElFormItem>
 
         <ElFormItem label="备注" prop="remark">
-          <ElInput v-model="assignForm.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
+          <ElInput
+            v-model="assignForm.remark"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入备注信息"
+          />
         </ElFormItem>
       </ElForm>
 
@@ -165,7 +204,9 @@
           <ElTableColumn label="分佣模式" prop="commissionMode" width="120">
             <template #default="scope">
               <ElTag v-if="scope.row.commissionMode === 'fixed'" type="warning">固定佣金</ElTag>
-              <ElTag v-else-if="scope.row.commissionMode === 'percent'" type="success">比例佣金</ElTag>
+              <ElTag v-else-if="scope.row.commissionMode === 'percent'" type="success"
+                >比例佣金</ElTag
+              >
               <ElTag v-else>模板佣金</ElTag>
             </template>
           </ElTableColumn>
@@ -179,7 +220,9 @@
           <ElTableColumn label="操作人" prop="operator" width="100" />
           <ElTableColumn fixed="right" label="操作" width="120">
             <template #default="scope">
-              <el-button link type="danger" @click="handleCancelAssign(scope.row)">取消分配</el-button>
+              <el-button link type="danger" @click="handleCancelAssign(scope.row)"
+                >取消分配</el-button
+              >
             </template>
           </ElTableColumn>
         </template>
@@ -263,7 +306,7 @@
       productName: '移动4G流量卡-月包100GB',
       operator: 'CMCC',
       packageSpec: '100GB/月，有效期1年',
-      price: 80.00,
+      price: 80.0,
       stock: 1000,
       assignedCount: 500
     },
@@ -272,7 +315,7 @@
       productName: '联通5G流量卡-季包300GB',
       operator: 'CUCC',
       packageSpec: '300GB/季，有效期1年',
-      price: 220.00,
+      price: 220.0,
       stock: 500,
       assignedCount: 200
     },
@@ -281,7 +324,7 @@
       productName: '电信物联网卡-年包1TB',
       operator: 'CTCC',
       packageSpec: '1TB/年，有效期2年',
-      price: 800.00,
+      price: 800.0,
       stock: 80,
       assignedCount: 0
     }

src/views/product/sim-card/index.vue

@@ -96,7 +96,12 @@
         <ElRow :gutter="20">
           <ElCol :span="12">
             <ElFormItem label="月租(元)" prop="monthlyFee">
-              <ElInputNumber v-model="form.monthlyFee" :min="0" :precision="2" style="width: 100%" />
+              <ElInputNumber
+                v-model="form.monthlyFee"
+                :min="0"
+                :precision="2"
+                style="width: 100%"
+              />
             </ElFormItem>
           </ElCol>
           <ElCol :span="12">
@@ -106,7 +111,12 @@
           </ElCol>
         </ElRow>
         <ElFormItem label="号卡描述" prop="description">
-          <ElInput v-model="form.description" type="textarea" :rows="3" placeholder="请输入号卡描述" />
+          <ElInput
+            v-model="form.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入号卡描述"
+          />
         </ElFormItem>
         <ElFormItem label="状态">
           <ElSwitch v-model="form.status" active-value="online" inactive-value="offline" />
@@ -199,7 +209,8 @@
     let data = mockData.value
     if (searchQuery.value) {
       data = data.filter(
-        (item) => item.cardName.includes(searchQuery.value) || item.cardCode.includes(searchQuery.value)
+        (item) =>
+          item.cardName.includes(searchQuery.value) || item.cardCode.includes(searchQuery.value)
       )
     }
     if (operatorFilter.value) {

src/views/settings/commission-template/index.vue

@@ -75,7 +75,13 @@
         </ElFormItem>
 
         <ElFormItem v-if="form.commissionMode === 'percent'" label="佣金比例" prop="percent">
-          <ElInputNumber v-model="form.percent" :min="0" :max="100" :precision="2" style="width: 100%" />
+          <ElInputNumber
+            v-model="form.percent"
+            :min="0"
+            :max="100"
+            :precision="2"
+            style="width: 100%"
+          />
           <span style="margin-left: 8px">%</span>
         </ElFormItem>
 
@@ -84,7 +90,12 @@
         </ElFormItem>
 
         <ElFormItem label="分佣说明" prop="description">
-          <ElInput v-model="form.description" type="textarea" :rows="3" placeholder="请输入分佣规则说明" />
+          <ElInput
+            v-model="form.description"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入分佣规则说明"
+          />
         </ElFormItem>
 
         <ElFormItem label="状态">

src/views/settings/developer-api/index.vue

@@ -3,7 +3,7 @@
     <!-- API密钥管理 -->
     <ElCard shadow="never">
       <template #header>
-        <div style="display: flex; justify-content: space-between; align-items: center">
+        <div style="display: flex; align-items: center; justify-content: space-between">
           <span style="font-weight: 500">API密钥管理</span>
           <ElButton type="primary" size="small" @click="showCreateDialog">生成新密钥</ElButton>
         </div>
@@ -14,7 +14,7 @@
           <ElTableColumn label="密钥名称" prop="keyName" />
           <ElTableColumn label="AppKey" prop="appKey" min-width="200">
             <template #default="scope">
-              <div style="display: flex; align-items: center; gap: 8px">
+              <div style="display: flex; gap: 8px; align-items: center">
                 <code style="color: var(--el-color-primary)">{{ scope.row.appKey }}</code>
                 <ElButton link :icon="CopyDocument" @click="copyToClipboard(scope.row.appKey)" />
               </div>
@@ -22,7 +22,7 @@
           </ElTableColumn>
           <ElTableColumn label="AppSecret" prop="appSecret" min-width="200">
             <template #default="scope">
-              <div style="display: flex; align-items: center; gap: 8px">
+              <div style="display: flex; gap: 8px; align-items: center">
                 <code>{{ scope.row.showSecret ? scope.row.appSecret : '••••••••••••••••' }}</code>
                 <ElButton link :icon="View" @click="scope.row.showSecret = !scope.row.showSecret" />
                 <ElButton link :icon="CopyDocument" @click="copyToClipboard(scope.row.appSecret)" />
@@ -31,7 +31,12 @@
           </ElTableColumn>
           <ElTableColumn label="权限" prop="permissions">
             <template #default="scope">
-              <ElTag v-for="(perm, index) in scope.row.permissions" :key="index" size="small" style="margin-right: 4px">
+              <ElTag
+                v-for="(perm, index) in scope.row.permissions"
+                :key="index"
+                size="small"
+                style="margin-right: 4px"
+              >
                 {{ perm }}
               </ElTag>
             </template>
@@ -276,14 +281,14 @@
   .page-content {
     .stat-box {
       padding: 20px;
+      text-align: center;
       background: var(--el-bg-color);
       border-radius: 8px;
-      text-align: center;
 
       .stat-label {
+        margin-bottom: 8px;
         font-size: 14px;
         color: var(--el-text-color-secondary);
-        margin-bottom: 8px;
       }
 
       .stat-value {

src/views/settings/payment-merchant/index.vue

@@ -5,7 +5,13 @@
         <span style="font-weight: 500">支付商户配置</span>
       </template>
 
-      <ElForm ref="formRef" :model="form" :rules="rules" label-width="150px" style="max-width: 900px">
+      <ElForm
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="150px"
+        style="max-width: 900px"
+      >
         <ElDivider content-position="left">基础信息</ElDivider>
 
         <ElFormItem label="商户名称" prop="merchantName">
@@ -65,7 +71,10 @@
         </ElFormItem>
 
         <ElFormItem label="退款回调地址" prop="refundNotifyUrl">
-          <ElInput v-model="form.refundNotifyUrl" placeholder="https://your-domain.com/api/refund-notify">
+          <ElInput
+            v-model="form.refundNotifyUrl"
+            placeholder="https://your-domain.com/api/refund-notify"
+          >
             <template #prepend>POST</template>
           </ElInput>
         </ElFormItem>
@@ -75,19 +84,19 @@
         <ElFormItem label="启用的支付方式">
           <ElCheckboxGroup v-model="form.paymentMethods">
             <ElCheckbox value="wechat">
-              <div style="display: flex; align-items: center; gap: 8px">
-                <span style="color: #09bb07; font-size: 20px">💬</span>
+              <div style="display: flex; gap: 8px; align-items: center">
+                <span style="font-size: 20px; color: #09bb07">💬</span>
                 <span>微信支付</span>
               </div>
             </ElCheckbox>
             <ElCheckbox value="alipay">
-              <div style="display: flex; align-items: center; gap: 8px">
-                <span style="color: #1677ff; font-size: 20px">💳</span>
+              <div style="display: flex; gap: 8px; align-items: center">
+                <span style="font-size: 20px; color: #1677ff">💳</span>
                 <span>支付宝</span>
               </div>
             </ElCheckbox>
             <ElCheckbox value="bank">
-              <div style="display: flex; align-items: center; gap: 8px">
+              <div style="display: flex; gap: 8px; align-items: center">
                 <span style="font-size: 20px">🏦</span>
                 <span>银行卡</span>
               </div>

src/views/system/permission/index.vue

@@ -198,7 +198,6 @@
 
   const tableRef = ref()
   const dialogVisible = ref(false)
-  const detailDialogVisible = ref(false)
   const dialogType = ref('add')
   const currentRow = ref<Permission | null>(null)
   const currentPermissionId = ref<number>(0)
@@ -277,7 +276,8 @@
           activeText: getStatusText(CommonStatus.ENABLED),
           inactiveText: getStatusText(CommonStatus.DISABLED),
           inlinePrompt: true,
-          'onUpdate:modelValue': (val: number) => handleStatusChange(row, val)
+          'onUpdate:modelValue': (val: string | number | boolean) =>
+            handleStatusChange(row, val as number)
         })
       }
     },
@@ -393,7 +393,7 @@
         try {
           await PermissionService.deletePermission(row.ID)
           ElMessage.success('删除成功')
-          getPermissionList()
+          await getPermissionList()
         } catch (error) {
           console.error(error)
         }
@@ -419,8 +419,10 @@
             ElMessage.success('修改成功')
           }
           dialogVisible.value = false
-          formRef.value.resetFields()
-          getPermissionList()
+          if (formRef.value) {
+            formRef.value.resetFields()
+          }
+          await getPermissionList()
         } catch (error) {
           console.error(error)
         } finally {
@@ -443,24 +445,6 @@
     })
   }
 
-  // 获取父级权限名称
-  const getParentPermissionName = (parentId?: number | null) => {
-    if (!parentId) return ''
-
-    const findPermission = (list: Permission[], id: number): string | null => {
-      for (const item of list) {
-        if (item.ID === id) return item.perm_name
-        if (item.children) {
-          const found = findPermission(item.children, id)
-          if (found) return found
-        }
-      }
-      return null
-    }
-
-    return findPermission(permissionList.value, parentId) || ''
-  }
-
   // 状态切换
   const handleStatusChange = async (row: any, newStatus: number) => {
     const oldStatus = row.status
@@ -481,9 +465,3 @@
     getPermissionList()
   })
 </script>
-
-<style lang="scss" scoped>
-  .permission-page {
-    // 权限管理页面样式
-  }
-</style>

src/views/system/role/index.vue

@@ -40,69 +40,81 @@
           </template>
         </ArtTable>
 
-    <!-- 新增/编辑对话框 -->
-    <ElDialog
-      v-model="dialogVisible"
-      :title="dialogType === 'add' ? '新增角色' : '编辑角色'"
-      width="30%"
-    >
-      <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
-        <ElFormItem label="角色名称" prop="role_name">
-          <ElInput v-model="form.role_name" placeholder="请输入角色名称" />
-        </ElFormItem>
-        <ElFormItem label="角色描述" prop="role_desc">
-          <ElInput v-model="form.role_desc" type="textarea" :rows="3" placeholder="请输入角色描述" />
-        </ElFormItem>
-        <ElFormItem label="角色类型" prop="role_type">
-          <ElSelect v-model="form.role_type" placeholder="请选择角色类型" style="width: 100%">
-            <ElOption label="平台角色" :value="1" />
-            <ElOption label="客户角色" :value="2" />
-          </ElSelect>
-        </ElFormItem>
-        <ElFormItem label="状态">
-          <ElSwitch
-            v-model="form.status"
-            :active-value="CommonStatus.ENABLED"
-            :inactive-value="CommonStatus.DISABLED"
-          />
-        </ElFormItem>
-      </ElForm>
-      <template #footer>
-        <div class="dialog-footer">
-          <ElButton @click="dialogVisible = false">取消</ElButton>
-          <ElButton type="primary" @click="handleSubmit(formRef)" :loading="submitLoading">
-            提交
-          </ElButton>
-        </div>
-      </template>
-    </ElDialog>
-
-    <!-- 分配权限对话框 -->
-    <ElDialog
-      v-model="permissionDialogVisible"
-      title="分配权限"
-      width="500px"
-    >
-      <ElCheckboxGroup v-model="selectedPermissions">
-        <div v-for="permission in allPermissions" :key="permission.ID" style="margin-bottom: 12px;">
-          <ElCheckbox :label="permission.ID">
-            {{ permission.perm_name }}
-            <ElTag :type="permission.perm_type === 1 ? '' : 'success'" size="small" style="margin-left: 8px;">
-              {{ permission.perm_type === 1 ? '菜单' : '按钮' }}
-            </ElTag>
-          </ElCheckbox>
-        </div>
-      </ElCheckboxGroup>
-      <template #footer>
-        <div class="dialog-footer">
-          <ElButton @click="permissionDialogVisible = false">取消</ElButton>
-          <ElButton type="primary" @click="handleAssignPermissions" :loading="permissionSubmitLoading">
-            提交
-          </ElButton>
-        </div>
-      </template>
-    </ElDialog>
+        <!-- 新增/编辑对话框 -->
+        <ElDialog
+          v-model="dialogVisible"
+          :title="dialogType === 'add' ? '新增角色' : '编辑角色'"
+          width="30%"
+        >
+          <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
+            <ElFormItem label="角色名称" prop="role_name">
+              <ElInput v-model="form.role_name" placeholder="请输入角色名称" />
+            </ElFormItem>
+            <ElFormItem label="角色描述" prop="role_desc">
+              <ElInput
+                v-model="form.role_desc"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入角色描述"
+              />
+            </ElFormItem>
+            <ElFormItem label="角色类型" prop="role_type">
+              <ElSelect v-model="form.role_type" placeholder="请选择角色类型" style="width: 100%">
+                <ElOption label="平台角色" :value="1" />
+                <ElOption label="客户角色" :value="2" />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem label="状态">
+              <ElSwitch
+                v-model="form.status"
+                :active-value="CommonStatus.ENABLED"
+                :inactive-value="CommonStatus.DISABLED"
+              />
+            </ElFormItem>
+          </ElForm>
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton @click="dialogVisible = false">取消</ElButton>
+              <ElButton type="primary" @click="handleSubmit(formRef)" :loading="submitLoading">
+                提交
+              </ElButton>
+            </div>
+          </template>
+        </ElDialog>
 
+        <!-- 分配权限对话框 -->
+        <ElDialog v-model="permissionDialogVisible" title="分配权限" width="500px">
+          <ElCheckboxGroup v-model="selectedPermissions">
+            <div
+              v-for="permission in allPermissions"
+              :key="permission.ID"
+              style="margin-bottom: 12px"
+            >
+              <ElCheckbox :label="permission.ID">
+                {{ permission.perm_name }}
+                <ElTag
+                  :type="permission.perm_type === 1 ? 'info' : 'success'"
+                  size="small"
+                  style="margin-left: 8px"
+                >
+                  {{ permission.perm_type === 1 ? '菜单' : '按钮' }}
+                </ElTag>
+              </ElCheckbox>
+            </div>
+          </ElCheckboxGroup>
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton @click="permissionDialogVisible = false">取消</ElButton>
+              <ElButton
+                type="primary"
+                @click="handleAssignPermissions"
+                :loading="permissionSubmitLoading"
+              >
+                提交
+              </ElButton>
+            </div>
+          </template>
+        </ElDialog>
       </ElCard>
     </div>
   </ArtTableFullScreen>
@@ -111,10 +123,17 @@
 <script setup lang="ts">
   import { h } from 'vue'
   import { RoleService, PermissionService } from '@/api/modules'
-  import { ElMessage, ElMessageBox, ElTag, ElCheckbox, ElCheckboxGroup, ElSwitch } from 'element-plus'
+  import {
+    ElMessage,
+    ElMessageBox,
+    ElTag,
+    ElCheckbox,
+    ElCheckboxGroup,
+    ElSwitch
+  } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   import type { PlatformRole, Permission } from '@/types/api'
-  import type { SearchFormItem, SearchChangeParams } from '@/types'
+  import type { SearchFormItem } from '@/types'
   import { useCheckedColumns } from '@/composables/useCheckedColumns'
   import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
   import { formatDateTime } from '@/utils/business/format'
@@ -215,10 +234,8 @@
       label: '角色类型',
       width: 100,
       formatter: (row: any) => {
-        return h(
-          ElTag,
-          { type: row.role_type === 1 ? 'primary' : 'success' },
-          () => (row.role_type === 1 ? '平台角色' : '客户角色')
+        return h(ElTag, { type: row.role_type === 1 ? 'primary' : 'success' }, () =>
+          row.role_type === 1 ? '平台角色' : '客户角色'
         )
       }
     },
@@ -234,7 +251,8 @@
           activeText: getStatusText(CommonStatus.ENABLED),
           inactiveText: getStatusText(CommonStatus.DISABLED),
           inlinePrompt: true,
-          'onUpdate:modelValue': (val: number) => handleStatusChange(row, val)
+          'onUpdate:modelValue': (val: string | number | boolean) =>
+            handleStatusChange(row, val as number)
         })
       }
     },
@@ -325,10 +343,10 @@
     try {
       // 对比原始权限和当前选中的权限，找出需要新增和移除的权限
       const addedPermissions = selectedPermissions.value.filter(
-        id => !originalPermissions.value.includes(id)
+        (id) => !originalPermissions.value.includes(id)
       )
       const removedPermissions = originalPermissions.value.filter(
-        id => !selectedPermissions.value.includes(id)
+        (id) => !selectedPermissions.value.includes(id)
       )
 
       // 使用 Promise.all 并发执行新增和移除操作
@@ -341,7 +359,7 @@
 
       // 如果有移除的权限，调用移除接口
       if (removedPermissions.length > 0) {
-        removedPermissions.forEach(permId => {
+        removedPermissions.forEach((permId) => {
           promises.push(RoleService.removePermission(currentRoleId.value, permId))
         })
       }
@@ -445,7 +463,7 @@
         try {
           await RoleService.deleteRole(row.ID)
           ElMessage.success('删除成功')
-          getTableData()
+          await getTableData()
         } catch (error) {
           console.error(error)
         }
@@ -480,7 +498,7 @@
 
           dialogVisible.value = false
           formEl.resetFields()
-          getTableData()
+          await getTableData()
         } catch (error) {
           console.error(error)
         } finally {
@@ -496,7 +514,7 @@
     // 先更新UI
     row.status = newStatus
     try {
-      await RoleService.updateRole(row.ID, { status: newStatus })
+      await RoleService.updateRoleStatus(row.ID, newStatus as 0 | 1)
       ElMessage.success('状态切换成功')
     } catch (error) {
       // 切换失败，恢复原状态
@@ -506,9 +524,3 @@
   }
 
 </script>
-
-<style lang="scss" scoped>
-  .role-page {
-    // 可以在这里添加角色页面特定样式
-  }
-</style>

src/views/system/user-center/index.vue

@@ -3,9 +3,9 @@
     <div class="content">
       <div class="left-wrap">
         <div class="user-wrap box-style">
-          <img class="bg" src="@imgs/user/bg.webp" />
-          <img class="avatar" src="@imgs/user/avatar.webp" />
-          <h2 class="name">{{ userInfo.userName }}</h2>
+          <img class="bg" src="@imgs/user/bg.webp" alt="背景" />
+          <img class="avatar" src="@imgs/user/avatar.webp" alt="头像" />
+          <h2 class="name">{{ userInfo.username }}</h2>
           <p class="des">Art Design Pro 是一款漂亮的后台管理系统模版.</p>
 
           <div class="outer-info">
@@ -304,7 +304,6 @@
 
           .outer-info {
             width: 300px;
-            margin: auto;
             margin-top: 30px;
             text-align: left;