优化整体ui-1

web/src/index.css

@@ -3,6 +3,7 @@
 :root {
   --brand-primary: #2563eb;
   --brand-primary-hover: #1d4ed8;
+  --brand-primary-active: #1e40af;
   --brand-primary-light: #dbeafe;
   --brand-primary-lighter: #eff6ff;
   --neutral-0: #ffffff;
@@ -18,6 +19,7 @@
   --neutral-900: #0f172a;
   --neutral-950: #020617;
   --success: #16a34a;
+  --success-hover: #15803d;
   --success-bg: #f0fdf4;
   --warning: #d97706;
   --warning-bg: #fffbeb;
@@ -25,11 +27,13 @@
   --error-bg: #fef2f2;
   --info: #0891b2;
   --info-bg: #ecfeff;
-  --sidebar-width: 240px;
+  --sidebar-width: 230px;
   --panel-width: 320px;
   --header-height: 56px;
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
-  --shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.12);
+  --shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
+  --shadow-card-hover: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
+  --shadow-floating: 0 12px 32px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
 }
 
 /* 欢迎语富文本（SafeHtml）气泡内样式 */
@@ -55,12 +59,30 @@
 
 body {
   margin: 0;
-  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   background: var(--neutral-50);
   color: var(--neutral-900);
 }
 
+/* 现代精致细滚动条 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.35);
+  border-radius: 9999px;
+  transition: background-color 0.2s ease;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 116, 139, 0.55);
+}
+
 @keyframes typingDot {
   0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
   30% { opacity: 1; transform: translateY(-3px); }
@@ -76,3 +98,69 @@ body {
 
 .no-scrollbar::-webkit-scrollbar { display: none; }
 .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+
+/* 玻璃拟态与交互效果 */
+.glass-panel {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+.glass-dark {
+  background: rgba(15, 23, 42, 0.82);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.subtle-border {
+  border-color: rgba(226, 232, 240, 0.8);
+}
+
+/* 浏览器自动填充 (Autofill) 样式重置与深色模式适配 */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  transition: background-color 50000s ease-in-out 0s;
+}
+
+.login-dark-input,
+.login-dark-input.ant-input-affix-wrapper,
+.login-dark-input.ant-input {
+  background-color: rgba(30, 41, 59, 0.75) !important;
+  border-color: rgba(51, 65, 85, 0.8) !important;
+  color: #f8fafc !important;
+}
+
+.login-dark-input .ant-input {
+  background-color: transparent !important;
+  color: #f8fafc !important;
+}
+
+.login-dark-input input:-webkit-autofill,
+.login-dark-input input:-webkit-autofill:hover,
+.login-dark-input input:-webkit-autofill:focus,
+.login-dark-input input:-webkit-autofill:active,
+.login-dark-input .ant-input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
+  -webkit-text-fill-color: #f8fafc !important;
+  caret-color: #f8fafc !important;
+}
+
+.login-dark-input .ant-input-password-icon,
+.login-dark-input .anticon {
+  color: #94a3b8 !important;
+}
+
+.login-dark-input:hover,
+.login-dark-input.ant-input-affix-wrapper:hover {
+  border-color: #3b82f6 !important;
+}
+
+.login-dark-input:focus,
+.login-dark-input-focused,
+.login-dark-input.ant-input-affix-wrapper-focused {
+  border-color: #3b82f6 !important;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
+}
+