From d021f39b04020cedfe9956e232c5350e52aeb3f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98Liammcl=E2=80=99?= <liamzi6666@163.com>
Date: Sat, 28 Dec 2024 15:51:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SectionList/index.jsx          | 429 +++++++-----
 src/pages/company/quotation/detail/index.jsx  | 326 +--------
 src/pages/company/quotation/index.jsx         |  60 +-
 .../detail/components/QuotationTemplate.jsx   |   1 -
 src/pages/company/service/detail/index.jsx    |   2 +-
 .../company/service/itemsManange/index.jsx    |  37 +-
 .../service/itemsManange/sections/index.jsx   | 662 ++++++++----------
 .../resource/team/components/TeamTable.jsx    |   1 -
 8 files changed, 623 insertions(+), 895 deletions(-)

diff --git a/src/components/SectionList/index.jsx b/src/components/SectionList/index.jsx
index aea1352..e329549 100644
--- a/src/components/SectionList/index.jsx
+++ b/src/components/SectionList/index.jsx
@@ -1,26 +1,47 @@
-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';
+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";
 import { supabase } from "@/config/supabase";
 import { supabaseService } from "@/hooks/supabaseService";
 const { Text } = Typography;
-const SectionList = ({ 
+const SectionList = ({
   form,
   isView,
   formValues,
   type,
-  currentCurrency = 'CNY'
+  currentCurrency = "TWD",
 }) => {
   const [editingSectionIndex, setEditingSectionIndex] = useState(null);
-  const [editingSectionName, setEditingSectionName] = useState('');
+  const [editingSectionName, setEditingSectionName] = useState("");
   const [templateModalVisible, setTemplateModalVisible] = useState(false);
   const [availableSections, setAvailableSections] = useState([]);
   const [loading, setLoading] = useState(false);
   const [units, setUnits] = useState([]);
   const [loadingUnits, setLoadingUnits] = useState(false);
+  const CURRENCY_SYMBOLS = {
+    CNY: "¥",
+    TWD: "NT$",
+    USD: "$",
+  };
 
-  // 内部计算方法
   const calculateItemAmount = (quantity, price) => {
     const safeQuantity = Number(quantity) || 0;
     const safePrice = Number(price) || 0;
@@ -36,19 +57,13 @@ const SectionList = ({
   };
 
   const formatCurrency = (amount) => {
-    const CURRENCY_SYMBOLS = {
-      CNY: "¥",
-      TWD: "NT$",
-      USD: "$",
-    };
     const safeAmount = Number(amount) || 0;
-    return `${CURRENCY_SYMBOLS[currentCurrency] || ""}${safeAmount.toLocaleString("zh-CN", {
+    return `${CURRENCY_SYMBOLS[currentCurrency] || "NT$"}${safeAmount.toLocaleString("zh-TW", {
       minimumFractionDigits: 2,
       maximumFractionDigits: 2,
     })}`;
   };
 
-  // 获取可用的小节模板
   const fetchAvailableSections = async () => {
     try {
       setLoading(true);
@@ -56,6 +71,7 @@ const SectionList = ({
         .from("resources")
         .select("*")
         .eq("type", "sections")
+        .eq("attributes->>template_type", [type])
         .order("created_at", { ascending: false });
 
       if (error) throw error;
@@ -68,195 +84,235 @@ const SectionList = ({
     }
   };
 
-  // 处理小节名称编辑
   const handleSectionNameEdit = (sectionIndex, initialValue) => {
     setEditingSectionIndex(sectionIndex);
-    setEditingSectionName(initialValue || '');
+    setEditingSectionName(initialValue || "");
   };
 
   const handleSectionNameSave = () => {
     if (!editingSectionName.trim()) {
-      message.error('请输入小节名称');
+      message.error("请输入小节名称");
       return;
     }
 
-    const sections = form.getFieldValue('sections');
+    const sections = form.getFieldValue("sections");
     const newSections = [...sections];
     newSections[editingSectionIndex] = {
       ...newSections[editingSectionIndex],
-      sectionName: editingSectionName.trim()
+      sectionName: editingSectionName.trim(),
     };
-    form.setFieldValue('sections', newSections);
+    form.setFieldValue("sections", newSections);
     setEditingSectionIndex(null);
-    setEditingSectionName('');
+    setEditingSectionName("");
   };
 
-  // 添加项目
   const handleAddItem = (add) => {
     add({
       key: uuidv4(),
-      name: '',
-      description: '',
+      name: "",
+      description: "",
       quantity: 1,
       price: 0,
-      unit: ''
+      unit: "",
     });
   };
 
-  // 处理使用模板
   const handleUseTemplate = (template, add) => {
     const newSection = {
       key: uuidv4(),
       sectionName: template.attributes.name,
-      items: (template.attributes.items || []).map(item => ({
+      items: (template.attributes.items || []).map((item) => ({
         key: uuidv4(),
-        name: item.name || '',
-        description: item.description || '',
+        name: item.name || "",
+        description: item.description || "",
         price: item.price || 0,
         quantity: item.quantity || 1,
-        unit: item.unit || '',
+        unit: item.unit || "",
       })),
     };
     add(newSection);
     setTemplateModalVisible(false);
-    message.success('套用模版成功');
+    message.success("套用模版成功");
   };
 
-  // 处理创建自定义小节
   const handleCreateCustom = (add, fieldsLength) => {
     add({
       key: uuidv4(),
       sectionName: `服务类型 ${fieldsLength + 1}`,
-      items: [{
-        key: uuidv4(),
-        name: '',
-        description: '',
-        quantity: 1,
-        price: 0,
-        unit: ''
-      }]
+      items: [
+        {
+          key: uuidv4(),
+          name: "",
+          description: "",
+          quantity: 1,
+          price: 0,
+          unit: "",
+        },
+      ],
     });
     setTemplateModalVisible(false);
   };
 
-  // 获取单位列表
   const fetchUnits = async () => {
     setLoadingUnits(true);
     try {
-      const { data: units } = await supabaseService.select('resources', {
+      const { data: units } = await supabaseService.select("resources", {
         filter: {
-          'type': { eq: 'units' },
-          'attributes->>template_type': { in: `(${type},common)` }
+          type: { eq: "units" },
+          "attributes->>template_type": { in: `(${type},common)` },
         },
         order: {
-          column: 'created_at',
-          ascending: false
-        }
+          column: "created_at",
+          ascending: false,
+        },
       });
       setUnits(units || []);
     } catch (error) {
-      message.error('获取单位列表失败');
+      message.error("获取单位列表失败");
       console.error(error);
     } finally {
       setLoadingUnits(false);
     }
   };
 
-  // 在组件加载时获取单位列表
   useEffect(() => {
     fetchUnits();
   }, []);
 
-  // 新增单位
   const handleAddUnit = async (unitName) => {
     try {
-      const { error } = await supabase
-        .from('resources')
-        .insert([{
-          type: 'units',
+      const { error } = await supabase.from("resources").insert([
+        {
+          type: "units",
           attributes: {
-            name: unitName
+            name: unitName,
+            template_type: type,
           },
-          schema_version: 1
-        }]);
+          schema_version: 1,
+        },
+      ]);
 
       if (error) throw error;
-      message.success('新增单位成功');
+      message.success("新增单位成功");
       fetchUnits();
       return true;
     } catch (error) {
-      message.error('新增单位失败');
+      message.error("新增单位失败");
       console.error(error);
       return false;
     }
   };
 
-  // 模板选择弹窗内容
   const renderTemplateModalContent = (add, fieldsLength) => (
     <div className="space-y-6">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {availableSections.map(section => (
-          <div
-            key={section.id}
-            className="group relative bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-lg transition-all duration-300 cursor-pointer"
-            onClick={() => handleUseTemplate(section, add)}
-          >
-            <div className="p-6">
-              <div className="text-center mb-4">
-                <h3 className="text-lg font-medium group-hover:text-blue-500 transition-colors">
-                  {section.attributes.name}
-                </h3>
-                <div className="text-sm text-gray-500 mt-1">
-                  {section.attributes.items?.length || 0} 个项目
+      {availableSections.length > 0 ? (
+        <div className="flex flex-col">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {availableSections.map((section) => (
+              <div
+                key={section.id}
+                className="group relative bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-lg transition-all duration-300 cursor-pointer"
+                onClick={() => handleUseTemplate(section, add)}
+              >
+                <div className="p-6">
+                  <div className="text-center mb-4">
+                    <h3 className="text-lg font-medium group-hover:text-blue-500 transition-colors">
+                      {section.attributes.name}
+                    </h3>
+                    <div className="text-sm text-gray-500 mt-1">
+                      {section.attributes.items?.length || 0} 个项目
+                    </div>
+                  </div>
+
+                  <div className="space-y-2 mt-4 border-t pt-4">
+                    {(section.attributes.items || [])
+                      .slice(0, 3)
+                      .map((item, index) => (
+                        <div
+                          key={index}
+                          className="flex justify-between items-center"
+                        >
+                          <span className="text-sm text-gray-600 truncate flex-1">
+                            {item.name}
+                          </span>
+                          <span className="text-sm text-gray-500 ml-2">
+                            {formatCurrency(item.price)}
+                          </span>
+                        </div>
+                      ))}
+                    {(section.attributes.items || []).length > 3 && (
+                      <div className="text-sm text-gray-500 text-center">
+                        还有 {section.attributes.items.length - 3} 个项目...
+                      </div>
+                    )}
+                  </div>
+
+                  <div className="mt-4 pt-4 border-t flex justify-between items-center">
+                    <span className="text-sm text-gray-600">总金额</span>
+                    <span className="text-base font-medium text-blue-500">
+                      {formatCurrency(
+                        (section.attributes.items || []).reduce(
+                          (sum, item) =>
+                            sum + (item.price * (item.quantity || 1) || 0),
+                          0
+                        )
+                      )}
+                    </span>
+                  </div>
                 </div>
               </div>
-
-              <div className="space-y-2 mt-4 border-t pt-4">
-                {(section.attributes.items || []).slice(0, 3).map((item, index) => (
-                  <div key={index} className="flex justify-between items-center">
-                    <span className="text-sm text-gray-600 truncate flex-1">{item.name}</span>
-                    <span className="text-sm text-gray-500 ml-2">{formatCurrency(item.price)}</span>
-                  </div>
-                ))}
-                {(section.attributes.items || []).length > 3 && (
-                  <div className="text-sm text-gray-500 text-center">
-                    还有 {section.attributes.items.length - 3} 个项目...
-                  </div>
-                )}
-              </div>
-
-              <div className="mt-4 pt-4 border-t flex justify-between items-center">
-                <span className="text-sm text-gray-600">总金额</span>
-                <span className="text-base font-medium text-blue-500">
-                  {formatCurrency(
-                    (section.attributes.items || []).reduce(
-                      (sum, item) => sum + (item.price * (item.quantity || 1) || 0),
-                      0
-                    )
-                  )}
-                </span>
-              </div>
-            </div>
+            ))}
           </div>
-        ))}
-      </div>
 
-      <Divider />
-
-      <div className="flex justify-center">
-        <Button
-          type="dashed"
-          icon={<PlusOutlined />}
-          onClick={() => handleCreateCustom(add, fieldsLength)}
-          className="w-1/3 border-2"
-        >
-          自定义模块
-        </Button>
-      </div>
+          <div className="flex justify-center">
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={() => handleCreateCustom(add, fieldsLength)}
+              className="bg-blue-600 hover:bg-blue-700 border-0 shadow-md hover:shadow-lg transition-all duration-200 h-10 px-6 rounded-lg flex items-center gap-2"
+            >
+              <span className="font-medium">自定义模块</span>
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col items-center justify-center py-16 px-4">
+          <div className="w-48 h-48 mb-8">
+            <svg
+              className="w-full h-full text-gray-200"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1}
+                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+              />
+            </svg>
+          </div>
+          <h3 className="text-xl font-medium text-gray-900 mb-2">
+            暂无可用模板
+          </h3>
+          <p className="text-gray-500 text-center max-w-sm mb-8">
+            您可以选择创建一个自定义模块开始使用
+          </p>
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => handleCreateCustom(add, fieldsLength)}
+            size="large"
+            className="shadow-md hover:shadow-lg transition-shadow"
+          >
+            创建自定义模块
+          </Button>
+        </div>
+      )}
     </div>
   );
 
-  // 修改项目小计的计算，将其封装为 memo 组件
   const ItemSubtotal = React.memo(({ quantity, price, currentCurrency }) => {
     const subtotal = useMemo(() => {
       const safeQuantity = Number(quantity) || 0;
@@ -273,7 +329,6 @@ const SectionList = ({
     );
   });
 
-  // 修改小节总计的计算，将其封装为 memo 组件
   const SectionTotal = React.memo(({ items, currentCurrency }) => {
     const total = useMemo(() => {
       if (!Array.isArray(items)) return 0;
@@ -281,7 +336,7 @@ const SectionList = ({
         if (!item) return sum;
         const safeQuantity = Number(item.quantity) || 0;
         const safePrice = Number(item.price) || 0;
-        return sum + (safeQuantity * safePrice);
+        return sum + safeQuantity * safePrice;
       }, 0);
     }, [items]);
 
@@ -302,11 +357,11 @@ const SectionList = ({
       <Form.List name="sections">
         {(fields, { add, remove }) => (
           <>
-            <div className="space-y-4">
+            <div className="space-y-4 overflow-auto">
               {fields.map((field, sectionIndex) => (
                 <Card
                   key={field.key}
-                  className="shadow-sm rounded-lg"
+                  className="shadow-sm rounded-lg min-w-[1000px]"
                   type="inner"
                   title={
                     <div className="flex items-center justify-between">
@@ -315,7 +370,9 @@ const SectionList = ({
                           <div className="flex items-center gap-2">
                             <Input
                               value={editingSectionName}
-                              onChange={(e) => setEditingSectionName(e.target.value)}
+                              onChange={(e) =>
+                                setEditingSectionName(e.target.value)
+                              }
                               onPressEnter={handleSectionNameSave}
                               autoFocus
                               className="w-48"
@@ -331,7 +388,7 @@ const SectionList = ({
                               icon={<CloseOutlined />}
                               onClick={() => {
                                 setEditingSectionIndex(null);
-                                setEditingSectionName('');
+                                setEditingSectionName("");
                               }}
                               className="text-red-500"
                             />
@@ -340,17 +397,26 @@ const SectionList = ({
                           <div className="flex items-center gap-2">
                             <span className="w-1 h-4 bg-purple-500 rounded-full" />
                             <Text strong className="text-lg">
-                              {form.getFieldValue(['sections', sectionIndex, 'sectionName']) 
-                                || `服务类型 ${sectionIndex + 1}`}
+                              {form.getFieldValue([
+                                "sections",
+                                sectionIndex,
+                                "sectionName",
+                              ]) || `服务类型 ${sectionIndex + 1}`}
                             </Text>
                             {!isView && (
                               <Button
                                 type="link"
                                 icon={<EditOutlined />}
-                                onClick={() => handleSectionNameEdit(
-                                  sectionIndex,
-                                  form.getFieldValue(['sections', sectionIndex, 'sectionName'])
-                                )}
+                                onClick={() =>
+                                  handleSectionNameEdit(
+                                    sectionIndex,
+                                    form.getFieldValue([
+                                      "sections",
+                                      sectionIndex,
+                                      "sectionName",
+                                    ])
+                                  )
+                                }
                                 className="text-gray-400 hover:text-blue-500"
                               />
                             )}
@@ -368,11 +434,9 @@ const SectionList = ({
                     </div>
                   }
                 >
-                  {/* 项目列表 */}
                   <Form.List name={[field.name, "items"]}>
                     {(itemFields, { add: addItem, remove: removeItem }) => (
                       <>
-                        {/* 表头 */}
                         <div className="grid grid-cols-[3fr_4fr_1fr_1fr_2fr_1fr_40px] gap-4 mb-2 text-gray-500 px-2">
                           <div>项目明细</div>
                           <div>描述/备注</div>
@@ -383,7 +447,6 @@ const SectionList = ({
                           <div></div>
                         </div>
 
-                        {/* 项目列表 */}
                         {itemFields.map((itemField, itemIndex) => (
                           <div
                             key={itemField.key}
@@ -413,9 +476,10 @@ const SectionList = ({
                                 loading={loadingUnits}
                                 showSearch
                                 allowClear
-                                options={units.map(unit => ({
+                                style={{ minWidth: "120px" }}
+                                options={units.map((unit) => ({
                                   label: unit.attributes.name,
-                                  value: unit.attributes.name
+                                  value: unit.attributes.name,
                                 }))}
                                 onDropdownVisibleChange={(open) => {
                                   if (open) fetchUnits();
@@ -423,48 +487,32 @@ const SectionList = ({
                                 dropdownRender={(menu) => (
                                   <>
                                     {menu}
-                                    <Divider style={{ margin: '8px 0' }} />
-                                    <Select.Option value="ADD_NEW">
-                                      <Button
-                                        type="text"
-                                        icon={<PlusOutlined />}
-                                        block
-                                        onClick={(e) => {
-                                          e.stopPropagation();
-                                          Modal.confirm({
-                                            title: '新增单位',
-                                            content: (
-                                              <Input
-                                                placeholder="请输入单位名称"
-                                                onChange={(e) => {
-                                                  Modal.confirm.update({
-                                                    okButtonProps: {
-                                                      disabled: !e.target.value.trim()
-                                                    }
-                                                  });
-                                                }}
-                                                ref={(input) => {
-                                                  if (input) {
-                                                    setTimeout(() => input.focus(), 100);
-                                                  }
-                                                }}
-                                              />
-                                            ),
-                                            onOk: async (close) => {
-                                              const unitName = document.querySelector('.ant-modal-content input').value.trim();
-                                              if (await handleAddUnit(unitName)) {
-                                                const currentItems = form.getFieldValue(['sections', field.name, 'items']);
-                                                currentItems[itemField.name].unit = unitName;
-                                                form.setFieldValue(['sections', field.name, 'items'], currentItems);
-                                                close();
-                                              }
-                                            }
-                                          });
+                                    <Divider style={{ margin: "12px 0" }} />
+                                    <div style={{ padding: "4px" }}>
+                                      <Input.Search
+                                        placeholder="输入新单位名称"
+                                        enterButton={<PlusOutlined />}
+                                        onSearch={async (value) => {
+                                          if (!value.trim()) return;
+                                          if (
+                                            await handleAddUnit(value.trim())
+                                          ) {
+                                            const currentItems =
+                                              form.getFieldValue([
+                                                "sections",
+                                                field.name,
+                                                "items",
+                                              ]);
+                                            currentItems[itemField.name].unit =
+                                              value.trim();
+                                            form.setFieldValue(
+                                              ["sections", field.name, "items"],
+                                              currentItems
+                                            );
+                                          }
                                         }}
-                                      >
-                                        新增单位
-                                      </Button>
-                                    </Select.Option>
+                                      />
+                                    </div>
                                   </>
                                 )}
                               />
@@ -474,18 +522,34 @@ const SectionList = ({
                               name={[itemField.name, "quantity"]}
                               className="!mb-0"
                             >
-                              <InputNumber placeholder="数量" min={0} className="w-full" />
+                              <InputNumber
+                                placeholder="数量"
+                                min={0}
+                                className="w-full"
+                              />
                             </Form.Item>
                             <Form.Item
                               {...itemField}
                               name={[itemField.name, "price"]}
                               className="!mb-0"
                             >
-                              <InputNumber placeholder="单价" min={0} className="w-full" />
+                              <InputNumber
+                                placeholder="单价"
+                                min={0}
+                                className="w-full"
+                              />
                             </Form.Item>
-                            <ItemSubtotal 
-                              quantity={formValues?.sections?.[sectionIndex]?.items?.[itemIndex]?.quantity}
-                              price={formValues?.sections?.[sectionIndex]?.items?.[itemIndex]?.price}
+                            <ItemSubtotal
+                              quantity={
+                                formValues?.sections?.[sectionIndex]?.items?.[
+                                  itemIndex
+                                ]?.quantity
+                              }
+                              price={
+                                formValues?.sections?.[sectionIndex]?.items?.[
+                                  itemIndex
+                                ]?.price
+                              }
                               currentCurrency={currentCurrency}
                             />
                             {!isView && itemFields.length > 1 && (
@@ -511,7 +575,7 @@ const SectionList = ({
                           </Button>
                         )}
 
-                        <SectionTotal 
+                        <SectionTotal
                           items={formValues?.sections?.[sectionIndex]?.items}
                           currentCurrency={currentCurrency}
                         />
@@ -555,4 +619,5 @@ const SectionList = ({
   );
 };
 
-export default SectionList;
\ No newline at end of file
+
+export default SectionList;
diff --git a/src/pages/company/quotation/detail/index.jsx b/src/pages/company/quotation/detail/index.jsx
index 13bcb72..e7a564a 100644
--- a/src/pages/company/quotation/detail/index.jsx
+++ b/src/pages/company/quotation/detail/index.jsx
@@ -18,16 +18,12 @@ import {
   ArrowLeftOutlined,
   SaveOutlined,
   DeleteOutlined,
-  CloseOutlined,
-  EditOutlined,
-  CheckOutlined,
 } from "@ant-design/icons";
 import { supabase } from "@/config/supabase";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { v4 as uuidv4 } from "uuid";
-
-const { TextArea } = Input;
-const { Title, Text } = Typography;
+import SectionList from '@/components/SectionList' 
+const { Title } = Typography;
 
 // 添加货币符号映射
 const CURRENCY_SYMBOLS = {
@@ -47,7 +43,7 @@ const QuotationForm = () => {
   const [dataSource, setDataSource] = useState([{ id: Date.now() }]);
   const [totalAmount, setTotalAmount] = useState(0);
   const [loading, setLoading] = useState(false);
-  const [currentCurrency, setCurrentCurrency] = useState("CNY");
+  const [currentCurrency, setCurrentCurrency] = useState("TWD");
   const [customers, setCustomers] = useState([]);
   const [selectedCustomers, setSelectedCustomers] = useState([]);
   const [formValues, setFormValues] = useState({});
@@ -737,304 +733,28 @@ const QuotationForm = () => {
             </div>
           </Card>
 
-          {/* 报价单细卡片 */}
-          <Form.List name="sections">
-            {(fields, { add, remove }) => (
-              <>
-                <div className="space-y-4">
-                  {fields.map((field, sectionIndex) => (
-                    <Card
-                      key={`section-${field.key}`}
-                      className="shadow-sm rounded-lg"
-                      type="inner"
-                      title={
-                        <div className="flex items-center justify-between">
-                          <div className="flex items-center gap-2">
-                            {editingSectionIndex === sectionIndex ? (
-                              <div className="flex items-center gap-2">
-                                <Input
-                                  value={editingSectionName}
-                                  onChange={(e) =>
-                                    setEditingSectionName(e.target.value)
-                                  }
-                                  onPressEnter={handleSectionNameSave}
-                                  autoFocus
-                                  className="w-48"
-                                />
-                                <Button
-                                  type="link"
-                                  icon={<CheckOutlined />}
-                                  onClick={handleSectionNameSave}
-                                  className="text-green-500 hover:text-green-600"
-                                />
-                                <Button
-                                  type="link"
-                                  icon={<CloseOutlined />}
-                                  onClick={handleSectionNameCancel}
-                                  className="text-red-500 hover:text-red-600"
-                                />
-                              </div>
-                            ) : (
-                              <div className="flex items-center gap-2">
-                                <span className="w-1 h-4 bg-purple-500 rounded-full" />
-                                <Text
-                                  strong
-                                  className="text-lg dark:text-gray-200"
-                                >
-                                  {form.getFieldValue([
-                                    "sections",
-                                    sectionIndex,
-                                    "sectionName",
-                                  ]) || `服务类�� ${sectionIndex + 1}`}
-                                </Text>
-                                {(!id || isEdit) && (
-                                  <Button
-                                    type="link"
-                                    icon={<EditOutlined />}
-                                    onClick={() =>
-                                      handleSectionNameEdit(
-                                        sectionIndex,
-                                        form.getFieldValue([
-                                          "sections",
-                                          sectionIndex,
-                                          "sectionName",
-                                        ]) || `服务类型 ${sectionIndex + 1}`
-                                      )
-                                    }
-                                    className="text-gray-400 hover:text-blue-500"
-                                  />
-                                )}
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      }
-                    >
-                      <Form.List name={[field.name, "items"]}>
-                        {(itemFields, { add: addItem, remove: removeItem }) => (
-                          <>
-                            {/* 表头 */}
-                            <div className="grid grid-cols-[3fr_4fr_1fr_1fr_2fr_1fr_40px] gap-4 mb-2 text-gray-500 px-2">
-                              <div>项目明细</div>
-                              <div>描述/备注</div>
-                              <div>单位</div>
-                              <div className="text-center">数量</div>
-                              <div className="text-center">单价</div>
-                              <div className="text-right">小计</div>
-                              <div>操作</div>
-                            </div>
-                            {itemFields.map((itemField, itemIndex) => (
-                              <div
-                                key={`${sectionIndex}-${itemIndex}`}
-                                className="grid grid-cols-[3fr_4fr_1fr_1fr_2fr_1fr_40px] gap-4 mb-4 items-start"
-                              >
-                               <Form.Item
-                                  {...itemField}
-                                  name={[itemField.name, "productName"]}
-                                  className="!mb-0"
-                                >
-                                  <Input placeholder="服务项目名称" />
-                                </Form.Item>
-                                <Form.Item
-                                  {...itemField}
-                                  name={[itemField.name, "note"]}
-                                  className="!mb-0"
-                                >
-                                  <Input placeholder="请输入描述/备注" />
-                                </Form.Item>
-                                <Form.Item
-                                  {...itemField}
-                                  name={[itemField.name, "unit"]}
-                                  className="!mb-0"
-                                >
-                                  <Input placeholder="单位" />
-                                </Form.Item>
-                                <Form.Item
-                                  {...itemField}
-                                  name={[itemField.name, "quantity"]}
-                                  className="!mb-0"
-                                >
-                                  <InputNumber
-                                    placeholder="数量"
-                                    min={0}
-                                    className="w-full"
-                                  />
-                                </Form.Item>
-                                <Form.Item
-                                  {...itemField}
-                                  name={[itemField.name, "price"]}
-                                  className="!mb-0"
-                                >
-                                  <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>
-                                {!isView && (
-                                  <Button
-                                    type="text"
-                                    danger
-                                    icon={<DeleteOutlined />}
-                                    onClick={() => removeItem(itemField.name)}
-                                    className="flex items-center justify-center"
-                                  />
-                                )}
-                              </div>
-                            ))}
-
-                            {!isView && (
-                              <Button
-                                type="dashed"
-                                onClick={() =>
-                                  handleAddItem(addItem, sectionIndex)
-                                }
-                                icon={<PlusOutlined />}
-                                className="w-full hover:border-blue-400 hover:text-blue-500 mb-4"
-                              >
-                                添加服务项目
-                              </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>
-                          </>
-                        )}
-                      </Form.List>
-                    </Card>
-                  ))}
-                </div>
-
-                {/* Add section button */}
-                {!isView && (
-                  <div className="mt-6 flex justify-center">
-                    <Button
-                      type="dashed"
-                      onClick={handleAddSection}
-                      icon={<PlusOutlined />}
-                      className="w-1/3 border-2 hover:border-blue-400 hover:text-blue-500"
-                    >
-                      新建小节
-                    </Button>
-                  </div>
-                )}
-
-                {/* 总金额统计 */}
-                <div className="mt-6 space-y-4 pt-4 border-t">
-                  <div className="flex justify-end items-center space-x-4">
-                    <span className="text-gray-600 font-medium">税前总计:</span>
-                    <span className="text-2xl font-semibold text-blue-600">
-                      {formatCurrency(calculateTotalAmount(formValues?.sections))}
-                    </span>
-                  </div>
-                  
-                  <div className="flex justify-end items-center space-x-4">
-                    <span className="text-gray-600">税率:</span>
-                    <div style={{ width: '150px' }}>
-                      <Input
-                        value={taxRate}
-                        suffix="%"
-                        onChange={(e) => {
-                          const value = e.target.value.replace(/[^\d]/g, '');
-                          setTaxRate(Number(value) || 0);
-                        }}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="flex justify-end items-center space-x-4">
-                    <span className="text-gray-600 font-medium">税后总计:</span>
-                    <span className="text-xl font-semibold text-blue-600">
-                      {formatCurrency(afterTaxAmount)}
-                    </span>
-                  </div>
-
-                  <div className="flex justify-end items-center space-x-4">
-                    <span className="text-gray-600">折扣价:</span>
-                    <div style={{ width: '150px' }}>
-                      <Input
-                        value={discount}
-                        prefix={CURRENCY_SYMBOLS[currentCurrency]}
-                        onChange={(e) => {
-                          const value = e.target.value.replace(/[^\d]/g, '');
-                          setDiscount(Number(value) || 0);
-                        }}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="flex justify-end items-center space-x-4">
-                    <span className="text-gray-600 font-medium">最终金额:</span>
-                    <span className="text-2xl font-semibold text-blue-600">
-                      {formatCurrency(discount || afterTaxAmount)}
-                    </span>
-                  </div>
-                </div>
-
-                <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-purple-500 rounded-full" />
-                      <span>补充说明</span>
-                    </span>
-                  }
-                  bordered={false}
-                >
-                  <Form.Item name="description" className="mb-0">
-                    <TextArea
-                      rows={4}
-                      placeholder="请输入补充说明信息"
-                      className="rounded-md hover:border-purple-400 focus:border-purple-500"
-                    />
-                  </Form.Item>
-                </Card>
-              </>
-            )}
-          </Form.List>
+          <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
+              type="quotation"
+              form={form}
+              isView={isView}
+              formValues={formValues}
+              currentCurrency={currentCurrency}
+            />
+          </Card>
         </Form>
       </Card>
-      <Modal
-        title={
-          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
-            选择小节模版
-          </h3>
-        }
-        open={templateModalVisible}
-        onCancel={() => setTemplateModalVisible(false)}
-        footer={null}
-        width={800}
-        className="dark:bg-gray-800"
-        closeIcon={
-          <CloseOutlined className="text-gray-500 dark:text-gray-400" />
-        }
-      >
-        {renderTemplateModalContent()}
-      </Modal>
+     
     </div>
   );
 };
diff --git a/src/pages/company/quotation/index.jsx b/src/pages/company/quotation/index.jsx
index 33a42c7..e64eb6e 100644
--- a/src/pages/company/quotation/index.jsx
+++ b/src/pages/company/quotation/index.jsx
@@ -354,7 +354,8 @@ const QuotationPage = () => {
             <AppstoreOutlined /> 使用选中模板
           </Button>,
         ]}
-        width={800}
+        width={900}
+        className="template-modal dark:bg-gray-800"
       >
         {loading ? (
           <div className="flex justify-center items-center h-[400px]">
@@ -363,63 +364,74 @@ const QuotationPage = () => {
         ) : templates.length === 0 ? (
           <Empty description="暂无可用模板" />
         ) : (
-          <div className="max-h-[600px] overflow-y-auto px-1">
+          <div className="max-h-[600px] overflow-y-auto px-2">
             {getTemplatesByCategory().map((group, groupIndex) => (
-              <div key={groupIndex} className="mb-6 last:mb-2">
-                <div className="flex items-center gap-2 mb-3">
-                  <div className="h-6 w-1 bg-blue-500 rounded-full"></div>
-                  <h3 className="text-base font-medium text-gray-700">
+              <div key={groupIndex} className="mb-8 last:mb-2">
+                <div className="flex items-center gap-3 mb-4">
+                  <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
                     {group.name}
-                    <span className="ml-2 text-sm text-gray-400 font-normal">
+                    <span className="ml-2 text-sm text-gray-500 dark:text-gray-400">
                       ({group.templates.length})
                     </span>
                   </h3>
                 </div>
 
-                <div className="grid grid-cols-3 gap-3">
+                <div className="grid grid-cols-3 gap-4">
                   {group.templates.map(template => (
                     <div
                       key={template.id}
-                      className={`
-                        p-3 border rounded-lg cursor-pointer transition-all
-                        ${selectedTemplateId === template.id
-                          ? 'border-blue-500 bg-blue-50/50'
-                          : 'border-gray-200 hover:border-blue-300 hover:bg-gray-50/50'
-                        }
-                      `}
                       onClick={() => handleTemplateSelect(template.id)}
+                      className={`
+                        relative p-4 rounded-xl cursor-pointer transition-all duration-200
+                        ${
+                          selectedTemplateId === template.id
+                            ? 'ring-2 ring-blue-500 bg-blue-50/40 dark:bg-blue-900/40'
+                            : 'hover:bg-gray-50 dark:hover:bg-gray-700/50 border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md'
+                        }
+                        dark:bg-gray-800
+                      `}
                     >
-                      <div className="flex justify-between items-start gap-2 mb-2">
+                      <div className="flex justify-between items-start gap-3 mb-3">
                         <div className="flex-1 min-w-0">
-                          <h4 className="font-medium text-gray-800 truncate">
+                          <h4 className="text-base font-medium text-gray-900 dark:text-gray-100 truncate">
                             {template.attributes.templateName}
                           </h4>
-                          <p className="text-xs text-gray-500 mt-1 line-clamp-1">
+                          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1 line-clamp-2">
                             {template.attributes.description || '暂无描述'}
                           </p>
                         </div>
-                        <span className="text-red-500 font-medium whitespace-nowrap text-sm">
+                        <div className="text-blue-600 dark:text-blue-400 font-medium whitespace-nowrap">
                           ¥{template.attributes.totalAmount?.toLocaleString()}
-                        </span>
+                        </div>
                       </div>
 
-                      <div className="space-y-1">
+                      <div className="space-y-2">
                         {template.attributes.sections.map((section, index) => (
                           <div
                             key={index}
-                            className="bg-white/80 px-2 py-1 rounded text-xs border border-gray-100"
+                            className="bg-white dark:bg-gray-700 rounded-lg p-2.5 text-sm border border-gray-100 dark:border-gray-600"
                           >
                             <div className="flex justify-between items-center">
-                              <span className="font-medium text-blue-600 truncate flex-1">
+                              <span className="font-medium text-gray-700 dark:text-gray-200 truncate flex-1">
                                 {section.sectionName}
                               </span>
-                              <span className="text-gray-400 ml-1">
+                              <span className="text-gray-500 dark:text-gray-400 ml-2 text-xs">
                                 {section.items.length}项
                               </span>
                             </div>
                           </div>
                         ))}
                       </div>
+
+                      {selectedTemplateId === template.id && (
+                        <div className="absolute top-3 right-3">
+                          <div className="w-5 h-5 bg-blue-500 dark:bg-blue-600 rounded-full flex items-center justify-center">
+                            <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
+                              <path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" />
+                            </svg>
+                          </div>
+                        </div>
+                      )}
                     </div>
                   ))}
                 </div>
diff --git a/src/pages/company/service/detail/components/QuotationTemplate.jsx b/src/pages/company/service/detail/components/QuotationTemplate.jsx
index 95172b7..52f48ce 100644
--- a/src/pages/company/service/detail/components/QuotationTemplate.jsx
+++ b/src/pages/company/service/detail/components/QuotationTemplate.jsx
@@ -31,7 +31,6 @@ const QuotationTemplate = ({ id, isView, onCancel,isEdit }) => {
           'attributes->>template_type': { eq: TYPE }
         }
       });
-      console.log(data,'data');
       
       if (data?.[0]) {
         const formData = {
diff --git a/src/pages/company/service/detail/index.jsx b/src/pages/company/service/detail/index.jsx
index 23b2dfb..81d37ed 100644
--- a/src/pages/company/service/detail/index.jsx
+++ b/src/pages/company/service/detail/index.jsx
@@ -38,7 +38,7 @@ const ServiceForm = () => {
   }
 
   return (
-    <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">
+    <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/itemsManange/index.jsx b/src/pages/company/service/itemsManange/index.jsx
index d935772..8047102 100644
--- a/src/pages/company/service/itemsManange/index.jsx
+++ b/src/pages/company/service/itemsManange/index.jsx
@@ -42,23 +42,26 @@ const ResourceManagement = () => {
         onChange={setActiveType}
         type="card"
         className="bg-white rounded-lg shadow-sm"
-        items={TEMPLATE_TYPES.map(type => ({
-          key: type.key,
-          label: (
-            <span className="flex items-center gap-2">
-              {type.icon}
-              <span>{type.label}</span>
-            </span>
-          ),
-          children: (
-            <div className="p-6">
-              <Card>
-                <Classify typeList={filterOption} activeType={activeType} setActiveType={setActiveType} />
-                <Unit typeList={filterOption} activeType={activeType} />
-              </Card>
-            </div>
-          )
-        }))}
+        items={TEMPLATE_TYPES.map(type => {
+          return ({
+            key: type.key,
+            label: (
+              <span className="flex items-center gap-2">
+                {type.icon}
+                <span>{type.label}</span>
+              </span>
+            ),
+            children: (
+              <div className="p-6">
+                <Card>
+                  <Classify typeList={filterOption} activeType={activeType} setActiveType={setActiveType} />
+                  <Unit typeList={filterOption} activeType={activeType} />
+                  <Sections typeList={filterOption} activeType={activeType} />
+                </Card>
+              </div>
+            )
+          });
+        })}
       />
 
      
diff --git a/src/pages/company/service/itemsManange/sections/index.jsx b/src/pages/company/service/itemsManange/sections/index.jsx
index 0ec1d74..64afcaf 100644
--- a/src/pages/company/service/itemsManange/sections/index.jsx
+++ b/src/pages/company/service/itemsManange/sections/index.jsx
@@ -1,127 +1,127 @@
 import React, { useState, useEffect } from 'react';
-import { Table, Button, Drawer, Modal, Form, Input, InputNumber, Space, message, Popconfirm, Select } from 'antd';
-import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
-import { supabase } from '@/config/supabase';
+import { 
+  Table, 
+  Button, 
+  Form, 
+  Input, 
+  Space, 
+  message, 
+  Popconfirm, 
+  Select,
+  Segmented,
+  InputNumber,
+  Card,
+  Typography
+} from 'antd';
+import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
+import { supabaseService } from '@/hooks/supabaseService';
+import { v4 as uuidv4 } from 'uuid';
 
-const SectionManagement = () => {
+const { Text } = Typography;
+
+const SectionsManagement = ({ activeType = 'quotation', typeList }) => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [drawerVisible, setDrawerVisible] = useState(false);
-  const [modalVisible, setModalVisible] = useState(false);
-  const [editingRecord, setEditingRecord] = useState(null);
+  const [editingKey, setEditingKey] = useState('');
   const [form] = Form.useForm();
-  const [units, setUnits] = useState([]);
+  const [filterType, setFilterType] = useState('all');
 
-  // 获取子模块数据
-  const fetchSections = async () => {
+  const fetchSections = async (type = activeType, filterTypeValue = filterType) => {
     setLoading(true);
     try {
-      const { data: sections, error } = await supabase
-        .from('resources')
-        .select('*')
-        .eq('type', 'sections');
+      let filterCondition;
+      
+      switch (filterTypeValue) {
+        case 'current':
+          filterCondition = { eq: type };
+          break;
+        default: 
+          filterCondition = { eq: type };
+      }
 
-      if (error) throw error;
+      const { data: sections } = await supabaseService.select('resources', {
+        filter: {
+          'type': { eq: 'sections' },
+          'attributes->>template_type': filterCondition
+        },
+        order: {
+          column: 'created_at',
+          ascending: false
+        }
+      });
+      
       setData(sections || []);
     } catch (error) {
-      message.error('获取子模块数据失败');
+      message.error('获取模块数据失败');
       console.error(error);
     } finally {
       setLoading(false);
     }
   };
 
-  // 获取单位数据
-  const fetchUnits = async () => {
-    try {
-      const { data: unitsData, error } = await supabase
-        .from('resources')
-        .select('*')
-        .eq('type', 'units')
-        .order('created_at', { ascending: false });
-
-      if (error) throw error;
-      setUnits(unitsData || []);
-    } catch (error) {
-      message.error('获取单位数据失败');
-      console.error(error);
-    }
-  };
-
   useEffect(() => {
-    if (drawerVisible) {
-      fetchSections();
-    }
-    fetchUnits();
-  }, [drawerVisible]);
+    fetchSections(activeType, filterType);
+  }, [activeType]);
 
-  // 打开新增/编辑模态框
-  const showModal = async (record = null) => {
-    setModalVisible(true);
-    setEditingRecord(record);
-    
-    if (record) {
-      try {
-        const { data: section, error } = await supabase
-          .from('resources')
-          .select('*')
-          .eq('id', record.id)
-          .single();
-
-        if (error) throw error;
-
-        form.setFieldsValue({
-          name: section.attributes.name,
-          items: section.attributes.items
-        });
-      } catch (error) {
-        message.error('获取子模块详情失败');
-        console.error(error);
-      }
-    } else {
-      form.setFieldsValue({
+  const handleAdd = () => {
+    const newData = {
+      id: Date.now().toString(),
+      attributes: {
         name: '',
-        items: [{ name: '', description: '', price: 0, quantity: 1, unit: '' }]
-      });
-    }
+        template_type: activeType,
+        items: [{
+          key: uuidv4(),
+          name: '',
+          description: '',
+          quantity: 1,
+          price: 0,
+          unit: ''
+        }]
+      },
+      isNew: true
+    };
+    setData([newData, ...data]);
+    setEditingKey(newData.id);
+    form.setFieldsValue(newData.attributes);
   };
 
-  // 保存子模块数据
-  const handleSave = async (values) => {
+  const handleSave = async (record) => {
     try {
-      if (editingRecord) {
-        // 更新
-        const { error } = await supabase
-          .from('resources')
-          .update({
+      const values = await form.validateFields();
+      const items = form.getFieldValue(['items']) || [];
+      
+      // 验证items数组
+      if (!items.length || !items.some(item => item.name)) {
+        message.error('请至少添加一个有效的服务项目');
+        return;
+      }
+
+      if (record.isNew) {
+        await supabaseService.insert('resources', {
+          type: 'sections',
+          attributes: {
+            name: values.name,
+            template_type: activeType,
+            items: items.filter(item => item.name), // 只保存有名称的项目
+          },
+          schema_version: 1
+        });
+      } else {
+        await supabaseService.update('resources',
+          { id: record.id },
+          {
             attributes: {
               name: values.name,
-              items: values.items
+              template_type: activeType,
+              items: items.filter(item => item.name),
             },
             updated_at: new Date().toISOString()
-          })
-          .eq('id', editingRecord.id);
-
-        if (error) throw error;
-      } else {
-        // 新增
-        const { error } = await supabase
-          .from('resources')
-          .insert([{
-            type: 'sections',
-            attributes: {
-              name: values.name,
-              items: values.items
-            },
-            schema_version: 1
-          }]);
-
-        if (error) throw error;
+          }
+        );
       }
 
       message.success('保存成功');
-      setModalVisible(false);
-      form.resetFields();
+      setEditingKey('');
       fetchSections();
     } catch (error) {
       message.error('保存失败');
@@ -129,15 +129,9 @@ const SectionManagement = () => {
     }
   };
 
-  // 删除子模块
-  const handleDelete = async (id) => {
+  const handleDelete = async (record) => {
     try {
-      const { error } = await supabase
-        .from('resources')
-        .delete()
-        .eq('id', id);
-
-      if (error) throw error;
+      await supabaseService.delete('resources', { id: record.id });
       message.success('删除成功');
       fetchSections();
     } catch (error) {
@@ -146,290 +140,226 @@ const SectionManagement = () => {
     }
   };
 
-  const drawerColumns = [
+  const columns = [
     {
-      title: '项目名称',
-      dataIndex: 'name',
-    },
-    {
-      title: '描述',
-      dataIndex: 'description',
-    },
-    {
-      title: '单价',
-      dataIndex: 'price',
-      render: (price) => `¥${price}`
-    },
-    {
-      title: '数量',
-      dataIndex: 'quantity',
-    },
-    {
-      title: '单位',
-      dataIndex: 'unit',
-    }
-  ];
-
-  // 添加模态框内表格列定义
-  const modalColumns = [
-    {
-      title: '项目名称',
-      dataIndex: 'name',
-      render: (_, __, index) => (
-        <Form.Item
-          name={[index, 'name']}
-          style={{ margin: 0 }}
-        >
-          <Input placeholder="项目名称" />
-        </Form.Item>
-      )
-    },
-    {
-      title: '描述',
-      dataIndex: 'description',
-      render: (_, __, index) => (
-        <Form.Item
-          name={[index, 'description']}
-          style={{ margin: 0 }}
-        >
-          <Input placeholder="描述" />
-        </Form.Item>
-      )
-    },
-    {
-      title: '单价',
-      dataIndex: 'price',
-      render: (_, __, index) => (
-        <Form.Item
-          name={[index, 'price']}
-          rules={[{ required: true, message: '请输入单价!' }]}
-          style={{ margin: 0 }}
-        >
-          <InputNumber
-            min={0}
-            placeholder="单价"
-            className="w-full"
-          />
-        </Form.Item>
-      )
-    },
-    {
-      title: '数量',
-      dataIndex: 'quantity',
-      render: (_, __, index) => (
-        <Form.Item
-          name={[index, 'quantity']}
-          rules={[{ required: true, message: '请输入数量!' }]}
-          style={{ margin: 0 }}
-        >
-          <InputNumber
-            min={1}
-            placeholder="数量"
-            className="w-full"
-          />
-        </Form.Item>
-      )
-    },
-    {
-      title: '单位',
-      dataIndex: 'unit',
-      render: (_, __, index) => (
-        <Form.Item
-          name={[index, 'unit']}
-          rules={[{ required: true, message: '请选择或输入单位!' }]}
-          style={{ margin: 0 }}
-        >
-          <Select
-            placeholder="请选择或输入单位"
-            className="w-full"
-            showSearch
-            allowClear
-            options={units.map(unit => ({
-              label: unit.attributes.name,
-              value: unit.attributes.name
-            }))}
-            filterOption={(input, option) =>
-              (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
-            }
-          />
-        </Form.Item>
-      )
-    },
-    {
-      title: '操作',
-      render: (_, __, index, { remove }) => (
-        <Button
-          type="link"
-          danger
-          icon={<DeleteOutlined />}
-          onClick={() => remove(index)}
-        />
-      )
-    }
-  ];
-
-  return (
-    <div>
-      <Button
-        type="primary"
-        icon={<PlusOutlined />}
-        onClick={() => setDrawerVisible(true)}
-        className="flex items-center"
-      >
-        子模块管理
-      </Button>
-
-      <Drawer
-        title={
-          <span className="text-lg font-medium text-gray-800 dark:text-gray-200">
-            子模块管理
-          </span>
-        }
-        placement="right"
-        width={1000}
-        onClose={() => setDrawerVisible(false)}
-        open={drawerVisible}
-        className="dark:bg-gray-800"
-      >
-        <div className="flex flex-col h-full">
-          <Button
-            type="primary"
-            icon={<PlusOutlined />}
-            onClick={() => showModal()}
-            className="mb-4 w-32 flex items-center justify-center"
-          >
-            新增子模块
-          </Button>
-
-          <div className="space-y-6">
-            {data.map((section) => (
-              <div 
-                key={section.id} 
-                className="bg-white rounded-lg shadow-sm dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
-              >
-                <div className="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
-                  <h3 className="text-lg font-medium text-gray-800 dark:text-gray-200">
-                    {section.attributes.name}
-                  </h3>
-                  <Space>
-                    <Button
-                      type="link"
-                      icon={<EditOutlined />}
-                      onClick={() => showModal(section)}
-                      className="text-blue-600 hover:text-blue-500"
-                    >
-                      编辑
-                    </Button>
-                    <Popconfirm
-                      title="确定要删除吗？"
-                      onConfirm={() => handleDelete(section.id)}
-                      okButtonProps={{ 
-                        className: "bg-red-500 hover:bg-red-600 border-red-500" 
-                      }}
-                    >
-                      <Button
-                        type="link"
-                        danger
-                        icon={<DeleteOutlined />}
-                        className="text-red-600 hover:text-red-500"
-                      />
-                    </Popconfirm>
-                  </Space>
-                </div>
-                <div className="p-4">
-                  <Table
-                    scroll={{ x: true }}
-                    dataSource={section.attributes.items}
-                    columns={drawerColumns}
-                    pagination={false}
-                    rowKey={(record, index) => `${section.id}-${index}`}
-                    className="border dark:border-gray-700 rounded-lg"
-                    rowClassName="hover:bg-gray-50 dark:hover:bg-gray-700/50"
-                    size="small"
-                  />
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </Drawer>
-
-      <Modal
-        title={`${editingRecord ? '编辑' : '新增'}子模块`}
-        open={modalVisible}
-        onCancel={() => {
-          setModalVisible(false);
-          setEditingRecord(null);
-          form.resetFields();
-        }}
-        footer={null}
-        width={1200}
-        destroyOnClose={true}
-      >
-        <Form
-          form={form}
-          onFinish={handleSave}
-          layout="vertical"
-          className="mt-4"
-        >
+      title: '模块名称',
+      dataIndex: ['attributes', 'name'],
+      width: 200,
+      render: (text, record) => {
+        const isEditing = record.id === editingKey;
+        return isEditing ? (
           <Form.Item
             name="name"
-            label="子模块名称"
-            rules={[{ required: true, message: '请输入子模块名称!' }]}
+            style={{ margin: 0 }}
+            rules={[{ required: true, message: '请输入模块名称!' }]}
           >
-            <Input placeholder="请输入子模块名称" />
+            <Input 
+              placeholder="请输入模块名称" 
+              className="rounded-md"
+            />
           </Form.Item>
-
-          <Form.List name="items">
-            {(fields, { add, remove }) => (
-              <div className="bg-white rounded-lg border dark:bg-gray-800 dark:border-gray-700">
-                <Table
-                  dataSource={fields}
-                  columns={modalColumns.map(col => ({
-                    ...col,
-                    render: (...args) => col.render(...args, { remove })
-                  }))}
-                  pagination={false}
-                  rowKey="key"
-                  className="mb-4"
-                />
-                <div className="p-4 border-t dark:border-gray-700">
+        ) : (
+          <span className="text-gray-700 font-medium">{text}</span>
+        );
+      },
+    },
+    {
+      title: '服务项目',
+      dataIndex: ['attributes', 'items'],
+      render: (items, record) => {
+        const isEditing = record.id === editingKey;
+        
+        if (isEditing) {
+          return (
+            <Form.List name="items">
+              {(fields, { add, remove }) => (
+                <div className="space-y-2">
+                  {fields.map((field, index) => (
+                    <Card key={field.key} size="small" className="bg-gray-50">
+                      <div className="grid grid-cols-6 gap-2">
+                        <Form.Item
+                          {...field}
+                          name={[field.name, 'name']}
+                          className="col-span-2 mb-0"
+                        >
+                          <Input placeholder="项目名称" />
+                        </Form.Item>
+                        <Form.Item
+                          {...field}
+                          name={[field.name, 'unit']}
+                          className="mb-0"
+                        >
+                          <Input placeholder="单位" />
+                        </Form.Item>
+                        <Form.Item
+                          {...field}
+                          name={[field.name, 'quantity']}
+                          className="mb-0"
+                        >
+                          <InputNumber 
+                            placeholder="数量" 
+                            min={0}
+                            className="w-full" 
+                          />
+                        </Form.Item>
+                        <Form.Item
+                          {...field}
+                          name={[field.name, 'price']}
+                          className="mb-0"
+                        >
+                          <InputNumber 
+                            placeholder="单价" 
+                            min={0}
+                            className="w-full"
+                          />
+                        </Form.Item>
+                        <Button
+                          type="text"
+                          danger
+                          icon={<DeleteOutlined />}
+                          onClick={() => remove(field.name)}
+                          className="flex items-center justify-center"
+                        />
+                      </div>
+                    </Card>
+                  ))}
                   <Button
                     type="dashed"
                     onClick={() => add({
+                      key: uuidv4(),
                       name: '',
-                      description: '',
-                      price: 0,
+                      unit: '',
                       quantity: 1,
-                      unit: ''
+                      price: 0
                     })}
-                    icon={<PlusOutlined />}
-                    className="w-full hover:border-blue-400 hover:text-blue-500 
-                      dark:border-gray-600 dark:text-gray-400 dark:hover:text-blue-400"
+                    className="w-full"
                   >
-                    添加项目
+                    <PlusOutlined /> 添加服务项目
                   </Button>
                 </div>
-              </div>
-            )}
-          </Form.List>
+              )}
+            </Form.List>
+          );
+        }
 
-          <div className="flex justify-end gap-4 mt-6">
-            <Button onClick={() => {
-              setModalVisible(false);
-              setEditingRecord(null);
-              form.resetFields();
-            }}>
-              取消
-            </Button>
-            <Button type="primary" htmlType="submit">
+        return (
+          <div className="space-y-1">
+            {(items || []).map((item, index) => (
+              <div key={index} className="flex justify-between text-sm">
+                <span className="text-gray-600">{item.name}</span>
+                <span className="text-gray-500">
+                  {item.quantity} {item.unit} × ¥{item.price}
+                </span>
+              </div>
+            ))}
+          </div>
+        );
+      },
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      render: (_, record) => {
+        const isEditing = record.id === editingKey;
+        return isEditing ? (
+          <Space>
+            <Button
+              type="link"
+              className="text-green-600 hover:text-green-500 font-medium"
+              onClick={() => handleSave(record)}
+            >
               保存
             </Button>
+            <Button
+              type="link"
+              className="text-gray-600 hover:text-gray-500 font-medium"
+              onClick={() => {
+                setEditingKey('');
+                if (record.isNew) {
+                  setData(data.filter(item => item.id !== record.id));
+                }
+              }}
+            >
+              取消
+            </Button>
+          </Space>
+        ) : (
+          <Space>
+            <Button
+              type="link"
+              className="text-blue-600 hover:text-blue-500 font-medium"
+              disabled={editingKey !== ''}
+              onClick={() => {
+                setEditingKey(record.id);
+                form.setFieldsValue({
+                  name: record.attributes.name,
+                  items: record.attributes.items
+                });
+              }}
+            >
+              编辑
+            </Button>
+            <Popconfirm
+              title="确认删除"
+              description="确定要删除这个模块吗？"
+              onConfirm={() => handleDelete(record)}
+              okText="确定"
+              cancelText="取消"
+              okButtonProps={{
+                className: "bg-red-500 hover:bg-red-600 border-red-500"
+              }}
+            >
+              <Button
+                type="link"
+                className="text-red-600 hover:text-red-500 font-medium"
+                disabled={editingKey !== ''}
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </Space>
+        );
+      },
+    },
+  ];
+
+  return (
+    <div className="p-6 bg-gray-50">
+      <div className="bg-white rounded-lg shadow-sm mb-6 p-4">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Button
+              type="primary"
+              onClick={handleAdd}
+              icon={<PlusOutlined />}
+              className="bg-blue-600 hover:bg-blue-700 border-0 shadow-sm h-10"
+            >
+              新增模块
+            </Button>
           </div>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow-sm">
+        <Form form={form}>
+          <Table
+            scroll={{ x: 1200 }}
+            columns={columns}
+            dataSource={data}
+            rowKey="id"
+            loading={loading}
+            pagination={{
+              pageSize: 10,
+              showTotal: (total) => `共 ${total} 条`,
+              className: "px-4"
+            }}
+            className="rounded-lg"
+          />
         </Form>
-      </Modal>
+      </div>
     </div>
   );
 };
 
-export default SectionManagement;
\ No newline at end of file
+export default SectionsManagement;
\ No newline at end of file
diff --git a/src/pages/resource/team/components/TeamTable.jsx b/src/pages/resource/team/components/TeamTable.jsx
index 3771311..0efd597 100644
--- a/src/pages/resource/team/components/TeamTable.jsx
+++ b/src/pages/resource/team/components/TeamTable.jsx
@@ -79,7 +79,6 @@ export const TeamTable = ({ tableLoading,pagination,dataSource, onTableChange,on
     },
     {
       title: '归属',
-      dataIndex: 'type',
       dataIndex: ["attributes", "type"],
       key: "type",
     },