refactor: Fix UI/UX issues across admin pages

- App.vue: max-w-4xl → max-w-6xl（讓表格不被截斷） - 新增 AdminCredsCard.vue 共用元件，消除兩個頁面的重複認證卡片 - PermissionAdminPage / PermissionGroupsPage 改用 AdminCredsCard - 所有 el-table 的 slot="empty" 換成 <template #empty>（Vue 3 正確用法） - 4 個管理頁 Dialog 補 el-form rules + formRef.validate()（取代手動 if 檢查） - MembersPage: authentik_sub / email 欄位加 show-overflow-tooltip - PermissionGroupsPage: 成功/失敗訊息由 <p> 改為 el-alert（統一樣式） Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-30 02:53:54 +08:00
parent e325642b5e
commit f3d5937d37
9 changed files with 125 additions and 143 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,7 +40,7 @@
      </div>
      <el-button v-if="authStore.isLoggedIn" size="small" @click="logout">登出</el-button>
    </nav>
-    <main class="p-6 max-w-4xl mx-auto">
+    <main class="p-6 max-w-6xl mx-auto">
      <router-view />
    </main>
  </div>
--- a/src/components/AdminCredsCard.vue
+++ b/src/components/AdminCredsCard.vue
@@ -0,0 +1,64 @@
+<template>
+  <el-card class="mb-6 shadow-sm">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <span class="font-medium text-gray-700">管理員認證</span>
+        <el-tag v-if="credsSaved" type="success" size="small">已儲存（session）</el-tag>
+        <el-tag v-else type="warning" size="small">未設定</el-tag>
+      </div>
+    </template>
+    <el-form :model="credsForm" inline>
+      <el-form-item label="X-Client-Key">
+        <el-input
+          v-model="credsForm.clientKey"
+          placeholder="client key"
+          style="width: 220px"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="X-API-Key">
+        <el-input
+          v-model="credsForm.apiKey"
+          placeholder="api key"
+          style="width: 220px"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="saveCreds">儲存認證</el-button>
+        <el-button v-if="credsSaved" @click="clearCreds" class="ml-2">清除</el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+</template>
+
+<script setup>
+import { reactive, computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import { usePermissionStore } from '@/stores/permission'
+
+const permissionStore = usePermissionStore()
+
+const credsForm = reactive({
+  clientKey: permissionStore.adminClientKey,
+  apiKey: permissionStore.adminApiKey
+})
+
+const credsSaved = computed(() => permissionStore.hasAdminCreds())
+
+function saveCreds() {
+  if (!credsForm.clientKey || !credsForm.apiKey) {
+    ElMessage.warning('請填寫完整認證')
+    return
+  }
+  permissionStore.setAdminCreds(credsForm.clientKey, credsForm.apiKey)
+  ElMessage.success('認證已儲存（session）')
+}
+
+function clearCreds() {
+  permissionStore.clearAdminCreds()
+  credsForm.clientKey = ''
+  credsForm.apiKey = ''
+  ElMessage.info('認證已清除')
+}
+</script>
--- a/src/pages/admin/CompaniesPage.vue
+++ b/src/pages/admin/CompaniesPage.vue
@@ -17,18 +17,18 @@
    <el-skeleton v-if="loading" :rows="4" animated />

    <el-table v-else :data="companies" stripe border class="w-full shadow-sm">
-      <el-empty v-if="companies.length === 0" slot="empty" description="目前無公司" />
+      <template #empty><el-empty description="目前無公司" /></template>
      <el-table-column prop="company_key" label="Company Key" width="200" />
      <el-table-column prop="name" label="名稱" min-width="180" />
    </el-table>

    <!-- 新增 Dialog -->
    <el-dialog v-model="showDialog" title="新增公司" @close="resetForm">
-      <el-form :model="form" label-width="100px">
-        <el-form-item label="Company Key">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="Company Key" prop="company_key">
          <el-input v-model="form.company_key" placeholder="company-001" />
        </el-form-item>
-        <el-form-item label="名稱">
+        <el-form-item label="名稱" prop="name">
          <el-input v-model="form.name" placeholder="公司名稱" />
        </el-form-item>
      </el-form>
@@ -52,8 +52,13 @@ const error = ref(false)
 const errorMsg = ref('')
 const showDialog = ref(false)
 const submitting = ref(false)
+const formRef = ref()

 const form = ref({ company_key: '', name: '' })
+const rules = {
+  company_key: [{ required: true, message: '請輸入 Company Key', trigger: 'blur' }],
+  name: [{ required: true, message: '請輸入名稱', trigger: 'blur' }]
+}

 async function load() {
  loading.value = true
@@ -74,10 +79,8 @@ function resetForm() {
 }

 async function handleCreate() {
-  if (!form.value.company_key || !form.value.name) {
-    ElMessage.warning('請填寫完整資訊')
-    return
-  }
+  const valid = await formRef.value.validate().catch(() => false)
+  if (!valid) return
  submitting.value = true
  try {
    await createCompany(form.value)
--- a/src/pages/admin/MembersPage.vue
+++ b/src/pages/admin/MembersPage.vue
@@ -17,9 +17,9 @@
    <el-skeleton v-if="loading" :rows="4" animated />

    <el-table v-else :data="members" stripe border class="w-full shadow-sm">
-      <el-empty v-if="members.length === 0" slot="empty" description="目前無會員" />
-      <el-table-column prop="authentik_sub" label="Authentik Sub" min-width="200" />
-      <el-table-column prop="email" label="Email" min-width="200" />
+      <template #empty><el-empty description="目前無會員" /></template>
+      <el-table-column prop="authentik_sub" label="Authentik Sub" min-width="240" show-overflow-tooltip />
+      <el-table-column prop="email" label="Email" min-width="200" show-overflow-tooltip />
      <el-table-column prop="display_name" label="顯示名稱" width="150" />
    </el-table>
  </div>
--- a/src/pages/admin/ModulesPage.vue
+++ b/src/pages/admin/ModulesPage.vue
@@ -17,7 +17,7 @@
    <el-skeleton v-if="loading" :rows="4" animated />

    <el-table v-else :data="modules" stripe border class="w-full shadow-sm">
-      <el-empty v-if="modules.length === 0" slot="empty" description="目前無模組" />
+      <template #empty><el-empty description="目前無模組" /></template>
      <el-table-column prop="system_key" label="System Key" width="140" />
      <el-table-column prop="module_key" label="Module Key" width="160" />
      <el-table-column prop="name" label="名稱" min-width="180" />
@@ -25,14 +25,14 @@

    <!-- 新增 Dialog -->
    <el-dialog v-model="showDialog" title="新增模組" @close="resetForm">
-      <el-form :model="form" label-width="120px">
-        <el-form-item label="System Key">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="System Key" prop="system_key">
          <el-input v-model="form.system_key" placeholder="mkt" />
        </el-form-item>
-        <el-form-item label="Module Key">
+        <el-form-item label="Module Key" prop="module_key">
          <el-input v-model="form.module_key" placeholder="campaign" />
        </el-form-item>
-        <el-form-item label="名稱">
+        <el-form-item label="名稱" prop="name">
          <el-input v-model="form.name" placeholder="行銷活動" />
        </el-form-item>
      </el-form>
@@ -56,8 +56,14 @@ const error = ref(false)
 const errorMsg = ref('')
 const showDialog = ref(false)
 const submitting = ref(false)
+const formRef = ref()

 const form = ref({ system_key: '', module_key: '', name: '' })
+const rules = {
+  system_key: [{ required: true, message: '請輸入 System Key', trigger: 'blur' }],
+  module_key: [{ required: true, message: '請輸入 Module Key', trigger: 'blur' }],
+  name: [{ required: true, message: '請輸入名稱', trigger: 'blur' }]
+}

 async function load() {
  loading.value = true
@@ -78,10 +84,8 @@ function resetForm() {
 }

 async function handleCreate() {
-  if (!form.value.system_key || !form.value.module_key || !form.value.name) {
-    ElMessage.warning('請填寫完整資訊')
-    return
-  }
+  const valid = await formRef.value.validate().catch(() => false)
+  if (!valid) return
  submitting.value = true
  try {
    await createModule(form.value)
--- a/src/pages/admin/PermissionGroupsPage.vue
+++ b/src/pages/admin/PermissionGroupsPage.vue
@@ -2,28 +2,7 @@
  <div>
    <h2 class="text-xl font-bold text-gray-800 mb-6">權限群組管理</h2>

-    <!-- 認證 -->
-    <el-card class="mb-6 shadow-sm">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <span class="font-medium text-gray-700">管理員認證</span>
-          <el-tag v-if="credsSaved" type="success" size="small">已儲存（session）</el-tag>
-          <el-tag v-else type="warning" size="small">未設定</el-tag>
-        </div>
-      </template>
-      <el-form :model="credsForm" inline>
-        <el-form-item label="X-Client-Key">
-          <el-input v-model="credsForm.clientKey" placeholder="client key" style="width: 220px" show-password />
-        </el-form-item>
-        <el-form-item label="X-API-Key">
-          <el-input v-model="credsForm.apiKey" placeholder="api key" style="width: 220px" show-password />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="saveCreds">儲存認證</el-button>
-          <el-button v-if="credsSaved" @click="clearCreds" class="ml-2">清除</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+    <AdminCredsCard />

    <el-tabs v-model="activeTab" type="border-card" class="shadow-sm">
      <!-- Groups Tab -->
@@ -37,7 +16,7 @@
          <el-skeleton v-if="loadingGroups" :rows="4" animated />

          <el-table v-else :data="groups" stripe border class="w-full">
-            <el-empty v-if="groups.length === 0" slot="empty" description="目前無群組" />
+            <template #empty><el-empty description="目前無群組" /></template>
            <el-table-column prop="group_key" label="Group Key" width="180" />
            <el-table-column prop="name" label="群組名稱" min-width="200" />
          </el-table>
@@ -63,8 +42,8 @@
            </el-form-item>
          </el-form>

-          <p v-if="memberError" class="text-red-600 text-sm mb-2">{{ memberError }}</p>
-          <p v-if="memberSuccess" class="text-green-600 text-sm mb-2">{{ memberSuccess }}</p>
+          <el-alert v-if="memberError" :title="memberError" type="error" show-icon :closable="false" class="mt-3" />
+          <el-alert v-if="memberSuccess" :title="memberSuccess" type="success" show-icon :closable="false" class="mt-3" />
        </div>
      </el-tab-pane>

@@ -116,8 +95,8 @@
            </el-form-item>
          </el-form>

-          <p v-if="groupPermError" class="text-red-600 text-sm mb-2">{{ groupPermError }}</p>
-          <p v-if="groupPermSuccess" class="text-green-600 text-sm mb-2">{{ groupPermSuccess }}</p>
+          <el-alert v-if="groupPermError" :title="groupPermError" type="error" show-icon :closable="false" class="mt-3" />
+          <el-alert v-if="groupPermSuccess" :title="groupPermSuccess" type="success" show-icon :closable="false" class="mt-3" />
        </div>
      </el-tab-pane>
    </el-tabs>
@@ -152,34 +131,12 @@ import {
  groupGrant,
  groupRevoke
 } from '@/api/permission-groups'
+import AdminCredsCard from '@/components/AdminCredsCard.vue'

 const permissionStore = usePermissionStore()
 const activeTab = ref('groups')
-
-// 認證
-const credsForm = reactive({
-  clientKey: permissionStore.adminClientKey,
-  apiKey: permissionStore.adminApiKey
-})
-
 const credsSaved = computed(() => permissionStore.hasAdminCreds())

-function saveCreds() {
-  if (!credsForm.clientKey || !credsForm.apiKey) {
-    ElMessage.warning('請填寫完整認證')
-    return
-  }
-  permissionStore.setAdminCreds(credsForm.clientKey, credsForm.apiKey)
-  ElMessage.success('認證已儲存（session）')
-}
-
-function clearCreds() {
-  permissionStore.clearAdminCreds()
-  credsForm.clientKey = ''
-  credsForm.apiKey = ''
-  ElMessage.info('認證已清除')
-}
-
 // Groups
 const groups = ref([])
 const loadingGroups = ref(false)
--- a/src/pages/admin/SitesPage.vue
+++ b/src/pages/admin/SitesPage.vue
@@ -17,7 +17,7 @@
    <el-skeleton v-if="loading" :rows="4" animated />

    <el-table v-else :data="sites" stripe border class="w-full shadow-sm">
-      <el-empty v-if="sites.length === 0" slot="empty" description="目前無站台" />
+      <template #empty><el-empty description="目前無站台" /></template>
      <el-table-column prop="site_key" label="Site Key" width="160" />
      <el-table-column prop="company_key" label="Company Key" width="160" />
      <el-table-column prop="name" label="名稱" min-width="180" />
@@ -25,14 +25,14 @@

    <!-- 新增 Dialog -->
    <el-dialog v-model="showDialog" title="新增站台" @close="resetForm">
-      <el-form :model="form" label-width="120px">
-        <el-form-item label="Site Key">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="Site Key" prop="site_key">
          <el-input v-model="form.site_key" placeholder="site-001" />
        </el-form-item>
-        <el-form-item label="Company Key">
+        <el-form-item label="Company Key" prop="company_key">
          <el-input v-model="form.company_key" placeholder="company-001" />
        </el-form-item>
-        <el-form-item label="名稱">
+        <el-form-item label="名稱" prop="name">
          <el-input v-model="form.name" placeholder="站台名稱" />
        </el-form-item>
      </el-form>
@@ -56,8 +56,14 @@ const error = ref(false)
 const errorMsg = ref('')
 const showDialog = ref(false)
 const submitting = ref(false)
+const formRef = ref()

 const form = ref({ site_key: '', company_key: '', name: '' })
+const rules = {
+  site_key: [{ required: true, message: '請輸入 Site Key', trigger: 'blur' }],
+  company_key: [{ required: true, message: '請輸入 Company Key', trigger: 'blur' }],
+  name: [{ required: true, message: '請輸入名稱', trigger: 'blur' }]
+}

 async function load() {
  loading.value = true
@@ -78,10 +84,8 @@ function resetForm() {
 }

 async function handleCreate() {
-  if (!form.value.site_key || !form.value.company_key || !form.value.name) {
-    ElMessage.warning('請填寫完整資訊')
-    return
-  }
+  const valid = await formRef.value.validate().catch(() => false)
+  if (!valid) return
  submitting.value = true
  try {
    await createSite(form.value)
--- a/src/pages/admin/SystemsPage.vue
+++ b/src/pages/admin/SystemsPage.vue
@@ -17,18 +17,18 @@
    <el-skeleton v-if="loading" :rows="4" animated />

    <el-table v-else :data="systems" stripe border class="w-full shadow-sm">
-      <el-empty v-if="systems.length === 0" slot="empty" description="目前無系統" />
+      <template #empty><el-empty description="目前無系統" /></template>
      <el-table-column prop="system_key" label="System Key" width="200" />
      <el-table-column prop="name" label="名稱" min-width="180" />
    </el-table>

    <!-- 新增 Dialog -->
    <el-dialog v-model="showDialog" title="新增系統" @close="resetForm">
-      <el-form :model="form" label-width="100px">
-        <el-form-item label="System Key">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="System Key" prop="system_key">
          <el-input v-model="form.system_key" placeholder="mkt" />
        </el-form-item>
-        <el-form-item label="名稱">
+        <el-form-item label="名稱" prop="name">
          <el-input v-model="form.name" placeholder="行銷平台" />
        </el-form-item>
      </el-form>
@@ -52,8 +52,13 @@ const error = ref(false)
 const errorMsg = ref('')
 const showDialog = ref(false)
 const submitting = ref(false)
+const formRef = ref()

 const form = ref({ system_key: '', name: '' })
+const rules = {
+  system_key: [{ required: true, message: '請輸入 System Key', trigger: 'blur' }],
+  name: [{ required: true, message: '請輸入名稱', trigger: 'blur' }]
+}

 async function load() {
  loading.value = true
@@ -74,10 +79,8 @@ function resetForm() {
 }

 async function handleCreate() {
-  if (!form.value.system_key || !form.value.name) {
-    ElMessage.warning('請填寫完整資訊')
-    return
-  }
+  const valid = await formRef.value.validate().catch(() => false)
+  if (!valid) return
  submitting.value = true
  try {
    await createSystem(form.value)
--- a/src/pages/permissions/PermissionAdminPage.vue
+++ b/src/pages/permissions/PermissionAdminPage.vue
@@ -2,38 +2,7 @@
  <div>
    <h2 class="text-xl font-bold text-gray-800 mb-6">權限管理</h2>

-    <!-- 認證設定 -->
-    <el-card class="mb-6 shadow-sm">
-      <template #header>
-        <div class="flex items-center justify-between">
-          <span class="font-medium text-gray-700">管理員認證</span>
-          <el-tag v-if="credsSaved" type="success" size="small">已儲存（session）</el-tag>
-          <el-tag v-else type="warning" size="small">未設定</el-tag>
-        </div>
-      </template>
-      <el-form :model="credsForm" inline>
-        <el-form-item label="X-Client-Key">
-          <el-input
-            v-model="credsForm.clientKey"
-            placeholder="client key"
-            style="width: 220px"
-            show-password
-          />
-        </el-form-item>
-        <el-form-item label="X-API-Key">
-          <el-input
-            v-model="credsForm.apiKey"
-            placeholder="api key"
-            style="width: 220px"
-            show-password
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="saveCreds">儲存認證</el-button>
-          <el-button v-if="credsSaved" @click="clearCreds" class="ml-2">清除</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
+    <AdminCredsCard />

    <!-- Grant / Revoke -->
    <el-tabs v-model="activeTab" type="border-card" class="shadow-sm">
@@ -178,35 +147,13 @@
 import { ref, reactive, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 import { usePermissionStore } from '@/stores/permission'
+import AdminCredsCard from '@/components/AdminCredsCard.vue'

 const permissionStore = usePermissionStore()

 const activeTab = ref('grant')
-
-// 認證
-const credsForm = reactive({
-  clientKey: permissionStore.adminClientKey,
-  apiKey: permissionStore.adminApiKey
-})
-
 const credsSaved = computed(() => permissionStore.hasAdminCreds())

-function saveCreds() {
-  if (!credsForm.clientKey || !credsForm.apiKey) {
-    ElMessage.warning('請填寫完整認證')
-    return
-  }
-  permissionStore.setAdminCreds(credsForm.clientKey, credsForm.apiKey)
-  ElMessage.success('認證已儲存（session）')
-}
-
-function clearCreds() {
-  permissionStore.clearAdminCreds()
-  credsForm.clientKey = ''
-  credsForm.apiKey = ''
-  ElMessage.info('認證已清除')
-}
-
 // Grant
 const grantFormRef = ref()
 const grantLoading = ref(false)