@zhin.js/console 1.0.21 → 1.0.23

package/client/src/style.css

@@ -2,406 +2,157 @@
 @config "../tailwind.config.js";
 
 /* ============================================
-   Radix UI Themes - 主题定制
-   基于官方文档: https://www.radix-ui.com/themes/docs/overview/getting-started
+   shadcn/ui Base Styles - Zinc Black/White/Gray
    ============================================ */
 
-/* ============================================
-   自定义 CSS Tokens (全局变量)
-   Radix UI Themes 使用 CSS 变量系统
-   ============================================ */
-
-:root,
-.light,
-.light-theme {
-  /* 动画和过渡 */
-  --transition-duration: 200ms;
-  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
-  
-  /* 自定义阴影增强 */
-  --shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-2: 0 2px 4px -1px rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.04);
-  --shadow-3: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06);
-  --shadow-4: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05);
-  --shadow-5: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.04);
-  
-  /* Glassmorphism 效果 */
-  --glass-bg: rgba(255, 255, 255, 0.75);
-  --glass-border: rgba(255, 255, 255, 0.2);
-  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
-  
-  /* 自定义渐变 */
-  --gradient-primary: linear-gradient(135deg, var(--accent-9) 0%, var(--purple-9) 100%);
-  --gradient-success: linear-gradient(135deg, var(--green-9) 0%, var(--teal-9) 100%);
-  --gradient-warning: linear-gradient(135deg, var(--amber-9) 0%, var(--orange-9) 100%);
-  --gradient-danger: linear-gradient(135deg, var(--red-9) 0%, var(--crimson-9) 100%);
-  --gradient-info: linear-gradient(135deg, var(--blue-9) 0%, var(--cyan-9) 100%);
-}
-
-.dark,
-.dark-theme {
-  /* 暗色模式下的 Glassmorphism */
-  --glass-bg: rgba(0, 0, 0, 0.5);
-  --glass-border: rgba(255, 255, 255, 0.1);
-  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
-  
-  /* 暗色模式阴影增强 */
-  --shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.3);
-  --shadow-2: 0 2px 4px -1px rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.2);
-  --shadow-3: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.3);
-  --shadow-4: 0 10px 15px -3px rgb(0 0 0 / 0.6), 0 4px 6px -4px rgb(0 0 0 / 0.4);
-  --shadow-5: 0 20px 25px -5px rgb(0 0 0 / 0.7), 0 8px 10px -6px rgb(0 0 0 / 0.5);
-}
-
-/* ============================================
-   全局样式优化
-   ============================================ */
-
-* {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+    --sidebar: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 240 5.9% 10%;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --sidebar: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 0 0% 98%;
+    --sidebar-primary-foreground: 240 5.9% 10%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-html {
-  scroll-behavior: smooth;
-}
+  html {
+    scroll-behavior: smooth;
+  }
 
-body {
-  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+  }
 }
 
 /* ============================================
-   滚动条美化 (适配明暗主题)
+   Scrollbar Styling
    ============================================ */
 
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 8px;
+  height: 8px;
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--gray-3);
-  border-radius: var(--radius-2);
+  background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--gray-8);
-  border-radius: var(--radius-2);
-  border: 2px solid var(--gray-3);
-  transition: background var(--transition-duration) var(--transition-timing);
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-10);
+  background: hsl(var(--muted-foreground) / 0.5);
 }
 
 /* ============================================
-   Radix UI 组件微调
-   使用 data-* 选择器覆盖，保持 Radix 原生样式
-   ============================================ */
-
-/* Card - 卡片增强 */
-.rt-Card {
-  transition: all var(--transition-duration) var(--transition-timing);
-}
-
-.rt-Card[data-accent-color]:hover {
-  box-shadow: var(--shadow-3);
-  transform: translateY(-2px);
-}
-
-/* Button - 按钮微动效 */
-.rt-Button {
-  transition: all var(--transition-duration) var(--transition-timing);
-  font-weight: 500;
-}
-
-.rt-Button:not(:disabled):hover {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-2);
-}
-
-.rt-Button:not(:disabled):active {
-  transform: translateY(0);
-  box-shadow: var(--shadow-1);
-}
-
-.rt-Button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* TextField - 输入框聚焦增强 */
-.rt-TextFieldInput,
-.rt-TextAreaInput {
-  transition: all var(--transition-duration) var(--transition-timing);
-}
-
-.rt-TextFieldInput:focus-visible,
-.rt-TextAreaInput:focus-visible {
-  box-shadow: 0 0 0 3px var(--accent-a5);
-  outline: none;
-}
-
-/* Badge - 徽章微动效 */
-.rt-Badge {
-  font-weight: 600;
-  transition: transform var(--transition-duration) var(--transition-timing);
-}
-
-.rt-Badge:hover {
-  transform: scale(1.05);
-}
-
-/* Select - 选择器增强 */
-.rt-SelectTrigger {
-  transition: all var(--transition-duration) var(--transition-timing);
-}
-
-.rt-SelectTrigger:hover:not([data-disabled]) {
-  background-color: var(--gray-a3);
-}
-
-.rt-SelectContent {
-  box-shadow: var(--shadow-5);
-  animation: slideDownAndFade 200ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-/* Checkbox - 复选框增强 */
-.rt-CheckboxButton {
-  transition: all var(--transition-duration) var(--transition-timing);
-}
-
-.rt-CheckboxButton:hover:not([data-disabled]) {
-  background-color: var(--accent-a3);
-}
-
-/* Switch - 开关增强 */
-.rt-SwitchButton {
-  transition: all var(--transition-duration) var(--transition-timing);
-}
-
-.rt-SwitchButton:hover:not([data-disabled]) {
-  box-shadow: var(--shadow-2);
-}
-
-/* Tabs - 标签页增强 */
-.rt-TabsList {
-  background-color: var(--gray-a2);
-  padding: 4px;
-  border-radius: calc(var(--radius-3) + 2px);
-}
-
-.rt-TabsTrigger {
-  transition: all var(--transition-duration) var(--transition-timing);
-  font-weight: 500;
-}
-
-.rt-TabsTrigger[data-state="active"] {
-  box-shadow: var(--shadow-1);
-}
-
-/* Dialog - 对话框动画 */
-.rt-DialogContent {
-  animation: contentShow 200ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-/* DropdownMenu - 下拉菜单动画 */
-.rt-DropdownMenuContent {
-  animation: slideDownAndFade 200ms cubic-bezier(0.16, 1, 0.3, 1);
-  box-shadow: var(--shadow-5);
-}
-
-/* Popover - 弹出框动画 */
-.rt-PopoverContent {
-  animation: slideDownAndFade 200ms cubic-bezier(0.16, 1, 0.3, 1);
-  box-shadow: var(--shadow-4);
-}
-
-/* Tooltip - 工具提示 */
-.rt-TooltipContent {
-  animation: slideDownAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  box-shadow: var(--shadow-3);
-}
-
-/* Separator - 分隔线增强 */
-.rt-Separator[data-orientation="horizontal"] {
-  background: linear-gradient(
-    90deg,
-    transparent,
-    var(--gray-a6) 20%,
-    var(--gray-a6) 80%,
-    transparent
-  );
-}
-
-.rt-Separator[data-orientation="vertical"] {
-  background: linear-gradient(
-    180deg,
-    transparent,
-    var(--gray-a6) 20%,
-    var(--gray-a6) 80%,
-    transparent
-  );
-}
-
-/* ============================================
-   自定义动画关键帧
+   Animations
    ============================================ */
 
 @keyframes slideDownAndFade {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 @keyframes slideUpAndFade {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 @keyframes contentShow {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
+  from { opacity: 0; transform: scale(0.96); }
+  to { opacity: 1; transform: scale(1); }
 }
 
 @keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-/* ============================================
-   工具类 (与 Tailwind 配合使用)
-   ============================================ */
-
-/* Glassmorphism 效果 */
-.glass {
-  background: var(--glass-bg) !important;
-  backdrop-filter: blur(12px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--glass-shadow);
-}
-
-/* 渐变背景 */
-.gradient-primary {
-  background: var(--gradient-primary);
-  color: white;
-}
-
-.gradient-success {
-  background: var(--gradient-success);
-  color: white;
-}
-
-.gradient-warning {
-  background: var(--gradient-warning);
-  color: white;
-}
-
-.gradient-danger {
-  background: var(--gradient-danger);
-  color: white;
-}
-
-.gradient-info {
-  background: var(--gradient-info);
-  color: white;
-}
-
-/* 文本渐变 */
-.text-gradient {
-  background: var(--gradient-primary);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-/* 悬停提升效果 */
-.hover-lift {
-  transition: transform var(--transition-duration) var(--transition-timing),
-              box-shadow var(--transition-duration) var(--transition-timing);
+@keyframes pulse-soft {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
 }
 
-.hover-lift:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-4);
-}
-
-/* 悬停发光效果 */
-.hover-glow:hover {
-  box-shadow: 0 0 20px var(--accent-a5);
-}
-
-/* 平滑过渡 */
-.transition-smooth {
-  transition: all var(--transition-duration) var(--transition-timing);
-}
-
-/* ============================================
-   响应式优化
-   ============================================ */
-
-@media (max-width: 768px) {
-  /* 移动端禁用悬停效果 */
-  .rt-Card[data-accent-color]:hover,
-  .rt-Button:not(:disabled):hover,
-  .hover-lift:hover {
-    transform: none;
-  }
-  
-  /* 减小阴影 */
-  .rt-Card[data-accent-color]:hover {
-    box-shadow: var(--shadow-2);
-  }
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 /* ============================================
-   无障碍优化
+   Accessibility
    ============================================ */
 
-/* 聚焦可见性增强 */
 *:focus-visible {
-  outline: 2px solid var(--accent-9);
+  outline: 2px solid hsl(var(--ring));
   outline-offset: 2px;
-  border-radius: var(--radius-2);
+  border-radius: calc(var(--radius) - 2px);
 }
 
-/* 减少动画运动（用户偏好） */
 @media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
+  *, *::before, *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
@@ -409,383 +160,56 @@ body {
   }
 }
 
-/* 高对比度模式 */
-@media (prefers-contrast: high) {
-  .rt-Card,
-  .rt-Button,
-  .rt-Badge {
-    border-width: 2px;
-  }
-}
-
-/* ============================================
-   打印样式
-   ============================================ */
-
-@media print {
-  * {
-    animation: none !important;
-    transition: none !important;
-    box-shadow: none !important;
-  }
-  
-  .rt-Card {
-    border: 1px solid var(--gray-6);
-  }
-  
-  /* 隐藏不必要的元素 */
-  .rt-Button,
-  .no-print {
-    display: none;
-  }
-}
-
 /* ============================================
-   深色模式特定优化
+   Dashboard Layout Styles
    ============================================ */
 
-.dark .rt-Card {
-  /* 暗色模式下卡片背景稍微提亮 */
-  background-color: var(--gray-2);
-}
-
-.dark .rt-Button[data-variant="solid"] {
-  /* 暗色模式下实心按钮对比度增强 */
-  box-shadow: var(--shadow-2);
-}
-
-/* ============================================
-   性能优化
-   ============================================ */
-
-/* GPU 加速 */
-.rt-Card[data-accent-color],
-.rt-Button,
-.hover-lift {
-  will-change: transform;
-}
-
-/* 防止布局抖动 */
-.rt-Button {
-  contain: layout style paint;
-}
-
-/* ============================================
-   Dashboard 统一风格样式
-   ============================================ */
-
-/* 菜单项 / 频道项通用样式 */
-.menu-item,
-.channel-item {
+.menu-item {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding: 0.75rem;
-  border-radius: calc(var(--radius-3) + 4px);
-  transition: all var(--transition-duration) var(--transition-timing);
+  padding: 0.5rem 0.75rem;
+  border-radius: calc(var(--radius) + 2px);
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
-  position: relative;
-  overflow: hidden;
   text-decoration: none;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.875rem;
 }
 
-/* 默认状态 */
-.menu-item:not(.active),
-.channel-item:not(.active) {
-  color: var(--gray-11);
-}
-
-.dark .menu-item:not(.active),
-.dark .channel-item:not(.active) {
-  color: var(--gray-11);
-}
-
-/* 悬停状态 */
-.menu-item:not(.active):hover,
-.channel-item:not(.active):hover {
-  background-color: var(--gray-a3);
-}
-
-.dark .menu-item:not(.active):hover,
-.dark .channel-item:not(.active):hover {
-  background-color: var(--gray-a4);
-}
-
-/* 激活状态 - 渐变背景 */
-.menu-item.active,
-.channel-item.active {
-  background: linear-gradient(135deg, var(--blue-9) 0%, var(--purple-9) 100%);
-  color: white;
-  box-shadow: var(--shadow-3);
-}
-
-/* 图标容器 */
-.menu-item .icon,
-.channel-item .icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  transition: transform var(--transition-duration) var(--transition-timing);
-}
-
-/* 图标悬停缩放 */
-.menu-item:not(.active):hover .icon,
-.channel-item:not(.active):hover .icon {
-  transform: scale(1.1);
+.menu-item:hover:not(.active) {
+  background-color: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
 }
 
-/* 文本容器 */
-.menu-item .text,
-.channel-item .text {
-  flex: 1;
-  min-width: 0;
-}
-
-.menu-item .text .title,
-.channel-item .text .title {
-  font-size: var(--font-size-2);
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.menu-item .text .subtitle,
-.channel-item .text .subtitle {
-  font-size: var(--font-size-1);
-  color: var(--gray-a11);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.menu-item.active .text .subtitle,
-.channel-item.active .text .subtitle {
-  color: rgba(255, 255, 255, 0.8);
-}
-
-/* 激活指示点 */
-.menu-item.active .indicator,
-.channel-item.active .indicator {
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-.menu-item.active .indicator::after,
-.channel-item.active .indicator::after {
-  content: '';
-  display: block;
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: 50%;
-  background-color: white;
-}
-
-/* 徽章位置 */
-.menu-item .badge,
-.channel-item .badge {
-  flex-shrink: 0;
-}
-
-/* 卡片统一风格 */
-.dashboard-card {
-  background-color: white;
-  border: 1px solid var(--gray-a4);
-  border-radius: var(--radius-4);
-  box-shadow: var(--shadow-2);
-  transition: all var(--transition-duration) var(--transition-timing);
-}
-
-.dark .dashboard-card {
-  background-color: var(--gray-2);
-  border-color: var(--gray-a6);
-}
-
-.dashboard-card:hover {
-  box-shadow: var(--shadow-3);
-  transform: translateY(-2px);
-}
-
-/* 图标容器 - 圆形背景 */
-.icon-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border-radius: var(--radius-3);
-  transition: all var(--transition-duration) var(--transition-timing);
-}
-
-.icon-container.sm {
-  width: 2rem;
-  height: 2rem;
-  padding: 0.375rem;
-}
-
-.icon-container.md {
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0.5rem;
-}
-
-.icon-container.lg {
-  width: 3rem;
-  height: 3rem;
-  padding: 0.625rem;
-}
-
-/* 彩色图标背景 */
-.icon-container.blue {
-  background-color: var(--blue-a3);
-  color: var(--blue-9);
-}
-
-.icon-container.green {
-  background-color: var(--green-a3);
-  color: var(--green-9);
-}
-
-.icon-container.purple {
-  background-color: var(--purple-a3);
-  color: var(--purple-9);
-}
-
-.icon-container.orange {
-  background-color: var(--orange-a3);
-  color: var(--orange-9);
-}
-
-.icon-container.red {
-  background-color: var(--red-a3);
-  color: var(--red-9);
-}
-
-/* 暗色模式下图标容器 */
-.dark .icon-container.blue {
-  background-color: var(--blue-a4);
-  color: var(--blue-10);
-}
-
-.dark .icon-container.green {
-  background-color: var(--green-a4);
-  color: var(--green-10);
-}
-
-.dark .icon-container.purple {
-  background-color: var(--purple-a4);
-  color: var(--purple-10);
-}
-
-.dark .icon-container.orange {
-  background-color: var(--orange-a4);
-  color: var(--orange-10);
-}
-
-.dark .icon-container.red {
-  background-color: var(--red-a4);
-  color: var(--red-10);
-}
-
-/* 统计卡片 */
-.stat-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 1rem;
-  border-radius: var(--radius-3);
-  transition: all var(--transition-duration) var(--transition-timing);
-}
-
-.stat-card:hover {
-  transform: scale(1.02);
-}
-
-/* 页面标题区域 */
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.5rem;
-}
-
-.page-title {
-  font-size: var(--font-size-6);
-  font-weight: 600;
-  color: var(--gray-12);
-  margin: 0;
-}
-
-.dark .page-title {
-  color: var(--gray-12);
-}
-
-/* 空状态 */
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  padding: 3rem 1.5rem;
-  text-align: center;
-  color: var(--gray-a11);
-}
-
-.empty-state .icon {
-  width: 4rem;
-  height: 4rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background-color: var(--gray-a3);
-  color: var(--gray-a10);
-}
-
-.empty-state .title {
-  font-size: var(--font-size-4);
-  font-weight: 600;
-  color: var(--gray-12);
-  margin: 0;
-}
-
-.empty-state .description {
-  font-size: var(--font-size-2);
-  color: var(--gray-a11);
-  margin: 0;
+.menu-item.active {
+  background-color: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
 }
 
 /* ============================================
-   ProcessSandbox 响应式布局
+   Sandbox / Rich Text Editor
    ============================================ */
 
-/* 容器 */
 .sandbox-container {
   display: flex;
   gap: 1rem;
   padding: 1rem;
-  height: 100vh;
+  height: calc(100vh - 42px - 3rem);
   width: 100%;
   max-width: 100vw;
   position: relative;
   overflow: hidden;
 }
 
-/* 频道侧边栏 */
 .channel-sidebar {
   width: 256px;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  transition: transform var(--transition-duration) var(--transition-timing);
+  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* 聊天区域 */
 .chat-area {
   display: flex;
   flex-direction: column;
@@ -796,45 +220,22 @@ body {
   overflow: hidden;
 }
 
-/* 聊天区域内的卡片 */
-.chat-area > .rt-Card:nth-child(1) {
-  /* 顶部信息栏 - 固定高度 */
-  flex-shrink: 0;
-}
-
-.chat-area > .rt-Card:nth-child(2) {
-  /* 消息列表 - 自动填充剩余空间 */
-  flex: 1;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.chat-area > .rt-Card:nth-child(3) {
-  /* 输入框区域 - 固定高度 */
-  flex-shrink: 0;
-}
-
-/* 富文本编辑器样式 */
 .rich-text-editor {
   font-family: inherit;
-  transition: border-color var(--transition-duration) var(--transition-timing);
+  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .rich-text-editor:focus {
-  border-color: var(--blue-8) !important;
-  box-shadow: 0 0 0 1px var(--blue-8);
+  border-color: hsl(var(--ring)) !important;
+  box-shadow: 0 0 0 1px hsl(var(--ring));
 }
 
-/* 空编辑器占位符 */
 .rich-text-editor:empty::before {
   content: attr(data-placeholder);
-  color: var(--gray-a9);
+  color: hsl(var(--muted-foreground));
   pointer-events: none;
 }
 
-/* 编辑器内的元素样式 */
 .rich-text-editor .editor-face {
   width: 24px;
   height: 24px;
@@ -854,8 +255,8 @@ body {
   display: inline-flex;
   align-items: center;
   padding: 2px 6px;
-  background-color: var(--blue-a3);
-  color: var(--blue-11);
+  background-color: hsl(var(--accent));
+  color: hsl(var(--accent-foreground));
   border-radius: 4px;
   font-size: 0.9em;
   margin: 0 2px;
@@ -865,86 +266,60 @@ body {
 }
 
 .rich-text-editor .editor-at:hover {
-  background-color: var(--blue-a4);
+  background-color: hsl(var(--muted));
 }
 
 .rich-text-editor .editor-at-symbol {
   font-weight: 600;
   margin-right: 2px;
-  color: var(--blue-10);
 }
 
 .rich-text-editor .editor-at-name {
   font-weight: 500;
 }
 
-/* 暗色模式 */
-.dark .rich-text-editor {
-  background-color: var(--gray-2);
-  border-color: var(--gray-7);
-  color: var(--gray-12);
-}
-
-.dark .rich-text-editor:focus {
-  border-color: var(--blue-9) !important;
-  box-shadow: 0 0 0 1px var(--blue-9);
-}
-
-.dark .rich-text-editor:empty::before {
-  color: var(--gray-a8);
-}
-
-.dark .rich-text-editor .editor-at {
-  background-color: var(--blue-a4);
-  color: var(--blue-11);
-}
-
-.dark .rich-text-editor .editor-at:hover {
-  background-color: var(--blue-a5);
-}
-
-.dark .rich-text-editor .editor-at-symbol {
-  color: var(--blue-11);
-}
-
-/* 滚动条样式 */
 .rich-text-editor::-webkit-scrollbar {
   width: 6px;
 }
 
 .rich-text-editor::-webkit-scrollbar-thumb {
-  background: var(--gray-a6);
-  border-radius: var(--radius-2);
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 4px;
 }
 
 .rich-text-editor::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-a8);
+  background: hsl(var(--muted-foreground) / 0.5);
 }
 
-/* 移动端频道列表切换按钮 - 默认隐藏 */
-.mobile-channel-toggle {
-  display: none;
-}
+/* Mobile toggle */
+.mobile-channel-toggle { display: none; }
+.channel-overlay { display: none; }
 
-/* 频道列表遮罩层 - 默认隐藏 */
-.channel-overlay {
-  display: none;
+/* ============================================
+   Print Styles
+   ============================================ */
+
+@media print {
+  * {
+    animation: none !important;
+    transition: none !important;
+    box-shadow: none !important;
+  }
+  .no-print { display: none; }
 }
 
 /* ============================================
-   移动端响应式 (< 768px)
+   Responsive: Mobile
    ============================================ */
 
 @media (max-width: 768px) {
-  /* 容器调整 */
   .sandbox-container {
     padding: 0;
     gap: 0;
     flex-direction: column;
-    height: 100vh;
+    height: calc(100vh - 42px - 3rem);
   }
 
-  /* 移动端频道列表切换按钮 */
   .mobile-channel-toggle {
     display: flex;
     align-items: center;
@@ -952,24 +327,15 @@ body {
     gap: 0.5rem;
     padding: 0.75rem 1rem;
     margin: 0.5rem;
-    margin-bottom: 0.5rem;
-    background: var(--blue-9);
-    color: white;
+    background: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
     border: none;
-    border-radius: var(--radius-3);
+    border-radius: var(--radius);
     font-weight: 500;
-    font-size: var(--font-size-2);
+    font-size: 0.875rem;
     cursor: pointer;
-    transition: all var(--transition-duration) var(--transition-timing);
-    box-shadow: var(--shadow-2);
-  }
-
-  .mobile-channel-toggle:active {
-    transform: scale(0.98);
-    box-shadow: var(--shadow-1);
   }
 
-  /* 频道侧边栏 - 移动端默认隐藏，显示时从左侧滑入 */
   .channel-sidebar {
     position: fixed;
     left: 0;
@@ -979,14 +345,14 @@ body {
     max-width: 80vw;
     transform: translateX(-100%);
     z-index: 1000;
-    box-shadow: var(--shadow-5);
+    background: hsl(var(--background));
+    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
   }
 
   .channel-sidebar.show {
     transform: translateX(0);
   }
 
-  /* 遮罩层 */
   .channel-overlay {
     display: block;
     position: fixed;
@@ -996,61 +362,16 @@ body {
     animation: fadeIn 200ms ease-out;
   }
 
-  /* 聊天区域调整 */
   .chat-area {
     flex: 1;
     gap: 0.5rem;
     padding: 0 0.5rem 0.5rem;
     height: auto;
   }
-
-  .chat-area > .rt-Card {
-    margin: 0;
-  }
-
-  /* 顶部信息栏 - 移动端简化 */
-  .chat-area .rt-Card:first-child .rt-Flex {
-    flex-direction: column;
-    align-items: flex-start !important;
-    gap: 0.75rem !important;
-  }
-
-  /* 输入框区域 - 移动端调整 */
-  .chat-area .rt-Card:last-child {
-    margin-bottom: env(safe-area-inset-bottom, 0);
-  }
-
-  /* 消息列表 - 减小间距 */
-  .chat-area .rt-Card:nth-child(2) {
-    flex: 1;
-    min-height: 0;
-  }
-
-  /* 工具栏按钮 - 移动端缩小 */
-  .chat-area .rt-IconButton {
-    width: 2rem;
-    height: 2rem;
-  }
-
-  /* 表情选择器 - 移动端全屏 */
-  .chat-area .emoji-picker {
-    position: fixed;
-    inset: 0;
-    max-height: none;
-    border-radius: 0;
-  }
-
-  /* 图片上传 - 移动端全屏 */
-  .chat-area .image-upload {
-    position: fixed;
-    inset: 0;
-    max-height: none;
-    border-radius: 0;
-  }
 }
 
 /* ============================================
-   平板响应式 (768px - 1024px)
+   Responsive: Tablet
    ============================================ */
 
 @media (min-width: 768px) and (max-width: 1024px) {
@@ -1058,18 +379,12 @@ body {
     padding: 0.75rem;
     gap: 0.75rem;
   }
-
-  .channel-sidebar {
-    width: 200px;
-  }
-
-  .chat-area {
-    gap: 0.5rem;
-  }
+  .channel-sidebar { width: 200px; }
+  .chat-area { gap: 0.5rem; }
 }
 
 /* ============================================
-   大屏优化 (> 1400px)
+   Responsive: Large Screen
    ============================================ */
 
 @media (min-width: 1400px) {
@@ -1077,29 +392,5 @@ body {
     padding: 1.5rem;
     gap: 1.5rem;
   }
-
-  .channel-sidebar {
-    width: 280px;
-  }
-}
-
-/* ============================================
-   Dashboard Container 内嵌适配
-   确保在 dashboard 的 Container 内正确显示
-   ============================================ */
-
-/* Dashboard 的 Container 组件会添加 padding，需要抵消 */
-.rt-Container .sandbox-container {
-  margin: calc(-1 * var(--container-padding, 1.5rem));
-  width: calc(100% + 2 * var(--container-padding, 1.5rem));
-  max-width: none;
-  height: calc(100vh - 4rem); /* 减去顶部导航栏高度 */
-}
-
-@media (max-width: 768px) {
-  .rt-Container .sandbox-container {
-    margin: calc(-1 * var(--container-padding, 1rem));
-    width: calc(100% + 2 * var(--container-padding, 1rem));
-    height: calc(100vh - 3.5rem); /* 移动端导航栏稍矮 */
-  }
+  .channel-sidebar { width: 280px; }
 }