f3d5937d37
- 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>
82 lines
2.9 KiB
Vue
82 lines
2.9 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-50">
|
|
<nav v-if="showNav" class="bg-white border-b border-gray-200 px-6 py-3 flex items-center justify-between shadow-sm">
|
|
<div class="flex items-center gap-6">
|
|
<span class="font-bold text-gray-800 text-base">member.ose.tw</span>
|
|
<router-link
|
|
to="/me"
|
|
class="text-sm text-gray-600 hover:text-blue-600 transition-colors"
|
|
active-class="text-blue-600 font-medium"
|
|
>
|
|
我的資料
|
|
</router-link>
|
|
<router-link
|
|
to="/me/permissions"
|
|
class="text-sm text-gray-600 hover:text-blue-600 transition-colors"
|
|
active-class="text-blue-600 font-medium"
|
|
>
|
|
我的權限
|
|
</router-link>
|
|
|
|
<div class="flex items-center gap-4 border-l border-gray-300 pl-6">
|
|
<el-dropdown @command="handleAdminNav">
|
|
<span class="text-sm text-gray-600 hover:text-blue-600 cursor-pointer transition-colors">
|
|
管理員 <el-icon class="el-icon--right"><arrow-down /></el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="permissions">權限管理</el-dropdown-item>
|
|
<el-dropdown-divider />
|
|
<el-dropdown-item command="systems">系統管理</el-dropdown-item>
|
|
<el-dropdown-item command="modules">模組管理</el-dropdown-item>
|
|
<el-dropdown-item command="companies">公司管理</el-dropdown-item>
|
|
<el-dropdown-item command="sites">站台管理</el-dropdown-item>
|
|
<el-dropdown-item command="members">會員列表</el-dropdown-item>
|
|
<el-dropdown-item command="groups">權限群組</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
<el-button v-if="authStore.isLoggedIn" size="small" @click="logout">登出</el-button>
|
|
</nav>
|
|
<main class="p-6 max-w-6xl mx-auto">
|
|
<router-view />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import { ArrowDown } from '@element-plus/icons-vue'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const authStore = useAuthStore()
|
|
|
|
const showNav = computed(() => {
|
|
const onAuthPage = route.name === 'login' || route.name === 'auth-callback'
|
|
return authStore.isLoggedIn && !onAuthPage
|
|
})
|
|
|
|
function handleAdminNav(command) {
|
|
const routes = {
|
|
permissions: '/admin/permissions',
|
|
systems: '/admin/systems',
|
|
modules: '/admin/modules',
|
|
companies: '/admin/companies',
|
|
sites: '/admin/sites',
|
|
members: '/admin/members',
|
|
groups: '/admin/permission-groups'
|
|
}
|
|
router.push(routes[command])
|
|
}
|
|
|
|
function logout() {
|
|
authStore.logout()
|
|
router.push('/login')
|
|
}
|
|
</script>
|