frontend-react-team/manage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

黑暗模式 优化

Browse Source
This commit is contained in:
‘Liammcl’
2024-12-28 17:47:33 +08:00
parent b97cdd4685
commit 0942ed68ab
11 changed files with 239 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.example
View File

@@ -1,4 +0,0 @@
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

12
pnpm-lock.yaml generated
View File

@@ -53,6 +53,9 @@ importers:
react-dom:
specifier: ^18.2.0
version: 18.3.1(react@18.3.1)
react-icons:
specifier: ^5.4.0
version: 5.4.0(react@18.3.1)
react-infinite-scroll-component:
specifier: ^6.1.0
version: 6.1.0(react@18.3.1)
@@ -2121,6 +2124,11 @@ packages:
peerDependencies:
react: ^18.3.1
react-icons@5.4.0:
resolution: {integrity: sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==}
peerDependencies:
react: '*'
react-infinite-scroll-component@6.1.0:
resolution: {integrity: sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==}
peerDependencies:
@@ -5008,6 +5016,10 @@ snapshots:
react: 18.3.1
scheduler: 0.23.2
react-icons@5.4.0(react@18.3.1):
dependencies:
react: 18.3.1
react-infinite-scroll-component@6.1.0(react@18.3.1):
dependencies:
react: 18.3.1

3
src/components/Layout/Header.jsx
View File

@@ -18,6 +18,7 @@ const Header = ({ collapsed, setCollapsed }) => {
console.error("Logout error:", error);
}
};
console.log(user);
const userMenuItems = [
{
@@ -79,7 +80,7 @@ const Header = ({ collapsed, setCollapsed }) => {
)}
<p className="max-w-20 truncate">
{!user?.user_metadata?.name || user?.email?.split("@")[0]}
{user?.user_metadata?.name || user?.email?.split("@")[0]}
</p>
</div>
</Dropdown>

6
src/components/Layout/MainLayout.jsx
View File

@@ -12,13 +12,13 @@ const MainLayout = () => {
const { isDarkMode } = useTheme();
return (
<Layout className="min-h-screen">
<Layout className="h-screen overflow-hidden">
<Sidebar collapsed={collapsed} />
<Layout className="flex flex-col h-screen">
<Layout className="flex flex-col ">
<Header collapsed={collapsed} setCollapsed={setCollapsed} />
<Content
className={`
m-2 p-4 rounded-lg overflow-auto
m-2 p-4 rounded-lg overflow-auto h-full
${isDarkMode ? 'bg-[#141414]' : 'bg-white'}
flex-1
`}

2
src/pages/company/service/index.jsx
View File

@@ -227,7 +227,7 @@ const ServicePage = () => {
// 子表格列定义
const expandedRowRender = (record) => {
return (
<div className="bg-gray-50 p-4 rounded-lg">
<div className="bg-gray-50 dark:bg-gray-600 p-4 rounded-lg">
{record.attributes.sections.map((section) => (
<div key={section.key} className="mb-6 rounded-lg shadow-sm p-4">
<div className="flex items-center justify-between mb-3 border-b pb-2">

10
src/pages/company/service/itemsManange/classify/index.jsx
View File

@@ -130,7 +130,7 @@ const Classify = ({activeType,typeList}) => {
/>
</Form.Item>
) : (
<span className="text-gray-700">{text}</span>
<span >{text}</span>
);
},
},
@@ -152,7 +152,7 @@ const Classify = ({activeType,typeList}) => {
/>
</Form.Item>
) : (
<span className="text-gray-700 px-2 py-1 bg-gray-100 rounded-full text-sm">
<span className="text-gray-700 px-2 py-1 bg-gray-100 dark:bg-gray-700 dark:text-gray-100 rounded-full text-sm">
{typeList.find(t => t.value === text)?.label || text}
</span>
);
@@ -225,8 +225,8 @@ const Classify = ({activeType,typeList}) => {
];
return (
<div className="p-6 bg-gray-50">
<div className="bg-white rounded-lg shadow-sm mb-6 p-4">
<div className="p-6 ">
<div className=" 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
@@ -259,7 +259,7 @@ const Classify = ({activeType,typeList}) => {
value: 'common',
}
]}
className="bg-gray-50 p-1"
className="bg-gray-50 dark:bg-gray-600 p-1"
/>
</div>
</div>

2
src/pages/company/service/itemsManange/index.jsx
View File

@@ -56,7 +56,7 @@ const ResourceManagement = () => {
<Card>
<Classify typeList={filterOption} activeType={activeType} setActiveType={setActiveType} />
<Unit typeList={filterOption} activeType={activeType} />
<Sections typeList={filterOption} activeType={activeType} />
<Sections activeType={activeType} />
</Card>
</div>
)

256
src/pages/company/service/itemsManange/sections/index.jsx
View File

@@ -8,7 +8,7 @@ import {
message,
Popconfirm,
Select,
Segmented,
Divider,
InputNumber,
Card,
Typography
@@ -19,30 +19,22 @@ import { v4 as uuidv4 } from 'uuid';
const { Text } = Typography;
const SectionsManagement = ({ activeType = 'quotation', typeList }) => {
const SectionsManagement = ({ activeType = 'quotation' }) => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(false);
const [editingKey, setEditingKey] = useState('');
const [form] = Form.useForm();
const [filterType, setFilterType] = useState('all');
const fetchSections = async (type = activeType, filterTypeValue = filterType) => {
const [loadingUnits,setLoadingUnits]=useState(false)
const [units,setUnit]=useState([])
const [formValues, setFormValues] = useState({});
const fetchSections = async () => {
setLoading(true);
try {
let filterCondition;
switch (filterTypeValue) {
case 'current':
filterCondition = { eq: type };
break;
default:
filterCondition = { eq: type };
}
const { data: sections } = await supabaseService.select('resources', {
filter: {
'type': { eq: 'sections' },
'attributes->>template_type': filterCondition
'attributes->>template_type': {eq:activeType}
},
order: {
column: 'created_at',
@@ -58,9 +50,30 @@ const SectionsManagement = ({ activeType = 'quotation', typeList }) => {
setLoading(false);
}
};
const fetchUnits = async () => {
setLoadingUnits(true);
try {
const { data: units } = await supabaseService.select("resources", {
filter: {
type: { eq: "units" },
"attributes->>template_type": { in: `(${activeType},common)` },
},
order: {
column: "created_at",
ascending: false,
},
});
setUnit(units || []);
} catch (error) {
message.error("获取单位列表失败");
console.error(error);
} finally {
setLoadingUnits(false);
}
};
useEffect(() => {
fetchSections(activeType, filterType);
fetchSections();
}, [activeType]);
const handleAdd = () => {
@@ -139,7 +152,32 @@ const SectionsManagement = ({ activeType = 'quotation', typeList }) => {
console.error(error);
}
};
const handleAddUnit = async (unitName) => {
try {
const { error } = await supabase.from("resources").insert([
{
type: "units",
attributes: {
name: unitName,
template_type: activeType,
},
schema_version: 1,
},
]);
if (error) throw error;
message.success("新增单位成功");
fetchUnits();
return true;
} catch (error) {
message.error("新增单位失败");
console.error(error);
return false;
}
};
const handleValuesChange = (changedValues, allValues) => {
setFormValues(allValues);
};
const columns = [
{
title: '模块名称',
@@ -155,11 +193,10 @@ const SectionsManagement = ({ activeType = 'quotation', typeList }) => {
>
<Input
placeholder="请输入模块名称"
className="rounded-md"
/>
</Form.Item>
) : (
<span className="text-gray-700 font-medium">{text}</span>
<span className=" font-medium">{text}</span>
);
},
},
@@ -168,61 +205,114 @@ const SectionsManagement = ({ activeType = 'quotation', typeList }) => {
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"
{fields.map((field, index) => {
const items = formValues.items || [];
const currentItem = items[field.name] || {};
const subtotal = (currentItem.quantity || 0) * (currentItem.price || 0);
return (
<Card key={field.key} size="small" className="bg-gray-50 dark:bg-gray-600 ">
<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"
>
<Select
placeholder="选择单位"
loading={loadingUnits}
showSearch
allowClear
style={{ minWidth: "120px" }}
options={units.map((unit) => ({
label: unit.attributes.name,
value: unit.attributes.name,
}))}
onDropdownVisibleChange={(open) => {
if (open) fetchUnits();
}}
dropdownRender={(menu) => (
<>
{menu}
<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
);
}
}}
/>
</div>
</>
)}
/>
</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="单价 (NT$)"
min={0}
className="w-full"
prefix="NT$"
/>
</Form.Item>
<Button
type="text"
danger
icon={<DeleteOutlined />}
onClick={() => remove(field.name)}
className="flex items-center justify-center"
/>
</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>
))}
</div>
<div className="flex items-center">
<Text type="secondary">小计: NT${subtotal.toLocaleString()}</Text>
</div>
</Card>
);
})}
<Button
type="dashed"
onClick={() => add({
@@ -241,17 +331,24 @@ const SectionsManagement = ({ activeType = 'quotation', typeList }) => {
</Form.List>
);
}
// 计算总金额
const total = (items || []).reduce((sum, item) => {
return sum + (item.quantity * item.price || 0);
}, 0);
return (
<div className="space-y-1">
<div>
{(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}
<div key={index} className="flex justify-start text-sm">
<span >{item.name}</span>
<span className=" ml-2">
{item.quantity} {item.unit} × NT${item.price.toLocaleString()}
</span>
</div>
))}
<Divider className="my-2" />
<Text strong>总金额: NT${total.toLocaleString()}</Text>
</div>
);
},
@@ -325,8 +422,8 @@ const SectionsManagement = ({ activeType = 'quotation', typeList }) => {
];
return (
<div className="p-6 bg-gray-50">
<div className="bg-white rounded-lg shadow-sm mb-6 p-4">
<div className="p-6 ">
<div className=" 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
@@ -341,8 +438,11 @@ const SectionsManagement = ({ activeType = 'quotation', typeList }) => {
</div>
</div>
<div className="bg-white rounded-lg shadow-sm">
<Form form={form}>
<div className=" rounded-lg shadow-sm">
<Form
form={form}
onValuesChange={handleValuesChange}
>
<Table
scroll={{ x: 1200 }}
columns={columns}

8
src/pages/company/service/itemsManange/unit/index.jsx
View File

@@ -127,7 +127,7 @@ const UnitManagement = ({ activeType, typeList }) => {
/>
</Form.Item>
) : (
<span className="text-gray-700">{text}</span>
<span>{text}</span>
);
},
},
@@ -149,7 +149,7 @@ const UnitManagement = ({ activeType, typeList }) => {
/>
</Form.Item>
) : (
<span className="text-gray-700 px-2 py-1 bg-gray-100 rounded-full text-sm">
<span className="text-gray-700 px-2 py-1 bg-gray-100 dark:bg-gray-700 dark:text-gray-100 rounded-full text-sm">
{typeList.find(t => t.value === text)?.label || text}
</span>
);
@@ -222,7 +222,7 @@ const UnitManagement = ({ activeType, typeList }) => {
];
return (
<div className="p-6 bg-gray-50">
<div className="p-6 ">
<div className="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">
@@ -256,7 +256,7 @@ const UnitManagement = ({ activeType, typeList }) => {
value: 'common',
}
]}
className="bg-gray-50 p-1"
className="bg-gray-50 dark:bg-gray-600 p-1"
/>
</div>
</div>

2
src/pages/notFound/index.jsx
View File

@@ -6,7 +6,7 @@ const NotFound = () => {
const navigate = useNavigate();
return (
<div className="h-screen flex items-center justify-center bg-gray-50">
<div className="h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-600 ">
<Result
status="404"
title="404"

58
src/pages/resource/bucket/index.jsx
View File

@@ -73,6 +73,7 @@ const StorageManager = () => {
const [newFileName, setNewFileName] = useState("");
const [currentPath, setCurrentPath] = useState(""); // 添加当前路径状态
const [pathHistory, setPathHistory] = useState([]); // 添加路径历史记录
const [isUploading, setIsUploading] = useState(false); // 添加上传loading状态
// 文件图标映射
const getFileIcon = (file) => {
@@ -144,7 +145,6 @@ const StorageManager = () => {
// 预览文件
const previewFile = async (file) => {
try {
// Handle PDF and other binary files
if (file.metadata?.mimetype === 'application/pdf' ||
file.metadata?.mimetype.includes('msword') ||
file.metadata?.mimetype.includes('spreadsheet')) {
@@ -173,6 +173,7 @@ const StorageManager = () => {
multiple: true,
showUploadList: false,
customRequest: async ({ file, onSuccess, onError }) => {
setIsUploading(true); // 开始上传时设置状态
try {
const originalName = file.name;
const fileName = handleFileName(originalName);
@@ -199,6 +200,8 @@ const StorageManager = () => {
} catch (error) {
message.error(`${file.name} 上传失败: ${error.message}`);
onError(error);
} finally {
setIsUploading(false); // 上传完成后重置状态
}
},
beforeUpload: (file) => {
@@ -460,22 +463,22 @@ const StorageManager = () => {
// 修改文件列表渲染
const renderFileList = () => (
<div
className="flex-1 overflow-y-auto rounded-lg shadow-sm"
className="flex-1 overflow-y-auto rounded-lg shadow-sm "
id="scrollableDiv"
>
{/* 面包屑导航 */}
{/* 面包屑导航样式优化 */}
{currentPath && (
<div className="p-4 border-b border-gray-100">
<div className="p-4 border-b border-gray-100 dark:border-gray-700">
<div className="flex items-center space-x-2 text-sm">
<Button
type="link"
onClick={handleBack}
className="px-0"
className="px-0 text-blue-500 dark:text-blue-400"
>
返回上级
</Button>
<span className="text-gray-500">/</span>
<span className="text-gray-900">{currentPath}</span>
<span className="text-gray-500 dark:text-gray-400">/</span>
<span className="text-gray-900 dark:text-gray-100">{currentPath}</span>
</div>
</div>
)}
@@ -504,8 +507,8 @@ const StorageManager = () => {
<List.Item
className={`
relative group cursor-pointer transition-colors duration-200
hover:bg-gray-50
${selectedFile?.name === file.name ? "bg-blue-50" : ""}
hover:bg-gray-50 dark:hover:bg-gray-700
${selectedFile?.name === file.name ? "bg-blue-50 dark:bg-gray-700" : ""}
`}
onClick={() => file.metadata?.isFolder ? handleFolderClick(file.name) : previewFile(file)}
>
@@ -563,7 +566,7 @@ const StorageManager = () => {
</div>
}
description={
<div className="text-xs text-gray-500 space-x-4">
<div className="text-xs text-gray-500 dark:text-gray-400 space-x-4">
<span>{file.metadata?.isFolder ? '文件夹' : `类型: ${file.metadata?.mimetype}`}</span>
{!file.metadata?.isFolder && (
<>
@@ -581,7 +584,6 @@ const StorageManager = () => {
</div>
);
// 渲染文件类型标签
const renderTypeTags = () => (
<div className="flex flex-wrap gap-2">
{Object.entries({ 全部: null, ...FILE_TYPES, 其他: null }).map(([type]) => (
@@ -596,24 +598,29 @@ const StorageManager = () => {
))}
</div>
);
return (
<div className="flex h-screen bg-gray-50">
<div className="w-1/3 p-4 flex flex-col space-y-4">
<div className="rounded-lg shadow-sm overflow-hidden">
<div className="flex h-full ">
<div className="w-1/3 p-2 flex flex-col space-y-4 h-full overflow-auto ">
<div className="rounded-lg shadow-sm p-4 ">
<Dragger
{...uploadProps}
className="px-6 py-8 hover:bg-gray-50 transition-colors group"
className={`px-6 py-8 group
${isUploading ? 'opacity-50 cursor-not-allowed' : ''}`}
disabled={isUploading}
>
<div className="space-y-3 text-center">
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-50 group-hover:bg-blue-100 transition-colors">
<InboxOutlined className="text-3xl text-blue-500" />
<div className="inline-flex items-center justify-center w-16 h-16 rounded-full group-hover:bg-blue-100 dark:group-hover:bg-blue-800 transition-colors">
{isUploading ? (
<LoadingSpinner />
) : (
<InboxOutlined className="text-3xl text-blue-500 dark:text-blue-400" />
)}
</div>
<div>
<p className="text-base font-medium text-gray-900">
点击或拖拽文件上传
<p className="text-base font-medium text-gray-900 dark:text-gray-100">
{isUploading ? '正在上传...' : '点击或拖拽文件上传'}
</p>
<p className="mt-1 text-sm text-gray-500">
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
支持单个或批量上传，文件大小不超过50MB
</p>
</div>
@@ -621,7 +628,6 @@ const StorageManager = () => {
</Dragger>
</div>
{/* 搜索和筛选区域 */}
<div className="space-y-3">
<Search
placeholder="搜索文件名..."
@@ -630,7 +636,7 @@ const StorageManager = () => {
className="w-full"
size="large"
/>
<div className="bg-white p-3 rounded-lg shadow-sm">
<div className=" p-3 rounded-lg shadow-sm">
{renderTypeTags()}
</div>
</div>
@@ -646,20 +652,20 @@ const StorageManager = () => {
</div>
{/* 右侧预览区域 */}
<div className="flex-1 p-4 bg-white border-l border-gray-200">
<div className="flex-1 p-4 border-l border-gray-200">
{selectedFile ? (
<>
<div className="mb-4 pb-4 border-b border-gray-200">
<Space size="middle" align="center">
<Space>
<span className="text-lg font-medium text-gray-900">
<span className="text-lg font-medium ">
{selectedFile.name}
</span>
<Button
type="text"
icon={<EditOutlined />}
onClick={startRename}
className="text-gray-500 hover:text-blue-500"
className="text-gray-500 dark:text-gray-100 hover:text-blue-500"
/>
</Space>
{isHtml(selectedFile) && (