task-253(admin.html观感对齐): 数据权限分组页对齐（新建/编辑/删除 + 组员 chips + 组长锁定）

admin-frontend-vue/src/pages/account/GroupsPage.vue

@@ -1,12 +1,25 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import { fetchShopGroups } from './shop-group-api'
+import { useAdminSessionStore } from '@/stores/admin-session'
+import { openAdminConfirm } from '@/components/admin-confirm'
+import { deleteShopGroup, fetchShopGroups } from './shop-group-api'
 import { shopGroupSummary, type ShopGroupItem } from './shop-group-model'
+import GroupEditorDialog from './GroupEditorDialog.vue'
 
+const session = useAdminSessionStore()
 const loading = ref(false)
 const rows = ref<ShopGroupItem[]>([])
+const editorVisible = ref(false)
+const editingGroup = ref<ShopGroupItem | null>(null)
 const summary = computed(() => shopGroupSummary(rows.value))
+const isSuperAdmin = computed(() => session.isSuperAdmin)
+const currentUserId = computed(() => session.user?.id ?? null)
+
+function canEditOf(group: ShopGroupItem): boolean {
+  if (isSuperAdmin.value) return true
+  return currentUserId.value != null && group.leaderUserId != null && currentUserId.value === group.leaderUserId
+}
 
 async function loadGroups() {
   loading.value = true
@@ -19,6 +32,29 @@ async function loadGroups() {
   }
 }
 
+function openCreate() {
+  editingGroup.value = null
+  editorVisible.value = true
+}
+
+function openEdit(group: ShopGroupItem) {
+  if (!canEditOf(group)) return
+  editingGroup.value = group
+  editorVisible.value = true
+}
+
+async function removeGroup(group: ShopGroupItem) {
+  const ok = await openAdminConfirm({ message: `确定删除分组“${group.name}”吗？`, danger: true })
+  if (!ok) return
+  try {
+    await deleteShopGroup(group.id)
+    ElMessage.success('删除成功')
+    await loadGroups()
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '删除失败')
+  }
+}
+
 onMounted(loadGroups)
 </script>
 
@@ -27,8 +63,9 @@ onMounted(loadGroups)
     <div class="page-heading">
       <div>
         <h2>数据权限分组</h2>
-        <p>管理店铺数据访问分组和组员范围。</p>
+        <p>管理店铺数据访问分组和组员范围。组长不可更改，组员为普通账号。</p>
       </div>
+      <el-button type="primary" @click="openCreate">新建分组</el-button>
     </div>
     <el-row :gutter="12" style="margin-bottom: 12px">
       <el-col :span="8">
@@ -50,13 +87,36 @@ onMounted(loadGroups)
     </el-row>
     <el-card shadow="never">
       <el-table v-loading="loading" :data="rows" stripe>
-        <el-table-column type="index" label="序号" width="90" />
-        <el-table-column prop="name" label="分组名称" min-width="220" />
-        <el-table-column prop="leaderUsername" label="组长" width="180" />
-        <el-table-column prop="memberCount" label="组员数量" width="120" />
-        <el-table-column prop="createdAt" label="创建时间" min-width="180" />
+        <el-table-column type="index" label="序号" width="80" />
+        <el-table-column prop="name" label="分组名称" min-width="180" />
+        <el-table-column prop="leaderUsername" label="组长" width="170" />
+        <el-table-column prop="memberCount" label="组员数量" width="100" />
+        <el-table-column label="组员" min-width="240">
+          <template #default="{ row }">
+            <template v-if="row.memberUsernames.length">
+              <el-tag v-for="name in row.memberUsernames.slice(0, 10)" :key="name" size="small" class="member-tag">{{ name }}</el-tag>
+              <span v-if="row.memberUsernames.length > 10" class="member-more">+{{ row.memberUsernames.length - 10 }}</span>
+            </template>
+            <span v-else class="member-none">无</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="updatedAt" label="修改时间" min-width="170">
+          <template #default="{ row }">{{ row.updatedAt || row.createdAt || '—' }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="140" fixed="right">
+          <template #default="{ row }">
+            <el-button link type="primary" :disabled="!canEditOf(row)" @click="openEdit(row)">编辑</el-button>
+            <el-button link type="danger" :disabled="!canEditOf(row)" @click="removeGroup(row)">删除</el-button>
+          </template>
+        </el-table-column>
       </el-table>
     </el-card>
+    <GroupEditorDialog
+      v-model="editorVisible"
+      :group="editingGroup"
+      :operator-super="isSuperAdmin"
+      @saved="loadGroups"
+    />
   </div>
 </template>
 
@@ -75,4 +135,15 @@ onMounted(loadGroups)
   font-weight: 600;
   line-height: 1.2;
 }
+.member-tag {
+  margin: 2px 4px 2px 0;
+}
+.member-more {
+  font-size: 12px;
+  color: var(--admin-muted);
+}
+.member-none {
+  color: var(--admin-muted);
+  font-size: 13px;
+}
 </style>