Merge branch 'main' of github.com:xuqssq/uppmkt-admin

pnpm-lock.yaml

@@ -59,6 +59,9 @@ importers:
       styled-components:
         specifier: ^6.1.0
         version: 6.1.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      uuid:
+        specifier: ^11.0.3
+        version: 11.0.3
     devDependencies:
       '@types/react':
         specifier: ^18.2.15
@@ -2420,6 +2423,10 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  uuid@11.0.3:
+    resolution: {integrity: sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==}
+    hasBin: true
+
   victory-vendor@36.9.2:
     resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
 
@@ -5318,6 +5325,8 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  uuid@11.0.3: {}
+
   victory-vendor@36.9.2:
     dependencies:
       '@types/d3-array': 3.2.1

src/App.jsx

@@ -26,6 +26,33 @@ const ThemedApp = () => {
             ? "rgba(255, 255, 255, 0.45)"
             : "rgba(0, 0, 0, 0.45)",
         },
+        components: {
+          // 为所有支持 variant 的组件设置 filled 模式
+          Form: {
+            variant: 'filled',
+          },
+          Input: {
+            variant: 'filled',
+          },
+          Select: {
+            variant: 'filled',
+          },
+          TreeSelect: {
+            variant: 'filled',
+          },
+          DatePicker: {
+            variant: 'filled',
+          },
+          TimePicker: {
+            variant: 'filled',
+          },
+          Cascader: {
+            variant: 'filled',
+          },
+          AutoComplete: {
+            variant: 'filled',
+          },
+        }
       }}
     >
       <div className={isDarkMode ? "dark" : ""}>

src/contexts/AuthContext.jsx

@@ -103,7 +103,6 @@ export const AuthProvider = ({ children }) => {
         },
       });
 
-      console.log(data, error, "data");
       if (error) {
         message.error(error.message || "Google 登录失败,请稍后重试");
         return;

src/pages/Profile.jsx

@@ -1,24 +0,0 @@
-import { Card, Avatar, Typography, Descriptions } from 'antd';
-import { UserOutlined } from '@ant-design/icons';
-
-const { Title } = Typography;
-
-const Profile = () => {
-  return (
-    <Card>
-      <div style={{ textAlign: 'center', marginBottom: '24px' }}>
-        <Avatar size={64} icon={<UserOutlined />} />
-        <Title level={3} style={{ marginTop: '16px' }}>John Doe</Title>
-      </div>
-      <Descriptions bordered>
-        <Descriptions.Item label="Username">johndoe</Descriptions.Item>
-        <Descriptions.Item label="Email">john@example.com</Descriptions.Item>
-        <Descriptions.Item label="Role">Administrator</Descriptions.Item>
-        <Descriptions.Item label="Status">Active</Descriptions.Item>
-        <Descriptions.Item label="Join Date">2023-10-25</Descriptions.Item>
-      </Descriptions>
-    </Card>
-  );
-};
-
-export default Profile;

src/pages/company/quotation/index.jsx

@@ -1,18 +1,28 @@
 import React, { useEffect, useState } from 'react';
-import { Card, Table, Button, message, Popconfirm, Tag, Space, Tooltip } from 'antd';
-import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined,CopyOutlined } from '@ant-design/icons';
+import { Card, Table, Button, message, Popconfirm, Tag, Space, Spin, Modal, Empty, Select, Typography, Statistic, Divider } from 'antd';
+import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined,CopyOutlined, FileAddOutlined, AppstoreOutlined } from '@ant-design/icons';
 import { useResources } from '@/hooks/resource/useResource';
 import { useNavigate } from 'react-router-dom';
-import { formatCurrency } from '@/utils/format'; // 假设你有这个工具函数，如果没有我会提供
-
+import {supabase}from '@/config/supabase'
+const CURRENCY_SYMBOLS = {
+  CNY: "¥",
+  TWD: "NT$",
+  USD: "$",
+};
 const QuotationPage = () => {
   const navigate = useNavigate();
   const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });
   const [sorter, setSorter] = useState({ field: 'created_at', order: 'descend' });
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [selectedTemplateId, setSelectedTemplateId] = useState(null);
+  const [templates, setTemplates] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState('all');
+  const [categories, setCategories] = useState([]);
 
   const {
     resources: quotations,
-    loading,
+    loading: loadingQuotations,
     total,
     fetchResources: fetchQuotations,
     deleteResource: deleteQuotation
@@ -43,6 +53,68 @@ const QuotationPage = () => {
     }
   };
 
+  const fetchTemplates = async () => {
+    try {
+      setLoading(true);
+      const { data: services, error } = await supabase
+        .from("resources")
+        .select("*")
+        .eq("type", "serviceTemplate")
+        .order("created_at", { ascending: false });
+
+      if (error) throw error;
+      setTemplates(services);
+    } catch (error) {
+      console.error("获取服务模板失败:", error);
+      message.error("获取服务模板失败");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isModalVisible) {
+      fetchTemplates();
+    }
+  }, [isModalVisible]);
+
+  useEffect(() => {
+    if (templates.length > 0) {
+      setCategories(getAllCategories(templates));
+    }
+  }, [templates]);
+
+  const handleTemplateSelect = (templateId) => {
+    setSelectedTemplateId(templateId);
+  };
+
+  const handleConfirm = () => {
+    if (selectedTemplateId) {
+      navigate(`/company/quotaInfo?templateId=${selectedTemplateId}`);
+    } else {
+      navigate('/company/quotaInfo');
+    }
+    setIsModalVisible(false);
+    setSelectedTemplateId(null);
+  };
+
+  const getAllCategories = (templates) => {
+    const categorySet = new Set();
+    templates.forEach(template => {
+      template.attributes.category?.forEach(cat => {
+        categorySet.add(JSON.stringify(cat));
+      });
+    });
+    return Array.from(categorySet).map(cat => JSON.parse(cat));
+  };
+
+  const getFilteredTemplates = () => {
+    if (selectedCategory === 'all') return templates;
+    return templates.filter(template => 
+      template.attributes.category?.some(cat => cat.id === selectedCategory)
+    );
+  };
+
   const columns = [
     {
       title: '报价单名称',
@@ -52,24 +124,59 @@ const QuotationPage = () => {
     },
     {
       title: '客户信息',
-      dataIndex: ['attributes', 'customerName'],
-      key: 'customerName',
-      render: (customerName,record) => (
-        <Tag color="blue" className='cursor-pointer' onClick={() => {
-          navigate(`/company/customerInfo/${record.attributes.customerId}`)
-        }}>{customerName}</Tag>
+      dataIndex: ['attributes', 'customers'],
+      key: 'customers',
+      render: (customers,record) => (
+        <Space>
+        {customers?.map(customer => (
+          <Tag 
+            key={customer.id}
+            color="blue" 
+            className='cursor-pointer' 
+            onClick={() => {
+              navigate(`/company/customerInfo/${customer.id}`)
+            }}
+          >
+            {customer.name}
+          </Tag>
+        ))}
+      </Space>
       ),
     },
     {
       title: '报价总额',
-      dataIndex: ['attributes', 'totalAmount'],
+      dataIndex: ['attributes'],
       key: 'totalAmount',
       align: 'right',
-      render: (amount) => (
-        <span style={{ color: '#f50', fontWeight: 'bold' }}>
-          ¥{amount?.toLocaleString()}
-        </span>
-      ),
+      width: 200,
+      render: (attributes) => {
+        // 获取货币符号
+        const currencySymbol = CURRENCY_SYMBOLS[attributes.currency] || '¥';
+        
+        return (
+          <div className="space-y-1">
+            <div className="flex justify-between items-center text-sm">
+              <Typography.Text type="secondary" style={{ fontSize: '12px' }}>
+                税前：{currencySymbol}{attributes.beforeTaxAmount?.toLocaleString()}
+              </Typography.Text>
+            </div>
+            <div className="flex justify-between items-center">
+              <Statistic 
+                value={attributes.afterTaxAmount} 
+                prefix={currencySymbol}
+                precision={2}
+                valueStyle={{ 
+                  fontSize: '16px',
+                  fontWeight: 600,
+                  color: '#1890ff'
+                }}
+                className="!mb-0"
+              />
+            </div>
+           
+          </div>
+        );
+      },
     },
     {
       title: '创建日期',
@@ -135,40 +242,164 @@ const QuotationPage = () => {
     },
   ];
 
+  const getTemplatesByCategory = () => {
+    const groups = new Map();
+    
+    // 添加未分类组
+    groups.set('uncategorized', {
+      name: '未分类',
+      templates: templates.filter(t => !t.attributes.category || t.attributes.category.length === 0)
+    });
+
+    // 按分类分组
+    templates.forEach(template => {
+      if (template.attributes.category) {
+        template.attributes.category.forEach(cat => {
+          if (!groups.has(cat.id)) {
+            groups.set(cat.id, {
+              name: cat.name,
+              templates: []
+            });
+          }
+          groups.get(cat.id).templates.push(template);
+        });
+      }
+    });
+
+    return Array.from(groups.values()).filter(group => group.templates.length > 0);
+  };
+
   return (
-    <Card
-      title={
-        <Space>
-          <span>报价单管理</span>
-          <Tag color="blue">{total} 个报价单</Tag>
-        </Space>
-      }
-      className='h-full w-full overflow-auto'
-      extra={
-        <Button
-          type="primary"
-          icon={<PlusOutlined />}
-          onClick={() => navigate('/company/quotaInfo')}
-        >
-          新增报价单
-        </Button>
-      }
-    >
-      <Table
-        columns={columns}
-        dataSource={quotations}
-        rowKey="id"
-        loading={loading}
-        onChange={handleTableChange}
-        pagination={{
-          ...pagination,
-          total,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          showTotal: (total) => `共 ${total} 条记录`,
+    <>
+      <Card
+        title={
+          <Space>
+            <span>报价单管理</span>
+            <Tag color="blue">{total} 个报价单</Tag>
+          </Space>
+        }
+        className='h-full w-full overflow-auto'
+        extra={
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => setIsModalVisible(true)}
+          >
+            新增报价单
+          </Button>
+        }
+      >
+        <Table
+          columns={columns}
+          dataSource={quotations}
+          rowKey="id"
+          loading={loadingQuotations}
+          onChange={handleTableChange}
+          pagination={{
+            ...pagination,
+            total,
+            showSizeChanger: true,
+            showQuickJumper: true,
+            showTotal: (total) => `共 ${total} 条记录`,
+          }}
+        />
+      </Card>
+
+      <Modal
+        title="选择报价单模板"
+        open={isModalVisible}
+        onCancel={() => {
+          setIsModalVisible(false);
+          setSelectedTemplateId(null);
         }}
-      />
-    </Card>
+        footer={[
+          <Button key="custom" onClick={() => handleConfirm()}>
+            <FileAddOutlined /> 自定义创建
+          </Button>,
+          <Button 
+            key="submit" 
+            type="primary"
+            disabled={!selectedTemplateId}
+            onClick={handleConfirm}
+          >
+            <AppstoreOutlined /> 使用选中模板
+          </Button>,
+        ]}
+        width={800}
+      >
+        {loading ? (
+          <div className="flex justify-center items-center h-[400px]">
+            <Spin size="large" />
+          </div>
+        ) : templates.length === 0 ? (
+          <Empty description="暂无可用模板" />
+        ) : (
+          <div className="max-h-[600px] overflow-y-auto px-1">
+            {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">
+                    {group.name}
+                    <span className="ml-2 text-sm text-gray-400 font-normal">
+                      ({group.templates.length})
+                    </span>
+                  </h3>
+                </div>
+
+                <div className="grid grid-cols-3 gap-3">
+                  {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)}
+                    >
+                      <div className="flex justify-between items-start gap-2 mb-2">
+                        <div className="flex-1 min-w-0">
+                          <h4 className="font-medium text-gray-800 truncate">
+                            {template.attributes.templateName}
+                          </h4>
+                          <p className="text-xs text-gray-500 mt-1 line-clamp-1">
+                            {template.attributes.description || '暂无描述'}
+                          </p>
+                        </div>
+                        <span className="text-red-500 font-medium whitespace-nowrap text-sm">
+                          ¥{template.attributes.totalAmount?.toLocaleString()}
+                        </span>
+                      </div>
+
+                      <div className="space-y-1">
+                        {template.attributes.sections.map((section, index) => (
+                          <div 
+                            key={index} 
+                            className="bg-white/80 px-2 py-1 rounded text-xs border border-gray-100"
+                          >
+                            <div className="flex justify-between items-center">
+                              <span className="font-medium text-blue-600 truncate flex-1">
+                                {section.sectionName}
+                              </span>
+                              <span className="text-gray-400 ml-1">
+                                {section.items.length}项
+                              </span>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </Modal>
+    </>
   );
 };
 

src/pages/company/service/classify/index.jsx

@@ -0,0 +1,241 @@
+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';
+
+const CategoryDrawer = () => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [editingKey, setEditingKey] = useState('');
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const [form] = Form.useForm();
+
+  // 获取分类数据
+  const fetchCategories = async () => {
+    setLoading(true);
+    try {
+      const { data: categories, error } = await supabase
+        .from('resources')
+        .select('*')
+        .eq('type', 'categories')
+        .order('created_at', { ascending: false });
+
+      if (error) throw error;
+      setData(categories || []);
+    } catch (error) {
+      message.error('获取分类数据失败');
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (drawerVisible) {
+      fetchCategories();
+    }
+  }, [drawerVisible]);
+
+  // 新增分类
+  const handleAdd = () => {
+    const newData = {
+      id: Date.now().toString(),
+      attributes: { name: '' },
+      isNew: true
+    };
+    setData([newData, ...data]);
+    setEditingKey(newData.id);
+    form.setFieldsValue(newData.attributes);
+  };
+
+  // 保存分类数据
+  const handleSave = async (record) => {
+    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;
+      } else {
+        // 更新
+        const { error } = await supabase
+          .from('resources')
+          .update({
+            attributes: {
+              name: values.name
+            },
+            updated_at: new Date().toISOString()
+          })
+          .eq('id', record.id);
+
+        if (error) throw error;
+      }
+
+      message.success('保存成功');
+      setEditingKey('');
+      fetchCategories();
+    } catch (error) {
+      message.error('保存失败');
+      console.error(error);
+    }
+  };
+
+  // 删除分类
+  const handleDelete = async (record) => {
+    try {
+      const { error } = await supabase
+        .from('resources')
+        .delete()
+        .eq('id', record.id);
+
+      if (error) throw error;
+      message.success('删除成功');
+      fetchCategories();
+    } catch (error) {
+      message.error('删除失败');
+      console.error(error);
+    }
+  };
+
+  const columns = [
+    {
+      title: '分类名称',
+      dataIndex: ['attributes', 'name'],
+      width: '60%',
+      render: (text, record) => {
+        const isEditing = record.id === editingKey;
+        return isEditing ? (
+          <Form.Item
+            name="name"
+            style={{ margin: 0 }}
+            rules={[{ required: true, message: '请输入分类名称!' }]}
+          >
+            <Input placeholder="请输入分类名称" />
+          </Form.Item>
+        ) : (
+          <span className="text-gray-600">{text}</span>
+        );
+      },
+    },
+    {
+      title: '操作',
+      width: '40%',
+      render: (_, record) => {
+        const isEditing = record.id === editingKey;
+        return isEditing ? (
+          <Space>
+            <Button
+              type="link"
+              className="text-green-600 hover:text-green-500"
+              onClick={() => handleSave(record)}
+            >
+              保存
+            </Button>
+            <Button
+              type="link"
+              className="text-gray-600 hover:text-gray-500"
+              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"
+              disabled={editingKey !== ''}
+              onClick={() => {
+                setEditingKey(record.id);
+                form.setFieldsValue({
+                  name: record.attributes.name,
+                });
+              }}
+            >
+              编辑
+            </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"
+                disabled={editingKey !== ''}
+              >
+                删除
+              </Button>
+            </Popconfirm>
+          </Space>
+        );
+      },
+    },
+  ];
+
+  return (
+    <>
+      <Button 
+        type="primary" 
+        onClick={() => setDrawerVisible(true)}
+        icon={<PlusOutlined />}
+      >
+        分类管理
+      </Button>
+      
+      <Drawer
+        title="分类管理"
+        placement="right"
+        width={800}
+        onClose={() => setDrawerVisible(false)}
+        open={drawerVisible}
+        className="category-drawer"
+      >
+        <div className="p-6">
+          <Button
+            type="primary"
+            onClick={handleAdd}
+            className="mb-4"
+            icon={<PlusOutlined />}
+          >
+            新增分类
+          </Button>
+          <Form form={form}>
+            <Table
+              columns={columns}
+              dataSource={data}
+              rowKey="id"
+              loading={loading}
+              pagination={{
+                pageSize: 10,
+                showTotal: (total) => `共 ${total} 条`,
+              }}
+              className="bg-white rounded-lg shadow"
+            />
+          </Form>
+        </div>
+      </Drawer>
+    </>
+  );
+};
+
+export default CategoryDrawer;

src/pages/company/service/detail/index.jsx

@@ -9,16 +9,20 @@ import {
   Typography,
   message,
   Select,
+  Modal,
+  Divider,
+  Popconfirm,
 } from "antd";
 import {
   PlusOutlined,
   DeleteOutlined,
   ArrowLeftOutlined,
   EditOutlined,
+  CloseOutlined,
+  CheckOutlined,
 } from "@ant-design/icons";
 import { useNavigate, useParams, useLocation } from "react-router-dom";
 import { supabase } from "@/config/supabase";
-
 const { Title, Text } = Typography;
 
 const ServiceForm = () => {
@@ -34,11 +38,17 @@ const ServiceForm = () => {
     sections: [{ items: [{}] }],
     currency: "CNY"
   });
+  const [templateModalVisible, setTemplateModalVisible] = useState(false);
+  const [categories, setCategories] = useState([]);
+  const [units, setUnits] = useState([]);
+
   useEffect(() => {
     if (id) {
       fetchServiceTemplate();
     }
     fetchAvailableSections();
+    fetchCategories();
+    fetchUnits();
   }, [id]);
 
   const fetchServiceTemplate = async () => {
@@ -54,6 +64,7 @@ const ServiceForm = () => {
       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);
@@ -69,15 +80,60 @@ const ServiceForm = () => {
   const fetchAvailableSections = async () => {
     try {
       const { data: sections, error } = await supabase
-        .from("resources")
-        .select("*")
-        .eq("type", "serviceSection");
+        .from('resources')
+        .select('*')
+        .eq('type', 'sections')
+        .order('created_at', { ascending: false });
 
       if (error) throw error;
-      setAvailableSections(sections);
+      setAvailableSections(sections || []);
     } catch (error) {
-      console.error("获取服务小节失败:", error);
-      message.error("获取服务小节失败");
+      message.error('获取小节模版失败');
+      console.error(error);
+    }
+  };
+
+  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 fetchUnits = async () => {
+    try {
+      const { data: unitsData, error } = await supabase
+        .from('resources')
+        .select('*')
+        .eq('type', 'units')
+        .order('created_at', { ascending: false });
+
+      if (error) throw error;
+      
+      const formattedUnits = (unitsData || []).map(unit => ({
+        value: unit.attributes.name,
+        label: unit.attributes.name
+      }));
+      
+      setUnits(formattedUnits);
+    } catch (error) {
+      console.error('获取单位数据失败:', error);
+      message.error('获取单位数据失败');
     }
   };
 
@@ -92,14 +148,20 @@ const ServiceForm = () => {
           }, 0)
         );
       }, 0);
-
+      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: values.category || [], // 添加 category 字段
+          category: categoryData, 
           totalAmount,
         },
       };
@@ -241,6 +303,243 @@ const ServiceForm = () => {
     setEditingSectionName('');
   };
 
+  // 使用选中的模版
+  const handleUseTemplate = (template) => {
+    const currentSections = form.getFieldValue('sections') || [];
+    
+    // 确保所有必要的字段都存在
+    const newSection = {
+      sectionName: template.attributes.name,
+      items: (template.attributes.items || []).map(item => ({
+        name: item.name || '',
+        description: item.description || '',
+        price: item.price || 0,
+        quantity: item.quantity || 1,
+        unit: item.unit || '',
+      }))
+    };
+
+    const newSections = [...currentSections, newSection];
+    
+    // 更新表单值
+    form.setFieldValue('sections', newSections);
+    
+    // 更新 formValues 以触发金额计算
+    setFormValues(prev => ({
+      ...prev,
+      sections: newSections
+    }));
+    
+    setTemplateModalVisible(false);
+    message.success('套用模版成功');
+  };
+
+  // 创建自定义小节
+  const handleCreateCustom = () => {
+    const currentSections = form.getFieldValue('sections') || [];
+    const newSection = {
+      sectionName: `服务类型 ${currentSections.length + 1}`,
+      items: [{ name: '', description: '', price: 0, quantity: 1, unit: '' }]
+    };
+    const newSections = [...currentSections, newSection];
+    
+    // 更新表单值
+    form.setFieldValue('sections', newSections);
+    
+    // 更新 formValues 以触发金额计算
+    setFormValues(prev => ({
+      ...prev,
+      sections: newSections
+    }));
+    
+    setTemplateModalVisible(false);
+  };
+
+  // 修改新增小节按钮的点击事件处理
+  const handleAddSection = () => {
+    setTemplateModalVisible(true);
+    fetchAvailableSections();
+  };
+
+  // 修改移除小节的处理方法
+  const handleRemoveSection = (sectionIndex) => {
+    const currentSections = form.getFieldValue('sections') || [];
+    const newSections = currentSections.filter((_, index) => index !== sectionIndex);
+    
+    // 更新表单值
+    form.setFieldValue('sections', newSections);
+    
+    // 更新 formValues 以触发金额计算
+    setFormValues(prev => ({
+      ...prev,
+      sections: newSections
+    }));
+    
+    message.success('删除成功');
+  };
+
+  // 优化模版选择弹窗内容
+  const renderTemplateModalContent = () => (
+    <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 dark:bg-gray-800 rounded-lg shadow-sm 
+              border border-gray-200 dark:border-gray-700 hover:shadow-lg 
+              transition-all duration-300 cursor-pointer"
+            onClick={() => handleUseTemplate(section)}
+          >
+            <div className="p-6">
+              {/* 标题和项目数量 */}
+              <div className="text-center mb-4">
+                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 
+                  group-hover:text-blue-500 transition-colors">
+                  {section.attributes.name}
+                </h3>
+                <div className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+                  {section.attributes.items?.length || 0} 个项目
+                </div>
+              </div>
+
+              {/* 项目列表预览 */}
+              <div className="space-y-2 mt-4 border-t dark:border-gray-700 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 dark:text-gray-300 truncate flex-1">
+                      {item.name}
+                    </span>
+                    <span className="text-sm text-gray-500 dark:text-gray-400 ml-2">
+                      {formatCurrency(item.price)}
+                    </span>
+                  </div>
+                ))}
+                {(section.attributes.items || []).length > 3 && (
+                  <div className="text-sm text-gray-500 dark:text-gray-400 text-center">
+                    还有 {section.attributes.items.length - 3} 个项目...
+                  </div>
+                )}
+              </div>
+
+              {/* 小节总金额 */}
+              <div className="mt-4 pt-4 border-t dark:border-gray-700 flex justify-between items-center">
+                <span className="text-sm text-gray-600 dark:text-gray-300">总金额</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 className="absolute inset-0 border-2 border-transparent 
+              group-hover:border-blue-500 rounded-lg transition-colors duration-300" 
+            />
+
+            {/* 选择指示器 */}
+            <div className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 
+              transition-opacity duration-300">
+              <Button
+                type="primary"
+                size="small"
+                className="flex items-center gap-1"
+                icon={<PlusOutlined />}
+              >
+                套用
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {availableSections.length === 0 && (
+        <div className="text-center py-8">
+          <div className="text-gray-500 dark:text-gray-400">
+            暂无可用模版
+          </div>
+        </div>
+      )}
+
+      <Divider className="dark:border-gray-700" />
+
+      <div className="flex justify-center">
+        <Button
+          type="dashed"
+          icon={<PlusOutlined />}
+          onClick={handleCreateCustom}
+          className="w-1/3 border-2 hover:border-blue-400 hover:text-blue-500 
+            dark:border-gray-600 dark:text-gray-400 dark:hover:text-blue-400
+            transition-all duration-300"
+        >
+          自定义小节
+        </Button>
+      </div>
+    </div>
+  );
+
+  const renderUnitSelect = (itemField, sectionIndex, itemIndex) => {
+    const addUnit = async (unitName) => {
+      try {
+        const { error } = await supabase
+          .from('resources')
+          .insert([{
+            type: 'units',
+            attributes: {
+              name: unitName
+            },
+            schema_version: 1
+          }]);
+
+        if (error) throw error;
+        
+        message.success('新增单位成功');
+        await fetchUnits();
+        
+        // 自动选中新添加的单位
+        form.setFieldValue(['sections', sectionIndex, 'items', itemIndex, 'unit'], unitName);
+        
+      } catch (error) {
+        message.error('新增单位失败');
+        console.error(error);
+      }
+    };
+
+    return (
+      <Form.Item
+        {...itemField}
+        name={[itemField.name, "unit"]}
+        className="!mb-0"
+      >
+        <Select
+          placeholder="选择或输入单位"
+          options={units}
+          showSearch
+          allowClear
+          onSearch={(value) => {
+            // 当输入的值不在现有选项中时，显示添加选项
+            if (value && !units.find(unit => unit.value === value)) {
+              const newOption = { value, label: `添加 "${value}"` };
+              setUnits([...units, newOption]);
+            }
+          }}
+          onSelect={(value, option) => {
+            // 如果选择的是新添加的选项
+            if (option.label.startsWith('添加 "')) {
+              addUnit(value);
+            }
+          }}
+          filterOption={(input, option) =>
+            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
+          }
+        />
+      </Form.Item>
+    );
+  };
+
   return (
     <Card
       title={
@@ -313,12 +612,8 @@ const ServiceForm = () => {
                 showSearch
                 allowClear
                 mode="tags"
-                options={[
-                  { value: "VI设计", label: "VI设计" },
-                  { value: "平面设计", label: "平面设计" },
-                  { value: "网站建设", label: "网站建设" },
-                  { value: "营销推广", label: "营销推广" },
-                ]}
+                options={categories}
+                loading={loading}
               />
             </Form.Item>
             <Form.Item
@@ -340,48 +635,42 @@ const ServiceForm = () => {
           </div>
 
           <Form.List name="sections">
-            {(fields, { add: addSection, remove: removeSection }) => (
+            {(fields, { add, remove }) => (
               <>
                 <div className="space-y-6">
                   {fields.map((field, sectionIndex) => (
                     <Card
                       key={field.key}
-                      className="!border-gray-200 dark:!border-gray-700 dark:bg-gray-800 hover:shadow-md transition-shadow duration-300"
+                      className="!border-gray-200 dark:!border-gray-700 
+                        dark:bg-gray-800 hover:shadow-md transition-shadow duration-300"
                     >
                       <div className="flex items-center justify-between mb-4">
-                        <div className="flex items-center gap-2  ">
+                        <div className="flex items-center gap-2">
                           {editingSectionIndex === sectionIndex ? (
                             <div className="flex items-center gap-2">
-                            <Input
-                              placeholder="请输入小节名称"
-                              className="!w-[200px]"
-                              value={editingSectionName}
-                              onChange={e => setEditingSectionName(e.target.value)}
-                              onPressEnter={handleSectionNameSave}
-                              autoFocus
-                            />
-                            <Space className="flex items-center gap-2">
+                              <Input
+                                value={editingSectionName}
+                                onChange={(e) => setEditingSectionName(e.target.value)}
+                                onPressEnter={handleSectionNameSave}
+                                autoFocus
+                                className="w-48"
+                              />
                               <Button
-                                type="primary"
-                                size="small"
+                                type="link"
+                                icon={<CheckOutlined />}
                                 onClick={handleSectionNameSave}
-                              >
-                                保存
-                              </Button>
+                                className="text-green-500 hover:text-green-600"
+                              />
                               <Button
-                                size="small"
+                                type="link"
+                                icon={<CloseOutlined />}
                                 onClick={handleSectionNameCancel}
-                              >
-                                取消
-                              </Button>
-                            </Space>
-                          </div>
+                                className="text-red-500 hover:text-red-600"
+                              />
+                            </div>
                           ) : (
-                            <>
-                              <Text
-                                strong
-                                className="text-lg dark:text-gray-200"
-                              >
+                            <div className="flex items-center gap-2">
+                              <Text strong className="text-lg dark:text-gray-200">
                                 {form.getFieldValue([
                                   "sections",
                                   sectionIndex,
@@ -390,7 +679,7 @@ const ServiceForm = () => {
                               </Text>
                               {(!id || isEdit) && (
                                 <Button
-                                  type="text"
+                                  type="link"
                                   icon={<EditOutlined />}
                                   onClick={() =>
                                     handleSectionNameEdit(
@@ -399,23 +688,37 @@ const ServiceForm = () => {
                                         "sections",
                                         sectionIndex,
                                         "sectionName",
-                                      ])
+                                      ]) || `服务类型 ${sectionIndex + 1}`
                                     )
                                   }
-                                  size="small"
+                                  className="text-gray-400 hover:text-blue-500"
                                 />
                               )}
-                            </>
+                            </div>
                           )}
                         </div>
-                        <Text className="text-gray-500 dark:text-gray-400">
-                          合计:{" "}
-                          {formatCurrency(
-                            calculateSectionTotal(
-                              formValues?.sections?.[sectionIndex]?.items
-                            )
+                        <div className="flex items-center gap-4">
+                        
+                          {(!id || isEdit) && (
+                            <Popconfirm
+                              title="确认删除"
+                              description="确定要删除这个小节吗？"
+                              onConfirm={() => handleRemoveSection(sectionIndex)}
+                              okText="确定"
+                              cancelText="取消"
+                              okButtonProps={{
+                                className: "bg-red-500 hover:bg-red-600 border-red-500"
+                              }}
+                            >
+                              <Button
+                                type="text"
+                                danger
+                                icon={<DeleteOutlined />}
+                                className="hover:text-red-500 transition-colors"
+                              />
+                            </Popconfirm>
                           )}
-                        </Text>
+                        </div>
                       </div>
 
                       {/* 表头 */}
@@ -463,13 +766,7 @@ const ServiceForm = () => {
                                     className="w-full"
                                   />
                                 </Form.Item>
-                                <Form.Item
-                                  {...itemField}
-                                  name={[itemField.name, "unit"]}
-                                  className="!mb-0"
-                                >
-                                  <Input placeholder="单位" />
-                                </Form.Item>
+                                {renderUnitSelect(itemField, sectionIndex, itemIndex)}
                                 <Form.Item
                                   {...itemField}
                                   name={[itemField.name, "price"]}
@@ -538,12 +835,14 @@ const ServiceForm = () => {
                 </div>
 
                 {(!id || isEdit) && (
-                  <div className="mt-6 flex gap-4 justify-center">
+                  <div className="mt-6 flex justify-center">
                     <Button
                       type="dashed"
-                      onClick={() => addSection({ items: [{}] })}
+                      onClick={handleAddSection}
                       icon={<PlusOutlined />}
-                      className="w-1/3 hover:border-blue-400 hover:text-blue-500 dark:border-gray-600 dark:text-gray-400 dark:hover:text-blue-400"
+                      className="w-1/3 border-2 hover:border-blue-400 hover:text-blue-500 
+                        dark:border-gray-600 dark:text-gray-400 dark:hover:text-blue-400
+                        transition-all duration-300"
                     >
                       新建小节
                     </Button>
@@ -589,6 +888,25 @@ const ServiceForm = () => {
             </Button>
           </div>
         )}
+
+        {/* 模版选择弹窗 */}
+        <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>
       </Form>
     </Card>
   );

src/pages/company/service/index.jsx

@@ -1,16 +1,35 @@
-import { Card, Table, Button, Space, Input, message, Popconfirm, Form, Tag, Typography } from "antd";
-import { DownOutlined, UpOutlined,EyeOutlined,EditOutlined } from "@ant-design/icons";
+import {
+  Card,
+  Table,
+  Button,
+  Space,
+  Input,
+  message,
+  Popconfirm,
+  Form,
+  Tag,
+  Typography,
+} from "antd";
+import {
+  DownOutlined,
+  UpOutlined,
+  EyeOutlined,
+  EditOutlined,
+} 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;
 
 const ServicePage = () => {
   const [loading, setLoading] = useState(false);
   const [data, setData] = useState([]);
+  const [categories, setCategories] = useState([]);
   const navigate = useNavigate();
-  const [editingKey, setEditingKey] = useState('');
+  const [editingKey, setEditingKey] = useState("");
 
   // 获取服务模板列表
   const fetchServices = async () => {
@@ -32,6 +51,23 @@ const ServicePage = () => {
     }
   };
 
+  // 添加获取分类数据的方法
+  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;
+      setCategories(categoriesData || []);
+    } catch (error) {
+      console.error('获取分类数据失败:', error);
+      message.error('获取分类数据失败');
+    }
+  };
+
   // 修改保存逻辑
   const handleSaveItem = async (record) => {
     try {
@@ -39,12 +75,11 @@ const ServicePage = () => {
       const { serviceId, sectionIndex, itemIndex } = record;
 
       // 找到当前服务模板
-      const currentService = data.find(item => item.id === serviceId);
+      const currentService = data.find((item) => item.id === serviceId);
       if (!currentService) {
-        throw new Error('Service not found');
+        throw new Error("Service not found");
       }
 
-      // 创建新的 attributes 对象，避免直接修改状态
       const newAttributes = {
         ...currentService.attributes,
         templateName: currentService.attributes.templateName,
@@ -60,47 +95,57 @@ const ServicePage = () => {
                     name: record.name,
                     price: Number(record.price) || 0,
                     quantity: Number(record.quantity) || 0,
-                    description: record.description || '',
-                    unit: record.unit || ''
+                    description: record.description || "",
+                    unit: record.unit || "",
                   };
                 }
                 return item;
-              })
+              }),
             };
           }
           return section;
-        })
+        }),
       };
 
       // 重新计算总金额
-      newAttributes.totalAmount = newAttributes.sections.reduce((total, section) => {
-        return total + section.items.reduce((sectionTotal, item) => 
-          sectionTotal + ((Number(item.price) || 0) * (Number(item.quantity) || 0)), 0);
-      }, 0);
+      newAttributes.totalAmount = newAttributes.sections.reduce(
+        (total, section) => {
+          return (
+            total +
+            section.items.reduce(
+              (sectionTotal, item) =>
+                sectionTotal +
+                (Number(item.price) || 0) * (Number(item.quantity) || 0),
+              0
+            )
+          );
+        },
+        0
+      );
 
       // 调用 supabase 更新数据
       const { error } = await supabase
-        .from('resources')
+        .from("resources")
         .update({
           type: "serviceTemplate",
-          attributes: newAttributes
+          attributes: newAttributes,
         })
-        .eq('id', serviceId);
+        .eq("id", serviceId);
 
       if (error) throw error;
 
       // 更新本地状态
-      setData(prevData => prevData.map(item => 
-        item.id === serviceId 
-          ? { ...item, attributes: newAttributes }
-          : item
-      ));
+      setData((prevData) =>
+        prevData.map((item) =>
+          item.id === serviceId ? { ...item, attributes: newAttributes } : item
+        )
+      );
 
-      setEditingKey('');
-      message.success('保存成功');
+      setEditingKey("");
+      message.success("保存成功");
     } catch (error) {
-      console.error('保存失败:', error);
-      message.error('保存失败');
+      console.error("保存失败:", error);
+      message.error("保存失败");
     } finally {
       setLoading(false);
     }
@@ -113,8 +158,8 @@ const ServicePage = () => {
       const { serviceId, sectionIndex, itemIndex } = record;
 
       // 找到目标服务
-      const targetService = data.find(item => item.id === serviceId);
-      if (!targetService) throw new Error('Service not found');
+      const targetService = data.find((item) => item.id === serviceId);
+      if (!targetService) throw new Error("Service not found");
 
       // 创建新的 attributes 对象，避免直接修改状态
       const newAttributes = {
@@ -123,40 +168,51 @@ const ServicePage = () => {
           if (secIdx === sectionIndex) {
             return {
               ...section,
-              items: section.items.filter((_, idx) => idx !== itemIndex)
+              items: section.items.filter((_, idx) => idx !== itemIndex),
             };
           }
           return section;
-        })
+        }),
       };
 
       // 重新计算总金额
-      newAttributes.totalAmount = newAttributes.sections.reduce((total, section) => {
-        return total + section.items.reduce((sectionTotal, item) => 
-          sectionTotal + ((Number(item.price) || 0) * (Number(item.quantity) || 0)), 0);
-      }, 0);
+      newAttributes.totalAmount = newAttributes.sections.reduce(
+        (total, section) => {
+          return (
+            total +
+            section.items.reduce(
+              (sectionTotal, item) =>
+                sectionTotal +
+                (Number(item.price) || 0) * (Number(item.quantity) || 0),
+              0
+            )
+          );
+        },
+        0
+      );
 
       // 调用 supabase 更新数据
       const { error } = await supabase
-        .from('resources')
+        .from("resources")
+
         .update({
-          attributes: newAttributes 
+          attributes: newAttributes,
         })
-        .eq('id', serviceId);
+        .eq("id", serviceId);
 
       if (error) throw error;
 
       // 更新本地状态
-      setData(prevData => prevData.map(item => 
-        item.id === serviceId 
-          ? { ...item, attributes: newAttributes }
-          : item
-      ));
+      setData((prevData) =>
+        prevData.map((item) =>
+          item.id === serviceId ? { ...item, attributes: newAttributes } : item
+        )
+      );
 
-      message.success('删除成功');
+      message.success("删除成功");
     } catch (error) {
-      console.error('删除失败:', error);
-      message.error('删<><E588A0><EFBFBD>失败');
+      console.error("删除失败:", error);
+      message.error("删除失败");
     } finally {
       setLoading(false);
     }
@@ -169,18 +225,18 @@ const ServicePage = () => {
 
       // 调用 supabase 删除数据
       const { error } = await supabase
-        .from('resources')
+        .from("resources")
         .delete()
-        .eq('id', serviceId);
+        .eq("id", serviceId);
 
       if (error) throw error;
 
       // 更新本地状态
-      setData(prevData => prevData.filter(item => item.id !== serviceId));
-      message.success('删除成功');
+      setData((prevData) => prevData.filter((item) => item.id !== serviceId));
+      message.success("删除成功");
     } catch (error) {
-      console.error('删除失败:', error);
-      message.error('删除失败');
+      console.error("删除失败:", error);
+      message.error("删除失败");
     } finally {
       setLoading(false);
     }
@@ -198,38 +254,39 @@ const ServicePage = () => {
       title: "分类",
       dataIndex: ["attributes", "category"],
       key: "category",
-      render: (category) => {
-        if (!category || !Array.isArray(category)) return null;
+      render: (categories) => {
+        if (!categories || !Array.isArray(categories)) return null;
+        
         return (
           <Paragraph
             ellipsis={{
               rows: 1,
               tooltip: (
                 <Space size={[0, 8]} wrap>
-                  {category.map((cat, index) => (
+                  {categories.map((category) => (
                     <Tag
                       size="small"
-                      key={`${cat}-${index}`}
+                      key={category.id}
                       color="blue"
                       className="px-2 py-1 rounded-md"
                     >
-                      {cat}
+                      {category.name}
                     </Tag>
                   ))}
                 </Space>
-              )
+              ),
             }}
             className="mb-0"
           >
             <Space size={[0, 8]} nowrap>
-              {category.map((cat, index) => (
+              {categories.map((category) => (
                 <Tag
                   size="small"
-                  key={`${cat}-${index}`}
+                  key={category.id}
                   color="blue"
                   className="px-2 py-1 rounded-md"
                 >
-                  {cat}
+                  {category.name}
                 </Tag>
               ))}
             </Space>
@@ -241,18 +298,18 @@ const ServicePage = () => {
       title: "描述",
       dataIndex: ["attributes", "description"],
       key: "description",
-      width: 300,
+      className: "min-w-[100px] ",
       render: (text) => (
         <Paragraph
           ellipsis={{
             rows: 2,
-            tooltip: text
+            tooltip: text,
           }}
           className="mb-0"
         >
           {text}
         </Paragraph>
-      )
+      ),
     },
     {
       title: "总金额",
@@ -260,7 +317,7 @@ const ServicePage = () => {
       key: "totalAmount",
       className: "min-w-[150px] text-right",
       render: (amount) => (
-        <span style={{ color: '#f50', fontWeight: 'bold' }}>
+        <span style={{ color: "#f50", fontWeight: "bold" }}>
           ¥
           {amount?.toLocaleString("zh-CN", {
             minimumFractionDigits: 2,
@@ -272,21 +329,25 @@ const ServicePage = () => {
     {
       title: "操作",
       key: "action",
-      fixed: 'right',
+      fixed: "right",
       width: 220,
       render: (_, record) => (
-        <Space onClick={e => e.stopPropagation()}>
+        <Space onClick={(e) => e.stopPropagation()}>
           <Button
             type="link"
             icon={<EyeOutlined />}
-            onClick={() => navigate(`/company/serviceTemplateInfo/${record.id}`)}
+            onClick={() =>
+              navigate(`/company/serviceTemplateInfo/${record.id}`)
+            }
           >
             查看
           </Button>
           <Button
             type="link"
             icon={<EditOutlined />}
-            onClick={() => navigate(`/company/serviceTemplateInfo/${record.id}?edit=true`)}
+            onClick={() =>
+              navigate(`/company/serviceTemplateInfo/${record.id}?edit=true`)
+            }
           >
             编辑
           </Button>
@@ -298,11 +359,7 @@ const ServicePage = () => {
             okButtonProps={{ danger: true }}
             onConfirm={() => handleDeleteService(record.id)}
           >
-            <Button 
-              type="link" 
-              danger
-              className="text-red-600"
-            >
+            <Button type="link" danger className="text-red-600">
               删除
             </Button>
           </Popconfirm>
@@ -328,17 +385,24 @@ const ServicePage = () => {
           >
             <Input
               value={text}
-              onChange={e => {
+              onChange={(e) => {
                 const newData = [...data];
-                const targetService = newData.find(item => item.id === record.serviceId);
-                const targetItem = targetService.attributes.sections[record.sectionIndex].items[record.itemIndex];
+                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);
               }}
             />
           </Form.Item>
-        ) : text;
-      }
+        ) : (
+          text
+        );
+      },
     },
     {
       title: "描述",
@@ -349,16 +413,25 @@ const ServicePage = () => {
         const isEditing = record.key === editingKey;
         return isEditing ? (
           <Form.Item
-            name={[record.sectionIndex, "items", record.itemIndex, "description"]}
+            name={[
+              record.sectionIndex,
+              "items",
+              record.itemIndex,
+              "description",
+            ]}
             className="!mb-0"
           >
-            <Input.TextArea 
-              rows={1}
+            <Input
               value={text}
-              onChange={e => {
+              onChange={(e) => {
                 const newData = [...data];
-                const targetService = newData.find(item => item.id === record.serviceId);
-                const targetItem = targetService.attributes.sections[record.sectionIndex].items[record.itemIndex];
+                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);
               }}
@@ -368,14 +441,14 @@ const ServicePage = () => {
           <Paragraph
             ellipsis={{
               rows: 2,
-              tooltip: text
+              tooltip: text,
             }}
             className="mb-0"
           >
             {text}
           </Paragraph>
         );
-      }
+      },
     },
     {
       title: "单价",
@@ -388,23 +461,29 @@ const ServicePage = () => {
           <Input
             type="number"
             value={price}
-            onChange={e => {
+            onChange={(e) => {
               const newData = [...data];
-              const targetService = newData.find(item => item.id === record.serviceId);
-              const targetItem = targetService.attributes.sections[record.sectionIndex].items[record.itemIndex];
+              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", {
+            ¥
+            {price?.toLocaleString("zh-CN", {
               minimumFractionDigits: 2,
               maximumFractionDigits: 2,
             })}
           </span>
         );
-      }
+      },
     },
     {
       title: "数量",
@@ -417,16 +496,23 @@ const ServicePage = () => {
           <Input
             type="number"
             value={quantity}
-            onChange={e => {
+            onChange={(e) => {
               const newData = [...data];
-              const targetService = newData.find(item => item.id === record.serviceId);
-              const targetItem = targetService.attributes.sections[record.sectionIndex].items[record.itemIndex];
+              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>;
-      }
+        ) : (
+          <span className="text-gray-600">{quantity}</span>
+        );
+      },
     },
     {
       title: "小计",
@@ -446,8 +532,8 @@ const ServicePage = () => {
       ),
     },
     {
-      title: '操作',
-      key: 'action',
+      title: "操作",
+      key: "action",
       width: "150px",
       render: (_, record) => {
         const isEditing = record.key === editingKey;
@@ -457,7 +543,9 @@ const ServicePage = () => {
               type="link"
               size="small"
               className="text-green-600"
-              onClick={() => handleSaveItem(record, record.sectionIndex, record.itemIndex)}
+              onClick={() =>
+                handleSaveItem(record, record.sectionIndex, record.itemIndex)
+              }
             >
               保存
             </Button>
@@ -465,7 +553,7 @@ const ServicePage = () => {
               type="link"
               size="small"
               className="text-gray-600"
-              onClick={() => setEditingKey('')}
+              onClick={() => setEditingKey("")}
             >
               取消
             </Button>
@@ -476,7 +564,7 @@ const ServicePage = () => {
               type="link"
               size="small"
               className="text-blue-600"
-              disabled={editingKey !== ''} 
+              disabled={editingKey !== ""}
               onClick={() => setEditingKey(record.key)}
             >
               编辑
@@ -493,15 +581,15 @@ const ServicePage = () => {
                 type="link"
                 size="small"
                 className="text-red-600"
-                disabled={editingKey !== ''} 
+                disabled={editingKey !== ""}
               >
                 删除
               </Button>
             </Popconfirm>
           </Space>
         );
-      }
-    }
+      },
+    },
   ];
 
   // 修改 expandedRowRender 函数，确保 key 的唯一性
@@ -521,7 +609,8 @@ const ServicePage = () => {
                 {section.items
                   .reduce(
                     (total, item) =>
-                      total + (Number(item.price) || 0) * (Number(item.quantity) || 0),
+                      total +
+                      (Number(item.price) || 0) * (Number(item.quantity) || 0),
                     0
                   )
                   .toLocaleString("zh-CN", {
@@ -532,11 +621,11 @@ const ServicePage = () => {
             </div>
           }
           headStyle={{
-            background: 'rgba(59, 130, 246, 0.05)',
-            borderBottom: '1px solid rgba(59, 130, 246, 0.1)'
+            background: "rgba(59, 130, 246, 0.05)",
+            borderBottom: "1px solid rgba(59, 130, 246, 0.1)",
           }}
           bodyStyle={{
-            background: 'rgba(59, 130, 246, 0.02)'
+            background: "rgba(59, 130, 246, 0.02)",
           }}
         >
           <Table
@@ -546,7 +635,7 @@ const ServicePage = () => {
               key: `${record.id}-${sectionIndex}-${itemIndex}`,
               serviceId: record.id,
               sectionIndex,
-              itemIndex
+              itemIndex,
             }))}
             pagination={false}
             className="rounded-lg overflow-hidden"
@@ -559,6 +648,7 @@ const ServicePage = () => {
 
   useEffect(() => {
     fetchServices();
+    fetchCategories();
   }, []);
 
   return (
@@ -567,12 +657,18 @@ const ServicePage = () => {
         title={<span className="text-xl font-medium">服务模版管理</span>}
         className="h-full w-full overflow-auto"
         extra={
-          <Button
-            type="primary"
-            onClick={() => navigate("/company/serviceTemplateInfo")}
-          >
-            新建模版
-          </Button>
+          <Space>
+            <Sections />
+            <UnitManagement />
+            <CategoryDrawer />
+
+            <Button
+              type="primary"
+              onClick={() => navigate("/company/serviceTemplateInfo")}
+            >
+              新建模版
+            </Button>
+          </Space>
         }
       >
         <Table
@@ -587,29 +683,34 @@ const ServicePage = () => {
             expandIcon: ({ expanded, onExpand, record }) => (
               <Button
                 type="link"
-                onClick={e => {
+                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'
+                  ${
+                    expanded
+                      ? "text-blue-600"
+                      : "text-gray-400 hover:text-blue-600"
                   }
                 `}
               />
             ),
-            rowExpandable: record => record.attributes.sections?.length > 0,
+            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'}
+            ${
+              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'}
+          expandedRowClassName={() => "bg-blue-50/50 dark:bg-blue-900/10"}
         />
       </Card>
     </div>

src/pages/company/service/sections/index.jsx

@@ -0,0 +1,446 @@
+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';
+
+const SectionManagement = () => {
+  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 [form] = Form.useForm();
+  const [units, setUnits] = useState([]);
+
+  // 获取子模块数据
+  const fetchSections = async () => {
+    setLoading(true);
+    try {
+      const { data: sections, error } = await supabase
+        .from('resources')
+        .select('*')
+        .eq('type', 'sections');
+
+      if (error) throw error;
+      setData(sections || []);
+    } catch (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]);
+
+  // 打开新增/编辑模态框
+  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({
+        name: '',
+        items: [{ name: '', description: '', price: 0, quantity: 1, unit: '' }]
+      });
+    }
+  };
+
+  // 保存子模块数据
+  const handleSave = async (values) => {
+    try {
+      if (editingRecord) {
+        // 更新
+        const { error } = await supabase
+          .from('resources')
+          .update({
+            attributes: {
+              name: values.name,
+              items: values.items
+            },
+            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();
+      fetchSections();
+    } catch (error) {
+      message.error('保存失败');
+      console.error(error);
+    }
+  };
+
+  // 删除子模块
+  const handleDelete = async (id) => {
+    try {
+      const { error } = await supabase
+        .from('resources')
+        .delete()
+        .eq('id', id);
+
+      if (error) throw error;
+      message.success('删除成功');
+      fetchSections();
+    } catch (error) {
+      message.error('删除失败');
+      console.error(error);
+    }
+  };
+
+  // Drawer 中表格的列定义
+  const drawerColumns = [
+    {
+      title: '项目名称',
+      dataIndex: 'name',
+      width: '20%',
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      width: '25%',
+    },
+    {
+      title: '单价',
+      dataIndex: 'price',
+      width: '15%',
+      render: (price) => `¥${price}`
+    },
+    {
+      title: '数量',
+      dataIndex: 'quantity',
+      width: '15%',
+    },
+    {
+      title: '单位',
+      dataIndex: 'unit',
+      width: '15%',
+    }
+  ];
+
+  // 添加模态框内表格列定义
+  const modalColumns = [
+    {
+      title: '项目名称',
+      dataIndex: 'name',
+      width: '20%',
+      render: (_, __, index) => (
+        <Form.Item
+          name={[index, 'name']}
+          style={{ margin: 0 }}
+        >
+          <Input placeholder="项目名称" />
+        </Form.Item>
+      )
+    },
+    {
+      title: '描述',
+      dataIndex: 'description',
+      width: '25%',
+      render: (_, __, index) => (
+        <Form.Item
+          name={[index, 'description']}
+          style={{ margin: 0 }}
+        >
+          <Input placeholder="描述" />
+        </Form.Item>
+      )
+    },
+    {
+      title: '单价',
+      dataIndex: 'price',
+      width: '15%',
+      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',
+      width: '15%',
+      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',
+      width: '15%',
+      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: '操作',
+      width: '10%',
+      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
+                    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"
+        >
+          <Form.Item
+            name="name"
+            label="子模块名称"
+            rules={[{ required: true, message: '请输入子模块名称!' }]}
+          >
+            <Input placeholder="请输入子模块名称" />
+          </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">
+                  <Button
+                    type="dashed"
+                    onClick={() => add({
+                      name: '',
+                      description: '',
+                      price: 0,
+                      quantity: 1,
+                      unit: ''
+                    })}
+                    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"
+                  >
+                    添加项目
+                  </Button>
+                </div>
+              </div>
+            )}
+          </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">
+              保存
+            </Button>
+          </div>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+
+export default SectionManagement;

src/pages/company/service/unit/index.jsx

@@ -0,0 +1,262 @@
+import React, { useState, useEffect } from 'react';
+import { Table, Button, Drawer, Form, Input, Space, message, Popconfirm } from 'antd';
+import { PlusOutlined, DeleteOutlined, SaveOutlined, CloseOutlined } from '@ant-design/icons';
+import { supabase } from '@/config/supabase';
+
+const UnitManagement = () => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [drawerVisible, setDrawerVisible] = useState(false);
+  const [editingKey, setEditingKey] = useState('');
+  const [form] = Form.useForm();
+
+  // 获取单位数据
+  const fetchUnits = async () => {
+    setLoading(true);
+    try {
+      const { data: units, error } = await supabase
+        .from('resources')
+        .select('*')
+        .eq('type', 'units')
+        .order('created_at', { ascending: false });
+
+      if (error) throw error;
+      setData(units || []);
+    } catch (error) {
+      message.error('获取单位数据失败');
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (drawerVisible) {
+      fetchUnits();
+    }
+  }, [drawerVisible]);
+
+  // 新增<E696B0><E5A29E><EFBFBD>位
+  const handleAdd = () => {
+    const newData = {
+      id: Date.now().toString(),
+      attributes: { name: '' },
+      isNew: true
+    };
+    setData([newData, ...data]);
+    setEditingKey(newData.id);
+    form.setFieldsValue(newData.attributes);
+  };
+
+  // 保存单位数据
+  const handleSave = async (record) => {
+    try {
+      const values = await form.validateFields();
+      if (record.isNew) {
+        // 新增
+        const { error } = await supabase
+          .from('resources')
+          .insert([{
+            type: 'units',
+            attributes: {
+              name: values.name
+            },
+            schema_version: 1
+          }]);
+
+        if (error) throw error;
+      } else {
+        // 更新
+        const { error } = await supabase
+          .from('resources')
+          .update({
+            attributes: {
+              name: values.name
+            },
+            updated_at: new Date().toISOString()
+          })
+          .eq('id', record.id);
+
+        if (error) throw error;
+      }
+
+      message.success('保存成功');
+      setEditingKey('');
+      fetchUnits();
+    } catch (error) {
+      message.error('保存失败');
+      console.error(error);
+    }
+  };
+
+  // 删除单位
+  const handleDelete = async (id) => {
+    try {
+      const { error } = await supabase
+        .from('resources')
+        .delete()
+        .eq('id', id);
+
+      if (error) throw error;
+      message.success('删除成功');
+      fetchUnits();
+    } catch (error) {
+      message.error('删除失败');
+      console.error(error);
+    }
+  };
+
+  // 修改取消编辑的处理方法
+  const handleCancel = (record) => {
+    setEditingKey('');
+    if (record.isNew) {
+      // 如果是新增的记录，直接从数据中移除
+      setData(data.filter(item => item.id !== record.id));
+    }
+    form.resetFields();
+  };
+
+  const columns = [
+    {
+      title: '单位名称',
+      dataIndex: ['attributes', 'name'],
+      width: '60%',
+      render: (text, record) => {
+        const isEditing = record.id === editingKey;
+        return isEditing ? (
+          <Form.Item
+            name="name"
+            rules={[{ required: true, message: '请输入单位名称!' }]}
+            style={{ margin: 0 }}
+            initialValue={text}
+          >
+            <Input placeholder="请输入单位名称" />
+          </Form.Item>
+        ) : (
+          text
+        );
+      }
+    },
+    {
+      title: '操作',
+      width: '40%',
+      render: (_, record) => {
+        const isEditing = record.id === editingKey;
+        return isEditing ? (
+          <Space>
+            <Button
+              type="link"
+              icon={<SaveOutlined />}
+              onClick={() => handleSave(record)}
+              className="text-green-600 hover:text-green-500"
+            >
+              保存
+            </Button>
+            <Button
+              type="link"
+              icon={<CloseOutlined />}
+              onClick={() => handleCancel(record)}
+              className="text-gray-600 hover:text-gray-500"
+            >
+              取消
+            </Button>
+          </Space>
+        ) : (
+          <Space>
+            <Button
+              type="link"
+              disabled={editingKey !== ''}
+              onClick={() => {
+                setEditingKey(record.id);
+                form.setFieldsValue(record.attributes);
+              }}
+              className="text-blue-600 hover:text-blue-500 disabled:text-gray-400"
+            >
+              编辑
+            </Button>
+            <Popconfirm
+              title="确定要删除吗？"
+              onConfirm={() => handleDelete(record.id)}
+              okButtonProps={{ 
+                className: "bg-red-500 hover:bg-red-600 border-red-500" 
+              }}
+            >
+              <Button
+                type="link"
+                danger
+                disabled={editingKey !== ''}
+                icon={<DeleteOutlined />}
+                className="text-red-600 hover:text-red-500 disabled:text-gray-400"
+              />
+            </Popconfirm>
+          </Space>
+        );
+      }
+    }
+  ];
+
+  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={600}
+        onClose={() => {
+          setDrawerVisible(false);
+          setEditingKey('');
+          form.resetFields();
+        }}
+        open={drawerVisible}
+        className="dark:bg-gray-800"
+      >
+        <div className="flex flex-col h-full">
+          <Button
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={handleAdd}
+            disabled={editingKey !== ''}
+            className="mb-4 w-32 flex items-center justify-center"
+          >
+            新增单位
+          </Button>
+
+          <Form form={form} className="flex-1">
+            <Table
+              dataSource={data}
+              columns={columns}
+              rowKey="id"
+              loading={loading}
+              pagination={{
+                pageSize: 10,
+                className: "dark:text-gray-300"
+              }}
+              className="bg-white dark:bg-gray-800 rounded-lg shadow-sm"
+              rowClassName={(record) => 
+                `transition-colors ${
+                  record.id === editingKey 
+                    ? 'bg-blue-50 dark:bg-blue-900/20' 
+                    : 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
+                }`
+              }
+            />
+          </Form>
+        </div>
+      </Drawer>
+    </div>
+  );
+};
+
+export default UnitManagement;

tsconfig.json

@@ -1,5 +1,15 @@
 {
   "compilerOptions": {
-    "target": "es2015"
+    "target": "es2015",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@components/*": ["src/components/*"],
+      "@pages/*": ["src/pages/*"],
+      "@utils/*": ["src/utils/*"],
+      "@config/*": ["src/config/*"],
+      "@contexts/*": ["src/contexts/*"],
+      "@assets/*": ["src/assets/*"]
+    }
   }
 } 

vite.config.js

@@ -2,18 +2,30 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 
+// 使用 __dirname 需要添加 import.meta.url 的支持
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
 export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      '@': path.resolve(__dirname, 'src'),
+      '@components': path.resolve(__dirname, 'src/components'),
+      '@pages': path.resolve(__dirname, 'src/pages'),
+      '@utils': path.resolve(__dirname, 'src/utils'),
+      '@config': path.resolve(__dirname, 'src/config'),
+      '@contexts': path.resolve(__dirname, 'src/contexts'),
+      '@assets': path.resolve(__dirname, 'src/assets'),
     },
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'] // 添加文件扩展名自动解析
   },
   server: {
-    port: 3000, // 设置开发服务器端口为 3000
-    open: true, // 自动打开浏览器
-    host: true, // 监听所有地址，包括局域网和公网地址
-    strictPort: true, // 如果端口被占用，直接退出
+    port: 3000,
+    open: true,
+    host: true,
+    strictPort: true,
   },
   build: {
     outDir: 'dist',