niuma-ui 1.0.0

package/src/styles.css

@@ -0,0 +1,1040 @@
+@import 'vue-sonner/style.css';
+@import 'tailwindcss';
+
+/* ── 静态 token（不随明暗变化） ── */
+:root {
+  --rs-radius-xs: 0.25rem;
+  --rs-radius-sm: 0.5rem;
+  --rs-radius: 0.75rem;
+  --rs-radius-lg: 1rem;
+  --rs-radius-full: 9999px;
+
+  --rs-font-size-xs: 0.75rem;
+  --rs-font-size-sm: 0.875rem;
+  --rs-font-size-base: 1rem;
+  --rs-font-size-lg: 1.125rem;
+
+  --rs-line-height-tight: 1.25;
+  --rs-line-height-normal: 1.5;
+
+  --rs-control-height-ssm: 1.25rem;
+  --rs-control-height-sm: 1.5rem;
+  --rs-control-height-md: 2rem;
+  --rs-control-height-lg: 2.5rem;
+
+  --rs-space-xs: 0.25rem;
+  --rs-space-sm: 0.5rem;
+  --rs-space-md: 0.75rem;
+  --rs-space-lg: 1rem;
+  --rs-space-xl: 1.5rem;
+
+  --rs-container-max-sm: 40rem;
+  --rs-container-max-md: 48rem;
+  --rs-container-max-lg: 64rem;
+  --rs-container-max-xl: 80rem;
+  --rs-container-max-full: 100%;
+
+  --rs-z-tooltip: 10;
+  --rs-z-dropdown: 50;
+  /* Shell 底部 Dock / 常驻面板：低于 modal，避免盖住弹出对话框 */
+  --rs-z-panel: 80;
+  --rs-z-modal: 100;
+  --rs-z-toast: 200;
+
+  --rs-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  --rs-transition-normal: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* FTP 图标内嵌字样默认强调色 */
+  --rs-icon-ftp-accent: #ea580c;
+  --rs-icon-ftp-on-accent: #ffffff;
+
+  /* Redis 品牌图标默认强调色（Redis 官方红） */
+  --rs-icon-redis-accent: #dc382d;
+
+  /* MongoDB 品牌图标默认强调色（MongoDB 官方绿） */
+  --rs-icon-mongodb-accent: #47a248;
+
+  /* Vastbase 品牌图标默认强调色（海量数据官网橙） */
+  --rs-icon-vastbase-accent: #ff6f1a;
+
+  /* MySQL 品牌图标默认强调色（MySQL 官方蓝） */
+  --rs-icon-mysql-accent: #4479a1;
+
+  /* Dameng 品牌图标默认色（官网 logo 取样：蓝 / 红） */
+  --rs-icon-dameng-accent: #0000d2;
+  --rs-icon-dameng-wave: #ec1b34;
+
+  /* SQLite 品牌图标默认强调色（SQLite 官方蓝） */
+  --rs-icon-sqlite-accent: #003b57;
+
+  /* Oracle 品牌图标默认强调色（Oracle 官方红） */
+  --rs-icon-oracle-accent: #f80000;
+
+  /* ClickHouse 品牌图标默认强调色（ClickHouse 官方黄） */
+  --rs-icon-clickhouse-accent: #ffcc01;
+
+  /* 人大金仓品牌图标默认强调色（官网政务红） */
+  --rs-icon-kingbase-accent: #c9151e;
+
+  /* SQL Server 品牌图标默认强调色（Simple Icons / 产品红） */
+  --rs-icon-sqlserver-accent: #cc2927;
+
+  /* macOS 风格原生滚动条（与 RsScrollbar 视觉一致） */
+  --rs-scrollbar-size: 13px;
+  --rs-scrollbar-padding: 2px;
+}
+
+/* ── 公共暗色：VS Code Dark Modern 中性灰阶 × macOS 深色规范 ── */
+:root,
+[data-rs-theme='dark'] {
+  color-scheme: dark;
+
+  --rs-primary: #0a84ff;
+  --rs-primary-hover: #409cff;
+  --rs-primary-foreground: #ffffff;
+  --rs-primary-container: #0a2540;
+  --rs-on-primary-container: #6cb4ff;
+  /* 分层：frame/sidebar(#181818) < 内容(#1f1f1f) < 悬浮层/对话框(#262626) */
+  --rs-bg: #181818;
+  --rs-surface: #1f1f1f;
+  --rs-surface-elevated: #262626;
+  --rs-surface-hover: #2e2e2e;
+  --rs-item-hover: rgb(255 255 255 / 0.08);
+
+  /* ── Table（VS Code Dark Modern 列表/表格语义）──
+   * 灰阶斑马纹 + 主色选中（选中与条纹语义分离） */
+  --rs-table-radius: var(--rs-radius-sm);
+  --rs-table-border: #2b2b2b;
+  --rs-table-cell-divider: #262626;
+  --rs-table-fg: #dddddd;
+  --rs-table-muted-fg: #9d9d9d;
+  --rs-table-bg: #1f1f1f;
+  --rs-table-bg-header: #1f1f1f;
+  --rs-table-body-bg: #1f1f1f;
+  --rs-table-header-bg: #1f1f1f;
+  --rs-table-header-fg: #f3f3f3;
+  --rs-table-header-weight: 600;
+  --rs-table-header-size: var(--rs-table-cell-size, var(--rs-font-size-xs));
+  --rs-table-cell-size: var(--rs-font-size-xs);
+  --rs-table-cell-weight: 400;
+  --rs-table-footer-bg: #1f1f1f;
+  --rs-table-group-bg: #2d2d2d;
+  --rs-table-expand-bg: #2d2d2d;
+  --rs-table-row-stripe: #2d2d2d;
+  --rs-table-row-hover: #363636;
+  --rs-table-row-selected: color-mix(in srgb, var(--rs-primary) 22%, var(--rs-table-body-bg));
+  --rs-table-row-selected-hover: color-mix(in srgb, var(--rs-primary) 30%, var(--rs-table-body-bg));
+  --rs-table-row-selected-fg: #ffffff;
+  --rs-table-row-selected-accent: var(--rs-primary);
+  --rs-table-row-highlight: color-mix(in srgb, var(--rs-primary) 12%, var(--rs-table-body-bg));
+  --rs-table-row-highlight-hover: color-mix(in srgb, var(--rs-primary) 18%, var(--rs-table-body-bg));
+  --rs-table-row-highlight-fg: var(--rs-table-fg);
+  --rs-table-row-highlight-accent: color-mix(in srgb, var(--rs-primary) 65%, transparent);
+  --rs-table-gutter-bg: color-mix(in srgb, var(--rs-border) 10%, var(--rs-table-header-bg));
+  --rs-table-gutter-border: var(--rs-table-cell-divider);
+  --rs-table-scrollbar-corner: var(--rs-table-bg-header);
+  --rs-table-checkbox-bg: #313131;
+  --rs-table-sort-active-fg: var(--rs-primary);
+  --rs-table-drop-indicator: var(--rs-primary);
+  --rs-table-resize-handle: #6e6e6e;
+  --rs-table-resize-handle-hover: var(--rs-primary);
+
+  /* VS Code 式抬升型输入底（比内容略亮），非 macOS 凹陷井 */
+  /* WCAG AA: input-border 3.18:1 vs #2b2b2b; border 3.24:1 vs #1f1f1f; placeholder 4.5:1 vs #2b2b2b */
+  --rs-input-bg: #2b2b2b;
+  --rs-input-border: #767676;
+  --rs-input-border-hover: #8c8c8c;
+  --rs-input-shadow: none;
+  --rs-border: #6e6e6e;
+  --rs-border-subtle: #3a3a3a;
+  --rs-text: #cccccc;
+  --rs-muted: #9d9d9d;
+  --rs-placeholder: #919191;
+  --rs-danger: #ff453a;
+  --rs-danger-container: #3b1210;
+  --rs-on-danger-container: #ff8a84;
+  --rs-success: #30d158;
+  --rs-success-container: #0d2818;
+  --rs-on-success-container: #6ee79a;
+  --rs-warning: #ff9f0a;
+  --rs-warning-container: #2e1f08;
+  --rs-on-warning-container: #ffc46b;
+  --rs-info: #0a84ff;
+  --rs-info-container: #0a2540;
+  --rs-on-info-container: #6cb4ff;
+
+  --rs-icon-ftp-accent: #fb923c;
+  --rs-icon-ftp-on-accent: #ffffff;
+  --rs-icon-redis-accent: #ff6f61;
+  --rs-icon-mongodb-accent: #5cb85c;
+  --rs-icon-vastbase-accent: #ff8a3d;
+  --rs-icon-mysql-accent: #5a9fd4;
+  --rs-icon-sqlite-accent: #5aafd4;
+  --rs-icon-dameng-accent: #4d4dff;
+  --rs-icon-dameng-wave: #ff4d63;
+  --rs-icon-oracle-accent: #ff4d4d;
+  --rs-icon-clickhouse-accent: #ffe066;
+  --rs-icon-kingbase-accent: #ff4d57;
+  --rs-icon-sqlserver-accent: #ff5a57;
+  --rs-focus-border: var(--rs-primary);
+  --rs-focus-ring: color-mix(in srgb, var(--rs-primary) 28%, transparent);
+  --rs-focus-ring-width: 2px;
+
+  /* ── Dialog（VS Code editorWidget 分层 + macOS sheet 实底分隔）── */
+  /* WCAG AA: dialog-border 3.49:1 vs frame bg #181818 */
+  --rs-dialog-overlay-bg: rgb(0 0 0 / 0.5);
+  --rs-dialog-overlay-blur: 12px;
+  --rs-dialog-border: #6e6e6e;
+  --rs-dialog-separator: #484848;
+  --rs-dialog-shadow:
+    0 0 0 0.5px rgb(255 255 255 / 0.08),
+    0 8px 32px rgb(0 0 0 / 0.55),
+    0 2px 8px rgb(0 0 0 / 0.35);
+  --rs-dialog-header-bg: #2b2b2b;
+  --rs-dialog-body-bg: #1f1f1f;
+  --rs-dialog-footer-bg: #262626;
+  --rs-dialog-bg: var(--rs-dialog-body-bg);
+  --rs-dialog-title-fg: #ffffff;
+  --rs-dialog-description-fg: #9d9d9d;
+
+  /* ── Card（macOS grouped panel / inset 分组卡片）── */
+  --rs-card-border: #3a3a3a;
+  --rs-card-separator: #484848;
+  --rs-card-header-bg: #2b2b2b;
+  --rs-card-body-bg: #1f1f1f;
+  --rs-card-title-fg: #ffffff;
+  --rs-card-description-fg: #9d9d9d;
+  --rs-card-shadow:
+    0 0 0 0.5px rgb(255 255 255 / 0.06),
+    0 1px 2px rgb(0 0 0 / 0.2);
+  --rs-card-shadow-elevated:
+    0 0 0 0.5px rgb(255 255 255 / 0.08),
+    0 4px 16px rgb(0 0 0 / 0.4),
+    0 1px 3px rgb(0 0 0 / 0.28);
+  --rs-card-filled-bg: #262626;
+  --rs-card-filled-elevated-shadow:
+    0 1px 2px rgb(0 0 0 / 0.35),
+    0 2px 6px rgb(0 0 0 / 0.28);
+  --rs-card-glass-bg: rgb(31 31 31 / 0.72);
+  --rs-card-glass-border: rgb(255 255 255 / 0.1);
+
+  /* ── Terminal（macOS Terminal.app 风格：柔和 ANSI + 可读斑马纹）── */
+  --rs-terminal-shell-bg: #141416;
+  --rs-terminal-bg: #1e1e1e;
+  --rs-terminal-fg: #ebebf0;
+  --rs-terminal-cursor: #f5f5f7;
+  --rs-terminal-cursor-accent: var(--rs-terminal-bg);
+  /* 偶数行 bg / 奇数行 stripe，对比克制但可扫读 */
+  --rs-terminal-row-stripe: #27272a;
+  --rs-terminal-selection-bg: color-mix(in srgb, var(--rs-primary) 38%, #1e1e1e);
+  --rs-terminal-selection-fg: #ffffff;
+  --rs-terminal-border: rgb(255 255 255 / 0.1);
+  --rs-terminal-ansi-black: #000000;
+  --rs-terminal-ansi-red: #c75450;
+  --rs-terminal-ansi-green: #7dcc7d;
+  --rs-terminal-ansi-yellow: #d8d890;
+  --rs-terminal-ansi-blue: #6e9bf5;
+  --rs-terminal-ansi-magenta: #c89ae8;
+  --rs-terminal-ansi-cyan: #6ec9c9;
+  --rs-terminal-ansi-white: #d9d9de;
+  --rs-terminal-ansi-bright-black: #6e6e73;
+  --rs-terminal-ansi-bright-red: #f77669;
+  --rs-terminal-ansi-bright-green: #98d898;
+  --rs-terminal-ansi-bright-yellow: #ffffb8;
+  --rs-terminal-ansi-bright-blue: #8aadf4;
+  --rs-terminal-ansi-bright-magenta: #d4a8f0;
+  --rs-terminal-ansi-bright-cyan: #8ad4d4;
+  --rs-terminal-ansi-bright-white: #ffffff;
+
+  --rs-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.4);
+  --rs-shadow: 0 4px 16px rgb(0 0 0 / 0.45), 0 0 0 0.5px rgb(255 255 255 / 0.08);
+  --rs-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.5), 0 0 0 0.5px rgb(255 255 255 / 0.1);
+}
+
+/* ── 公共亮色：macOS systemBackground / label 色阶 ── */
+[data-rs-theme='light'] {
+  color-scheme: light;
+
+  --rs-primary: #007aff;
+  --rs-primary-hover: #0071eb;
+  --rs-primary-foreground: #ffffff;
+  --rs-primary-container: #e5f1ff;
+  --rs-on-primary-container: #003d99;
+  --rs-bg: #f5f5f7;
+  --rs-surface: #ffffff;
+  --rs-surface-elevated: #ffffff;
+  --rs-surface-hover: #e8e8ed;
+  --rs-item-hover: rgb(0 0 0 / 0.05);
+
+  /* ── Table（VS Code Light Modern 列表/表格语义）── */
+  --rs-table-radius: var(--rs-radius-sm);
+  --rs-table-border: #e5e5e5;
+  --rs-table-cell-divider: #e5e5e5;
+  --rs-table-fg: #333333;
+  --rs-table-muted-fg: #616161;
+  --rs-table-bg: #ffffff;
+  --rs-table-bg-header: #f8f8f8;
+  --rs-table-body-bg: #ffffff;
+  --rs-table-header-bg: #f8f8f8;
+  --rs-table-header-fg: #1a1a1a;
+  --rs-table-header-weight: 600;
+  --rs-table-header-size: var(--rs-table-cell-size, var(--rs-font-size-xs));
+  --rs-table-cell-size: var(--rs-font-size-xs);
+  --rs-table-cell-weight: 400;
+  --rs-table-footer-bg: #f8f8f8;
+  --rs-table-group-bg: #f3f3f3;
+  --rs-table-expand-bg: #f3f3f3;
+  --rs-table-row-stripe: #f6f6f6;
+  --rs-table-row-hover: #f2f2f2;
+  --rs-table-row-selected: color-mix(in srgb, var(--rs-primary) 10%, var(--rs-table-body-bg));
+  --rs-table-row-selected-hover: color-mix(in srgb, var(--rs-primary) 16%, var(--rs-table-body-bg));
+  --rs-table-row-selected-fg: var(--rs-text);
+  --rs-table-row-selected-accent: var(--rs-primary);
+  --rs-table-row-highlight: color-mix(in srgb, var(--rs-primary) 8%, var(--rs-table-body-bg));
+  --rs-table-row-highlight-hover: color-mix(in srgb, var(--rs-primary) 12%, var(--rs-table-body-bg));
+  --rs-table-row-highlight-fg: var(--rs-text);
+  --rs-table-row-highlight-accent: color-mix(in srgb, var(--rs-primary) 45%, transparent);
+  --rs-table-gutter-bg: color-mix(in srgb, var(--rs-border) 6%, var(--rs-table-header-bg));
+  --rs-table-gutter-border: var(--rs-table-cell-divider);
+  --rs-table-scrollbar-corner: var(--rs-table-bg-header);
+  --rs-table-checkbox-bg: #ffffff;
+  --rs-table-sort-active-fg: var(--rs-primary);
+  --rs-table-drop-indicator: var(--rs-primary);
+  --rs-table-resize-handle: #8c8c8c;
+  --rs-table-resize-handle-hover: var(--rs-primary);
+
+  /* macOS separator 风格：默认边框偏柔，focus 环承担可访问性反馈 */
+  --rs-input-bg: #ffffff;
+  --rs-input-border: rgb(60 60 67 / 0.18);
+  --rs-input-border-hover: rgb(60 60 67 / 0.30);
+  --rs-input-shadow: none;
+  --rs-border: rgb(60 60 67 / 0.16);
+  --rs-border-subtle: rgb(60 60 67 / 0.10);
+  --rs-text: #1d1d1f;
+  --rs-muted: #6e6e73;
+  --rs-placeholder: #909090;
+  --rs-danger: #ff3b30;
+  --rs-danger-container: #ffe5e3;
+  --rs-on-danger-container: #c41e16;
+  --rs-success: #34c759;
+  --rs-success-container: #e4f8e9;
+  --rs-on-success-container: #1a7f37;
+  --rs-warning: #ff9500;
+  --rs-warning-container: #fff3e0;
+  --rs-on-warning-container: #b26500;
+  --rs-info: #007aff;
+  --rs-info-container: #e5f1ff;
+  --rs-on-info-container: #003d99;
+  --rs-focus-border: var(--rs-primary);
+  --rs-focus-ring: color-mix(in srgb, var(--rs-primary) 22%, transparent);
+  --rs-focus-ring-width: 2px;
+
+  /* ── Dialog（VS Code Light Modern widget + macOS 浅色 sheet）── */
+  --rs-dialog-overlay-bg: rgb(0 0 0 / 0.28);
+  --rs-dialog-overlay-blur: 8px;
+  --rs-dialog-border: #c8c8ca;
+  --rs-dialog-separator: #d4d4d6;
+  --rs-dialog-shadow:
+    0 0 0 0.5px rgb(0 0 0 / 0.06),
+    0 8px 28px rgb(0 0 0 / 0.18),
+    0 2px 8px rgb(0 0 0 / 0.08);
+  --rs-dialog-header-bg: #f8f8f8;
+  --rs-dialog-body-bg: #ffffff;
+  --rs-dialog-footer-bg: #f8f8f8;
+  --rs-dialog-bg: #ffffff;
+  --rs-dialog-title-fg: var(--rs-text);
+  --rs-dialog-description-fg: var(--rs-muted);
+
+  /* ── Card（macOS systemGroupedBackground 上的圆角分组卡片）── */
+  --rs-card-border: rgb(60 60 67 / 0.14);
+  --rs-card-separator: #d4d4d6;
+  --rs-card-header-bg: #f8f8f8;
+  --rs-card-body-bg: #ffffff;
+  --rs-card-title-fg: var(--rs-text);
+  --rs-card-description-fg: var(--rs-muted);
+  --rs-card-shadow:
+    0 0 0 0.5px rgb(0 0 0 / 0.04),
+    0 1px 2px rgb(0 0 0 / 0.03);
+  --rs-card-shadow-elevated:
+    0 0 0 0.5px rgb(0 0 0 / 0.06),
+    0 4px 16px rgb(0 0 0 / 0.08),
+    0 1px 3px rgb(0 0 0 / 0.04);
+  --rs-card-filled-bg: #f3f3f5;
+  --rs-card-filled-elevated-shadow:
+    0 1px 2px rgb(0 0 0 / 0.12),
+    0 2px 6px rgb(0 0 0 / 0.08);
+  --rs-card-glass-bg: rgb(255 255 255 / 0.72);
+  --rs-card-glass-border: rgb(255 255 255 / 0.55);
+
+  /* ── Terminal（macOS Terminal.app 亮色：systemBackground + 浅灰斑马纹）── */
+  --rs-terminal-shell-bg: #ececf0;
+  --rs-terminal-bg: #ffffff;
+  --rs-terminal-fg: #1d1d1f;
+  --rs-terminal-cursor: #1d1d1f;
+  --rs-terminal-cursor-accent: var(--rs-terminal-bg);
+  --rs-terminal-row-stripe: #f0f9ff;
+  --rs-terminal-selection-bg: color-mix(in srgb, var(--rs-primary) 26%, #ffffff);
+  --rs-terminal-selection-fg: #1d1d1f;
+  --rs-terminal-border: rgb(60 60 67 / 0.14);
+  --rs-terminal-ansi-black: #3a3a3c;
+  --rs-terminal-ansi-red: #d1453b;
+  --rs-terminal-ansi-green: #2f8a42;
+  --rs-terminal-ansi-yellow: #9a8f2e;
+  --rs-terminal-ansi-blue: #1b6fe0;
+  --rs-terminal-ansi-magenta: #a34fa8;
+  --rs-terminal-ansi-cyan: #1a8f98;
+  --rs-terminal-ansi-white: #6e6e73;
+  --rs-terminal-ansi-bright-black: #636366;
+  --rs-terminal-ansi-bright-red: #e02f22;
+  --rs-terminal-ansi-bright-green: #248a3d;
+  --rs-terminal-ansi-bright-yellow: #7a7000;
+  --rs-terminal-ansi-bright-blue: #0056d6;
+  --rs-terminal-ansi-bright-magenta: #b030b5;
+  --rs-terminal-ansi-bright-cyan: #0d7f8a;
+  --rs-terminal-ansi-bright-white: #1d1d1f;
+
+  --rs-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 0.5px rgb(0 0 0 / 0.04);
+  --rs-shadow: 0 4px 16px rgb(0 0 0 / 0.08), 0 0 0 0.5px rgb(0 0 0 / 0.06);
+  --rs-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(0 0 0 / 0.08);
+
+  --rs-icon-ftp-accent: #ea580c;
+  --rs-icon-ftp-on-accent: #ffffff;
+  --rs-icon-redis-accent: #dc382d;
+  --rs-icon-mongodb-accent: #47a248;
+  --rs-icon-vastbase-accent: #ff6f1a;
+  --rs-icon-mysql-accent: #4479a1;
+  --rs-icon-sqlite-accent: #003b57;
+  --rs-icon-dameng-accent: #0000d2;
+  --rs-icon-dameng-wave: #ec1b34;
+  --rs-icon-oracle-accent: #f80000;
+  --rs-icon-clickhouse-accent: #ffcc01;
+  --rs-icon-kingbase-accent: #c9151e;
+  --rs-icon-sqlserver-accent: #cc2927;
+}
+
+/**
+ * 装饰性动效 opt-in：仅对挂载了 .rs-motion-reduce 的元素在无障碍「减少动画」下关闭 animation/transition。
+ * Loading（RsButton / RsLoading / RsIcon spin）等状态反馈默认不降级。
+ */
+@media (prefers-reduced-motion: reduce) {
+  .rs-motion-reduce,
+  .rs-motion-reduce::before,
+  .rs-motion-reduce::after {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* 原生滚动条：WebKit + Firefox，颜色随 --rs-* 主题 token 变化 */
+.rs-native-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--rs-muted) 60%, transparent) transparent;
+  -webkit-overflow-scrolling: touch;
+}
+
+.rs-native-scrollbar::-webkit-scrollbar {
+  width: var(--rs-scrollbar-size);
+  height: var(--rs-scrollbar-size);
+}
+
+.rs-native-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.rs-native-scrollbar::-webkit-scrollbar-thumb {
+  border: var(--rs-scrollbar-padding) solid transparent;
+  border-radius: var(--rs-radius-full);
+  background: color-mix(in srgb, var(--rs-muted) 60%, transparent);
+  background-clip: padding-box;
+  transition: background var(--rs-transition-fast);
+}
+
+.rs-native-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--rs-primary) 40%, var(--rs-muted));
+  background-clip: padding-box;
+}
+
+.rs-native-scrollbar::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+body {
+  margin: 0;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    'SF Pro Text',
+    'SF Pro Display',
+    system-ui,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    'PingFang SC',
+    'Microsoft YaHei',
+    sans-serif;
+  font-size: var(--rs-font-size-base);
+  line-height: var(--rs-line-height-normal);
+  background: var(--rs-bg);
+  color: var(--rs-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: var(--rs-primary);
+  text-decoration: none;
+  transition: color var(--rs-transition-fast);
+}
+
+a:hover {
+  color: var(--rs-primary-hover);
+}
+
+code {
+  color: var(--rs-on-primary-container);
+  font-size: 0.9em;
+}
+
+.rs-focus-ring:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+/*
+ * 默认：面板可宽于触发器（min-width 对齐触发器，width 随内容，max-width 封顶）。
+ * matchTriggerWidth：加 --match-trigger，强制与触发器等宽。
+ * 注意：虚拟列表绝对定位项不参与撑开父级宽度，内容撑宽在 virtual 下不可靠（见 RsSelect prop 注释）。
+ */
+.rs-select__content {
+  z-index: calc(var(--rs-z-modal) + 2);
+  box-sizing: border-box;
+  width: max-content;
+  min-width: var(--reka-combobox-trigger-width, var(--reka-popper-anchor-width));
+  max-width: min(24rem, calc(100vw - 1rem));
+  max-height: var(--reka-combobox-content-available-height);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  border-radius: var(--rs-radius);
+  border: 1px solid var(--rs-dialog-border, var(--rs-border));
+  background: var(--rs-surface-elevated);
+  box-shadow: var(--rs-shadow-lg);
+  color: var(--rs-text);
+  outline: none;
+}
+
+.rs-select__content--match-trigger {
+  width: var(--reka-combobox-trigger-width, var(--reka-popper-anchor-width));
+  max-width: none;
+}
+
+/* Popper 外层：默认允许随内容变宽；等宽模式锁死为触发器宽度 */
+/* z-index 提升到 modal 之上，避免在 RsDialog 内被对话框遮挡 */
+[data-reka-popper-content-wrapper]:has(> .rs-select__content) {
+  z-index: calc(var(--rs-z-modal) + 2);
+  width: max-content;
+  min-width: var(--reka-popper-anchor-width);
+  max-width: min(24rem, calc(100vw - 1rem));
+}
+
+[data-reka-popper-content-wrapper]:has(> .rs-select__content--match-trigger) {
+  width: var(--reka-popper-anchor-width);
+  min-width: var(--reka-popper-anchor-width);
+  max-width: none;
+}
+
+[data-reka-popper-content-wrapper]:has(> .rs-date-picker__content) {
+  z-index: calc(var(--rs-z-modal) + 2);
+}
+
+/* 日期面板内嵌时间选择：wrapper 也须高于日期面板，否则 portal 后仍被日历盖住 */
+[data-reka-popper-content-wrapper]:has(> .rs-time-picker__content--embedded) {
+  z-index: calc(var(--rs-z-modal) + 3);
+}
+
+.rs-select__search-bar {
+  flex-shrink: 0;
+  padding: var(--rs-space-xs);
+  border-bottom: 1px solid var(--rs-border-subtle);
+  background: color-mix(in srgb, var(--rs-surface) 64%, transparent);
+}
+
+.rs-select__search-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-sm);
+  width: 100%;
+  min-height: var(--rs-control-height-sm);
+  box-sizing: border-box;
+  padding: 0 var(--rs-space-sm);
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-input-bg);
+  box-shadow: var(--rs-input-shadow, none);
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+
+.rs-select__search-wrap:hover {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+
+.rs-select__search-wrap:focus-within {
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  background: var(--rs-input-bg);
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+.rs-select__search-icon {
+  flex-shrink: 0;
+  color: var(--rs-muted);
+}
+
+.rs-select__search {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-normal);
+  outline: none;
+  box-shadow: none;
+}
+
+.rs-select__search:focus {
+  border: none;
+  box-shadow: none;
+}
+
+.rs-select__search::placeholder {
+  color: var(--rs-placeholder);
+}
+
+.rs-select__viewport {
+  overflow-y: auto;
+  max-height: inherit;
+  padding: 0 var(--rs-space-xs) var(--rs-space-xs);
+}
+
+.rs-select__content:not(:has(.rs-select__search-bar)) .rs-select__viewport {
+  padding-top: var(--rs-space-xs);
+}
+
+.rs-select__status,
+.rs-select__empty {
+  padding: var(--rs-space-md) var(--rs-space-md);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-normal);
+  color: var(--rs-muted);
+  text-align: center;
+}
+
+.rs-select__group + .rs-select__group {
+  margin-top: var(--rs-space-sm);
+  padding-top: 0;
+  border-top: 1px solid var(--rs-border-subtle);
+}
+
+.rs-select__group-label {
+  display: block;
+  padding: var(--rs-space-xs) var(--rs-space-sm) var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
+  font-weight: 600;
+  color: var(--rs-muted);
+  letter-spacing: 0.04em;
+  line-height: var(--rs-line-height-tight);
+  user-select: none;
+}
+
+/* 非首组：标题骑在分割横线上 */
+.rs-select__group + .rs-select__group .rs-select__group-label {
+  position: relative;
+  top: -0.55em;
+  margin-bottom: 0.125rem;
+  padding: 0 0.375rem;
+  margin-left: var(--rs-space-sm);
+  width: fit-content;
+  max-width: calc(100% - var(--rs-space-sm) * 2);
+  background: var(--rs-surface-elevated);
+  line-height: 1;
+}
+
+.rs-select__item {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-sm);
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--rs-space-sm) var(--rs-space-md);
+  font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
+  color: var(--rs-text);
+  outline: none;
+  border-radius: var(--rs-radius-sm);
+  transition:
+    background var(--rs-transition-fast),
+    color var(--rs-transition-fast);
+  cursor: pointer;
+  user-select: none;
+}
+
+.rs-select__item-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.rs-select__item-check {
+  display: inline-flex;
+  width: 0.875rem;
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--rs-primary);
+}
+
+/* 虚拟列表项由 Reka 绝对定位，需显式拉满宽度 */
+[data-reka-virtualizer] .rs-select__item {
+  width: 100%;
+}
+
+.rs-select__item[data-highlighted] {
+  background: var(--rs-item-hover);
+}
+
+.rs-select__item[data-state='checked'] {
+  color: var(--rs-primary);
+  background: color-mix(in srgb, var(--rs-primary) 12%, transparent);
+}
+
+.rs-select__item[data-disabled] {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+
+.rs-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rs-space-xs);
+  width: 100%;
+  color: var(--rs-text);
+  font-size: var(--rs-font-size-sm);
+}
+
+.rs-field--label-left {
+  display: grid;
+  grid-template-columns: var(--rs-field-label-width, max-content) minmax(0, 1fr);
+  align-items: start;
+  column-gap: var(--rs-space-md);
+}
+
+.rs-field--label-left.rs-field--label-align-end .rs-field__label {
+  justify-content: flex-end;
+  text-align: end;
+}
+
+.rs-field__label {
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+  font-weight: 600;
+}
+
+.rs-field__required {
+  color: var(--rs-danger);
+}
+
+.rs-field__hint {
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-xs);
+}
+
+.rs-field--label-left .rs-field__hint {
+  grid-column: 2;
+}
+
+.rs-field__control {
+  width: 100%;
+  min-height: var(--rs-control-height-md);
+  box-sizing: border-box;
+  padding: 0 var(--rs-space-md);
+  border: 1px solid var(--rs-input-border, var(--rs-border));
+  border-radius: var(--rs-radius-sm);
+  background: var(--rs-input-bg);
+  color: var(--rs-text);
+  box-shadow: var(--rs-input-shadow, none);
+  font: inherit;
+  outline: none;
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast);
+}
+
+.rs-field__control:hover:not(:disabled) {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+
+.rs-field__control:focus {
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+.rs-field__control:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+
+/* vue-sonner 结构样式已在文件顶部 import；外观由 .rs-toast* 接管 */
+
+[data-sonner-toaster].rs-toaster {
+  z-index: var(--rs-z-toast);
+  font-family: inherit;
+}
+
+.rs-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--rs-space-sm);
+  position: relative;
+  min-width: 18rem;
+  max-width: min(28rem, calc(100vw - 2rem));
+  padding: var(--rs-space-md) var(--rs-space-lg);
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius);
+  background: var(--rs-surface-elevated);
+  color: var(--rs-text);
+  box-shadow: var(--rs-shadow-lg);
+}
+
+.rs-toast [data-icon] {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  margin-top: 0.125rem;
+}
+
+.rs-toast [data-content] {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  gap: var(--rs-space-xs);
+}
+
+.rs-toast--success {
+  border-color: color-mix(in srgb, var(--rs-success) 35%, var(--rs-border));
+}
+
+.rs-toast--error {
+  border-color: color-mix(in srgb, var(--rs-danger) 35%, var(--rs-border));
+}
+
+.rs-toast--warning {
+  border-color: color-mix(in srgb, var(--rs-warning) 35%, var(--rs-border));
+}
+
+.rs-toast--info {
+  border-color: color-mix(in srgb, var(--rs-info) 35%, var(--rs-border));
+}
+
+.rs-toast__title {
+  font-size: var(--rs-font-size-sm);
+  font-weight: 600;
+}
+
+.rs-toast__description {
+  color: var(--rs-muted);
+  font-size: var(--rs-font-size-sm);
+}
+
+.rs-toast__close {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: 1px solid var(--rs-border);
+  border-radius: var(--rs-radius-full);
+  background: var(--rs-surface-elevated);
+  color: var(--rs-muted);
+  cursor: pointer;
+  transform: translate(-35%, -35%);
+  transition:
+    background var(--rs-transition-fast),
+    border-color var(--rs-transition-fast),
+    color var(--rs-transition-fast);
+}
+
+.rs-toast__close:hover {
+  background: var(--rs-item-hover);
+  border-color: var(--rs-border);
+  color: var(--rs-text);
+}
+
+.rs-toast__close:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+
+/* Activity Bar「API」字标：粗圆角字重，随 currentColor */
+.lucide-api-icon .api-icon__label {
+  fill: currentColor;
+  stroke: none;
+  font-family: ui-rounded, 'SF Pro Rounded', 'Segoe UI', system-ui, sans-serif;
+  font-size: 9.5px;
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  text-anchor: middle;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* FTP 自定义图标：橙色实心文件夹 + 白色 FTP 字样 */
+.lucide-ftp-icon .ftp-icon__folder {
+  fill: var(--rs-icon-ftp-accent);
+  stroke: color-mix(in srgb, var(--rs-icon-ftp-accent) 55%, #1a1a1a);
+  stroke-width: 1.1;
+}
+
+.lucide-ftp-icon .ftp-icon__label {
+  fill: var(--rs-icon-ftp-on-accent);
+  stroke: none;
+  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
+  font-size: 6.2px;
+  font-weight: 900;
+  letter-spacing: -0.08em;
+  text-anchor: middle;
+  -webkit-font-smoothing: antialiased;
+}
+
+.rs-context-menu__item[data-highlighted] .lucide-ftp-icon .ftp-icon__folder,
+.rs-context-menu__item[data-state='open'] .lucide-ftp-icon .ftp-icon__folder {
+  fill: rgb(255 255 255 / 0.95);
+  stroke: rgb(255 255 255 / 0.55);
+}
+
+.rs-context-menu__item[data-highlighted] .lucide-ftp-icon .ftp-icon__label,
+.rs-context-menu__item[data-state='open'] .lucide-ftp-icon .ftp-icon__label {
+  fill: var(--rs-icon-ftp-accent);
+}
+
+/* Redis 自定义图标：官方品牌 mark，单色填充随主题调整明暗对比度 */
+.lucide-redis-icon .redis-icon__mark {
+  fill: var(--rs-icon-redis-accent);
+}
+
+.rs-context-menu__item[data-highlighted] .lucide-redis-icon .redis-icon__mark,
+.rs-context-menu__item[data-state='open'] .lucide-redis-icon .redis-icon__mark {
+  fill: rgb(255 255 255 / 0.95);
+}
+
+/* MongoDB 自定义图标：官方品牌 mark，单色填充随主题调整明暗对比度 */
+.lucide-mongodb-icon .mongodb-icon__mark {
+  fill: var(--rs-icon-mongodb-accent);
+}
+
+.rs-context-menu__item[data-highlighted] .lucide-mongodb-icon .mongodb-icon__mark,
+.rs-context-menu__item[data-state='open'] .lucide-mongodb-icon .mongodb-icon__mark {
+  fill: rgb(255 255 255 / 0.95);
+}
+
+/* Vastbase 自定义图标：海量数据官方品牌 mark，单色填充随主题调整明暗对比度 */
+.lucide-vastbase-icon .vastbase-icon__mark {
+  fill: var(--rs-icon-vastbase-accent);
+}
+
+.rs-context-menu__item[data-highlighted] .lucide-vastbase-icon .vastbase-icon__mark,
+.rs-context-menu__item[data-state='open'] .lucide-vastbase-icon .vastbase-icon__mark {
+  fill: rgb(255 255 255 / 0.95);
+}
+
+/* MySQL 自定义图标：官方品牌 mark，单色填充随主题调整明暗对比度 */
+.lucide-mysql-icon .mysql-icon__mark {
+  fill: var(--rs-icon-mysql-accent);
+}
+
+.rs-context-menu__item[data-highlighted] .lucide-mysql-icon .mysql-icon__mark,
+.rs-context-menu__item[data-state='open'] .lucide-mysql-icon .mysql-icon__mark {
+  fill: rgb(255 255 255 / 0.95);
+}
+
+/* Dameng 自定义图标：官方品牌 mark（蓝椭圆 + 红波浪） */
+.lucide-dameng-icon .dameng-icon__oval {
+  fill: var(--rs-icon-dameng-accent);
+}
+
+.lucide-dameng-icon .dameng-icon__wave {
+  fill: var(--rs-icon-dameng-wave);
+}
+
+.rs-context-menu__item[data-highlighted] .lucide-dameng-icon .dameng-icon__oval,
+.rs-context-menu__item[data-state='open'] .lucide-dameng-icon .dameng-icon__oval,
+.rs-context-menu__item[data-highlighted] .lucide-dameng-icon .dameng-icon__wave,
+.rs-context-menu__item[data-state='open'] .lucide-dameng-icon .dameng-icon__wave {
+  fill: rgb(255 255 255 / 0.95);
+}
+
+/* SQLite 自定义图标：官方品牌 mark，单色填充随主题调整明暗对比度 */
+.lucide-sqlite-icon .sqlite-icon__mark {
+  fill: var(--rs-icon-sqlite-accent);
+}
+
+.rs-context-menu__item[data-highlighted] .lucide-sqlite-icon .sqlite-icon__mark,
+.rs-context-menu__item[data-state='open'] .lucide-sqlite-icon .sqlite-icon__mark {
+  fill: rgb(255 255 255 / 0.95);
+}
+
+/* Oracle 自定义图标：官方品牌 oval mark，单色填充随主题调整明暗对比度 */
+.lucide-oracle-icon .oracle-icon__mark {
+  fill: var(--rs-icon-oracle-accent);
+}
+
+.rs-context-menu__item[data-highlighted] .lucide-oracle-icon .oracle-icon__mark,
+.rs-context-menu__item[data-state='open'] .lucide-oracle-icon .oracle-icon__mark {
+  fill: rgb(255 255 255 / 0.95);
+}
+
+/* ClickHouse 自定义图标：官方品牌 barcode mark，单色填充随主题调整明暗对比度 */
+.lucide-clickhouse-icon .clickhouse-icon__mark {
+  fill: var(--rs-icon-clickhouse-accent);
+}
+
+.rs-context-menu__item[data-highlighted] .lucide-clickhouse-icon .clickhouse-icon__mark,
+.rs-context-menu__item[data-state='open'] .lucide-clickhouse-icon .clickhouse-icon__mark {
+  fill: rgb(255 255 255 / 0.95);
+}
+
+/* 人大金仓自定义图标：官方品牌 K lettermark，单色填充随主题调整明暗对比度 */
+.lucide-kingbase-icon .kingbase-icon__mark {
+  fill: var(--rs-icon-kingbase-accent);
+}
+
+.rs-context-menu__item[data-highlighted] .lucide-kingbase-icon .kingbase-icon__mark,
+.rs-context-menu__item[data-state='open'] .lucide-kingbase-icon .kingbase-icon__mark {
+  fill: rgb(255 255 255 / 0.95);
+}
+
+/* SQL Server 自定义图标：官方品牌火焰/翼形 mark，单色填充随主题调整明暗对比度 */
+.lucide-sqlserver-icon .sqlserver-icon__mark {
+  fill: var(--rs-icon-sqlserver-accent);
+}
+
+.rs-context-menu__item[data-highlighted] .lucide-sqlserver-icon .sqlserver-icon__mark,
+.rs-context-menu__item[data-state='open'] .lucide-sqlserver-icon .sqlserver-icon__mark {
+  fill: rgb(255 255 255 / 0.95);
+}