ui风格封装

src/App.jsx

@@ -15,31 +15,106 @@ const ThemedApp = () => {
       theme={{
         algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
         token: {
-          colorPrimary: "#1677ff",
-          borderRadius: 4,
-          colorBgContainer: isDarkMode ? "#141414" : "#ffffff",
-          colorBgElevated: isDarkMode ? "#1f1f1f" : "#ffffff",
-          colorText: isDarkMode
-            ? "rgba(255, 255, 255, 0.85)"
-            : "rgba(0, 0, 0, 0.85)",
-          colorTextSecondary: isDarkMode
-            ? "rgba(255, 255, 255, 0.45)"
-            : "rgba(0, 0, 0, 0.45)",
+          // 颜色
+          colorPrimary: '#006494',
+          colorSuccess: '#16A34A',
+          colorWarning: '#FBBF24',
+          colorError: '#DC2626',
+          colorInfo: '#006494',
+          
+          // 中性色
+          colorText: isDarkMode ? 'rgba(255, 255, 255, 0.87)' : 'rgba(0, 0, 0, 0.87)',
+          colorTextSecondary: isDarkMode ? 'rgba(255, 255, 255, 0.60)' : 'rgba(0, 0, 0, 0.60)',
+          colorTextTertiary: isDarkMode ? 'rgba(255, 255, 255, 0.38)' : 'rgba(0, 0, 0, 0.38)',
+          colorBgContainer: isDarkMode ? '#121212' : '#ffffff',
+          colorBgElevated: isDarkMode ? '#242424' : '#ffffff',
+          colorBorder: isDarkMode ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)',
+
+          // 字体
+          fontFamily: '"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+          fontSize: 16,
+          
+          // 圆角
+          borderRadius: 8,
+          borderRadiusLG: 12,
+          borderRadiusSM: 4,
+          borderRadiusXS: 2,
+
+          // 线框
+          lineWidth: 1,
+          lineType: 'solid',
+
+          // 动画
+          motionDurationMid: '0.2s',
+          motionEaseInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+          motionEaseOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
+          motionEaseIn: 'cubic-bezier(0.4, 0, 1, 1)',
+
+          // 阴影
+          boxShadow: isDarkMode 
+            ? '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15)' 
+            : '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 3px rgba(0, 0, 0, 0.08)',
+          boxShadowSecondary: isDarkMode
+            ? '0 4px 12px 6px rgba(0, 0, 0, 0.4)'
+            : '0 4px 12px 6px rgba(0, 0, 0, 0.12)',
         },
         components: {
-          // 为所有支持 variant 的组件设置 filled 模式
-          Form: {
-            variant: 'filled',
+          // 按钮样式
+          Button: {
+            borderRadius: 8,
+            controlHeight: 40,
+            paddingContentHorizontal: 24,
+            primaryShadow: 'none',
           },
+          // 输入框样式
           Input: {
+            controlHeight: 48,
+            borderRadius: 8,
+            paddingContentHorizontal: 16,
             variant: 'filled',
           },
+          // 选择器样式
           Select: {
+            controlHeight: 48,
+            borderRadius: 8,
             variant: 'filled',
           },
-          TreeSelect: {
+          // 表单样式
+          Form: {
+            labelFontSize: 14,
+            margin: 24,
+            itemMarginBottom: 24,
             variant: 'filled',
           },
+          // 卡片样式
+          Card: {
+            borderRadius: 12,
+            padding: 24,
+          },
+          // 模态框样式
+          Modal: {
+            borderRadius: 12,
+            paddingContentHorizontal: 24,
+            paddingContentVertical: 24,
+          },
+          // 下拉菜单样式
+          Dropdown: {
+            borderRadius: 8,
+            controlHeight: 40,
+          },
+          // 标签页样式
+          Tabs: {
+            inkBarColor: '#006494',
+            cardGutter: 8,
+          },
+          // 表格样式
+          Table: {
+            borderRadius: 8,
+            padding: 16,
+            cellPaddingBlock: 16,
+            cellPaddingInline: 16,
+          },
+          // 其他组件的 filled 变体设置
           DatePicker: {
             variant: 'filled',
           },
@@ -49,10 +124,13 @@ const ThemedApp = () => {
           Cascader: {
             variant: 'filled',
           },
+          TreeSelect: {
+            variant: 'filled',
+          },
           AutoComplete: {
             variant: 'filled',
           },
-        }
+        },
       }}
     >
       <div className={isDarkMode ? "dark" : ""}>