fetch(add): 账户管理

src/api/BaseService.ts

@@ -84,10 +84,7 @@ export class BaseService {
    * @param url 请求URL
    * @param params 请求参数
    */
-  protected static getOne<T>(
-    url: string,
-    params?: Record<string, any>
-  ): Promise<BaseResponse<T>> {
+  protected static getOne<T>(url: string, params?: Record<string, any>): Promise<BaseResponse<T>> {
     return this.get<BaseResponse<T>>(url, params)
   }
 
@@ -96,10 +93,7 @@ export class BaseService {
    * @param url 请求URL
    * @param params 请求参数
    */
-  protected static getList<T>(
-    url: string,
-    params?: Record<string, any>
-  ): Promise<ListResponse<T>> {
+  protected static getList<T>(url: string, params?: Record<string, any>): Promise<ListResponse<T>> {
     return this.get<ListResponse<T>>(url, params)
   }
 
@@ -200,19 +194,21 @@ export class BaseService {
     params?: Record<string, any>,
     fileName?: string
   ): Promise<void> {
-    return request.get({
-      url,
-      params,
-      responseType: 'blob'
-    }).then((blob: any) => {
-      const downloadUrl = window.URL.createObjectURL(blob)
-      const link = document.createElement('a')
-      link.href = downloadUrl
-      link.download = fileName || 'download'
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
-      window.URL.revokeObjectURL(downloadUrl)
-    })
+    return request
+      .get({
+        url,
+        params,
+        responseType: 'blob'
+      })
+      .then((blob: any) => {
+        const downloadUrl = window.URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = downloadUrl
+        link.download = fileName || 'download'
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        window.URL.revokeObjectURL(downloadUrl)
+      })
   }
 }

src/api/authApi.ts

@@ -2,7 +2,13 @@
  * 认证相关 API
  */
 import request from '@/utils/http'
-import { BaseResponse, LoginParams, LoginData, UserInfo, UserInfoResponse, RefreshTokenData } from '@/types/api'
+import {
+  BaseResponse,
+  LoginParams,
+  LoginData,
+  UserInfoResponse,
+  RefreshTokenData
+} from '@/types/api'
 
 export class AuthService {
   /**

src/api/modules/account.ts

@@ -19,9 +19,7 @@ export class AccountService extends BaseService {
    * GET /api/admin/accounts
    * @param params 查询参数
    */
-  static getAccounts(
-    params?: AccountQueryParams
-  ): Promise<PaginationResponse<PlatformAccount>> {
+  static getAccounts(params?: AccountQueryParams): Promise<PaginationResponse<PlatformAccount>> {
     return this.getPage<PlatformAccount>('/api/admin/accounts', params)
   }
 

src/api/modules/card.ts

@@ -221,9 +221,7 @@ export class CardService extends BaseService {
    * 批量充值记录列表
    * @param params 查询参数
    */
-  static getBatchRechargeRecords(
-    params?: any
-  ): Promise<PaginationResponse<BatchRechargeRecord>> {
+  static getBatchRechargeRecords(params?: any): Promise<PaginationResponse<BatchRechargeRecord>> {
     return this.getPage<BatchRechargeRecord>('/api/cards/batch-recharge-records', params)
   }
 

src/api/modules/commission.ts

@@ -0,0 +1,175 @@
+/**
+ * 佣金管理相关 API
+ */
+
+import { BaseService } from '../BaseService'
+import type { BaseResponse } from '@/types/api'
+import type {
+  WithdrawalRequestQueryParams,
+  WithdrawalRequestPageResult,
+  ApproveWithdrawalParams,
+  RejectWithdrawalParams,
+  WithdrawalSettingListResult,
+  WithdrawalSettingItem,
+  CreateWithdrawalSettingParams,
+  CommissionRecordQueryParams,
+  MyCommissionRecordPageResult,
+  MyCommissionSummary,
+  SubmitWithdrawalParams,
+  ShopCommissionRecordPageResult,
+  ShopCommissionSummaryQueryParams,
+  ShopCommissionSummaryPageResult
+} from '@/types/api/commission'
+
+export class CommissionService extends BaseService {
+  // ==================== 提现申请管理 ====================
+
+  /**
+   * 获取提现申请列表
+   * GET /api/admin/commission/withdrawal-requests
+   */
+  static getWithdrawalRequests(
+    params?: WithdrawalRequestQueryParams
+  ): Promise<BaseResponse<WithdrawalRequestPageResult>> {
+    return this.get<BaseResponse<WithdrawalRequestPageResult>>(
+      '/api/admin/commission/withdrawal-requests',
+      params
+    )
+  }
+
+  /**
+   * 审批通过提现申请
+   * POST /api/admin/commission/withdrawal-requests/{id}/approve
+   */
+  static approveWithdrawal(id: number, params?: ApproveWithdrawalParams): Promise<BaseResponse> {
+    return this.post<BaseResponse>(
+      `/api/admin/commission/withdrawal-requests/${id}/approve`,
+      params
+    )
+  }
+
+  /**
+   * 拒绝提现申请
+   * POST /api/admin/commission/withdrawal-requests/{id}/reject
+   */
+  static rejectWithdrawal(id: number, params: RejectWithdrawalParams): Promise<BaseResponse> {
+    return this.post<BaseResponse>(`/api/admin/commission/withdrawal-requests/${id}/reject`, params)
+  }
+
+  // ==================== 提现配置管理 ====================
+
+  /**
+   * 获取提现配置列表
+   * GET /api/admin/commission/withdrawal-settings
+   */
+  static getWithdrawalSettings(): Promise<BaseResponse<WithdrawalSettingListResult>> {
+    return this.get<BaseResponse<WithdrawalSettingListResult>>(
+      '/api/admin/commission/withdrawal-settings'
+    )
+  }
+
+  /**
+   * 新增提现配置
+   * POST /api/admin/commission/withdrawal-settings
+   */
+  static createWithdrawalSetting(params: CreateWithdrawalSettingParams): Promise<BaseResponse> {
+    return this.post<BaseResponse>('/api/admin/commission/withdrawal-settings', params)
+  }
+
+  /**
+   * 获取当前生效的提现配置
+   * GET /api/admin/commission/withdrawal-settings/current
+   */
+  static getCurrentWithdrawalSetting(): Promise<BaseResponse<WithdrawalSettingItem>> {
+    return this.get<BaseResponse<WithdrawalSettingItem>>(
+      '/api/admin/commission/withdrawal-settings/current'
+    )
+  }
+
+  // ==================== 我的佣金 ====================
+
+  /**
+   * 获取我的佣金明细
+   * GET /api/admin/my/commission-records
+   */
+  static getMyCommissionRecords(
+    params?: CommissionRecordQueryParams
+  ): Promise<BaseResponse<MyCommissionRecordPageResult>> {
+    return this.get<BaseResponse<MyCommissionRecordPageResult>>(
+      '/api/admin/my/commission-records',
+      params
+    )
+  }
+
+  /**
+   * 获取我的佣金概览
+   * GET /api/admin/my/commission-summary
+   */
+  static getMyCommissionSummary(): Promise<BaseResponse<MyCommissionSummary>> {
+    return this.get<BaseResponse<MyCommissionSummary>>('/api/admin/my/commission-summary')
+  }
+
+  /**
+   * 获取我的提现记录
+   * GET /api/admin/my/withdrawal-requests
+   */
+  static getMyWithdrawalRequests(
+    params?: WithdrawalRequestQueryParams
+  ): Promise<BaseResponse<WithdrawalRequestPageResult>> {
+    return this.get<BaseResponse<WithdrawalRequestPageResult>>(
+      '/api/admin/my/withdrawal-requests',
+      params
+    )
+  }
+
+  /**
+   * 发起提现申请
+   * POST /api/admin/my/withdrawal-requests
+   */
+  static submitWithdrawalRequest(params: SubmitWithdrawalParams): Promise<BaseResponse> {
+    return this.post<BaseResponse>('/api/admin/my/withdrawal-requests', params)
+  }
+
+  // ==================== 代理商佣金管理 ====================
+
+  /**
+   * 获取代理商佣金明细
+   * GET /api/admin/shops/{shop_id}/commission-records
+   */
+  static getShopCommissionRecords(
+    shopId: number,
+    params?: CommissionRecordQueryParams
+  ): Promise<BaseResponse<ShopCommissionRecordPageResult>> {
+    return this.get<BaseResponse<ShopCommissionRecordPageResult>>(
+      `/api/admin/shops/${shopId}/commission-records`,
+      params
+    )
+  }
+
+  /**
+   * 获取代理商提现记录
+   * GET /api/admin/shops/{shop_id}/withdrawal-requests
+   */
+  static getShopWithdrawalRequests(
+    shopId: number,
+    params?: WithdrawalRequestQueryParams
+  ): Promise<BaseResponse<WithdrawalRequestPageResult>> {
+    return this.get<BaseResponse<WithdrawalRequestPageResult>>(
+      `/api/admin/shops/${shopId}/withdrawal-requests`,
+      params
+    )
+  }
+
+  /**
+   * 获取代理商佣金汇总列表
+   * GET /api/admin/shops/commission-summary
+   */
+  static getShopCommissionSummary(
+    params?: ShopCommissionSummaryQueryParams
+  ): Promise<BaseResponse<ShopCommissionSummaryPageResult>> {
+    return this.get<BaseResponse<ShopCommissionSummaryPageResult>>(
+      '/api/admin/shops/commission-summary',
+      params
+    )
+  }
+}

src/api/modules/customerAccount.ts

@@ -0,0 +1,65 @@
+/**
+ * 客户账号管理 API
+ */
+
+import { BaseService } from '../BaseService'
+import type { BaseResponse } from '@/types/api'
+import type {
+  CustomerAccountItem,
+  CustomerAccountPageResult,
+  CustomerAccountQueryParams,
+  CreateCustomerAccountParams,
+  UpdateCustomerAccountParams,
+  UpdateCustomerAccountPasswordParams,
+  UpdateCustomerAccountStatusParams
+} from '@/types/api/customerAccount'
+
+export class CustomerAccountService extends BaseService {
+  /**
+   * 查询客户账号列表
+   */
+  static getCustomerAccounts(
+    params?: CustomerAccountQueryParams
+  ): Promise<BaseResponse<CustomerAccountPageResult>> {
+    return this.get<BaseResponse<CustomerAccountPageResult>>('/api/admin/customer-accounts', params)
+  }
+
+  /**
+   * 新增代理商账号
+   */
+  static createCustomerAccount(
+    data: CreateCustomerAccountParams
+  ): Promise<BaseResponse<CustomerAccountItem>> {
+    return this.post<BaseResponse<CustomerAccountItem>>('/api/admin/customer-accounts', data)
+  }
+
+  /**
+   * 编辑账号
+   */
+  static updateCustomerAccount(
+    id: number,
+    data: UpdateCustomerAccountParams
+  ): Promise<BaseResponse<CustomerAccountItem>> {
+    return this.put<BaseResponse<CustomerAccountItem>>(`/api/admin/customer-accounts/${id}`, data)
+  }
+
+  /**
+   * 修改账号密码
+   */
+  static updateCustomerAccountPassword(
+    id: number,
+    data: UpdateCustomerAccountPasswordParams
+  ): Promise<BaseResponse> {
+    return this.put<BaseResponse>(`/api/admin/customer-accounts/${id}/password`, data)
+  }
+
+  /**
+   * 修改账号状态
+   */
+  static updateCustomerAccountStatus(
+    id: number,
+    data: UpdateCustomerAccountStatusParams
+  ): Promise<BaseResponse> {
+    return this.put<BaseResponse>(`/api/admin/customer-accounts/${id}/status`, data)
+  }
+}

src/api/modules/enterprise.ts

@@ -0,0 +1,66 @@
+/**
+ * 企业客户管理 API
+ */
+
+import { BaseService } from '../BaseService'
+import type { BaseResponse } from '@/types/api'
+import type {
+  EnterpriseItem,
+  EnterprisePageResult,
+  EnterpriseQueryParams,
+  CreateEnterpriseParams,
+  UpdateEnterpriseParams,
+  UpdateEnterprisePasswordParams,
+  UpdateEnterpriseStatusParams,
+  CreateEnterpriseResponse
+} from '@/types/api/enterprise'
+
+export class EnterpriseService extends BaseService {
+  /**
+   * 查询企业客户列表
+   */
+  static getEnterprises(
+    params?: EnterpriseQueryParams
+  ): Promise<BaseResponse<EnterprisePageResult>> {
+    return this.get<BaseResponse<EnterprisePageResult>>('/api/admin/enterprises', params)
+  }
+
+  /**
+   * 新增企业客户
+   */
+  static createEnterprise(
+    data: CreateEnterpriseParams
+  ): Promise<BaseResponse<CreateEnterpriseResponse>> {
+    return this.post<BaseResponse<CreateEnterpriseResponse>>('/api/admin/enterprises', data)
+  }
+
+  /**
+   * 编辑企业信息
+   */
+  static updateEnterprise(
+    id: number,
+    data: UpdateEnterpriseParams
+  ): Promise<BaseResponse<EnterpriseItem>> {
+    return this.put<BaseResponse<EnterpriseItem>>(`/api/admin/enterprises/${id}`, data)
+  }
+
+  /**
+   * 修改企业账号密码
+   */
+  static updateEnterprisePassword(
+    id: number,
+    data: UpdateEnterprisePasswordParams
+  ): Promise<BaseResponse> {
+    return this.put<BaseResponse>(`/api/admin/enterprises/${id}/password`, data)
+  }
+
+  /**
+   * 启用/禁用企业
+   */
+  static updateEnterpriseStatus(
+    id: number,
+    data: UpdateEnterpriseStatusParams
+  ): Promise<BaseResponse> {
+    return this.put<BaseResponse>(`/api/admin/enterprises/${id}/status`, data)
+  }
+}

src/api/modules/index.ts

@@ -14,9 +14,11 @@ export { PlatformAccountService } from './platformAccount'
 export { ShopAccountService } from './shopAccount'
 export { ShopService } from './shop'
 export { CardService } from './card'
+export { CommissionService } from './commission'
+export { EnterpriseService } from './enterprise'
+export { CustomerAccountService } from './customerAccount'
 
 // TODO: 按需添加其他业务模块
 // export { PackageService } from './package'
 // export { DeviceService } from './device'
-// export { CommissionService } from './commission'
 // export { SettingService } from './setting'

src/api/modules/permission.ts

@@ -19,9 +19,7 @@ export class PermissionService extends BaseService {
    * GET /api/admin/permissions
    * @param params 查询参数
    */
-  static getPermissions(
-    params?: PermissionQueryParams
-  ): Promise<PaginationResponse<Permission>> {
+  static getPermissions(params?: PermissionQueryParams): Promise<PaginationResponse<Permission>> {
     return this.getPage<Permission>('/api/admin/permissions', params)
   }
 
@@ -58,10 +56,7 @@ export class PermissionService extends BaseService {
    * @param id 权限ID
    * @param data 权限数据
    */
-  static updatePermission(
-    id: number,
-    data: UpdatePermissionParams
-  ): Promise<BaseResponse> {
+  static updatePermission(id: number, data: UpdatePermissionParams): Promise<BaseResponse> {
     return this.update(`/api/admin/permissions/${id}`, data)
   }
 

src/api/modules/platformAccount.ts

@@ -36,10 +36,7 @@ export class PlatformAccountService extends BaseService {
   static createPlatformAccount(
     data: CreatePlatformAccountParams
   ): Promise<BaseResponse<PlatformAccountResponse>> {
-    return this.post<BaseResponse<PlatformAccountResponse>>(
-      '/api/admin/platform-accounts',
-      data
-    )
+    return this.post<BaseResponse<PlatformAccountResponse>>('/api/admin/platform-accounts', data)
   }
 
   /**
@@ -48,13 +45,8 @@ export class PlatformAccountService extends BaseService {
    * @param accountId 账号ID
    * @param roleId 角色ID
    */
-  static removeRoleFromPlatformAccount(
-    accountId: number,
-    roleId: number
-  ): Promise<BaseResponse> {
-    return this.delete<BaseResponse>(
-      `/api/admin/platform-accounts/${accountId}/roles/${roleId}`
-    )
+  static removeRoleFromPlatformAccount(accountId: number, roleId: number): Promise<BaseResponse> {
+    return this.delete<BaseResponse>(`/api/admin/platform-accounts/${accountId}/roles/${roleId}`)
   }
 
   /**
@@ -71,9 +63,7 @@ export class PlatformAccountService extends BaseService {
    * GET /api/admin/platform-accounts/{id}
    * @param id 账号ID
    */
-  static getPlatformAccountDetail(
-    id: number
-  ): Promise<BaseResponse<PlatformAccountResponse>> {
+  static getPlatformAccountDetail(id: number): Promise<BaseResponse<PlatformAccountResponse>> {
     return this.getOne<PlatformAccountResponse>(`/api/admin/platform-accounts/${id}`)
   }
 
@@ -111,9 +101,7 @@ export class PlatformAccountService extends BaseService {
    * GET /api/admin/platform-accounts/{id}/roles
    * @param id 账号ID
    */
-  static getPlatformAccountRoles(
-    id: number
-  ): Promise<BaseResponse<PlatformAccountRoleResponse[]>> {
+  static getPlatformAccountRoles(id: number): Promise<BaseResponse<PlatformAccountRoleResponse[]>> {
     return this.get<BaseResponse<PlatformAccountRoleResponse[]>>(
       `/api/admin/platform-accounts/${id}/roles`
     )
@@ -125,10 +113,7 @@ export class PlatformAccountService extends BaseService {
    * @param id 账号ID
    * @param data 角色ID列表
    */
-  static assignRolesToPlatformAccount(
-    id: number,
-    data: AssignRolesParams
-  ): Promise<BaseResponse> {
+  static assignRolesToPlatformAccount(id: number, data: AssignRolesParams): Promise<BaseResponse> {
     return this.post<BaseResponse>(`/api/admin/platform-accounts/${id}/roles`, data)
   }
 

src/api/modules/shopAccount.ts

@@ -31,7 +31,9 @@ export class ShopAccountService extends BaseService {
    * POST /api/admin/shop-accounts
    * @param data 代理账号数据
    */
-  static createShopAccount(data: CreateShopAccountParams): Promise<BaseResponse<ShopAccountResponse>> {
+  static createShopAccount(
+    data: CreateShopAccountParams
+  ): Promise<BaseResponse<ShopAccountResponse>> {
     return this.post<BaseResponse<ShopAccountResponse>>('/api/admin/shop-accounts', data)
   }
 

src/components/business/AgentSelector.vue

@@ -24,104 +24,104 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import type { Agent } from '@/types/api'
+  import { ref, computed, onMounted } from 'vue'
+  import type { Agent } from '@/types/api'
 
-interface Props {
-  modelValue?: string | number | (string | number)[]
-  placeholder?: string
-  clearable?: boolean
-  disabled?: boolean
-  filterable?: boolean
-  checkStrictly?: boolean
-  multiple?: boolean
-  size?: 'large' | 'default' | 'small'
-  // 预加载的代理商树数据
-  agents?: Agent[]
-  // 远程获取方法
-  fetchMethod?: () => Promise<Agent[]>
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: string | number | (string | number)[] | undefined): void
-  (e: 'change', value: string | number | (string | number)[] | undefined): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: '请选择代理商',
-  clearable: true,
-  disabled: false,
-  filterable: true,
-  checkStrictly: false,
-  multiple: false,
-  size: 'default'
-})
-
-const emit = defineEmits<Emits>()
-
-const loading = ref(false)
-const agentTreeData = ref<Agent[]>([])
-
-const treeProps = {
-  value: 'id',
-  label: 'name',
-  children: 'children'
-}
-
-const selectedValue = computed({
-  get: () => props.modelValue,
-  set: (val) => {
-    emit('update:modelValue', val)
+  interface Props {
+    modelValue?: string | number | (string | number)[]
+    placeholder?: string
+    clearable?: boolean
+    disabled?: boolean
+    filterable?: boolean
+    checkStrictly?: boolean
+    multiple?: boolean
+    size?: 'large' | 'default' | 'small'
+    // 预加载的代理商树数据
+    agents?: Agent[]
+    // 远程获取方法
+    fetchMethod?: () => Promise<Agent[]>
   }
-})
 
-const handleChange = (value: string | number | (string | number)[] | undefined) => {
-  emit('change', value)
-}
-
-const handleVisibleChange = (visible: boolean) => {
-  if (visible && agentTreeData.value.length === 0) {
-    loadAgents()
+  interface Emits {
+    (e: 'update:modelValue', value: string | number | (string | number)[] | undefined): void
+    (e: 'change', value: string | number | (string | number)[] | undefined): void
   }
-}
 
-const loadAgents = async () => {
-  if (props.agents) {
-    agentTreeData.value = props.agents
-  } else if (props.fetchMethod) {
-    loading.value = true
-    try {
-      agentTreeData.value = await props.fetchMethod()
-    } finally {
-      loading.value = false
+  const props = withDefaults(defineProps<Props>(), {
+    placeholder: '请选择代理商',
+    clearable: true,
+    disabled: false,
+    filterable: true,
+    checkStrictly: false,
+    multiple: false,
+    size: 'default'
+  })
+
+  const emit = defineEmits<Emits>()
+
+  const loading = ref(false)
+  const agentTreeData = ref<Agent[]>([])
+
+  const treeProps = {
+    value: 'id',
+    label: 'name',
+    children: 'children'
+  }
+
+  const selectedValue = computed({
+    get: () => props.modelValue,
+    set: (val) => {
+      emit('update:modelValue', val)
+    }
+  })
+
+  const handleChange = (value: string | number | (string | number)[] | undefined) => {
+    emit('change', value)
+  }
+
+  const handleVisibleChange = (visible: boolean) => {
+    if (visible && agentTreeData.value.length === 0) {
+      loadAgents()
     }
   }
-}
 
-onMounted(() => {
-  if (props.agents) {
-    agentTreeData.value = props.agents
+  const loadAgents = async () => {
+    if (props.agents) {
+      agentTreeData.value = props.agents
+    } else if (props.fetchMethod) {
+      loading.value = true
+      try {
+        agentTreeData.value = await props.fetchMethod()
+      } finally {
+        loading.value = false
+      }
+    }
   }
-})
+
+  onMounted(() => {
+    if (props.agents) {
+      agentTreeData.value = props.agents
+    }
+  })
 </script>
 
 <style scoped lang="scss">
-.agent-node {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  .agent-node {
+    display: flex;
+    gap: 8px;
+    align-items: center;
 
-  .agent-name {
-    font-weight: 500;
-    color: var(--el-text-color-primary);
-  }
+    .agent-name {
+      font-weight: 500;
+      color: var(--el-text-color-primary);
+    }
 
-  .agent-level {
-    font-size: 12px;
-    padding: 2px 8px;
-    border-radius: 4px;
-    background-color: var(--el-color-primary-light-9);
-    color: var(--el-color-primary);
+    .agent-level {
+      padding: 2px 8px;
+      font-size: 12px;
+      color: var(--el-color-primary);
+      background-color: var(--el-color-primary-light-9);
+      border-radius: 4px;
+    }
   }
-}
 </style>

src/components/business/BatchOperationDialog.vue

@@ -42,112 +42,106 @@
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="handleCancel">取消</el-button>
-        <el-button
-          type="primary"
-          :loading="loading"
-          @click="handleConfirm"
-        >
-          确定
-        </el-button>
+        <el-button type="primary" :loading="loading" @click="handleConfirm"> 确定 </el-button>
       </div>
     </template>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
-import { ElMessage } from 'element-plus'
+  import { ref, computed } from 'vue'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import { ElMessage } from 'element-plus'
 
-interface Props {
-  modelValue: boolean
-  title: string
-  width?: string | number
-  selectedCount?: number
-  confirmMessage?: string
-  formRules?: FormRules
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: boolean): void
-  (e: 'confirm', formData: Record<string, any>): void | Promise<void>
-  (e: 'cancel'): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  width: '600px',
-  selectedCount: 0
-})
-
-const emit = defineEmits<Emits>()
-
-const formRef = ref<FormInstance>()
-const formData = ref<Record<string, any>>({})
-const loading = ref(false)
-
-const visible = computed({
-  get: () => props.modelValue,
-  set: (val) => {
-    emit('update:modelValue', val)
+  interface Props {
+    modelValue: boolean
+    title: string
+    width?: string | number
+    selectedCount?: number
+    confirmMessage?: string
+    formRules?: FormRules
   }
-})
 
-const handleConfirm = async () => {
-  if (!formRef.value) return
+  interface Emits {
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'confirm', formData: Record<string, any>): void | Promise<void>
+    (e: 'cancel'): void
+  }
 
-  try {
-    await formRef.value.validate()
+  const props = withDefaults(defineProps<Props>(), {
+    width: '600px',
+    selectedCount: 0
+  })
 
-    loading.value = true
-    try {
-      await emit('confirm', formData.value)
-      visible.value = false
-      ElMessage.success('操作成功')
-    } catch (error) {
-      console.error('批量操作失败:', error)
-      ElMessage.error('操作失败')
-    } finally {
-      loading.value = false
+  const emit = defineEmits<Emits>()
+
+  const formRef = ref<FormInstance>()
+  const formData = ref<Record<string, any>>({})
+  const loading = ref(false)
+
+  const visible = computed({
+    get: () => props.modelValue,
+    set: (val) => {
+      emit('update:modelValue', val)
+    }
+  })
+
+  const handleConfirm = async () => {
+    if (!formRef.value) return
+
+    try {
+      await formRef.value.validate()
+
+      loading.value = true
+      try {
+        await emit('confirm', formData.value)
+        visible.value = false
+        ElMessage.success('操作成功')
+      } catch (error) {
+        console.error('批量操作失败:', error)
+        ElMessage.error('操作失败')
+      } finally {
+        loading.value = false
+      }
+    } catch {
+      ElMessage.warning('请检查表单填写')
     }
-  } catch {
-    ElMessage.warning('请检查表单填写')
   }
-}
 
-const handleCancel = () => {
-  visible.value = false
-  emit('cancel')
-}
+  const handleCancel = () => {
+    visible.value = false
+    emit('cancel')
+  }
 
-const handleClosed = () => {
-  formRef.value?.resetFields()
-  formData.value = {}
-}
+  const handleClosed = () => {
+    formRef.value?.resetFields()
+    formData.value = {}
+  }
 
-// 暴露方法供父组件调用
-defineExpose({
-  formData
-})
+  // 暴露方法供父组件调用
+  defineExpose({
+    formData
+  })
 </script>
 
 <style scoped lang="scss">
-.batch-operation-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+  .batch-operation-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
 
-  .operation-form {
-    margin-top: 16px;
+    .operation-form {
+      margin-top: 16px;
+    }
+
+    .confirm-alert {
+      margin-top: 8px;
+    }
   }
 
-  .confirm-alert {
-    margin-top: 8px;
+  .dialog-footer {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
   }
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
 </style>

src/components/business/CardOperationDialog.vue

@@ -6,18 +6,9 @@
     align-center
     :before-close="handleClose"
   >
-    <ElForm
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-    >
+    <ElForm ref="formRef" :model="formData" :rules="formRules" label-width="100px">
       <!-- 选择下拉项表单项 -->
-      <ElFormItem
-        v-if="showSelect"
-        :label="selectLabel"
-        :prop="selectProp"
-      >
+      <ElFormItem v-if="showSelect" :label="selectLabel" :prop="selectProp">
         <ElSelect
           v-model="formData[selectProp]"
           :placeholder="selectPlaceholder"
@@ -38,25 +29,14 @@
       </ElFormItem>
 
       <!-- 充值金额输入框 -->
-      <ElFormItem
-        v-if="showAmount"
-        label="充值金额"
-        prop="amount"
-      >
-        <ElInput
-          v-model="formData.amount"
-          placeholder="请输入充值金额"
-        >
+      <ElFormItem v-if="showAmount" label="充值金额" prop="amount">
+        <ElInput v-model="formData.amount" placeholder="请输入充值金额">
           <template #append>元</template>
         </ElInput>
       </ElFormItem>
 
       <!-- 备注信息 -->
-      <ElFormItem
-        v-if="showRemark"
-        label="备注"
-        prop="remark"
-      >
+      <ElFormItem v-if="showRemark" label="备注" prop="remark">
         <ElInput
           v-model="formData.remark"
           type="textarea"
@@ -66,26 +46,15 @@
       </ElFormItem>
 
       <!-- 选中的网卡信息展示 -->
-      <ElFormItem
-        v-if="selectedCards.length > 0"
-        label="选中网卡"
-      >
+      <ElFormItem v-if="selectedCards.length > 0" label="选中网卡">
         <div class="selected-cards-info">
           <ElTag type="info">已选择 {{ selectedCards.length }} 张网卡</ElTag>
-          <ElButton
-            type="text"
-            size="small"
-            @click="showCardList = !showCardList"
-          >
+          <ElButton type="text" size="small" @click="showCardList = !showCardList">
             {{ showCardList ? '收起' : '查看详情' }}
           </ElButton>
         </div>
         <div v-if="showCardList" class="card-list">
-          <div
-            v-for="card in selectedCards.slice(0, 5)"
-            :key="card.id"
-            class="card-item"
-          >
+          <div v-for="card in selectedCards.slice(0, 5)" :key="card.id" class="card-item">
             {{ card.iccid }}
           </div>
           <div v-if="selectedCards.length > 5" class="more-cards">
@@ -97,15 +66,23 @@
 
     <template #footer>
       <ElButton @click="handleClose">取消</ElButton>
-      <ElButton type="primary" @click="handleConfirm" :loading="confirmLoading">
-        确认
-      </ElButton>
+      <ElButton type="primary" @click="handleConfirm" :loading="confirmLoading"> 确认 </ElButton>
     </template>
   </ElDialog>
 </template>
 
 <script setup lang="ts">
-  import { ElDialog, ElForm, ElFormItem, ElSelect, ElOption, ElInput, ElButton, ElTag, ElMessage } from 'element-plus'
+  import {
+    ElDialog,
+    ElForm,
+    ElFormItem,
+    ElSelect,
+    ElOption,
+    ElInput,
+    ElButton,
+    ElTag,
+    ElMessage
+  } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
 
   interface SelectOption {
@@ -237,7 +214,6 @@
       }
 
       emit('confirm', submitData)
-
     } catch (error) {
       console.error('表单验证失败:', error)
     } finally {
@@ -264,18 +240,18 @@
 <style lang="scss" scoped>
   .selected-cards-info {
     display: flex;
-    align-items: center;
     gap: 12px;
+    align-items: center;
     margin-bottom: 8px;
   }
 
   .card-list {
-    margin-top: 8px;
+    max-height: 120px;
     padding: 8px;
+    margin-top: 8px;
+    overflow-y: auto;
     background-color: var(--el-fill-color-lighter);
     border-radius: 4px;
-    max-height: 120px;
-    overflow-y: auto;
 
     .card-item {
       padding: 2px 0;
@@ -286,8 +262,8 @@
     .more-cards {
       padding: 2px 0;
       font-size: 12px;
-      color: var(--el-text-color-placeholder);
       font-style: italic;
+      color: var(--el-text-color-placeholder);
     }
   }
-</style>
+</style>

src/components/business/CardStatusTag.vue

@@ -5,21 +5,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { getCardStatusLabel, getCardStatusType } from '@/config/constants'
-import type { CardStatus } from '@/types/api'
+  import { computed } from 'vue'
+  import { getCardStatusLabel, getCardStatusType } from '@/config/constants'
+  import type { CardStatus } from '@/types/api'
 
-interface Props {
-  status: CardStatus
-  effect?: 'dark' | 'light' | 'plain'
-  size?: 'large' | 'default' | 'small'
-}
+  interface Props {
+    status: CardStatus
+    effect?: 'dark' | 'light' | 'plain'
+    size?: 'large' | 'default' | 'small'
+  }
 
-const props = withDefaults(defineProps<Props>(), {
-  effect: 'light',
-  size: 'default'
-})
+  const props = withDefaults(defineProps<Props>(), {
+    effect: 'light',
+    size: 'default'
+  })
 
-const statusLabel = computed(() => getCardStatusLabel(props.status))
-const tagType = computed(() => getCardStatusType(props.status))
+  const statusLabel = computed(() => getCardStatusLabel(props.status))
+  const tagType = computed(() => getCardStatusType(props.status))
 </script>

src/components/business/CommissionDisplay.vue

@@ -27,92 +27,91 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { formatMoney } from '@/utils/business'
-import {
-  CommissionType,
-  WithdrawStatus,
-  getCommissionTypeLabel,
-  getWithdrawStatusLabel,
-  getWithdrawStatusType
-} from '@/config/constants'
+  import { computed } from 'vue'
+  import { formatMoney } from '@/utils/business'
+  import { WithdrawalStatus } from '@/types/api/commission'
+  import {
+    getCommissionTypeLabel,
+    getWithdrawalStatusLabel,
+    getWithdrawalStatusType
+  } from '@/config/constants'
 
-interface Props {
-  // 佣金金额（单位：分）
-  amount: number
-  // 佣金类型
-  type?: CommissionType
-  // 佣金比例
-  rate?: number
-  // 状态（用于提现记录）
-  status?: WithdrawStatus
-  // 是否显示比例
-  showRate?: boolean
-  // 是否显示状态
-  showStatus?: boolean
-  // 紧凑模式（只显示金额）
-  compact?: boolean
-}
+  interface Props {
+    // 佣金金额（单位：分）
+    amount: number
+    // 佣金类型
+    type?: string
+    // 佣金比例
+    rate?: number
+    // 状态（用于提现记录）
+    status?: WithdrawalStatus
+    // 是否显示比例
+    showRate?: boolean
+    // 是否显示状态
+    showStatus?: boolean
+    // 紧凑模式（只显示金额）
+    compact?: boolean
+  }
 
-const props = withDefaults(defineProps<Props>(), {
-  showRate: true,
-  showStatus: false,
-  compact: false
-})
+  const props = withDefaults(defineProps<Props>(), {
+    showRate: true,
+    showStatus: false,
+    compact: false
+  })
 
-const formattedAmount = computed(() => formatMoney(props.amount))
+  const formattedAmount = computed(() => formatMoney(props.amount))
 
-const commissionTypeLabel = computed(() => {
-  return props.type !== undefined ? getCommissionTypeLabel(props.type) : '-'
-})
+  const commissionTypeLabel = computed(() => {
+    return props.type !== undefined ? getCommissionTypeLabel(props.type) : '-'
+  })
 
-const statusLabel = computed(() => {
-  return props.status !== undefined ? getWithdrawStatusLabel(props.status) : '-'
-})
+  const statusLabel = computed(() => {
+    return props.status !== undefined ? getWithdrawalStatusLabel(props.status) : '-'
+  })
 
-const statusType = computed(() => {
-  return props.status !== undefined ? getWithdrawStatusType(props.status) : 'info'
-})
+  const statusType = computed(() => {
+    return props.status !== undefined ? getWithdrawalStatusType(props.status) : 'info'
+  })
 </script>
 
 <style scoped lang="scss">
-.commission-display {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  &.is-compact {
-    flex-direction: row;
-    align-items: center;
-  }
-
-  .commission-item {
+  .commission-display {
     display: flex;
-    align-items: center;
-    font-size: 14px;
+    flex-direction: column;
+    gap: 8px;
 
-    .commission-label {
-      color: var(--el-text-color-secondary);
-      margin-right: 8px;
-      white-space: nowrap;
+    &.is-compact {
+      flex-direction: row;
+      align-items: center;
     }
 
-    .commission-value {
-      color: var(--el-text-color-primary);
-      font-weight: 500;
+    .commission-item {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
 
-      &.commission-amount {
-        color: var(--el-color-success);
-        font-size: 16px;
-        font-weight: 600;
+      .commission-label {
+        margin-right: 8px;
+        color: var(--el-text-color-secondary);
+        white-space: nowrap;
+      }
+
+      .commission-value {
+        font-weight: 500;
+        color: var(--el-text-color-primary);
+
+        &.commission-amount {
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--el-color-success);
+        }
+      }
+    }
+
+    &.is-compact .commission-item {
+      .commission-label {
+        display: none;
       }
     }
   }
-
-  &.is-compact .commission-item {
-    .commission-label {
-      display: none;
-    }
-  }
-}
 </style>

src/components/business/ImportDialog.vue

@@ -17,11 +17,7 @@
           show-icon
         >
           <template #default>
-            <el-button
-              type="primary"
-              link
-              @click="handleDownloadTemplate"
-            >
+            <el-button type="primary" link @click="handleDownloadTemplate">
               <el-icon><Download /></el-icon>
               下载模板
             </el-button>
@@ -79,11 +75,7 @@
         <div v-if="importResult.errors && importResult.errors.length > 0" class="error-list">
           <el-divider content-position="left">失败详情</el-divider>
           <el-scrollbar max-height="200px">
-            <div
-              v-for="(error, index) in importResult.errors"
-              :key="index"
-              class="error-item"
-            >
+            <div v-for="(error, index) in importResult.errors" :key="index" class="error-item">
               <span class="error-row">第 {{ error.row }} 行：</span>
               <span class="error-msg">{{ error.message }}</span>
             </div>
@@ -109,12 +101,7 @@
         <el-button @click="handleCancel" :disabled="uploading">
           {{ importResult ? '关闭' : '取消' }}
         </el-button>
-        <el-button
-          v-if="!importResult"
-          type="primary"
-          :loading="uploading"
-          @click="handleConfirm"
-        >
+        <el-button v-if="!importResult" type="primary" :loading="uploading" @click="handleConfirm">
           开始导入
         </el-button>
       </div>
@@ -123,267 +110,273 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import type { FormInstance, FormRules, UploadInstance, UploadUserFile, UploadProgressEvent } from 'element-plus'
-import { ElMessage } from 'element-plus'
-import { Download, UploadFilled } from '@element-plus/icons-vue'
+  import { ref, computed } from 'vue'
+  import type {
+    FormInstance,
+    FormRules,
+    UploadInstance,
+    UploadUserFile,
+    UploadProgressEvent
+  } from 'element-plus'
+  import { ElMessage } from 'element-plus'
+  import { Download, UploadFilled } from '@element-plus/icons-vue'
 
-interface ImportResult {
-  success: boolean
-  message: string
-  detail?: {
-    total?: number
-    success?: number
-    failed?: number
-  }
-  errors?: Array<{
-    row: number
+  interface ImportResult {
+    success: boolean
     message: string
-  }>
-}
-
-interface Props {
-  modelValue: boolean
-  title?: string
-  width?: string | number
-  // 模板下载地址
-  templateUrl?: string
-  // 文件上传地址（如果使用 action 方式）
-  uploadAction?: string
-  // 接受的文件类型
-  accept?: string
-  // 最大文件大小（MB）
-  maxSize?: number
-  // 表单验证规则
-  formRules?: FormRules
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: boolean): void
-  (e: 'confirm', file: File, formData?: Record<string, any>): Promise<ImportResult> | void
-  (e: 'cancel'): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: '导入数据',
-  width: '600px',
-  uploadAction: '#',
-  accept: '.xlsx,.xls',
-  maxSize: 10
-})
-
-const emit = defineEmits<Emits>()
-
-const uploadRef = ref<UploadInstance>()
-const formRef = ref<FormInstance>()
-const fileList = ref<UploadUserFile[]>([])
-const formData = ref<Record<string, any>>({})
-const uploading = ref(false)
-const uploadProgress = ref(0)
-const importResult = ref<ImportResult>()
-
-const visible = computed({
-  get: () => props.modelValue,
-  set: (val) => {
-    emit('update:modelValue', val)
+    detail?: {
+      total?: number
+      success?: number
+      failed?: number
+    }
+    errors?: Array<{
+      row: number
+      message: string
+    }>
   }
-})
 
-const maxSizeMB = computed(() => props.maxSize)
-const acceptText = computed(() => props.accept.replace(/\./g, '').toUpperCase())
-
-const handleDownloadTemplate = () => {
-  if (props.templateUrl) {
-    window.open(props.templateUrl, '_blank')
+  interface Props {
+    modelValue: boolean
+    title?: string
+    width?: string | number
+    // 模板下载地址
+    templateUrl?: string
+    // 文件上传地址（如果使用 action 方式）
+    uploadAction?: string
+    // 接受的文件类型
+    accept?: string
+    // 最大文件大小（MB）
+    maxSize?: number
+    // 表单验证规则
+    formRules?: FormRules
   }
-}
 
-const handleBeforeUpload = (file: File) => {
-  const isValidType = props.accept.split(',').some(type => {
-    const ext = type.trim()
-    return file.name.toLowerCase().endsWith(ext)
+  interface Emits {
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'confirm', file: File, formData?: Record<string, any>): Promise<ImportResult> | void
+    (e: 'cancel'): void
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    title: '导入数据',
+    width: '600px',
+    uploadAction: '#',
+    accept: '.xlsx,.xls',
+    maxSize: 10
   })
 
-  if (!isValidType) {
-    ElMessage.error(`只能上传 ${acceptText.value} 格式的文件`)
-    return false
+  const emit = defineEmits<Emits>()
+
+  const uploadRef = ref<UploadInstance>()
+  const formRef = ref<FormInstance>()
+  const fileList = ref<UploadUserFile[]>([])
+  const formData = ref<Record<string, any>>({})
+  const uploading = ref(false)
+  const uploadProgress = ref(0)
+  const importResult = ref<ImportResult>()
+
+  const visible = computed({
+    get: () => props.modelValue,
+    set: (val) => {
+      emit('update:modelValue', val)
+    }
+  })
+
+  const maxSizeMB = computed(() => props.maxSize)
+  const acceptText = computed(() => props.accept.replace(/\./g, '').toUpperCase())
+
+  const handleDownloadTemplate = () => {
+    if (props.templateUrl) {
+      window.open(props.templateUrl, '_blank')
+    }
   }
 
-  const isLtSize = file.size / 1024 / 1024 < props.maxSize
-  if (!isLtSize) {
-    ElMessage.error(`文件大小不能超过 ${props.maxSize}MB`)
-    return false
+  const handleBeforeUpload = (file: File) => {
+    const isValidType = props.accept.split(',').some((type) => {
+      const ext = type.trim()
+      return file.name.toLowerCase().endsWith(ext)
+    })
+
+    if (!isValidType) {
+      ElMessage.error(`只能上传 ${acceptText.value} 格式的文件`)
+      return false
+    }
+
+    const isLtSize = file.size / 1024 / 1024 < props.maxSize
+    if (!isLtSize) {
+      ElMessage.error(`文件大小不能超过 ${props.maxSize}MB`)
+      return false
+    }
+
+    return true
   }
 
-  return true
-}
-
-const handleUploadProgress = (event: UploadProgressEvent) => {
-  uploadProgress.value = Math.round(event.percent)
-}
-
-const handleUploadSuccess = () => {
-  uploading.value = false
-  ElMessage.success('导入成功')
-}
-
-const handleUploadError = () => {
-  uploading.value = false
-  ElMessage.error('导入失败')
-}
-
-const handleConfirm = async () => {
-  if (fileList.value.length === 0) {
-    ElMessage.warning('请选择要导入的文件')
-    return
+  const handleUploadProgress = (event: UploadProgressEvent) => {
+    uploadProgress.value = Math.round(event.percent)
   }
 
-  // 验证表单（如果有）
-  if (formRef.value) {
-    try {
-      await formRef.value.validate()
-    } catch {
-      ElMessage.warning('请检查表单填写')
+  const handleUploadSuccess = () => {
+    uploading.value = false
+    ElMessage.success('导入成功')
+  }
+
+  const handleUploadError = () => {
+    uploading.value = false
+    ElMessage.error('导入失败')
+  }
+
+  const handleConfirm = async () => {
+    if (fileList.value.length === 0) {
+      ElMessage.warning('请选择要导入的文件')
       return
     }
+
+    // 验证表单（如果有）
+    if (formRef.value) {
+      try {
+        await formRef.value.validate()
+      } catch {
+        ElMessage.warning('请检查表单填写')
+        return
+      }
+    }
+
+    const file = fileList.value[0].raw
+    if (!file) return
+
+    uploading.value = true
+    uploadProgress.value = 0
+
+    try {
+      const result = await emit('confirm', file, formData.value)
+      if (result) {
+        importResult.value = result
+      }
+    } catch (error: any) {
+      importResult.value = {
+        success: false,
+        message: error.message || '导入失败'
+      }
+    } finally {
+      uploading.value = false
+    }
   }
 
-  const file = fileList.value[0].raw
-  if (!file) return
-
-  uploading.value = true
-  uploadProgress.value = 0
-
-  try {
-    const result = await emit('confirm', file, formData.value)
-    if (result) {
-      importResult.value = result
-    }
-  } catch (error: any) {
-    importResult.value = {
-      success: false,
-      message: error.message || '导入失败'
-    }
-  } finally {
-    uploading.value = false
+  const handleCancel = () => {
+    visible.value = false
+    emit('cancel')
   }
-}
 
-const handleCancel = () => {
-  visible.value = false
-  emit('cancel')
-}
+  const handleClosed = () => {
+    fileList.value = []
+    formRef.value?.resetFields()
+    formData.value = {}
+    uploadProgress.value = 0
+    importResult.value = undefined
+  }
 
-const handleClosed = () => {
-  fileList.value = []
-  formRef.value?.resetFields()
-  formData.value = {}
-  uploadProgress.value = 0
-  importResult.value = undefined
-}
-
-defineExpose({
-  formData
-})
+  defineExpose({
+    formData
+  })
 </script>
 
 <style scoped lang="scss">
-.import-dialog-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+  .import-dialog-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
 
-  .template-section {
-    margin-bottom: 8px;
-  }
-
-  .upload-area {
-    :deep(.el-upload) {
-      width: 100%;
+    .template-section {
+      margin-bottom: 8px;
     }
 
-    :deep(.el-upload-dragger) {
-      padding: 40px 20px;
-    }
+    .upload-area {
+      :deep(.el-upload) {
+        width: 100%;
+      }
 
-    .upload-icon {
-      font-size: 48px;
-      color: var(--el-color-primary);
-      margin-bottom: 16px;
-    }
+      :deep(.el-upload-dragger) {
+        padding: 40px 20px;
+      }
 
-    .upload-text {
-      font-size: 14px;
-      color: var(--el-text-color-regular);
-
-      em {
+      .upload-icon {
+        margin-bottom: 16px;
+        font-size: 48px;
         color: var(--el-color-primary);
-        font-style: normal;
       }
 
-      .upload-tip {
-        font-size: 12px;
-        color: var(--el-text-color-secondary);
-        margin-top: 8px;
+      .upload-text {
+        font-size: 14px;
+        color: var(--el-text-color-regular);
+
+        em {
+          font-style: normal;
+          color: var(--el-color-primary);
+        }
+
+        .upload-tip {
+          margin-top: 8px;
+          font-size: 12px;
+          color: var(--el-text-color-secondary);
+        }
       }
     }
-  }
 
-  .upload-progress {
-    text-align: center;
-    padding: 20px 0;
-
-    p {
-      margin-top: 12px;
-      font-size: 14px;
-      color: var(--el-text-color-secondary);
-    }
-  }
-
-  .import-result {
-    .result-detail {
-      margin-top: 8px;
-      font-size: 14px;
-      line-height: 1.6;
+    .upload-progress {
+      padding: 20px 0;
+      text-align: center;
 
       p {
-        margin: 4px 0;
+        margin-top: 12px;
+        font-size: 14px;
+        color: var(--el-text-color-secondary);
       }
     }
 
-    .error-list {
-      margin-top: 16px;
-
-      .error-item {
-        padding: 8px 12px;
-        font-size: 13px;
+    .import-result {
+      .result-detail {
+        margin-top: 8px;
+        font-size: 14px;
         line-height: 1.6;
-        background-color: var(--el-fill-color-light);
-        border-radius: 4px;
-        margin-bottom: 8px;
 
-        .error-row {
-          font-weight: 600;
-          color: var(--el-color-danger);
+        p {
+          margin: 4px 0;
         }
+      }
 
-        .error-msg {
-          color: var(--el-text-color-regular);
+      .error-list {
+        margin-top: 16px;
+
+        .error-item {
+          padding: 8px 12px;
+          margin-bottom: 8px;
+          font-size: 13px;
+          line-height: 1.6;
+          background-color: var(--el-fill-color-light);
+          border-radius: 4px;
+
+          .error-row {
+            font-weight: 600;
+            color: var(--el-color-danger);
+          }
+
+          .error-msg {
+            color: var(--el-text-color-regular);
+          }
         }
       }
     }
+
+    .import-form {
+      padding-top: 16px;
+      margin-top: 16px;
+      border-top: 1px solid var(--el-border-color-lighter);
+    }
   }
 
-  .import-form {
-    margin-top: 16px;
-    padding-top: 16px;
-    border-top: 1px solid var(--el-border-color-lighter);
+  .dialog-footer {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
   }
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
 </style>

src/components/business/OperatorSelect.vue

@@ -21,46 +21,46 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { OPERATOR_OPTIONS } from '@/config/constants'
-import type { Operator } from '@/types/api'
+  import { computed } from 'vue'
+  import { OPERATOR_OPTIONS } from '@/config/constants'
+  import type { Operator } from '@/types/api'
 
-interface Props {
-  modelValue?: Operator | Operator[]
-  placeholder?: string
-  clearable?: boolean
-  disabled?: boolean
-  multiple?: boolean
-  filterable?: boolean
-  size?: 'large' | 'default' | 'small'
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: Operator | Operator[] | undefined): void
-  (e: 'change', value: Operator | Operator[] | undefined): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: '请选择运营商',
-  clearable: true,
-  disabled: false,
-  multiple: false,
-  filterable: true,
-  size: 'default'
-})
-
-const emit = defineEmits<Emits>()
-
-const operatorOptions = OPERATOR_OPTIONS
-
-const selectedValue = computed({
-  get: () => props.modelValue,
-  set: (val) => {
-    emit('update:modelValue', val)
+  interface Props {
+    modelValue?: Operator | Operator[]
+    placeholder?: string
+    clearable?: boolean
+    disabled?: boolean
+    multiple?: boolean
+    filterable?: boolean
+    size?: 'large' | 'default' | 'small'
   }
-})
 
-const handleChange = (value: Operator | Operator[] | undefined) => {
-  emit('change', value)
-}
+  interface Emits {
+    (e: 'update:modelValue', value: Operator | Operator[] | undefined): void
+    (e: 'change', value: Operator | Operator[] | undefined): void
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    placeholder: '请选择运营商',
+    clearable: true,
+    disabled: false,
+    multiple: false,
+    filterable: true,
+    size: 'default'
+  })
+
+  const emit = defineEmits<Emits>()
+
+  const operatorOptions = OPERATOR_OPTIONS
+
+  const selectedValue = computed({
+    get: () => props.modelValue,
+    set: (val) => {
+      emit('update:modelValue', val)
+    }
+  })
+
+  const handleChange = (value: Operator | Operator[] | undefined) => {
+    emit('change', value)
+  }
 </script>

src/components/business/PackageSelector.vue

@@ -13,12 +13,7 @@
     @change="handleChange"
     @visible-change="handleVisibleChange"
   >
-    <el-option
-      v-for="item in packageList"
-      :key="item.id"
-      :label="item.name"
-      :value="item.id"
-    >
+    <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id">
       <div class="package-option">
         <span class="package-name">{{ item.name }}</span>
         <span class="package-info">
@@ -30,108 +25,108 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import type { Package } from '@/types/api'
-import { formatFlow, formatMoney } from '@/utils/business'
+  import { ref, computed, onMounted } from 'vue'
+  import type { Package } from '@/types/api'
+  import { formatFlow, formatMoney } from '@/utils/business'
 
-interface Props {
-  modelValue?: string | number | (string | number)[]
-  placeholder?: string
-  clearable?: boolean
-  disabled?: boolean
-  multiple?: boolean
-  filterable?: boolean
-  remote?: boolean
-  size?: 'large' | 'default' | 'small'
-  // 预加载的套餐列表
-  packages?: Package[]
-  // 远程搜索方法
-  fetchMethod?: (query: string) => Promise<Package[]>
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: string | number | (string | number)[] | undefined): void
-  (e: 'change', value: string | number | (string | number)[] | undefined): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: '请选择套餐',
-  clearable: true,
-  disabled: false,
-  multiple: false,
-  filterable: true,
-  remote: false,
-  size: 'default'
-})
-
-const emit = defineEmits<Emits>()
-
-const loading = ref(false)
-const packageList = ref<Package[]>([])
-
-const selectedValue = computed({
-  get: () => props.modelValue,
-  set: (val) => {
-    emit('update:modelValue', val)
+  interface Props {
+    modelValue?: string | number | (string | number)[]
+    placeholder?: string
+    clearable?: boolean
+    disabled?: boolean
+    multiple?: boolean
+    filterable?: boolean
+    remote?: boolean
+    size?: 'large' | 'default' | 'small'
+    // 预加载的套餐列表
+    packages?: Package[]
+    // 远程搜索方法
+    fetchMethod?: (query: string) => Promise<Package[]>
   }
-})
 
-const handleChange = (value: string | number | (string | number)[] | undefined) => {
-  emit('change', value)
-}
-
-const handleVisibleChange = (visible: boolean) => {
-  if (visible && !props.remote && packageList.value.length === 0) {
-    loadPackages()
+  interface Emits {
+    (e: 'update:modelValue', value: string | number | (string | number)[] | undefined): void
+    (e: 'change', value: string | number | (string | number)[] | undefined): void
   }
-}
 
-const loadPackages = async () => {
-  if (props.packages) {
-    packageList.value = props.packages
-  } else if (props.fetchMethod) {
+  const props = withDefaults(defineProps<Props>(), {
+    placeholder: '请选择套餐',
+    clearable: true,
+    disabled: false,
+    multiple: false,
+    filterable: true,
+    remote: false,
+    size: 'default'
+  })
+
+  const emit = defineEmits<Emits>()
+
+  const loading = ref(false)
+  const packageList = ref<Package[]>([])
+
+  const selectedValue = computed({
+    get: () => props.modelValue,
+    set: (val) => {
+      emit('update:modelValue', val)
+    }
+  })
+
+  const handleChange = (value: string | number | (string | number)[] | undefined) => {
+    emit('change', value)
+  }
+
+  const handleVisibleChange = (visible: boolean) => {
+    if (visible && !props.remote && packageList.value.length === 0) {
+      loadPackages()
+    }
+  }
+
+  const loadPackages = async () => {
+    if (props.packages) {
+      packageList.value = props.packages
+    } else if (props.fetchMethod) {
+      loading.value = true
+      try {
+        packageList.value = await props.fetchMethod('')
+      } finally {
+        loading.value = false
+      }
+    }
+  }
+
+  const remoteMethod = async (query: string) => {
+    if (!props.fetchMethod) return
+
     loading.value = true
     try {
-      packageList.value = await props.fetchMethod('')
+      packageList.value = await props.fetchMethod(query)
     } finally {
       loading.value = false
     }
   }
-}
 
-const remoteMethod = async (query: string) => {
-  if (!props.fetchMethod) return
-
-  loading.value = true
-  try {
-    packageList.value = await props.fetchMethod(query)
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(() => {
-  if (props.packages) {
-    packageList.value = props.packages
-  }
-})
+  onMounted(() => {
+    if (props.packages) {
+      packageList.value = props.packages
+    }
+  })
 </script>
 
 <style scoped lang="scss">
-.package-option {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  .package-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
-  .package-name {
-    font-weight: 500;
-    color: var(--el-text-color-primary);
-  }
+    .package-name {
+      font-weight: 500;
+      color: var(--el-text-color-primary);
+    }
 
-  .package-info {
-    font-size: 12px;
-    color: var(--el-text-color-secondary);
-    margin-left: 12px;
+    .package-info {
+      margin-left: 12px;
+      font-size: 12px;
+      color: var(--el-text-color-secondary);
+    }
   }
-}
 </style>

src/components/core/layouts/art-header-bar/style.scss

@@ -13,18 +13,18 @@
       padding: 0 0 4px;
 
       .avatar-large {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
         width: 40px;
         height: 40px;
         margin: 0 10px 0 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: var(--el-color-primary);
-        border-radius: 50%;
-        color: white;
         font-size: 18px;
         font-weight: 600;
-        flex-shrink: 0;
+        color: white;
+        background-color: var(--el-color-primary);
+        border-radius: 50%;
       }
 
       .user-wrap {
@@ -364,8 +364,8 @@
 
         .user-info-display {
           display: flex;
-          align-items: center;
           gap: 10px;
+          align-items: center;
           padding: 6px 12px;
           cursor: pointer;
           background-color: transparent;
@@ -373,17 +373,17 @@
           transition: all 0.2s;
 
           .avatar {
-            width: 32px;
-            height: 32px;
             display: flex;
+            flex-shrink: 0;
             align-items: center;
             justify-content: center;
-            background-color: var(--el-color-primary);
-            border-radius: 50%;
-            color: white;
+            width: 32px;
+            height: 32px;
             font-size: 14px;
             font-weight: 600;
-            flex-shrink: 0;
+            color: white;
+            background-color: var(--el-color-primary);
+            border-radius: 50%;
           }
 
           .info {
@@ -394,8 +394,8 @@
 
             .username {
               font-size: 14px;
-              color: var(--art-gray-800);
               font-weight: 500;
+              color: var(--art-gray-800);
             }
 
             .user-type {

src/components/core/layouts/art-screen-lock/index.vue

@@ -4,7 +4,7 @@
       <el-dialog v-model="visible" :width="370" :show-close="false" @open="handleDialogOpen">
         <div class="lock-content">
           <img class="cover" src="@imgs/user/avatar.webp" />
-          <div class="username">{{ userInfo.userName }}</div>
+          <div class="username">{{ userInfo.username }}</div>
           <el-form ref="formRef" :model="formData" :rules="rules" @submit.prevent="handleLock">
             <el-form-item prop="password">
               <el-input
@@ -33,7 +33,7 @@
     <div class="unlock-content" v-else>
       <div class="box">
         <img class="cover" src="@imgs/user/avatar.webp" />
-        <div class="username">{{ userInfo.userName }}</div>
+        <div class="username">{{ userInfo.username }}</div>
         <el-form
           ref="unlockFormRef"
           :model="unlockForm"

src/components/core/tables/ArtTable.vue

@@ -21,6 +21,8 @@
         :size="tableSizeComputed"
         :stripe="stripeComputed"
         :border="borderComputed"
+        :tree-props="treeProps"
+        :default-expand-all="defaultExpandAll"
         :header-cell-style="{
           backgroundColor: showHeaderBackground ? 'var(--el-fill-color-lighter)' : '',
           fontWeight: '500'
@@ -123,6 +125,10 @@
     marginTop?: number
     /** 表格大小 */
     size?: 'small' | 'default' | 'large'
+    /** 树形表格配置 */
+    treeProps?: { children?: string; hasChildren?: string }
+    /** 是否默认展开所有行 */
+    defaultExpandAll?: boolean
   }
 
   const props = withDefaults(defineProps<TableProps>(), {
@@ -146,7 +152,9 @@
     paginationSize: 'default',
     paginationLayout: '',
     showHeaderBackground: null,
-    marginTop: 20
+    marginTop: 20,
+    treeProps: undefined,
+    defaultExpandAll: false
   })
 
   /*

src/components/core/views/ArtDataViewer.vue

@@ -70,6 +70,7 @@
               :span="field.span || 1"
             >
               <template v-if="field.formatter">
+                <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
                 <component :is="'div'" v-html="field.formatter(item)" />
               </template>
               <template v-else>
@@ -83,8 +84,8 @@
       <!-- 分页器 -->
       <div v-if="showPagination" class="descriptions-pagination">
         <ElPagination
-          v-model:current-page="pagination.currentPage"
-          v-model:page-size="pagination.pageSize"
+          :current-page="pagination.currentPage"
+          :page-size="pagination.pageSize"
           :page-sizes="[10, 20, 50, 100]"
           :total="pagination.total"
           layout="total, sizes, prev, pager, next, jumper"
@@ -182,7 +183,7 @@
   }>()
 
   // 当前视图模式
-  const currentView = ref(props.defaultView)
+  const currentView = ref<'table' | 'descriptions'>(props.defaultView)
 
   // 表格引用
   const tableRef = ref()
@@ -225,11 +226,6 @@
     return item[props.rowKey] || index
   }
 
-  // 获取卡片标题
-  const getCardTitle = (item: any) => {
-    return item[props.cardTitleField] || `项目 ${item[props.rowKey] || ''}`
-  }
-
   // 获取字段值
   const getFieldValue = (item: any, prop: string) => {
     return item[prop] || '--'
@@ -287,15 +283,15 @@
 
 <style lang="scss" scoped>
   .art-data-viewer {
-    overflow: visible;
     width: 100%;
+    overflow: visible;
 
     .viewer-header {
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      margin-bottom: 16px;
+      justify-content: space-between;
       padding: 16px 0;
+      margin-bottom: 16px;
 
       .header-left {
         flex: 1;
@@ -303,8 +299,8 @@
 
       .header-right {
         display: flex;
-        align-items: center;
         gap: 12px;
+        align-items: center;
       }
     }
 
@@ -319,15 +315,15 @@
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
         gap: 16px;
-        margin-bottom: 20px;
         width: 100%;
         min-height: 0;
+        margin-bottom: 20px;
 
         .description-card {
-          border-radius: 8px;
-          cursor: pointer;
-          transition: all 0.3s ease;
           position: relative;
+          cursor: pointer;
+          border-radius: 8px;
+          transition: all 0.3s ease;
 
           &.selected {
             border: 1px solid var(--el-color-primary);
@@ -335,9 +331,9 @@
 
           // 字段内容样式 - 允许自然换行
           .field-content {
-            word-wrap: break-word;
-            word-break: break-all;
             line-height: 1.5;
+            word-break: break-all;
+            word-wrap: break-word;
           }
 
           // 针对描述列表的特殊处理
@@ -349,18 +345,18 @@
                 .el-descriptions__cell {
                   &.is-bordered-label {
                     width: v-bind('props.labelWidth');
+                    min-width: v-bind('props.labelWidth');
                     word-wrap: break-word;
                     vertical-align: top;
-                    min-width: v-bind('props.labelWidth');
                   }
 
                   &.is-bordered-content {
                     vertical-align: top;
 
                     .el-descriptions__content {
-                      word-wrap: break-word;
-                      word-break: break-all;
                       line-height: 1.5;
+                      word-break: break-all;
+                      word-wrap: break-word;
                     }
                   }
                 }
@@ -377,7 +373,7 @@
       }
 
       // 响应式调整
-      @media (max-width: 768px) {
+      @media (width <= 768px) {
         .descriptions-grid {
           grid-template-columns: 1fr;
           gap: 12px;

src/composables/useLogin.ts

@@ -132,10 +132,6 @@ export function useLogin() {
       }
     } catch (error: any) {
       console.error('登录失败:', error)
-      // 从后端响应中提取错误消息
-      const errorMessage =
-        error.response?.data?.msg || error.message || t('login.error.loginFailed')
-      ElMessage.error(errorMessage)
     } finally {
       loading.value = false
     }
@@ -153,10 +149,10 @@ export function useLogin() {
     }
 
     // 保存 Token
-    userStore.setToken(loginResult.token, loginResult.refreshToken)
+    userStore.setToken(loginResult.access_token, loginResult.refresh_token)
 
     // 获取用户信息
-    const userInfo = mockGetUserInfo(loginResult.token)
+    const userInfo = mockGetUserInfo(loginResult.access_token)
 
     if (!userInfo) {
       ElMessage.error(t('login.error.getUserInfoFailed'))
@@ -175,7 +171,7 @@ export function useLogin() {
 
     // 跳转到重定向页面或首页
     const redirectPath = getRedirectPath(route)
-    router.push(redirectPath || HOME_PAGE)
+    await router.push(redirectPath || HOME_PAGE)
   }
 
   /**
@@ -220,7 +216,7 @@ export function useLogin() {
 
     // 跳转到重定向页面或首页
     const redirectPath = getRedirectPath(route)
-    router.push(redirectPath || HOME_PAGE)
+    await router.push(redirectPath || HOME_PAGE)
   }
 
   /**

src/config/constants/commission.ts

@@ -2,14 +2,14 @@
  * 佣金相关配置
  */
 
-import { CommissionStatus, WithdrawalStatus } from '@/types/api'
+import { CommissionStatus, WithdrawalStatus } from '@/types/api/commission'
 
 // 佣金状态选项
 export const COMMISSION_STATUS_OPTIONS = [
-  { label: '待结算', value: CommissionStatus.PENDING, type: 'warning' as const },
-  { label: '已结算', value: CommissionStatus.SETTLED, type: 'success' as const },
-  { label: '已提现', value: CommissionStatus.WITHDRAWN, type: 'info' as const },
-  { label: '冻结', value: CommissionStatus.FROZEN, type: 'danger' as const }
+  { label: '已冻结', value: CommissionStatus.FROZEN, type: 'info' as const },
+  { label: '解冻中', value: CommissionStatus.UNFREEZING, type: 'warning' as const },
+  { label: '已发放', value: CommissionStatus.RELEASED, type: 'success' as const },
+  { label: '已失效', value: CommissionStatus.INVALID, type: 'danger' as const }
 ]
 
 // 提现状态选项
@@ -17,22 +17,57 @@ export const WITHDRAWAL_STATUS_OPTIONS = [
   { label: '待审核', value: WithdrawalStatus.PENDING, type: 'warning' as const },
   { label: '已通过', value: WithdrawalStatus.APPROVED, type: 'success' as const },
   { label: '已拒绝', value: WithdrawalStatus.REJECTED, type: 'danger' as const },
-  { label: '处理中', value: WithdrawalStatus.PROCESSING, type: 'primary' as const },
-  { label: '已完成', value: WithdrawalStatus.COMPLETED, type: 'success' as const },
-  { label: '失败', value: WithdrawalStatus.FAILED, type: 'danger' as const }
+  { label: '已到账', value: WithdrawalStatus.COMPLETED, type: 'success' as const }
 ]
 
 // 支付方式选项
 export const PAYMENT_METHOD_OPTIONS = [
-  { label: '银行转账', value: 'bank', icon: 'bank' },
+  { label: '银行卡', value: 'bank', icon: 'bank' },
   { label: '支付宝', value: 'alipay', icon: 'alipay' },
   { label: '微信', value: 'wechat', icon: 'wechat' }
 ]
 
+// ========== 提现状态映射 ==========
+
+// 提现状态映射 (1:待审核, 2:已通过, 3:已拒绝, 4:已到账)
+export const WithdrawalStatusMap = {
+  1: { label: '待审核', type: 'warning' as const, color: '#E6A23C' },
+  2: { label: '已通过', type: 'success' as const, color: '#67C23A' },
+  3: { label: '已拒绝', type: 'danger' as const, color: '#F56C6C' },
+  4: { label: '已到账', type: 'success' as const, color: '#67C23A' }
+}
+
+// ========== 佣金状态映射 ==========
+
+// 佣金状态映射 (1:已冻结, 2:解冻中, 3:已发放, 4:已失效)
+export const CommissionStatusMap = {
+  1: { label: '已冻结', type: 'info' as const, color: '#909399' },
+  2: { label: '解冻中', type: 'warning' as const, color: '#E6A23C' },
+  3: { label: '已发放', type: 'success' as const, color: '#67C23A' },
+  4: { label: '已失效', type: 'danger' as const, color: '#F56C6C' }
+}
+
+// ========== 提现方式映射 ==========
+
+// 提现方式映射 (alipay:支付宝, wechat:微信, bank:银行卡)
+export const WithdrawalMethodMap = {
+  alipay: { label: '支付宝', icon: 'alipay' },
+  wechat: { label: '微信', icon: 'wechat' },
+  bank: { label: '银行卡', icon: 'bank' }
+}
+
+// ========== 佣金类型映射 ==========
+
+// 佣金类型映射 (one_time:一次性佣金, long_term:长期佣金)
+export const CommissionTypeMap = {
+  one_time: { label: '一次性佣金', type: 'primary' as const },
+  long_term: { label: '长期佣金', type: 'success' as const }
+}
+
 // 获取佣金状态标签
 export function getCommissionStatusLabel(status: CommissionStatus): string {
   const option = COMMISSION_STATUS_OPTIONS.find((item) => item.value === status)
-  return option?.label || status
+  return option?.label || String(status)
 }
 
 // 获取佣金状态类型
@@ -44,7 +79,7 @@ export function getCommissionStatusType(status: CommissionStatus) {
 // 获取提现状态标签
 export function getWithdrawalStatusLabel(status: WithdrawalStatus): string {
   const option = WITHDRAWAL_STATUS_OPTIONS.find((item) => item.value === status)
-  return option?.label || status
+  return option?.label || String(status)
 }
 
 // 获取提现状态类型
@@ -58,3 +93,15 @@ export function getPaymentMethodLabel(method: string): string {
   const option = PAYMENT_METHOD_OPTIONS.find((item) => item.value === method)
   return option?.label || method
 }
+
+// 获取佣金类型标签
+export function getCommissionTypeLabel(type: string): string {
+  const config = CommissionTypeMap[type as keyof typeof CommissionTypeMap]
+  return config?.label || String(type)
+}
+
+// 获取佣金类型type
+export function getCommissionTypeType(type: string) {
+  const config = CommissionTypeMap[type as keyof typeof CommissionTypeMap]
+  return config?.type || 'info'
+}

src/locales/langs/en.json

@@ -26,20 +26,11 @@
   "setting": {
     "menuType": {
       "title": "Menu Layout",
-      "list": [
-        "Vertical",
-        "Horizontal",
-        "Mixed",
-        "Dual"
-      ]
+      "list": ["Vertical", "Horizontal", "Mixed", "Dual"]
     },
     "theme": {
       "title": "Theme Style",
-      "list": [
-        "Light",
-        "Dark",
-        "System"
-      ]
+      "list": ["Light", "Dark", "System"]
     },
     "menu": {
       "title": "Menu Style"
@@ -49,17 +40,11 @@
     },
     "box": {
       "title": "Box Style",
-      "list": [
-        "Border",
-        "Shadow"
-      ]
+      "list": ["Border", "Shadow"]
     },
     "container": {
       "title": "Container Width",
-      "list": [
-        "Full",
-        "Boxed"
-      ]
+      "list": ["Full", "Boxed"]
     },
     "basics": {
       "title": "Basic Config",
@@ -97,14 +82,8 @@
   "notice": {
     "title": "Notice",
     "btnRead": "Mark as read",
-    "bar": [
-      "Notice",
-      "Message",
-      "Todo"
-    ],
-    "text": [
-      "No"
-    ],
+    "bar": ["Notice", "Message", "Todo"],
+    "text": ["No"],
     "viewAll": "View all"
   },
   "worktab": {

src/locales/langs/zh.json

@@ -415,8 +415,8 @@
       "customer": "客户管理",
       "customerRole": "客户角色",
       "agent": "代理商管理",
-      "customerAccount": "客户账号管理",
-      "enterpriseCustomer": "企业客户管理",
+      "customerAccount": "客户账号",
+      "enterpriseCustomer": "企业客户",
       "customerCommission": "客户账号佣金"
     },
     "deviceManagement": {
@@ -443,10 +443,17 @@
     "account": {
       "title": "账户管理",
       "customerAccount": "客户账号",
-      "withdrawal": "佣金提现",
-      "withdrawalSettings": "佣金提现设置",
       "myAccount": "我的账户"
     },
+    "commission": {
+      "menu": {
+        "management": "佣金管理",
+        "withdrawal": "提现审批",
+        "withdrawalSettings": "提现配置",
+        "myCommission": "我的佣金",
+        "agentCommission": "代理商佣金管理"
+      }
+    },
     "settings": {
       "title": "设置管理",
       "paymentMerchant": "支付商户",
@@ -579,5 +586,160 @@
       "passwordHint": "如需修改密码请使用修改密码功能",
       "disabledLoginHint": "账号已被禁用，请联系管理员"
     }
+  },
+  "commission": {
+    "menu": {
+      "management": "佣金管理",
+      "withdrawal": "提现审批",
+      "withdrawalSettings": "提现配置",
+      "myCommission": "我的佣金",
+      "agentCommission": "代理商佣金管理"
+    },
+    "table": {
+      "withdrawalNo": "提现单号",
+      "applicant": "申请人",
+      "applicantAccount": "申请账号",
+      "withdrawalAmount": "提现金额",
+      "fee": "手续费",
+      "actualAmount": "实际到账",
+      "withdrawalMethod": "提现方式",
+      "accountInfo": "收款账户",
+      "accountName": "账户名称",
+      "accountNumber": "账号",
+      "bankName": "银行名称",
+      "status": "状态",
+      "rejectReason": "拒绝原因",
+      "applyTime": "申请时间",
+      "approveTime": "审批时间",
+      "transferTime": "到账时间",
+      "actions": "操作",
+      "commissionNo": "佣金单号",
+      "commissionType": "佣金类型",
+      "commissionAmount": "佣金金额",
+      "orderNo": "关联订单号",
+      "sourceUser": "来源用户",
+      "beneficiary": "受益人",
+      "settleTime": "结算时间",
+      "withdrawTime": "提现时间",
+      "remark": "备注"
+    },
+    "status": {
+      "pending": "待审核",
+      "approved": "已通过",
+      "rejected": "已拒绝",
+      "completed": "已到账",
+      "frozen": "已冻结",
+      "unfreezing": "解冻中",
+      "settled": "已发放",
+      "invalid": "已失效"
+    },
+    "type": {
+      "oneTime": "一次性佣金",
+      "longTerm": "长期佣金"
+    },
+    "method": {
+      "alipay": "支付宝",
+      "wechat": "微信",
+      "bank": "银行卡"
+    },
+    "form": {
+      "withdrawalAmount": "提现金额",
+      "withdrawalAmountPlaceholder": "请输入提现金额",
+      "withdrawalMethod": "提现方式",
+      "withdrawalMethodPlaceholder": "请选择提现方式",
+      "accountName": "账户名称",
+      "accountNamePlaceholder": "请输入账户名称",
+      "accountNumber": "账号",
+      "accountNumberPlaceholder": "请输入账号",
+      "bankName": "银行名称",
+      "bankNamePlaceholder": "请输入银行名称",
+      "alipayAccount": "支付宝账号",
+      "alipayAccountPlaceholder": "请输入支付宝账号",
+      "wechatAccount": "微信账号",
+      "wechatAccountPlaceholder": "请输入微信账号",
+      "rejectReason": "拒绝原因",
+      "rejectReasonPlaceholder": "请输入拒绝原因",
+      "remark": "备注",
+      "remarkPlaceholder": "请输入备注信息",
+      "minWithdrawal": "最低提现金额",
+      "minWithdrawalPlaceholder": "请输入最低提现金额",
+      "maxWithdrawal": "最高提现金额",
+      "maxWithdrawalPlaceholder": "请输入最高提现金额",
+      "feeRate": "手续费率",
+      "feeRatePlaceholder": "请输入手续费率（%）",
+      "availableBalance": "可提现余额",
+      "totalCommission": "累计佣金",
+      "frozenAmount": "冻结金额",
+      "withdrawnAmount": "已提现金额"
+    },
+    "buttons": {
+      "approve": "审批通过",
+      "reject": "拒绝",
+      "applyWithdrawal": "提交提现申请",
+      "viewDetail": "查看详情",
+      "export": "导出",
+      "batchApprove": "批量通过",
+      "batchReject": "批量拒绝"
+    },
+    "messages": {
+      "approveSuccess": "审批通过成功",
+      "rejectSuccess": "拒绝成功",
+      "withdrawalSuccess": "提现申请提交成功",
+      "updateSuccess": "更新成功",
+      "deleteSuccess": "删除成功",
+      "approveConfirm": "确定要通过该提现申请吗？",
+      "rejectConfirm": "确定要拒绝该提现申请吗？",
+      "batchApproveConfirm": "确定要批量通过选中的 {count} 条提现申请吗？",
+      "batchRejectConfirm": "确定要批量拒绝选中的 {count} 条提现申请吗？",
+      "insufficientBalance": "可提现余额不足",
+      "belowMinAmount": "提现金额不能低于最低提现金额",
+      "exceedMaxAmount": "提现金额不能超过最高提现金额",
+      "noData": "暂无数据"
+    },
+    "validation": {
+      "withdrawalAmountRequired": "请输入提现金额",
+      "withdrawalAmountInvalid": "提现金额必须大于0",
+      "withdrawalMethodRequired": "请选择提现方式",
+      "accountNameRequired": "请输入账户名称",
+      "accountNumberRequired": "请输入账号",
+      "bankNameRequired": "请输入银行名称",
+      "rejectReasonRequired": "请输入拒绝原因",
+      "minWithdrawalRequired": "请输入最低提现金额",
+      "maxWithdrawalRequired": "请输入最高提现金额",
+      "feeRateRequired": "请输入手续费率",
+      "feeRateInvalid": "手续费率必须在0-100之间"
+    },
+    "searchForm": {
+      "withdrawalNo": "提现单号",
+      "withdrawalNoPlaceholder": "请输入提现单号",
+      "applicant": "申请人",
+      "applicantPlaceholder": "请输入申请人",
+      "shopName": "店铺名称",
+      "shopNamePlaceholder": "请输入店铺名称",
+      "status": "状态",
+      "statusPlaceholder": "请选择状态",
+      "withdrawalMethod": "提现方式",
+      "withdrawalMethodPlaceholder": "请选择提现方式",
+      "dateRange": "申请时间",
+      "dateRangePlaceholder": ["开始日期", "结束日期"],
+      "commissionType": "佣金类型",
+      "commissionTypePlaceholder": "请选择佣金类型"
+    },
+    "dialog": {
+      "approve": "审批提现申请",
+      "reject": "拒绝提现申请",
+      "detail": "提现详情",
+      "applyWithdrawal": "提交提现申请",
+      "withdrawalSettings": "提现配置"
+    },
+    "summary": {
+      "title": "佣金统计",
+      "totalCommission": "累计佣金",
+      "availableBalance": "可提现余额",
+      "frozenAmount": "冻结金额",
+      "withdrawnAmount": "已提现金额",
+      "pendingAmount": "待审核金额",
+      "todayCommission": "今日佣金"
+    }
   }
 }

src/mock/auth.ts

@@ -28,14 +28,11 @@ export const MOCK_ACCOUNTS: MockAccount[] = [
     password: '123456',
     role: UserRole.SUPER_ADMIN,
     userInfo: {
-      id: '1',
+      id: 1,
       username: 'Super',
-      realName: '超级管理员',
-      roles: [UserRole.SUPER_ADMIN],
-      permissions: ['*:*:*'], // 所有权限
-      avatar: '',
-      email: 'super@example.com',
-      phone: '13800138000'
+      phone: '13800138000',
+      user_type: 1,
+      user_type_name: '超级管理员'
     }
   },
   {
@@ -45,20 +42,11 @@ export const MOCK_ACCOUNTS: MockAccount[] = [
     password: '123456',
     role: UserRole.ADMIN,
     userInfo: {
-      id: '2',
+      id: 2,
       username: 'admin',
-      realName: '平台管理员',
-      roles: [UserRole.ADMIN],
-      permissions: [
-        'account:*:*',
-        'card:*:*',
-        'package:*:*',
-        'device:*:*',
-        'commission:view:*'
-      ],
-      avatar: '',
-      email: 'admin@example.com',
-      phone: '13800138001'
+      phone: '13800138001',
+      user_type: 2,
+      user_type_name: '平台管理员'
     }
   },
   {
@@ -68,22 +56,11 @@ export const MOCK_ACCOUNTS: MockAccount[] = [
     password: '123456',
     role: UserRole.AGENT,
     userInfo: {
-      id: '3',
+      id: 3,
       username: 'agent',
-      realName: '一级代理商',
-      roles: [UserRole.AGENT],
-      permissions: [
-        'card:view:*',
-        'card:operation:*',
-        'package:view:*',
-        'device:view:*',
-        'commission:view:own',
-        'commission:withdraw:*'
-      ],
-      avatar: '',
-      email: 'agent@example.com',
       phone: '13800138002',
-      agentId: '100'
+      user_type: 3,
+      user_type_name: '代理商'
     }
   },
   {
@@ -93,20 +70,11 @@ export const MOCK_ACCOUNTS: MockAccount[] = [
     password: '123456',
     role: UserRole.ENTERPRISE,
     userInfo: {
-      id: '4',
+      id: 4,
       username: 'enterprise',
-      realName: '测试企业',
-      roles: [UserRole.ENTERPRISE],
-      permissions: [
-        'card:view:own',
-        'card:operation:own',
-        'package:view:*',
-        'device:view:own'
-      ],
-      avatar: '',
-      email: 'enterprise@example.com',
       phone: '13800138003',
-      enterpriseId: '200'
+      user_type: 4,
+      user_type_name: '企业客户'
     }
   }
 ]
@@ -128,9 +96,10 @@ export const mockLogin = (username: string, password: string): LoginData | null
   const mockRefreshToken = `mock_refresh_${account.key}_${Date.now()}`
 
   return {
-    token: mockToken,
-    refreshToken: mockRefreshToken,
-    expiresIn: 7200 // 2小时
+    access_token: mockToken,
+    refresh_token: mockRefreshToken,
+    expires_in: 7200, // 2小时
+    user: account.userInfo
   }
 }
 

src/router/guards/beforeEach.ts

@@ -14,12 +14,7 @@ import { asyncRoutes } from '../routes/asyncRoutes'
 import { loadingService } from '@/utils/ui'
 import { useCommon } from '@/composables/useCommon'
 import { useWorktabStore } from '@/store/modules/worktab'
-import {
-  isInWhiteList,
-  hasRoutePermission,
-  isTokenValid,
-  buildLoginRedirect
-} from './permission'
+import { isInWhiteList, hasRoutePermission, isTokenValid, buildLoginRedirect } from './permission'
 
 // 是否已注册动态路由
 const isRouteRegistered = ref(false)

src/router/routes/asyncRoutes.ts

@@ -730,33 +730,24 @@ export const asyncRoutes: AppRouteRecord[] = [
           keepAlive: true
         }
       },
-      {
-        path: 'customer-role',
-        name: 'CustomerRole',
-        component: RoutesAlias.CustomerRole,
-        meta: {
-          title: 'menus.accountManagement.customerRole',
-          keepAlive: true
-        }
-      },
-      {
-        path: 'agent',
-        name: 'AgentManagement',
-        component: RoutesAlias.AgentManagement,
-        meta: {
-          title: 'menus.accountManagement.agent',
-          keepAlive: true
-        }
-      },
-      {
-        path: 'enterprise-customer',
-        name: 'EnterpriseCustomer',
-        component: RoutesAlias.EnterpriseCustomer,
-        meta: {
-          title: 'menus.accountManagement.enterpriseCustomer',
-          keepAlive: true
-        }
-      },
+      // {
+      //   path: 'customer-role',
+      //   name: 'CustomerRole',
+      //   component: RoutesAlias.CustomerRole,
+      //   meta: {
+      //     title: 'menus.accountManagement.customerRole',
+      //     keepAlive: true
+      //   }
+      // },
+      // {
+      //   path: 'agent',
+      //   name: 'AgentManagement',
+      //   component: RoutesAlias.AgentManagement,
+      //   meta: {
+      //     title: 'menus.accountManagement.agent',
+      //     keepAlive: true
+      //   }
+      // },
       {
         path: 'customer-account',
         name: 'CustomerAccount',
@@ -777,51 +768,51 @@ export const asyncRoutes: AppRouteRecord[] = [
       icon: ''
     },
     children: [
-      {
-        path: 'sim-card',
-        name: 'SimCardManagement',
-        component: RoutesAlias.SimCardManagement,
-        meta: {
-          title: 'menus.product.simCard',
-          keepAlive: true
-        }
-      },
-      {
-        path: 'sim-card-assign',
-        name: 'SimCardAssign',
-        component: RoutesAlias.SimCardAssign,
-        meta: {
-          title: 'menus.product.simCardAssign',
-          keepAlive: true
-        }
-      },
-      {
-        path: 'package-series',
-        name: 'PackageSeries',
-        component: RoutesAlias.PackageSeries,
-        meta: {
-          title: 'menus.product.packageSeries',
-          keepAlive: true
-        }
-      },
-      {
-        path: 'package-list',
-        name: 'PackageList',
-        component: RoutesAlias.PackageList,
-        meta: {
-          title: 'menus.product.packageList',
-          keepAlive: true
-        }
-      },
-      {
-        path: 'package-assign',
-        name: 'PackageAssign',
-        component: RoutesAlias.PackageAssign,
-        meta: {
-          title: 'menus.product.packageAssign',
-          keepAlive: true
-        }
-      },
+      // {
+      //   path: 'sim-card',
+      //   name: 'SimCardManagement',
+      //   component: RoutesAlias.SimCardManagement,
+      //   meta: {
+      //     title: 'menus.product.simCard',
+      //     keepAlive: true
+      //   }
+      // },
+      // {
+      //   path: 'sim-card-assign',
+      //   name: 'SimCardAssign',
+      //   component: RoutesAlias.SimCardAssign,
+      //   meta: {
+      //     title: 'menus.product.simCardAssign',
+      //     keepAlive: true
+      //   }
+      // },
+      // {
+      //   path: 'package-series',
+      //   name: 'PackageSeries',
+      //   component: RoutesAlias.PackageSeries,
+      //   meta: {
+      //     title: 'menus.product.packageSeries',
+      //     keepAlive: true
+      //   }
+      // },
+      // {
+      //   path: 'package-list',
+      //   name: 'PackageList',
+      //   component: RoutesAlias.PackageList,
+      //   meta: {
+      //     title: 'menus.product.packageList',
+      //     keepAlive: true
+      //   }
+      // },
+      // {
+      //   path: 'package-assign',
+      //   name: 'PackageAssign',
+      //   component: RoutesAlias.PackageAssign,
+      //   meta: {
+      //     title: 'menus.product.packageAssign',
+      //     keepAlive: true
+      //   }
+      // },
       {
         path: 'shop',
         name: 'Shop',
@@ -898,127 +889,169 @@ export const asyncRoutes: AppRouteRecord[] = [
       icon: ''
     },
     children: [
+      // {
+      //   path: 'customer-account',
+      //   name: 'CustomerAccountList',
+      //   component: RoutesAlias.CustomerAccountList,
+      //   meta: {
+      //     title: 'menus.account.customerAccount',
+      //     keepAlive: true
+      //   }
+      // },
       {
-        path: 'customer-account',
-        name: 'CustomerAccountList',
-        component: RoutesAlias.CustomerAccountList,
+        path: 'enterprise-customer',
+        name: 'EnterpriseCustomer',
+        component: RoutesAlias.EnterpriseCustomer,
         meta: {
-          title: 'menus.account.customerAccount',
+          title: 'menus.accountManagement.enterpriseCustomer',
           keepAlive: true
         }
       },
+      // {
+      //   path: 'my-account',
+      //   name: 'MyAccount',
+      //   component: RoutesAlias.MyAccount,
+      //   meta: {
+      //     title: 'menus.account.myAccount',
+      //     keepAlive: true
+      //   }
+      // }
       {
-        path: 'withdrawal',
-        name: 'WithdrawalManagement',
-        component: RoutesAlias.WithdrawalManagement,
+        path: 'commission',
+        name: 'CommissionManagement',
+        component: '',
         meta: {
-          title: 'menus.account.withdrawal',
-          keepAlive: true
-        }
-      },
-      {
-        path: 'withdrawal-settings',
-        name: 'WithdrawalSettings',
-        component: RoutesAlias.WithdrawalSettings,
-        meta: {
-          title: 'menus.account.withdrawalSettings',
-          keepAlive: true
-        }
-      },
-      {
-        path: 'my-account',
-        name: 'MyAccount',
-        component: RoutesAlias.MyAccount,
-        meta: {
-          title: 'menus.account.myAccount',
-          keepAlive: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/settings',
-    name: 'Settings',
-    component: RoutesAlias.Home,
-    meta: {
-      title: 'menus.settings.title',
-      icon: ''
-    },
-    children: [
-      {
-        path: 'payment-merchant',
-        name: 'PaymentMerchant',
-        component: RoutesAlias.PaymentMerchant,
-        meta: {
-          title: 'menus.settings.paymentMerchant',
-          keepAlive: true
-        }
-      },
-      {
-        path: 'developer-api',
-        name: 'DeveloperApi',
-        component: RoutesAlias.DeveloperApi,
-        meta: {
-          title: 'menus.settings.developerApi',
-          keepAlive: true
-        }
-      },
-      {
-        path: 'commission-template',
-        name: 'CommissionTemplate',
-        component: RoutesAlias.CommissionTemplate,
-        meta: {
-          title: 'menus.settings.commissionTemplate',
-          keepAlive: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/batch',
-    name: 'Batch',
-    component: RoutesAlias.Home,
-    meta: {
-      title: 'menus.batch.title',
-      icon: ''
-    },
-    children: [
-      {
-        path: 'sim-import',
-        name: 'SimImport',
-        component: RoutesAlias.SimImport,
-        meta: {
-          title: 'menus.batch.simImport',
-          keepAlive: true
-        }
-      },
-      {
-        path: 'device-import',
-        name: 'DeviceImport',
-        component: RoutesAlias.DeviceImport,
-        meta: {
-          title: 'menus.batch.deviceImport',
-          keepAlive: true
-        }
-      },
-      {
-        path: 'offline-batch-recharge',
-        name: 'OfflineBatchRecharge',
-        component: RoutesAlias.OfflineBatchRecharge,
-        meta: {
-          title: 'menus.batch.offlineBatchRecharge',
-          keepAlive: true
-        }
-      },
-      {
-        path: 'card-change-notice',
-        name: 'CardChangeNotice',
-        component: RoutesAlias.CardChangeNotice,
-        meta: {
-          title: 'menus.batch.cardChangeNotice',
-          keepAlive: true
-        }
+          title: 'menus.commission.menu.management',
+          icon: ''
+        },
+        children: [
+          {
+            path: 'withdrawal-approval',
+            name: 'WithdrawalApproval',
+            component: RoutesAlias.WithdrawalApproval,
+            meta: {
+              title: 'menus.commission.menu.withdrawal',
+              keepAlive: true,
+              roles: ['R_SUPER', 'R_ADMIN']
+            }
+          },
+          {
+            path: 'withdrawal-settings',
+            name: 'CommissionWithdrawalSettings',
+            component: RoutesAlias.CommissionWithdrawalSettings,
+            meta: {
+              title: 'menus.commission.menu.withdrawalSettings',
+              keepAlive: true,
+              roles: ['R_SUPER', 'R_ADMIN']
+            }
+          },
+          {
+            path: 'my-commission',
+            name: 'MyCommission',
+            component: RoutesAlias.MyCommission,
+            meta: {
+              title: 'menus.commission.menu.myCommission',
+              keepAlive: true,
+              roles: ['R_AGENT']
+            }
+          },
+          {
+            path: 'agent-commission',
+            name: 'AgentCommission',
+            component: RoutesAlias.AgentCommission,
+            meta: {
+              title: 'menus.commission.menu.agentCommission',
+              keepAlive: true,
+              roles: ['R_SUPER', 'R_ADMIN']
+            }
+          }
+        ]
       }
     ]
   }
+  // {
+  //   path: '/settings',
+  //   name: 'Settings',
+  //   component: RoutesAlias.Home,
+  //   meta: {
+  //     title: 'menus.settings.title',
+  //     icon: ''
+  //   },
+  //   children: [
+  //     {
+  //       path: 'payment-merchant',
+  //       name: 'PaymentMerchant',
+  //       component: RoutesAlias.PaymentMerchant,
+  //       meta: {
+  //         title: 'menus.settings.paymentMerchant',
+  //         keepAlive: true
+  //       }
+  //     },
+  //     {
+  //       path: 'developer-api',
+  //       name: 'DeveloperApi',
+  //       component: RoutesAlias.DeveloperApi,
+  //       meta: {
+  //         title: 'menus.settings.developerApi',
+  //         keepAlive: true
+  //       }
+  //     },
+  //     {
+  //       path: 'commission-template',
+  //       name: 'CommissionTemplate',
+  //       component: RoutesAlias.CommissionTemplate,
+  //       meta: {
+  //         title: 'menus.settings.commissionTemplate',
+  //         keepAlive: true
+  //       }
+  //     }
+  //   ]
+  // },
+  // {
+  //   path: '/batch',
+  //   name: 'Batch',
+  //   component: RoutesAlias.Home,
+  //   meta: {
+  //     title: 'menus.batch.title',
+  //     icon: ''
+  //   },
+  //   children: [
+  //     {
+  //       path: 'sim-import',
+  //       name: 'SimImport',
+  //       component: RoutesAlias.SimImport,
+  //       meta: {
+  //         title: 'menus.batch.simImport',
+  //         keepAlive: true
+  //       }
+  //     },
+  //     {
+  //       path: 'device-import',
+  //       name: 'DeviceImport',
+  //       component: RoutesAlias.DeviceImport,
+  //       meta: {
+  //         title: 'menus.batch.deviceImport',
+  //         keepAlive: true
+  //       }
+  //     },
+  //     {
+  //       path: 'offline-batch-recharge',
+  //       name: 'OfflineBatchRecharge',
+  //       component: RoutesAlias.OfflineBatchRecharge,
+  //       meta: {
+  //         title: 'menus.batch.offlineBatchRecharge',
+  //         keepAlive: true
+  //       }
+  //     },
+  //     {
+  //       path: 'card-change-notice',
+  //       name: 'CardChangeNotice',
+  //       component: RoutesAlias.CardChangeNotice,
+  //       meta: {
+  //         title: 'menus.batch.cardChangeNotice',
+  //         keepAlive: true
+  //       }
+  //     }
+  //   ]
+  // }
 ]

src/router/routesAlias.ts

@@ -97,10 +97,14 @@ export enum RoutesAlias {
 
   // 账户管理
   CustomerAccountList = '/finance/customer-account', // 客户账号
-  WithdrawalManagement = '/finance/withdrawal', // 佣金提现
-  WithdrawalSettings = '/finance/withdrawal-settings', // 佣金提现设置
   MyAccount = '/finance/my-account', // 我的账户
 
+  // 佣金管理
+  WithdrawalApproval = '/finance/commission/withdrawal-approval', // 提现审批
+  CommissionWithdrawalSettings = '/finance/commission/withdrawal-settings', // 提现配置
+  MyCommission = '/finance/commission/my-commission', // 我的佣金
+  AgentCommission = '/finance/commission/agent-commission', // 代理商佣金管理
+
   // 设置管理
   PaymentMerchant = '/settings/payment-merchant', // 支付商户
   DeveloperApi = '/settings/developer-api', // 开发者API

src/types/api/account.ts

@@ -2,8 +2,7 @@
  * 账号相关类型定义
  */
 
-import { PaginationParams } from './common'
-import { UserRole } from './auth'
+import { PaginationParams } from '@/types'
 
 // 账号状态
 export enum AccountStatus {
@@ -113,13 +112,6 @@ export interface AgentQueryParams extends PaginationParams {
   status?: AccountStatus
 }
 
-// 企业客户查询参数
-export interface EnterpriseQueryParams extends PaginationParams {
-  keyword?: string
-  customerRoleId?: string | number
-  status?: AccountStatus
-}
-
 // 创建账号参数（匹配后端 ModelCreateAccountRequest）
 export interface CreatePlatformAccountParams {
   username: string // 用户名 (3-50字符)
@@ -143,24 +135,3 @@ export interface CreateAgentParams {
   password: string
   status: AccountStatus
 }
-
-// 创建企业客户参数
-export interface CreateEnterpriseParams {
-  enterpriseCode: string
-  enterpriseName: string
-  contactPerson: string
-  contactPhone: string
-  email?: string
-  address?: string
-  customerRoleId: string | number
-  username: string
-  password: string
-  status: AccountStatus
-}
-
-// 账号操作参数
-export interface AccountOperationParams {
-  id: string | number
-  operation: 'resetPassword' | 'unbindPhone' | 'enable' | 'disable' | 'lock'
-  newPassword?: string // 重置密码时需要
-}

src/types/api/commission.ts

@@ -2,235 +2,249 @@
  * 佣金相关类型定义
  */
 
-import { PaginationParams } from './common'
+import { PaginationParams } from '@/types'
 
 // 佣金状态
 export enum CommissionStatus {
-  PENDING = 'pending', // 待结算
-  SETTLED = 'settled', // 已结算
-  WITHDRAWN = 'withdrawn', // 已提现
-  FROZEN = 'frozen' // 冻结
+  FROZEN = 1, // 已冻结
+  UNFREEZING = 2, // 解冻中
+  RELEASED = 3, // 已发放
+  INVALID = 4 // 已失效
 }
 
 // 提现状态
 export enum WithdrawalStatus {
-  PENDING = 'pending', // 待审核
-  APPROVED = 'approved', // 已通过
-  REJECTED = 'rejected', // 已拒绝
-  PROCESSING = 'processing', // 处理中
-  COMPLETED = 'completed', // 已完成
-  FAILED = 'failed' // 失败
+  PENDING = 1, // 待审核
+  APPROVED = 2, // 已通过
+  REJECTED = 3, // 已拒绝
+  COMPLETED = 4 // 已到账
 }
 
 // 佣金类型
 export enum CommissionType {
-  CARD_SALE = 'cardSale', // 号卡销售佣金
-  PACKAGE_SALE = 'packageSale', // 套餐销售佣金
-  RECHARGE = 'recharge', // 充值佣金
-  RENEWAL = 'renewal' // 续费佣金
+  ONE_TIME = 'one_time', // 一次性佣金
+  LONG_TERM = 'long_term' // 长期佣金
 }
 
-// 分佣模板
-export interface CommissionTemplate {
-  id: string | number
-  templateCode: string // 模板编码
-  templateName: string // 模板名称
-  description?: string
-  // 分佣规则
-  rules: CommissionRule[]
-  status: 1 | 0 // 启用/禁用
-  isDefault: boolean // 是否默认模板
-  createTime: string
-  updateTime?: string
-  creatorName?: string
+// 提现方式
+export enum WithdrawalMethod {
+  ALIPAY = 'alipay', // 支付宝
+  WECHAT = 'wechat', // 微信
+  BANK = 'bank' // 银行卡
 }
 
-// 分佣规则
-export interface CommissionRule {
-  id?: string | number
-  type: CommissionType // 佣金类型
-  rateType: 'fixed' | 'percentage' // 固定金额/百分比
-  value: number // 金额或百分比值
-  minAmount?: number // 最小触发金额
-  maxAmount?: number // 最大触发金额
-  description?: string
+// 放款类型
+export enum PaymentType {
+  MANUAL = 'manual' // 人工打款
 }
 
-// 佣金记录
-export interface CommissionRecord {
-  id: string | number
-  recordNo: string // 记录编号
-  // 关联信息
-  accountId: string | number
-  accountName: string
-  accountType: 'agent' | 'enterprise'
-  // 佣金信息
-  type: CommissionType
-  amount: number // 佣金金额
-  sourceAmount: number // 源交易金额
-  rate: number // 佣金比例
-  status: CommissionStatus
-  // 来源信息
-  sourceType: 'card' | 'package' | 'recharge' // 来源类型
-  sourceId: string | number // 来源ID
-  sourceName?: string
-  orderId?: string | number // 关联订单ID
-  orderNo?: string
-  // 结算信息
-  settleTime?: string // 结算时间
-  withdrawTime?: string // 提现时间
-  withdrawId?: string | number // 提现申请ID
-  // 时间信息
-  createTime: string
-  remark?: string
+// ==================== 提现申请相关 ====================
+
+/**
+ * 提现申请项
+ */
+export interface WithdrawalRequestItem {
+  id: number // 提现申请ID
+  withdrawal_no: string // 提现单号
+  shop_id: number // 店铺ID
+  shop_name: string // 店铺名称
+  shop_hierarchy?: string // 店铺层级路径
+  amount: number // 提现金额(分)
+  actual_amount: number // 实际到账金额(分)
+  fee: number // 手续费(分)
+  fee_rate: number // 手续费比率(基点,100=1%)
+  withdrawal_method: WithdrawalMethod // 提现方式
+  account_name: string // 收款账户名称
+  account_number: string // 收款账号
+  bank_name?: string // 银行名称
+  status: WithdrawalStatus // 状态
+  payment_type: PaymentType // 放款类型
+  applicant_id: number // 申请人账号ID
+  applicant_name: string // 申请人用户名
+  processor_id?: number // 处理人账号ID
+  processor_name?: string // 处理人用户名
+  reject_reason?: string // 拒绝原因
+  remark?: string // 备注
+  created_at: string // 申请时间
+  processed_at?: string // 处理时间
 }
 
-// 提现申请
-export interface WithdrawalApplication {
-  id: string | number
-  applicationNo: string // 申请单号
-  // 申请人信息
-  applicantId: string | number
-  applicantName: string
-  applicantType: 'agent' | 'enterprise'
-  // 提现信息
-  amount: number // 提现金额
-  fee?: number // 手续费
-  actualAmount?: number // 实际到账金额
-  status: WithdrawalStatus
-  // 收款信息
-  bankName?: string // 银行名称
-  bankAccount?: string // 银行账号
-  accountName?: string // 账户名
-  alipayAccount?: string // 支付宝账号
-  wechatAccount?: string // 微信账号
-  paymentMethod: 'bank' | 'alipay' | 'wechat' // 支付方式
-  // 审核信息
-  applyTime: string
-  processTime?: string // 处理时间
-  processorId?: string | number
-  processorName?: string
-  rejectReason?: string // 拒绝原因
-  // 完成信息
-  completeTime?: string
-  transactionNo?: string // 交易流水号
-  remark?: string
+/**
+ * 提现申请查询参数
+ */
+export interface WithdrawalRequestQueryParams extends PaginationParams {
+  status?: WithdrawalStatus // 状态筛选
+  withdrawal_no?: string // 提现单号
+  shop_name?: string // 店铺名称
+  start_time?: string // 申请开始时间
+  end_time?: string // 申请结束时间
 }
 
-// 客户账户（佣金视图）
-export interface CustomerCommissionAccount {
-  id: string | number
-  accountId: string | number
-  accountName: string
-  accountType: 'agent' | 'enterprise'
-  // 佣金统计
-  totalCommission: number // 总佣金
-  settledCommission: number // 已结算佣金
-  withdrawnCommission: number // 已提现佣金
-  pendingCommission: number // 待结算佣金
-  frozenCommission: number // 冻结佣金
-  availableCommission: number // 可提现佣金
-  // 提现统计
-  totalWithdrawal: number // 累计提现
-  withdrawalCount: number // 提现次数
-  lastWithdrawalTime?: string // 最后提现时间
-  // 时间信息
-  createTime: string
-  updateTime?: string
+/**
+ * 审批提现申请参数
+ */
+export interface ApproveWithdrawalParams {
+  remark?: string // 审批备注
 }
 
-// 我的账户（当前登录账号的佣金数据）
-export interface MyCommissionAccount {
-  // 佣金概览
-  totalCommission: number
-  settledCommission: number
-  withdrawnCommission: number
-  pendingCommission: number
-  availableCommission: number
-  frozenCommission: number
-  // 本月数据
-  monthCommission: number // 本月佣金
-  monthSettled: number // 本月已结算
-  // 今日数据
-  todayCommission: number
-  // 提现信息
-  totalWithdrawal: number
-  withdrawalCount: number
-  pendingWithdrawal: number // 待审核提现
-  // 图表数据（近7天/30天）
-  chartData?: {
-    dates: string[]
-    commissions: number[]
-  }
+/**
+ * 拒绝提现申请参数
+ */
+export interface RejectWithdrawalParams {
+  reject_reason: string // 拒绝原因
+  remark?: string // 备注
 }
 
-// 佣金提现设置
-export interface WithdrawalSetting {
-  id: string | number
-  // 提现规则
-  minAmount: number // 最小提现金额
-  maxAmount?: number // 最大提现金额
-  dailyLimit?: number // 每日提现次数限制
-  fee: number // 手续费
-  feeType: 'fixed' | 'percentage' // 固定金额/百分比
-  // 审核设置
-  autoApprove: boolean // 是否自动审核
-  autoApproveAmount?: number // 自动审核金额阈值
-  // 到账时间
-  arrivalDays: number // 预计到账天数
-  // 生效时间
-  effectiveTime: string
-  createTime: string
-  creatorName?: string
+// ==================== 提现配置相关 ====================
+
+/**
+ * 提现配置项
+ */
+export interface WithdrawalSettingItem {
+  id: number // 配置ID
+  min_withdrawal_amount: number // 最低提现金额(分)
+  fee_rate: number // 手续费比率(基点,100=1%)
+  daily_withdrawal_limit: number // 每日提现次数限制
+  arrival_days: number // 到账天数
+  is_active: boolean // 是否生效
+  creator_id?: number // 创建人ID
+  creator_name?: string // 创建人用户名
+  created_at: string // 创建时间
 }
 
-// 佣金查询参数
-export interface CommissionQueryParams extends PaginationParams {
-  accountId?: string | number
-  accountType?: 'agent' | 'enterprise'
-  type?: CommissionType
-  status?: CommissionStatus
-  amountRange?: [number, number]
-  createTimeRange?: [string, string]
-  settleTimeRange?: [string, string]
+/**
+ * 创建提现配置参数
+ */
+export interface CreateWithdrawalSettingParams {
+  min_withdrawal_amount: number // 最低提现金额(分)
+  fee_rate: number // 手续费比率(基点,100=1%)
+  daily_withdrawal_limit: number // 每日提现次数限制
+  arrival_days: number // 到账天数
 }
 
-// 提现查询参数
-export interface WithdrawalQueryParams extends PaginationParams {
-  applicationNo?: string
-  applicantId?: string | number
-  applicantName?: string
-  status?: WithdrawalStatus
-  paymentMethod?: 'bank' | 'alipay' | 'wechat'
-  amountRange?: [number, number]
-  applyTimeRange?: [string, string]
+// ==================== 佣金记录相关 ====================
+
+/**
+ * 我的佣金记录项
+ */
+export interface MyCommissionRecordItem {
+  id: number // 佣金记录ID
+  amount: number // 佣金金额(分)
+  commission_type: CommissionType // 佣金类型
+  status: CommissionStatus // 状态
+  order_id?: number // 订单ID
+  shop_id: number // 店铺ID
+  created_at: string // 创建时间
 }
 
-// 创建分佣模板参数
-export interface CreateCommissionTemplateParams {
-  templateCode: string
-  templateName: string
-  description?: string
-  rules: CommissionRule[]
-  isDefault: boolean
+/**
+ * 佣金记录查询参数
+ */
+export interface CommissionRecordQueryParams extends PaginationParams {
+  commission_type?: CommissionType // 佣金类型
+  status?: CommissionStatus // 状态
+  start_time?: string // 开始时间
+  end_time?: string // 结束时间
 }
 
-// 申请提现参数
-export interface ApplyWithdrawalParams {
-  amount: number
-  paymentMethod: 'bank' | 'alipay' | 'wechat'
-  bankName?: string
-  bankAccount?: string
-  accountName?: string
-  alipayAccount?: string
-  wechatAccount?: string
-  remark?: string
+/**
+ * 我的佣金概览
+ */
+export interface MyCommissionSummary {
+  total_commission: number // 总佣金(分)
+  available_commission: number // 可提现佣金(分)
+  frozen_commission: number // 冻结中佣金(分)
+  withdrawing_commission: number // 提现中佣金(分)
+  withdrawn_commission: number // 已提现佣金(分)
 }
 
-// 审核提现参数
-export interface ProcessWithdrawalParams {
-  id: string | number
-  status: 'approved' | 'rejected'
-  rejectReason?: string
-  remark?: string
+/**
+ * 发起提现申请参数
+ */
+export interface SubmitWithdrawalParams {
+  amount: number // 提现金额(分)
+  withdrawal_method: WithdrawalMethod // 提现方式
+  account_name: string // 收款账户名称
+  account_number: string // 收款账号
+  bank_name?: string // 银行名称(银行卡提现时必填)
+  remark?: string // 备注
+}
+
+// ==================== 代理商佣金相关 ====================
+
+/**
+ * 代理商佣金记录项
+ */
+export interface ShopCommissionRecordItem {
+  id: number // 佣金记录ID
+  amount: number // 佣金金额(分)
+  balance_after: number // 入账后佣金余额(分)
+  commission_type: CommissionType // 佣金类型
+  status: CommissionStatus // 状态
+  order_id?: number // 订单ID
+  order_no?: string // 订单号
+  order_created_at?: string // 订单创建时间
+  iccid?: string // ICCID
+  device_no?: string // 设备号
+  created_at: string // 佣金入账时间
+}
+
+/**
+ * 代理商佣金汇总项
+ */
+export interface ShopCommissionSummaryItem {
+  shop_id: number // 店铺ID
+  shop_code: string // 店铺编码
+  shop_name: string // 店铺名称
+  username?: string // 主账号用户名
+  phone?: string // 主账号手机号
+  total_commission: number // 总佣金(分)
+  available_commission: number // 可提现佣金(分)
+  frozen_commission: number // 冻结中佣金(分)
+  withdrawing_commission: number // 提现中佣金(分)
+  withdrawn_commission: number // 已提现佣金(分)
+  unwithdraw_commission: number // 未提现佣金(分)
+  created_at?: string // 店铺创建时间
+}
+
+/**
+ * 代理商佣金汇总查询参数
+ */
+export interface ShopCommissionSummaryQueryParams extends PaginationParams {
+  shop_name?: string // 店铺名称
+  shop_code?: string // 店铺编码
+}
+
+// ==================== 响应类型 ====================
+
+export interface WithdrawalRequestPageResult {
+  items: WithdrawalRequestItem[] | null
+  page: number
+  size: number
+  total: number
+}
+
+export interface WithdrawalSettingListResult {
+  items: WithdrawalSettingItem[]
+}
+
+export interface MyCommissionRecordPageResult {
+  items: MyCommissionRecordItem[] | null
+  page: number
+  size: number
+  total: number
+}
+
+export interface ShopCommissionRecordPageResult {
+  items: ShopCommissionRecordItem[] | null
+  page: number
+  size: number
+  total: number
+}
+
+export interface ShopCommissionSummaryPageResult {
+  items: ShopCommissionSummaryItem[] | null
+  page: number
+  size: number
+  total: number
 }

src/types/api/common.ts

@@ -16,6 +16,8 @@ export interface PaginationParams {
   size?: number
   pageNum?: number
   pageSize?: number
+  page?: number
+  page_size?: number
 }
 
 // 分页响应数据

src/types/api/customerAccount.ts

@@ -0,0 +1,63 @@
+/**
+ * 客户账号管理相关类型定义
+ */
+
+// 客户账号信息
+export interface CustomerAccountItem {
+  id: number
+  username: string
+  phone: string
+  user_type: number // 3=代理账号, 4=企业账号
+  user_type_name: string
+  shop_id: number | null
+  shop_name: string
+  enterprise_id: number | null
+  enterprise_name: string
+  status: number // 0=禁用, 1=启用
+  status_name: string
+  created_at: string
+}
+
+// 客户账号分页结果
+export interface CustomerAccountPageResult {
+  items: CustomerAccountItem[]
+  page: number
+  size: number
+  total: number
+}
+
+// 查询客户账号列表参数
+export interface CustomerAccountQueryParams {
+  page?: number
+  page_size?: number
+  username?: string
+  phone?: string
+  user_type?: number | null
+  shop_id?: number | null
+  enterprise_id?: number | null
+  status?: number | null
+}
+
+// 新增代理商账号参数
+export interface CreateCustomerAccountParams {
+  username: string
+  phone: string
+  password: string
+  shop_id: number
+}
+
+// 编辑账号参数
+export interface UpdateCustomerAccountParams {
+  username?: string
+  phone?: string
+}
+
+// 修改账号密码参数
+export interface UpdateCustomerAccountPasswordParams {
+  password: string
+}
+
+// 修改账号状态参数
+export interface UpdateCustomerAccountStatusParams {
+  status: 0 | 1
+}

src/types/api/enterprise.ts

@@ -0,0 +1,91 @@
+/**
+ * 企业客户管理相关类型定义
+ */
+
+// 企业信息
+export interface EnterpriseItem {
+  id: number
+  enterprise_code: string
+  enterprise_name: string
+  business_license: string
+  legal_person: string
+  province: string
+  city: string
+  district: string
+  address: string
+  contact_name: string
+  contact_phone: string
+  login_phone: string
+  owner_shop_id: number | null
+  owner_shop_name: string
+  status: number // 0=禁用, 1=启用
+  status_name: string
+  created_at: string
+}
+
+// 企业客户分页结果
+export interface EnterprisePageResult {
+  items: EnterpriseItem[]
+  page: number
+  size: number
+  total: number
+}
+
+// 查询企业客户列表参数
+export interface EnterpriseQueryParams {
+  page?: number
+  page_size?: number
+  enterprise_name?: string
+  login_phone?: string
+  contact_phone?: string
+  owner_shop_id?: number | null
+  status?: number | null
+}
+
+// 新增企业客户参数
+export interface CreateEnterpriseParams {
+  enterprise_code: string
+  enterprise_name: string
+  business_license?: string
+  legal_person?: string
+  province?: string
+  city?: string
+  district?: string
+  address?: string
+  contact_name: string
+  contact_phone: string
+  login_phone: string
+  password: string
+  owner_shop_id?: number | null
+}
+
+// 编辑企业信息参数
+export interface UpdateEnterpriseParams {
+  enterprise_code?: string
+  enterprise_name?: string
+  business_license?: string
+  legal_person?: string
+  province?: string
+  city?: string
+  district?: string
+  address?: string
+  contact_name?: string
+  contact_phone?: string
+  owner_shop_id?: number | null
+}
+
+// 修改企业账号密码参数
+export interface UpdateEnterprisePasswordParams {
+  password: string
+}
+
+// 启用/禁用企业参数
+export interface UpdateEnterpriseStatusParams {
+  status: 0 | 1
+}
+
+// 新增企业客户响应
+export interface CreateEnterpriseResponse {
+  account_id: number
+  enterprise: EnterpriseItem
+}

src/types/api/index.ts

@@ -38,5 +38,11 @@ export * from './device'
 // 佣金相关
 export * from './commission'
 
+// 企业客户相关
+export * from './enterprise'
+
+// 客户账号相关
+export * from './customerAccount'
+
 // 设置相关
 export * from './setting'

src/types/auto-imports.d.ts

@@ -8,7 +8,7 @@ export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const ElButton: (typeof import('element-plus/es'))['ElButton']
-  const ElMessage: typeof import('element-plus/es')['ElMessage']
+  const ElMessage: (typeof import('element-plus/es'))['ElMessage']
   const ElMessageBox: (typeof import('element-plus/es'))['ElMessageBox']
   const ElNotification: (typeof import('element-plus/es'))['ElNotification']
   const ElPopconfirm: (typeof import('element-plus/es'))['ElPopconfirm']

src/utils/business/format.ts

@@ -183,3 +183,15 @@ export function formatDateTime(
     .replace('mm', minutes)
     .replace('ss', seconds)
 }
+
+/**
+ * 格式化费率（基点 -> 百分比）
+ * @param basisPoints 费率基点（100基点=1%）
+ * @param decimal 保留小数位数
+ */
+export function formatFeeRate(basisPoints: number | undefined, decimal = 2): string {
+  if (basisPoints === undefined || basisPoints === null) return '-'
+
+  const percentage = (basisPoints / 100).toFixed(decimal)
+  return `${percentage}%`
+}

src/utils/business/validate.ts

@@ -42,9 +42,7 @@ export function validateEmail(email: string): boolean {
  * @param idCard 身份证号
  */
 export function validateIdCard(idCard: string): boolean {
-  return /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/.test(
-    idCard
-  )
+  return /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/.test(idCard)
 }
 
 /**

src/utils/http/index.ts

@@ -190,7 +190,8 @@ function processRequestConfig(config: ExtendedRequestConfig): AxiosRequestConfig
 function handleErrorMessage(error: any, mode: ErrorMessageMode = 'message') {
   if (mode === 'none') return
 
-  const errorMessage = error.response?.data?.msg
+  // 优先使用响应中的 msg 字段
+  const errorMessage = error.response?.data?.msg || error.message
   const message = errorMessage || '请求超时或服务器异常！'
 
   if (mode === 'modal') {
@@ -222,11 +223,9 @@ async function request<T = any>(config: ExtendedRequestConfig): Promise<T> {
     return res.data
   } catch (e) {
     if (axios.isAxiosError(e)) {
-      // 只有明确指定了错误消息模式才显示错误
-      const errorMode = config.requestOptions?.errorMessageMode
-      if (errorMode && errorMode !== 'none') {
-        handleErrorMessage(e, errorMode)
-      }
+      // 默认显示错误消息，除非明确设置为 'none'
+      const errorMode = config.requestOptions?.errorMessageMode || 'message'
+      handleErrorMessage(e, errorMode)
     }
     return Promise.reject(e)
   }

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;