feat: admin frontend - React + Vite, auth pages, user management, roles, permissions, webhooks, devices, logs

frontend/admin/src/styles/global.css

@@ -0,0 +1,85 @@
+/**
+ * 全局样式
+ */
+
+/* 引入 Design Tokens */
+@import './tokens.css';
+
+/* 重置和基础样式 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  height: 100%;
+  font-family: var(--font-family-sans);
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--color-text-base);
+  background-color: var(--color-canvas);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  height: 100%;
+}
+
+/* 等宽字体用于代码、ID、时间戳 */
+code,
+.mono {
+  font-family: var(--font-family-mono);
+}
+
+/* 链接 */
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+}
+
+/* 滚动条样式 - 使用双冒号 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-surface-muted);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-border-strong);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-muted);
+}
+
+/* 选中文本 - 使用双冒号 */
+::selection {
+  background-color: rgba(14, 90, 106, 0.2);
+  color: var(--color-text-strong);
+}
+
+/* 确保Ant Design菜单可点击 */
+.ant-menu-item,
+.ant-menu-submenu-title {
+  pointer-events: auto !important;
+  cursor: pointer !important;
+}
+
+/* 确保链接和按钮可点击 */
+a,
+button {
+  pointer-events: auto !important;
+}

frontend/admin/src/styles/tokens.css

@@ -0,0 +1,72 @@
+/**
+ * Admin UI Design Tokens
+ * 基于 Mineral Console 视觉方向
+ * 来源：docs/design/admin-ui-tokens.css
+ */
+
+:root {
+  /* 字体 */
+  --font-family-sans: "IBM Plex Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --font-family-mono: "JetBrains Mono", "Consolas", monospace;
+
+  /* 背景色 */
+  --color-canvas: #f4f1ea;
+  --color-layout: #e9e3d5;
+  --color-surface: #ffffff;
+  --color-surface-muted: #f8f5ef;
+  --color-surface-strong: #ddd5c6;
+
+  /* 文本色 */
+  --color-text-strong: #17212b;
+  --color-text-base: #314150;
+  --color-text-muted: #677380;
+  --color-text-inverse: #f8fafc;
+
+  /* 边框色 */
+  --color-border-soft: #d6d0c3;
+  --color-border-strong: #bfb6a6;
+
+  /* 功能色 */
+  --color-primary: #0e5a6a;
+  --color-primary-hover: #0a4b59;
+  --color-accent: #c26d3a;
+  --color-success: #217a5b;
+  --color-warning: #b7791f;
+  --color-danger: #b33a3a;
+  --color-info: #2d6a9f;
+
+  /* 渐变 - Shell 背景 */
+  --gradient-shell: linear-gradient(180deg, rgba(14, 90, 106, 0.08) 0%, rgba(14, 90, 106, 0) 28%),
+    linear-gradient(135deg, #f7f4ee 0%, #ebe5d7 100%);
+
+  /* 布局尺寸 */
+  --sidebar-width: 248px;
+  --sidebar-width-collapsed: 84px;
+  --topbar-height: 64px;
+  --page-max-width: 1440px;
+
+  /* 间距 */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-7: 40px;
+  --space-8: 48px;
+
+  /* 圆角 */
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 20px;
+
+  /* 阴影 */
+  --shadow-card: 0 10px 30px rgba(23, 33, 43, 0.06);
+  --shadow-float: 0 20px 60px rgba(23, 33, 43, 0.12);
+
+  /* 动画 */
+  --motion-fast: 140ms;
+  --motion-base: 220ms;
+  --motion-slow: 320ms;
+  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
+}