完善按钮和详情权限

2026-02-28 11:04:32 +08:00
parent 4470a4ef04
commit ce1032c7f9
23 changed files with 984 additions and 760 deletions
--- a/openspec/changes/add-button-permissions/tasks.md
+++ b/openspec/changes/add-button-permissions/tasks.md
@@ -90,7 +90,7 @@

 - [x] **IoT卡任务页面** (`/asset-management/iot-card-task`)
  - ✅ 引入 `useAuth` composable
-  - ✅ 为"批量导入IoT卡"按钮添加 `v-permission="'lot_task:bulk_import'"`
+  - ✅ 为"批量导入IoT卡"按钮添加 `v-permission="''"`
  - ✅ 验证权限控制正确工作

 - [x] **设备任务页面** (`/asset-management/device-task`)
--- a/src/locales/langs/en.json
+++ b/src/locales/langs/en.json
@@ -421,7 +421,8 @@
      "withdrawalSettings": "Withdrawal Settings",
      "myAccount": "My Account",
      "carrierManagement": "Carrier Management",
-      "orders": "Order Management"
+      "orders": "Order Management",
+      "orderDetail": "Order Details"
    },
    "deviceManagement": {
      "title": "Device Management",
--- a/src/locales/langs/zh.json
+++ b/src/locales/langs/zh.json
@@ -448,13 +448,16 @@
      "standaloneCardList": "IoT卡管理",
      "iotCardTask": "IoT卡任务",
      "deviceTask": "设备任务",
+      "taskDetail": "任务详情",
      "devices": "设备管理",
      "deviceDetail": "设备详情",
      "assetAssign": "分配记录",
+      "assetAssignDetail": "资产分配详情",
      "allocationRecordDetail": "分配记录详情",
      "cardReplacementRequest": "换卡申请",
      "authorizationRecords": "授权记录",
      "authorizationDetail": "授权记录详情",
+      "authorizationRecordDetail": "授权记录详情",
      "enterpriseDevices": "企业设备列表"
    },
    "account": {
@@ -462,7 +465,8 @@
      "customerAccount": "客户账号",
      "myAccount": "我的账户",
      "carrierManagement": "运营商管理",
-      "orders": "订单管理"
+      "orders": "订单管理",
+      "orderDetail": "订单详情"
    },
    "commission": {
      "menu": {
@@ -470,7 +474,7 @@
        "withdrawal": "提现审批",
        "withdrawalSettings": "提现配置",
        "myCommission": "我的佣金",
-        "agentCommission": "代理商佣金管理"
+        "agentCommission": "代理商佣金"
      }
    },
    "settings": {
@@ -605,7 +609,7 @@
      "withdrawal": "提现审批",
      "withdrawalSettings": "提现配置",
      "myCommission": "我的佣金",
-      "agentCommission": "代理商佣金管理"
+      "agentCommission": "代理商佣金"
    },
    "table": {
      "withdrawalNo": "提现单号",
--- a/src/router/routes/asyncRoutes.ts
+++ b/src/router/routes/asyncRoutes.ts
@@ -1014,6 +1014,16 @@ export const asyncRoutes: AppRouteRecord[] = [
          keepAlive: true
        }
      },
+      {
+        path: 'task-detail',
+        name: 'TaskDetail',
+        component: RoutesAlias.TaskDetail,
+        meta: {
+          title: 'menus.assetManagement.taskDetail',
+          isHide: true,
+          keepAlive: false
+        }
+      },
      {
        path: 'devices',
        name: 'DeviceList',
@@ -1042,6 +1052,16 @@ export const asyncRoutes: AppRouteRecord[] = [
          keepAlive: true
        }
      },
+      {
+        path: 'asset-assign/detail/:id',
+        name: 'AssetAssignDetail',
+        component: RoutesAlias.AssetAssignDetail,
+        meta: {
+          title: 'menus.assetManagement.assetAssignDetail',
+          isHide: true,
+          keepAlive: false
+        }
+      },
      // {
      //   path: 'card-replacement-request',
      //   name: 'CardReplacementRequest',
@@ -1060,6 +1080,16 @@ export const asyncRoutes: AppRouteRecord[] = [
          keepAlive: true
        }
      },
+      {
+        path: 'authorization-records/detail/:id',
+        name: 'AuthorizationRecordDetail',
+        component: RoutesAlias.AuthorizationRecordDetail,
+        meta: {
+          title: 'menus.assetManagement.authorizationRecordDetail',
+          isHide: true,
+          keepAlive: false
+        }
+      },
      {
        path: 'enterprise-devices',
        name: 'EnterpriseDevices',
@@ -1093,11 +1123,21 @@ export const asyncRoutes: AppRouteRecord[] = [
      {
        path: 'orders',
        name: 'OrderManagement',
-        component: RoutesAlias.OrderList,
+        component: '/order-management/order-list',
        meta: {
          title: 'menus.account.orders',
          keepAlive: true
        }
+      },
+      {
+        path: 'orders/detail/:id',
+        name: 'OrderDetail',
+        component: '/order-management/order-list/detail',
+        meta: {
+          title: 'menus.account.orderDetail',
+          isHide: true,
+          keepAlive: false
+        }
      }
      // {
      //   path: 'my-account',
--- a/src/router/routesAlias.ts
+++ b/src/router/routesAlias.ts
@@ -99,18 +99,22 @@ export enum RoutesAlias {
  StandaloneCardList = '/asset-management/iot-card-management', // IoT卡管理
  IotCardTask = '/asset-management/iot-card-task', // IoT卡任务
  DeviceTask = '/asset-management/device-task', // 设备任务
+  TaskDetail = '/asset-management/task-detail', // 任务详情（IoT卡/设备任务详情）
  DeviceList = '/asset-management/device-list', // 设备列表
  DeviceDetail = '/asset-management/device-detail', // 设备详情
  AssetAssign = '/asset-management/asset-assign', // 资产分配(分配记录)
+  AssetAssignDetail = '/asset-management/asset-assign/detail', // 资产分配详情
  CardReplacementRequest = '/asset-management/card-replacement-request', // 换卡申请
  AuthorizationRecords = '/asset-management/authorization-records', // 授权记录
+  AuthorizationRecordDetail = '/asset-management/authorization-records/detail', // 授权记录详情
  EnterpriseDevices = '/asset-management/enterprise-devices', // 企业设备列表

  // 账户管理
  CustomerAccountList = '/finance/customer-account', // 客户账号
  MyAccount = '/finance/my-account', // 我的账户
  CarrierManagement = '/finance/carrier-management', // 运营商管理
-  OrderList = '/order-management/order-list', // 订单管理
+  OrderList = '/account/orders', // 订单管理
+  OrderDetail = '/account/orders/detail', // 订单详情

  // 佣金管理
  WithdrawalApproval = '/finance/commission/withdrawal-approval', // 提现审批
--- a/src/views/account-management/account/index.vue
+++ b/src/views/account-management/account/index.vue
@@ -475,6 +475,7 @@
          activeText: getStatusText(CommonStatus.ENABLED),
          inactiveText: getStatusText(CommonStatus.DISABLED),
          inlinePrompt: true,
+          disabled: !hasAuth('account:modify_status'),
          'onUpdate:modelValue': (val: string | number | boolean) =>
            handleStatusChange(row, val as number)
        })
--- a/src/views/account-management/enterprise-customer/index.vue
+++ b/src/views/account-management/enterprise-customer/index.vue
@@ -450,6 +450,7 @@
          activeText: '启用',
          inactiveText: '禁用',
          inlinePrompt: true,
+          disabled: !hasAuth('enterprise_customer:status'),
          'onUpdate:modelValue': (val: string | number | boolean) =>
            handleStatusChange(row, val as number)
        })
--- a/src/views/asset-management/asset-assign/detail.vue
+++ b/src/views/asset-management/asset-assign/detail.vue
@@ -0,0 +1,135 @@
+<template>
+  <div class="asset-assign-detail">
+    <ElCard shadow="never">
+      <!-- 页面头部 -->
+      <div class="detail-header">
+        <ElButton @click="handleBack">
+          <template #icon>
+            <ElIcon><ArrowLeft /></ElIcon>
+          </template>
+          返回
+        </ElButton>
+        <h2 class="detail-title">资产分配详情</h2>
+      </div>
+
+      <!-- 详情内容 -->
+      <DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />
+
+      <!-- 加载中 -->
+      <div v-if="loading" class="loading-container">
+        <ElIcon class="is-loading"><Loading /></ElIcon>
+        <span>加载中...</span>
+      </div>
+    </ElCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import { ElCard, ElButton, ElIcon, ElMessage } from 'element-plus'
+  import { ArrowLeft, Loading } from '@element-plus/icons-vue'
+  import DetailPage from '@/components/common/DetailPage.vue'
+  import type { DetailSection } from '@/components/common/DetailPage.vue'
+  import { CardService } from '@/api/modules'
+  import type { AssetAllocationRecord } from '@/types/api/card'
+  import { formatDateTime } from '@/utils/business/format'
+
+  defineOptions({ name: 'AssetAssignDetail' })
+
+  const route = useRoute()
+  const router = useRouter()
+
+  const loading = ref(false)
+  const detailData = ref<AssetAllocationRecord | null>(null)
+
+  // 详情页配置
+  const detailSections: DetailSection[] = [
+    {
+      title: '基本信息',
+      fields: [
+        { label: '分配单号', prop: 'allocation_no' },
+        {
+          label: '分配类型',
+          formatter: (_, data) => data.allocation_name || '-'
+        },
+        {
+          label: '资产类型',
+          formatter: (_, data) => data.asset_type_name || '-'
+        },
+        { label: '资产标识符', prop: 'asset_identifier' },
+        { label: '来源所有者', prop: 'from_owner_name' },
+        { label: '目标所有者', prop: 'to_owner_name' },
+        { label: '操作人', prop: 'operator_name' },
+        { label: '关联卡数量', prop: 'related_card_count' },
+        { label: '创建时间', prop: 'created_at', formatter: (value) => formatDateTime(value) },
+        { label: '备注', prop: 'remark', formatter: (value) => value || '-' }
+      ]
+    }
+  ]
+
+  // 返回上一页
+  const handleBack = () => {
+    router.back()
+  }
+
+  // 获取详情数据
+  const fetchDetail = async () => {
+    const id = Number(route.params.id)
+    if (!id) {
+      ElMessage.error('缺少ID参数')
+      return
+    }
+
+    loading.value = true
+    try {
+      const res = await CardService.getAssetAllocationRecordDetail(id)
+      if (res.code === 0) {
+        detailData.value = res.data
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取资产分配详情失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(() => {
+    fetchDetail()
+  })
+</script>
+
+<style scoped lang="scss">
+  .asset-assign-detail {
+    padding: 20px;
+  }
+
+  .detail-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding-bottom: 16px;
+
+    .detail-title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    gap: 12px;
+    color: var(--el-text-color-secondary);
+
+    .el-icon {
+      font-size: 32px;
+    }
+  }
+</style>
--- a/src/views/asset-management/asset-assign/index.vue
+++ b/src/views/asset-management/asset-assign/index.vue
@@ -30,45 +30,20 @@
          :marginTop="10"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
+          @row-contextmenu="handleRowContextMenu"
        >
          <template #default>
            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
-            <ElTableColumn label="操作" width="120" fixed="right">
-              <template #default="scope">
-                <ElButton type="primary" link @click="viewDetail(scope.row)">查看详情</ElButton>
-              </template>
-            </ElTableColumn>
          </template>
        </ArtTable>

-        <!-- 分配详情对话框 -->
-        <ElDialog v-model="detailDialogVisible" title="分配详情" width="700px">
-          <ElDescriptions v-if="currentRecord" :column="2" border>
-            <ElDescriptionsItem label="分配单号" :span="2">{{ currentRecord.allocation_no }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="分配类型">
-              <ElTag :type="getAllocationTypeType(currentRecord.allocation_type)">
-                {{ currentRecord.allocation_name }}
-              </ElTag>
-            </ElDescriptionsItem>
-            <ElDescriptionsItem label="资产类型">
-              <ElTag :type="getAssetTypeType(currentRecord.asset_type)">
-                {{ currentRecord.asset_type_name }}
-              </ElTag>
-            </ElDescriptionsItem>
-            <ElDescriptionsItem label="资产标识符" :span="2">{{ currentRecord.asset_identifier }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="来源所有者">{{ currentRecord.from_owner_name }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="目标所有者">{{ currentRecord.to_owner_name }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="操作人">{{ currentRecord.operator_name }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="关联卡数量">{{ currentRecord.related_card_count }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="创建时间" :span="2">{{ formatDateTime(currentRecord.created_at) }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="备注" :span="2">{{ currentRecord.remark || '--' }}</ElDescriptionsItem>
-          </ElDescriptions>
-          <template #footer>
-            <div class="dialog-footer">
-              <ElButton type="primary" @click="detailDialogVisible = false">关闭</ElButton>
-            </div>
-          </template>
-        </ElDialog>
+        <!-- 右键菜单 -->
+        <ArtMenuRight
+          ref="contextMenuRef"
+          :menu-items="contextMenuItems"
+          :menu-width="120"
+          @select="handleContextMenuSelect"
+        />
      </ElCard>
    </div>
  </ArtTableFullScreen>
@@ -81,16 +56,21 @@
  import { ElMessage, ElTag } from 'element-plus'
  import type { SearchFormItem } from '@/types'
  import { useCheckedColumns } from '@/composables/useCheckedColumns'
+  import { useAuth } from '@/composables/useAuth'
  import { formatDateTime } from '@/utils/business/format'
  import type { AssetAllocationRecord, AllocationTypeEnum, AssetTypeEnum } from '@/types/api/card'
+  import { RoutesAlias } from '@/router/routesAlias'
+  import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
+  import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'

  defineOptions({ name: 'AssetAllocationRecords' })

+  const { hasAuth } = useAuth()
  const router = useRouter()
  const loading = ref(false)
-  const detailDialogVisible = ref(false)
  const tableRef = ref()
-  const currentRecord = ref<AssetAllocationRecord | null>(null)
+  const contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
+  const currentRow = ref<AssetAllocationRecord | null>(null)

  // 搜索表单初始值
  const initialSearchState = {
@@ -205,7 +185,7 @@
    {
      prop: 'allocation_no',
      label: '分配单号',
-      minWidth: 180
+      minWidth: 200
    },
    {
      prop: 'allocation_name',
@@ -338,8 +318,39 @@

  // 查看详情
  const viewDetail = (row: AssetAllocationRecord) => {
-    currentRecord.value = row
-    detailDialogVisible.value = true
+    router.push({
+      path: `${RoutesAlias.AssetAssign}/detail/${row.id}`
+    })
+  }
+
+  // 右键菜单项配置
+  const contextMenuItems = computed((): MenuItemType[] => {
+    const items: MenuItemType[] = []
+
+    if (hasAuth('asset_assign:view_detail')) {
+      items.push({ key: 'detail', label: '详情' })
+    }
+
+    return items
+  })
+
+  // 处理表格行右键菜单
+  const handleRowContextMenu = (row: AssetAllocationRecord, column: any, event: MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+    currentRow.value = row
+    contextMenuRef.value?.show(event)
+  }
+
+  // 处理右键菜单选择
+  const handleContextMenuSelect = (item: MenuItemType) => {
+    if (!currentRow.value) return
+
+    switch (item.key) {
+      case 'detail':
+        viewDetail(currentRow.value)
+        break
+    }
  }
 </script>

--- a/src/views/asset-management/authorization-records/detail.vue
+++ b/src/views/asset-management/authorization-records/detail.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="authorization-record-detail">
+    <ElCard shadow="never">
+      <!-- 页面头部 -->
+      <div class="detail-header">
+        <ElButton @click="handleBack">
+          <template #icon>
+            <ElIcon><ArrowLeft /></ElIcon>
+          </template>
+          返回
+        </ElButton>
+        <h2 class="detail-title">授权记录详情</h2>
+      </div>
+
+      <!-- 详情内容 -->
+      <DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />
+
+      <!-- 加载中 -->
+      <div v-if="loading" class="loading-container">
+        <ElIcon class="is-loading"><Loading /></ElIcon>
+        <span>加载中...</span>
+      </div>
+    </ElCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import { ElCard, ElButton, ElIcon, ElMessage } from 'element-plus'
+  import { ArrowLeft, Loading } from '@element-plus/icons-vue'
+  import DetailPage from '@/components/common/DetailPage.vue'
+  import type { DetailSection } from '@/components/common/DetailPage.vue'
+  import { AuthorizationService } from '@/api/modules'
+  import type { AuthorizationItem } from '@/types/api/authorization'
+  import { formatDateTime } from '@/utils/business/format'
+
+  defineOptions({ name: 'AuthorizationRecordDetail' })
+
+  const route = useRoute()
+  const router = useRouter()
+
+  const loading = ref(false)
+  const detailData = ref<AuthorizationItem | null>(null)
+
+  // 详情页配置
+  const detailSections: DetailSection[] = [
+    {
+      title: '基本信息',
+      fields: [
+        { label: '企业ID', prop: 'enterprise_id' },
+        { label: '企业名称', prop: 'enterprise_name' },
+        { label: '卡ID', prop: 'card_id' },
+        { label: 'ICCID', prop: 'iccid' },
+        { label: '手机号', prop: 'msisdn', formatter: (value) => value || '-' },
+        { label: '授权人ID', prop: 'authorized_by' },
+        { label: '授权人', prop: 'authorizer_name' },
+        {
+          label: '授权人类型',
+          formatter: (_, data) => {
+            return data.authorizer_type === 2 ? '平台' : '代理'
+          }
+        },
+        { label: '授权时间', prop: 'authorized_at', formatter: (value) => formatDateTime(value) },
+        {
+          label: '状态',
+          formatter: (_, data) => {
+            return data.status === 1 ? '有效' : '已回收'
+          }
+        },
+        { label: '备注', prop: 'remark', formatter: (value) => value || '-' }
+      ]
+    }
+  ]
+
+  // 返回上一页
+  const handleBack = () => {
+    router.back()
+  }
+
+  // 获取详情数据
+  const fetchDetail = async () => {
+    const id = Number(route.params.id)
+    if (!id) {
+      ElMessage.error('缺少ID参数')
+      return
+    }
+
+    loading.value = true
+    try {
+      const res = await AuthorizationService.getAuthorizationDetail(id)
+      if (res.code === 0) {
+        detailData.value = res.data
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取授权记录详情失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(() => {
+    fetchDetail()
+  })
+</script>
+
+<style scoped lang="scss">
+  .authorization-record-detail {
+    padding: 20px;
+  }
+
+  .detail-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding-bottom: 16px;
+
+    .detail-title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    gap: 12px;
+    color: var(--el-text-color-secondary);
+
+    .el-icon {
+      font-size: 32px;
+    }
+  }
+</style>
--- a/src/views/asset-management/authorization-records/index.vue
+++ b/src/views/asset-management/authorization-records/index.vue
@@ -45,50 +45,6 @@
          @select="handleContextMenuSelect"
        />

-        <!-- 授权详情对话框 -->
-        <ElDialog v-model="detailDialogVisible" title="授权详情" width="700px">
-          <ElDescriptions v-if="currentRecord" :column="2" border>
-            <ElDescriptionsItem label="企业ID">{{
-              currentRecord.enterprise_id
-            }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="企业名称">{{
-              currentRecord.enterprise_name
-            }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="卡ID">{{ currentRecord.card_id }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="ICCID">{{ currentRecord.iccid }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="手机号">{{
-              currentRecord.msisdn || '--'
-            }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="授权人ID">{{
-              currentRecord.authorized_by
-            }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="授权人">{{
-              currentRecord.authorizer_name
-            }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="授权人类型">
-              <ElTag :type="getAuthorizerTypeTag(currentRecord.authorizer_type)">
-                {{ getAuthorizerTypeText(currentRecord.authorizer_type) }}
-              </ElTag>
-            </ElDescriptionsItem>
-            <ElDescriptionsItem label="授权时间" :span="2">{{
-              formatDateTime(currentRecord.authorized_at)
-            }}</ElDescriptionsItem>
-            <ElDescriptionsItem label="状态" :span="2">
-              <ElTag :type="getStatusTag(currentRecord.status)">
-                {{ getStatusText(currentRecord.status) }}
-              </ElTag>
-            </ElDescriptionsItem>
-            <ElDescriptionsItem label="备注" :span="2">{{
-              currentRecord.remark || '--'
-            }}</ElDescriptionsItem>
-          </ElDescriptions>
-          <template #footer>
-            <div class="dialog-footer">
-              <ElButton type="primary" @click="detailDialogVisible = false">关闭</ElButton>
-            </div>
-          </template>
-        </ElDialog>
-
        <!-- 修改备注对话框 -->
        <ElDialog v-model="remarkDialogVisible" title="修改备注" width="500px">
          <ElForm ref="remarkFormRef" :model="remarkForm" :rules="remarkRules" label-width="80px">
@@ -136,19 +92,18 @@
    AuthorizerType
  } from '@/types/api/authorization'
  import { CommonStatus } from '@/config/constants'
+  import { RoutesAlias } from '@/router/routesAlias'

  defineOptions({ name: 'AuthorizationRecords' })

  const { hasAuth } = useAuth()
  const router = useRouter()
  const loading = ref(false)
-  const detailDialogVisible = ref(false)
  const remarkDialogVisible = ref(false)
  const remarkLoading = ref(false)
  const tableRef = ref()
  const remarkFormRef = ref<FormInstance>()
  const currentRecordId = ref<number>(0)
-  const currentRecord = ref<AuthorizationItem | null>(null)
  const contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
  const currentRow = ref<AuthorizationItem | null>(null)

@@ -394,8 +349,9 @@

  // 查看详情
  const viewDetail = (row: AuthorizationItem) => {
-    currentRecord.value = row
-    detailDialogVisible.value = true
+    router.push({
+      path: `${RoutesAlias.AuthorizationRecords}/detail/${row.id}`
+    })
  }

  // 显示修改备注对话框
@@ -433,7 +389,9 @@
  const contextMenuItems = computed((): MenuItemType[] => {
    const items: MenuItemType[] = []

-    items.push({ key: 'detail', label: '详情' })
+    if (hasAuth('authorization_records:view_detail')) {
+      items.push({ key: 'detail', label: '详情' })
+    }

    if (hasAuth('authorization_records:update_remark')) {
      items.push({ key: 'edit', label: '编辑' })
--- a/src/views/asset-management/device-list/index.vue
+++ b/src/views/asset-management/device-list/index.vue
@@ -21,14 +21,14 @@
              type="primary"
              @click="handleBatchAllocate"
              :disabled="!selectedDevices.length"
-              v-permission="'devices:batch_allocation'"
+              v-permission="'device:batch_allocate'"
            >
              批量分配
            </ElButton>
            <ElButton
              @click="handleBatchRecall"
              :disabled="!selectedDevices.length"
-              v-permission="'devices:batch_recycle'"
+              v-permission="'device:batch_recall'"
            >
              批量回收
            </ElButton>
@@ -36,7 +36,7 @@
              type="info"
              @click="handleBatchSetSeries"
              :disabled="!selectedDevices.length"
-              v-permission="'devices:batch_setting'"
+              v-permission="'device:batch_set_series'"
            >
              批量设置套餐系列
            </ElButton>
@@ -1625,37 +1625,49 @@
    const items: MenuItemType[] = []

    // 添加查看卡片到菜单最前面
-    if (hasAuth('devices:look_binding')) {
+    if (hasAuth('device:view_cards')) {
      items.push({
        key: 'view-cards',
        label: '查看卡片'
      })
    }

-    items.push(
-      {
+    if (hasAuth('device:reboot')) {
+      items.push({
        key: 'reboot',
        label: '重启设备'
-      },
-      {
+      })
+    }
+
+    if (hasAuth('device:factory_reset')) {
+      items.push({
        key: 'reset',
        label: '恢复出厂'
-      },
-      {
+      })
+    }
+
+    if (hasAuth('device:set_speed_limit')) {
+      items.push({
        key: 'speed-limit',
        label: '设置限速'
-      },
-      {
+      })
+    }
+
+    if (hasAuth('device:switch_sim')) {
+      items.push({
        key: 'switch-card',
        label: '切换SIM卡'
-      },
-      {
+      })
+    }
+
+    if (hasAuth('device:set_wifi')) {
+      items.push({
        key: 'set-wifi',
        label: '设置WiFi'
-      }
-    )
+      })
+    }

-    if (hasAuth('devices:delete')) {
+    if (hasAuth('device:delete')) {
      items.push({
        key: 'delete',
        label: '删除设备'
--- a/src/views/asset-management/device-task/index.vue
+++ b/src/views/asset-management/device-task/index.vue
@@ -107,122 +107,12 @@
      </template>
    </ElDialog>

-    <!-- 任务详情对话框 -->
-    <ElDialog v-model="detailDialogVisible" title="设备导入任务详情" width="900px" align-center>
-      <ElDescriptions :column="2" border>
-        <ElDescriptionsItem label="任务编号" :span="2">{{
-          currentDetail.task_no
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="状态">
-          <ElTag :type="getStatusType(currentDetail.status)">{{ currentDetail.status_text }}</ElTag>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="批次号">{{ currentDetail.batch_no }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="文件名" :span="2">{{
-          currentDetail.file_name
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="总数">{{ currentDetail.total_count }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="成功数">
-          <span style="color: var(--el-color-success)">{{ currentDetail.success_count }}</span>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="跳过数">{{ currentDetail.skip_count }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="失败数">
-          <span style="color: var(--el-color-danger)">{{ currentDetail.fail_count }}</span>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="警告数">
-          <span style="color: var(--el-color-warning)">{{ currentDetail.warning_count }}</span>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="开始时间">{{ currentDetail.started_at }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="完成时间">{{ currentDetail.completed_at }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="创建时间">{{ currentDetail.created_at }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="错误信息" :span="2">{{
-          currentDetail.error_message
-        }}</ElDescriptionsItem>
-      </ElDescriptions>
-
-      <ElDivider content-position="left">跳过明细</ElDivider>
-      <div
-        v-if="currentDetail.skipped_items && currentDetail.skipped_items.length"
-        style="max-height: 300px; overflow-y: auto; margin-bottom: 20px"
-      >
-        <ElTable :data="currentDetail.skipped_items" border size="small">
-          <ElTableColumn label="行号" prop="line" width="80" />
-          <ElTableColumn label="设备编号" prop="device_no" width="180" />
-          <ElTableColumn label="跳过原因" prop="reason" min-width="300">
-            <template #default="{ row }">
-              {{ row.reason || '未知原因' }}
-            </template>
-          </ElTableColumn>
-        </ElTable>
-      </div>
-      <ElEmpty v-else description="无跳过记录" />
-
-      <ElDivider content-position="left">警告明细</ElDivider>
-      <div
-        v-if="currentDetail.warning_items && currentDetail.warning_items.length"
-        style="max-height: 300px; overflow-y: auto; margin-bottom: 20px"
-      >
-        <ElTable :data="currentDetail.warning_items" border size="small">
-          <ElTableColumn label="行号" prop="line" width="80" />
-          <ElTableColumn label="设备编号" prop="device_no" width="180" />
-          <ElTableColumn label="警告信息" prop="reason" min-width="300">
-            <template #default="{ row }">
-              {{ row.reason || row.message || '未知警告' }}
-            </template>
-          </ElTableColumn>
-        </ElTable>
-      </div>
-      <ElEmpty v-else description="无警告记录" />
-
-      <ElDivider content-position="left">失败明细</ElDivider>
-      <div
-        v-if="currentDetail.failed_items && currentDetail.failed_items.length"
-        style="max-height: 300px; overflow-y: auto"
-      >
-        <ElTable :data="currentDetail.failed_items" border size="small">
-          <ElTableColumn label="行号" prop="line" width="80" />
-          <ElTableColumn label="设备编号" prop="device_no" width="180" />
-          <ElTableColumn label="失败原因" prop="reason" min-width="300">
-            <template #default="{ row }">
-              {{ row.reason || '未知错误' }}
-            </template>
-          </ElTableColumn>
-        </ElTable>
-      </div>
-      <ElEmpty v-else description="无失败记录" />
-
-      <template #footer>
-        <ElButton @click="detailDialogVisible = false">关闭</ElButton>
-        <ElButton
-          v-if="currentDetail.skip_count > 0"
-          type="warning"
-          :icon="Download"
-          @click="downloadSkippedData"
-        >
-          下载跳过数据
-        </ElButton>
-        <ElButton
-          v-if="currentDetail.warning_count > 0"
-          type="warning"
-          :icon="Download"
-          @click="downloadWarningData"
-        >
-          下载警告数据
-        </ElButton>
-        <ElButton
-          v-if="currentDetail.fail_count > 0"
-          type="primary"
-          :icon="Download"
-          @click="downloadFailData"
-        >
-          下载失败数据
-        </ElButton>
-      </template>
-    </ElDialog>
  </ArtTableFullScreen>
 </template>

 <script setup lang="ts">
  import { h } from 'vue'
+  import { useRouter } from 'vue-router'
  import { DeviceService } from '@/api/modules'
  import { ElMessage, ElTag } from 'element-plus'
  import { Download, UploadFilled, Upload } from '@element-plus/icons-vue'
@@ -236,9 +126,11 @@
  import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
  import { StorageService } from '@/api/modules/storage'
  import type { DeviceImportTask, DeviceImportTaskStatus } from '@/types/api/device'
+  import { RoutesAlias } from '@/router/routesAlias'

  defineOptions({ name: 'DeviceTask' })

+  const router = useRouter()
  const { hasAuth } = useAuth()
  const loading = ref(false)
  const tableRef = ref()
@@ -246,7 +138,6 @@
  const fileList = ref<File[]>([])
  const uploading = ref(false)
  const importDialogVisible = ref(false)
-  const detailDialogVisible = ref(false)
  const contextMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
  const currentRow = ref<DeviceImportTask | null>(null)

@@ -323,7 +214,6 @@
  ]

  const taskList = ref<DeviceImportTask[]>([])
-  const currentDetail = ref<any>({})

  // 获取状态标签类型
  const getStatusType = (status: DeviceImportTaskStatus) => {
@@ -342,22 +232,14 @@
  }

  // 查看详情
-  const viewDetail = async (row: DeviceImportTask) => {
-    try {
-      const res = await DeviceService.getImportTaskDetail(row.id)
-      if (res.code === 0 && res.data) {
-        currentDetail.value = {
-          ...res.data,
-          started_at: res.data.started_at ? formatDateTime(res.data.started_at) : '-',
-          completed_at: res.data.completed_at ? formatDateTime(res.data.completed_at) : '-',
-          created_at: res.data.created_at ? formatDateTime(res.data.created_at) : '-'
-        }
-        detailDialogVisible.value = true
+  const viewDetail = (row: DeviceImportTask) => {
+    router.push({
+      path: RoutesAlias.TaskDetail,
+      query: {
+        id: row.id,
+        task_type: 'device'
      }
-    } catch (error) {
-      console.error('获取任务详情失败:', error)
-      ElMessage.error('获取任务详情失败')
-    }
+    })
  }

  // 动态列配置
@@ -674,7 +556,41 @@
      const res = await DeviceService.getImportTaskDetail(row.id)
      if (res.code === 0 && res.data) {
        const detail = res.data
-        downloadFailDataFromDetail(detail, row.batch_no)
+        const failReasons =
+          detail.failed_items?.map((item: any) => ({
+            line: item.line || '-',
+            deviceNo: item.device_no || '-',
+            message: item.reason || '未知错误'
+          })) || []
+
+        if (failReasons.length === 0) {
+          ElMessage.warning('没有失败数据可下载')
+          return
+        }
+
+        const headers = ['行号', '设备编号', '失败原因']
+        const csvRows = [
+          headers.join(','),
+          ...failReasons.map((item: any) =>
+            [item.line, `\t${item.deviceNo}`, `"${item.message}"`].join(',')
+          )
+        ]
+        const csvContent = csvRows.join('\n')
+
+        const BOM = '\uFEFF'
+        const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
+
+        const link = document.createElement('a')
+        const url = URL.createObjectURL(blob)
+        link.setAttribute('href', url)
+        link.setAttribute('download', `导入失败数据_${row.batch_no}.csv`)
+        link.style.visibility = 'hidden'
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        URL.revokeObjectURL(url)
+
+        ElMessage.success('失败数据下载成功')
      }
    } catch (error) {
      console.error('下载失败数据失败:', error)
@@ -682,147 +598,17 @@
    }
  }

-  // 下载跳过数据（从详情对话框）
-  const downloadSkippedData = () => {
-    downloadSkippedDataFromDetail(currentDetail.value, currentDetail.value.batch_no)
-  }
-
-  // 下载跳过数据的通用方法
-  const downloadSkippedDataFromDetail = (detail: any, batchNo: string) => {
-    const skippedReasons =
-      detail.skipped_items?.map((item: any) => ({
-        line: item.line || '-',
-        deviceNo: item.device_no || '-',
-        message: item.reason || '未知原因'
-      })) || []
-
-    if (skippedReasons.length === 0) {
-      ElMessage.warning('没有跳过数据可下载')
-      return
-    }
-
-    const headers = ['行号', '设备编号', '跳过原因']
-    const csvRows = [
-      headers.join(','),
-      ...skippedReasons.map((item: any) =>
-        [item.line, `\t${item.deviceNo}`, `"${item.message}"`].join(',')
-      )
-    ]
-    const csvContent = csvRows.join('\n')
-
-    const BOM = '\uFEFF'
-    const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
-
-    const link = document.createElement('a')
-    const url = URL.createObjectURL(blob)
-    link.setAttribute('href', url)
-    link.setAttribute('download', `设备导入跳过数据_${batchNo}.csv`)
-    link.style.visibility = 'hidden'
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-    URL.revokeObjectURL(url)
-
-    ElMessage.success('跳过数据下载成功')
-  }
-
-  // 下载警告数据（从详情对话框）
-  const downloadWarningData = () => {
-    downloadWarningDataFromDetail(currentDetail.value, currentDetail.value.batch_no)
-  }
-
-  // 下载警告数据的通用方法
-  const downloadWarningDataFromDetail = (detail: any, batchNo: string) => {
-    const warningReasons =
-      detail.warning_items?.map((item: any) => ({
-        line: item.line || '-',
-        deviceNo: item.device_no || '-',
-        message: item.reason || item.message || '未知警告'
-      })) || []
-
-    if (warningReasons.length === 0) {
-      ElMessage.warning('没有警告数据可下载')
-      return
-    }
-
-    const headers = ['行号', '设备编号', '警告信息']
-    const csvRows = [
-      headers.join(','),
-      ...warningReasons.map((item: any) =>
-        [item.line, `\t${item.deviceNo}`, `"${item.message}"`].join(',')
-      )
-    ]
-    const csvContent = csvRows.join('\n')
-
-    const BOM = '\uFEFF'
-    const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
-
-    const link = document.createElement('a')
-    const url = URL.createObjectURL(blob)
-    link.setAttribute('href', url)
-    link.setAttribute('download', `设备导入警告数据_${batchNo}.csv`)
-    link.style.visibility = 'hidden'
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-    URL.revokeObjectURL(url)
-
-    ElMessage.success('警告数据下载成功')
-  }
-
-  // 下载失败数据（从详情对话框）
-  const downloadFailData = () => {
-    downloadFailDataFromDetail(currentDetail.value, currentDetail.value.batch_no)
-  }
-
-  // 下载失败数据的通用方法
-  const downloadFailDataFromDetail = (detail: any, batchNo: string) => {
-    const failReasons =
-      detail.failed_items?.map((item: any) => ({
-        line: item.line || '-',
-        deviceNo: item.device_no || '-',
-        message: item.reason || '未知错误'
-      })) || []
-
-    if (failReasons.length === 0) {
-      ElMessage.warning('没有失败数据可下载')
-      return
-    }
-
-    const headers = ['行号', '设备编号', '失败原因']
-    const csvRows = [
-      headers.join(','),
-      ...failReasons.map((item: any) =>
-        [item.line, `\t${item.deviceNo}`, `"${item.message}"`].join(',')
-      )
-    ]
-    const csvContent = csvRows.join('\n')
-
-    const BOM = '\uFEFF'
-    const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
-
-    const link = document.createElement('a')
-    const url = URL.createObjectURL(blob)
-    link.setAttribute('href', url)
-    link.setAttribute('download', `导入失败数据_${batchNo}.csv`)
-    link.style.visibility = 'hidden'
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-    URL.revokeObjectURL(url)
-
-    ElMessage.success('失败数据下载成功')
-  }
-
  // 右键菜单项配置
  const contextMenuItems = computed((): MenuItemType[] => {
    if (!currentRow.value) return []

    const items: MenuItemType[] = []

-    items.push({ key: 'detail', label: '详情' })
+    if (hasAuth('device_task:view_detail')) {
+      items.push({ key: 'detail', label: '详情' })
+    }

-    if (currentRow.value.fail_count > 0) {
+    if (currentRow.value.fail_count > 0 && hasAuth('device_task:download_fail_data')) {
      items.push({ key: 'failData', label: '失败数据' })
    }

--- a/src/views/asset-management/iot-card-management/index.vue
+++ b/src/views/asset-management/iot-card-management/index.vue
@@ -47,7 +47,8 @@
                hasAuth('iot_card:batch_recharge') ||
                hasAuth('iot_card:network_distribution') ||
                hasAuth('iot_card:network_recycle') ||
-                hasAuth('iot_card:change_package')
+                hasAuth('iot_card:change_package') ||
+                hasAuth('iot_card:batch_download')
              "
              type="info"
              @contextmenu.prevent="showMoreMenu"
@@ -1502,10 +1503,12 @@
      })
    }

-    items.push({
-      key: 'download',
-      label: '批量下载'
-    })
+    if (hasAuth('iot_card:batch_download')) {
+      items.push({
+        key: 'download',
+        label: '批量下载'
+      })
+    }

    if (hasAuth('iot_card:change_package')) {
      items.push({
@@ -1518,32 +1521,53 @@
  })

  // 卡操作菜单项配置
-  const cardOperationMenuItems = computed((): MenuItemType[] => [
-    {
-      key: 'query-flow',
-      label: '查询流量'
-    },
-    {
-      key: 'realname-status',
-      label: '查询实名状态'
-    },
-    {
-      key: 'card-status',
-      label: '查询卡状态'
-    },
-    {
-      key: 'realname-link',
-      label: '获取实名链接'
-    },
-    {
-      key: 'start-card',
-      label: '启用卡片'
-    },
-    {
-      key: 'stop-card',
-      label: '停用卡片'
+  const cardOperationMenuItems = computed((): MenuItemType[] => {
+    const items: MenuItemType[] = []
+
+    if (hasAuth('iot_card:query_flow')) {
+      items.push({
+        key: 'query-flow',
+        label: '查询流量'
+      })
    }
-  ])
+
+    if (hasAuth('iot_card:query_realname_status')) {
+      items.push({
+        key: 'realname-status',
+        label: '查询实名状态'
+      })
+    }
+
+    if (hasAuth('iot_card:query_card_status')) {
+      items.push({
+        key: 'card-status',
+        label: '查询卡状态'
+      })
+    }
+
+    if (hasAuth('iot_card:get_realname_link')) {
+      items.push({
+        key: 'realname-link',
+        label: '获取实名链接'
+      })
+    }
+
+    if (hasAuth('iot_card:start_card')) {
+      items.push({
+        key: 'start-card',
+        label: '启用卡片'
+      })
+    }
+
+    if (hasAuth('iot_card:stop_card')) {
+      items.push({
+        key: 'stop-card',
+        label: '停用卡片'
+      })
+    }
+
+    return items
+  })

  // 显示更多操作菜单
  const showMoreMenu = (e: MouseEvent) => {
--- a/src/views/asset-management/iot-card-task/index.vue
+++ b/src/views/asset-management/iot-card-task/index.vue
@@ -126,100 +126,12 @@
        </ElButton>
      </template>
    </ElDialog>
-
-    <!-- 任务详情对话框 -->
-    <ElDialog v-model="detailDialogVisible" title="IoT卡导入任务详情" width="900px" align-center>
-      <ElDescriptions :column="2" border>
-        <ElDescriptionsItem label="任务编号" :span="2">{{
-          currentDetail.task_no
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="状态">
-          <ElTag :type="getStatusType(currentDetail.status)">{{ currentDetail.status_text }}</ElTag>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="运营商">{{ currentDetail.carrier_name }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="文件名" :span="2">{{
-          currentDetail.file_name
-        }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="总数">{{ currentDetail.total_count }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="成功数">
-          <span style="color: var(--el-color-success)">{{ currentDetail.success_count }}</span>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="跳过数">{{ currentDetail.skip_count }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="失败数">
-          <span style="color: var(--el-color-danger)">{{ currentDetail.fail_count }}</span>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="警告数">
-          <span style="color: var(--el-color-warning)">{{ currentDetail.warning_count }}</span>
-        </ElDescriptionsItem>
-        <ElDescriptionsItem label="开始时间">{{ currentDetail.started_at }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="完成时间">{{ currentDetail.completed_at }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="创建时间">{{ currentDetail.created_at }}</ElDescriptionsItem>
-        <ElDescriptionsItem label="错误信息" :span="2">{{
-          currentDetail.error_message
-        }}</ElDescriptionsItem>
-      </ElDescriptions>
-
-      <ElDivider content-position="left">跳过明细</ElDivider>
-      <div
-        v-if="currentDetail.skipped_items && currentDetail.skipped_items.length"
-        style="max-height: 300px; overflow-y: auto; margin-bottom: 20px"
-      >
-        <ElTable :data="currentDetail.skipped_items" border size="small">
-          <ElTableColumn label="行号" prop="line" width="80" />
-          <ElTableColumn label="ICCID" prop="iccid" width="200" />
-          <ElTableColumn label="MSISDN" prop="msisdn" width="150" />
-          <ElTableColumn label="跳过原因" prop="reason" min-width="200">
-            <template #default="{ row }">
-              {{ row.reason || '未知原因' }}
-            </template>
-          </ElTableColumn>
-        </ElTable>
-      </div>
-      <ElEmpty v-else description="无跳过记录" />
-
-      <ElDivider content-position="left">失败明细</ElDivider>
-      <div
-        v-if="currentDetail.failed_items && currentDetail.failed_items.length"
-        style="max-height: 300px; overflow-y: auto"
-      >
-        <ElTable :data="currentDetail.failed_items" border size="small">
-          <ElTableColumn label="行号" prop="line" width="80" />
-          <ElTableColumn label="ICCID" prop="iccid" width="200" />
-          <ElTableColumn label="MSISDN" prop="msisdn" width="150" />
-          <ElTableColumn label="失败原因" prop="reason" min-width="200">
-            <template #default="{ row }">
-              {{ row.reason || row.error || '未知错误' }}
-            </template>
-          </ElTableColumn>
-        </ElTable>
-      </div>
-      <ElEmpty v-else description="无失败记录" />
-
-      <template #footer>
-        <ElButton @click="detailDialogVisible = false">关闭</ElButton>
-        <ElButton
-          v-if="currentDetail.skip_count > 0"
-          type="warning"
-          :icon="Download"
-          @click="downloadSkippedData"
-        >
-          下载跳过数据
-        </ElButton>
-        <ElButton
-          v-if="currentDetail.fail_count > 0"
-          type="primary"
-          :icon="Download"
-          @click="downloadFailData"
-        >
-          下载失败数据
-        </ElButton>
-      </template>
-    </ElDialog>
  </ArtTableFullScreen>
 </template>

 <script setup lang="ts">
  import { h } from 'vue'
+  import { useRouter } from 'vue-router'
  import { CardService, CarrierService } from '@/api/modules'
  import { ElMessage, ElTag, ElFormItem, ElSelect, ElOption } from 'element-plus'
  import { Download, UploadFilled, Upload } from '@element-plus/icons-vue'
@@ -228,15 +140,17 @@
  import { useCheckedColumns } from '@/composables/useCheckedColumns'
  import { useAuth } from '@/composables/useAuth'
  import { formatDateTime } from '@/utils/business/format'
-  import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
  import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
  import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
  import { StorageService } from '@/api/modules/storage'
+  import { RoutesAlias } from '@/router/routesAlias'
  import type { IotCardImportTask, IotCardImportTaskStatus } from '@/types/api/card'
  import type { Carrier } from '@/types/api'

  defineOptions({ name: 'IotCardTask' })

+  const router = useRouter()
+
  const { hasAuth } = useAuth()
  const loading = ref(false)
  const tableRef = ref()
@@ -244,7 +158,6 @@
  const fileList = ref<File[]>([])
  const uploading = ref(false)
  const importDialogVisible = ref(false)
-  const detailDialogVisible = ref(false)
  const selectedCarrierId = ref<number>()
  const carrierList = ref<Carrier[]>([])
  const carrierLoading = ref(false)
@@ -341,7 +254,6 @@
  ]

  const taskList = ref<IotCardImportTask[]>([])
-  const currentDetail = ref<any>({})

  // 获取状态标签类型
  const getStatusType = (status: IotCardImportTaskStatus) => {
@@ -359,25 +271,15 @@
    }
  }

-  // 查看详情
-  const viewDetail = async (row: IotCardImportTask) => {
-    try {
-      const res = await CardService.getIotCardImportTaskDetail(row.id)
-      if (res.code === 0 && res.data) {
-        currentDetail.value = {
-          ...res.data,
-          started_at: res.data.started_at ? formatDateTime(res.data.started_at) : '-',
-          completed_at: res.data.completed_at ? formatDateTime(res.data.completed_at) : '-',
-          created_at: res.data.created_at ? formatDateTime(res.data.created_at) : '-',
-          carrier_name: res.data.carrier_name || '-',
-          error_message: res.data.error_message || '-'
-        }
-        detailDialogVisible.value = true
+  // 查看详情 - 跳转到详情页面
+  const viewDetail = (row: IotCardImportTask) => {
+    router.push({
+      path: RoutesAlias.TaskDetail,
+      query: {
+        id: row.id,
+        task_type: 'card'
      }
-    } catch (error) {
-      console.error('获取任务详情失败:', error)
-      ElMessage.error('获取任务详情失败')
-    }
+    })
  }

  // 动态列配置
@@ -538,7 +440,42 @@
      const res = await CardService.getIotCardImportTaskDetail(row.id)
      if (res.code === 0 && res.data) {
        const detail = res.data
-        downloadFailDataFromDetail(detail, row.task_no)
+        const failReasons =
+          detail.failed_items?.map((item: any) => ({
+            line: item.line || '-',
+            iccid: item.iccid || '-',
+            msisdn: item.msisdn || '-',
+            message: item.reason || item.error || '未知错误'
+          })) || []
+
+        if (failReasons.length === 0) {
+          ElMessage.warning('没有失败数据可下载')
+          return
+        }
+
+        const headers = ['行号', 'ICCID', 'MSISDN', '失败原因']
+        const csvRows = [
+          headers.join(','),
+          ...failReasons.map((item: any) =>
+            [item.line, item.iccid, item.msisdn, `"${item.message}"`].join(',')
+          )
+        ]
+        const csvContent = csvRows.join('\n')
+
+        const BOM = '\uFEFF'
+        const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
+
+        const link = document.createElement('a')
+        const url = URL.createObjectURL(blob)
+        link.setAttribute('href', url)
+        link.setAttribute('download', `IoT卡导入失败数据_${row.task_no}.csv`)
+        link.style.visibility = 'hidden'
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        URL.revokeObjectURL(url)
+
+        ElMessage.success('失败数据下载成功')
      }
    } catch (error) {
      console.error('下载失败数据失败:', error)
@@ -546,96 +483,6 @@
    }
  }

-  // 下载跳过数据（从详情对话框）
-  const downloadSkippedData = () => {
-    downloadSkippedDataFromDetail(currentDetail.value, currentDetail.value.task_no)
-  }
-
-  // 下载跳过数据的通用方法
-  const downloadSkippedDataFromDetail = (detail: any, taskNo: string) => {
-    const skippedReasons =
-      detail.skipped_items?.map((item: any) => ({
-        line: item.line || '-',
-        iccid: item.iccid || '-',
-        msisdn: item.msisdn || '-',
-        message: item.reason || '未知原因'
-      })) || []
-
-    if (skippedReasons.length === 0) {
-      ElMessage.warning('没有跳过数据可下载')
-      return
-    }
-
-    const headers = ['行号', 'ICCID', 'MSISDN', '跳过原因']
-    const csvRows = [
-      headers.join(','),
-      ...skippedReasons.map((item: any) =>
-        [item.line, item.iccid, item.msisdn, `"${item.message}"`].join(',')
-      )
-    ]
-    const csvContent = csvRows.join('\n')
-
-    const BOM = '\uFEFF'
-    const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
-
-    const link = document.createElement('a')
-    const url = URL.createObjectURL(blob)
-    link.setAttribute('href', url)
-    link.setAttribute('download', `IoT卡导入跳过数据_${taskNo}.csv`)
-    link.style.visibility = 'hidden'
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-    URL.revokeObjectURL(url)
-
-    ElMessage.success('跳过数据下载成功')
-  }
-
-  // 下载失败数据（从详情对话框）
-  const downloadFailData = () => {
-    downloadFailDataFromDetail(currentDetail.value, currentDetail.value.task_no)
-  }
-
-  // 下载失败数据的通用方法
-  const downloadFailDataFromDetail = (detail: any, taskNo: string) => {
-    const failReasons =
-      detail.failed_items?.map((item: any) => ({
-        line: item.line || '-',
-        iccid: item.iccid || '-',
-        msisdn: item.msisdn || '-',
-        message: item.reason || item.error || '未知错误'
-      })) || []
-
-    if (failReasons.length === 0) {
-      ElMessage.warning('没有失败数据可下载')
-      return
-    }
-
-    const headers = ['行号', 'ICCID', 'MSISDN', '失败原因']
-    const csvRows = [
-      headers.join(','),
-      ...failReasons.map((item: any) =>
-        [item.line, item.iccid, item.msisdn, `"${item.message}"`].join(',')
-      )
-    ]
-    const csvContent = csvRows.join('\n')
-
-    const BOM = '\uFEFF'
-    const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' })
-
-    const link = document.createElement('a')
-    const url = URL.createObjectURL(blob)
-    link.setAttribute('href', url)
-    link.setAttribute('download', `IoT卡导入失败数据_${taskNo}.csv`)
-    link.style.visibility = 'hidden'
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-    URL.revokeObjectURL(url)
-
-    ElMessage.success('失败数据下载成功')
-  }
-
  // 下载模板
  const downloadTemplate = async () => {
    try {
@@ -665,7 +512,7 @@
      // 设置列宽
      ws['!cols'] = [
        { wch: 25 }, // ICCID
-        { wch: 15 }  // MSISDN
+        { wch: 15 } // MSISDN
      ]

      // 将所有单元格设置为文本格式，防止科学计数法
@@ -779,7 +626,11 @@
      const { upload_url, file_key } = uploadUrlRes.data

      ElMessage.info('正在上传文件...')
-      await StorageService.uploadFile(upload_url, file, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
+      await StorageService.uploadFile(
+        upload_url,
+        file,
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      )

      ElMessage.info('正在创建导入任务...')
      const importRes = await CardService.importIotCards({
@@ -795,7 +646,7 @@
      const taskNo = importRes.data.task_no

      handleCancelImport()
-      getTableData()
+      await getTableData()

      ElMessage.success({
        message: `导入任务已创建！任务编号：${taskNo}`,
@@ -816,9 +667,11 @@

    const items: MenuItemType[] = []

-    items.push({ key: 'detail', label: '详情' })
+    if (hasAuth('iot_card_task:view_detail')) {
+      items.push({ key: 'detail', label: '详情' })
+    }

-    if (currentRow.value.fail_count > 0) {
+    if (currentRow.value.fail_count > 0 && hasAuth('iot_card_task:download_fail_data')) {
      items.push({ key: 'failData', label: '失败数据' })
    }

--- a/src/views/common/account-list.vue
+++ b/src/views/common/account-list.vue
@@ -23,7 +23,10 @@

        <!-- 操作按钮 -->
        <div style="margin: 10px 0">
-          <ElButton @click="showAddAccountDialog">
+          <ElButton
+            v-if="hasAuth(isShopType ? 'shop_account:add' : 'enterprise_account:add')"
+            @click="showAddAccountDialog"
+          >
            {{ isShopType ? '新增店铺账号' : '新增企业账号' }}
          </ElButton>
        </div>
@@ -91,10 +94,17 @@
        <ElDialog v-model="roleDialogVisible" width="900px">
          <template #header>
            <div class="dialog-header">
-              <span class="dialog-title">分配角色</span>
+              <span class="dialog-title">{{
+                isShopType ? '分配店铺账号角色' : '分配企业客户角色'
+              }}</span>
              <div class="account-info">
                <span class="account-name">{{ currentAccountName }}</span>
-                <ElTag v-if="currentAccountType === 3" type="warning" size="small" style="margin-left: 8px">
+                <ElTag
+                  v-if="currentAccountType === 3"
+                  type="warning"
+                  size="small"
+                  style="margin-left: 8px"
+                >
                  代理账号只能分配一个客户角色
                </ElTag>
              </div>
@@ -208,11 +218,13 @@
  import type { SearchFormItem } from '@/types'
  import type { PlatformAccount, PlatformRole } from '@/types/api'
  import { formatDateTime } from '@/utils/business/format'
+  import { useAuth } from '@/composables/useAuth'

  defineOptions({ name: 'CommonAccountList' })

  const route = useRoute()
  const router = useRouter()
+  const { hasAuth } = useAuth()

  // 判断页面类型：通过 query 参数判断
  const isShopType = computed(() => route.query.type === 'shop')
@@ -373,11 +385,20 @@
      {
        prop: 'operation',
        label: '操作',
-        width: 120,
+        width: 160,
        fixed: 'right',
        formatter: (row: PlatformAccount) => {
+          // 根据类型检查权限
+          const permission = isShopType.value
+            ? 'shop_account:patch_role'
+            : 'customer_accounts:patch_role'
+
+          if (!hasAuth(permission)) {
+            return h('span', '-')
+          }
+
          return h(ArtButtonTable, {
-            text: '分配角色',
+            text: isShopType.value ? '分配店铺账号角色' : '分配企业客户角色',
            onClick: () => showRoleDialog(row)
          })
        }
--- a/src/views/order-management/order-list/detail.vue
+++ b/src/views/order-management/order-list/detail.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="order-detail-page">
+    <ElCard shadow="never">
+      <!-- 页面头部 -->
+      <div class="detail-header">
+        <ElButton @click="handleBack">
+          <template #icon>
+            <ElIcon><ArrowLeft /></ElIcon>
+          </template>
+          返回
+        </ElButton>
+        <h2 class="detail-title">订单详情</h2>
+      </div>
+
+      <!-- 详情内容 -->
+      <DetailPage v-if="detailData" :sections="detailSections" :data="detailData" />
+
+      <!-- 订单项列表 -->
+      <div
+        v-if="detailData && detailData.items && detailData.items.length > 0"
+        class="order-items-section"
+      >
+        <h3 class="section-title">订单项列表</h3>
+        <ElTable :data="detailData.items" border style="margin-top: 10px">
+          <ElTableColumn prop="package_name" label="套餐名称" min-width="150" />
+          <ElTableColumn prop="quantity" label="数量" width="100" />
+          <ElTableColumn prop="unit_price" label="单价" width="120">
+            <template #default="{ row }">
+              {{ formatCurrency(row.unit_price) }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn prop="amount" label="金额" width="120">
+            <template #default="{ row }">
+              {{ formatCurrency(row.amount) }}
+            </template>
+          </ElTableColumn>
+        </ElTable>
+      </div>
+
+      <!-- 加载中 -->
+      <div v-if="loading" class="loading-container">
+        <ElIcon class="is-loading"><Loading /></ElIcon>
+        <span>加载中...</span>
+      </div>
+    </ElCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, computed } from 'vue'
+  import { useRoute, useRouter } from 'vue-router'
+  import { ElCard, ElButton, ElIcon, ElMessage, ElTable, ElTableColumn, ElTag } from 'element-plus'
+  import { ArrowLeft, Loading } from '@element-plus/icons-vue'
+  import { useI18n } from 'vue-i18n'
+  import DetailPage from '@/components/common/DetailPage.vue'
+  import type { DetailSection } from '@/components/common/DetailPage.vue'
+  import { OrderService } from '@/api/modules'
+  import type { Order } from '@/types/api'
+  import { formatDateTime } from '@/utils/business/format'
+
+  defineOptions({ name: 'OrderDetail' })
+
+  const { t } = useI18n()
+  const route = useRoute()
+  const router = useRouter()
+
+  const loading = ref(false)
+  const detailData = ref<Order | null>(null)
+
+  // 格式化货币 - 将分转换为元
+  const formatCurrency = (amount: number): string => {
+    return `¥${(amount / 100).toFixed(2)}`
+  }
+
+  // 获取订单类型文本
+  const getOrderTypeText = (type: string): string => {
+    return type === 'single_card'
+      ? t('orderManagement.orderType.singleCard')
+      : t('orderManagement.orderType.device')
+  }
+
+  // 获取买家类型文本
+  const getBuyerTypeText = (type: string): string => {
+    return type === 'personal'
+      ? t('orderManagement.buyerType.personal')
+      : t('orderManagement.buyerType.agent')
+  }
+
+  // 获取支付方式文本
+  const getPaymentMethodText = (method: string): string => {
+    const methodMap: Record<string, string> = {
+      wallet: t('orderManagement.paymentMethod.wallet'),
+      wechat: t('orderManagement.paymentMethod.wechat'),
+      alipay: t('orderManagement.paymentMethod.alipay')
+    }
+    return methodMap[method] || method
+  }
+
+  // 获取佣金状态文本
+  const getCommissionStatusText = (status: number): string => {
+    const statusMap: Record<number, string> = {
+      0: t('orderManagement.commissionStatus.notApplicable'),
+      1: t('orderManagement.commissionStatus.pending'),
+      2: t('orderManagement.commissionStatus.settled')
+    }
+    return statusMap[status] || '-'
+  }
+
+  // 详情页配置
+  const detailSections: DetailSection[] = [
+    {
+      title: '基本信息',
+      fields: [
+        { label: t('orderManagement.table.orderNo'), prop: 'order_no' },
+        {
+          label: t('orderManagement.table.orderType'),
+          formatter: (_, data) => getOrderTypeText(data.order_type)
+        },
+        {
+          label: t('orderManagement.table.paymentStatus'),
+          formatter: (_, data) => data.payment_status_text || '-'
+        },
+        {
+          label: t('orderManagement.table.totalAmount'),
+          prop: 'total_amount',
+          formatter: (value) => formatCurrency(value)
+        },
+        {
+          label: 'IoT卡ID',
+          prop: 'iot_card_id',
+          formatter: (value) => value || '-'
+        },
+        {
+          label: t('orderManagement.table.buyerType'),
+          formatter: (_, data) => data.buyer_type ? getBuyerTypeText(data.buyer_type) : '-'
+        },
+        {
+          label: '买家ID',
+          prop: 'buyer_id',
+          formatter: (value) => value || '-'
+        },
+        {
+          label: '代付订单',
+          formatter: (_, data) => data.is_purchase_on_behalf ? '是' : '否'
+        },
+        {
+          label: t('orderManagement.table.commissionStatus'),
+          formatter: (_, data) => getCommissionStatusText(data.commission_status)
+        },
+        {
+          label: '佣金配置版本',
+          prop: 'commission_config_version'
+        },
+        {
+          label: t('orderManagement.table.createdAt'),
+          prop: 'created_at',
+          formatter: (value) => formatDateTime(value)
+        },
+        {
+          label: t('orderManagement.table.updatedAt'),
+          prop: 'updated_at',
+          formatter: (value) => formatDateTime(value)
+        }
+      ]
+    }
+  ]
+
+  // 返回上一页
+  const handleBack = () => {
+    router.back()
+  }
+
+  // 获取详情数据
+  const fetchDetail = async () => {
+    const id = Number(route.params.id)
+    if (!id) {
+      ElMessage.error('缺少ID参数')
+      return
+    }
+
+    loading.value = true
+    try {
+      const res = await OrderService.getOrderById(id)
+      if (res.code === 0) {
+        detailData.value = res.data
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取订单详情失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(() => {
+    fetchDetail()
+  })
+</script>
+
+<style scoped lang="scss">
+  .order-detail-page {
+    padding: 20px;
+  }
+
+  .detail-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding-bottom: 16px;
+
+    .detail-title {
+      margin: 0;
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .order-items-section {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px solid var(--el-border-color-lighter);
+
+    .section-title {
+      margin: 0 0 16px 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    gap: 12px;
+    color: var(--el-text-color-secondary);
+
+    .el-icon {
+      font-size: 32px;
+    }
+  }
+</style>
--- a/src/views/order-management/order-list/index.vue
+++ b/src/views/order-management/order-list/index.vue
@@ -273,6 +273,7 @@
 <script setup lang="ts">
  import { h } from 'vue'
  import { useI18n } from 'vue-i18n'
+  import { useRouter } from 'vue-router'
  import { OrderService, CardService, DeviceService, PackageManageService } from '@/api/modules'
  import { ElMessage, ElMessageBox, ElTag } from 'element-plus'
  import type { FormInstance, FormRules } from 'element-plus'
@@ -296,10 +297,12 @@
  import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
  import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
  import { formatDateTime } from '@/utils/business/format'
+  import { RoutesAlias } from '@/router/routesAlias'

  defineOptions({ name: 'OrderList' })

  const { t } = useI18n()
+  const router = useRouter()
  const { hasAuth } = useAuth()

  const loading = ref(false)
@@ -855,16 +858,10 @@
  }

  // 查看订单详情
-  const showOrderDetail = async (row: Order) => {
-    try {
-      const res = await OrderService.getOrderById(row.id)
-      if (res.code === 0) {
-        currentOrder.value = res.data
-        detailDialogVisible.value = true
-      }
-    } catch (error) {
-      console.error(error)
-    }
+  const showOrderDetail = (row: Order) => {
+    router.push({
+      path: `${RoutesAlias.OrderList}/detail/${row.id}`
+    })
  }

  // 取消订单
@@ -904,10 +901,15 @@

    const items: MenuItemType[] = []

-    items.push({ key: 'detail', label: '详情' })
+    if (hasAuth('orders:view_detail')) {
+      items.push({ key: 'detail', label: '详情' })
+    }

-    // 只有待支付和已支付的订单可以取消
-    if (currentRow.value.payment_status === 1 || currentRow.value.payment_status === 2) {
+    // 只有待支付和已支付的订单可以删除
+    if (
+      (currentRow.value.payment_status === 1 || currentRow.value.payment_status === 2) &&
+      hasAuth('orders:delete')
+    ) {
      items.push({ key: 'cancel', label: '删除' })
    }

--- a/src/views/package-management/package-assign/index.vue
+++ b/src/views/package-management/package-assign/index.vue
@@ -408,10 +408,12 @@
  const contextMenuItems = computed((): MenuItemType[] => {
    const items: MenuItemType[] = []

-    items.push({
-      key: 'detail',
-      label: '详情'
-    })
+    if (hasAuth('package_assign:detail')) {
+      items.push({
+        key: 'detail',
+        label: '详情'
+      })
+    }

    if (hasAuth('package_assign:edit')) {
      items.push({
@@ -849,7 +851,11 @@
  }

  // 处理表格行右键菜单
-  const handleRowContextMenu = (row: ShopPackageAllocationResponse, column: any, event: MouseEvent) => {
+  const handleRowContextMenu = (
+    row: ShopPackageAllocationResponse,
+    column: any,
+    event: MouseEvent
+  ) => {
    event.preventDefault()
    event.stopPropagation()
    currentRow.value = row
--- a/src/views/package-management/package-list/index.vue
+++ b/src/views/package-management/package-list/index.vue
@@ -555,10 +555,12 @@
  const contextMenuItems = computed((): MenuItemType[] => {
    const items: MenuItemType[] = []

-    items.push({
-      key: 'detail',
-      label: '详情'
-    })
+    if (hasAuth('package:detail')) {
+      items.push({
+        key: 'detail',
+        label: '详情'
+      })
+    }

    if (hasAuth('package:edit')) {
      items.push({
--- a/src/views/package-management/series-assign/index.vue
+++ b/src/views/package-management/series-assign/index.vue
@@ -991,7 +991,9 @@
  const contextMenuItems = computed((): MenuItemType[] => {
    const items: MenuItemType[] = []

-    items.push({ key: 'detail', label: '详情' })
+    if (hasAuth('series_assign:detail')) {
+      items.push({ key: 'detail', label: '详情' })
+    }

    if (hasAuth('series_assign:edit')) {
      items.push({ key: 'edit', label: '编辑' })
@@ -1005,7 +1007,11 @@
  })

  // 处理表格行右键菜单
-  const handleRowContextMenu = (row: ShopSeriesAllocationResponse, column: any, event: MouseEvent) => {
+  const handleRowContextMenu = (
+    row: ShopSeriesAllocationResponse,
+    column: any,
+    event: MouseEvent
+  ) => {
    event.preventDefault()
    event.stopPropagation()
    currentRow.value = row
--- a/src/views/product/shop/index.vue
+++ b/src/views/product/shop/index.vue
@@ -226,39 +226,49 @@
          :title="`设置默认角色 - ${currentShop?.shop_name || ''}`"
          width="50%"
        >
-          <div v-loading="defaultRolesLoading">
-            <!-- 当前默认角色列表 -->
+          <div v-loading="defaultRolesLoading || rolesLoading">
+            <!-- 当前默认角色显示 -->
+            <div v-if="selectedRoleId" class="current-role-display">
+              <div class="current-role-label">当前默认角色</div>
+              <div class="current-role-value">
+                {{ availableRoles.find((r) => r.role_id === selectedRoleId)?.role_name || '未知角色' }}
+              </div>
+            </div>
+            <div v-else class="current-role-display no-role">
+              <div class="current-role-label">当前默认角色</div>
+              <div class="current-role-value">
+                暂未设置
+              </div>
+            </div>
+
+            <!-- 默认角色选择 -->
            <div class="default-roles-section">
              <div class="section-header">
-                <span style="color: white">当前默认角色</span>
-                <ElButton type="primary" @click="showAddRoleDialog"> 设置默认角色 </ElButton>
+                <span style="color: white">选择默认角色</span>
              </div>
-              <ElTable :data="currentDefaultRoles" border stripe style="margin-top: 12px">
-                <ElTableColumn prop="role_name" label="角色名称" width="150" />
-                <ElTableColumn prop="role_desc" label="角色描述" min-width="200" />
-                <ElTableColumn prop="status" label="状态" width="80">
-                  <template #default="{ row }">
-                    <ElTag
-                      :type="row.status === CommonStatus.ENABLED ? 'success' : 'info'"
-                      size="small"
-                    >
-                      {{ getStatusText(row.status) }}
-                    </ElTag>
-                  </template>
-                </ElTableColumn>
-                <ElTableColumn label="操作" width="100" fixed="right">
-                  <template #default="{ row }">
-                    <ElButton type="danger" text size="small" @click="handleDeleteDefaultRole(row)">
-                      删除
-                    </ElButton>
-                  </template>
-                </ElTableColumn>
-                <template #empty>
-                  <div style="padding: 20px 0; color: #909399">
-                    暂无默认角色，请点击"设置默认角色"按钮进行配置
+              <ElSelect
+                v-model="selectedRoleId"
+                filterable
+                placeholder="请选择默认角色"
+                style="width: 100%; margin-top: 12px"
+                @change="handleRoleChange"
+                :loading="rolesLoading"
+              >
+                <ElOption
+                  v-for="role in availableRoles"
+                  :key="role.role_id"
+                  :label="role.role_name"
+                  :value="role.role_id"
+                >
+                  <div style="display: flex; gap: 8px; align-items: center">
+                    <span>{{ role.role_name }}</span>
+                    <ElTag type="success" size="small">客户角色</ElTag>
                  </div>
-                </template>
-              </ElTable>
+                </ElOption>
+              </ElSelect>
+              <div style="margin-top: 8px; color: #909399; font-size: 12px">
+                只能选择一个客户角色，选择后立即生效
+              </div>
            </div>
          </div>
          <template #footer>
@@ -267,41 +277,6 @@
            </div>
          </template>
        </ElDialog>
-
-        <!-- 设置默认角色对话框 -->
-        <ElDialog v-model="addRoleDialogVisible" title="设置默认角色" width="50%" append-to-body>
-          <div v-loading="rolesLoading">
-            <ElSelect
-              v-model="selectedRoleId"
-              filterable
-              placeholder="请选择默认角色"
-              style="width: 100%"
-            >
-              <ElOption
-                v-for="role in availableRoles"
-                :key="role.role_id"
-                :label="role.role_name"
-                :value="role.role_id"
-              >
-                <div style="display: flex; gap: 8px; align-items: center">
-                  <span>{{ role.role_name }}</span>
-                  <ElTag type="success" size="small">客户角色</ElTag>
-                </div>
-              </ElOption>
-            </ElSelect>
-            <div style="margin-top: 8px; color: #909399; font-size: 12px">
-              只能选择一个客户角色，设置后将覆盖之前的默认角色
-            </div>
-          </div>
-          <template #footer>
-            <div class="dialog-footer">
-              <ElButton @click="addRoleDialogVisible = false">取消</ElButton>
-              <ElButton type="primary" @click="handleAddDefaultRoles" :loading="addRoleLoading">
-                确定
-              </ElButton>
-            </div>
-          </template>
-        </ElDialog>
      </ElCard>
    </div>
  </ArtTableFullScreen>
@@ -350,12 +325,9 @@

  // 默认角色管理相关状态
  const defaultRolesDialogVisible = ref(false)
-  const addRoleDialogVisible = ref(false)
  const defaultRolesLoading = ref(false)
  const rolesLoading = ref(false)
-  const addRoleLoading = ref(false)
  const currentShop = ref<ShopResponse | null>(null)
-  const currentDefaultRoles = ref<ShopRoleResponse[]>([])
  const availableRoles = ref<ShopRoleResponse[]>([])
  const selectedRoleId = ref<number | undefined>(undefined)

@@ -611,6 +583,7 @@
          activeText: getStatusText(CommonStatus.ENABLED),
          inactiveText: getStatusText(CommonStatus.DISABLED),
          inlinePrompt: true,
+          disabled: !hasAuth('shop:modify_status'),
          'onUpdate:modelValue': (val: string | number | boolean) =>
            handleStatusChange(row, val as number)
        })
@@ -934,10 +907,12 @@
    const items: MenuItemType[] = []

    // 默认角色
-    items.push({
-      key: 'defaultRoles',
-      label: '默认角色'
-    })
+    if (hasAuth('shop:default_role')) {
+      items.push({
+        key: 'defaultRoles',
+        label: '默认角色'
+      })
+    }

    // 编辑
    if (hasAuth('shop:edit')) {
@@ -1015,16 +990,19 @@
  const showDefaultRolesDialog = async (row: ShopResponse) => {
    currentShop.value = row
    defaultRolesDialogVisible.value = true
-    await loadShopDefaultRoles(row.id)
+    await loadAvailableRoles()
+    await loadShopDefaultRole(row.id)
  }

-  // 加载店铺默认角色列表
-  const loadShopDefaultRoles = async (shopId: number) => {
+  // 加载店铺当前默认角色
+  const loadShopDefaultRole = async (shopId: number) => {
    defaultRolesLoading.value = true
    try {
      const res = await ShopService.getShopRoles(shopId)
      if (res.code === 0) {
-        currentDefaultRoles.value = res.data.roles || []
+        const roles = res.data.roles || []
+        // 如果已有默认角色，预选第一个
+        selectedRoleId.value = roles.length > 0 ? roles[0].role_id : undefined
      }
    } catch (error) {
      console.error('获取店铺默认角色失败:', error)
@@ -1034,15 +1012,6 @@
    }
  }

-  // 显示设置默认角色对话框
-  const showAddRoleDialog = async () => {
-    addRoleDialogVisible.value = true
-    // 如果已有默认角色，预选第一个
-    selectedRoleId.value =
-      currentDefaultRoles.value.length > 0 ? currentDefaultRoles.value[0].role_id : undefined
-    await loadAvailableRoles()
-  }
-
  // 加载可用角色列表（仅客户角色）
  const loadAvailableRoles = async () => {
    rolesLoading.value = true
@@ -1072,9 +1041,9 @@
    }
  }

-  // 设置默认角色
-  const handleAddDefaultRoles = async () => {
-    if (!selectedRoleId.value) {
+  // 处理角色变更 - 选择后立即生效
+  const handleRoleChange = async (roleId: number) => {
+    if (!roleId) {
      ElMessage.warning('请选择默认角色')
      return
    }
@@ -1084,52 +1053,23 @@
      return
    }

-    addRoleLoading.value = true
+    defaultRolesLoading.value = true
    try {
      // 传递数组，但只包含一个角色ID
      const res = await ShopService.assignShopRoles(currentShop.value.id, {
-        role_ids: [selectedRoleId.value]
+        role_ids: [roleId]
      })
      if (res.code === 0) {
        ElMessage.success('设置默认角色成功')
-        addRoleDialogVisible.value = false
-        // 刷新默认角色列表
-        await loadShopDefaultRoles(currentShop.value.id)
      }
    } catch (error) {
      console.error('设置默认角色失败:', error)
+      // 失败时重新加载当前默认角色
+      await loadShopDefaultRole(currentShop.value.id)
    } finally {
-      addRoleLoading.value = false
+      defaultRolesLoading.value = false
    }
  }
-
-  // 删除默认角色
-  const handleDeleteDefaultRole = (role: ShopRoleResponse) => {
-    ElMessageBox.confirm(`确定要删除默认角色 "${role.role_name}" 吗？`, '删除默认角色', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
-    })
-      .then(async () => {
-        if (!currentShop.value) {
-          ElMessage.error('店铺信息异常')
-          return
-        }
-
-        try {
-          await ShopService.deleteShopRole(currentShop.value.id, role.role_id)
-          ElMessage.success('删除成功')
-          // 刷新默认角色列表
-          await loadShopDefaultRoles(currentShop.value.id)
-        } catch (error) {
-          console.error('删除默认角色失败:', error)
-          ElMessage.error('删除默认角色失败')
-        }
-      })
-      .catch(() => {
-        // 用户取消删除
-      })
-  }
 </script>

 <style lang="scss" scoped>
@@ -1137,6 +1077,36 @@
    // 店铺管理页面样式
  }

+  .current-role-display {
+    border-radius: 8px;
+    padding: 16px 20px;
+    margin-bottom: 24px;
+    border: 2px solid var(--el-color-primary);
+
+    &.no-role {
+      border: 2px dashed var(--el-border-color);
+
+      .current-role-value {
+        color: var(--el-text-color-secondary);
+      }
+    }
+
+    .current-role-label {
+      font-size: 14px;
+      color: var(--el-text-color-secondary);
+      margin-bottom: 12px;
+      font-weight: 500;
+    }
+
+    .current-role-value {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--el-color-primary);
+      display: flex;
+      align-items: center;
+    }
+  }
+
  .default-roles-section {
    .section-header {
      display: flex;
@@ -1145,6 +1115,7 @@
      font-size: 14px;
      font-weight: 500;
      color: #303133;
+      margin-bottom: 4px;
    }
  }
 </style>
--- a/src/views/system/permission/index.vue
+++ b/src/views/system/permission/index.vue
@@ -5,6 +5,7 @@
      <ArtSearchBar
        v-model:filter="searchForm"
        :items="searchFormItems"
+        :show-expand="false"
        @reset="handleReset"
        @search="handleSearch"
      ></ArtSearchBar>