From b9ea7218e3b6b72c6ac642b06783a889ab28db40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98Liammcl=E2=80=99?= <liamzi6666@163.com>
Date: Fri, 27 Dec 2024 01:10:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=9C=8D=E5=8A=A1=E6=A8=A1=E7=89=88=20?=
 =?UTF-8?q?=E6=8A=BD=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jsconfig.json                                 |    7 +-
 src/components/SectionList/index.jsx          |   76 +-
 src/components/TemplateTypeModal/index.jsx    |   55 +
 src/contexts/ThemeContext.jsx                 |    2 +-
 src/hooks/supabaseService.js                  |   26 +-
 src/pages/company/customer/detail/index.jsx   |    2 +-
 src/pages/company/quotation/detail/index.jsx  |    2 +-
 src/pages/company/service/classify/index.jsx  |  180 ++-
 .../detail/components/ProjectTemplate.jsx     |   19 +
 .../detail/components/QuotationTemplate.jsx   |  222 ++++
 .../detail/components/TaskTemplate.jsx        |   19 +
 src/pages/company/service/detail/index.jsx    |  266 +----
 src/pages/company/service/index.jsx           | 1043 ++++++++---------
 src/pages/company/supplier/detail/index.jsx   |    2 +-
 .../resource/resourceTask/edit/index.jsx      |    2 +-
 src/styles/main.scss                          |   38 +-
 16 files changed, 1078 insertions(+), 883 deletions(-)
 create mode 100644 src/components/TemplateTypeModal/index.jsx
 create mode 100644 src/pages/company/service/detail/components/ProjectTemplate.jsx
 create mode 100644 src/pages/company/service/detail/components/QuotationTemplate.jsx
 create mode 100644 src/pages/company/service/detail/components/TaskTemplate.jsx

diff --git a/jsconfig.json b/jsconfig.json
index df83de4..9eeca62 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -2,7 +2,12 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"],
+      "@pages/*": ["src/pages/*"],
+      "@utils/*": ["src/utils/*"],
+      "@assets/*": ["src/assets/*"],
+      "@config/*": ["src/config/*"]
     }
   }
 }
\ No newline at end of file
diff --git a/src/components/SectionList/index.jsx b/src/components/SectionList/index.jsx
index 38168af..d0f1ffe 100644
--- a/src/components/SectionList/index.jsx
+++ b/src/components/SectionList/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { Form, Input, InputNumber, Button, Card, Typography, Modal, message, Divider, Select } from 'antd';
 import { PlusOutlined, DeleteOutlined, EditOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons';
 import { v4 as uuidv4 } from 'uuid';
@@ -247,12 +247,53 @@ const SectionList = ({
           onClick={() => handleCreateCustom(add, fieldsLength)}
           className="w-1/3 border-2"
         >
-          自定义小节
+          自定义模块
         </Button>
       </div>
     </div>
   );
 
+  // 修改项目小计的计算，将其封装为 memo 组件
+  const ItemSubtotal = React.memo(({ quantity, price, currentCurrency }) => {
+    const subtotal = useMemo(() => {
+      const safeQuantity = Number(quantity) || 0;
+      const safePrice = Number(price) || 0;
+      return safeQuantity * safePrice;
+    }, [quantity, price]);
+
+    return (
+      <div className="text-right">
+        <span className="text-gray-500">
+          {formatCurrency(subtotal, currentCurrency)}
+        </span>
+      </div>
+    );
+  });
+
+  // 修改小节总计的计算，将其封装为 memo 组件
+  const SectionTotal = React.memo(({ items, currentCurrency }) => {
+    const total = useMemo(() => {
+      if (!Array.isArray(items)) return 0;
+      return items.reduce((sum, item) => {
+        if (!item) return sum;
+        const safeQuantity = Number(item.quantity) || 0;
+        const safePrice = Number(item.price) || 0;
+        return sum + (safeQuantity * safePrice);
+      }, 0);
+    }, [items]);
+
+    return (
+      <div className="flex justify-end border-t pt-4">
+        <span className="text-gray-500">
+          小计总额：
+          <span className="text-blue-500 font-medium ml-2">
+            {formatCurrency(total, currentCurrency)}
+          </span>
+        </span>
+      </div>
+    );
+  });
+
   return (
     <>
       <Form.List name="sections">
@@ -439,16 +480,11 @@ const SectionList = ({
                             >
                               <InputNumber placeholder="单价" min={0} className="w-full" />
                             </Form.Item>
-                            <div className="text-right">
-                              <span className="text-gray-500">
-                                {formatCurrency(
-                                  calculateItemAmount(
-                                    formValues?.sections?.[sectionIndex]?.items?.[itemIndex]?.quantity,
-                                    formValues?.sections?.[sectionIndex]?.items?.[itemIndex]?.price
-                                  )
-                                )}
-                              </span>
-                            </div>
+                            <ItemSubtotal 
+                              quantity={formValues?.sections?.[sectionIndex]?.items?.[itemIndex]?.quantity}
+                              price={formValues?.sections?.[sectionIndex]?.items?.[itemIndex]?.price}
+                              currentCurrency={currentCurrency}
+                            />
                             {!isView && itemFields.length > 1 && (
                               <Button
                                 type="text"
@@ -472,18 +508,10 @@ const SectionList = ({
                           </Button>
                         )}
 
-                        <div className="flex justify-end border-t pt-4">
-                          <span className="text-gray-500">
-                            小计总额：
-                            <span className="text-blue-500 font-medium ml-2">
-                              {formatCurrency(
-                                calculateSectionTotal(
-                                  formValues?.sections?.[sectionIndex]?.items
-                                )
-                              )}
-                            </span>
-                          </span>
-                        </div>
+                        <SectionTotal 
+                          items={formValues?.sections?.[sectionIndex]?.items}
+                          currentCurrency={currentCurrency}
+                        />
                       </>
                     )}
                   </Form.List>
diff --git a/src/components/TemplateTypeModal/index.jsx b/src/components/TemplateTypeModal/index.jsx
new file mode 100644
index 0000000..b04dcc5
--- /dev/null
+++ b/src/components/TemplateTypeModal/index.jsx
@@ -0,0 +1,55 @@
+import React from 'react'
+import { Modal, Card, Space } from 'antd';
+import { FileTextOutlined, ProjectOutlined, CheckSquareOutlined } from '@ant-design/icons';
+
+const TEMPLATE_TYPES = [
+  {
+    key: 'quotation',
+    title: '报价单模板',
+    icon: <FileTextOutlined className="text-2xl text-blue-500" />,
+    description: '创建标准化的报价单模板，包含服务项目、价格等信息'
+  },
+  {
+    key: 'project',
+    title: '专案模板',
+    icon: <ProjectOutlined className="text-2xl text-green-500" />,
+    description: '创建专案流程模板，包含项目阶段、时间线等信息'
+  },
+  {
+    key: 'task',
+    title: '任务模板',
+    icon: <CheckSquareOutlined className="text-2xl text-purple-500" />,
+    description: '创建标准任务模板，包含检查项、执行步骤等信息'
+  }
+];
+
+const TemplateTypeModal = ({ open, onClose, onSelect }) => {
+  return (
+    <Modal
+      title="选择模板类型"
+      open={open}
+      onCancel={onClose}
+      footer={null}
+      width={800}
+    >
+      <Space className="w-full" size="large">
+        {TEMPLATE_TYPES.map(type => (
+          <Card
+            key={type.key}
+            hoverable
+            className="flex-1 cursor-pointer transition-all hover:shadow-lg"
+            onClick={() => onSelect(type.key)}
+          >
+            <div className="text-center space-y-4">
+              {type.icon}
+              <h3 className="text-lg font-medium">{type.title}</h3>
+              <p className="text-gray-500 text-sm">{type.description}</p>
+            </div>
+          </Card>
+        ))}
+      </Space>
+    </Modal>
+  );
+};
+
+export default TemplateTypeModal;
\ No newline at end of file
diff --git a/src/contexts/ThemeContext.jsx b/src/contexts/ThemeContext.jsx
index e1afa32..15d3cfa 100644
--- a/src/contexts/ThemeContext.jsx
+++ b/src/contexts/ThemeContext.jsx
@@ -5,7 +5,7 @@ const ThemeContext = createContext();
 export const ThemeProvider = ({ children }) => {
   const [isDarkMode, setIsDarkMode] = useState(() => {
     const savedTheme = localStorage.getItem('theme');
-    return savedTheme === 'dark' || (savedTheme === null && window.matchMedia('(prefers-color-scheme: dark)').matches);
+    return savedTheme === 'dark';
   });
 
   useEffect(() => {
diff --git a/src/hooks/supabaseService.js b/src/hooks/supabaseService.js
index a2c9fdc..60ffef9 100644
--- a/src/hooks/supabaseService.js
+++ b/src/hooks/supabaseService.js
@@ -64,20 +64,28 @@ class SupabaseService {
     }
   }
 
-  // 通用 UPDATE 请求
+  // 优化 UPDATE 请求
   async update(table, match, updates) {
     try {
-      const { data, error } = await supabase
+      let query = supabase
         .from(table)
-        .update(updates)
-        .match(match)
-        .select()
+        .update(updates);
 
-      if (error) throw error
-      return data
+      // 如果是对象，使用 match 方法
+      if (typeof match === 'object') {
+        query = query.match(match);
+      } else {
+        // 如果是单个 id，使用 eq 方法
+        query = query.eq('id', match);
+      }
+
+      const { data, error } = await query.select();
+
+      if (error) throw error;
+      return data;
     } catch (error) {
-      console.error(`Error updating ${table}:`, error.message)
-      throw error
+      console.error(`Error updating ${table}:`, error.message);
+      throw error;
     }
   }
 
diff --git a/src/pages/company/customer/detail/index.jsx b/src/pages/company/customer/detail/index.jsx
index 44f4933..ea73f62 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-2">
+    <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 d30448e..13bcb72 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-2">
+    <div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-800 dark:to-gray-900/90 min-h-screen p-2">
       <Card
         className="shadow-lg rounded-lg border-0"
         title={
diff --git a/src/pages/company/service/classify/index.jsx b/src/pages/company/service/classify/index.jsx
index 4ba998d..4d60b08 100644
--- a/src/pages/company/service/classify/index.jsx
+++ b/src/pages/company/service/classify/index.jsx
@@ -1,26 +1,56 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Button, Form, Input, Space, message, Popconfirm, Drawer } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
-import { supabase } from '@/config/supabase';
+import { Table, Button, Form, Input, Space, message, Popconfirm, Drawer, Select, Tabs, Badge, Radio } from 'antd';
+import { PlusOutlined, FileTextOutlined, ProjectOutlined, CheckSquareOutlined } from '@ant-design/icons';
+import { supabaseService } from '@/hooks/supabaseService';
 
 const CategoryDrawer = () => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(false);
   const [editingKey, setEditingKey] = useState('');
   const [drawerVisible, setDrawerVisible] = useState(false);
+  const [activeType, setActiveType] = useState('quotation'); // 当前选中的类型
   const [form] = Form.useForm();
 
+  // 模板类型配置
+  const TEMPLATE_TYPES = [
+    { 
+      value: 'quotation', 
+      label: '报价单模板',
+      icon: <FileTextOutlined className="text-blue-500" />,
+      color: 'blue',
+      description: '用于创建标准化的报价单'
+    },
+    { 
+      value: 'project', 
+      label: '专案模板',
+      icon: <ProjectOutlined className="text-green-500" />,
+      color: 'green',
+      description: '用于创建项目流程模板'
+    },
+    { 
+      value: 'task', 
+      label: '任务模板',
+      icon: <CheckSquareOutlined className="text-purple-500" />,
+      color: 'purple',
+      description: '用于创建标准任务模板'
+    }
+  ];
+
   // 获取分类数据
-  const fetchCategories = async () => {
+  const fetchCategories = async (type = activeType) => {
     setLoading(true);
     try {
-      const { data: categories, error } = await supabase
-        .from('resources')
-        .select('*')
-        .eq('type', 'categories')
-        .order('created_at', { ascending: false });
+      const { data: categories } = await supabaseService.select('resources', {
+        filter: {
+          type: { eq: 'categories' },
+          'attributes->>type': { eq: type }
+        },
+        order: {
+          column: 'created_at',
+          ascending: false
+        }
+      });
 
-      if (error) throw error;
       setData(categories || []);
     } catch (error) {
       message.error('获取分类数据失败');
@@ -34,13 +64,23 @@ const CategoryDrawer = () => {
     if (drawerVisible) {
       fetchCategories();
     }
-  }, [drawerVisible]);
+  }, [drawerVisible, activeType]);
+
+  // 切换模板类型
+  const handleTypeChange = (type) => {
+    setActiveType(type);
+    setEditingKey(''); // 清除编辑状态
+    form.resetFields(); // 重置表单
+  };
 
   // 新增分类
-  const handleAdd = () => {
+  const handleAdd = (type) => {
     const newData = {
       id: Date.now().toString(),
-      attributes: { name: '' },
+      attributes: { 
+        name: '',
+        type: type // 默认类型
+      },
       isNew: true
     };
     setData([newData, ...data]);
@@ -53,31 +93,26 @@ const CategoryDrawer = () => {
     try {
       const values = await form.validateFields();
       if (record.isNew) {
-        // 新增
-        const { error } = await supabase
-          .from('resources')
-          .insert([{
-            type: 'categories',
-            attributes: {
-              name: values.name
-            },
-            schema_version: 1
-          }]);
-
-        if (error) throw error;
+        await supabaseService.insert('resources', {
+          type: 'categories',
+          attributes: {
+            name: values.name,
+            type: values.type
+          },
+          schema_version: 1
+        });
       } else {
         // 更新
-        const { error } = await supabase
-          .from('resources')
-          .update({
+        await supabaseService.update('resources', 
+          { id: record.id },
+          {
             attributes: {
-              name: values.name
+              name: values.name,
+              type: values.type
             },
             updated_at: new Date().toISOString()
-          })
-          .eq('id', record.id);
-
-        if (error) throw error;
+          }
+        );
       }
 
       message.success('保存成功');
@@ -92,12 +127,7 @@ const CategoryDrawer = () => {
   // 删除分类
   const handleDelete = async (record) => {
     try {
-      const { error } = await supabase
-        .from('resources')
-        .delete()
-        .eq('id', record.id);
-
-      if (error) throw error;
+      await supabaseService.delete('resources', { id: record.id });
       message.success('删除成功');
       fetchCategories();
     } catch (error) {
@@ -125,6 +155,29 @@ const CategoryDrawer = () => {
         );
       },
     },
+    {
+      title: '模板类型',
+      dataIndex: ['attributes', 'type'],
+      render: (text, record) => {
+        const isEditing = record.id === editingKey;
+        return isEditing ? (
+          <Form.Item
+            name="type"
+            style={{ margin: 0 }}
+            rules={[{ required: true, message: '请选择模板类型!' }]}
+          >
+            <Select
+              options={TEMPLATE_TYPES}
+              placeholder="请选择模板类型"
+            />
+          </Form.Item>
+        ) : (
+          <span className="text-gray-600">
+            {TEMPLATE_TYPES.find(t => t.value === text)?.label || text}
+          </span>
+        );
+      },
+    },
     {
       title: '操作',
       render: (_, record) => {
@@ -161,13 +214,14 @@ const CategoryDrawer = () => {
                 setEditingKey(record.id);
                 form.setFieldsValue({
                   name: record.attributes.name,
+                  type: record.attributes.type
                 });
               }}
             >
               编辑
             </Button>
             <Popconfirm
-              title="确认删除"
+              title="确认���除"
               description="确定要删除这个分类吗？"
               onConfirm={() => handleDelete(record)}
               okText="确定"
@@ -209,14 +263,56 @@ const CategoryDrawer = () => {
         className="category-drawer"
       >
         <div className="p-6">
+          {/* 类型选择器 */}
+          <div className="mb-6">
+            <Radio.Group 
+              value={activeType} 
+              onChange={(e) => handleTypeChange(e.target.value)}
+              className="flex space-x-4"
+            >
+              {TEMPLATE_TYPES.map(type => (
+                <Radio.Button 
+                  key={type.value} 
+                  value={type.value}
+                  className={`flex items-center px-4 py-2 ${
+                    activeType === type.value ? `bg-${type.color}-50 border-${type.color}-500` : ''
+                  }`}
+                >
+                  <span className="flex items-center space-x-2">
+                    {type.icon}
+                    <span>{type.label}</span>
+                    <Badge 
+                      count={data.filter(item => item.attributes.type === type.value).length}
+                      className={`bg-${type.color}-100 text-${type.color}-600`}
+                    />
+                  </span>
+                </Radio.Button>
+              ))}
+            </Radio.Group>
+          </div>
+
+          {/* 当前类型说明 */}
+          <div className="mb-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+            <h3 className={`text-${TEMPLATE_TYPES.find(t => t.value === activeType)?.color}-500 text-lg font-medium mb-2 flex items-center`}>
+              {TEMPLATE_TYPES.find(t => t.value === activeType)?.icon}
+              <span className="ml-2">{TEMPLATE_TYPES.find(t => t.value === activeType)?.label}</span>
+            </h3>
+            <p className="text-gray-500 dark:text-gray-400">
+              {TEMPLATE_TYPES.find(t => t.value === activeType)?.description}
+            </p>
+          </div>
+
+          {/* 新增按钮 */}
           <Button
             type="primary"
-            onClick={handleAdd}
+            onClick={() => handleAdd(activeType)}
             className="mb-4"
             icon={<PlusOutlined />}
           >
             新增分类
           </Button>
+
+          {/* 分类列表 */}
           <Form form={form}>
             <Table
               scroll={{ x: true }}
@@ -228,7 +324,7 @@ const CategoryDrawer = () => {
                 pageSize: 10,
                 showTotal: (total) => `共 ${total} 条`,
               }}
-              className="bg-white rounded-lg shadow"
+              className="bg-white dark:bg-gray-800 rounded-lg shadow"
             />
           </Form>
         </div>
diff --git a/src/pages/company/service/detail/components/ProjectTemplate.jsx b/src/pages/company/service/detail/components/ProjectTemplate.jsx
new file mode 100644
index 0000000..31a9f8c
--- /dev/null
+++ b/src/pages/company/service/detail/components/ProjectTemplate.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Form, Card } from 'antd';
+
+const ProjectTemplate = ({ form, id, isView }) => {
+  return (
+    <Form
+      form={form}
+      layout="vertical"
+      disabled={isView}
+    >
+      {/* 专案模板特有的字段和组件 */}
+      <Card>
+        {/* 项目阶段、时间线等内容 */}
+      </Card>
+    </Form>
+  );
+};
+
+export default ProjectTemplate;
\ No newline at end of file
diff --git a/src/pages/company/service/detail/components/QuotationTemplate.jsx b/src/pages/company/service/detail/components/QuotationTemplate.jsx
new file mode 100644
index 0000000..01b7140
--- /dev/null
+++ b/src/pages/company/service/detail/components/QuotationTemplate.jsx
@@ -0,0 +1,222 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Card, Input, Select, message,Button } from 'antd';
+import { supabaseService } from '@/hooks/supabaseService';
+import {ArrowLeftOutlined}from '@ant-design/icons'
+import SectionList from '@/components/SectionList';
+
+const QuotationTemplate = ({ id, isView, onCancel,isEdit }) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+  const [formValues, setFormValues] = useState({
+    sections: [{ items: [{}] }],
+    currency: "CNY"
+  });
+  const [categories, setCategories] = useState([]);
+
+  useEffect(() => {
+    console.log(id,'id');
+    
+    if (id) {
+      fetchServiceTemplate();
+    }
+    fetchCategories();
+  }, [id]);
+
+  const fetchServiceTemplate = async () => {
+    try {
+      setLoading(true);
+      const { data } = await supabaseService.select('resources', {
+        filter: {
+          id: { eq: id },
+          type: { eq: 'serviceTemplate' },
+          'attributes->>type': { eq: 'quotation' }
+        }
+      });
+      console.log(data,'data');
+      
+      if (data?.[0]) {
+        const formData = {
+          templateName: data[0].attributes.templateName,
+          description: data[0].attributes.description,
+          category: data[0].attributes.category?.map(v => v.id) || [],
+          sections: data[0].attributes.sections || [{ items: [{}] }],
+          currency: data[0].attributes.currency || "CNY",
+        };
+        form.setFieldsValue(formData);
+        setFormValues(formData);
+      }
+    } catch (error) {
+      console.error("获取服务模版失败:", error);
+      message.error("获取服务模版失败");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchCategories = async () => {
+    try {
+      const { data } = await supabaseService.select('resources', {
+        filter: {
+          type: { eq: 'categories' },
+          'attributes->>type': { eq: 'quotation' }
+        },
+        order: {
+          column: 'created_at',
+          ascending: false
+        }
+      });
+      
+      const formattedCategories = (data || []).map(category => ({
+        value: category.id,
+        label: category.attributes.name
+      }));
+      
+      setCategories(formattedCategories);
+    } catch (error) {
+      message.error('获取分类数据失败');
+      console.error(error);
+    }
+  };
+
+  const handleValuesChange = (changedValues, allValues) => {
+    setFormValues(allValues);
+  };
+
+  const onFinish = async (values) => {
+    try {
+      setLoading(true);
+      const categoryData = values.category.map(categoryId => {
+        const category = categories.find(c => c.value === categoryId);
+        return {
+          id: categoryId,
+          name: category.label
+        };
+      });
+
+      const serviceData = {
+        type: "serviceTemplate",
+        attributes: {
+          type: "quotation",
+          templateName: values.templateName,
+          description: values.description,
+          sections: values.sections,
+          category: categoryData,
+        },
+      };
+
+      if (id) {
+        // 更新
+        await supabaseService.update('resources', 
+          { id }, 
+          serviceData
+        );
+      } else {
+        // 新增
+        await supabaseService.insert('resources', serviceData);
+      }
+
+      message.success("保存成功");
+      onCancel();
+    } catch (error) {
+      console.error("保存失败:", error);
+      message.error("保存失败");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+        <Form
+          form={form}
+          onFinish={onFinish}
+          onValuesChange={handleValuesChange}
+          layout="vertical"
+          variant="filled"
+          disabled={isView}
+        >
+          <Card
+            className="shadow-sm rounded-lg mb-6"
+            type="inner"
+            title={
+              <span className="flex items-center space-x-2 text-gray-700">
+                <span className="w-1 h-4 bg-blue-500 rounded-full" />
+                <span>基本信息</span>
+              </span>
+            }
+            bordered={false}
+          >
+            <div className="grid grid-cols-2 gap-6">
+              <Form.Item
+                label="模版名称"
+                name="templateName"
+                rules={[{ required: true, message: "请输入模版名称" }]}
+              >
+                <Input placeholder="请输入模版名称" />
+              </Form.Item>
+              <Form.Item
+                label="模版分类"
+                name="category"
+                rules={[{ required: true, message: "请选择或输入分类" }]}
+              >
+                <Select
+                  placeholder="请选择或输入分类"
+                  showSearch
+                  allowClear
+                  mode="tags"
+                  options={categories}
+                  loading={loading}
+                />
+              </Form.Item>
+              <Form.Item
+                label="模版描述"
+                name="description"
+                className="col-span-2"
+              >
+                <Input.TextArea rows={4} placeholder="请输入模版描述" />
+              </Form.Item>
+            </div>
+          </Card>
+
+          <Card
+            className="shadow-sm rounded-lg"
+            type="inner"
+            title={
+              <span className="flex items-center space-x-2 text-gray-700">
+                <span className="w-1 h-4 bg-blue-500 rounded-full" />
+                <span>服务明细</span>
+              </span>
+            }
+            bordered={false}
+          >
+            <SectionList
+              form={form}
+              isView={isView}
+              formValues={formValues}
+              onValuesChange={handleValuesChange}
+            />
+          </Card>
+          <div className="flex justify-end space-x-4">
+          <Button 
+            icon={<ArrowLeftOutlined />}
+            onClick={onCancel}
+          >
+            返回
+          </Button>
+          {!isView && (
+            <Button
+              type="primary"
+              onClick={() => form.submit()}
+              loading={loading}
+            >
+              保存
+            </Button>
+          )}
+        </div>
+        </Form>
+  
+    </>
+  );
+};
+
+export default QuotationTemplate;
\ No newline at end of file
diff --git a/src/pages/company/service/detail/components/TaskTemplate.jsx b/src/pages/company/service/detail/components/TaskTemplate.jsx
new file mode 100644
index 0000000..d1a11da
--- /dev/null
+++ b/src/pages/company/service/detail/components/TaskTemplate.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Form, Card } from 'antd';
+
+const TaskTemplate = ({ form, id, isView }) => {
+  return (
+    <Form
+      form={form}
+      layout="vertical"
+      disabled={isView}
+    >
+      {/* 任务模板特有的字段和组件 */}
+      <Card>
+        {/* 任务步骤、检查项等内容 */}
+      </Card>
+    </Form>
+  );
+};
+
+export default TaskTemplate;
\ No newline at end of file
diff --git a/src/pages/company/service/detail/index.jsx b/src/pages/company/service/detail/index.jsx
index a1255c1..bb963ea 100644
--- a/src/pages/company/service/detail/index.jsx
+++ b/src/pages/company/service/detail/index.jsx
@@ -1,251 +1,71 @@
-import React, { useState, useEffect } from "react";
-import {
-  Card,
-  Form,
-  Input,
-  Select,
-  Button,
-  Space,
-  Typography,
-  message,
-} from "antd";
-import {
-  ArrowLeftOutlined,
-} from "@ant-design/icons";
-import { useNavigate, useParams,useSearchParams, useLocation } from "react-router-dom";
-import { supabase } from "@/config/supabase";
-import SectionList from '@/components/SectionList';
+import React from 'react';
+import { Card, Typography } from 'antd';
+import { useNavigate, useSearchParams,useParams } from 'react-router-dom';
+import QuotationTemplate from './components/QuotationTemplate';
+import ProjectTemplate from './components/ProjectTemplate';
+import TaskTemplate from './components/TaskTemplate';
 
 const { Title } = Typography;
 
+// 模板类型配置
+const TEMPLATE_CONFIG = {
+  quotation: {
+    title: '报价单模板',
+    component: QuotationTemplate,
+  },
+  project: {
+    title: '专案模板',
+    component: ProjectTemplate,
+  },
+  task: {
+    title: '任务模板',
+    component: TaskTemplate,
+  }
+};
+
 const ServiceForm = () => {
-  const [form] = Form.useForm();
   const navigate = useNavigate();
-  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");
-  const [formValues, setFormValues] = useState({
-    sections: [{ items: [{}] }],
-    currency: "CNY"
-  });
-  const [categories, setCategories] = useState([]);
+  const type = searchParams.get('type') || 'quotation';
+  const { id } = useParams();
+  const isView = searchParams.get('isView') === 'true';
 
-  useEffect(() => {
-    if (id) {
-      fetchServiceTemplate();
-    }
-    fetchCategories();
-  }, [id]);
+  const currentTemplate = TEMPLATE_CONFIG[type];
+  const TemplateComponent = currentTemplate?.component;
 
-  const fetchServiceTemplate = async () => {
-    try {
-      setLoading(true);
-      const { data, error } = await supabase
-        .from("resources")
-        .select("*")
-        .eq("id", id)
-        .single();
-
-      if (error) throw error;
-      const formData = {
-        templateName: data.attributes.templateName,
-        description: data.attributes.description,
-        category: data.attributes.category.map(v=>v.id),
-        sections: data.attributes.sections,
-      };
-      form.setFieldsValue(formData);
-      setFormValues(formData);
-    } catch (error) {
-      console.error("获取服务模版失败:", error);
-      message.error("获取服务模版失败");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const fetchCategories = async () => {
-    try {
-      const { data: categoriesData, error } = await supabase
-        .from('resources')
-        .select('*')
-        .eq('type', 'categories')
-        .order('created_at', { ascending: false });
-
-      if (error) throw error;
-      
-      const formattedCategories = (categoriesData || []).map(category => ({
-        value: category.id,
-        label: category.attributes.name
-      }));
-      
-      setCategories(formattedCategories);
-    } catch (error) {
-      message.error('获取分类数据失败');
-      console.error(error);
-    }
-  };
-
-  const onFinish = async (values) => {
-    try {
-      setLoading(true);
-      const categoryData = values.category.map(categoryId => {
-        const category = categories.find(c => c.value === categoryId);
-        return {
-          id: categoryId,
-          name: category.label
-        };
-      });
-      const serviceData = {
-        type: "serviceTemplate",
-        attributes: {
-          templateName: values.templateName,
-          description: values.description,
-          sections: values.sections,
-          category: categoryData,
-        },
-      };
-
-      let result;
-      if (id) {
-        result = await supabase
-          .from("resources")
-          .update(serviceData)
-          .eq("id", id)
-          .select();
-      } else {
-        result = await supabase
-          .from("resources")
-          .insert([serviceData])
-          .select();
-      }
-
-      if (result.error) throw result.error;
-      message.success("保存成功");
-      navigate("/company/serviceTeamplate");
-    } catch (error) {
-      console.error("保存失败:", error);
-      message.error("保存失败");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleValuesChange = (changedValues, allValues) => {
-    setFormValues(allValues);
-  };
+  if (!currentTemplate) {
+    return <div>无效的模板类型</div>;
+  }
 
   return (
-    <div className="bg-gradient-to-b from-gray-50 to-white min-h-screen p-2">
+    <div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-800 dark:to-gray-900/90 min-h-screen p-2">
       <Card
         className="shadow-lg rounded-lg border-0"
         title={
           <div className="flex justify-between items-center py-2">
             <div className="flex items-center space-x-3">
-              <Title level={4} className="mb-0 text-gray-800">
-                {id ? (isEdit ? "编辑服务模版" : "查看服务模版") : "新建服务模版"}
+              <Title level={4} className="mb-0 text-gray-800 dark:text-gray-200">
+                {id ? (isView ? "查看" : "编辑") : "新建"}{currentTemplate.title}
               </Title>
               <span className="text-gray-400 text-sm">
                 {id
-                  ? isEdit
-                    ? "请修改服务模版信息"
-                    : "服务模版详情"
-                  : "请填写服务模版信息"}
+                  ? isView
+                    ? `${currentTemplate.title}详情`
+                    : `请修改${currentTemplate.title}信息`
+                  : `请填写${currentTemplate.title}信息`}
               </span>
             </div>
-            <Space size="middle">
-              <Button
-                icon={<ArrowLeftOutlined />}
-                onClick={() => navigate("/company/serviceTeamplate")}
-              >
-                返回
-              </Button>
-              {!isView&&  <Button
-                  type="primary"
-                  onClick={() => form.submit()}
-                  loading={loading}
-                >
-                  保存
-                </Button>}
-            </Space>
           </div>
         }
       >
-        <Form
-          form={form}
-          onFinish={onFinish}
-          onValuesChange={handleValuesChange}
-          layout="vertical"
-          variant="filled"
-          disabled={isView}
-        >
-          <Card
-            className="shadow-sm rounded-lg mb-6"
-            type="inner"
-            title={
-              <span className="flex items-center space-x-2 text-gray-700">
-                <span className="w-1 h-4 bg-blue-500 rounded-full" />
-                <span>基本信息</span>
-              </span>
-            }
-            bordered={false}
-          >
-            <div className="grid grid-cols-2 gap-6">
-              <Form.Item
-                label="模版名称"
-                name="templateName"
-                rules={[{ required: true, message: "请输入模版名称" }]}
-              >
-                <Input placeholder="请输入模版名称" />
-              </Form.Item>
-              <Form.Item
-                label="模版分类"
-                name="category"
-                rules={[{ required: true, message: "请选择或输入分类" }]}
-              >
-                <Select
-                  placeholder="请选择或输入分类"
-                  showSearch
-                  allowClear
-                  mode="tags"
-                  options={categories}
-                  loading={loading}
-                />
-              </Form.Item>
-              <Form.Item
-                label="模版描述"
-                name="description"
-                className="col-span-2"
-              >
-                <Input.TextArea rows={4} placeholder="请输入模版描述" />
-              </Form.Item>
-            </div>
-          </Card>
-
-          <Card
-            className="shadow-sm rounded-lg"
-            type="inner"
-            title={
-              <span className="flex items-center space-x-2 text-gray-700">
-                <span className="w-1 h-4 bg-blue-500 rounded-full" />
-                <span>服务明细</span>
-              </span>
-            }
-            bordered={false}
-          >
-            <SectionList
-              form={form}
-              isView={!isEdit && id}
-              formValues={formValues}
-              onValuesChange={handleValuesChange}
-            />
-          </Card>
-        </Form>
+        <TemplateComponent
+          id={id}
+          isView={isView}
+          onCancel={() => navigate("/company/serviceTeamplate")}
+        />
       </Card>
     </div>
   );
 };
 
-export default ServiceForm;
+export default ServiceForm;
\ No newline at end of file
diff --git a/src/pages/company/service/index.jsx b/src/pages/company/service/index.jsx
index 15ce7d5..9888a4f 100644
--- a/src/pages/company/service/index.jsx
+++ b/src/pages/company/service/index.jsx
@@ -1,48 +1,81 @@
+import { useState, useEffect } from "react";
 import {
   Card,
   Table,
   Button,
   Space,
-  Input,
+  Badge,
   message,
   Popconfirm,
-  Form,
   Tag,
-  Typography,
+  Divider,
+  Input,
+  InputNumber,
 } from "antd";
 import {
-  DownOutlined,
-  UpOutlined,
-  EyeOutlined,
+  PlusOutlined,
+  FileTextOutlined,
+  ProjectOutlined,
+  CheckSquareOutlined,
+  DeleteOutlined,
   EditOutlined,
+  SaveOutlined,
+  CloseOutlined,
 } from "@ant-design/icons";
-import { useState, useEffect } from "react";
+
 import { useNavigate } from "react-router-dom";
-import { supabase } from "@/config/supabase";
-import UnitManagement from "@/pages/company/service/unit";
-import Sections from "@/pages/company/service/sections";
-import CategoryDrawer from "@/pages/company/service/classify";
-const { Paragraph } = Typography;
+import { supabaseService } from "@/hooks/supabaseService";
+import TemplateTypeModal from "@/components/TemplateTypeModal";
 
 const ServicePage = () => {
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState([]);
-  const [categories, setCategories] = useState([]);
-  const navigate = useNavigate();
+  const [selectedType, setSelectedType] = useState(null);
   const [editingKey, setEditingKey] = useState("");
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingItem, setEditingItem] = useState(null);
+  const navigate = useNavigate();
+
+  // 模板类型配置
+  const TEMPLATE_TYPES = {
+    quotation: {
+      label: "报价单模板",
+      icon: <FileTextOutlined />,
+      color: "blue",
+      path: "/company/serviceTemplateInfo",
+    },
+    project: {
+      label: "专案模板",
+      icon: <ProjectOutlined />,
+      color: "green",
+      path: "/company/serviceTemplateInfo",
+    },
+    task: {
+      label: "任务模板",
+      icon: <CheckSquareOutlined />,
+      color: "purple",
+      path: "/company/serviceTemplateInfo",
+    },
+  };
 
   // 获取服务模板列表
   const fetchServices = async () => {
     try {
       setLoading(true);
-      const { data: services, error } = await supabase
-        .from("resources")
-        .select("*")
-        .eq("type", "serviceTemplate")
-        .order("created_at", { ascending: false });
+      const { data: services } = await supabaseService.select("resources", {
+        filter: {
+          type: { eq: "serviceTemplate" },
+          ...(selectedType
+            ? { "attributes->>type": { eq: selectedType } }
+            : {}),
+        },
+        order: {
+          column: "created_at",
+          ascending: false,
+        },
+      });
 
-      if (error) throw error;
-      setData(services);
+      setData(services || []);
     } catch (error) {
       console.error("获取服务模板失败:", error);
       message.error("获取服务模板失败");
@@ -51,198 +84,348 @@ const ServicePage = () => {
     }
   };
 
-  // 添加获取分类数据的方法
-  const fetchCategories = async () => {
-    try {
-      const { data: categoriesData, error } = await supabase
-        .from('resources')
-        .select('*')
-        .eq('type', 'categories')
-        .order('created_at', { ascending: false });
+  useEffect(() => {
+    fetchServices();
+  }, [selectedType]);
 
-      if (error) throw error;
-      setCategories(categoriesData || []);
+  // 删除服务模板
+  const handleDeleteService = async (serviceId) => {
+    try {
+      await supabaseService.delete("resources", { id: serviceId });
+      message.success("删除成功");
+      fetchServices();
     } catch (error) {
-      console.error('获取分类数据失败:', error);
-      message.error('获取分类数据失败');
+      console.error("删除失败:", error);
+      message.error("删除失败");
     }
   };
 
-  // 修改保存逻辑
-  const handleSaveItem = async (record) => {
+  // 添加行内编辑相关方法
+  const handleSave = async (record, sectionKey, itemIndex) => {
     try {
-      setLoading(true);
-      const { serviceId, sectionIndex, itemIndex } = record;
-
-      // 找到当前服务模板
-      const currentService = data.find((item) => item.id === serviceId);
-      if (!currentService) {
-        throw new Error("Service not found");
+      if (!editingItem) {
+        message.error("没有要保存的数据");
+        return;
       }
 
-      const newAttributes = {
-        ...currentService.attributes,
-        templateName: currentService.attributes.templateName,
-        description: currentService.attributes.description,
-        category: currentService.attributes.category || [], // 确保 category 字段存在
-        sections: currentService.attributes.sections.map((section, secIdx) => {
-          if (secIdx === sectionIndex) {
-            return {
-              ...section,
-              items: section.items.map((item, itemIdx) => {
-                if (itemIdx === itemIndex) {
-                  return {
-                    name: record.name,
-                    price: Number(record.price) || 0,
-                    quantity: Number(record.quantity) || 0,
-                    description: record.description || "",
-                    unit: record.unit || "",
-                  };
-                }
-                return item;
-              }),
-            };
-          }
-          return section;
-        }),
-      };
+      const newData = [...data];
+      const targetIndex = newData.findIndex((item) => item.id === record.id);
+      if (targetIndex > -1) {
+        const item = newData[targetIndex];
+        const sections = [...item.attributes.sections];
+        const sectionIndex = sections.findIndex((s) => s.key === sectionKey);
 
-      // 重新计算总金额
-      newAttributes.totalAmount = newAttributes.sections.reduce(
-        (total, section) => {
-          return (
-            total +
-            section.items.reduce(
-              (sectionTotal, item) =>
-                sectionTotal +
-                (Number(item.price) || 0) * (Number(item.quantity) || 0),
-              0
-            )
+        if (sectionIndex > -1) {
+          // 使用 editingItem 中的值更新项目
+          sections[sectionIndex].items[itemIndex] = editingItem;
+
+          const updatedData = {
+            ...item,
+            attributes: {
+              ...item.attributes,
+              sections,
+            },
+          };
+
+          await supabaseService.update(
+            "resources",
+            { id: record.id },
+            { attributes: updatedData.attributes }
           );
-        },
-        0
-      );
 
-      // 调用 supabase 更新数据
-      const { error } = await supabase
-        .from("resources")
-        .update({
-          type: "serviceTemplate",
-          attributes: newAttributes,
-        })
-        .eq("id", serviceId);
-
-      if (error) throw error;
-
-      // 更新本地状态
-      setData((prevData) =>
-        prevData.map((item) =>
-          item.id === serviceId ? { ...item, attributes: newAttributes } : item
-        )
-      );
-
-      setEditingKey("");
-      message.success("保存成功");
+          newData[targetIndex] = updatedData;
+          setData(newData);
+          setEditingKey("");
+          setEditingItem(null);
+          message.success("保存成功");
+        }
+      }
     } catch (error) {
       console.error("保存失败:", error);
       message.error("保存失败");
-    } finally {
-      setLoading(false);
     }
   };
 
-  // 添加删除项目的方法
-  const handleDeleteItem = async (record) => {
+  const handleDeleteSection = async (record, sectionKey) => {
     try {
-      setLoading(true);
-      const { serviceId, sectionIndex, itemIndex } = record;
+      const newData = [...data];
+      const targetIndex = newData.findIndex((item) => item.id === record.id);
+      if (targetIndex > -1) {
+        const item = newData[targetIndex];
+        const updatedSections = item.attributes.sections.filter(
+          (s) => s.key !== sectionKey
+        );
 
-      // 找到目标服务
-      const targetService = data.find((item) => item.id === serviceId);
-      if (!targetService) throw new Error("Service not found");
+        const updatedData = {
+          ...item,
+          attributes: {
+            ...item.attributes,
+            sections: updatedSections,
+          },
+        };
 
-      // 创建新的 attributes 对象，避免直接修改状态
-      const newAttributes = {
-        ...targetService.attributes,
-        sections: targetService.attributes.sections.map((section, secIdx) => {
-          if (secIdx === sectionIndex) {
-            return {
-              ...section,
-              items: section.items.filter((_, idx) => idx !== itemIndex),
-            };
-          }
-          return section;
-        }),
-      };
+        // 修改更新数据库的调用方式
+        await supabaseService.update(
+          "resources",
+          { id: record.id },
+          { attributes: updatedData.attributes }
+        );
 
-      // 重新计算总金额
-      newAttributes.totalAmount = newAttributes.sections.reduce(
-        (total, section) => {
-          return (
-            total +
-            section.items.reduce(
-              (sectionTotal, item) =>
-                sectionTotal +
-                (Number(item.price) || 0) * (Number(item.quantity) || 0),
-              0
-            )
+        newData[targetIndex] = updatedData;
+        setData(newData);
+        message.success("删除成功");
+      }
+    } catch (error) {
+      console.error("删除失败:", error);
+      message.error("删除失败");
+    }
+  };
+
+  const handleDeleteItem = async (record, sectionKey, itemIndex) => {
+    try {
+      const newData = [...data];
+      const targetIndex = newData.findIndex((item) => item.id === record.id);
+      if (targetIndex > -1) {
+        const item = newData[targetIndex];
+        const sections = [...item.attributes.sections];
+        const sectionIndex = sections.findIndex((s) => s.key === sectionKey);
+
+        if (sectionIndex > -1) {
+          // 直接删除项目，而不是清空
+          sections[sectionIndex].items = sections[sectionIndex].items.filter(
+            (_, idx) => idx !== itemIndex
           );
-        },
-        0
-      );
 
-      // 调用 supabase 更新数据
-      const { error } = await supabase
-        .from("resources")
+          // 如果该部分没有项目了，删除整个部分
+          if (sections[sectionIndex].items.length === 0) {
+            sections.splice(sectionIndex, 1);
+          }
 
-        .update({
-          attributes: newAttributes,
-        })
-        .eq("id", serviceId);
+          const updatedData = {
+            ...item,
+            attributes: {
+              ...item.attributes,
+              sections,
+            },
+          };
 
-      if (error) throw error;
+          await supabaseService.update(
+            "resources",
+            { id: record.id },
+            { attributes: updatedData.attributes }
+          );
 
-      // 更新本地状态
-      setData((prevData) =>
-        prevData.map((item) =>
-          item.id === serviceId ? { ...item, attributes: newAttributes } : item
-        )
-      );
-
-      message.success("删除成功");
+          newData[targetIndex] = updatedData;
+          setData(newData);
+          message.success("删除成功");
+        }
+      }
     } catch (error) {
       console.error("删除失败:", error);
       message.error("删除失败");
-    } finally {
-      setLoading(false);
     }
   };
 
-  // 添加删除服务模板的方法
-  const handleDeleteService = async (serviceId) => {
-    try {
-      setLoading(true);
+  // 子表格列定义
+  const expandedRowRender = (record) => {
+    return (
+      <div className="bg-gray-50 p-4 rounded-lg">
+        {record.attributes.sections.map((section) => (
+          <div key={section.key} className="mb-6 bg-white rounded-lg shadow-sm p-4">
+            <div className="flex items-center justify-between mb-3 border-b pb-2">
+              <h3 className="text-lg font-medium text-gray-800">{section.sectionName}</h3>
+              <Popconfirm
+                title="确定要删除这个模块吗？"
+                onConfirm={() => handleDeleteSection(record, section.key)}
+              >
+                <DeleteOutlined className="text-red-500 cursor-pointer hover:text-red-600" />
+              </Popconfirm>
+            </div>
+            <Table
+              dataSource={section.items}
+              pagination={false}
+              size="small"
+              className="nested-items-table border-t border-gray-100"
+              columns={[
+                {
+                  title: "名称",
+                  dataIndex: "name",
+                  key: "name",
+                  width: "15%",
+                  render: (text, item, index) => {
+                    const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
+                    return isEditing ? (
+                      <Input
+                        defaultValue={text}
+                        onChange={(e) => {
+                          setEditingItem((prev) => ({
+                            ...prev || item,
+                            name: e.target.value
+                          }));
+                        }}
+                      />
+                    ) : (
+                      <span>{text}</span>
+                    );
+                  },
+                },
+                {
+                  title: "单位",
+                  dataIndex: "unit",
+                  key: "unit",
+                  width: "10%",
+                  render: (text, item, index) => {
+                    const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
+                    return isEditing ? (
+                      <Input
+                        defaultValue={text}
+                        onChange={(e) => {
+                          setEditingItem((prev) => ({
+                            ...prev || item,
+                            unit: e.target.value
+                          }));
+                        }}
+                      />
+                    ) : (
+                      <span>{text}</span>
+                    );
+                  },
+                },
+                {
+                  title: "单价",
+                  dataIndex: "price",
+                  key: "price",
+                  width: "10%",
+                  render: (text, item, index) => {
+                    const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
+                    return isEditing ? (
+                      <InputNumber
+                        defaultValue={text}
+                        onChange={(value) => {
+                          setEditingItem((prev) => ({
+                            ...prev || item,
+                            price: value
+                          }));
+                        }}
+                      />
+                    ) : (
+                      <span>{text}</span>
+                    );
+                  },
+                },
+                {
+                  title: "数量",
+                  dataIndex: "quantity",
+                  key: "quantity",
+                  width: "10%",
+                  render: (text, item, index) => {
+                    const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
+                    return isEditing ? (
+                      <InputNumber
+                        defaultValue={text}
+                        onChange={(value) => {
+                          setEditingItem((prev) => ({
+                            ...prev || item,
+                            quantity: value
+                          }));
+                        }}
+                      />
+                    ) : (
+                      <span>{text}</span>
+                    );
+                  },
+                },
+                {
+                  title: "描述",
+                  dataIndex: "description",
+                  key: "description",
+                  render: (text, item, index) => {
+                    const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
+                    return isEditing ? (
+                      <Input
+                        defaultValue={text}
+                        onChange={(e) => {
+                          setEditingItem((prev) => ({
+                            ...prev || item,
+                            description: e.target.value
+                          }));
+                        }}
+                      />
+                    ) : (
+                      <span>{text}</span>
+                    );
+                  },
+                },
+                {
+                  title: "操作",
+                  key: "action",
+                  width: 150,
+                  render: (_, item, index) => {
+                    const isEditing = editingKey === `${record.id}-${section.key}-${index}`;
+                    return (
+                      <Space>
+                        {isEditing ? (
+                          <>
+                            <SaveOutlined
+                              className="text-green-600 cursor-pointer"
+                              onClick={() => handleSave(record, section.key, index)}
+                            />
+                            <CloseOutlined
+                              className="text-gray-600 cursor-pointer"
+                              onClick={() => {
+                                setEditingKey("");
+                                setEditingItem(null);
+                              }}
+                            />
+                          </>
+                        ) : (
+                          <>
+                            <EditOutlined
+                              className="text-blue-600 cursor-pointer"
+                              onClick={() => {
+                                setEditingKey(`${record.id}-${section.key}-${index}`);
+                                setEditingItem(item); // 初始化编辑项
+                              }}
+                            />
+                            <Popconfirm
+                              title="确定要删除这一项吗？"
+                              onConfirm={() => handleDeleteItem(record, section.key, index)}
+                            >
+                              <DeleteOutlined className="text-red-500 cursor-pointer" />
+                            </Popconfirm>
+                          </>
+                        )}
+                      </Space>
+                    );
+                  },
+                },
+              ]}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  };
 
-      // 调用 supabase 删除数据
-      const { error } = await supabase
-        .from("resources")
-        .delete()
-        .eq("id", serviceId);
+  const handleNavigateToTemplate = (type, id, mode = "isView") => {
+    const basePath = TEMPLATE_TYPES[type]?.path;
+    if (!basePath) return;
 
-      if (error) throw error;
-
-      // 更新本地状态
-      setData((prevData) => prevData.filter((item) => item.id !== serviceId));
-      message.success("删除成功");
-    } catch (error) {
-      console.error("删除失败:", error);
-      message.error("删除失败");
-    } finally {
-      setLoading(false);
+    const path = id ? `${basePath}/${id}` : basePath;
+    if (mode === "create") {
+      navigate(`${basePath}`);
+    } else {
+      navigate(`${basePath}/${id}?type=${type}&${mode}=true`);
     }
   };
 
-  // 主表格列定义
+  // 处理模板类型选择
+  const handleTemplateSelect = (type) => {
+    handleNavigateToTemplate(type, null, "create");
+    setIsModalOpen(false);
+  };
+
+  // 表格列定义
   const columns = [
     {
       title: "模板名称",
@@ -250,47 +433,42 @@ const ServicePage = () => {
       key: "templateName",
       className: "min-w-[200px]",
     },
+    {
+      title: "模板类型",
+      dataIndex: ["attributes", "type"],
+      key: "type",
+      filters: Object.entries(TEMPLATE_TYPES).map(([key, value]) => ({
+        text: value.label,
+        value: key,
+      })),
+      onFilter: (value, record) => record.attributes.type === value,
+      render: (type) => {
+        const typeConfig = TEMPLATE_TYPES[type];
+        return typeConfig ? (
+          <Tag
+            icon={typeConfig.icon}
+            color={typeConfig.color}
+            className="px-2 py-1"
+          >
+            {typeConfig.label}
+          </Tag>
+        ) : null;
+      },
+    },
     {
       title: "分类",
       dataIndex: ["attributes", "category"],
       key: "category",
       render: (categories) => {
         if (!categories || !Array.isArray(categories)) return null;
-        
         return (
-          <Paragraph
-            ellipsis={{
-              rows: 1,
-              tooltip: (
-                <Space size={[0, 8]} wrap>
-                  {categories.map((category) => (
-                    <Tag
-                      size="small"
-                      key={category.id}
-                      color="blue"
-                      className="px-2 py-1 rounded-md"
-                    >
-                      {category.name}
-                    </Tag>
-                  ))}
-                </Space>
-              ),
-            }}
-            className="mb-0"
-          >
-            <Space size={[0, 8]} nowrap>
-              {categories.map((category) => (
-                <Tag
-                  size="small"
-                  key={category.id}
-                  color="blue"
-                  className="px-2 py-1 rounded-md"
-                >
-                  {category.name}
-                </Tag>
-              ))}
-            </Space>
-          </Paragraph>
+          <Space size={[0, 8]} wrap>
+            {categories.map((category) => (
+              <Tag key={category.id} color="default" className="px-2 py-1">
+                {category.name}
+              </Tag>
+            ))}
+          </Space>
         );
       },
     },
@@ -298,55 +476,43 @@ const ServicePage = () => {
       title: "描述",
       dataIndex: ["attributes", "description"],
       key: "description",
-      className: "min-w-[100px] ",
-      render: (text) => (
-        <Paragraph
-          ellipsis={{
-            rows: 2,
-            tooltip: text,
-          }}
-          className="mb-0"
-        >
-          {text}
-        </Paragraph>
-      ),
+      className: "min-w-[100px]",
+      ellipsis: true,
+    },
+    {
+      title: "创建时间",
+      dataIndex: "created_at",
+      key: "created_at",
+      render: (text) => new Date(text).toLocaleString(),
+      sorter: (a, b) => new Date(a.created_at) - new Date(b.created_at),
     },
-    // {
-    //   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",
       fixed: "right",
       width: 220,
       render: (_, record) => (
-        <Space onClick={(e) => e.stopPropagation()}>
+        <Space>
           <Button
             type="link"
-            icon={<EyeOutlined />}
             onClick={() =>
-              navigate(`/company/serviceTemplateInfo/${record.id}`)
+              handleNavigateToTemplate(
+                record.attributes.type,
+                record.id,
+                "isView"
+              )
             }
           >
             查看
           </Button>
           <Button
             type="link"
-            icon={<EditOutlined />}
             onClick={() =>
-              navigate(`/company/serviceTemplateInfo/${record.id}?edit=true`)
+              handleNavigateToTemplate(
+                record.attributes.type,
+                record.id,
+                "edit"
+              )
             }
           >
             编辑
@@ -354,12 +520,12 @@ const ServicePage = () => {
           <Popconfirm
             title="删除确认"
             description="确定要删除这个服务模板吗？此操作不可恢复。"
+            onConfirm={() => handleDeleteService(record.id)}
             okText="确定"
             cancelText="取消"
             okButtonProps={{ danger: true }}
-            onConfirm={() => handleDeleteService(record.id)}
           >
-            <Button type="link" danger className="text-red-600">
+            <Button type="link" danger>
               删除
             </Button>
           </Popconfirm>
@@ -368,348 +534,69 @@ const ServicePage = () => {
     },
   ];
 
-  // 子表格列定义
-  const itemColumns = [
-    {
-      title: "项目名称",
-      dataIndex: "name",
-      key: "name",
-      render: (text, record) => {
-        const isEditing = record.key === editingKey;
-        return isEditing ? (
-          <Form.Item
-            key={`name-${record.key}`}
-            name={[record.sectionIndex, "items", record.itemIndex, "name"]}
-            className="!mb-0"
+  // 表格顶部的操作栏
+  const TableHeader = () => (
+    <div className="flex justify-between items-center mb-4">
+      <Space wrap>
+        {Object.entries(TEMPLATE_TYPES).map(([key, value]) => (
+          <Button
+            key={key}
+            type={selectedType === key ? "primary" : "default"}
+            icon={value.icon}
+            onClick={() => setSelectedType(selectedType === key ? null : key)}
+            className={`border-${value.color}-500`}
           >
-            <Input
-              value={text}
-              onChange={(e) => {
-                const newData = [...data];
-                const targetService = newData.find(
-                  (item) => item.id === record.serviceId
-                );
-                const targetItem =
-                  targetService.attributes.sections[record.sectionIndex].items[
-                    record.itemIndex
-                  ];
-                targetItem.name = e.target.value;
-                setData(newData);
-              }}
+            {value.label}
+            <Badge
+              count={data.filter((item) => item.attributes.type === key).length}
+              className={`ml-2 bg-${value.color}-100 text-${value.color}-600`}
             />
-          </Form.Item>
-        ) : (
-          text
-        );
-      },
-    },
-    {
-      title: "描述",
-      dataIndex: "description",
-      key: "description",
-      render: (text, record) => {
-        const isEditing = record.key === editingKey;
-        return isEditing ? (
-          <Form.Item
-            name={[
-              record.sectionIndex,
-              "items",
-              record.itemIndex,
-              "description",
-            ]}
-            className="!mb-0"
-          >
-            <Input
-              value={text}
-              onChange={(e) => {
-                const newData = [...data];
-                const targetService = newData.find(
-                  (item) => item.id === record.serviceId
-                );
-                const targetItem =
-                  targetService.attributes.sections[record.sectionIndex].items[
-                    record.itemIndex
-                  ];
-                targetItem.description = e.target.value;
-                setData(newData);
-              }}
-            />
-          </Form.Item>
-        ) : (
-          <Paragraph
-            ellipsis={{
-              rows: 2,
-              tooltip: text,
-            }}
-            className="mb-0"
-          >
-            {text}
-          </Paragraph>
-        );
-      },
-    },
-    {
-      title: "单价",
-      dataIndex: "price",
-      key: "price",
-      render: (price, record) => {
-        const isEditing = record.key === editingKey;
-        return isEditing ? (
-          <Input
-            type="number"
-            value={price}
-            onChange={(e) => {
-              const newData = [...data];
-              const targetService = newData.find(
-                (item) => item.id === record.serviceId
-              );
-              const targetItem =
-                targetService.attributes.sections[record.sectionIndex].items[
-                  record.itemIndex
-                ];
-              targetItem.price = Number(e.target.value);
-              setData(newData);
-            }}
-          />
-        ) : (
-          <span className="text-gray-600">
-            ¥
-            {price?.toLocaleString("zh-CN", {
-              minimumFractionDigits: 2,
-              maximumFractionDigits: 2,
-            })}
-          </span>
-        );
-      },
-    },
-    {
-      title: "数量",
-      dataIndex: "quantity",
-      key: "quantity",
-      render: (quantity, record) => {
-        const isEditing = record.key === editingKey;
-        return isEditing ? (
-          <Input
-            type="number"
-            value={quantity}
-            onChange={(e) => {
-              const newData = [...data];
-              const targetService = newData.find(
-                (item) => item.id === record.serviceId
-              );
-              const targetItem =
-                targetService.attributes.sections[record.sectionIndex].items[
-                  record.itemIndex
-                ];
-              targetItem.quantity = Number(e.target.value);
-              setData(newData);
-            }}
-          />
-        ) : (
-          <span className="text-gray-600">{quantity}</span>
-        );
-      },
-    },
-    {
-      title: "小计",
-      key: "subtotal",
-      render: (_, record) => (
-        <span className="text-blue-600 font-medium">
-          ¥
-          {((record.price || 0) * (record.quantity || 0)).toLocaleString(
-            "zh-CN",
-            {
-              minimumFractionDigits: 2,
-              maximumFractionDigits: 2,
-            }
-          )}
-        </span>
-      ),
-    },
-    {
-      title: "操作",
-      key: "action",
-      fixed: 'right',
-      render: (_, record) => {
-        const isEditing = record.key === editingKey;
-        return isEditing ? (
-          <Space>
-            <Button
-              type="link"
-              size="small"
-              className="text-green-600"
-              onClick={() =>
-                handleSaveItem(record, record.sectionIndex, record.itemIndex)
-              }
-            >
-              保存
-            </Button>
-            <Button
-              type="link"
-              size="small"
-              className="text-gray-600"
-              onClick={() => setEditingKey("")}
-            >
-              取消
-            </Button>
-          </Space>
-        ) : (
-          <Space>
-            <Button
-              type="link"
-              size="small"
-              className="text-blue-600"
-              disabled={editingKey !== ""}
-              onClick={() => setEditingKey(record.key)}
-            >
-              编辑
-            </Button>
-            <Popconfirm
-              title="删除确认"
-              description="确定要删除这个项目吗？"
-              okText="确定"
-              cancelText="取消"
-              okButtonProps={{ danger: true }}
-              onConfirm={() => handleDeleteItem(record)}
-            >
-              <Button
-                type="link"
-                size="small"
-                className="text-red-600"
-                disabled={editingKey !== ""}
-              >
-                删除
-              </Button>
-            </Popconfirm>
-          </Space>
-        );
-      },
-    },
-  ];
-
-  // 修改 expandedRowRender 函数，确保 key 的唯一性
-  const expandedRowRender = (record) => (
-    <div className="bg-white dark:bg-gray-800 p-4 rounded-lg">
-      {record.attributes.sections?.map((section, sectionIndex) => (
-        <Card
-          key={`${record.id}-section-${sectionIndex}`}
-          className="mb-4 shadow-sm border-blue-100 dark:border-blue-900/30 hover:shadow-md transition-shadow duration-300"
-          title={
-            <div className="flex items-center justify-between py-2">
-              <span className="text-lg font-medium text-blue-600 dark:text-blue-400">
-                {section.sectionName || `服务类型 ${sectionIndex + 1}`}
-              </span>
-              <span className="text-blue-600 dark:text-blue-400 font-medium">
-                总计: ¥
-                {section.items
-                  .reduce(
-                    (total, item) =>
-                      total +
-                      (Number(item.price) || 0) * (Number(item.quantity) || 0),
-                    0
-                  )
-                  .toLocaleString("zh-CN", {
-                    minimumFractionDigits: 2,
-                    maximumFractionDigits: 2,
-                  })}
-              </span>
-            </div>
-          }
-          headStyle={{
-            background: "rgba(59, 130, 246, 0.05)",
-            borderBottom: "1px solid rgba(59, 130, 246, 0.1)",
-          }}
-          style={{
-            background: "rgba(59, 130, 246, 0.02)",
-          }}
+          </Button>
+        ))}
+        {selectedType && (
+          <Button onClick={() => setSelectedType(null)}>显示全部</Button>
+        )}
+      </Space>
+      <Space>
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={() => setIsModalOpen(true)}
+          className="bg-blue-500 hover:bg-blue-600"
         >
-          <Table
-            columns={itemColumns}
-            scroll={{ x: true }}
-            dataSource={section.items.map((item, itemIndex) => ({
-              ...item,
-              key: `${record.id}-${sectionIndex}-${itemIndex}`,
-              serviceId: record.id,
-              sectionIndex,
-              itemIndex,
-            }))}
-            pagination={false}
-            className="rounded-lg overflow-hidden"
-            rowClassName="hover:bg-blue-50/50 dark:hover:bg-blue-900/20 transition-colors"
-          />
-        </Card>
-      ))}
+          新建模板
+        </Button>
+        <Divider type="vertical" />
+      </Space>
     </div>
   );
 
-  useEffect(() => {
-    fetchServices();
-    fetchCategories();
-  }, []);
-
   return (
-    <div className="min-h-screen">
-      <Card
-        title={<span className="text-xl font-medium">服务模版管理</span>}
-        className="h-full w-full overflow-auto"
-        extra={
-          <Space>
-            <Sections />
-            <UnitManagement />
-            <CategoryDrawer />
+    <Card className="shadow-lg rounded-lg">
+      <TableHeader />
+      <Table
+        columns={columns}
+        dataSource={data}
+        rowKey="id"
+        loading={loading}
+        expandable={{
+          expandedRowRender,
+          rowExpandable: (record) => record.attributes.sections?.length > 0,
+        }}
+        pagination={{
+          pageSize: 10,
+          showTotal: (total) => `共 ${total} 条`,
+        }}
+        className="bg-white rounded-lg"
+      />
 
-            <Button
-              type="primary"
-              onClick={() => navigate("/company/serviceTemplateInfo")}
-            >
-              新建模版
-            </Button>
-          </Space>
-        }
-      >
-        <Table
-          columns={columns}
-          dataSource={data}
-          loading={loading}
-          rowKey="id"
-          scroll={{ x: true }}
-          expandable={{
-            expandedRowRender,
-            expandRowByClick: true,
-            expandIcon: ({ expanded, onExpand, record }) => (
-              <Button
-                type="link"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onExpand(record, e);
-                }}
-                icon={expanded ? <UpOutlined /> : <DownOutlined />}
-                className={`
-                  transition-all duration-300
-                  ${
-                    expanded
-                      ? "text-blue-600"
-                      : "text-gray-400 hover:text-blue-600"
-                  }
-                `}
-              />
-            ),
-            rowExpandable: (record) => record.attributes.sections?.length > 0,
-          }}
-          className="rounded-lg overflow-hidden"
-          rowClassName={(record, index) => `
-            cursor-pointer transition-colors
-            ${
-              index % 2 === 0
-                ? "bg-white dark:bg-gray-800"
-                : "bg-gray-50 dark:bg-gray-750"
-            }
-            hover:bg-blue-50 dark:hover:bg-blue-900/20
-          `}
-          expandedRowClassName={() => "bg-blue-50/50 dark:bg-blue-900/10"}
-        />
-      </Card>
-    </div>
+      {/* 添加模板类型选择弹窗 */}
+      <TemplateTypeModal
+        open={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onSelect={handleTemplateSelect}
+      />
+    </Card>
   );
 };
 
diff --git a/src/pages/company/supplier/detail/index.jsx b/src/pages/company/supplier/detail/index.jsx
index 6bed383..18adcb3 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-2">
+    <div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-800 dark:to-gray-900/90 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 c4bf672..d31a20e 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-2">
+    <div className="bg-gradient-to-b from-gray-50 to-white dark:from-gray-800 dark:to-gray-900/90 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 58f5740..a9e1360 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -147,4 +147,40 @@ body {
   .stat-value {
     @apply text-2xl font-semibold mt-2;
   }
-}
\ No newline at end of file
+}
+/* 滚动条基础样式 */
+::-webkit-scrollbar {
+  width: 8px;  /* 垂直滚动条宽度 */
+  height: 8px; /* 水平滚动条高度 */
+}
+
+/* 亮色模式滚动条样式 */
+::-webkit-scrollbar-track {
+  @apply bg-gray-100;  /* 轨道背景色 */
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-gray-300 rounded-full hover:bg-gray-400 transition-colors;  /* 滑块样式 */
+}
+
+/* 暗色模式滚动条样式 */
+.dark {
+  ::-webkit-scrollbar-track {
+    @apply bg-gray-800;  /* 暗色模式轨道背景 */
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-gray-600 hover:bg-gray-500;  /* 暗色模式滑块样式 */
+  }
+}
+
+/* Firefox 滚动条样式 */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: theme('colors.gray.300') theme('colors.gray.100');
+}
+
+.dark * {
+  scrollbar-color: theme('colors.gray.600') theme('colors.gray.800');
+}
+