refactor: change the theme color scheme

2025-10-28 20:26:10 +08:00
parent bd817279db
commit a05bd23766
12 changed files with 158 additions and 41 deletions
--- a/src/components/InputDrawer.css
+++ b/src/components/InputDrawer.css
@@ -1,6 +1,6 @@
-/* 右侧输入抽屉样式（参考示例配色） */
+/* 右侧输入抽屉样式（薄荷之春配色） */
 .input-drawer .ant-drawer-body {
-  background: #e9b6b6; /* 淡粉色背景，贴近参考图 */
+  background: var(--color-primary);
 }

 .input-drawer-inner {
@@ -11,13 +11,13 @@
 }
 .input-drawer-title {
  font-weight: 700;
-  color: #3b3b3b;
+  color: var(--text-primary);
  letter-spacing: 0.5px;
  text-align: center;
 }

 .input-drawer-box {
-  background: rgba(255,255,255,0.75);
+  background: var(--bg-card);
  border-radius: 12px;
  padding: 16px 18px; /* 增大内边距 */
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
--- a/src/components/InputDrawer.tsx
+++ b/src/components/InputDrawer.tsx
@@ -43,7 +43,7 @@ const InputDrawer: React.FC<Props> = ({ open, onClose, onResult, containerEl })
      width={isMobile ? '100%' : '33%'}
      open={open}
      onClose={onClose}
-      mask={false}
+      mask
      getContainer={containerEl ? () => containerEl : undefined}
      closable={false}
      zIndex={1500}
@@ -58,7 +58,7 @@ const InputDrawer: React.FC<Props> = ({ open, onClose, onResult, containerEl })
          alignItems: 'center',
          justifyContent: 'center',
        },
-        mask: { top: topbarHeight, height: `calc(100% - ${topbarHeight}px)` },
+        // mask: { top: topbarHeight, height: `calc(100% - ${topbarHeight}px)`, backgroundColor: 'var(--mask)' },
      }}
    >
      <div className="input-drawer-inner">
--- a/src/components/InputPanel.css
+++ b/src/components/InputPanel.css
@@ -7,14 +7,25 @@

 .input-panel .ant-input-outlined,
 .input-panel .ant-input {
-  background: rgba(255,255,255,0.04);
-  color: #e5e7eb;
+  background: var(--bg-card);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
  min-height: 180px; /* 提升基础高度，配合 autoSize 更宽裕 */
 }

+.input-panel .ant-input::placeholder { color: var(--placeholder); }
+.input-panel .ant-input:focus,
+.input-panel .ant-input-focused {
+  border-color: var(--color-primary-600);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+}
+
 .input-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
-}
+}
+
+.input-actions .ant-btn-text { color: var(--text-secondary); }
+.input-actions .ant-btn-text:hover { color: var(--color-primary-600); }
--- a/src/components/KeyValueList.css
+++ b/src/components/KeyValueList.css
@@ -12,6 +12,13 @@
 }

 .kv-list .ant-input {
-  background: rgba(255,255,255,0.03);
-  color: #e5e7eb;
+  background: var(--bg-card);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+}
+
+.kv-list .ant-input::placeholder { color: var(--placeholder); }
+.kv-list .ant-input:focus {
+  border-color: var(--color-primary-600);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
 }
--- a/src/components/MainContent.tsx
+++ b/src/components/MainContent.tsx
@@ -17,11 +17,11 @@ const MainContent: React.FC<Props> = ({ inputOpen = false, onCloseInput, contain
  return (
    <Content className="main-content">
      <div className="content-body">
-        <Typography.Title level={3} style={{ color: '#e5e7eb', marginBottom: 12 }}>
+        <Typography.Title level={3} style={{ color: 'var(--text-primary)', marginBottom: 12 }}>
          ✨ 有新资源了吗?
        </Typography.Title>
-        <Typography.Paragraph style={{ color: '#a6adbb', marginBottom: 0 }}>
-          输入个人信息描述，上传图片，我将自动整理资源信息
+        <Typography.Paragraph style={{ color: 'var(--muted)', marginBottom: 0 }}>
+          点击右上角可以直接输入个人信息描述或上传图片，我将自动整理TA的信息
        </Typography.Paragraph>

        <PeopleForm initialData={formData} />
--- a/src/components/PeopleForm.css
+++ b/src/components/PeopleForm.css
@@ -2,13 +2,14 @@
 .people-form {
  margin-top: 16px;
  padding: 20px;
-  border: 1px solid rgba(255,255,255,0.1);
+  border: 1px solid var(--border);
  border-radius: 12px;
-  background: rgba(255,255,255,0.04);
+  background: var(--bg-card);
+  color: var(--text-primary);
 }

 .people-form .ant-form-item-label > label {
-  color: #cbd5e1;
+  color: var(--text-secondary);
 }

 .people-form .ant-input,
@@ -16,11 +17,24 @@
 .people-form .ant-select-selector,
 .people-form .ant-input-number,
 .people-form .ant-input-number-input {
-  background: rgba(255,255,255,0.03);
-  color: #e5e7eb;
+  background: var(--bg-card);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
 }

 .people-form .ant-select-selection-item,
 .people-form .ant-select-selection-placeholder {
-  color: #cbd5e1;
+  color: var(--placeholder);
+}
+.people-form .ant-select-selection-item { color: var(--text-primary); }
+
+/* 输入占位与聚焦态 */
+.people-form .ant-input::placeholder { color: var(--placeholder); }
+.people-form .ant-input-number-input::placeholder { color: var(--placeholder); }
+.people-form .ant-input:focus,
+.people-form .ant-input-affix-wrapper-focused,
+.people-form .ant-select-focused .ant-select-selector,
+.people-form .ant-input-number-focused {
+  border-color: var(--color-primary-600) !important;
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
 }
--- a/src/components/ResourceList.tsx
+++ b/src/components/ResourceList.tsx
@@ -566,7 +566,7 @@ const ResourceList: React.FC = () => {
  return (
    <Content className="main-content">
      <div className="content-body">
-        <Typography.Title level={3} style={{ color: '#e5e7eb', marginBottom: 12 }}>
+        <Typography.Title level={3} style={{ color: 'var(--text-primary)', marginBottom: 12 }}>
          资源列表
        </Typography.Title>

--- a/src/components/SiderMenu.css
+++ b/src/components/SiderMenu.css
@@ -1,5 +1,5 @@
 /* 侧边菜单组件局部样式 */
-.sider-header { border-bottom: 1px solid rgba(255,255,255,0.08); }
+.sider-header { border-bottom: 1px solid rgba(255,255,255,0.08); color: var(--text-invert); }

 /* 收起时图标水平居中（仅 PC 端 Sider 使用） */
 .sider-header.collapsed { justify-content: center; }
@@ -14,6 +14,42 @@

 /* 移动端 Drawer 背景与滚动 */
 .mobile-menu-drawer .ant-drawer-body {
-  background: #0f172a; /* 与页面暗色一致 */
+  background: linear-gradient(180deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.22) 100%), var(--bg-sider);
  padding: 0;
+  height: 100%;
+}
+
+/* Dark 菜单项：选中与悬停采用薄荷主色的柔和高亮 */
+.ant-menu-dark .ant-menu-item-selected {
+  background-color: rgba(167, 243, 208, 0.16) !important;
+  color: var(--text-invert) !important;
+}
+.ant-menu-dark .ant-menu-item:hover {
+  background-color: rgba(255, 255, 255, 0.08) !important;
+}
+
+/* 移动端菜单背景透明以露出侧栏渐变 */
+.mobile-menu-drawer .ant-menu { background: transparent !important; }
+
+/* 统一 Sider 背景为薄荷风格的深色渐变 */
+.ant-layout-sider {
+  background: linear-gradient(180deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.22) 100%), var(--bg-sider) !important;
+}
+.ant-layout-sider .ant-menu { background: transparent !important; }
+
+/* Sider 触发按钮（折叠/展开）样式 */
+.ant-layout-sider-trigger {
+  background: linear-gradient(180deg, rgba(16,185,129,0.18) 0%, rgba(16,185,129,0.28) 100%) !important;
+  color: var(--text-invert) !important;
+  border-top: 1px solid rgba(167, 243, 208, 0.25);
+}
+
+/* 移动端汉堡按钮风格 */
+.mobile-menu-trigger {
+  border: 1px solid rgba(255,255,255,0.16);
+  background: linear-gradient(180deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.24) 100%);
+  color: var(--text-invert);
+}
+.mobile-menu-trigger:hover {
+  background: rgba(16,185,129,0.35);
 }
--- a/src/components/SiderMenu.tsx
+++ b/src/components/SiderMenu.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Layout, Menu, Grid, Drawer, Button } from 'antd';
-import { CodeOutlined, HomeOutlined, UnorderedListOutlined, AppstoreOutlined, MenuOutlined } from '@ant-design/icons';
+import { CodeOutlined, HomeOutlined, UnorderedListOutlined, MenuOutlined } from '@ant-design/icons';
 import './SiderMenu.css';

 const { Sider } = Layout;
@@ -32,9 +32,9 @@ const SiderMenu: React.FC<Props> = ({ onNavigate, selectedKey, mobileOpen, onMob
  }, [selectedKey]);

  const items = [
-    { key: 'home', label: '首页', icon: <HomeOutlined /> },
-    { key: 'menu1', label: '资源列表', icon: <UnorderedListOutlined /> },
-    { key: 'menu2', label: '菜单2', icon: <AppstoreOutlined /> },
+    { key: 'home', label: '注册', icon: <HomeOutlined /> },
+    { key: 'menu1', label: '列表', icon: <UnorderedListOutlined /> },
+    // { key: 'menu2', label: '菜单2', icon: <AppstoreOutlined /> },
  ];

  // 移动端：使用 Drawer 覆盖主内容
@@ -63,8 +63,8 @@ const SiderMenu: React.FC<Props> = ({ onNavigate, selectedKey, mobileOpen, onMob
          <div className="sider-header">
            <CodeOutlined style={{ fontSize: 22 }} />
            <div>
-              <div className="sider-title">网站标题</div>
-              <div className="sider-desc">网站描述信息</div>
+              <div className="sider-title">单身管理</div>
+              <div className="sider-desc">录入、展示与搜索你的单身资源</div>
            </div>
          </div>
          <Menu
@@ -99,8 +99,8 @@ const SiderMenu: React.FC<Props> = ({ onNavigate, selectedKey, mobileOpen, onMob
        <CodeOutlined style={{ fontSize: 22 }} />
        {!collapsed && (
          <div>
-            <div className="sider-title">网站标题</div>
-            <div className="sider-desc">网站描述信息</div>
+            <div className="sider-title">单身管理</div>
+            <div className="sider-desc">录入、展示与搜索你的单身资源</div>
          </div>
        )}
      </div>
--- a/src/components/TopBar.css
+++ b/src/components/TopBar.css
@@ -7,8 +7,8 @@
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
-  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.35) 100%);
-  border-bottom: 1px solid rgba(255,255,255,0.08);
+  background: linear-gradient(180deg, rgba(6, 78, 59, 0.55) 0%, rgba(6, 78, 59, 0.88) 100%);
+  border-bottom: 1px solid rgba(167, 243, 208, 0.25);
  backdrop-filter: blur(4px);
 }

@@ -18,7 +18,7 @@
  font-weight: 600;
  font-style: italic;
  letter-spacing: 1px;
-  color: #e5e7eb;
+  color: var(--text-invert);
 }

 .topbar-left,
@@ -35,11 +35,11 @@
  width: 36px;
  height: 36px;
  border-radius: 8px;
-  border: 1px solid rgba(255,255,255,0.12);
-  background: rgba(255,255,255,0.04);
-  color: #93c5fd; /* 主题蓝 */
+  border: 1px solid rgba(255,255,255,0.16);
+  background: linear-gradient(180deg, rgba(16,185,129,0.15) 0%, rgba(16,185,129,0.25) 100%);
+  color: var(--color-primary-600);
 }
-.icon-btn:hover { background: rgba(255,255,255,0.08); }
+.icon-btn:hover { background: rgba(16,185,129,0.35); }

@media (min-width: 768px) {
  .topbar { grid-template-columns: 56px 1fr 56px; }
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -1,4 +1,21 @@
 /* 全局基础样式 */
+:root {
+  /* Minty Spring 主题变量 */
+  --color-primary: #A7F3D0; /* 薄荷绿 */
+  --color-primary-600: #10B981; /* 深薄荷绿，用于文本/边框强调 */
+  --color-accent: #F97A7A; /* 珊瑚红（CTA） */
+  --bg-app: #F9F9F9; /* 主内容背景 */
+  --bg-sider: #262626; /* 侧栏与深色顶栏 */
+  --bg-card: #FFFFFF; /* 卡片与输入框背景 */
+  --text-primary: #334155; /* 深石板灰 */
+  --text-secondary: #475569; /* 次要文本 */
+  --text-invert: #E5E7EB; /* 深背景上的浅文本 */
+  --border: #E2E8F0; /* 通用边框 */
+  --muted: #94A3B8; /* 提示文字 */
+  --placeholder: hsla(215, 12%, 35%, 0.15); /* 更淡的占位符 */
+  --focus: #A7F3D0; /* 聚焦外光圈 */
+  --mask: rgba(17, 24, 39, 0.35); /* 遮罩 */
+}
@supports (font-variation-settings: normal) {
  :root { font-synthesis-weight: none; }
 }
@@ -9,10 +26,11 @@ html, body, #root {

 body {
  margin: 0;
+  /* 保留暗色基底，但主内容将使用浅色背景 */
  background: radial-gradient(1200px 600px at 70% -100px, rgba(92,124,255,0.25) 0%, rgba(92,124,255,0.06) 45%, transparent 60%),
              radial-gradient(800px 400px at -200px 20%, rgba(120,220,255,0.15) 0%, rgba(120,220,255,0.06) 50%, transparent 70%),
              #0f172a; /* slate-900 */
-  color: #e5e7eb; /* gray-200 */
+  color: var(--text-invert);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
@@ -33,4 +51,28 @@ body {
 ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
+}
+
+/* 全局主按钮样式（Ant Design） */
+.ant-btn-primary {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+}
+.ant-btn-primary:hover,
+.ant-btn-primary:focus {
+  background: #F06363;
+  border-color: #F06363;
+}
+.ant-btn-primary:disabled {
+  background: #FBC2C2;
+  border-color: #FBC2C2;
+  color: rgba(255,255,255,0.7);
+}
+
+/* 全局更淡的占位符颜色 */
+.ant-input::placeholder,
+.ant-input-affix-wrapper input::placeholder,
+.ant-input-number-input::placeholder,
+textarea::placeholder {
+  color: var(--placeholder) !important;
 }
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -3,6 +3,9 @@
  min-height: 100vh;
 }

+/* 消除 Ant Layout 默认白底，避免顶栏下方看到白边 */
+.layout-wrapper .ant-layout { background: transparent; }
+
 /* 侧栏头部区域 */
 .sider-header {
  display: flex;
@@ -25,10 +28,14 @@
  display: flex;
  flex-direction: column;
  height: 100%;
+  background: var(--bg-app);
 }
 .content-body {
  flex: 1;
  padding: 32px;
+  background: transparent;
+  color: var(--text-primary);
+  border-radius: 12px;
 }

 /* 输入面板固定底部 */
@@ -44,11 +51,11 @@
 .hint-text {
  margin-top: 10px;
  font-size: 12px;
-  color: #9ca3af;
+  color: var(--muted);
 }

 /* 小屏优化：输入区域内边距更紧凑 */
@media (max-width: 768px) {
-  .content-body { padding: 16px; }
+  .content-body { padding: 16px; border-radius: 0; }
  .input-panel-wrapper { padding: 12px 12px 16px 12px; }
 }