From bde0a8fd65ae60fe8cc704d0e533adc9b42cba89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98Liammcl=E2=80=99?= <liamzi6666@163.com>
Date: Thu, 26 Dec 2024 22:10:19 +0800
Subject: [PATCH] =?UTF-8?q?=E8=89=B2=E5=BD=A9=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                   | 136 +-----------------
 src/contexts/ThemeContext.jsx                 | 125 ++++++++++++----
 src/pages/company/customer/detail/index.jsx   |   2 +-
 src/pages/company/quotation/detail/index.jsx  |   2 +-
 src/pages/company/service/detail/index.jsx    |  16 ++-
 src/pages/company/service/index.jsx           |  30 ++--
 src/pages/company/supplier/detail/index.jsx   |   2 +-
 .../resource/resourceTask/edit/index.jsx      |   2 +-
 src/styles/main.scss                          |   2 +-
 9 files changed, 129 insertions(+), 188 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 48358dc..59d2c36 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,144 +1,10 @@
 import React from "react";
 import { BrowserRouter } from "react-router-dom";
-import { ConfigProvider, theme } from "antd";
 import { ThemeProvider } from "./contexts/ThemeContext";
 import { AuthProvider } from "./contexts/AuthContext";
 import AppRoutes from "./routes/AppRoutes";
-import { useTheme } from "./contexts/ThemeContext";
 import { RootStoreProvider } from "./contexts/RootStore";
 
-const ThemedApp = () => {
-  const { isDarkMode } = useTheme();
-
-  return (
-    <ConfigProvider
-      theme={{
-        algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
-        token: {
-          // 颜色
-          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: {
-          // 按钮样式
-          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',
-          },
-          // 表单样式
-          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',
-          },
-          TimePicker: {
-            variant: 'filled',
-          },
-          Cascader: {
-            variant: 'filled',
-          },
-          TreeSelect: {
-            variant: 'filled',
-          },
-          AutoComplete: {
-            variant: 'filled',
-          },
-        },
-      }}
-    >
-      <div className={isDarkMode ? "dark" : ""}>
-        <AppRoutes />
-      </div>
-    </ConfigProvider>
-  );
-};
 
 const App = () => {
   return (
@@ -146,7 +12,7 @@ const App = () => {
       <AuthProvider>
         <RootStoreProvider>
           <ThemeProvider>
-            <ThemedApp />
+        <AppRoutes />
           </ThemeProvider>
         </RootStoreProvider>
       </AuthProvider>
diff --git a/src/contexts/ThemeContext.jsx b/src/contexts/ThemeContext.jsx
index b86fcdb..e1afa32 100644
--- a/src/contexts/ThemeContext.jsx
+++ b/src/contexts/ThemeContext.jsx
@@ -20,46 +20,119 @@ export const ThemeProvider = ({ children }) => {
   return (
     <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
  <ConfigProvider
+      componentSize="small"
       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)",
+          // 主色调 - Google Blue
+          colorPrimary: '#1a73e8',
+          colorPrimaryHover: '#1557b0',
+          colorPrimaryActive: '#174ea6',
+          
+          // 成功色 - Google Green
+          colorSuccess: '#1e8e3e',
+          colorSuccessHover: '#188130',
+          colorSuccessActive: '#137333',
+          
+          // 警告色 - Google Yellow
+          colorWarning: '#f9ab00',
+          colorWarningHover: '#f29900',
+          colorWarningActive: '#ea8600',
+          
+          // 错误色 - Google Red
+          colorError: '#d93025',
+          colorErrorHover: '#c5221f',
+          colorErrorActive: '#a50e0e',
+          
+          // 文字颜色
+          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 ? '#1f1f1f' : '#ffffff',
+          colorBgElevated: isDarkMode ? '#2d2d2d' : '#ffffff',
+          colorBgLayout: isDarkMode ? '#121212' : '#f8f9fa',
+          
+          // 边框
+          borderRadius: 8,
+          borderRadiusLG: 12,
+          borderRadiusSM: 4,
+          colorBorder: isDarkMode ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)',
+          
+          // 阴影
+          boxShadow: '0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15)',
+          boxShadowSecondary: '0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15)',
+          
+          // 字体
+          fontFamily: 'Google Sans, Roboto, Arial, sans-serif',
+          fontSize: 14,
+          
+          // 控件尺寸
+          controlHeight: 36,
+          controlHeightSM: 32,
+          controlHeightLG: 44,
         },
         components: {
-          // 为所有支持 variant 的组件设置 filled 模式
-          Form: {
-            variant: 'filled',
+          Button: {
+            algorithm: true,
+            borderRadius: 20,  // Google 风格的圆角按钮
+            controlHeight: 36,
+            controlHeightSM: 32,
+            controlHeightLG: 44,
+            paddingContentHorizontal: 24,
           },
           Input: {
-            variant: 'filled',
+            algorithm: true,
+            controlHeight: 36,
+            controlHeightSM: 32,
+            controlHeightLG: 44,
+            paddingContentHorizontal: 16,
+            borderRadius: 4,
+            controlOutline: 'none',
+            controlOutlineWidth: 0,
+            controlPaddingHorizontal: 16,
+            controlPaddingHorizontalSM: 12,
+            addonBg: 'transparent',
           },
           Select: {
-            variant: 'filled',
+            algorithm: true,
+            controlHeight: 36,
+            controlHeightSM: 32,
+            controlHeightLG: 44,
+            borderRadius: 4,
+            controlOutline: 'none',
+            controlOutlineWidth: 0,
+            selectorBg: 'transparent',
           },
-          TreeSelect: {
-            variant: 'filled',
+          Card: {
+            algorithm: true,
+            borderRadiusLG: 8,
+            boxShadow: '0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15)',
           },
-          DatePicker: {
-            variant: 'filled',
+          Menu: {
+            algorithm: true,
+            itemBorderRadius: 20,  // Google 风格的圆角菜单项
+            itemHeight: 36,
+            itemHeightSM: 32,
           },
-          TimePicker: {
-            variant: 'filled',
+          Tabs: {
+            algorithm: true,
+            inkBarColor: '#1a73e8',
+            itemSelectedColor: '#1a73e8',
+            itemHoverColor: '#174ea6',
           },
-          Cascader: {
-            variant: 'filled',
-          },
-          AutoComplete: {
-            variant: 'filled',
+          Table: {
+            algorithm: true,
+            borderRadius: 8,
+            headerBg: isDarkMode ? '#2d2d2d' : '#f8f9fa',
           },
+          Modal: {
+            algorithm: true,
+            borderRadius: 28,  // Google 风格的大圆角对话框
+            paddingContentHorizontal: 24,
+            paddingContentVertical: 24,
+          }
         }
       }}
     >
diff --git a/src/pages/company/customer/detail/index.jsx b/src/pages/company/customer/detail/index.jsx
index d0a2825..44f4933 100644
--- a/src/pages/company/customer/detail/index.jsx
+++ b/src/pages/company/customer/detail/index.jsx
@@ -83,7 +83,7 @@ const CustomerForm = () => {
   };
 
   return (
-    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-6">
+    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-2">
       <Card 
         className="shadow-lg rounded-lg border-0"
         title={
diff --git a/src/pages/company/quotation/detail/index.jsx b/src/pages/company/quotation/detail/index.jsx
index 8e508fa..d30448e 100644
--- a/src/pages/company/quotation/detail/index.jsx
+++ b/src/pages/company/quotation/detail/index.jsx
@@ -629,7 +629,7 @@ const QuotationForm = () => {
   };
 
   return (
-    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-6">
+    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-2">
       <Card
         className="shadow-lg rounded-lg border-0"
         title={
diff --git a/src/pages/company/service/detail/index.jsx b/src/pages/company/service/detail/index.jsx
index d5daafe..a1255c1 100644
--- a/src/pages/company/service/detail/index.jsx
+++ b/src/pages/company/service/detail/index.jsx
@@ -12,7 +12,7 @@ import {
 import {
   ArrowLeftOutlined,
 } from "@ant-design/icons";
-import { useNavigate, useParams, useLocation } from "react-router-dom";
+import { useNavigate, useParams,useSearchParams, useLocation } from "react-router-dom";
 import { supabase } from "@/config/supabase";
 import SectionList from '@/components/SectionList';
 
@@ -21,7 +21,9 @@ const { Title } = Typography;
 const ServiceForm = () => {
   const [form] = Form.useForm();
   const navigate = useNavigate();
-  const { id } = useParams();
+  const { id} = useParams();
+  const [searchParams] = useSearchParams();
+  const isView = searchParams.get("isView") === "true";
   const [loading, setLoading] = useState(false);
   const location = useLocation();
   const isEdit = location.search.includes("edit=true");
@@ -136,7 +138,7 @@ const ServiceForm = () => {
   };
 
   return (
-    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-6">
+    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-2">
       <Card
         className="shadow-lg rounded-lg border-0"
         title={
@@ -160,13 +162,13 @@ const ServiceForm = () => {
               >
                 返回
               </Button>
-                <Button
+              {!isView&&  <Button
                   type="primary"
                   onClick={() => form.submit()}
                   loading={loading}
                 >
                   保存
-                </Button>
+                </Button>}
             </Space>
           </div>
         }
@@ -176,8 +178,9 @@ const ServiceForm = () => {
           onFinish={onFinish}
           onValuesChange={handleValuesChange}
           layout="vertical"
+          variant="filled"
+          disabled={isView}
         >
-          {/* 基本信息 */}
           <Card
             className="shadow-sm rounded-lg mb-6"
             type="inner"
@@ -221,7 +224,6 @@ const ServiceForm = () => {
             </div>
           </Card>
 
-          {/* 服务明细 */}
           <Card
             className="shadow-sm rounded-lg"
             type="inner"
diff --git a/src/pages/company/service/index.jsx b/src/pages/company/service/index.jsx
index ce13f93..15ce7d5 100644
--- a/src/pages/company/service/index.jsx
+++ b/src/pages/company/service/index.jsx
@@ -311,21 +311,21 @@ const ServicePage = () => {
         </Paragraph>
       ),
     },
-    {
-      title: "总金额",
-      dataIndex: ["attributes", "totalAmount"],
-      key: "totalAmount",
-      className: "min-w-[150px] text-right",
-      render: (amount) => (
-        <span style={{ color: "#f50", fontWeight: "bold" }}>
-          ¥
-          {amount?.toLocaleString("zh-CN", {
-            minimumFractionDigits: 2,
-            maximumFractionDigits: 2,
-          }) || "0.00"}
-        </span>
-      ),
-    },
+    // {
+    //   title: "总金额",
+    //   dataIndex: ["attributes", "totalAmount"],
+    //   key: "totalAmount",
+    //   className: "min-w-[150px] text-right",
+    //   render: (amount) => (
+    //     <span style={{ color: "#f50", fontWeight: "bold" }}>
+    //       ¥
+    //       {amount?.toLocaleString("zh-CN", {
+    //         minimumFractionDigits: 2,
+    //         maximumFractionDigits: 2,
+    //       }) || "0.00"}
+    //     </span>
+    //   ),
+    // },
     {
       title: "操作",
       key: "action",
diff --git a/src/pages/company/supplier/detail/index.jsx b/src/pages/company/supplier/detail/index.jsx
index 19d9e1f..6bed383 100644
--- a/src/pages/company/supplier/detail/index.jsx
+++ b/src/pages/company/supplier/detail/index.jsx
@@ -83,7 +83,7 @@ const SupplierForm = () => {
   };
 
   return (
-    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-6">
+    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-2">
       <Card 
         className="shadow-lg rounded-lg border-0"
         title={
diff --git a/src/pages/resource/resourceTask/edit/index.jsx b/src/pages/resource/resourceTask/edit/index.jsx
index 2cf62bc..c4bf672 100644
--- a/src/pages/resource/resourceTask/edit/index.jsx
+++ b/src/pages/resource/resourceTask/edit/index.jsx
@@ -172,7 +172,7 @@ const ResourceTaskForm = () => {
   };
 
   return (
-    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-6">
+    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-2">
       <Card
         className="shadow-lg rounded-lg border-0"
         title={
diff --git a/src/styles/main.scss b/src/styles/main.scss
index ab7efa0..58f5740 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,7 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap');
 :root {
   --primary-color: #1677ff;
   --primary-gradient: linear-gradient(45deg, #1677ff, #36cff0);