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/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)