From 86b6383251e34e95e43a195a686dcca14686f29c Mon Sep 17 00:00:00 2001
From: Mplan <mplan_@outlook.com>
Date: Thu, 1 Oct 2026 10:31:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20=E9=87=8D=E6=9E=84=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E6=8E=A7=E5=88=B6=E5=8F=B0=E5=B8=83=E5=B1=80=E5=B9=B6?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/admin/admin.css                  |  523 +++
 src/features/admin/api.ts                     |   15 +-
 .../admin/components/AdminCloudManager.vue    |  545 +++
 .../components/AdminCloudTypesManager.vue     |  176 +
 .../admin/components/AdminOverview.vue        |  258 ++
 .../admin/components/AdminUsersManager.vue    |  324 ++
 .../admin/composables/useAdminData.ts         |  298 ++
 .../admin/composables/useAdminViewport.ts     |   12 +
 src/features/admin/models.ts                  |   50 +
 src/features/admin/views/AdminView.vue        | 2945 ++++-------------
 tests/admin.test.mjs                          |   75 +
 11 files changed, 3008 insertions(+), 2213 deletions(-)
 create mode 100644 src/features/admin/admin.css
 create mode 100644 src/features/admin/components/AdminCloudManager.vue
 create mode 100644 src/features/admin/components/AdminCloudTypesManager.vue
 create mode 100644 src/features/admin/components/AdminOverview.vue
 create mode 100644 src/features/admin/components/AdminUsersManager.vue
 create mode 100644 src/features/admin/composables/useAdminData.ts
 create mode 100644 src/features/admin/composables/useAdminViewport.ts
 create mode 100644 src/features/admin/models.ts
 create mode 100644 tests/admin.test.mjs

diff --git a/src/features/admin/admin.css b/src/features/admin/admin.css
new file mode 100644
index 0000000..0c7a597
--- /dev/null
+++ b/src/features/admin/admin.css
@@ -0,0 +1,523 @@
+.admin-shell {
+    display: grid;
+    grid-template-columns: 232px minmax(0, 1fr);
+    min-height: 100vh;
+    background: var(--oc-gradient-canvas);
+    transition: grid-template-columns 160ms ease;
+}
+.admin-shell--collapsed {
+    grid-template-columns: 76px minmax(0, 1fr);
+}
+.admin-sidebar {
+    position: sticky;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow-y: auto;
+    border-right: 1px solid var(--oc-color-border);
+    background: white;
+}
+.admin-brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 92px;
+    padding: 20px;
+}
+.admin-brand--collapsed {
+    justify-content: center;
+    padding: 16px 0;
+}
+.admin-navigation {
+    padding: 0 12px;
+}
+.admin-nav-group {
+    margin: 20px 12px 8px;
+    color: var(--oc-color-text-disabled);
+    font-size: 11px;
+    letter-spacing: 0.1em;
+}
+.admin-nav-group:first-child {
+    margin-top: 0;
+}
+.admin-nav-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 44px;
+    padding: 10px 12px;
+    margin-bottom: 4px;
+    width: 100%;
+    border: 1px solid transparent;
+    color: var(--oc-color-text-muted);
+    font-size: 13px;
+    text-align: left;
+    transition: background 160ms ease;
+}
+.admin-nav-item:hover {
+    background: var(--oc-color-surface-muted);
+    color: var(--oc-color-text);
+}
+.admin-nav-item--active {
+    border-color: var(--color-teal-200);
+    background: var(--color-teal-50);
+    color: var(--color-teal-800);
+    font-weight: 600;
+    box-shadow: var(--oc-shadow-xs);
+}
+.admin-nav-item--active:hover {
+    background: var(--color-teal-50);
+    color: var(--color-teal-800);
+}
+.admin-nav-badge {
+    padding: 1px 5px;
+    border: 1px solid #fde68a;
+    background: #fffbeb;
+    color: #92400e;
+    font-size: 10px;
+    line-height: 16px;
+    font-variant-numeric: tabular-nums;
+}
+.admin-nav-badge--compact {
+    position: absolute;
+    right: -4px;
+    top: -2px;
+}
+.admin-workspace {
+    min-width: 0;
+}
+.admin-topbar {
+    position: sticky;
+    top: 0;
+    z-index: 30;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    height: 68px;
+    padding: 0 32px;
+    border-bottom: 1px solid var(--oc-color-border);
+    background: rgb(255 255 255 / 96%);
+}
+.admin-mobile-toggle {
+    display: none;
+}
+.admin-account {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 4px;
+}
+.admin-user-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    border: 1px solid var(--color-teal-200);
+    background: var(--color-teal-50);
+    color: var(--color-teal-800);
+    font-size: 13px;
+    font-weight: 600;
+}
+.admin-content {
+    width: 100%;
+    max-width: 1600px;
+    margin: 0 auto;
+    padding: 30px 32px;
+}
+.admin-page-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    margin-bottom: 28px;
+}
+.admin-stat-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 20px;
+}
+.admin-stat {
+    min-width: 0;
+    padding: 20px;
+    border: 1px solid var(--oc-color-border);
+    background: white;
+    text-align: left;
+    transition: transform 160ms ease;
+}
+.admin-stat:hover {
+    transform: translate(-1px, -1px);
+}
+.admin-stat-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
+    flex-shrink: 0;
+    border: 1px solid var(--oc-color-border);
+    background: var(--oc-color-surface-muted);
+    color: var(--oc-color-text-muted);
+}
+.admin-stat-icon--sky {
+    background: #f0f9ff;
+    color: #0369a1;
+    border-color: #bae6fd;
+}
+.admin-stat-icon--teal {
+    background: var(--color-teal-50);
+    color: var(--color-teal-700);
+    border-color: var(--color-teal-200);
+}
+.admin-stat-icon--amber {
+    background: #fffbeb;
+    color: #b45309;
+    border-color: #fde68a;
+}
+.admin-priority {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 20px;
+    border: 1px solid var(--oc-color-border);
+    background: white;
+}
+.admin-priority--pending {
+    border-color: #fde68a;
+    background: #fffdf7;
+}
+.admin-overview-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
+    gap: 24px;
+}
+.admin-panel {
+    min-width: 0;
+    border: 1px solid var(--oc-color-border);
+    background: white;
+}
+.admin-panel-heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 20px;
+    border-bottom: 1px solid #f1f5f9;
+}
+.admin-panel-heading h2 {
+    color: var(--oc-color-text);
+    font-size: 15px;
+    font-weight: 600;
+}
+.admin-panel-heading p {
+    margin-top: 5px;
+    color: var(--oc-color-text-muted);
+    font-size: 12px;
+    line-height: 1.7;
+}
+.admin-chart {
+    display: flex;
+    justify-content: space-between;
+    gap: 14px;
+    padding: 30px 28px 24px;
+}
+.admin-chart-column {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+.admin-chart-track {
+    position: relative;
+    width: 100%;
+    height: 156px;
+    background: repeating-linear-gradient(
+        to top,
+        transparent 0,
+        transparent 38px,
+        #f1f5f9 38px,
+        #f1f5f9 39px
+    );
+}
+.admin-chart-bar {
+    position: absolute;
+    bottom: 0;
+    left: 15%;
+    width: 70%;
+    border-top: 2px solid #7dd3fc;
+    background: #e0f2fe;
+}
+.admin-chart-bar--today {
+    border-color: var(--color-teal-400);
+    background: var(--color-teal-200);
+}
+.admin-recent-row {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    width: 100%;
+    padding: 14px 20px;
+    border-bottom: 1px solid #f1f5f9;
+    text-align: left;
+}
+.admin-recent-row:last-child {
+    border-bottom: 0;
+}
+.admin-recent-row:hover {
+    background: var(--oc-color-surface-muted);
+}
+.admin-filters {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: end;
+    gap: 16px;
+    padding: 20px;
+}
+.admin-filters > div {
+    flex: 1 1 144px;
+    min-width: 0;
+}
+.admin-filters > .admin-filter-search {
+    flex: 2 1 280px;
+}
+.admin-filters > .self-end {
+    flex: 0 0 auto;
+}
+.admin-filters .oc-field-control {
+    width: 100%;
+    height: 34px;
+    min-width: 0;
+    padding: 5px 10px;
+    font-size: 13px;
+}
+.admin-filters .oc-field-label {
+    margin-bottom: 6px;
+    font-size: 12px;
+}
+.admin-table-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 12px 20px;
+    border-top: 1px solid #f1f5f9;
+    border-bottom: 1px solid #f1f5f9;
+    background: var(--oc-color-surface-muted);
+}
+.admin-sort {
+    max-width: 100%;
+    min-width: 0;
+    border: 1px solid var(--oc-color-border);
+    padding: 5px 8px;
+    color: var(--oc-color-text-secondary);
+    background: white;
+    font-size: 12px;
+}
+.admin-batch-toolbar {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 14px 20px;
+    background: #f0f9ff;
+    color: #075985;
+    border-bottom: 1px solid #bae6fd;
+}
+.admin-data-table {
+    min-width: 0;
+    width: 100%;
+}
+.admin-data-table .n-data-table-th {
+    font-size: 12px;
+    font-weight: 500;
+}
+.admin-data-table .n-data-table-td {
+    font-size: 13px;
+}
+.admin-thumbnail {
+    display: block;
+    width: 56px;
+    height: 40px;
+    border: 1px solid var(--oc-color-border);
+    background: #f0f9ff;
+}
+.admin-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.admin-cloud-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 20px;
+    padding: 20px;
+}
+.admin-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 16px;
+    padding: 16px 20px;
+    border-top: 1px solid #f1f5f9;
+}
+.admin-form-modal.n-card {
+    width: min(540px, calc(100vw - 32px));
+    max-height: calc(100dvh - 32px);
+    overflow-y: auto;
+    border: 1px solid var(--oc-color-border);
+    box-shadow: var(--oc-shadow-xl);
+}
+.admin-form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    border-top: 1px solid var(--oc-color-border);
+    padding-top: 20px;
+}
+.admin-shell button:focus-visible,
+.admin-shell a:focus-visible,
+.admin-sort:focus-visible {
+    outline: 2px solid #38bdf8;
+    outline-offset: 3px;
+}
+.admin-shell input[type='checkbox'] {
+    accent-color: var(--oc-color-primary);
+    width: 15px;
+    height: 15px;
+}
+@media (min-width: 1800px) {
+    .admin-content {
+        padding-top: 40px;
+    }
+}
+@media (max-width: 1199px) {
+    .admin-content {
+        padding: 24px;
+    }
+    .admin-topbar {
+        padding: 0 24px;
+    }
+    .admin-stat-grid {
+        gap: 16px;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .admin-cloud-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+@media (max-width: 899px) {
+    .admin-shell,
+    .admin-shell--collapsed {
+        display: block;
+    }
+    .admin-sidebar,
+    .admin-desktop-toggle {
+        display: none;
+    }
+    .admin-mobile-toggle {
+        display: inline-flex;
+    }
+}
+@media (max-width: 639px) {
+    .admin-topbar {
+        height: 60px;
+        gap: 8px;
+        padding: 0 16px;
+    }
+    .admin-content {
+        padding: 24px 16px;
+    }
+    .admin-page-heading {
+        align-items: flex-start;
+        flex-direction: column;
+        gap: 12px;
+        margin-bottom: 24px;
+    }
+    .admin-stat-grid {
+        gap: 12px;
+    }
+    .admin-stat {
+        padding: 14px;
+    }
+    .admin-stat-icon {
+        width: 30px;
+        height: 30px;
+    }
+    .admin-stat .oc-stat-label {
+        font-size: 11px;
+        letter-spacing: 0.04em;
+    }
+    .admin-stat .text-3xl {
+        font-size: 26px;
+    }
+    .admin-overview-grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+    .admin-priority {
+        align-items: flex-start;
+        flex-wrap: wrap;
+        padding: 16px;
+    }
+    .admin-priority > .n-button {
+        margin-left: 46px;
+    }
+    .admin-panel-heading {
+        align-items: flex-start;
+        flex-wrap: wrap;
+        padding: 16px;
+    }
+    .admin-filters {
+        gap: 12px;
+        padding: 16px;
+    }
+    .admin-filters > div {
+        flex-basis: calc(50% - 6px);
+    }
+    .admin-filters > .admin-filter-search {
+        flex-basis: 100%;
+    }
+    .admin-filters > .self-end {
+        flex-basis: 100%;
+    }
+    .admin-table-toolbar,
+    .admin-batch-toolbar {
+        padding: 12px 16px;
+    }
+    .admin-pagination {
+        padding: 16px;
+    }
+    .admin-cloud-grid {
+        grid-template-columns: minmax(0, 1fr);
+        padding: 16px;
+    }
+    .admin-chart {
+        gap: 8px;
+        padding: 24px 16px;
+    }
+    .admin-recent-row {
+        gap: 10px;
+        padding: 14px 16px;
+    }
+}
+@media (max-width: 639px) {
+    .admin-priority {
+        display: grid;
+        grid-template-columns: 30px minmax(0, 1fr);
+    }
+    .admin-priority > .n-button {
+        grid-column: 2;
+        margin-left: 0;
+        justify-self: start;
+    }
+    .admin-topbar .admin-breadcrumb-separator {
+        display: none;
+    }
+}
diff --git a/src/features/admin/api.ts b/src/features/admin/api.ts
index a9e6ca0..6277579 100644
--- a/src/features/admin/api.ts
+++ b/src/features/admin/api.ts
@@ -10,6 +10,7 @@ import type {
     CloudTypeCreateResponse,
     ReviewCloudsBody,
     SetUserRoleBody,
+    CreateUserBody,
 } from '@/types/api-contract'
 
 export async function listUsers() {
@@ -25,16 +26,28 @@ export function listAdminClouds() {
     })
 }
 
-export async function reviewClouds(ids: string[], reviewStatus: ReviewCloudsBody['review_status']) {
+export async function reviewClouds(
+    ids: string[],
+    reviewStatus: ReviewCloudsBody['review_status'],
+    onBatchComplete?: (ids: string[]) => void,
+) {
     for (let offset = 0; offset < ids.length; offset += 100) {
         const body: ReviewCloudsBody = {
             cloud_ids: ids.slice(offset, offset + 100),
             review_status: reviewStatus,
         }
         await apiRequest<MessageResponse>('/admin/clouds/review', { method: 'POST', body })
+        onBatchComplete?.(body.cloud_ids)
     }
 }
 
+export function createUser(body: CreateUserBody) {
+    return apiRequest<{ message: string; user_id: string; email_sent: boolean }>('/admin/users', {
+        method: 'POST',
+        body,
+    })
+}
+
 export function deleteAdminCloud(id: string) {
     return apiRequest<MessageResponse>(`/admin/clouds/${encodeURIComponent(id)}`, {
         method: 'DELETE',
diff --git a/src/features/admin/components/AdminCloudManager.vue b/src/features/admin/components/AdminCloudManager.vue
new file mode 100644
index 0000000..e936a20
--- /dev/null
+++ b/src/features/admin/components/AdminCloudManager.vue
@@ -0,0 +1,545 @@
+<script setup lang="ts">
+import { computed, h, ref, watch } from 'vue'
+import {
+    NButton,
+    NDataTable,
+    NEmpty,
+    NIcon,
+    NInput,
+    NPagination,
+    NTag,
+    type DataTableColumns,
+} from 'naive-ui'
+import { Download, LayoutGrid, List, Search } from '@vicons/tabler'
+import type { CloudDetail } from '@/types/view-models'
+import type { CloudTypeResponse } from '@/types/api-contract'
+import {
+    exportCsv,
+    formatDateTime,
+    statusMeta,
+    visibilityLabel,
+    type ReviewStatus,
+} from '@/features/admin/models'
+
+import { useAdminViewport } from '@/features/admin/composables/useAdminViewport'
+
+const compact = useAdminViewport()
+const props = defineProps<{
+    clouds: CloudDetail[]
+    cloudTypes: CloudTypeResponse[]
+    review?: boolean
+    busy: boolean
+    owner?: string
+}>()
+const emit = defineEmits<{
+    preview: [cloud: CloudDetail]
+    review: [ids: string[], status: 'approved' | 'rejected']
+    delete: [clouds: CloudDetail[]]
+    clearOwner: []
+}>()
+const search = ref('')
+const advancedFilters = ref(false)
+const status = ref<ReviewStatus | ''>('')
+const typeId = ref('')
+const visibility = ref('')
+const dateFrom = ref('')
+const dateTo = ref('')
+const order = ref('newest')
+const view = ref<'table' | 'grid'>(compact.value ? 'grid' : 'table')
+const page = ref(1)
+const pageSize = ref(20)
+const selected = ref<string[]>([])
+const filtered = computed(() => {
+    const query = search.value.trim().toLocaleLowerCase()
+    const from = dateFrom.value ? new Date(`${dateFrom.value}T00:00:00`).getTime() : -Infinity
+    const to = dateTo.value ? new Date(`${dateTo.value}T23:59:59.999`).getTime() : Infinity
+    return props.clouds
+        .filter(cloud => {
+            return (
+                (!props.review || cloud.status === 'pending') &&
+                (!props.owner || cloud.user_id === props.owner) &&
+                (!status.value || cloud.status === status.value) &&
+                (!typeId.value || String(cloud.cloud_type_id) === typeId.value) &&
+                (!visibility.value ||
+                    (visibility.value === 'hidden'
+                        ? cloud.is_hidden
+                        : cloud.status === 'approved' && !cloud.is_hidden)) &&
+                Date.parse(cloud.created_at) >= from &&
+                Date.parse(cloud.created_at) <= to &&
+                (!query ||
+                    [cloud.username, cloud.cloud_type_name, cloud.description, cloud.id].some(
+                        value => value?.toLocaleLowerCase().includes(query),
+                    ))
+            )
+        })
+        .sort((a, b) =>
+            order.value === 'oldest'
+                ? Date.parse(a.created_at) - Date.parse(b.created_at)
+                : Date.parse(b.created_at) - Date.parse(a.created_at),
+        )
+})
+const pageRows = computed(() =>
+    filtered.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value),
+)
+const selectedRows = computed(() => filtered.value.filter(row => selected.value.includes(row.id)))
+const allPageSelected = computed(
+    () => pageRows.value.length > 0 && pageRows.value.every(row => selected.value.includes(row.id)),
+)
+
+watch(
+    [search, status, typeId, visibility, dateFrom, dateTo, order, () => props.owner, pageSize],
+    () => {
+        page.value = 1
+        selected.value = []
+    },
+)
+watch(filtered, rows => {
+    const valid = new Set(rows.map(row => row.id))
+    selected.value = selected.value.filter(id => valid.has(id))
+    page.value = Math.min(page.value, Math.max(1, Math.ceil(rows.length / pageSize.value)))
+})
+
+function reset() {
+    search.value = ''
+    status.value = ''
+    typeId.value = ''
+    visibility.value = ''
+    dateFrom.value = ''
+    dateTo.value = ''
+    order.value = 'newest'
+    emit('clearOwner')
+}
+function toggle(id: string) {
+    selected.value = selected.value.includes(id)
+        ? selected.value.filter(value => value !== id)
+        : [...selected.value, id]
+}
+function togglePage() {
+    const ids = new Set(pageRows.value.map(row => row.id))
+    selected.value = allPageSelected.value
+        ? selected.value.filter(id => !ids.has(id))
+        : [...new Set([...selected.value, ...ids])]
+}
+function exportRows() {
+    exportCsv(
+        props.review ? '待审核云图' : '云图清单',
+        ['ID', '云类型', '上传者', '审核状态', '可见性', '上传时间', '拍摄时间', '说明'],
+        filtered.value.map(row => [
+            row.id,
+            row.cloud_type_name,
+            row.username,
+            statusMeta[row.status].label,
+            visibilityLabel(row),
+            row.created_at,
+            row.captured_at,
+            row.description,
+        ]),
+    )
+}
+function action(label: string, handler: () => void, variant = 'neutral', disabled = false) {
+    return h(
+        NButton,
+        {
+            size: 'tiny',
+            type: 'default',
+            class: `oc-panel-button oc-panel-button--${variant}`,
+            disabled: props.busy || disabled,
+            onClick: handler,
+        },
+        { default: () => label },
+    )
+}
+const columns = computed<DataTableColumns<CloudDetail>>(() => [
+    { type: 'selection', disabled: () => props.busy },
+    {
+        title: '云图',
+        key: 'image',
+        width: 82,
+        render: row =>
+            h(
+                'button',
+                {
+                    class: 'admin-thumbnail',
+                    'aria-label': `查看${row.cloud_type_name}详情`,
+                    onClick: () => emit('preview', row),
+                },
+                [
+                    h('img', {
+                        src: row.thumbnail_url || row.image_url,
+                        alt: row.cloud_type_name || '云图',
+                        loading: 'lazy',
+                    }),
+                ],
+            ),
+    },
+    {
+        title: '云类型 / 说明',
+        key: 'cloud_type_name',
+        width: 200,
+        render: row =>
+            h('div', [
+                h('p', { class: 'font-medium text-slate-900' }, row.cloud_type_name || '未知云型'),
+                h(
+                    'p',
+                    { class: 'mt-1 truncate text-xs text-slate-500', title: row.description || '' },
+                    row.description || '无说明',
+                ),
+            ]),
+    },
+    { title: '上传者', key: 'username', width: 125, ellipsis: { tooltip: true } },
+    {
+        title: '审核状态',
+        key: 'status',
+        width: 100,
+        render: row =>
+            h(
+                NTag,
+                { size: 'small', type: statusMeta[row.status].type, bordered: false },
+                { default: () => statusMeta[row.status].label },
+            ),
+    },
+    {
+        title: '可见性',
+        key: 'visibility',
+        width: 100,
+        render: row => h('span', { class: 'text-xs text-slate-500' }, visibilityLabel(row)),
+    },
+    {
+        title: '上传时间',
+        key: 'created_at',
+        width: 155,
+        render: row => h('span', { class: 'text-xs tabular-nums' }, formatDateTime(row.created_at)),
+    },
+    {
+        title: '操作',
+        key: 'actions',
+        width: 230,
+        fixed: compact.value ? undefined : 'right',
+        render: row =>
+            h('div', { class: 'flex flex-wrap gap-2 py-1' }, [
+                action('详情', () => emit('preview', row)),
+                action(
+                    '通过',
+                    () => emit('review', [row.id], 'approved'),
+                    'teal',
+                    row.status === 'approved',
+                ),
+                action(
+                    '拒绝',
+                    () => emit('review', [row.id], 'rejected'),
+                    'amber',
+                    row.status === 'rejected',
+                ),
+                ...(!props.review ? [action('删除', () => emit('delete', [row]), 'danger')] : []),
+            ]),
+    },
+])
+</script>
+
+<template>
+    <section class="oc-panel-card admin-panel">
+        <div class="admin-panel-heading">
+            <div>
+                <h2>
+                    {{ review ? '待审核队列' : '云图资源' }}
+                    <span class="ml-2 text-sm font-normal text-slate-400"
+                        >{{ filtered.length }} 张</span
+                    >
+                </h2>
+                <p>
+                    {{
+                        review
+                            ? '核对上传内容后通过或拒绝，支持批量处理'
+                            : '搜索、检查和管理所有状态的云图'
+                    }}
+                </p>
+            </div>
+            <NButton
+                type="default"
+                size="small"
+                class="oc-panel-button oc-panel-button--neutral"
+                :disabled="!filtered.length || busy"
+                @click="exportRows"
+                ><template #icon
+                    ><NIcon><Download /></NIcon></template
+                >导出清单</NButton
+            >
+        </div>
+        <div class="admin-filters">
+            <div class="admin-filter-search">
+                <label class="oc-field-label" :for="review ? 'review-search' : 'cloud-search'"
+                    >搜索云图</label
+                ><NInput
+                    v-model:value="search"
+                    clearable
+                    placeholder="云类型、上传者、说明或 ID"
+                    :input-props="{ id: review ? 'review-search' : 'cloud-search' }"
+                    ><template #prefix
+                        ><NIcon><Search /></NIcon></template
+                ></NInput>
+            </div>
+            <div v-if="!review">
+                <label class="oc-field-label" for="cloud-status">审核状态</label
+                ><select id="cloud-status" v-model="status" class="oc-field-control">
+                    <option value="">全部状态</option>
+                    <option v-for="(meta, key) in statusMeta" :key="key" :value="key">
+                        {{ meta.label }}
+                    </option>
+                </select>
+            </div>
+            <div>
+                <label class="oc-field-label" for="cloud-type-filter">云类型</label
+                ><select id="cloud-type-filter" v-model="typeId" class="oc-field-control">
+                    <option value="">全部云类型</option>
+                    <option v-for="type in cloudTypes" :key="type.id" :value="String(type.id)">
+                        {{ type.name }}
+                    </option>
+                </select>
+            </div>
+            <div v-if="!review && (!compact || advancedFilters)">
+                <label class="oc-field-label" for="cloud-visibility">可见性</label
+                ><select id="cloud-visibility" v-model="visibility" class="oc-field-control">
+                    <option value="">全部可见性</option>
+                    <option value="public">公开可见</option>
+                    <option value="hidden">用户隐藏</option>
+                </select>
+            </div>
+            <div v-if="!compact || advancedFilters">
+                <label class="oc-field-label" for="cloud-date-from">上传开始日期</label
+                ><input
+                    id="cloud-date-from"
+                    v-model="dateFrom"
+                    type="date"
+                    class="oc-field-control"
+                    :max="dateTo || undefined"
+                />
+            </div>
+            <div v-if="!compact || advancedFilters">
+                <label class="oc-field-label" for="cloud-date-to">上传结束日期</label
+                ><input
+                    id="cloud-date-to"
+                    v-model="dateTo"
+                    type="date"
+                    class="oc-field-control"
+                    :min="dateFrom || undefined"
+                />
+            </div>
+            <div class="self-end flex flex-wrap gap-3">
+                <NButton
+                    v-if="compact"
+                    type="default"
+                    class="oc-panel-button oc-panel-button--neutral"
+                    :aria-expanded="advancedFilters"
+                    @click="advancedFilters = !advancedFilters"
+                    >{{ advancedFilters ? '收起筛选' : '更多筛选' }}</NButton
+                >
+                <NButton
+                    type="default"
+                    class="oc-panel-button oc-panel-button--neutral"
+                    @click="reset"
+                    >重置筛选</NButton
+                >
+            </div>
+        </div>
+        <div
+            v-if="owner"
+            class="mx-5 mb-4 flex items-center gap-3 border border-sky-200 bg-sky-50 p-3 text-sm text-sky-800"
+        >
+            正在查看指定用户的上传
+            <button type="button" class="oc-text-button" @click="emit('clearOwner')">
+                清除筛选
+            </button>
+        </div>
+        <div class="admin-table-toolbar">
+            <div class="flex flex-wrap items-center gap-3">
+                <label class="flex items-center gap-2 text-sm text-slate-600"
+                    ><input
+                        type="checkbox"
+                        :checked="allPageSelected"
+                        :disabled="!pageRows.length || busy"
+                        @change="togglePage"
+                    />选择本页</label
+                ><span class="text-xs text-slate-400">已选 {{ selectedRows.length }} 张</span
+                ><button
+                    v-if="selected.length"
+                    type="button"
+                    class="oc-text-button"
+                    :disabled="busy"
+                    @click="selected = []"
+                >
+                    清空
+                </button>
+            </div>
+            <div class="flex items-center gap-3">
+                <select v-model="order" class="admin-sort" aria-label="云图排序">
+                    <option value="newest">最新上传优先</option>
+                    <option value="oldest">最早上传优先</option>
+                </select>
+                <div class="flex gap-2">
+                    <button
+                        type="button"
+                        class="oc-icon-button oc-icon-button--small"
+                        :class="view === 'table' ? 'text-teal-700' : ''"
+                        aria-label="表格视图"
+                        :aria-pressed="view === 'table'"
+                        @click="view = 'table'"
+                    >
+                        <NIcon><List /></NIcon></button
+                    ><button
+                        type="button"
+                        class="oc-icon-button oc-icon-button--small"
+                        :class="view === 'grid' ? 'text-teal-700' : ''"
+                        aria-label="网格视图"
+                        :aria-pressed="view === 'grid'"
+                        @click="view = 'grid'"
+                    >
+                        <NIcon><LayoutGrid /></NIcon>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div v-if="selectedRows.length" class="admin-batch-toolbar">
+            <span class="text-sm font-medium">已选择 {{ selectedRows.length }} 张云图</span
+            ><NButton
+                size="small"
+                class="oc-panel-button oc-panel-button--teal"
+                type="default"
+                :disabled="busy"
+                @click="
+                    emit(
+                        'review',
+                        selectedRows.map(row => row.id),
+                        'approved',
+                    )
+                "
+                >批量通过</NButton
+            ><NButton
+                size="small"
+                class="oc-panel-button oc-panel-button--amber"
+                type="default"
+                :disabled="busy"
+                @click="
+                    emit(
+                        'review',
+                        selectedRows.map(row => row.id),
+                        'rejected',
+                    )
+                "
+                >批量拒绝</NButton
+            ><NButton
+                v-if="!review"
+                size="small"
+                class="oc-panel-button oc-panel-button--danger"
+                type="default"
+                :disabled="busy"
+                @click="emit('delete', selectedRows)"
+                >批量删除</NButton
+            >
+        </div>
+        <NDataTable
+            v-if="view === 'table'"
+            class="admin-data-table"
+            :columns="columns"
+            :data="pageRows"
+            :row-key="row => row.id"
+            :checked-row-keys="selected"
+            :scroll-x="992"
+            :bordered="false"
+            :pagination="false"
+            @update:checked-row-keys="keys => (selected = keys.map(String))"
+            ><template #empty
+                ><NEmpty
+                    :description="
+                        review && !clouds.some(row => row.status === 'pending')
+                            ? '审核队列已清空'
+                            : '没有符合筛选条件的云图'
+                    " /></template
+        ></NDataTable>
+        <div v-else-if="pageRows.length" class="admin-cloud-grid">
+            <article
+                v-for="cloud in pageRows"
+                :key="cloud.id"
+                class="border border-slate-200 bg-white"
+            >
+                <button
+                    type="button"
+                    class="block w-full bg-sky-50"
+                    :aria-label="`查看${cloud.cloud_type_name}详情`"
+                    @click="emit('preview', cloud)"
+                >
+                    <img
+                        :src="cloud.thumbnail_url || cloud.image_url"
+                        :alt="cloud.cloud_type_name || '云图'"
+                        class="aspect-[4/3] w-full object-cover"
+                        loading="lazy"
+                    />
+                </button>
+                <div class="space-y-3 p-4">
+                    <div class="flex items-center justify-between gap-2">
+                        <label class="flex min-w-0 items-center gap-2 font-medium"
+                            ><input
+                                type="checkbox"
+                                :checked="selected.includes(cloud.id)"
+                                :disabled="busy"
+                                @change="toggle(cloud.id)"
+                            /><span class="truncate">{{ cloud.cloud_type_name }}</span></label
+                        ><NTag
+                            size="small"
+                            :bordered="false"
+                            :type="statusMeta[cloud.status].type"
+                            >{{ statusMeta[cloud.status].label }}</NTag
+                        >
+                    </div>
+                    <p class="truncate text-xs text-slate-500">
+                        {{ cloud.username }} · {{ visibilityLabel(cloud) }}
+                    </p>
+                    <p class="text-xs text-slate-400">{{ formatDateTime(cloud.created_at) }}</p>
+                    <div class="flex flex-wrap gap-2">
+                        <NButton
+                            type="default"
+                            size="small"
+                            class="oc-panel-button oc-panel-button--teal"
+                            :disabled="busy || cloud.status === 'approved'"
+                            @click="emit('review', [cloud.id], 'approved')"
+                            >通过</NButton
+                        ><NButton
+                            type="default"
+                            size="small"
+                            class="oc-panel-button oc-panel-button--amber"
+                            :disabled="busy || cloud.status === 'rejected'"
+                            @click="emit('review', [cloud.id], 'rejected')"
+                            >拒绝</NButton
+                        ><NButton
+                            v-if="!review"
+                            type="default"
+                            size="small"
+                            class="oc-panel-button oc-panel-button--danger"
+                            :disabled="busy"
+                            @click="emit('delete', [cloud])"
+                            >删除</NButton
+                        >
+                    </div>
+                </div>
+            </article>
+        </div>
+        <NEmpty v-else class="py-12" description="没有符合筛选条件的云图" />
+        <div class="admin-pagination">
+            <p class="text-xs text-slate-500">
+                共 {{ filtered.length }} 张 · 第 {{ page }} /
+                {{ Math.max(1, Math.ceil(filtered.length / pageSize)) }} 页
+            </p>
+            <div class="flex items-center gap-3">
+                <select v-model.number="pageSize" class="admin-sort" aria-label="每页云图数量">
+                    <option :value="20">20 条 / 页</option>
+                    <option :value="50">50 条 / 页</option>
+                    <option :value="100">100 条 / 页</option></select
+                ><NPagination
+                    v-model:page="page"
+                    :page-size="pageSize"
+                    :item-count="filtered.length"
+                    simple
+                />
+            </div>
+        </div>
+    </section>
+</template>
diff --git a/src/features/admin/components/AdminCloudTypesManager.vue b/src/features/admin/components/AdminCloudTypesManager.vue
new file mode 100644
index 0000000..dcb7111
--- /dev/null
+++ b/src/features/admin/components/AdminCloudTypesManager.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import { computed, h, ref, watch } from 'vue'
+import { NButton, NDataTable, NEmpty, NIcon, NInput, type DataTableColumns } from 'naive-ui'
+import { Plus, Search } from '@vicons/tabler'
+import type { CloudTypeResponse } from '@/types/api-contract'
+import type { CloudDetail } from '@/types/view-models'
+
+import { useAdminViewport } from '@/features/admin/composables/useAdminViewport'
+
+const compact = useAdminViewport()
+const props = defineProps<{
+    cloudTypes: CloudTypeResponse[]
+    clouds: CloudDetail[]
+    busy: boolean
+}>()
+const emit = defineEmits<{ edit: [type?: CloudTypeResponse]; delete: [type: CloudTypeResponse] }>()
+const search = ref('')
+const usage = ref('')
+const page = ref(1)
+function resetFilters() {
+    search.value = ''
+    usage.value = ''
+}
+const counts = computed(() => {
+    const result = new Map<number, number>()
+    for (const cloud of props.clouds) {
+        if (cloud.cloud_type_id !== null)
+            result.set(cloud.cloud_type_id, (result.get(cloud.cloud_type_id) || 0) + 1)
+    }
+    return result
+})
+const filtered = computed(() => {
+    const query = search.value.trim().toLocaleLowerCase()
+    return props.cloudTypes.filter(
+        type =>
+            (!query ||
+                [type.name, type.genus, type.description].some(value =>
+                    value?.toLocaleLowerCase().includes(query),
+                )) &&
+            (!usage.value ||
+                (usage.value === 'used'
+                    ? (counts.value.get(type.id) || 0) > 0
+                    : !counts.value.get(type.id))),
+    )
+})
+watch([search, usage], () => {
+    page.value = 1
+})
+watch(filtered, rows => {
+    page.value = Math.min(page.value, Math.max(1, Math.ceil(rows.length / 20)))
+})
+const columns = computed<DataTableColumns<CloudTypeResponse>>(() => [
+    { title: 'ID', key: 'id', width: 70 },
+    {
+        title: '云类型',
+        key: 'name',
+        width: 140,
+        render: type => h('span', { class: 'font-semibold text-slate-900' }, type.name),
+    },
+    { title: '云属', key: 'genus', width: 130, render: type => type.genus || '未设置' },
+    { title: '稀有度', key: 'rarity', width: 90, sorter: 'default' },
+    { title: '辨识说明', key: 'description', width: 280, ellipsis: { tooltip: true } },
+    {
+        title: '关联云图',
+        key: 'usage',
+        width: 100,
+        render: type => `${counts.value.get(type.id) || 0} 张`,
+    },
+    {
+        title: '操作',
+        key: 'actions',
+        width: 150,
+        fixed: compact.value ? undefined : 'right',
+        render: type =>
+            h('div', { class: 'flex gap-3 py-1' }, [
+                h(
+                    NButton,
+                    {
+                        size: 'tiny',
+                        type: 'default',
+                        class: 'oc-panel-button oc-panel-button--neutral',
+                        disabled: props.busy,
+                        onClick: () => emit('edit', type),
+                    },
+                    { default: () => '编辑' },
+                ),
+                h(
+                    NButton,
+                    {
+                        size: 'tiny',
+                        type: 'default',
+                        class: 'oc-panel-button oc-panel-button--danger',
+                        disabled: props.busy || !!counts.value.get(type.id),
+                        title: counts.value.get(type.id) ? '仍有云图引用，无法删除' : '删除云类型',
+                        onClick: () => emit('delete', type),
+                    },
+                    { default: () => '删除' },
+                ),
+            ]),
+    },
+])
+</script>
+
+<template>
+    <section class="oc-panel-card admin-panel">
+        <div class="admin-panel-heading">
+            <div>
+                <h2>
+                    云类型目录
+                    <span class="ml-2 text-sm font-normal text-slate-400"
+                        >{{ cloudTypes.length }} 类</span
+                    >
+                </h2>
+                <p>维护图鉴资料、云属与稀有度，已被云图引用的类型不可删除</p>
+            </div>
+            <NButton
+                type="default"
+                size="small"
+                class="oc-panel-button oc-panel-button--sky"
+                :disabled="busy"
+                @click="emit('edit')"
+                ><template #icon
+                    ><NIcon><Plus /></NIcon></template
+                >新增云类型</NButton
+            >
+        </div>
+        <div class="admin-filters">
+            <div class="admin-filter-search">
+                <label for="type-search" class="oc-field-label">搜索云类型</label
+                ><NInput
+                    v-model:value="search"
+                    clearable
+                    placeholder="名称、云属或辨识说明"
+                    :input-props="{ id: 'type-search' }"
+                    ><template #prefix
+                        ><NIcon><Search /></NIcon></template
+                ></NInput>
+            </div>
+            <div>
+                <label for="type-usage" class="oc-field-label">使用情况</label
+                ><select id="type-usage" v-model="usage" class="oc-field-control">
+                    <option value="">全部类型</option>
+                    <option value="used">已被引用</option>
+                    <option value="unused">尚未使用</option>
+                </select>
+            </div>
+            <div class="self-end">
+                <NButton
+                    type="default"
+                    class="oc-panel-button oc-panel-button--neutral"
+                    @click="resetFilters"
+                    >重置筛选</NButton
+                >
+            </div>
+        </div>
+        <NDataTable
+            class="admin-data-table"
+            :columns="columns"
+            :data="filtered"
+            :row-key="type => type.id"
+            :bordered="false"
+            :scroll-x="960"
+            :pagination="{
+                page,
+                pageSize: 20,
+                simple: true,
+                onChange: (value: number) => (page = value),
+            }"
+            :paginate-single-page="false"
+            ><template #empty><NEmpty description="没有符合筛选条件的云类型" /></template
+        ></NDataTable>
+        <div class="admin-pagination">
+            <span class="text-xs text-slate-500">共 {{ filtered.length }} 个云类型</span>
+        </div>
+    </section>
+</template>
diff --git a/src/features/admin/components/AdminOverview.vue b/src/features/admin/components/AdminOverview.vue
new file mode 100644
index 0000000..10ba907
--- /dev/null
+++ b/src/features/admin/components/AdminOverview.vue
@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { NButton, NIcon, NTag } from 'naive-ui'
+import { ArrowRight, ClipboardCheck, Cloud, Photo, Users } from '@vicons/tabler'
+import type { CloudDetail, AuthUser } from '@/types/view-models'
+import type { CloudTypeResponse } from '@/types/api-contract'
+import { formatDateTime, statusMeta, type AdminSection } from '@/features/admin/models'
+
+const props = defineProps<{
+    clouds: CloudDetail[]
+    users: AuthUser[]
+    cloudTypes: CloudTypeResponse[]
+}>()
+const emit = defineEmits<{ navigate: [section: AdminSection]; preview: [cloud: CloudDetail] }>()
+const pending = computed(() => props.clouds.filter(row => row.status === 'pending'))
+const approved = computed(() => props.clouds.filter(row => row.status === 'approved').length)
+const publicCount = computed(
+    () => props.clouds.filter(row => row.status === 'approved' && !row.is_hidden).length,
+)
+const recent = computed(() =>
+    [...props.clouds]
+        .sort((a, b) => Date.parse(b.created_at) - Date.parse(a.created_at))
+        .slice(0, 5),
+)
+const trend = computed(() => {
+    const now = new Date()
+    return Array.from({ length: 7 }, (_, index) => {
+        const date = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 6 + index)
+        const next = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1)
+        return {
+            label: `${date.getMonth() + 1}/${date.getDate()}`,
+            count: props.clouds.filter(row => {
+                const timestamp = Date.parse(row.created_at)
+                return timestamp >= date.getTime() && timestamp < next.getTime()
+            }).length,
+        }
+    })
+})
+const maxUploads = computed(() => Math.max(1, ...trend.value.map(day => day.count)))
+const stats = computed(() => [
+    {
+        label: '云图总量',
+        value: props.clouds.length,
+        detail: `${publicCount.value} 张公开可见`,
+        icon: Photo,
+        section: 'images' as const,
+        tone: 'sky',
+    },
+    {
+        label: '待审核',
+        value: pending.value.length,
+        detail: pending.value.length ? '需要管理员处理' : '审核队列已清空',
+        icon: ClipboardCheck,
+        section: 'review' as const,
+        tone: 'amber',
+    },
+    {
+        label: '注册用户',
+        value: props.users.length,
+        detail: `${props.users.filter(user => user.role === 'admin').length} 位管理员`,
+        icon: Users,
+        section: 'users' as const,
+        tone: 'teal',
+    },
+    {
+        label: '云类型',
+        value: props.cloudTypes.length,
+        detail: '维护云图分类与图鉴',
+        icon: Cloud,
+        section: 'cloud-types' as const,
+        tone: 'slate',
+    },
+])
+const distribution = computed(() =>
+    (['approved', 'pending', 'rejected'] as const).map(status => ({
+        status,
+        count: props.clouds.filter(row => row.status === status).length,
+        percent: props.clouds.length
+            ? Math.round(
+                  (props.clouds.filter(row => row.status === status).length / props.clouds.length) *
+                      100,
+              )
+            : 0,
+    })),
+)
+const oldestPending = computed(
+    () => [...pending.value].sort((a, b) => Date.parse(a.created_at) - Date.parse(b.created_at))[0],
+)
+</script>
+
+<template>
+    <div class="space-y-6">
+        <div class="admin-stat-grid">
+            <button
+                v-for="stat in stats"
+                :key="stat.label"
+                class="admin-stat oc-panel-card"
+                type="button"
+                @click="emit('navigate', stat.section)"
+            >
+                <div class="flex items-center justify-between gap-3">
+                    <span class="oc-stat-label">{{ stat.label }}</span>
+                    <span class="admin-stat-icon" :class="`admin-stat-icon--${stat.tone}`"
+                        ><NIcon size="20"><component :is="stat.icon" /></NIcon
+                    ></span>
+                </div>
+                <p class="mt-3 text-3xl font-semibold tabular-nums text-slate-900">
+                    {{ stat.value.toLocaleString() }}
+                </p>
+                <div class="mt-3 flex items-center justify-between gap-2 text-xs text-slate-500">
+                    <span>{{ stat.detail }}</span
+                    ><NIcon><ArrowRight /></NIcon>
+                </div>
+            </button>
+        </div>
+
+        <section
+            class="admin-priority oc-panel-card"
+            :class="pending.length ? 'admin-priority--pending' : ''"
+        >
+            <span class="admin-stat-icon admin-stat-icon--amber"
+                ><NIcon size="24"><ClipboardCheck /></NIcon
+            ></span>
+            <div class="min-w-0 flex-1">
+                <h2 class="font-semibold text-slate-900">
+                    {{
+                        pending.length
+                            ? `有 ${pending.length} 张云图等待审核`
+                            : '待办已处理，天空档案持续更新'
+                    }}
+                </h2>
+                <p class="mt-1 text-sm leading-6 text-slate-500">
+                    {{
+                        oldestPending
+                            ? `最早提交于 ${formatDateTime(oldestPending.created_at)}，优先检查图片、云型与拍摄信息。`
+                            : '查看近期上传，或维护用户与云类型资料。'
+                    }}
+                </p>
+            </div>
+            <NButton
+                type="default"
+                class="oc-panel-button oc-panel-button--amber"
+                @click="emit('navigate', pending.length ? 'review' : 'images')"
+                >{{ pending.length ? '进入审核' : '查看云图'
+                }}<template #icon
+                    ><NIcon><ArrowRight /></NIcon></template
+            ></NButton>
+        </section>
+
+        <div class="admin-overview-grid">
+            <section class="oc-panel-card admin-panel">
+                <div class="admin-panel-heading">
+                    <div>
+                        <h2>上传趋势</h2>
+                        <p>最近 7 天 · 按上传时间统计</p>
+                    </div>
+                    <NTag size="small" :bordered="false" type="info"
+                        >今日 {{ trend[6]?.count ?? 0 }} 张</NTag
+                    >
+                </div>
+                <div
+                    class="admin-chart"
+                    role="img"
+                    :aria-label="trend.map(day => `${day.label}：${day.count} 张`).join('；')"
+                >
+                    <div v-for="(day, index) in trend" :key="day.label" class="admin-chart-column">
+                        <span class="text-xs tabular-nums text-slate-500">{{ day.count }}</span>
+                        <div class="admin-chart-track">
+                            <div
+                                class="admin-chart-bar"
+                                :class="index === 6 ? 'admin-chart-bar--today' : ''"
+                                :style="{
+                                    height: `${Math.max(day.count ? 4 : 0, (day.count / maxUploads) * 100)}%`,
+                                }"
+                            ></div>
+                        </div>
+                        <span class="text-xs text-slate-500">{{ day.label }}</span>
+                    </div>
+                </div>
+            </section>
+            <section class="oc-panel-card admin-panel">
+                <div class="admin-panel-heading">
+                    <div>
+                        <h2>内容状态</h2>
+                        <p>当前全部云图的审核分布</p>
+                    </div>
+                </div>
+                <div class="space-y-5 px-5 py-6">
+                    <div v-for="item in distribution" :key="item.status">
+                        <div class="mb-2 flex justify-between text-sm">
+                            <span class="text-slate-600">{{ statusMeta[item.status].label }}</span
+                            ><span class="tabular-nums text-slate-900"
+                                >{{ item.count }}
+                                <span class="ml-2 text-xs text-slate-400"
+                                    >{{ item.percent }}%</span
+                                ></span
+                            >
+                        </div>
+                        <div class="h-2 bg-slate-100">
+                            <div
+                                class="h-full"
+                                :class="{
+                                    'bg-emerald-500': item.status === 'approved',
+                                    'bg-amber-400': item.status === 'pending',
+                                    'bg-rose-400': item.status === 'rejected',
+                                }"
+                                :style="{ width: `${item.percent}%` }"
+                            ></div>
+                        </div>
+                    </div>
+                    <p class="border-t border-slate-100 pt-4 text-xs leading-5 text-slate-500">
+                        已通过 {{ approved }} 张，其中 {{ publicCount }} 张公开展示。
+                    </p>
+                </div>
+            </section>
+        </div>
+        <section class="oc-panel-card admin-panel">
+            <div class="admin-panel-heading">
+                <div>
+                    <h2>最近上传</h2>
+                    <p>最近提交的 5 张云图</p>
+                </div>
+                <button class="oc-text-button" type="button" @click="emit('navigate', 'images')">
+                    全部云图 →
+                </button>
+            </div>
+            <div v-if="!recent.length" class="py-12 text-center text-sm text-slate-500">
+                暂无上传记录
+            </div>
+            <button
+                v-for="cloud in recent"
+                :key="cloud.id"
+                type="button"
+                class="admin-recent-row"
+                @click="emit('preview', cloud)"
+            >
+                <img
+                    :src="cloud.thumbnail_url || cloud.image_url"
+                    :alt="cloud.cloud_type_name || '云图'"
+                    class="h-12 w-16 shrink-0 border border-slate-200 bg-sky-50 object-cover"
+                    loading="lazy"
+                />
+                <div class="min-w-0 flex-1">
+                    <p class="truncate font-medium text-slate-900">
+                        {{ cloud.cloud_type_name || '未知云型' }}
+                    </p>
+                    <p class="mt-1 truncate text-xs text-slate-500">
+                        {{ cloud.username }} · {{ formatDateTime(cloud.created_at) }}
+                    </p>
+                </div>
+                <NTag size="small" :type="statusMeta[cloud.status].type" :bordered="false">{{
+                    statusMeta[cloud.status].label
+                }}</NTag>
+                <NIcon class="hidden text-slate-400 sm:block"><ArrowRight /></NIcon>
+            </button>
+        </section>
+    </div>
+</template>
diff --git a/src/features/admin/components/AdminUsersManager.vue b/src/features/admin/components/AdminUsersManager.vue
new file mode 100644
index 0000000..e7050ee
--- /dev/null
+++ b/src/features/admin/components/AdminUsersManager.vue
@@ -0,0 +1,324 @@
+<script setup lang="ts">
+import { computed, h, ref, watch } from 'vue'
+import {
+    NButton,
+    NDataTable,
+    NEmpty,
+    NIcon,
+    NInput,
+    NModal,
+    NPagination,
+    NTag,
+    type DataTableColumns,
+} from 'naive-ui'
+import { Download, Plus, Search } from '@vicons/tabler'
+import type { AuthUser } from '@/types/view-models'
+import { exportCsv, formatDateTime } from '@/features/admin/models'
+
+import { useAdminViewport } from '@/features/admin/composables/useAdminViewport'
+
+const compact = useAdminViewport()
+const props = defineProps<{ users: AuthUser[]; currentUserId?: string; busy: boolean }>()
+const emit = defineEmits<{
+    create: []
+    role: [user: AuthUser]
+    password: [user: AuthUser]
+    clouds: [user: AuthUser]
+}>()
+const search = ref('')
+const role = ref('')
+const state = ref('')
+const page = ref(1)
+const pageSize = ref(20)
+const detailId = ref<string | null>(null)
+const detail = computed(() => props.users.find(user => user.id === detailId.value) ?? null)
+const filtered = computed(() => {
+    const query = search.value.trim().toLocaleLowerCase()
+    return props.users.filter(
+        user =>
+            (!role.value || user.role === role.value) &&
+            (!state.value || user.is_disabled === (state.value === 'disabled')) &&
+            (!query ||
+                [user.username, user.email, user.id].some(value =>
+                    value.toLocaleLowerCase().includes(query),
+                )),
+    )
+})
+watch([search, role, state, pageSize], () => {
+    page.value = 1
+})
+watch(filtered, rows => {
+    page.value = Math.min(page.value, Math.max(1, Math.ceil(rows.length / pageSize.value)))
+})
+const pageRows = computed(() =>
+    filtered.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value),
+)
+function resetFilters() {
+    search.value = ''
+    role.value = ''
+    state.value = ''
+}
+function viewUploads() {
+    if (detail.value) emit('clouds', detail.value)
+    detailId.value = null
+}
+function exportUsers() {
+    exportCsv(
+        '用户清单',
+        ['ID', '用户名', '邮箱', '角色', '账户状态', '上传数', '获赞数', '注册时间'],
+        filtered.value.map(user => [
+            user.id,
+            user.username,
+            user.email,
+            user.role === 'admin' ? '管理员' : '普通用户',
+            user.is_disabled ? '已停用' : '正常',
+            user.cloud_count,
+            user.received_like_count,
+            user.created_at,
+        ]),
+    )
+}
+function button(label: string, handler: () => void, variant = 'neutral', disabled = false) {
+    return h(
+        NButton,
+        {
+            size: 'tiny',
+            type: 'default',
+            class: `oc-panel-button oc-panel-button--${variant}`,
+            disabled: props.busy || disabled,
+            onClick: handler,
+        },
+        { default: () => label },
+    )
+}
+const columns = computed<DataTableColumns<AuthUser>>(() => [
+    {
+        title: '用户',
+        key: 'username',
+        width: 170,
+        render: user =>
+            h('div', { class: 'flex items-center gap-3' }, [
+                h('span', { class: 'admin-user-avatar' }, user.username.slice(0, 1).toUpperCase()),
+                h('div', { class: 'min-w-0' }, [
+                    h(
+                        'p',
+                        { class: 'truncate font-medium text-slate-900', title: user.username },
+                        user.username,
+                    ),
+                    user.id === props.currentUserId
+                        ? h('span', { class: 'text-xs text-teal-700' }, '当前账户')
+                        : null,
+                ]),
+            ]),
+    },
+    { title: '邮箱', key: 'email', width: 210, ellipsis: { tooltip: true } },
+    {
+        title: '角色',
+        key: 'role',
+        width: 100,
+        render: user =>
+            h(
+                NTag,
+                {
+                    size: 'small',
+                    type: user.role === 'admin' ? 'info' : 'default',
+                    bordered: false,
+                },
+                { default: () => (user.role === 'admin' ? '管理员' : '普通用户') },
+            ),
+    },
+    {
+        title: '状态',
+        key: 'is_disabled',
+        width: 90,
+        render: user =>
+            h(
+                NTag,
+                { size: 'small', type: user.is_disabled ? 'error' : 'success', bordered: false },
+                { default: () => (user.is_disabled ? '已停用' : '正常') },
+            ),
+    },
+    {
+        title: '上传 / 获赞',
+        key: 'cloud_count',
+        width: 115,
+        render: user => `${user.cloud_count} / ${user.received_like_count}`,
+    },
+    {
+        title: '注册时间',
+        key: 'created_at',
+        width: 155,
+        render: user =>
+            h('span', { class: 'text-xs tabular-nums' }, formatDateTime(user.created_at)),
+    },
+    {
+        title: '操作',
+        key: 'actions',
+        width: 250,
+        fixed: compact.value ? undefined : 'right',
+        render: user =>
+            h('div', { class: 'flex flex-wrap gap-2 py-1' }, [
+                button('详情', () => (detailId.value = user.id)),
+                button('重置密码', () => emit('password', user), 'amber'),
+                button(
+                    user.role === 'admin' ? '撤销管理' : '设为管理',
+                    () => emit('role', user),
+                    'neutral',
+                    user.id === props.currentUserId,
+                ),
+            ]),
+    },
+])
+</script>
+
+<template>
+    <section class="oc-panel-card admin-panel">
+        <div class="admin-panel-heading">
+            <div>
+                <h2>
+                    用户账户
+                    <span class="ml-2 text-sm font-normal text-slate-400"
+                        >{{ users.length }} 位</span
+                    >
+                </h2>
+                <p>查找用户、管理权限与登录凭据</p>
+            </div>
+            <div class="flex flex-wrap gap-3">
+                <NButton
+                    type="default"
+                    size="small"
+                    class="oc-panel-button oc-panel-button--neutral"
+                    :disabled="!filtered.length || busy"
+                    @click="exportUsers"
+                    ><template #icon
+                        ><NIcon><Download /></NIcon></template
+                    >导出清单</NButton
+                ><NButton
+                    type="default"
+                    size="small"
+                    class="oc-panel-button oc-panel-button--sky"
+                    :disabled="busy"
+                    @click="emit('create')"
+                    ><template #icon
+                        ><NIcon><Plus /></NIcon></template
+                    >创建用户</NButton
+                >
+            </div>
+        </div>
+        <div class="admin-filters">
+            <div class="admin-filter-search">
+                <label for="user-search" class="oc-field-label">搜索用户</label
+                ><NInput
+                    v-model:value="search"
+                    clearable
+                    placeholder="用户名、邮箱或 ID"
+                    :input-props="{ id: 'user-search' }"
+                    ><template #prefix
+                        ><NIcon><Search /></NIcon></template
+                ></NInput>
+            </div>
+            <div>
+                <label for="user-role" class="oc-field-label">用户角色</label
+                ><select id="user-role" v-model="role" class="oc-field-control">
+                    <option value="">全部角色</option>
+                    <option value="admin">管理员</option>
+                    <option value="user">普通用户</option>
+                </select>
+            </div>
+            <div>
+                <label for="user-state" class="oc-field-label">账户状态</label
+                ><select id="user-state" v-model="state" class="oc-field-control">
+                    <option value="">全部状态</option>
+                    <option value="active">正常</option>
+                    <option value="disabled">已停用</option>
+                </select>
+            </div>
+            <div class="self-end">
+                <NButton
+                    type="default"
+                    class="oc-panel-button oc-panel-button--neutral"
+                    @click="resetFilters"
+                    >重置筛选</NButton
+                >
+            </div>
+        </div>
+        <NDataTable
+            class="admin-data-table"
+            :columns="columns"
+            :data="pageRows"
+            :row-key="user => user.id"
+            :bordered="false"
+            :scroll-x="1190"
+            ><template #empty><NEmpty description="没有符合筛选条件的用户" /></template
+        ></NDataTable>
+        <div class="admin-pagination">
+            <span class="text-xs text-slate-500">共 {{ filtered.length }} 位用户</span>
+            <div class="flex items-center gap-3">
+                <select v-model.number="pageSize" class="admin-sort" aria-label="每页用户数量">
+                    <option :value="20">20 条 / 页</option>
+                    <option :value="50">50 条 / 页</option></select
+                ><NPagination
+                    v-model:page="page"
+                    :page-size="pageSize"
+                    :item-count="filtered.length"
+                    simple
+                />
+            </div>
+        </div>
+    </section>
+    <NModal
+        :show="!!detail"
+        preset="card"
+        title="用户详情"
+        class="admin-form-modal"
+        @update:show="
+            show => {
+                if (!show) detailId = null
+            }
+        "
+    >
+        <template v-if="detail"
+            ><div class="flex items-center gap-3">
+                <span class="admin-user-avatar">{{
+                    detail.username.slice(0, 1).toUpperCase()
+                }}</span>
+                <div class="min-w-0">
+                    <p class="truncate text-lg font-semibold">{{ detail.username }}</p>
+                    <p class="break-all text-sm text-slate-500">{{ detail.email }}</p>
+                </div>
+            </div>
+            <dl class="my-6 grid grid-cols-2 gap-4">
+                <div class="oc-inset-panel">
+                    <dt class="oc-section-label">上传云图</dt>
+                    <dd class="mt-2 text-xl font-semibold">{{ detail.cloud_count }}</dd>
+                </div>
+                <div class="oc-inset-panel">
+                    <dt class="oc-section-label">获得点赞</dt>
+                    <dd class="mt-2 text-xl font-semibold">{{ detail.received_like_count }}</dd>
+                </div>
+                <div>
+                    <dt class="oc-field-label">用户角色</dt>
+                    <dd>{{ detail.role === 'admin' ? '管理员' : '普通用户' }}</dd>
+                </div>
+                <div>
+                    <dt class="oc-field-label">账户状态</dt>
+                    <dd>{{ detail.is_disabled ? '已停用' : '正常' }}</dd>
+                </div>
+                <div class="col-span-2">
+                    <dt class="oc-field-label">用户 ID</dt>
+                    <dd class="break-all text-xs text-slate-500">{{ detail.id }}</dd>
+                </div>
+                <div class="col-span-2">
+                    <dt class="oc-field-label">注册时间</dt>
+                    <dd>{{ formatDateTime(detail.created_at) }}</dd>
+                </div>
+            </dl>
+            <NButton
+                type="default"
+                class="oc-panel-button oc-panel-button--sky"
+                @click="viewUploads"
+                >查看该用户上传</NButton
+            ></template
+        >
+    </NModal>
+</template>
diff --git a/src/features/admin/composables/useAdminData.ts b/src/features/admin/composables/useAdminData.ts
new file mode 100644
index 0000000..3368bfb
--- /dev/null
+++ b/src/features/admin/composables/useAdminData.ts
@@ -0,0 +1,298 @@
+import { computed, ref } from 'vue'
+import { useDialog, useMessage, type ButtonProps } from 'naive-ui'
+import { useAuthStore } from '@/features/auth/stores/auth'
+import { useCloudsStore } from '@/features/clouds/stores/clouds'
+import { useEncyclopediaStore } from '@/features/encyclopedia/stores/encyclopedia'
+import { listCloudTypeRecords } from '@/features/clouds/api'
+import { toCloudType } from '@/lib/api-adapters'
+import {
+    listUsers,
+    listAdminClouds,
+    reviewClouds,
+    deleteAdminCloud,
+    setUserRole,
+    setUserPassword,
+    createUser,
+    createCloudType,
+    updateCloudType,
+    deleteCloudTypeRecord,
+} from '@/features/admin/api'
+import type { CloudDetail, AuthUser } from '@/types/view-models'
+import type { CloudTypeResponse, CreateCloudTypeBody, CreateUserBody } from '@/types/api-contract'
+import type { ReviewStatus } from '@/features/admin/models'
+
+export function useAdminData() {
+    const auth = useAuthStore()
+    const cloudsStore = useCloudsStore()
+    const encyclopediaStore = useEncyclopediaStore()
+    const message = useMessage()
+    const dialog = useDialog()
+    const loading = ref(false)
+    const busy = ref(false)
+    const error = ref('')
+    const loaded = ref(false)
+    const refreshedAt = ref<string | null>(null)
+    const users = ref<AuthUser[]>([])
+    const clouds = ref<CloudDetail[]>([])
+    const cloudTypes = ref<CloudTypeResponse[]>([])
+    const pendingCount = computed(
+        () => clouds.value.filter(item => item.status === 'pending').length,
+    )
+    const errorText = (reason: unknown) =>
+        reason instanceof Error ? reason.message : '操作失败，请稍后重试'
+
+    async function fetchTypes() {
+        cloudTypes.value = await listCloudTypeRecords()
+        const normalized = cloudTypes.value.map(toCloudType)
+        cloudsStore.setCloudTypes(normalized)
+        encyclopediaStore.setCloudTypes(normalized)
+    }
+
+    async function refresh() {
+        if (loading.value || busy.value) return
+        loading.value = true
+        error.value = ''
+        const results = await Promise.allSettled([
+            listUsers().then(rows => {
+                users.value = rows
+            }),
+            listAdminClouds().then(rows => {
+                clouds.value = rows
+            }),
+            fetchTypes(),
+        ])
+        const failed = results.filter(result => result.status === 'rejected')
+        if (failed.length) {
+            error.value = failed.map(result => errorText(result.reason)).join('；')
+        } else {
+            loaded.value = true
+            refreshedAt.value = new Date().toISOString()
+        }
+        loading.value = false
+    }
+
+    async function mutate(action: () => Promise<void>) {
+        if (busy.value || loading.value) return false
+        busy.value = true
+        error.value = ''
+        try {
+            await action()
+            return true
+        } catch (reason) {
+            error.value = errorText(reason)
+            message.error(error.value)
+            return false
+        } finally {
+            busy.value = false
+        }
+    }
+
+    function confirm(
+        title: string,
+        content: string,
+        action: () => Promise<boolean>,
+        danger = false,
+    ) {
+        if (busy.value || loading.value) return
+        const positiveButtonProps: ButtonProps & { class: string } = {
+            type: 'default',
+            class: `oc-panel-button oc-panel-button--${danger ? 'danger' : 'teal'}`,
+        }
+        const negativeButtonProps: ButtonProps & { class: string } = {
+            type: 'default',
+            class: 'oc-panel-button oc-panel-button--neutral',
+        }
+        const instance = dialog.warning({
+            title,
+            content,
+            positiveText: '确认',
+            negativeText: '取消',
+            maskClosable: false,
+            closeOnEsc: false,
+            positiveButtonProps,
+            negativeButtonProps,
+            zIndex: 2000,
+            onPositiveClick: async () => {
+                instance.loading = true
+                try {
+                    return await action()
+                } finally {
+                    instance.loading = false
+                }
+            },
+            onNegativeClick: () => !busy.value,
+            onClose: () => !busy.value,
+        })
+    }
+
+    function review(ids: string[], status: Exclude<ReviewStatus, 'pending'>) {
+        const targets = [...new Set(ids)].filter(id =>
+            clouds.value.some(item => item.id === id && item.status !== status),
+        )
+        if (!targets.length) return
+        confirm(
+            status === 'approved' ? '通过内容审核' : '拒绝内容审核',
+            `确认将 ${targets.length} 张云图设为${status === 'approved' ? '已通过' : '已拒绝'}？${status === 'approved' ? '通过后，未隐藏的云图将公开展示。' : '拒绝后，云图将不再公开展示。'}`,
+            () =>
+                mutate(async () => {
+                    // Apply each completed batch locally so partial failures remain visible.
+                    await reviewClouds(targets, status, batch => {
+                        const completed = new Set(batch)
+                        clouds.value = clouds.value.map(item =>
+                            completed.has(item.id) ? { ...item, status } : item,
+                        )
+                    })
+                    message.success(
+                        `已${status === 'approved' ? '通过' : '拒绝'} ${targets.length} 张云图`,
+                    )
+                }),
+            status === 'rejected',
+        )
+    }
+
+    function removeClouds(items: CloudDetail[]) {
+        if (!items.length) return
+        confirm(
+            '删除云图',
+            `确认永久删除 ${items.length} 张云图及其图片文件？此操作无法撤销。`,
+            () =>
+                mutate(async () => {
+                    let completed = 0
+                    for (const item of items) {
+                        try {
+                            await deleteAdminCloud(item.id)
+                            clouds.value = clouds.value.filter(row => row.id !== item.id)
+                            users.value = users.value.map(user =>
+                                user.id === item.user_id
+                                    ? {
+                                          ...user,
+                                          cloud_count: Math.max(0, user.cloud_count - 1),
+                                          received_like_count: Math.max(
+                                              0,
+                                              user.received_like_count - item.received_like_count,
+                                          ),
+                                      }
+                                    : user,
+                            )
+                            completed++
+                        } catch (reason) {
+                            throw new Error(
+                                `已删除 ${completed} 张，剩余 ${items.length - completed} 张未删除：${errorText(reason)}`,
+                                { cause: reason },
+                            )
+                        }
+                    }
+                    message.success(`已删除 ${completed} 张云图`)
+                }),
+            true,
+        )
+    }
+
+    function changeRole(user: AuthUser) {
+        if (user.id === auth.user?.id) return
+        const role = user.role === 'admin' ? 'user' : 'admin'
+        confirm(
+            '调整用户角色',
+            `确认将「${user.username}」设为${role === 'admin' ? '管理员' : '普通用户'}？该用户的现有登录状态将失效。`,
+            () =>
+                mutate(async () => {
+                    await setUserRole(user.id, role)
+                    users.value = users.value.map(row =>
+                        row.id === user.id ? { ...row, role } : row,
+                    )
+                    message.success('用户角色已更新')
+                }),
+        )
+    }
+
+    function resetPassword(id: string, password: string) {
+        return mutate(async () => {
+            await setUserPassword(id, password)
+            message.success('密码已重置，该用户需要重新登录')
+            if (id === auth.user?.id) {
+                auth.user = null
+                auth.profile = null
+            }
+        })
+    }
+
+    function addUser(body: CreateUserBody) {
+        return mutate(async () => {
+            const result = await createUser(body)
+            if (result.email_sent) message.success('用户已创建，验证邮件已发送')
+            else message.warning('用户已创建，验证邮件发送失败，可在登录页重发')
+            // Creation succeeded: a refresh failure must not invite duplicate submission.
+            try {
+                users.value = await listUsers()
+            } catch {
+                error.value = '用户已创建，列表刷新失败，请点击刷新数据'
+            }
+        })
+    }
+
+    function saveType(id: number | null, body: CreateCloudTypeBody) {
+        return mutate(async () => {
+            if (id === null) await createCloudType(body)
+            else await updateCloudType(id, body)
+            message.success(id === null ? '云类型已创建' : '云类型已更新')
+            try {
+                await fetchTypes()
+                clouds.value = clouds.value.map(item => {
+                    const type = cloudTypes.value.find(type => type.id === item.cloud_type_id)
+                    return type
+                        ? {
+                              ...item,
+                              cloud_type_name: type.name,
+                              cloud_type_rarity: type.rarity,
+                              cloud_type: { id: type.id, name: type.name, rarity: type.rarity },
+                          }
+                        : item
+                })
+            } catch {
+                error.value = '云类型已保存，列表刷新失败，请点击刷新数据'
+            }
+        })
+    }
+
+    function removeType(type: CloudTypeResponse) {
+        const count = clouds.value.filter(item => item.cloud_type_id === type.id).length
+        if (count) {
+            message.warning(`该类型仍被 ${count} 张云图引用，无法删除`)
+            return
+        }
+        confirm(
+            '删除云类型',
+            `确认删除「${type.name}」？此操作无法撤销。`,
+            () =>
+                mutate(async () => {
+                    await deleteCloudTypeRecord(type.id)
+                    cloudTypes.value = cloudTypes.value.filter(row => row.id !== type.id)
+                    const normalized = cloudTypes.value.map(toCloudType)
+                    cloudsStore.setCloudTypes(normalized)
+                    encyclopediaStore.setCloudTypes(normalized)
+                    message.success('云类型已删除')
+                }),
+            true,
+        )
+    }
+
+    return {
+        loading,
+        busy,
+        loaded,
+        error,
+        refreshedAt,
+        users,
+        clouds,
+        cloudTypes,
+        pendingCount,
+        refresh,
+        review,
+        removeClouds,
+        changeRole,
+        resetPassword,
+        addUser,
+        saveType,
+        removeType,
+    }
+}
diff --git a/src/features/admin/composables/useAdminViewport.ts b/src/features/admin/composables/useAdminViewport.ts
new file mode 100644
index 0000000..dd418c3
--- /dev/null
+++ b/src/features/admin/composables/useAdminViewport.ts
@@ -0,0 +1,12 @@
+import { onUnmounted, ref } from 'vue'
+
+export function useAdminViewport() {
+    const query = window.matchMedia('(max-width: 639px)')
+    const compact = ref(query.matches)
+    const update = (event: MediaQueryListEvent) => {
+        compact.value = event.matches
+    }
+    query.addEventListener('change', update)
+    onUnmounted(() => query.removeEventListener('change', update))
+    return compact
+}
diff --git a/src/features/admin/models.ts b/src/features/admin/models.ts
new file mode 100644
index 0000000..ae9f41f
--- /dev/null
+++ b/src/features/admin/models.ts
@@ -0,0 +1,50 @@
+import type { CloudDetail } from '@/types/view-models'
+
+export type AdminSection = 'dashboard' | 'review' | 'images' | 'users' | 'cloud-types'
+export type ReviewStatus = CloudDetail['status']
+
+export const statusMeta = {
+    pending: { label: '待审核', type: 'warning' },
+    approved: { label: '已通过', type: 'success' },
+    rejected: { label: '已拒绝', type: 'error' },
+} as const
+
+export function formatDateTime(value: string | null) {
+    if (!value) return '未记录'
+    const date = new Date(value)
+    return Number.isNaN(date.getTime())
+        ? '未记录'
+        : date.toLocaleString('zh-CN', {
+              year: 'numeric',
+              month: '2-digit',
+              day: '2-digit',
+              hour: '2-digit',
+              minute: '2-digit',
+          })
+}
+
+export function visibilityLabel(cloud: Pick<CloudDetail, 'status' | 'is_hidden'>) {
+    if (cloud.is_hidden) return '用户隐藏'
+    return cloud.status === 'approved' ? '公开可见' : '尚未公开'
+}
+
+export function serializeCsv(headers: string[], rows: unknown[][]) {
+    const escape = (value: unknown) => {
+        let text = String(value ?? '')
+        // Spreadsheet programs interpret these prefixes as formulas, even inside quoted cells.
+        if (/^[\s]*[=+@-]/.test(text) || /^[\t\r\n]/.test(text)) text = `'${text}`
+        return `"${text.replaceAll('"', '""')}"`
+    }
+    return '\uFEFF' + [headers, ...rows].map(row => row.map(escape).join(',')).join('\r\n')
+}
+
+export function exportCsv(name: string, headers: string[], rows: unknown[][]) {
+    const url = URL.createObjectURL(
+        new Blob([serializeCsv(headers, rows)], { type: 'text/csv;charset=utf-8;' }),
+    )
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${name}-${new Date().toISOString().slice(0, 10)}.csv`
+    link.click()
+    setTimeout(() => URL.revokeObjectURL(url), 1000)
+}
diff --git a/src/features/admin/views/AdminView.vue b/src/features/admin/views/AdminView.vue
index 88445fb..f191ace 100644
--- a/src/features/admin/views/AdminView.vue
+++ b/src/features/admin/views/AdminView.vue
@@ -1,2338 +1,859 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch, type Component } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import {
     NAlert,
     NButton,
-    NEmpty,
+    NDrawer,
+    NDrawerContent,
+    NDropdown,
     NIcon,
     NInput,
-    NPopover,
+    NModal,
     NSkeleton,
-    NTag,
     useMessage,
 } from 'naive-ui'
 import {
-    Check,
-    ChevronUp,
+    ArrowLeft,
+    ChevronRight,
     ClipboardCheck,
     Cloud,
     Dashboard,
-    Edit,
-    Home,
-    Key,
     LayoutSidebarLeftCollapse,
     LayoutSidebarLeftExpand,
-    Logout,
+    Menu2,
     Photo,
-    Plus,
     Refresh,
-    Settings,
     Shield,
-    Trash,
-    UserCircle,
     Users,
-    X,
 } from '@vicons/tabler'
-import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/features/auth/stores/auth'
+import { useAdminData } from '@/features/admin/composables/useAdminData'
+import AdminOverview from '@/features/admin/components/AdminOverview.vue'
+import AdminCloudManager from '@/features/admin/components/AdminCloudManager.vue'
+import AdminUsersManager from '@/features/admin/components/AdminUsersManager.vue'
+import AdminCloudTypesManager from '@/features/admin/components/AdminCloudTypesManager.vue'
 import ImageDetailModal from '@/features/clouds/components/ImageDetailModal.vue'
 import MiniLocationMap from '@/shared/map/components/MiniLocationMap.vue'
-import { toCloudType } from '@/lib/api-adapters'
-import { listCloudTypeRecords } from '@/features/clouds/api'
 import {
-    listUsers,
-    listAdminClouds,
-    reviewClouds,
-    deleteAdminCloud,
-    setUserRole,
-    setUserPassword,
-    createCloudType,
-    updateCloudType,
-    deleteCloudTypeRecord,
-} from '@/features/admin/api'
-import type { CloudTypeResponse } from '@/types/api-contract'
-import { useAuthStore } from '@/features/auth/stores/auth'
-import { useCloudsStore } from '@/features/clouds/stores/clouds'
-import { useEncyclopediaStore } from '@/features/encyclopedia/stores/encyclopedia'
+    formatDateTime,
+    statusMeta,
+    visibilityLabel,
+    type AdminSection,
+} from '@/features/admin/models'
 import type { CloudDetail, AuthUser } from '@/types/view-models'
+import type { CloudTypeResponse, CreateUserBody } from '@/types/api-contract'
+import '@/features/admin/admin.css'
 
-type AdminTab = 'dashboard' | 'review' | 'users' | 'cloud-types' | 'images'
-type CloudStatus = 'pending' | 'approved' | 'rejected'
-type ImageFilter = 'all' | CloudStatus
-
-interface CloudTypeForm {
-    name: string
-    genus: string
-    iconId: string
-    rarity: string
-    description: string
-}
-
-interface AdminCloud {
-    id: string
-    user_id: string
-    cloud_type_id: number | null
-    image_url: string
-    thumbnail_url: string | null
-    latitude: number | null
-    longitude: number | null
-    description: string | null
-    captured_at: string | null
-    created_at: string
-    status: CloudStatus
-    is_hidden: boolean
-    cloudTypeName: string
-    cloudTypeRarity: number
-    username: string
-}
-
-interface DashboardStats {
-    users: number
-    images: number
-    todayUploads: number
-    pending: number
-    approved: number
-    rejected: number
-    hidden: number
-}
-
-const authStore = useAuthStore()
-const cloudsStore = useCloudsStore()
-const encyclopediaStore = useEncyclopediaStore()
-const message = useMessage()
+const auth = useAuthStore()
+const route = useRoute()
 const router = useRouter()
-
-const activeTab = ref<AdminTab>('dashboard')
-const sidebarCollapsed = ref(false)
-const accountMenuOpen = ref(false)
-const loading = ref(true)
-const actionLoading = ref(false)
-const loadError = ref('')
-const dashboardStats = ref<DashboardStats>({
-    users: 0,
-    images: 0,
-    todayUploads: 0,
-    pending: 0,
-    approved: 0,
-    rejected: 0,
-    hidden: 0,
-})
-const users = ref<AuthUser[]>([])
-const images = ref<AdminCloud[]>([])
-const cloudTypes = ref<CloudTypeResponse[]>([])
-const selectedReviewIds = ref<Set<string>>(new Set())
-const activeReviewId = ref<string | null>(null)
-const selectedImageIds = ref<Set<string>>(new Set())
-const imageFilter = ref<ImageFilter>('all')
-const selectedImage = ref<AdminCloud | null>(null)
-const passwordTarget = ref<AuthUser | null>(null)
-const newPassword = ref('')
-const confirmPassword = ref('')
-const passwordError = ref('')
-const cloudTypeEditorOpen = ref(false)
-const editingCloudType = ref<CloudTypeResponse | null>(null)
-const cloudTypeForm = ref<CloudTypeForm>(emptyCloudTypeForm())
-const cloudTypeFormError = ref('')
-
-const statusMeta = {
-    pending: { label: '待审核', chip: 'border-amber-200 bg-amber-100 text-amber-700' },
-    approved: { label: '已通过', chip: 'border-emerald-200 bg-emerald-100 text-emerald-700' },
-    rejected: { label: '已拒绝', chip: 'border-rose-200 bg-rose-100 text-rose-700' },
-} satisfies Record<CloudStatus, { label: string; chip: string }>
-
+const message = useMessage()
+const {
+    loading,
+    busy,
+    loaded,
+    error,
+    refreshedAt,
+    users,
+    clouds,
+    cloudTypes,
+    pendingCount,
+    refresh,
+    review,
+    removeClouds,
+    changeRole,
+    resetPassword,
+    addUser,
+    saveType,
+    removeType,
+} = useAdminData()
+const collapsed = ref(false)
+const mobileNav = ref(false)
 const tabs = [
-    { key: 'dashboard', label: '数据看板', description: '运行概览与内容分布', icon: Dashboard },
-    { key: 'review', label: '内容审核', description: '处理待审核上传', icon: ClipboardCheck },
-    { key: 'users', label: '用户管理', description: '角色与登录密码', icon: Users },
-    { key: 'cloud-types', label: '云类型管理', description: '分类资料与稀有度', icon: Cloud },
-    { key: 'images', label: '图片管理', description: '内容审核与删除', icon: Photo },
-] satisfies Array<{ key: AdminTab; label: string; description: string; icon: Component }>
-
-const pendingImages = computed(() => images.value.filter(item => item.status === 'pending'))
-const activeReviewImage = computed(
-    () =>
-        pendingImages.value.find(item => item.id === activeReviewId.value) ??
-        pendingImages.value[0] ??
-        null,
-)
-const activeReviewPosition = computed(() => {
-    if (!activeReviewImage.value) return 0
-    return pendingImages.value.findIndex(item => item.id === activeReviewImage.value?.id) + 1
-})
-const activeTabMeta = computed(() => tabs.find(tab => tab.key === activeTab.value) ?? tabs[0])
-const filteredImages = computed(() => {
-    if (imageFilter.value === 'all') return images.value
-    return images.value.filter(item => item.status === imageFilter.value)
-})
-const selectedManagedCount = computed(() => selectedImageIds.value.size)
-const displayUsername = computed(
-    () => authStore.profile?.username || authStore.user?.email || '管理员',
-)
-const userEmail = computed(() => authStore.user?.email || '未绑定邮箱')
-const displayInitial = computed(() => displayUsername.value.slice(0, 1).toUpperCase())
-
-watch(imageFilter, () => {
-    setSelectedImageIds([])
-})
-
-const cloudTypeStats = computed(() => {
-    const counts = new Map<string, number>()
-    for (const item of images.value) {
-        counts.set(item.cloudTypeName, (counts.get(item.cloudTypeName) || 0) + 1)
-    }
-    return Array.from(counts.entries())
-        .map(([name, count]) => ({ name, count }))
-        .sort((a, b) => b.count - a.count)
-        .slice(0, 8)
-})
-
-const reviewedCount = computed(() => dashboardStats.value.approved + dashboardStats.value.rejected)
-const approvalRate = computed(() =>
-    getPercentage(dashboardStats.value.approved, reviewedCount.value),
-)
-const publicImageCount = computed(
-    () => images.value.filter(item => item.status === 'approved' && !item.is_hidden).length,
-)
-const recentImages = computed(() => images.value.slice(0, 5))
-const cloudTypeMaxCount = computed(() =>
-    Math.max(1, ...cloudTypeStats.value.map(item => item.count)),
-)
-const reviewStatusStats = computed(() => [
     {
-        key: 'approved',
-        label: '已通过',
-        count: dashboardStats.value.approved,
-        bar: 'bg-emerald-500',
-        text: 'text-emerald-700',
+        key: 'dashboard',
+        label: '工作台概览',
+        description: '查看运营数据与待办事项',
+        icon: Dashboard,
+        group: '工作台',
     },
     {
-        key: 'pending',
-        label: '待审核',
-        count: dashboardStats.value.pending,
-        bar: 'bg-amber-400',
-        text: 'text-amber-700',
+        key: 'review',
+        label: '内容审核',
+        description: '核对上传内容，处理待审核云图',
+        icon: ClipboardCheck,
+        group: '内容管理',
     },
     {
-        key: 'rejected',
-        label: '已拒绝',
-        count: dashboardStats.value.rejected,
-        bar: 'bg-rose-400',
-        text: 'text-rose-700',
+        key: 'images',
+        label: '云图管理',
+        description: '检索、审核与管理平台云图',
+        icon: Photo,
+        group: '内容管理',
     },
-])
+    {
+        key: 'cloud-types',
+        label: '云类型管理',
+        description: '维护云类型目录与图鉴资料',
+        icon: Cloud,
+        group: '内容管理',
+    },
+    {
+        key: 'users',
+        label: '用户管理',
+        description: '维护用户账户、角色与登录凭据',
+        icon: Users,
+        group: '账户管理',
+    },
+] as const
+const section = computed<AdminSection>(
+    () => tabs.find(tab => tab.key === route.query.section)?.key || 'dashboard',
+)
+const activeMeta = computed(() => tabs.find(tab => tab.key === section.value) || tabs[0])
+const displayName = computed(() => auth.profile?.username || auth.user?.email || '管理员')
+const ownerFilter = computed(() => (typeof route.query.owner === 'string' ? route.query.owner : ''))
+const selectedId = ref<string | null>(null)
+const selectedImage = computed(
+    () => clouds.value.find(item => item.id === selectedId.value) ?? null,
+)
+const disabled = computed(() => busy.value || loading.value || !loaded.value)
 
-const selectedReviewCount = computed(() => selectedReviewIds.value.size)
-
-function toAdminCloud(row: CloudDetail): AdminCloud {
-    return {
-        id: row.id,
-        user_id: row.user_id,
-        cloud_type_id: row.cloud_type_id,
-        image_url: row.image_url,
-        thumbnail_url: row.thumbnail_url,
-        latitude: row.latitude,
-        longitude: row.longitude,
-        description: row.description,
-        captured_at: row.captured_at,
-        created_at: row.created_at,
-        status: row.status,
-        is_hidden: row.is_hidden,
-        cloudTypeName: row.cloud_type_name || '未知云型',
-        cloudTypeRarity: row.cloud_type_rarity ?? 0,
-        username: row.username || '匿名用户',
-    }
+function navigate(target: AdminSection, owner?: string) {
+    mobileNav.value = false
+    void router.push({ path: '/admin', query: { section: target, ...(owner ? { owner } : {}) } })
 }
-
-function formatDateTime(iso: string | null) {
-    if (!iso) return '未知时间'
-    const compatibleIso = (iso.includes('T') ? iso : iso.replace(' ', 'T'))
-        .replace(/\.(\d{3})\d+/, '.$1')
-        .replace(/([+-]\d{2})$/, '$1:00')
-    const date = new Date(compatibleIso)
-    if (Number.isNaN(date.getTime())) return '未知时间'
-
-    return date.toLocaleString('zh-CN', {
-        year: 'numeric',
-        month: 'numeric',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-    })
+function preview(cloud: CloudDetail) {
+    selectedId.value = cloud.id
 }
-
-function formatCoordinate(value: number | null) {
-    return value === null ? '未记录' : value.toFixed(2)
-}
-
-function getPercentage(value: number, total: number) {
-    if (!total) return 0
-    return Math.round((value / total) * 100)
-}
-
-function getErrorMessage(error: unknown, fallback: string) {
-    return error instanceof Error ? error.message : fallback
-}
-
-function syncDashboardStats() {
-    const now = new Date()
-    const isToday = (value: string) => {
-        const date = new Date(value)
-        return (
-            date.getFullYear() === now.getFullYear() &&
-            date.getMonth() === now.getMonth() &&
-            date.getDate() === now.getDate()
-        )
-    }
-
-    dashboardStats.value = {
-        users: users.value.length,
-        images: images.value.length,
-        todayUploads: images.value.filter(item => isToday(item.created_at)).length,
-        pending: images.value.filter(item => item.status === 'pending').length,
-        approved: images.value.filter(item => item.status === 'approved').length,
-        rejected: images.value.filter(item => item.status === 'rejected').length,
-        hidden: images.value.filter(item => item.is_hidden).length,
-    }
-}
-
-async function fetchUsers() {
-    const rows = await listUsers()
-    users.value = rows
-}
-
-async function fetchImages() {
-    images.value = (await listAdminClouds()).map(toAdminCloud)
-    selectedReviewIds.value = new Set(
-        [...selectedReviewIds.value].filter(id => images.value.some(item => item.id === id)),
-    )
-    selectedImageIds.value = new Set(
-        [...selectedImageIds.value].filter(id => images.value.some(item => item.id === id)),
-    )
-}
-
-async function fetchCloudTypes() {
-    const rows = await listCloudTypeRecords()
-    cloudTypes.value = rows
-
-    const normalized = rows.map(toCloudType)
-    cloudsStore.setCloudTypes(normalized)
-    encyclopediaStore.setCloudTypes(normalized)
-}
-
-async function loadAdminData() {
-    loading.value = true
-    loadError.value = ''
-
-    try {
-        await Promise.all([fetchUsers(), fetchImages(), fetchCloudTypes()])
-        syncDashboardStats()
-    } catch (error) {
-        loadError.value = error instanceof Error ? error.message : '管理后台加载失败'
-    } finally {
-        loading.value = false
-    }
-}
-
-function setSelectedReviewIds(ids: Iterable<string>) {
-    selectedReviewIds.value = new Set(ids)
-}
-
-function toggleReviewSelection(cloudId: string) {
-    const next = new Set(selectedReviewIds.value)
-    if (next.has(cloudId)) {
-        next.delete(cloudId)
-    } else {
-        next.add(cloudId)
-    }
-    setSelectedReviewIds(next)
-}
-
-function toggleAllPendingSelection() {
-    if (selectedReviewIds.value.size === pendingImages.value.length) {
-        setSelectedReviewIds([])
+async function accountAction(key: string) {
+    if (key === 'settings') {
+        await router.push('/profile/settings')
         return
     }
-    setSelectedReviewIds(pendingImages.value.map(item => item.id))
-}
-
-function setSelectedImageIds(ids: Iterable<string>) {
-    selectedImageIds.value = new Set(ids)
-}
-
-function toggleImageSelection(cloudId: string) {
-    const next = new Set(selectedImageIds.value)
-    if (next.has(cloudId)) {
-        next.delete(cloudId)
-    } else {
-        next.add(cloudId)
-    }
-    setSelectedImageIds(next)
-}
-
-function toggleAllFilteredImageSelection() {
-    if (selectedImageIds.value.size === filteredImages.value.length) {
-        setSelectedImageIds([])
+    if (key === 'profile') {
+        await router.push('/profile')
         return
     }
-    setSelectedImageIds(filteredImages.value.map(item => item.id))
-}
-
-async function updateCloudStatus(ids: string[], status: Exclude<CloudStatus, 'pending'>) {
-    if (!ids.length) return
-
-    actionLoading.value = true
-    loadError.value = ''
-
     try {
-        await reviewClouds(ids, status)
-
-        await fetchImages()
-        syncDashboardStats()
-        setSelectedReviewIds([...selectedReviewIds.value].filter(id => !ids.includes(id)))
-        setSelectedImageIds([...selectedImageIds.value].filter(id => !ids.includes(id)))
-        message.success('审核操作已完成，列表已刷新')
-    } catch (error) {
-        const text = getErrorMessage(error, '审核操作失败')
-        loadError.value = text
-        message.error(text)
-    } finally {
-        actionLoading.value = false
+        await auth.logout()
+        await router.push('/login')
+    } catch (reason) {
+        message.error(reason instanceof Error ? reason.message : '退出登录失败')
     }
 }
 
-async function deleteImages(clouds: AdminCloud[]) {
-    if (!clouds.length) return
-
-    const confirmed = window.confirm(
-        clouds.length === 1
-            ? `确定删除 ${clouds[0].cloudTypeName} 这张图片吗？删除后无法在页面中恢复。`
-            : `确定删除选中的 ${clouds.length} 张图片吗？删除后无法在页面中恢复。`,
-    )
-    if (!confirmed) return
-
-    actionLoading.value = true
-    loadError.value = ''
-
-    try {
-        const deletedIds: string[] = []
-        let firstError = ''
-
-        for (const cloud of clouds) {
-            try {
-                await deleteAdminCloud(cloud.id)
-                deletedIds.push(cloud.id)
-            } catch (error) {
-                firstError ||= getErrorMessage(error, '图片删除失败')
-            }
-        }
-
-        await fetchImages()
-        syncDashboardStats()
-        if (selectedImage.value && deletedIds.includes(selectedImage.value.id)) {
-            selectedImage.value = null
-        }
-        setSelectedReviewIds([...selectedReviewIds.value].filter(id => !deletedIds.includes(id)))
-        setSelectedImageIds([...selectedImageIds.value].filter(id => !deletedIds.includes(id)))
-
-        if (deletedIds.length === clouds.length) {
-            message.success(clouds.length === 1 ? '图片已删除' : `已删除 ${clouds.length} 张图片`)
-        } else {
-            const text = `已删除 ${deletedIds.length} 张，${clouds.length - deletedIds.length} 张失败${firstError ? `：${firstError}` : ''}`
-            loadError.value = text
-            message.error(text)
-        }
-    } catch (error) {
-        const text = getErrorMessage(error, '图片删除失败')
-        loadError.value = text
-        message.error(text)
-    } finally {
-        actionLoading.value = false
-    }
-}
-
-async function deleteImage(cloud: AdminCloud) {
-    await deleteImages([cloud])
-}
-
-async function updateUserRole(user: AuthUser, role: AuthUser['role']) {
-    if (user.id === authStore.user?.id && role !== 'admin') {
-        message.warning('不能移除自己的管理员权限')
-        return
-    }
-
-    actionLoading.value = true
-    loadError.value = ''
-
-    try {
-        await setUserRole(user.id, role)
-        users.value = users.value.map(item => (item.id === user.id ? { ...item, role } : item))
-        message.success('用户角色已更新；该用户需要重新登录')
-    } catch (error) {
-        const text = getErrorMessage(error, '用户角色更新失败')
-        loadError.value = text
-        message.error(text)
-    } finally {
-        actionLoading.value = false
-    }
-}
-
-function openPasswordReset(user: AuthUser) {
-    passwordTarget.value = user
-    newPassword.value = ''
-    confirmPassword.value = ''
+const passwordUser = ref<AuthUser | null>(null)
+const password = ref('')
+const passwordConfirm = ref('')
+const passwordError = ref('')
+function openPassword(user: AuthUser) {
+    passwordUser.value = user
+    password.value = ''
+    passwordConfirm.value = ''
     passwordError.value = ''
 }
-
-function closePasswordReset() {
-    if (actionLoading.value) return
-    passwordTarget.value = null
-}
-
-async function resetUserPassword() {
-    const user = passwordTarget.value
-    if (!user) return
-
+async function submitPassword() {
     passwordError.value = ''
-    if (newPassword.value.length < 8) {
-        passwordError.value = '新密码至少需要 8 位。'
+    if (password.value.length < 8) {
+        passwordError.value = '密码至少需要 8 个字符'
         return
     }
-    if (newPassword.value !== confirmPassword.value) {
-        passwordError.value = '两次输入的密码不一致。'
+    if (password.value !== passwordConfirm.value) {
+        passwordError.value = '两次输入的密码不一致'
         return
     }
-
-    actionLoading.value = true
-    try {
-        await setUserPassword(user.id, newPassword.value)
-        passwordTarget.value = null
-        message.success('密码已重置；该用户需要重新登录')
-    } catch (error) {
-        passwordError.value = getErrorMessage(error, '密码重置失败')
-    } finally {
-        actionLoading.value = false
+    const resettingSelf = passwordUser.value?.id === auth.user?.id
+    if (passwordUser.value && (await resetPassword(passwordUser.value.id, password.value))) {
+        passwordUser.value = null
+        password.value = ''
+        passwordConfirm.value = ''
+        if (resettingSelf) await router.replace('/login')
+    } else {
+        passwordError.value = error.value
     }
 }
 
-function emptyCloudTypeForm(): CloudTypeForm {
-    return {
-        name: '',
-        genus: '',
-        iconId: '',
-        rarity: '1',
-        description: '',
+const createUserOpen = ref(false)
+const userForm = ref<CreateUserBody>({ username: '', email: '', password: '', role: 'user' })
+const userFormError = ref('')
+function openCreateUser() {
+    userForm.value = { username: '', email: '', password: '', role: 'user' }
+    userFormError.value = ''
+    createUserOpen.value = true
+}
+async function submitUser() {
+    userFormError.value = ''
+    const body = {
+        ...userForm.value,
+        username: userForm.value.username.trim(),
+        email: userForm.value.email.trim(),
+    }
+    if (!body.username || body.username.length > 16) {
+        userFormError.value = '用户名需要 1–16 个字符'
+        return
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(body.email)) {
+        userFormError.value = '请输入有效的邮箱地址'
+        return
+    }
+    if (body.password.length < 8) {
+        userFormError.value = '密码至少需要 8 个字符'
+        return
+    }
+    if (await addUser(body)) {
+        createUserOpen.value = false
+        userForm.value.password = ''
+    } else {
+        userFormError.value = error.value
     }
 }
 
-function openCloudTypeEditor(cloudType?: CloudTypeResponse) {
-    editingCloudType.value = cloudType ?? null
-    cloudTypeForm.value = cloudType
-        ? {
-              name: cloudType.name,
-              genus: cloudType.genus ?? '',
-              iconId: cloudType.icon_id ?? '',
-              rarity: String(cloudType.rarity),
-              description: cloudType.description ?? '',
-          }
-        : emptyCloudTypeForm()
-    cloudTypeFormError.value = ''
-    cloudTypeEditorOpen.value = true
+const typeOpen = ref(false)
+const editingTypeId = ref<number | null>(null)
+const typeForm = ref({ name: '', genus: '', iconId: '', rarity: '1', description: '' })
+const typeFormError = ref('')
+function openType(type?: CloudTypeResponse) {
+    editingTypeId.value = type?.id ?? null
+    typeForm.value = {
+        name: type?.name || '',
+        genus: type?.genus || '',
+        iconId: type?.icon_id || '',
+        rarity: String(type?.rarity ?? 1),
+        description: type?.description || '',
+    }
+    typeFormError.value = ''
+    typeOpen.value = true
 }
-
-function closeCloudTypeEditor() {
-    if (actionLoading.value) return
-    cloudTypeEditorOpen.value = false
-    editingCloudType.value = null
-    cloudTypeFormError.value = ''
-}
-
-function cloudTypePayload() {
-    const name = cloudTypeForm.value.name.trim()
-    const genus = cloudTypeForm.value.genus.trim()
-    const iconId = cloudTypeForm.value.iconId.trim()
-    const description = cloudTypeForm.value.description
-    const rarity = Number(cloudTypeForm.value.rarity)
-
+async function submitType() {
+    typeFormError.value = ''
+    const name = typeForm.value.name.trim()
+    const rarity = Number(typeForm.value.rarity)
+    const iconId = typeForm.value.iconId.trim()
     if (!name) {
-        cloudTypeFormError.value = '请输入云类型名称。'
-        return null
+        typeFormError.value = '请输入云类型名称'
+        return
     }
-    if (!Number.isInteger(rarity)) {
-        cloudTypeFormError.value = '稀有度必须是整数。'
-        return null
+    if (!typeForm.value.rarity.trim() || !Number.isInteger(rarity)) {
+        typeFormError.value = '稀有度必须是整数'
+        return
     }
-    if (description.length > 128) {
-        cloudTypeFormError.value = '描述最多可填写 128 个字符。'
-        return null
+    if (typeForm.value.description.length > 128) {
+        typeFormError.value = '描述最多 128 个字符'
+        return
     }
     if (iconId && !/^[0-9a-f]{8}(?:-[0-9a-f]{4}){3}-[0-9a-f]{12}$/i.test(iconId)) {
-        cloudTypeFormError.value = '图标 ID 必须是有效的 UUID。'
-        return null
-    }
-
-    return {
-        name,
-        genus: genus || null,
-        icon_id: iconId || null,
-        rarity,
-        description,
-    }
-}
-
-async function saveCloudType() {
-    cloudTypeFormError.value = ''
-    const payload = cloudTypePayload()
-    if (!payload) return
-
-    actionLoading.value = true
-    loadError.value = ''
-    try {
-        if (editingCloudType.value) {
-            await updateCloudType(editingCloudType.value.id, payload)
-            message.success('云类型已更新')
-        } else {
-            await createCloudType(payload)
-            message.success('云类型已添加')
-        }
-
-        await fetchCloudTypes()
-        cloudTypeEditorOpen.value = false
-        editingCloudType.value = null
-    } catch (error) {
-        cloudTypeFormError.value = getErrorMessage(
-            error,
-            editingCloudType.value ? '云类型更新失败' : '云类型添加失败',
-        )
-    } finally {
-        actionLoading.value = false
-    }
-}
-
-function cloudTypeUsageCount(cloudTypeId: number) {
-    return images.value.filter(image => image.cloud_type_id === cloudTypeId).length
-}
-
-async function deleteCloudType(cloudType: CloudTypeResponse) {
-    const usageCount = cloudTypeUsageCount(cloudType.id)
-    if (usageCount > 0) {
-        message.warning(`“${cloudType.name}”仍被 ${usageCount} 张云图使用，无法删除`)
+        typeFormError.value = '图标 ID 必须是有效的 UUID'
         return
     }
+    if (
+        await saveType(editingTypeId.value, {
+            name,
+            rarity,
+            genus: typeForm.value.genus.trim() || null,
+            icon_id: iconId || null,
+            description: typeForm.value.description,
+        })
+    )
+        typeOpen.value = false
+    else typeFormError.value = error.value
+}
 
-    if (!window.confirm(`确定删除云类型“${cloudType.name}”吗？删除后无法在页面中恢复。`)) return
-
-    actionLoading.value = true
-    loadError.value = ''
-    try {
-        await deleteCloudTypeRecord(cloudType.id)
-        await fetchCloudTypes()
-        message.success('云类型已删除')
-    } catch (error) {
-        const text = getErrorMessage(error, '云类型删除失败')
-        loadError.value = text
-        message.error(text)
-    } finally {
-        actionLoading.value = false
+function closeCreateUser() {
+    if (!busy.value) {
+        createUserOpen.value = false
+        userForm.value.password = ''
     }
 }
-
-function toggleSidebar() {
-    accountMenuOpen.value = false
-    sidebarCollapsed.value = !sidebarCollapsed.value
-}
-
-async function handleLogout() {
-    accountMenuOpen.value = false
-    try {
-        await authStore.logout()
-        await router.push('/')
-    } catch (error) {
-        message.error(error instanceof Error ? error.message : '退出登录失败，请稍后重试。')
+function closePassword() {
+    if (!busy.value) {
+        passwordUser.value = null
+        password.value = ''
+        passwordConfirm.value = ''
     }
 }
-
-onMounted(loadAdminData)
+onMounted(refresh)
 </script>
 
 <template>
-    <div class="min-h-screen bg-[linear-gradient(180deg,#f8fafc_0%,#eef6ff_55%,#f8fafc_100%)]">
-        <div
-            class="min-h-screen w-full transition-[grid-template-columns] duration-200 ease-out lg:grid"
-            :class="
-                sidebarCollapsed
-                    ? 'lg:grid-cols-[88px_minmax(0,1fr)]'
-                    : 'lg:grid-cols-[280px_minmax(0,1fr)]'
-            "
-        >
-            <aside
-                class="relative border-b border-slate-200 bg-white/90 px-4 py-4 backdrop-blur lg:sticky lg:top-0 lg:flex lg:h-screen lg:flex-col lg:border-b-0 lg:border-r lg:px-5 lg:py-5"
+    <div class="admin-shell" :class="collapsed ? 'admin-shell--collapsed' : ''">
+        <aside class="admin-sidebar">
+            <RouterLink
+                to="/"
+                class="admin-brand"
+                :class="collapsed ? 'admin-brand--collapsed' : ''"
+                aria-label="OpenCloud 返回站点"
             >
-                <div class="flex items-center">
-                    <div class="flex min-w-0 items-center gap-3">
-                        <span
-                            class="admin-brand-icon flex h-10 w-10 shrink-0 items-center justify-center border border-sky-200 bg-sky-50 text-sky-800"
+                <span class="oc-brand-mark shrink-0"
+                    ><svg
+                        class="h-8 w-8"
+                        viewBox="0 0 16 16"
+                        shape-rendering="crispEdges"
+                        aria-hidden="true"
+                    >
+                        <rect x="11" y="3" width="1" height="1" fill="#f59e0b" />
+                        <rect x="10" y="4" width="3" height="1" fill="#fbbf24" />
+                        <rect x="11" y="5" width="1" height="1" fill="#f59e0b" />
+                        <path d="M5 7h7v1H4v2h1v1h4v-1h2V9h1V8H5z" fill="#38bdf8" />
+                        <path d="M5 5h4v1h2v1H3v2h1v1h5V9h1V8h1V7H4V6h1z" fill="#ffffff" />
+                        <rect
+                            x="4"
+                            y="11"
+                            width="8"
+                            height="1"
+                            fill="#7dd3fc"
+                            opacity="0.55"
+                        /></svg
+                ></span>
+                <span v-if="!collapsed" class="min-w-0"
+                    ><span class="block text-[10px] font-medium tracking-[0.2em] text-sky-700"
+                        >LIVE SKY ATLAS</span
+                    ><span class="mt-1 block text-lg font-bold text-slate-900"
+                        >OpenCloud</span
+                    ></span
+                >
+            </RouterLink>
+            <div
+                v-if="!collapsed"
+                class="mx-5 mb-6 flex items-center gap-2 border border-slate-200 bg-slate-50 px-3 py-2 text-xs text-slate-500"
+            >
+                <NIcon><Shield /></NIcon>管理控制台
+            </div>
+            <nav class="admin-navigation" aria-label="后台管理导航">
+                <template v-for="(tab, index) in tabs" :key="tab.key">
+                    <p
+                        v-if="!collapsed && (index === 0 || tabs[index - 1]?.group !== tab.group)"
+                        class="admin-nav-group"
+                    >
+                        {{ tab.group }}
+                    </p>
+                    <button
+                        type="button"
+                        class="admin-nav-item"
+                        :class="section === tab.key ? 'admin-nav-item--active' : ''"
+                        :aria-current="section === tab.key ? 'page' : undefined"
+                        :aria-label="tab.label"
+                        :title="collapsed ? tab.label : undefined"
+                        @click="navigate(tab.key)"
+                    >
+                        <NIcon size="20"><component :is="tab.icon" /></NIcon
+                        ><span v-if="!collapsed" class="flex-1">{{ tab.label }}</span
+                        ><span
+                            v-if="tab.key === 'review' && pendingCount"
+                            class="admin-nav-badge"
+                            :class="collapsed ? 'admin-nav-badge--compact' : ''"
+                            >{{ pendingCount }}</span
                         >
-                            <NIcon size="22"><Shield /></NIcon>
-                        </span>
-                        <span
-                            class="min-w-0 overflow-hidden whitespace-nowrap transition-[max-width,opacity] duration-200 ease-out"
-                            :class="
-                                sidebarCollapsed
-                                    ? 'lg:max-w-0 lg:opacity-0'
-                                    : 'lg:max-w-[168px] lg:opacity-100'
-                            "
-                        >
-                            <span
-                                class="block whitespace-nowrap text-xs font-semibold uppercase tracking-[0.2em] text-sky-700"
-                                >Admin Console</span
-                            >
-                            <span
-                                class="mt-1 block whitespace-nowrap text-lg font-bold text-slate-950"
-                                >管理工作台</span
-                            >
-                        </span>
+                    </button>
+                </template>
+            </nav>
+            <div class="mt-auto border-t border-slate-100 p-4">
+                <RouterLink
+                    to="/"
+                    class="admin-nav-item"
+                    :title="collapsed ? '返回站点' : undefined"
+                    ><NIcon size="20"><ArrowLeft /></NIcon
+                    ><span v-if="!collapsed">返回站点</span></RouterLink
+                >
+                <p v-if="!collapsed" class="mt-4 px-3 text-[10px] tracking-[0.16em] text-slate-400">
+                    OPENCLOUD · ADMIN
+                </p>
+            </div>
+        </aside>
+        <div class="admin-workspace">
+            <header class="admin-topbar">
+                <div class="flex min-w-0 items-center gap-4">
+                    <button
+                        type="button"
+                        class="oc-icon-button oc-icon-button--small admin-desktop-toggle"
+                        :aria-label="collapsed ? '展开侧边栏' : '折叠侧边栏'"
+                        :aria-expanded="!collapsed"
+                        @click="collapsed = !collapsed"
+                    >
+                        <NIcon size="20"
+                            ><LayoutSidebarLeftExpand v-if="collapsed" /><LayoutSidebarLeftCollapse
+                                v-else
+                        /></NIcon></button
+                    ><button
+                        type="button"
+                        class="oc-icon-button oc-icon-button--small admin-mobile-toggle"
+                        aria-label="打开管理导航"
+                        @click="mobileNav = true"
+                    >
+                        <NIcon size="20"><Menu2 /></NIcon>
+                    </button>
+                    <div class="flex min-w-0 items-center gap-2 text-sm">
+                        <span class="hidden text-slate-400 sm:inline">管理控制台</span
+                        ><NIcon
+                            size="13"
+                            class="admin-breadcrumb-separator hidden text-slate-300 sm:block"
+                            ><ChevronRight /></NIcon
+                        ><span class="truncate font-medium text-slate-700">{{
+                            activeMeta.label
+                        }}</span>
                     </div>
                 </div>
-
-                <button
-                    type="button"
-                    class="oc-icon-button oc-icon-button--small hidden lg:absolute lg:-right-4 lg:top-6 lg:z-20 lg:flex"
-                    :aria-label="sidebarCollapsed ? '展开侧边栏' : '折叠侧边栏'"
-                    :aria-expanded="!sidebarCollapsed"
-                    :title="sidebarCollapsed ? '展开侧边栏' : '折叠侧边栏'"
-                    @click="toggleSidebar"
+                <div class="flex shrink-0 items-center gap-3">
+                    <NButton
+                        size="small"
+                        type="default"
+                        class="oc-panel-button oc-panel-button--neutral"
+                        :loading="loading"
+                        :disabled="busy"
+                        aria-label="刷新后台数据"
+                        @click="refresh"
+                        ><template #icon
+                            ><NIcon><Refresh /></NIcon></template
+                        ><span class="hidden sm:inline">刷新数据</span></NButton
+                    ><NDropdown
+                        trigger="click"
+                        :options="[
+                            { label: '个人主页', key: 'profile' },
+                            { label: '账户设置', key: 'settings' },
+                            { type: 'divider', key: 'divider' },
+                            { label: '退出登录', key: 'logout' },
+                        ]"
+                        @select="accountAction"
+                        ><button
+                            type="button"
+                            class="admin-account"
+                            aria-label="管理员账户菜单"
+                            aria-haspopup="menu"
+                        >
+                            <span class="admin-user-avatar">{{
+                                displayName.slice(0, 1).toUpperCase()
+                            }}</span
+                            ><span
+                                class="hidden max-w-32 truncate text-sm font-medium text-slate-700 sm:block"
+                                >{{ displayName }}</span
+                            >
+                        </button></NDropdown
+                    >
+                </div>
+            </header>
+            <main id="admin-main" class="admin-content">
+                <div class="admin-page-heading">
+                    <div>
+                        <p class="mb-2 text-[10px] font-medium tracking-[0.2em] text-sky-700">
+                            ADMIN WORKSPACE
+                        </p>
+                        <h1 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">
+                            {{ activeMeta.label }}
+                        </h1>
+                        <p class="mt-2 text-sm leading-6 text-slate-500">
+                            {{ activeMeta.description }}
+                        </p>
+                    </div>
+                    <div class="flex items-center gap-2 text-xs text-slate-400">
+                        <span class="h-2 w-2 bg-teal-500"></span
+                        ><span>{{
+                            refreshedAt ? `更新于 ${formatDateTime(refreshedAt)}` : '等待加载数据'
+                        }}</span>
+                    </div>
+                </div>
+                <NAlert
+                    v-if="error"
+                    type="error"
+                    title="部分数据或操作未完成"
+                    class="mb-6"
+                    :bordered="false"
+                    ><p>{{ error }}</p>
+                    <p class="mt-1 text-xs">已完成的操作会保留。请检查后刷新数据。</p>
+                    <div class="mt-3">
+                        <NButton
+                            size="small"
+                            type="default"
+                            class="oc-panel-button oc-panel-button--neutral"
+                            :disabled="busy || loading"
+                            @click="refresh"
+                            >重试</NButton
+                        >
+                    </div></NAlert
                 >
-                    <NIcon size="18">
-                        <LayoutSidebarLeftExpand v-if="sidebarCollapsed" />
-                        <LayoutSidebarLeftCollapse v-else />
-                    </NIcon>
-                </button>
-
-                <nav
-                    aria-label="后台管理分区"
-                    class="mt-4 flex gap-2 overflow-x-auto pb-1 lg:mt-7 lg:block lg:space-y-2 lg:overflow-visible lg:pb-0"
+                <div v-if="loading && !loaded" aria-label="正在加载后台数据" class="space-y-6">
+                    <div class="admin-stat-grid">
+                        <NSkeleton v-for="index in 4" :key="index" height="148px" />
+                    </div>
+                    <NSkeleton height="320px" />
+                </div>
+                <div v-else-if="!loaded" class="oc-empty-card p-10 text-center">
+                    <NIcon size="36" class="text-slate-400"><Cloud /></NIcon>
+                    <h2 class="mt-4 text-lg font-semibold">后台数据暂不可用</h2>
+                    <p class="mt-2 text-sm text-slate-500">
+                        点击重试重新加载用户、云图和云类型数据。
+                    </p>
+                </div>
+                <template v-else>
+                    <AdminOverview
+                        v-if="section === 'dashboard'"
+                        :clouds="clouds"
+                        :users="users"
+                        :cloud-types="cloudTypes"
+                        @navigate="navigate"
+                        @preview="preview"
+                    />
+                    <AdminCloudManager
+                        v-else-if="section === 'review' || section === 'images'"
+                        :key="section"
+                        :clouds="clouds"
+                        :cloud-types="cloudTypes"
+                        :review="section === 'review'"
+                        :busy="disabled"
+                        :owner="ownerFilter"
+                        @preview="preview"
+                        @review="review"
+                        @delete="removeClouds"
+                        @clear-owner="navigate(section)"
+                    />
+                    <AdminUsersManager
+                        v-else-if="section === 'users'"
+                        :users="users"
+                        :current-user-id="auth.user?.id"
+                        :busy="disabled"
+                        @create="openCreateUser"
+                        @role="changeRole"
+                        @password="openPassword"
+                        @clouds="user => navigate('images', user.id)"
+                    />
+                    <AdminCloudTypesManager
+                        v-else
+                        :cloud-types="cloudTypes"
+                        :clouds="clouds"
+                        :busy="disabled"
+                        @edit="openType"
+                        @delete="removeType"
+                    />
+                </template>
+                <footer
+                    class="mt-8 flex flex-wrap justify-between gap-2 border-t border-slate-200 pt-4 text-xs text-slate-400"
                 >
+                    <span>OpenCloud 管理控制台</span><span>数据通过手动刷新更新</span>
+                </footer>
+            </main>
+        </div>
+        <NDrawer v-model:show="mobileNav" placement="left" :width="'min(300px, 85vw)'"
+            ><NDrawerContent title="管理控制台" closable
+                ><nav aria-label="移动端后台导航" class="space-y-2">
                     <button
                         v-for="tab in tabs"
                         :key="tab.key"
                         type="button"
-                        class="group relative flex min-w-[150px] items-center gap-3 overflow-hidden border px-3 py-3 text-left transition-[background-color,border-color,color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600 focus-visible:ring-offset-2 lg:w-full lg:min-w-0"
-                        :class="
-                            activeTab === tab.key
-                                ? 'admin-control-active border-teal-200 bg-teal-50 text-teal-900'
-                                : 'border-transparent bg-white text-slate-600 hover:border-slate-200 hover:bg-slate-50 hover:text-slate-950'
-                        "
-                        :aria-current="activeTab === tab.key ? 'page' : undefined"
-                        :aria-label="tab.label"
-                        :title="sidebarCollapsed ? tab.label : undefined"
-                        @click="activeTab = tab.key"
+                        class="admin-nav-item w-full"
+                        :class="section === tab.key ? 'admin-nav-item--active' : ''"
+                        :aria-current="section === tab.key ? 'page' : undefined"
+                        @click="navigate(tab.key)"
                     >
-                        <NIcon size="22" class="shrink-0">
-                            <component :is="tab.icon" />
-                        </NIcon>
-                        <span
-                            class="min-w-0 flex-1 overflow-hidden whitespace-nowrap transition-[max-width,opacity] duration-200 ease-out"
-                            :class="
-                                sidebarCollapsed
-                                    ? 'lg:max-w-0 lg:opacity-0'
-                                    : 'lg:max-w-[190px] lg:opacity-100'
-                            "
+                        <NIcon size="20"><component :is="tab.icon" /></NIcon
+                        ><span class="flex-1">{{ tab.label }}</span
+                        ><span
+                            v-if="tab.key === 'review' && pendingCount"
+                            class="admin-nav-badge"
+                            >{{ pendingCount }}</span
                         >
-                            <span class="block whitespace-nowrap text-sm font-semibold">{{
-                                tab.label
-                            }}</span>
-                            <span class="mt-0.5 hidden truncate text-xs text-slate-500 lg:block">{{
-                                tab.description
-                            }}</span>
-                        </span>
-                        <span
-                            v-if="tab.key === 'review' && dashboardStats.pending"
-                            class="inline-flex min-w-6 justify-center border border-amber-200 bg-amber-100 px-1.5 py-0.5 text-xs font-semibold text-amber-800"
-                            :class="
-                                sidebarCollapsed
-                                    ? 'lg:absolute lg:right-0 lg:top-0 lg:min-w-4 lg:px-1 lg:text-[10px]'
-                                    : ''
-                            "
-                        >
-                            {{ dashboardStats.pending }}
-                        </span>
                     </button>
                 </nav>
+                <template #footer
+                    ><RouterLink to="/" class="oc-text-button">返回站点 →</RouterLink></template
+                ></NDrawerContent
+            ></NDrawer
+        >
 
-                <div
-                    class="mt-4 flex gap-2 border-t border-slate-100 pt-3 lg:mt-auto lg:block lg:space-y-2 lg:border-t-0 lg:pt-0"
-                >
-                    <NPopover
-                        v-model:show="accountMenuOpen"
-                        trigger="click"
-                        placement="top-start"
-                        :show-arrow="false"
-                        raw
-                    >
-                        <template #trigger>
-                            <button
-                                type="button"
-                                class="flex h-14 min-w-0 flex-1 items-center gap-3 overflow-hidden border px-3 py-2 text-left transition-[background-color,border-color,color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600 lg:w-full"
-                                :class="
-                                    accountMenuOpen
-                                        ? 'admin-control-active border-teal-200 bg-teal-50 text-teal-800'
-                                        : 'border-slate-200 bg-slate-50 text-slate-700 hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800'
-                                "
-                                aria-label="打开管理员账户菜单"
-                                aria-haspopup="menu"
-                                :aria-expanded="accountMenuOpen"
-                                :title="sidebarCollapsed ? displayUsername : undefined"
-                            >
-                                <NIcon size="22" class="shrink-0"><UserCircle /></NIcon>
-                                <span
-                                    class="min-w-0 flex-1 overflow-hidden whitespace-nowrap transition-[max-width,opacity] duration-200 ease-out"
-                                    :class="
-                                        sidebarCollapsed
-                                            ? 'lg:max-w-0 lg:opacity-0'
-                                            : 'lg:max-w-[145px] lg:opacity-100'
-                                    "
-                                >
-                                    <span
-                                        class="block truncate text-sm font-semibold text-slate-900"
-                                        >{{ displayUsername }}</span
-                                    >
-                                    <span class="mt-0.5 block text-xs text-slate-500"
-                                        >管理员账户</span
-                                    >
-                                </span>
-                                <span
-                                    class="overflow-hidden transition-[max-width,opacity] duration-200 ease-out"
-                                    :class="
-                                        sidebarCollapsed
-                                            ? 'lg:max-w-0 lg:opacity-0'
-                                            : 'lg:max-w-4 lg:opacity-100'
-                                    "
-                                >
-                                    <NIcon
-                                        size="16"
-                                        class="shrink-0 transition-transform"
-                                        :class="accountMenuOpen ? 'rotate-180' : ''"
-                                    >
-                                        <ChevronUp />
-                                    </NIcon>
-                                </span>
-                            </button>
-                        </template>
-
-                        <div
-                            class="oc-floating-panel w-64 border border-slate-200 bg-white"
-                            role="menu"
-                            aria-label="管理员账户"
-                        >
-                            <div
-                                class="border-b border-slate-200 bg-[linear-gradient(180deg,#f2faf6_0%,#ffffff_100%)] px-4 py-4"
-                            >
-                                <div class="flex items-center gap-3">
-                                    <div
-                                        class="flex h-11 w-11 shrink-0 items-center justify-center border border-teal-200 bg-[linear-gradient(135deg,#eef9f3_0%,#d9efe3_100%)] text-lg font-bold text-teal-800"
-                                    >
-                                        {{ displayInitial }}
-                                    </div>
-                                    <div class="min-w-0">
-                                        <p class="truncate text-sm font-semibold text-slate-950">
-                                            @{{ displayUsername }}
-                                        </p>
-                                        <p class="mt-1 truncate text-xs text-slate-500">
-                                            {{ userEmail }}
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="py-2">
-                                <RouterLink
-                                    to="/profile"
-                                    class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-slate-700 transition-colors hover:bg-teal-50 hover:text-teal-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-teal-600"
-                                    role="menuitem"
-                                    @click="accountMenuOpen = false"
-                                >
-                                    <NIcon size="18"><UserCircle /></NIcon>
-                                    <span>个人中心</span>
-                                </RouterLink>
-                                <RouterLink
-                                    to="/profile/settings"
-                                    class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-slate-700 transition-colors hover:bg-teal-50 hover:text-teal-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-teal-600"
-                                    role="menuitem"
-                                    @click="accountMenuOpen = false"
-                                >
-                                    <NIcon size="18"><Settings /></NIcon>
-                                    <span>账号设置</span>
-                                </RouterLink>
-                            </div>
-
-                            <div class="border-t border-slate-200 p-2">
-                                <button
-                                    type="button"
-                                    class="oc-menu-item oc-menu-item--danger px-2"
-                                    role="menuitem"
-                                    @click="handleLogout"
-                                >
-                                    <NIcon size="18"><Logout /></NIcon>
-                                    <span>登出</span>
-                                </button>
-                            </div>
-                        </div>
-                    </NPopover>
-                    <RouterLink
-                        to="/"
-                        class="oc-panel-button oc-panel-button--neutral flex h-[46px] shrink-0 items-center justify-start gap-3 overflow-hidden px-3 font-semibold focus-visible:ring-2 focus-visible:ring-sky-600 lg:w-full"
-                        title="返回主页"
-                    >
-                        <NIcon size="20" class="shrink-0"><Home /></NIcon>
-                        <span
-                            class="overflow-hidden whitespace-nowrap transition-[max-width,opacity] duration-200 ease-out"
-                            :class="
-                                sidebarCollapsed
-                                    ? 'lg:max-w-0 lg:opacity-0'
-                                    : 'lg:max-w-[100px] lg:opacity-100'
-                            "
-                        >
-                            返回主页
-                        </span>
-                    </RouterLink>
+        <NModal
+            v-model:show="createUserOpen"
+            preset="card"
+            title="创建用户"
+            class="admin-form-modal"
+            :mask-closable="!busy"
+            :close-on-esc="!busy"
+            :closable="!busy"
+        >
+            <form class="space-y-5" @submit.prevent="submitUser">
+                <NAlert v-if="userFormError" type="error" :show-icon="false">{{
+                    userFormError
+                }}</NAlert>
+                <div>
+                    <label for="create-username" class="oc-field-label"
+                        >用户名 <span class="oc-field-required">*</span></label
+                    ><NInput
+                        v-model:value="userForm.username"
+                        :maxlength="16"
+                        placeholder="1–16 个字符"
+                        :input-props="{
+                            id: 'create-username',
+                            required: true,
+                            autocomplete: 'off',
+                        }"
+                    />
                 </div>
-            </aside>
-
-            <main class="min-w-0 px-4 py-5 sm:px-6 lg:px-8 lg:py-6">
-                <div
-                    class="mb-5 flex min-h-10 items-center justify-between gap-3 border-b border-slate-200 pb-4"
+                <div>
+                    <label for="create-email" class="oc-field-label"
+                        >邮箱 <span class="oc-field-required">*</span></label
+                    ><NInput
+                        v-model:value="userForm.email"
+                        placeholder="用于登录和接收验证邮件"
+                        :input-props="{
+                            id: 'create-email',
+                            type: 'email',
+                            required: true,
+                            autocomplete: 'off',
+                        }"
+                    />
+                </div>
+                <div>
+                    <label for="create-password" class="oc-field-label"
+                        >初始密码 <span class="oc-field-required">*</span></label
+                    ><NInput
+                        v-model:value="userForm.password"
+                        type="password"
+                        show-password-on="click"
+                        placeholder="至少 8 个字符"
+                        :input-props="{
+                            id: 'create-password',
+                            required: true,
+                            autocomplete: 'new-password',
+                        }"
+                    />
+                </div>
+                <div>
+                    <label for="create-role" class="oc-field-label">用户角色</label
+                    ><select id="create-role" v-model="userForm.role" class="oc-field-control">
+                        <option value="user">普通用户</option>
+                        <option value="admin">管理员</option>
+                    </select>
+                    <p class="oc-field-help">管理员可以审核、删除内容及管理其他用户。</p>
+                </div>
+                <NAlert type="info" :show-icon="false"
+                    >创建后会发送验证邮件，用户完成邮箱验证后可正常使用账户。</NAlert
                 >
-                    <div class="flex min-w-0 items-center gap-2 text-slate-700">
-                        <NIcon size="18" class="shrink-0">
-                            <component :is="activeTabMeta.icon" />
-                        </NIcon>
-                        <span class="truncate text-sm font-semibold">{{
-                            activeTabMeta.label
-                        }}</span>
-                    </div>
+                <div class="admin-form-actions">
                     <NButton
-                        secondary
-                        strong
                         type="default"
-                        size="small"
                         class="oc-panel-button oc-panel-button--neutral"
-                        :loading="loading"
-                        @click="loadAdminData"
+                        :disabled="busy"
+                        @click="closeCreateUser"
+                        >取消</NButton
+                    ><NButton
+                        attr-type="submit"
+                        type="default"
+                        class="oc-panel-button oc-panel-button--sky"
+                        :loading="busy"
+                        >创建用户</NButton
                     >
-                        <template #icon>
-                            <NIcon><Refresh /></NIcon>
-                        </template>
-                        刷新数据
-                    </NButton>
                 </div>
-
-                <NAlert
-                    v-if="loadError"
-                    class="mb-6"
-                    type="error"
-                    :show-icon="false"
-                    :bordered="false"
-                    title="后台操作失败"
+            </form>
+        </NModal>
+        <NModal
+            :show="!!passwordUser"
+            preset="card"
+            title="重置用户密码"
+            class="admin-form-modal"
+            :mask-closable="!busy"
+            :close-on-esc="!busy"
+            :closable="!busy"
+            @update:show="
+                show => {
+                    if (!show) closePassword()
+                }
+            "
+        >
+            <form class="space-y-5" @submit.prevent="submitPassword">
+                <p class="break-all text-sm text-slate-500">
+                    {{ passwordUser?.username }} · {{ passwordUser?.email }}
+                </p>
+                <NAlert v-if="passwordError" type="error" :show-icon="false">{{
+                    passwordError
+                }}</NAlert>
+                <div>
+                    <label for="reset-password" class="oc-field-label">新密码</label
+                    ><NInput
+                        v-model:value="password"
+                        type="password"
+                        show-password-on="click"
+                        placeholder="至少 8 个字符"
+                        :input-props="{
+                            id: 'reset-password',
+                            required: true,
+                            autocomplete: 'new-password',
+                        }"
+                    />
+                </div>
+                <div>
+                    <label for="reset-password-confirm" class="oc-field-label">确认新密码</label
+                    ><NInput
+                        v-model:value="passwordConfirm"
+                        type="password"
+                        show-password-on="click"
+                        placeholder="再次输入新密码"
+                        :input-props="{
+                            id: 'reset-password-confirm',
+                            required: true,
+                            autocomplete: 'new-password',
+                        }"
+                    />
+                </div>
+                <NAlert type="warning" :show-icon="false"
+                    >重置后，该用户所有设备上的现有登录状态都会失效。{{
+                        passwordUser?.id === auth.user?.id
+                            ? '你正在重置自己的密码，完成后需要重新登录。'
+                            : ''
+                    }}</NAlert
                 >
-                    {{ loadError }}
-                </NAlert>
-
-                <section v-if="loading" class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-                    <div
-                        v-for="n in 8"
-                        :key="n"
-                        class="oc-panel-card border border-slate-200 bg-white p-5"
+                <div class="admin-form-actions">
+                    <NButton
+                        type="default"
+                        class="oc-panel-button oc-panel-button--neutral"
+                        :disabled="busy"
+                        @click="closePassword"
+                        >取消</NButton
+                    ><NButton
+                        attr-type="submit"
+                        type="default"
+                        class="oc-panel-button oc-panel-button--amber"
+                        :loading="busy"
+                        >确认重置</NButton
                     >
-                        <NSkeleton class="h-4 w-1/2" />
-                        <NSkeleton class="mt-4 h-8 w-2/3" />
-                        <NSkeleton class="mt-3 h-3 w-full" />
+                </div>
+            </form>
+        </NModal>
+        <NModal
+            v-model:show="typeOpen"
+            preset="card"
+            :title="editingTypeId === null ? '新增云类型' : '编辑云类型'"
+            class="admin-form-modal"
+            :mask-closable="!busy"
+            :close-on-esc="!busy"
+            :closable="!busy"
+        >
+            <form class="space-y-5" @submit.prevent="submitType">
+                <NAlert v-if="typeFormError" type="error" :show-icon="false">{{
+                    typeFormError
+                }}</NAlert>
+                <div class="grid gap-5 sm:grid-cols-2">
+                    <div>
+                        <label for="type-name" class="oc-field-label"
+                            >类型名称 <span class="oc-field-required">*</span></label
+                        ><NInput
+                            v-model:value="typeForm.name"
+                            placeholder="例如：积云"
+                            :input-props="{ id: 'type-name', required: true }"
+                        />
                     </div>
-                </section>
-
-                <template v-else>
-                    <section v-if="activeTab === 'dashboard'" class="space-y-5">
-                        <div class="grid gap-4 xl:grid-cols-[1.35fr_0.65fr]">
-                            <div
-                                class="flex flex-col justify-between gap-5 border p-6 sm:flex-row sm:items-center"
-                                :class="
-                                    dashboardStats.pending
-                                        ? 'admin-priority-card--pending border-amber-200 bg-[linear-gradient(135deg,#fffbeb_0%,#fff_52%,#f2faf6_100%)]'
-                                        : 'admin-priority-card--clear border-teal-200 bg-[linear-gradient(135deg,#f2faf6_0%,#fff_55%,#eff6ff_100%)]'
-                                "
-                            >
-                                <div class="flex items-center gap-5">
-                                    <div
-                                        class="flex h-20 w-20 shrink-0 items-center justify-center border font-mono text-3xl font-bold"
-                                        :class="
-                                            dashboardStats.pending
-                                                ? 'border-amber-300 bg-amber-100 text-amber-900'
-                                                : 'border-teal-200 bg-teal-100 text-teal-900'
-                                        "
-                                    >
-                                        {{ dashboardStats.pending }}
-                                    </div>
-                                    <div>
-                                        <p
-                                            class="text-xs font-semibold uppercase tracking-[0.2em]"
-                                            :class="
-                                                dashboardStats.pending
-                                                    ? 'text-amber-700'
-                                                    : 'text-teal-700'
-                                            "
-                                        >
-                                            {{
-                                                dashboardStats.pending
-                                                    ? 'Priority Queue'
-                                                    : 'Queue Cleared'
-                                            }}
-                                        </p>
-                                        <h3 class="mt-2 text-xl font-bold text-slate-950">
-                                            {{
-                                                dashboardStats.pending
-                                                    ? '待审核内容需要处理'
-                                                    : '审核队列已经清空'
-                                            }}
-                                        </h3>
-                                        <p class="mt-2 text-sm leading-6 text-slate-600">
-                                            {{
-                                                dashboardStats.pending
-                                                    ? `当前占全部内容的 ${getPercentage(dashboardStats.pending, dashboardStats.images)}%，建议优先核对图片与拍摄信息。`
-                                                    : '当前没有待处理上传，可以继续检查隐藏内容与近期提交。'
-                                            }}
-                                        </p>
-                                    </div>
-                                </div>
-                                <NButton
-                                    v-if="dashboardStats.pending > 0"
-                                    type="default"
-                                    secondary
-                                    strong
-                                    class="oc-panel-button oc-panel-button--amber shrink-0"
-                                    @click="activeTab = 'review'"
-                                >
-                                    进入审核队列
-                                </NButton>
-                            </div>
-
-                            <div
-                                class="oc-panel-card grid grid-cols-2 border border-slate-200 bg-white"
-                            >
-                                <div class="border-b border-r border-slate-100 p-4">
-                                    <p class="text-xs font-medium text-slate-500">今日上传</p>
-                                    <p class="mt-2 text-2xl font-bold text-sky-800">
-                                        {{ dashboardStats.todayUploads }}
-                                    </p>
-                                </div>
-                                <div class="border-b border-slate-100 p-4">
-                                    <p class="text-xs font-medium text-slate-500">审核通过率</p>
-                                    <p class="mt-2 text-2xl font-bold text-teal-800">
-                                        {{ approvalRate }}%
-                                    </p>
-                                </div>
-                                <div class="border-r border-slate-100 p-4">
-                                    <p class="text-xs font-medium text-slate-500">公开图片</p>
-                                    <p class="mt-2 text-2xl font-bold text-slate-950">
-                                        {{ publicImageCount }}
-                                    </p>
-                                </div>
-                                <div class="p-4">
-                                    <p class="text-xs font-medium text-slate-500">社区用户</p>
-                                    <p class="mt-2 text-2xl font-bold text-slate-950">
-                                        {{ dashboardStats.users }}
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="grid gap-5 lg:grid-cols-[1.05fr_0.95fr]">
-                            <div class="oc-panel-card border border-slate-200 bg-white p-5 sm:p-6">
-                                <div class="flex items-start justify-between gap-4">
-                                    <div>
-                                        <p class="oc-section-label">Review Health</p>
-                                        <h3 class="mt-2 text-xl font-bold text-slate-950">
-                                            审核健康度
-                                        </h3>
-                                    </div>
-                                    <div class="text-right">
-                                        <p class="text-3xl font-bold text-teal-800">
-                                            {{ approvalRate }}%
-                                        </p>
-                                        <p class="mt-1 text-xs text-slate-500">
-                                            {{ reviewedCount }} 张已完成审核
-                                        </p>
-                                    </div>
-                                </div>
-
-                                <div
-                                    class="mt-6 flex h-3 overflow-hidden bg-slate-100"
-                                    role="img"
-                                    aria-label="审核状态分布"
-                                >
-                                    <div
-                                        v-for="item in reviewStatusStats"
-                                        :key="item.key"
-                                        :class="item.bar"
-                                        :style="{
-                                            width: `${getPercentage(item.count, dashboardStats.images)}%`,
-                                        }"
-                                    ></div>
-                                </div>
-                                <div class="mt-5 grid gap-3 sm:grid-cols-3">
-                                    <div
-                                        v-for="item in reviewStatusStats"
-                                        :key="item.key"
-                                        class="border border-slate-100 bg-slate-50 p-3"
-                                    >
-                                        <div class="flex items-center gap-2">
-                                            <span class="h-2 w-2" :class="item.bar"></span>
-                                            <span class="text-xs font-medium text-slate-500">{{
-                                                item.label
-                                            }}</span>
-                                        </div>
-                                        <div class="mt-2 flex items-end justify-between gap-2">
-                                            <span class="text-xl font-bold" :class="item.text">{{
-                                                item.count
-                                            }}</span>
-                                            <span class="pb-0.5 text-xs text-slate-400"
-                                                >{{
-                                                    getPercentage(
-                                                        item.count,
-                                                        dashboardStats.images,
-                                                    )
-                                                }}%</span
-                                            >
-                                        </div>
-                                    </div>
-                                </div>
-                                <div
-                                    class="mt-5 flex items-center justify-between border-t border-slate-100 pt-4 text-sm"
-                                >
-                                    <span class="text-slate-500">隐藏内容（与审核状态独立）</span>
-                                    <span class="font-semibold text-slate-800"
-                                        >{{ dashboardStats.hidden }} 张</span
-                                    >
-                                </div>
-                            </div>
-
-                            <div class="oc-panel-card border border-slate-200 bg-white p-5 sm:p-6">
-                                <div>
-                                    <p class="oc-section-label">Cloud Type Mix</p>
-                                    <h3 class="mt-2 text-xl font-bold text-slate-950">云型分布</h3>
-                                    <p class="mt-2 text-xs text-slate-500">
-                                        基于最近加载的
-                                        {{ images.length }} 张内容，按最高频云型对比。
-                                    </p>
-                                </div>
-                                <div v-if="cloudTypeStats.length" class="mt-5 space-y-3.5">
-                                    <div v-for="item in cloudTypeStats" :key="item.name">
-                                        <div
-                                            class="mb-1.5 flex items-center justify-between gap-3 text-sm"
-                                        >
-                                            <span class="truncate text-slate-600">{{
-                                                item.name
-                                            }}</span>
-                                            <span
-                                                class="shrink-0 font-mono text-xs font-medium text-slate-700"
-                                            >
-                                                {{ item.count }} /
-                                                {{ getPercentage(item.count, images.length) }}%
-                                            </span>
-                                        </div>
-                                        <div class="h-2 bg-slate-100">
-                                            <div
-                                                class="h-full bg-sky-500"
-                                                :style="{
-                                                    width: `${(item.count / cloudTypeMaxCount) * 100}%`,
-                                                }"
-                                            ></div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <NEmpty v-else class="py-6" description="暂无图片数据" />
-                            </div>
-                        </div>
-
-                        <div class="oc-panel-card border border-slate-200 bg-white">
-                            <div
-                                class="flex items-end justify-between gap-4 border-b border-slate-200 px-5 py-4"
-                            >
-                                <div>
-                                    <p class="oc-section-label">Latest Activity</p>
-                                    <h3 class="mt-2 text-xl font-bold text-slate-950">最近上传</h3>
-                                </div>
-                                <NButton
-                                    size="small"
-                                    type="default"
-                                    secondary
-                                    strong
-                                    class="oc-panel-button oc-panel-button--neutral"
-                                    @click="activeTab = 'images'"
-                                >
-                                    查看全部图片
-                                </NButton>
-                            </div>
-                            <div v-if="recentImages.length" class="divide-y divide-slate-100">
-                                <button
-                                    v-for="item in recentImages"
-                                    :key="item.id"
-                                    type="button"
-                                    class="oc-interactive-row grid w-full grid-cols-[52px_minmax(0,1fr)_auto] items-center gap-3 px-5 py-3 text-left sm:grid-cols-[52px_minmax(0,1fr)_minmax(120px,0.5fr)_auto]"
-                                    @click="selectedImage = item"
-                                >
-                                    <img
-                                        :src="item.thumbnail_url || item.image_url"
-                                        :alt="item.cloudTypeName"
-                                        class="h-11 w-13 object-cover"
-                                    />
-                                    <span class="min-w-0">
-                                        <span
-                                            class="block truncate text-sm font-semibold text-slate-900"
-                                            >{{ item.cloudTypeName }}</span
-                                        >
-                                        <span class="mt-0.5 block truncate text-xs text-slate-500">
-                                            {{ item.username }} ·
-                                            {{ formatCoordinate(item.latitude) }},
-                                            {{ formatCoordinate(item.longitude) }}
-                                        </span>
-                                    </span>
-                                    <span class="hidden truncate text-xs text-slate-500 sm:block">{{
-                                        formatDateTime(item.created_at)
-                                    }}</span>
-                                    <span
-                                        class="border px-2 py-1 text-xs font-medium"
-                                        :class="statusMeta[item.status].chip"
-                                    >
-                                        {{ statusMeta[item.status].label }}
-                                    </span>
-                                </button>
-                            </div>
-                            <NEmpty v-else class="py-8" description="暂无上传记录" />
-                        </div>
-                    </section>
-
-                    <section v-else-if="activeTab === 'review'">
-                        <div
-                            class="oc-panel-card mb-4 flex flex-col gap-3 border border-slate-200 bg-white p-4 md:flex-row md:items-center md:justify-between"
-                        >
-                            <div>
-                                <h2 class="text-xl font-bold text-slate-950">待审核队列</h2>
-                                <p class="oc-field-help">
-                                    共 {{ pendingImages.length }} 张待处理图片。
-                                </p>
-                            </div>
-                            <div class="flex flex-wrap gap-2">
-                                <NButton
-                                    v-if="pendingImages.length > 0"
-                                    secondary
-                                    strong
-                                    type="default"
-                                    class="oc-panel-button oc-panel-button--neutral"
-                                    @click="toggleAllPendingSelection"
-                                >
-                                    {{
-                                        selectedReviewCount === pendingImages.length &&
-                                        pendingImages.length
-                                            ? '取消全选'
-                                            : '全选待审核'
-                                    }}
-                                </NButton>
-                                <template v-if="selectedReviewCount">
-                                    <NButton
-                                        secondary
-                                        strong
-                                        type="default"
-                                        class="oc-panel-button oc-panel-button--teal"
-                                        :loading="actionLoading"
-                                        @click="
-                                            updateCloudStatus(
-                                                Array.from(selectedReviewIds),
-                                                'approved',
-                                            )
-                                        "
-                                    >
-                                        批量通过 {{ selectedReviewCount }}
-                                    </NButton>
-                                    <NButton
-                                        secondary
-                                        strong
-                                        type="default"
-                                        class="oc-panel-button oc-panel-button--danger"
-                                        :loading="actionLoading"
-                                        @click="
-                                            updateCloudStatus(
-                                                Array.from(selectedReviewIds),
-                                                'rejected',
-                                            )
-                                        "
-                                    >
-                                        批量拒绝 {{ selectedReviewCount }}
-                                    </NButton>
-                                </template>
-                            </div>
-                        </div>
-
-                        <div
-                            v-if="activeReviewImage"
-                            class="grid min-w-0 gap-4 xl:grid-cols-[220px_minmax(0,1fr)]"
-                        >
-                            <aside
-                                class="oc-panel-card min-w-0 self-start border border-slate-200 bg-white xl:sticky xl:top-20 xl:max-h-[calc(100vh-6rem)]"
-                            >
-                                <div
-                                    class="flex items-center justify-between border-b border-slate-200 px-4 py-3"
-                                >
-                                    <div>
-                                        <p class="text-sm font-semibold text-slate-900">审核队列</p>
-                                        <p class="mt-0.5 text-xs text-slate-500">
-                                            {{ activeReviewPosition }} / {{ pendingImages.length }}
-                                        </p>
-                                    </div>
-                                    <span
-                                        class="border border-amber-200 bg-amber-100 px-2 py-1 text-xs font-semibold text-amber-800"
-                                    >
-                                        {{ pendingImages.length }}
-                                    </span>
-                                </div>
-                                <div
-                                    class="flex gap-2 overflow-x-auto p-2 xl:max-h-[calc(100vh-11rem)] xl:block xl:space-y-2 xl:overflow-y-auto"
-                                >
-                                    <div
-                                        v-for="(item, index) in pendingImages"
-                                        :key="item.id"
-                                        class="flex min-w-[210px] items-center gap-2 border p-2 transition-colors xl:min-w-0"
-                                        :class="
-                                            activeReviewImage.id === item.id
-                                                ? 'border-teal-300 bg-teal-50'
-                                                : 'border-transparent bg-white hover:border-slate-200 hover:bg-slate-50'
-                                        "
-                                    >
-                                        <button
-                                            type="button"
-                                            class="oc-interactive-row flex min-w-0 flex-1 items-center gap-3 text-left"
-                                            :aria-pressed="activeReviewImage.id === item.id"
-                                            @click="activeReviewId = item.id"
-                                        >
-                                            <span class="relative shrink-0">
-                                                <img
-                                                    :src="item.thumbnail_url || item.image_url"
-                                                    :alt="item.cloudTypeName"
-                                                    class="h-12 w-14 object-cover"
-                                                />
-                                                <span
-                                                    class="absolute left-0 top-0 bg-slate-950/80 px-1 font-mono text-[10px] text-white"
-                                                    >{{ index + 1 }}</span
-                                                >
-                                            </span>
-                                            <span class="min-w-0">
-                                                <span
-                                                    class="block truncate text-sm font-semibold text-slate-900"
-                                                    >{{ item.cloudTypeName }}</span
-                                                >
-                                                <span
-                                                    class="mt-1 block truncate text-xs text-slate-500"
-                                                    >{{ item.username }}</span
-                                                >
-                                            </span>
-                                        </button>
-                                        <input
-                                            type="checkbox"
-                                            class="h-5 w-5 shrink-0"
-                                            :aria-label="`选择 ${item.cloudTypeName}`"
-                                            :checked="selectedReviewIds.has(item.id)"
-                                            @change="toggleReviewSelection(item.id)"
-                                        />
-                                    </div>
-                                </div>
-                            </aside>
-
-                            <div class="grid min-w-0 gap-4 lg:grid-cols-[minmax(0,1fr)_300px]">
-                                <div class="min-w-0 space-y-4">
-                                    <div class="oc-panel-card border border-slate-200 bg-white">
-                                        <div
-                                            class="flex items-center justify-between gap-4 border-b border-slate-200 px-4 py-3"
-                                        >
-                                            <div class="min-w-0">
-                                                <p
-                                                    class="truncate text-sm font-semibold text-slate-900"
-                                                >
-                                                    {{ activeReviewImage.cloudTypeName }}
-                                                </p>
-                                                <p class="mt-0.5 truncate text-xs text-slate-500">
-                                                    内容编号 {{ activeReviewImage.id }}
-                                                </p>
-                                            </div>
-                                            <span
-                                                class="shrink-0 whitespace-nowrap border border-sky-200 bg-sky-100 px-2 py-1 text-xs font-medium text-sky-700"
-                                            >
-                                                稀有度 {{ activeReviewImage.cloudTypeRarity }}
-                                            </span>
-                                        </div>
-                                        <button
-                                            type="button"
-                                            class="group flex min-h-[360px] w-full items-center justify-center overflow-hidden bg-slate-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sky-500 sm:min-h-[480px]"
-                                            aria-label="打开图片大图"
-                                            @click="selectedImage = activeReviewImage"
-                                        >
-                                            <img
-                                                :src="activeReviewImage.image_url"
-                                                :alt="activeReviewImage.cloudTypeName"
-                                                class="max-h-[620px] w-full object-contain transition-transform duration-300 group-hover:scale-[1.01]"
-                                            />
-                                        </button>
-                                        <div
-                                            class="flex items-center justify-between gap-4 border-t border-slate-200 bg-slate-50 px-4 py-3"
-                                        >
-                                            <p class="text-xs text-slate-500">
-                                                点击图片可查看原图与地图
-                                            </p>
-                                            <NButton
-                                                size="small"
-                                                type="default"
-                                                secondary
-                                                strong
-                                                class="oc-panel-button oc-panel-button--neutral"
-                                                @click="selectedImage = activeReviewImage"
-                                            >
-                                                查看完整详情
-                                            </NButton>
-                                        </div>
-                                    </div>
-
-                                    <div class="oc-panel-card border border-slate-200 bg-white p-5">
-                                        <p class="oc-section-label">Uploader Notes</p>
-                                        <h3 class="mt-2 text-lg font-bold text-slate-950">
-                                            上传说明
-                                        </h3>
-                                        <p class="mt-3 text-sm leading-7 text-slate-700">
-                                            {{
-                                                activeReviewImage.description ||
-                                                '上传者没有填写图片说明。'
-                                            }}
-                                        </p>
-                                    </div>
-                                </div>
-
-                                <aside
-                                    class="oc-panel-card self-start border border-slate-200 bg-white lg:sticky lg:top-20"
-                                >
-                                    <div
-                                        class="border-b border-slate-200 bg-[linear-gradient(180deg,#fffbeb_0%,#fff_100%)] p-5"
-                                    >
-                                        <p
-                                            class="text-xs font-semibold uppercase tracking-[0.2em] text-amber-700"
-                                        >
-                                            Review Decision
-                                        </p>
-                                        <h3 class="mt-2 text-xl font-bold text-slate-950">
-                                            审核资料
-                                        </h3>
-                                        <p class="mt-2 text-xs leading-5 text-slate-500">
-                                            核对图片内容、云型标注、时间与位置后作出决定。
-                                        </p>
-                                    </div>
-
-                                    <dl class="divide-y divide-slate-100 px-5">
-                                        <div class="py-3">
-                                            <dt class="text-xs font-medium text-slate-400">
-                                                上传者
-                                            </dt>
-                                            <dd class="mt-1 text-sm font-semibold text-slate-900">
-                                                @{{ activeReviewImage.username }}
-                                            </dd>
-                                        </div>
-                                        <div class="grid grid-cols-2 gap-3 py-3">
-                                            <div>
-                                                <dt class="text-xs font-medium text-slate-400">
-                                                    云型标注
-                                                </dt>
-                                                <dd
-                                                    class="mt-1 text-sm font-semibold text-slate-900"
-                                                >
-                                                    {{ activeReviewImage.cloudTypeName }}
-                                                </dd>
-                                            </div>
-                                            <div>
-                                                <dt class="text-xs font-medium text-slate-400">
-                                                    可见性
-                                                </dt>
-                                                <dd
-                                                    class="mt-1 text-sm font-semibold text-slate-900"
-                                                >
-                                                    {{
-                                                        activeReviewImage.is_hidden
-                                                            ? '隐藏'
-                                                            : '公开'
-                                                    }}
-                                                </dd>
-                                            </div>
-                                        </div>
-                                        <div class="py-3">
-                                            <dt class="text-xs font-medium text-slate-400">
-                                                拍摄时间
-                                            </dt>
-                                            <dd class="mt-1 text-sm font-medium text-slate-800">
-                                                {{ formatDateTime(activeReviewImage.captured_at) }}
-                                            </dd>
-                                        </div>
-                                        <div class="py-3">
-                                            <dt class="text-xs font-medium text-slate-400">
-                                                上传时间
-                                            </dt>
-                                            <dd class="mt-1 text-sm font-medium text-slate-800">
-                                                {{ formatDateTime(activeReviewImage.created_at) }}
-                                            </dd>
-                                        </div>
-                                        <div class="py-3">
-                                            <dt class="text-xs font-medium text-slate-400">
-                                                模糊化坐标
-                                            </dt>
-                                            <dd
-                                                class="mt-1 font-mono text-xs leading-5 text-slate-700"
-                                            >
-                                                LAT {{ formatCoordinate(activeReviewImage.latitude)
-                                                }}<br />
-                                                LNG
-                                                {{ formatCoordinate(activeReviewImage.longitude) }}
-                                            </dd>
-                                        </div>
-                                    </dl>
-
-                                    <div
-                                        class="space-y-2 border-t border-slate-200 bg-slate-50 p-4"
-                                    >
-                                        <NButton
-                                            block
-                                            size="large"
-                                            type="default"
-                                            secondary
-                                            strong
-                                            class="oc-panel-button oc-panel-button--teal"
-                                            :loading="actionLoading"
-                                            @click="
-                                                updateCloudStatus(
-                                                    [activeReviewImage.id],
-                                                    'approved',
-                                                )
-                                            "
-                                        >
-                                            <template #icon
-                                                ><NIcon><Check /></NIcon
-                                            ></template>
-                                            通过并处理下一张
-                                        </NButton>
-                                        <NButton
-                                            block
-                                            size="large"
-                                            type="default"
-                                            secondary
-                                            strong
-                                            class="oc-panel-button oc-panel-button--danger"
-                                            :loading="actionLoading"
-                                            @click="
-                                                updateCloudStatus(
-                                                    [activeReviewImage.id],
-                                                    'rejected',
-                                                )
-                                            "
-                                        >
-                                            <template #icon
-                                                ><NIcon><X /></NIcon
-                                            ></template>
-                                            拒绝并处理下一张
-                                        </NButton>
-                                        <label
-                                            class="mt-3 flex cursor-pointer items-center gap-3 border border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-600"
-                                        >
-                                            <input
-                                                type="checkbox"
-                                                class="h-5 w-5"
-                                                :checked="
-                                                    selectedReviewIds.has(activeReviewImage.id)
-                                                "
-                                                @change="
-                                                    toggleReviewSelection(activeReviewImage.id)
-                                                "
-                                            />
-                                            加入批量选择
-                                        </label>
-                                    </div>
-                                </aside>
-                            </div>
-                        </div>
-
-                        <div
-                            v-else
-                            class="oc-panel-card border border-dashed border-slate-300 bg-white p-10"
-                        >
-                            <NEmpty description="当前没有待审核图片" />
-                        </div>
-                    </section>
-
-                    <section v-else-if="activeTab === 'users'">
-                        <div class="oc-panel-card overflow-hidden border border-slate-200 bg-white">
-                            <div
-                                class="hidden grid-cols-[minmax(0,1.1fr)_minmax(0,0.7fr)_minmax(0,0.7fr)_minmax(0,0.9fr)_minmax(0,1.5fr)] gap-3 border-b border-slate-200 bg-slate-50 px-4 py-3 text-xs font-semibold uppercase tracking-[0.14em] text-slate-500 lg:grid"
-                            >
-                                <span>用户</span>
-                                <span>角色</span>
-                                <span>状态</span>
-                                <span>注册时间</span>
-                                <span>操作</span>
-                            </div>
-                            <div
-                                v-for="user in users"
-                                :key="user.id"
-                                class="grid gap-4 border-b border-slate-100 px-4 py-4 last:border-b-0 sm:grid-cols-2 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.7fr)_minmax(0,0.7fr)_minmax(0,0.9fr)_minmax(0,1.5fr)] lg:items-center lg:gap-3"
-                            >
-                                <div class="min-w-0 sm:col-span-2 lg:col-span-1">
-                                    <p class="truncate font-medium text-slate-950">
-                                        {{ user.username }}
-                                    </p>
-                                    <p class="mt-1 truncate text-xs text-slate-400">
-                                        {{ user.email }}
-                                    </p>
-                                </div>
-                                <div class="flex items-center justify-between gap-3 lg:block">
-                                    <span class="text-xs font-medium text-slate-400 lg:hidden"
-                                        >角色</span
-                                    >
-                                    <NTag
-                                        size="small"
-                                        :bordered="false"
-                                        :type="user.role === 'admin' ? 'success' : 'default'"
-                                    >
-                                        {{ user.role === 'admin' ? '管理员' : '用户' }}
-                                    </NTag>
-                                </div>
-                                <div class="flex items-center justify-between gap-3 lg:block">
-                                    <span class="text-xs font-medium text-slate-400 lg:hidden"
-                                        >状态</span
-                                    >
-                                    <NTag
-                                        size="small"
-                                        :bordered="false"
-                                        :type="user.is_disabled ? 'error' : 'success'"
-                                    >
-                                        {{ user.is_disabled ? '已禁用' : '正常' }}
-                                    </NTag>
-                                </div>
-                                <div
-                                    class="flex items-center justify-between gap-3 text-sm text-slate-500 lg:block"
-                                >
-                                    <span class="text-xs font-medium text-slate-400 lg:hidden"
-                                        >注册时间</span
-                                    >
-                                    <span>{{ formatDateTime(user.created_at) }}</span>
-                                </div>
-                                <div class="flex flex-wrap gap-2 sm:col-span-2 lg:col-span-1">
-                                    <NButton
-                                        size="small"
-                                        secondary
-                                        strong
-                                        type="default"
-                                        class="oc-panel-button oc-panel-button--amber"
-                                        :disabled="
-                                            user.id === authStore.user?.id && user.role === 'admin'
-                                        "
-                                        :loading="actionLoading"
-                                        @click="
-                                            updateUserRole(
-                                                user,
-                                                user.role === 'admin' ? 'user' : 'admin',
-                                            )
-                                        "
-                                    >
-                                        {{ user.role === 'admin' ? '设为用户' : '设为管理员' }}
-                                    </NButton>
-                                    <NButton
-                                        size="small"
-                                        type="default"
-                                        secondary
-                                        strong
-                                        class="oc-panel-button oc-panel-button--neutral"
-                                        :disabled="user.id === authStore.user?.id"
-                                        :loading="actionLoading"
-                                        :title="
-                                            user.id === authStore.user?.id
-                                                ? '请在账号设置中修改自己的密码'
-                                                : '设置新密码'
-                                        "
-                                        @click="openPasswordReset(user)"
-                                    >
-                                        <template #icon
-                                            ><NIcon><Key /></NIcon
-                                        ></template>
-                                        重置密码
-                                    </NButton>
-                                </div>
-                            </div>
-                        </div>
-                    </section>
-
-                    <section v-else-if="activeTab === 'cloud-types'">
-                        <div
-                            class="oc-panel-card mb-4 flex flex-col gap-4 border border-slate-200 bg-white p-4 sm:p-5 md:flex-row md:items-center md:justify-between"
-                        >
-                            <div>
-                                <p class="oc-section-label">Cloud Catalog</p>
-                                <h2 class="mt-2 text-xl font-bold text-slate-950">云类型管理</h2>
-                                <p class="oc-field-help">
-                                    共
-                                    {{ cloudTypes.length }}
-                                    个类型，可维护名称、云属、稀有度和百科描述。
-                                </p>
-                            </div>
-                            <NButton
-                                type="default"
-                                secondary
-                                strong
-                                class="oc-panel-button oc-panel-button--sky shrink-0"
-                                @click="openCloudTypeEditor()"
-                            >
-                                <template #icon
-                                    ><NIcon><Plus /></NIcon
-                                ></template>
-                                添加云类型
-                            </NButton>
-                        </div>
-
-                        <div
-                            v-if="cloudTypes.length"
-                            class="grid gap-4 md:grid-cols-2 xl:grid-cols-3"
-                        >
-                            <article
-                                v-for="cloudType in cloudTypes"
-                                :key="cloudType.id"
-                                class="oc-panel-card flex min-w-0 flex-col border border-slate-200 bg-white"
-                            >
-                                <div
-                                    class="flex items-start justify-between gap-4 border-b border-slate-200 bg-sky-50/60 px-4 py-3"
-                                >
-                                    <div class="min-w-0">
-                                        <p
-                                            class="font-mono text-xs font-semibold uppercase tracking-[0.14em] text-sky-700"
-                                        >
-                                            Type {{ cloudType.id }}
-                                        </p>
-                                        <h3 class="mt-1 truncate text-lg font-bold text-slate-950">
-                                            {{ cloudType.name }}
-                                        </h3>
-                                        <p class="mt-1 truncate text-sm text-slate-500">
-                                            {{ cloudType.genus || '未设置云属' }}
-                                        </p>
-                                    </div>
-                                    <span
-                                        class="shrink-0 border border-amber-200 bg-amber-50 px-2 py-1 text-xs font-semibold text-amber-800"
-                                    >
-                                        稀有度 {{ cloudType.rarity }}
-                                    </span>
-                                </div>
-
-                                <div class="flex flex-1 flex-col p-4">
-                                    <p class="min-h-12 text-sm leading-6 text-slate-700">
-                                        {{ cloudType.description || '暂无类型描述。' }}
-                                    </p>
-                                    <dl
-                                        class="mt-4 grid gap-3 border-t border-slate-100 pt-4 sm:grid-cols-2"
-                                    >
-                                        <div>
-                                            <dt class="text-xs font-medium text-slate-400">
-                                                关联云图
-                                            </dt>
-                                            <dd class="mt-1 text-sm font-semibold text-slate-900">
-                                                {{ cloudTypeUsageCount(cloudType.id) }} 张
-                                            </dd>
-                                        </div>
-                                        <div>
-                                            <dt class="text-xs font-medium text-slate-400">
-                                                创建时间
-                                            </dt>
-                                            <dd class="mt-1 text-sm text-slate-600">
-                                                {{ formatDateTime(cloudType.created_at) }}
-                                            </dd>
-                                        </div>
-                                    </dl>
-                                    <div
-                                        v-if="cloudType.icon_id"
-                                        class="mt-3 border border-slate-100 bg-slate-50 px-3 py-2"
-                                    >
-                                        <p class="text-xs font-medium text-slate-400">图标 ID</p>
-                                        <p
-                                            class="mt-1 truncate font-mono text-xs text-slate-600"
-                                            :title="cloudType.icon_id"
-                                        >
-                                            {{ cloudType.icon_id }}
-                                        </p>
-                                    </div>
-                                </div>
-
-                                <div
-                                    class="flex flex-wrap gap-2 border-t border-slate-200 bg-slate-50 px-4 py-3"
-                                >
-                                    <NButton
-                                        size="small"
-                                        type="default"
-                                        secondary
-                                        strong
-                                        class="oc-panel-button oc-panel-button--neutral"
-                                        :disabled="actionLoading"
-                                        @click="openCloudTypeEditor(cloudType)"
-                                    >
-                                        <template #icon
-                                            ><NIcon><Edit /></NIcon
-                                        ></template>
-                                        编辑
-                                    </NButton>
-                                    <NButton
-                                        size="small"
-                                        type="default"
-                                        secondary
-                                        strong
-                                        class="oc-panel-button oc-panel-button--danger"
-                                        :disabled="
-                                            actionLoading || cloudTypeUsageCount(cloudType.id) > 0
-                                        "
-                                        :title="
-                                            cloudTypeUsageCount(cloudType.id) > 0
-                                                ? '仍有云图使用该类型，无法删除'
-                                                : '删除云类型'
-                                        "
-                                        @click="deleteCloudType(cloudType)"
-                                    >
-                                        <template #icon
-                                            ><NIcon><Trash /></NIcon
-                                        ></template>
-                                        删除
-                                    </NButton>
-                                </div>
-                            </article>
-                        </div>
-
-                        <div
-                            v-else
-                            class="oc-empty-card border border-dashed border-slate-300 bg-white p-10"
-                        >
-                            <NEmpty description="还没有云类型">
-                                <template #extra>
-                                    <NButton
-                                        type="default"
-                                        secondary
-                                        strong
-                                        class="oc-panel-button oc-panel-button--sky"
-                                        @click="openCloudTypeEditor()"
-                                    >
-                                        添加第一个云类型
-                                    </NButton>
-                                </template>
-                            </NEmpty>
-                        </div>
-                    </section>
-
-                    <section v-else>
-                        <div
-                            class="oc-panel-card mb-4 flex flex-col gap-3 border border-slate-200 bg-white p-4 md:flex-row md:items-center md:justify-between"
-                        >
-                            <div>
-                                <h2 class="text-xl font-bold text-slate-950">图片管理</h2>
-                                <p class="oc-field-help">
-                                    共 {{ images.length }} 张图片，可调整审核状态或删除。
-                                </p>
-                            </div>
-                            <div class="flex flex-wrap gap-2">
-                                <select
-                                    v-model="imageFilter"
-                                    class="border border-slate-300 bg-white px-3 py-2 text-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500"
-                                >
-                                    <option value="all">全部状态</option>
-                                    <option value="pending">待审核</option>
-                                    <option value="approved">已通过</option>
-                                    <option value="rejected">已拒绝</option>
-                                </select>
-                                <NButton
-                                    v-if="filteredImages.length > 0"
-                                    secondary
-                                    strong
-                                    type="default"
-                                    class="oc-panel-button oc-panel-button--neutral"
-                                    @click="toggleAllFilteredImageSelection"
-                                >
-                                    {{
-                                        selectedManagedCount === filteredImages.length &&
-                                        filteredImages.length
-                                            ? '取消全选'
-                                            : '全选当前列表'
-                                    }}
-                                </NButton>
-                                <template v-if="selectedManagedCount">
-                                    <NButton
-                                        secondary
-                                        strong
-                                        type="default"
-                                        class="oc-panel-button oc-panel-button--teal"
-                                        :loading="actionLoading"
-                                        @click="
-                                            updateCloudStatus(
-                                                Array.from(selectedImageIds),
-                                                'approved',
-                                            )
-                                        "
-                                    >
-                                        批量通过 {{ selectedManagedCount }}
-                                    </NButton>
-                                    <NButton
-                                        secondary
-                                        strong
-                                        type="default"
-                                        class="oc-panel-button oc-panel-button--danger"
-                                        :loading="actionLoading"
-                                        @click="
-                                            updateCloudStatus(
-                                                Array.from(selectedImageIds),
-                                                'rejected',
-                                            )
-                                        "
-                                    >
-                                        批量拒绝 {{ selectedManagedCount }}
-                                    </NButton>
-                                    <NButton
-                                        secondary
-                                        strong
-                                        type="default"
-                                        class="oc-panel-button oc-panel-button--danger"
-                                        :loading="actionLoading"
-                                        @click="
-                                            deleteImages(
-                                                filteredImages.filter(item =>
-                                                    selectedImageIds.has(item.id),
-                                                ),
-                                            )
-                                        "
-                                    >
-                                        批量删除 {{ selectedManagedCount }}
-                                    </NButton>
-                                </template>
-                            </div>
-                        </div>
-
-                        <div
-                            v-if="filteredImages.length"
-                            class="grid gap-4 md:grid-cols-2 xl:grid-cols-3"
-                        >
-                            <article
-                                v-for="item in filteredImages"
-                                :key="item.id"
-                                class="oc-panel-card overflow-hidden border border-slate-200 bg-white"
-                            >
-                                <button
-                                    type="button"
-                                    class="oc-interactive-card block w-full overflow-hidden bg-slate-100"
-                                    @click="selectedImage = item"
-                                >
-                                    <img
-                                        :src="item.thumbnail_url || item.image_url"
-                                        :alt="item.cloudTypeName"
-                                        class="h-52 w-full object-cover transition-transform hover:scale-105"
-                                    />
-                                </button>
-                                <div class="p-4">
-                                    <div class="flex items-start justify-between gap-3">
-                                        <div class="min-w-0">
-                                            <p class="truncate font-semibold text-slate-950">
-                                                {{ item.cloudTypeName }}
-                                            </p>
-                                            <p class="mt-1 truncate text-sm text-slate-500">
-                                                {{ item.username }} ·
-                                                {{ formatCoordinate(item.latitude) }},
-                                                {{ formatCoordinate(item.longitude) }}
-                                            </p>
-                                        </div>
-                                        <div class="flex items-start gap-2">
-                                            <NTag
-                                                size="small"
-                                                :bordered="false"
-                                                :class="statusMeta[item.status].chip"
-                                            >
-                                                {{ statusMeta[item.status].label }}
-                                            </NTag>
-                                            <input
-                                                type="checkbox"
-                                                class="mt-0.5 h-5 w-5"
-                                                :checked="selectedImageIds.has(item.id)"
-                                                @change="toggleImageSelection(item.id)"
-                                            />
-                                        </div>
-                                    </div>
-                                    <div class="mt-4 flex flex-wrap gap-2">
-                                        <NButton
-                                            size="small"
-                                            type="default"
-                                            secondary
-                                            strong
-                                            class="oc-panel-button oc-panel-button--neutral"
-                                            @click="selectedImage = item"
-                                            >查看</NButton
-                                        >
-                                        <NButton
-                                            size="small"
-                                            type="default"
-                                            secondary
-                                            strong
-                                            class="oc-panel-button oc-panel-button--teal"
-                                            :disabled="item.status === 'approved'"
-                                            :loading="actionLoading"
-                                            @click="updateCloudStatus([item.id], 'approved')"
-                                            >通过</NButton
-                                        >
-                                        <NButton
-                                            size="small"
-                                            type="default"
-                                            secondary
-                                            strong
-                                            class="oc-panel-button oc-panel-button--danger"
-                                            :disabled="item.status === 'rejected'"
-                                            :loading="actionLoading"
-                                            @click="updateCloudStatus([item.id], 'rejected')"
-                                            >拒绝</NButton
-                                        >
-                                        <NButton
-                                            size="small"
-                                            type="default"
-                                            secondary
-                                            strong
-                                            class="oc-panel-button oc-panel-button--danger"
-                                            :loading="actionLoading"
-                                            @click="deleteImage(item)"
-                                        >
-                                            <template #icon
-                                                ><NIcon><Trash /></NIcon
-                                            ></template>
-                                            删除
-                                        </NButton>
-                                    </div>
-                                </div>
-                            </article>
-                        </div>
-
-                        <div
-                            v-else
-                            class="oc-panel-card border border-dashed border-slate-300 bg-white p-10"
-                        >
-                            <NEmpty description="没有符合筛选条件的图片" />
-                        </div>
-                    </section>
-                </template>
-            </main>
-        </div>
-
-        <Teleport to="body">
-            <div
-                v-if="cloudTypeEditorOpen"
-                class="fixed inset-0 z-[140] flex items-center justify-center overflow-y-auto bg-slate-950/60 px-4 py-6"
-                @click="closeCloudTypeEditor"
-            >
-                <form
-                    class="oc-modal-shell my-auto w-full max-w-2xl"
-                    @click.stop
-                    @submit.prevent="saveCloudType"
-                >
-                    <div
-                        class="flex items-start justify-between gap-4 border-b border-slate-200 px-5 py-4 sm:px-6 sm:py-5"
+                    <div>
+                        <label for="type-genus" class="oc-field-label">云属</label
+                        ><NInput
+                            v-model:value="typeForm.genus"
+                            placeholder="例如：Cumulus"
+                            :input-props="{ id: 'type-genus' }"
+                        />
+                    </div>
+                    <div>
+                        <label for="type-rarity" class="oc-field-label"
+                            >稀有度 <span class="oc-field-required">*</span></label
+                        ><input
+                            id="type-rarity"
+                            v-model="typeForm.rarity"
+                            class="oc-field-control"
+                            type="number"
+                            step="1"
+                            required
+                        />
+                        <p class="oc-field-help">整数，遵循现有图鉴等级约定。</p>
+                    </div>
+                    <div>
+                        <label for="type-icon" class="oc-field-label">图标 ID</label
+                        ><NInput
+                            v-model:value="typeForm.iconId"
+                            placeholder="UUID，可留空"
+                            :input-props="{ id: 'type-icon' }"
+                        />
+                    </div>
+                </div>
+                <div>
+                    <label for="type-description" class="oc-field-label">辨识说明</label
+                    ><NInput
+                        v-model:value="typeForm.description"
+                        type="textarea"
+                        :maxlength="128"
+                        show-count
+                        :autosize="{ minRows: 3, maxRows: 5 }"
+                        :input-props="{ id: 'type-description' }"
+                    />
+                </div>
+                <div class="admin-form-actions">
+                    <NButton
+                        type="default"
+                        class="oc-panel-button oc-panel-button--neutral"
+                        :disabled="busy"
+                        @click="typeOpen = false"
+                        >取消</NButton
+                    ><NButton
+                        attr-type="submit"
+                        type="default"
+                        class="oc-panel-button oc-panel-button--sky"
+                        :loading="busy"
+                        >{{ editingTypeId === null ? '创建云类型' : '保存修改' }}</NButton
                     >
-                        <div>
-                            <p class="oc-section-label">Cloud Type Editor</p>
-                            <h3 class="mt-2 text-xl font-semibold text-slate-900">
-                                {{ editingCloudType ? '编辑云类型' : '添加云类型' }}
-                            </h3>
-                            <p class="oc-field-help">
-                                {{
-                                    editingCloudType
-                                        ? `正在编辑类型 #${editingCloudType.id}`
-                                        : '类型 ID 将由服务端自动生成。'
-                                }}
-                            </p>
-                        </div>
-                        <button
-                            type="button"
-                            class="oc-icon-button"
-                            aria-label="关闭云类型编辑窗口"
-                            title="关闭云类型编辑窗口"
-                            @click="closeCloudTypeEditor"
-                        >
-                            <NIcon size="20"><X /></NIcon>
-                        </button>
-                    </div>
-
-                    <div class="grid gap-4 px-5 py-5 sm:grid-cols-2 sm:px-6">
-                        <NAlert
-                            v-if="cloudTypeFormError"
-                            class="sm:col-span-2"
-                            type="error"
-                            :show-icon="false"
-                            :bordered="false"
-                        >
-                            {{ cloudTypeFormError }}
-                        </NAlert>
-
-                        <div>
-                            <label class="oc-field-label"
-                                >类型名称 <span class="oc-field-required">*</span></label
-                            >
-                            <NInput
-                                v-model:value="cloudTypeForm.name"
-                                placeholder="例如：积云"
-                                :input-props="{ name: 'cloud-type-name', required: true }"
-                            />
-                        </div>
-                        <div>
-                            <label class="oc-field-label">云属</label>
-                            <NInput
-                                v-model:value="cloudTypeForm.genus"
-                                placeholder="例如：Cumulus"
-                            />
-                            <p class="oc-field-help">留空将保存为未设置。</p>
-                        </div>
-                        <div>
-                            <label class="oc-field-label"
-                                >稀有度 <span class="oc-field-required">*</span></label
-                            >
-                            <input
-                                v-model="cloudTypeForm.rarity"
-                                class="oc-field-control"
-                                type="number"
-                                step="1"
-                                inputmode="numeric"
-                                name="cloud-type-rarity"
-                                required
-                            />
-                            <p class="oc-field-help">请输入整数，具体等级含义由后端数据约定。</p>
-                        </div>
-                        <div>
-                            <label class="oc-field-label">图标 ID</label>
-                            <NInput
-                                v-model:value="cloudTypeForm.iconId"
-                                placeholder="UUID，可留空"
-                            />
-                            <p class="oc-field-help">留空可清除已有图标关联。</p>
-                        </div>
-                        <div class="sm:col-span-2">
-                            <label class="oc-field-label"
-                                >描述 <span class="oc-field-required">*</span></label
-                            >
-                            <NInput
-                                v-model:value="cloudTypeForm.description"
-                                type="textarea"
-                                :maxlength="128"
-                                show-count
-                                :autosize="{ minRows: 3, maxRows: 5 }"
-                                placeholder="填写辨识特征；允许留空"
-                            />
-                        </div>
-                    </div>
-
-                    <div
-                        class="flex items-center justify-end gap-3 border-t border-slate-200 px-5 py-4 sm:px-6"
-                    >
-                        <NButton
-                            type="default"
-                            secondary
-                            strong
-                            class="oc-panel-button oc-panel-button--neutral"
-                            :disabled="actionLoading"
-                            @click="closeCloudTypeEditor"
-                        >
-                            取消
-                        </NButton>
-                        <NButton
-                            attr-type="submit"
-                            type="default"
-                            secondary
-                            strong
-                            class="oc-panel-button oc-panel-button--sky"
-                            :loading="actionLoading"
-                        >
-                            {{ editingCloudType ? '保存修改' : '添加类型' }}
-                        </NButton>
-                    </div>
-                </form>
-            </div>
-        </Teleport>
-
-        <Teleport to="body">
-            <div
-                v-if="passwordTarget"
-                class="fixed inset-0 z-[140] flex items-center justify-center bg-slate-950/60 px-4 py-6"
-                @click="closePasswordReset"
-            >
-                <form
-                    class="oc-modal-shell w-full max-w-lg"
-                    @click.stop
-                    @submit.prevent="resetUserPassword"
-                >
-                    <div
-                        class="flex items-start justify-between gap-4 border-b border-slate-200 px-5 py-4 sm:px-6 sm:py-5"
-                    >
-                        <div class="min-w-0">
-                            <p class="oc-section-label">Admin Credential</p>
-                            <h3 class="mt-2 text-xl font-semibold text-slate-900">重置用户密码</h3>
-                            <p class="oc-field-help truncate">
-                                @{{ passwordTarget.username }} · {{ passwordTarget.email }}
-                            </p>
-                        </div>
-                        <button
-                            type="button"
-                            class="oc-icon-button"
-                            aria-label="关闭密码重置窗口"
-                            title="关闭密码重置窗口"
-                            @click="closePasswordReset"
-                        >
-                            <NIcon size="20"><X /></NIcon>
-                        </button>
-                    </div>
-
-                    <div class="grid gap-4 px-5 py-5 sm:px-6">
-                        <NAlert
-                            v-if="passwordError"
-                            type="error"
-                            :show-icon="false"
-                            :bordered="false"
-                        >
-                            {{ passwordError }}
-                        </NAlert>
-                        <div>
-                            <label class="oc-field-label"
-                                >新密码 <span class="oc-field-required">*</span></label
-                            >
-                            <NInput
-                                v-model:value="newPassword"
-                                type="password"
-                                show-password-on="click"
-                                placeholder="至少 8 位"
-                                :input-props="{
-                                    autocomplete: 'new-password',
-                                    name: 'admin-new-password',
-                                    required: true,
-                                }"
-                            />
-                        </div>
-                        <div>
-                            <label class="oc-field-label"
-                                >确认新密码 <span class="oc-field-required">*</span></label
-                            >
-                            <NInput
-                                v-model:value="confirmPassword"
-                                type="password"
-                                show-password-on="click"
-                                placeholder="再次输入新密码"
-                                :input-props="{
-                                    autocomplete: 'new-password',
-                                    name: 'admin-confirm-new-password',
-                                    required: true,
-                                }"
-                            />
-                        </div>
-                        <p
-                            class="border border-amber-200 bg-amber-50 px-3 py-2.5 text-xs leading-5 text-amber-800"
-                        >
-                            保存后，该用户所有设备上的现有登录状态都会立即失效。
-                        </p>
-                    </div>
-
-                    <div
-                        class="flex items-center justify-end gap-3 border-t border-slate-200 px-5 py-4 sm:px-6"
-                    >
-                        <NButton
-                            type="default"
-                            secondary
-                            strong
-                            class="oc-panel-button oc-panel-button--neutral"
-                            :disabled="actionLoading"
-                            @click="closePasswordReset"
-                        >
-                            取消
-                        </NButton>
-                        <NButton
-                            attr-type="submit"
-                            type="default"
-                            secondary
-                            strong
-                            class="oc-panel-button oc-panel-button--amber"
-                            :loading="actionLoading"
-                        >
-                            确认重置
-                        </NButton>
-                    </div>
-                </form>
-            </div>
-        </Teleport>
+                </div>
+            </form>
+        </NModal>
 
         <ImageDetailModal
             v-if="selectedImage"
             :open="!!selectedImage"
             :image-url="selectedImage.image_url"
             :thumbnail-url="selectedImage.thumbnail_url"
-            :image-alt="selectedImage.cloudTypeName"
-            :title="selectedImage.cloudTypeName"
+            :image-alt="selectedImage.cloud_type_name || '云图'"
+            :title="selectedImage.cloud_type_name || '未知云型'"
             :subtitle="`上传者：${selectedImage.username}`"
-            :badge-label="`稀有度 ${selectedImage.cloudTypeRarity}`"
+            :badge-label="statusMeta[selectedImage.status].label"
             badge-class="border-sky-200 bg-sky-100 text-sky-700"
-            @close="selectedImage = null"
+            @close="selectedId = null"
         >
             <div class="grid gap-4 sm:grid-cols-2">
                 <div class="oc-inset-panel">
                     <p class="oc-section-label">上传时间</p>
-                    <p class="mt-2 text-sm font-medium text-slate-900">
-                        {{ formatDateTime(selectedImage.created_at) }}
-                    </p>
+                    <p class="mt-2 text-sm">{{ formatDateTime(selectedImage.created_at) }}</p>
                 </div>
                 <div class="oc-inset-panel">
                     <p class="oc-section-label">拍摄时间</p>
-                    <p class="mt-2 text-sm font-medium text-slate-900">
-                        {{ formatDateTime(selectedImage.captured_at) }}
-                    </p>
+                    <p class="mt-2 text-sm">{{ formatDateTime(selectedImage.captured_at) }}</p>
                 </div>
                 <div class="oc-inset-panel">
-                    <p class="oc-section-label">状态</p>
-                    <p class="mt-2 text-sm font-medium text-slate-900">
-                        {{ statusMeta[selectedImage.status].label }} /
-                        {{ selectedImage.is_hidden ? '隐藏' : '公开' }}
-                    </p>
+                    <p class="oc-section-label">可见性</p>
+                    <p class="mt-2 text-sm">{{ visibilityLabel(selectedImage) }}</p>
                 </div>
                 <div class="oc-inset-panel">
-                    <p class="oc-section-label">模糊化经纬度</p>
-                    <p class="mt-2 text-sm font-medium text-slate-900">
-                        纬度 {{ formatCoordinate(selectedImage.latitude) }} / 经度
-                        {{ formatCoordinate(selectedImage.longitude) }}
-                    </p>
+                    <p class="oc-section-label">稀有度</p>
+                    <p class="mt-2 text-sm">{{ selectedImage.cloud_type_rarity ?? '未记录' }}</p>
                 </div>
             </div>
-
-            <div class="mt-5 border border-slate-200 bg-white p-5">
-                <p class="oc-section-label">图片说明</p>
-                <p class="mt-3 text-sm leading-7 text-slate-700">
-                    {{ selectedImage.description || '上传者没有留下额外说明。' }}
-                </p>
+            <p class="my-5 break-words text-sm leading-7 text-slate-600">
+                {{ selectedImage.description || '上传者没有留下额外说明。' }}
+            </p>
+            <div class="mb-5 flex flex-wrap gap-3">
+                <NButton
+                    type="default"
+                    class="oc-panel-button oc-panel-button--teal"
+                    :disabled="disabled || selectedImage.status === 'approved'"
+                    @click="review([selectedImage.id], 'approved')"
+                    >通过审核</NButton
+                ><NButton
+                    type="default"
+                    class="oc-panel-button oc-panel-button--amber"
+                    :disabled="disabled || selectedImage.status === 'rejected'"
+                    @click="review([selectedImage.id], 'rejected')"
+                    >拒绝审核</NButton
+                ><NButton
+                    type="default"
+                    class="oc-panel-button oc-panel-button--danger"
+                    :disabled="disabled"
+                    @click="removeClouds([selectedImage])"
+                    >删除云图</NButton
+                >
             </div>
             <MiniLocationMap
                 :latitude="selectedImage.latitude"
                 :longitude="selectedImage.longitude"
-            />
-        </ImageDetailModal>
+        /></ImageDetailModal>
     </div>
 </template>
-
-<style scoped>
-.admin-brand-icon {
-    box-shadow: var(--oc-shadow-sky);
-}
-
-.admin-control-active {
-    box-shadow: var(--oc-shadow-primary);
-}
-
-.admin-priority-card--pending {
-    box-shadow: var(--oc-shadow-amber);
-}
-
-.admin-priority-card--clear {
-    box-shadow: var(--oc-shadow-primary-hover);
-}
-</style>
diff --git a/tests/admin.test.mjs b/tests/admin.test.mjs
new file mode 100644
index 0000000..27c1f1e
--- /dev/null
+++ b/tests/admin.test.mjs
@@ -0,0 +1,75 @@
+import assert from 'node:assert/strict'
+import { afterEach, mock, test } from 'node:test'
+import { createUser, reviewClouds } from '../src/features/admin/api.ts'
+import { serializeCsv, visibilityLabel } from '../src/features/admin/models.ts'
+
+afterEach(() => mock.restoreAll())
+
+test('admin review preserves completed batches when a later batch fails', async () => {
+    const completed = []
+    let call = 0
+    mock.method(globalThis, 'fetch', async (url, options) => {
+        assert.equal(new URL(url).pathname, '/admin/clouds/review')
+        assert.equal(options.credentials, 'include')
+        const body = JSON.parse(options.body)
+        assert.equal(body.review_status, 'approved')
+        assert.ok(body.cloud_ids.length <= 100)
+        return ++call === 1
+            ? Response.json({ message: '成功' })
+            : Response.json({ message: '服务暂不可用' }, { status: 503 })
+    })
+    const ids = Array.from({ length: 101 }, (_, index) => `cloud-${index}`)
+    await assert.rejects(
+        reviewClouds(ids, 'approved', batch => completed.push(...batch)),
+        /服务暂不可用/,
+    )
+    assert.deepEqual(completed, ids.slice(0, 100))
+    assert.equal(call, 2)
+})
+
+test('admin account creation returns email delivery status without retrying creation', async () => {
+    const body = {
+        username: '观云者',
+        email: 'observer@example.test',
+        password: 'test-password',
+        role: 'user',
+    }
+    const fetch = mock.method(globalThis, 'fetch', async (url, options) => {
+        assert.equal(new URL(url).pathname, '/admin/users')
+        assert.equal(options.method, 'POST')
+        assert.equal(options.credentials, 'include')
+        assert.deepEqual(JSON.parse(options.body), body)
+        return Response.json(
+            { message: '已创建，邮件发送失败', user_id: 'new-user', email_sent: false },
+            { status: 201 },
+        )
+    })
+    assert.equal((await createUser(body)).email_sent, false)
+    assert.equal(fetch.mock.callCount(), 1)
+})
+
+test('CSV exports escape untrusted text, formulas, quotes and multiline descriptions', () => {
+    const csv = serializeCsv(
+        ['用户名', '说明'],
+        [
+            ['=HYPERLINK("test")', '第一行\n第二行'],
+            [' @SUM(1)', '云,"雨"'],
+            ['-1+2', '\t=1'],
+        ],
+    )
+    assert.ok(csv.startsWith('\uFEFF'))
+    assert.ok(csv.includes('"\'=HYPERLINK(""test"")"'))
+    assert.ok(csv.includes('"\' @SUM(1)"'))
+    assert.ok(csv.includes('"\'-1+2"'))
+    assert.ok(csv.includes('"\'\t=1"'))
+    assert.ok(csv.includes('"云,""雨"""'))
+    assert.ok(csv.includes('"第一行\n第二行"'))
+})
+
+test('pending and rejected images are never labeled publicly visible', () => {
+    for (const status of ['pending', 'rejected']) {
+        assert.equal(visibilityLabel({ status, is_hidden: false }), '尚未公开')
+    }
+    assert.equal(visibilityLabel({ status: 'approved', is_hidden: false }), '公开可见')
+    assert.equal(visibilityLabel({ status: 'approved', is_hidden: true }), '用户隐藏')
+})