feat(admin): 优化访问管理布局与操作流程 (#125)

统一用户账号与 API Key 管理入口，增强筛选、状态反馈、审计联动及危险操作保护，并补充组件化布局与回归测试。
2026-09-01 13:37:00 +08:00 · 2026-08-11 11:42:55 +08:00
parent 0e615677db
commit 0aa3cc92df
11 changed files with 1064 additions and 204 deletions
@@ -0,0 +1,50 @@
+import { Typography } from '@arco-design/web-react'
+import type { ReactNode } from 'react'
+
+export interface AdminMetric {
+  label: string
+  value: ReactNode
+  detail: string
+}
+
+interface AdminDataSectionProps {
+  title: string
+  description: string
+  actions?: ReactNode
+  metrics: AdminMetric[]
+  toolbar: ReactNode
+  children: ReactNode
+}
+
+export function AdminDataSection({ title, description, actions, metrics, toolbar, children }: AdminDataSectionProps) {
+  return (
+    <section className="admin-section" aria-labelledby="admin-section-title">
+      <header className="admin-section__header">
+        <div>
+          <Typography.Title id="admin-section-title" heading={5} className="admin-section__title">
+            {title}
+          </Typography.Title>
+          <Typography.Paragraph type="secondary" className="admin-section__description">
+            {description}
+          </Typography.Paragraph>
+        </div>
+        {actions}
+      </header>
+
+      <div className="admin-summary" aria-label={`${title}概览`}>
+        {metrics.map((metric) => (
+          <div key={metric.label} className="admin-summary__item">
+            <Typography.Text type="secondary">{metric.label}</Typography.Text>
+            <span className="admin-summary__value">{metric.value}</span>
+            <span className="admin-summary__detail">{metric.detail}</span>
+          </div>
+        ))}
+      </div>
+
+      <div className="admin-data-panel">
+        {toolbar}
+        {children}
+      </div>
+    </section>
+  )
+}
@@ -0,0 +1,34 @@
+import { Select } from '@arco-design/web-react'
+import type { CSSProperties } from 'react'
+import type { UserRole } from '../../services/users'
+
+export const adminRoleOptions = [
+  { label: '管理员 (admin)', value: 'admin' },
+  { label: '运维 (operator)', value: 'operator' },
+  { label: '只读 (viewer)', value: 'viewer' },
+]
+
+export const adminRoleDescriptions: Record<UserRole, string> = {
+  admin: '拥有系统配置、账号与访问凭据的完整管理权限。',
+  operator: '可执行日常备份、恢复和节点运维操作。',
+  viewer: '仅可查看仪表盘和允许读取的数据。',
+}
+
+interface AdminRoleSelectProps {
+  value: UserRole
+  onChange: (role: UserRole) => void
+  disabled?: boolean
+  style?: CSSProperties
+}
+
+export function AdminRoleSelect({ value, onChange, disabled, style }: AdminRoleSelectProps) {
+  return (
+    <Select
+      value={value}
+      options={adminRoleOptions}
+      disabled={disabled}
+      style={style}
+      onChange={(role) => onChange(role as UserRole)}
+    />
+  )
+}