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>

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)