first commit

2026-07-02 23:51:05 +08:00
commit 438be1a9df
32 changed files with 8418 additions and 0 deletions
@@ -0,0 +1,166 @@
+@use "./variables.scss" as *;
+
+:root {
+  --bg-deep: #{$bg-deep};
+  --bg-base: #{$bg-base};
+  --bg-elevated: #{$bg-elevated};
+  --bg-overlay: #{$bg-overlay};
+  --bg-hover: #{$bg-hover};
+  --bg-active: #{$bg-active};
+
+  --border-soft: #{$border-soft};
+  --border: #{$border};
+  --border-strong: #{$border-strong};
+
+  --primary: #{$primary};
+  --primary-hover: #{$primary-hover};
+  --primary-active: #{$primary-active};
+  --primary-bg: #{$primary-bg};
+
+  --cyan: #{$cyan};
+  --violet: #{$violet};
+  --success: #{$success};
+  --warning: #{$warning};
+  --danger: #{$danger};
+
+  --m-get: #{$m-get};
+  --m-post: #{$m-post};
+  --m-put: #{$m-put};
+  --m-delete: #{$m-delete};
+  --m-patch: #{$m-patch};
+
+  --text-primary: #{$text-primary};
+  --text-secondary: #{$text-secondary};
+  --text-tertiary: #{$text-tertiary};
+  --text-disabled: #{$text-disabled};
+
+  --font-xs: #{$font-xs};
+  --font-sm: #{$font-sm};
+  --font-base: #{$font-base};
+  --font-md: #{$font-md};
+  --font-lg: #{$font-lg};
+
+  --radius-sm: #{$radius-sm};
+  --radius: #{$radius};
+  --radius-lg: #{$radius-lg};
+
+  --shadow-glow: #{$shadow-glow};
+  --shadow-card: #{$shadow-card};
+  --shadow-elevate: #{$shadow-elevate};
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body, #app {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  background: $bg-deep;
+  color: $text-primary;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
+    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  font-size: $font-base;
+  line-height: 1.5;
+  overflow: hidden;
+}
+
+// 全局滚动条
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: $border;
+  border-radius: 4px;
+  &:hover { background: $border-strong; }
+}
+
+// 科技感背景：深蓝径向 + 网格线
+body {
+  background:
+    radial-gradient(1200px 800px at 80% -10%, rgba(78,161,255,0.08), transparent 60%),
+    radial-gradient(900px 600px at -10% 110%, rgba(34,211,238,0.06), transparent 60%),
+    $bg-deep;
+}
+
+button, input, select, textarea {
+  font-family: inherit;
+  color: inherit;
+}
+
+a { color: $primary; text-decoration: none; }
+
+input, textarea {
+  background: $bg-elevated;
+  border: 1px solid $border-soft;
+  border-radius: $radius-sm;
+  outline: none;
+  &:focus { border-color: $primary; box-shadow: 0 0 0 2px $primary-bg; }
+}
+
+// 通用按钮
+.xs-btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 5px 12px;
+  background: $bg-elevated;
+  border: 1px solid $border;
+  color: $text-primary;
+  border-radius: $radius;
+  cursor: pointer;
+  font-size: $font-base;
+  transition: all .18s ease;
+  &:hover { background: $bg-hover; border-color: $border-strong; }
+  &.primary {
+    background: $primary;
+    border-color: $primary;
+    color: #0a1428;
+    font-weight: 600;
+    &:hover { background: $primary-hover; border-color: $primary-hover; box-shadow: $shadow-glow; }
+    &:active { background: $primary-active; }
+  }
+  &.ghost { background: transparent; }
+  &.danger { color: $danger; border-color: rgba(248,113,113,.4); &:hover { background: rgba(248,113,113,.1); } }
+  &:disabled { opacity: .5; cursor: not-allowed; }
+}
+
+.xs-input {
+  width: 100%;
+  padding: 6px 10px;
+}
+
+.xs-divider {
+  height: 1px;
+  background: $border-soft;
+  margin: 8px 0;
+}
+
+// 科技感输入框 + tag 输入域
+.tech-input {
+  background: rgba(15,28,54,.6);
+  border: 1px solid $border-soft;
+  border-radius: $radius;
+  padding: 6px 10px;
+  outline: none;
+  transition: all .2s ease;
+  &:focus {
+    border-color: $primary;
+    background: rgba(15,28,54,.9);
+    box-shadow: 0 0 0 3px rgba(78,161,255,.12);
+  }
+}
+
+// 通用卡片
+.tech-card {
+  background: linear-gradient(180deg, rgba(15,28,54,.65), rgba(15,28,54,.35));
+  border: 1px solid $border-soft;
+  border-radius: $radius;
+}
+
+// 提示文字
+.muted { color: $text-tertiary; }
+.secondary { color: $text-secondary; }
@@ -0,0 +1,69 @@
+// 科技深蓝主题 token —— 用作 SCSS 变量与 CSS 变量两套
+// 主色：电光蓝 cyan-blue，搭配深空蓝背景
+
+// 基础色
+$bg-deep:        #050b1a;   // 最底层
+$bg-base:        #0a1428;   // 主背景
+$bg-elevated:    #0f1c36;   // 卡片/浮层
+$bg-overlay:     #122244;   // 菜单悬停
+$bg-hover:       #1a2b4f;   // hover
+$bg-active:      #1d3361;   // active
+
+// 边框 / 分隔
+$border-soft:    #1d2f54;
+$border:         #243b6b;
+$border-strong:  #3553a3;
+
+// 主色
+$primary:        #4ea1ff;   // 电光蓝
+$primary-hover:  #6fb6ff;
+$primary-active: #2d7ed8;
+$primary-bg:     rgba(78, 161, 255, 0.12);
+
+// 辅助
+$cyan:           #22d3ee;
+$violet:         #8b5cf6;
+$success:        #34d399;
+$warning:        #fbbf24;
+$danger:         #f87171;
+
+// HTTP method
+$m-get:          #34d399;
+$m-post:         #fbbf24;
+$m-put:          #4ea1ff;
+$m-delete:       #f87171;
+$m-patch:        #8b5cf6;
+
+// 文本
+$text-primary:   #e6f0ff;
+$text-secondary: #9bb4d8;
+$text-tertiary:  #6b85b3;
+$text-disabled:  #48588a;
+
+// 字号
+$font-xs:        11px;
+$font-sm:        12px;
+$font-base:      13px;
+$font-md:        14px;
+$font-lg:        16px;
+$font-xl:        20px;
+$font-2xl:       24px;
+
+// 圆角
+$radius-sm:      4px;
+$radius:         6px;
+$radius-lg:      10px;
+$radius-xl:      14px;
+
+// 阴影 / 发光
+$shadow-glow:    0 0 18px rgba(78, 161, 255, 0.25);
+$shadow-card:    0 4px 14px rgba(0, 0, 0, 0.4);
+$shadow-elevate: 0 8px 32px rgba(0, 0, 0, 0.55);
+
+// 间距
+$gap-1: 4px;
+$gap-2: 8px;
+$gap-3: 12px;
+$gap-4: 16px;
+$gap-5: 20px;
+$gap-6: 24px;