From 63d4020ea94dee138914237812eff2fdc4b8f44a Mon Sep 17 00:00:00 2001
From: wangyunfei <1224056307@qq,com>
Date: Tue, 11 Nov 2025 18:00:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=A1=E6=81=AF=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/business_basic/basic.less           |   2 +
 .../business_basic/components/BasicInfo.js    | 254 +++++++++++++++
 .../business_basic/components/BasicInfo.less  |  72 +++++
 .../components/CustomerInfoManagement.js      |   2 +-
 .../components/CustomerInfoManagement.less    |   2 +-
 .../business_basic/components/DataModeling.js |   2 +-
 .../components/DataModeling.less              |   2 +-
 .../components/OilDataManagement.js           | 164 ++++------
 .../components/OilDataManagement.less         |  86 ++++-
 .../business_basic/components/PhysChem.js     | 294 ++++++++++++++++++
 .../business_basic/components/PhysChem.less   |  81 +++++
 11 files changed, 841 insertions(+), 120 deletions(-)
 create mode 100644 src/pages/business_basic/components/BasicInfo.js
 create mode 100644 src/pages/business_basic/components/BasicInfo.less
 create mode 100644 src/pages/business_basic/components/PhysChem.js
 create mode 100644 src/pages/business_basic/components/PhysChem.less

diff --git a/src/pages/business_basic/basic.less b/src/pages/business_basic/basic.less
index 1afe67f..88a1f21 100644
--- a/src/pages/business_basic/basic.less
+++ b/src/pages/business_basic/basic.less
@@ -4,6 +4,8 @@
     overflow: hidden;
     display: flex; 
     flex-direction: column; 
+    // background-color: pink;
+    
 
     .TopButton {
         background-color: #FFFFFF;
diff --git a/src/pages/business_basic/components/BasicInfo.js b/src/pages/business_basic/components/BasicInfo.js
new file mode 100644
index 0000000..32ab40a
--- /dev/null
+++ b/src/pages/business_basic/components/BasicInfo.js
@@ -0,0 +1,254 @@
+import React, { useMemo, useState } from 'react';
+import { Card, Form, Input, Select, Space, Button, Switch, message } from 'antd';
+import { PlusOutlined, SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons';
+import StandardTable from '@/components/StandardTable';
+import styles from './BasicInfo.less';
+
+const BasicInfo = () => {
+    const [form] = Form.useForm();
+
+    // 列表筛选与数据（演示数据，可替换为接口）
+    const [filters, setFilters] = useState({
+        listCategory: undefined,
+        listStatus: undefined,
+    });
+
+    const columns = useMemo(() => {
+        return [
+            { title: '油品信息', dataIndex: 'name', key: 'name', width: 180 },
+            { title: '油品分类', dataIndex: 'category', key: 'category', width: 100 },
+            { title: '密度（P15）', dataIndex: 'density', key: 'density', width: 120 },
+            { title: '闪点（℃）', dataIndex: 'flashPoint', key: 'flashPoint', width: 100 },
+            { title: '粘度(MM²/S)', dataIndex: 'viscosity', key: 'viscosity', width: 120 },
+            { title: '硫含量(MG/KG)', dataIndex: 'sulfur', key: 'sulfur', width: 140 },
+            {
+                title: '状态',
+                dataIndex: 'enabled',
+                key: 'enabled',
+                width: 90,
+                render: (val, record) => (
+                    <Switch
+                        size="small"
+                        checked={val}
+                        onChange={(checked) => {
+                            record.enabled = checked;
+                            message.success(`已${checked ? '启用' : '停用'}`);
+                        }}
+                    />
+                ),
+            },
+            { title: '最后更新', dataIndex: 'updatedAt', key: 'updatedAt', width: 180 },
+            {
+                title: '操作',
+                key: 'action',
+                fixed: 'right',
+                width: 180,
+                render: () => (
+                    <Space size={12}>
+                        <Button type="link" size="small">查看详情</Button>
+                        <Button type="link" size="small">修改</Button>
+                        <Button type="link" size="small" danger>删除</Button>
+                    </Space>
+                ),
+            },
+        ];
+    }, []);
+
+    const tableData = [
+        {
+            key: '1',
+            name: '92#汽油P001',
+            category: '汽油',
+            density: '0.852 kg/L',
+            flashPoint: '-43',
+            viscosity: '0.55',
+            sulfur: '10',
+            enabled: true,
+            updatedAt: '2025-10-25 22:30:16',
+        },
+        {
+            key: '2',
+            name: '95#汽油P001',
+            category: '汽油',
+            density: '0.725 kg/L',
+            flashPoint: '-43',
+            viscosity: '0.55',
+            sulfur: '10',
+            enabled: false,
+            updatedAt: '2025-10-25 10:28:14',
+        },
+        {
+            key: '3',
+            name: '0#柴油油P003',
+            category: '柴油',
+            density: '0.832 kg/L',
+            flashPoint: '65',
+            viscosity: '3.0',
+            sulfur: '10',
+            enabled: true,
+            updatedAt: '2025-10-23 20:58:24',
+        },
+        {
+            key: '4',
+            name: '航空煤油P004',
+            category: '航空煤油',
+            density: '0.852 kg/L',
+            flashPoint: '48',
+            viscosity: '1.25',
+            sulfur: '8',
+            enabled: false,
+            updatedAt: '2025-10-23 04:59:13',
+        },
+        {
+            key: '5',
+            name: '测流油P005',
+            category: '测流油',
+            density: '0.876 kg/L',
+            flashPoint: '32',
+            viscosity: '2.00',
+            sulfur: '300',
+            enabled: false,
+            updatedAt: '2025-10-22 03:03:13',
+        },
+    ];
+
+    const onSubmit = () => {
+        form.validateFields().then((values) => {
+            // 提交时可对接接口
+            // eslint-disable-next-line no-console
+            console.log('基本信息提交: ', values);
+            message.success('已保存基本信息');
+        });
+    };
+
+    const onReset = () => {
+        form.resetFields();
+        message.info('已重置基本信息');
+    };
+
+    return (
+        <div className={styles.container}>
+            <Card className={styles.section}>
+                <div className={styles.blockTitle}>基本信息</div>
+                <div className={styles.panel}>
+                    <Form
+                        form={form}
+                        layout="vertical"
+                        className={styles.formGrid}
+                        initialValues={{
+                            productCode: 'GAS-2023-045',
+                            productName: '92号汽油',
+                            category: undefined,
+                            status: undefined,
+                            description: '92号汽油，适用于大多数汽油发动机，具有优良的抗爆性能和清洁性能。',
+                        }}
+                    >
+                        <Form.Item
+                            label="油品代码（SKU）:"
+                            name="productCode"
+                            rules={[{ required: true, message: '请输入油品代码' }]}
+                        >
+                            <Input placeholder="" />
+                        </Form.Item>
+                        <Form.Item
+                            label="油品名称:"
+                            name="productName"
+                            rules={[{ required: true, message: '请输入油品名称' }]}
+                        >
+                            <Input placeholder="" />
+                        </Form.Item>
+                        <Form.Item label="油品分类:" name="category">
+                            <Select
+                                placeholder="请选择"
+                                allowClear
+                                options={[
+                                    { label: '汽油', value: '汽油' },
+                                    { label: '柴油', value: '柴油' },
+                                    { label: '航煤', value: '航煤' },
+                                ]}
+                            />
+                        </Form.Item>
+                        <Form.Item label="状态:" name="status">
+                            <Select
+                                placeholder="请选择"
+                                allowClear
+                                options={[
+                                    { label: '启用', value: '启用' },
+                                    { label: '停用', value: '停用' },
+                                ]}
+                            />
+                        </Form.Item>
+                        <Form.Item
+                            label="油品描述:"
+                            name="description"
+                            className={styles.colDesc}
+                        >
+                            <Input.TextArea rows={5} placeholder="" />
+                        </Form.Item>
+                        <div className={styles.colButtons}>
+                            <Space direction="vertical">
+                                <Button type="primary" onClick={onSubmit}>保存</Button>
+                                <Button onClick={onReset}>取消</Button>
+                            </Space>
+                        </div>
+                    </Form>
+                </div>
+            </Card>
+
+            <Card className={styles.section}>
+                <div className={styles.listHeader}>
+                    <div className={styles.blockTitle}>油品列表</div>
+                    <Space>
+                        <Button type="primary" icon={<PlusOutlined />}>新增油品</Button>
+                        <Button icon={<ExportOutlined />}>批量导出</Button>
+                    </Space>
+                </div>
+                <div className={styles.filterRow}>
+                    <div className={styles.filterItem}>
+                        <div className={styles.filterLabel}>油品分类:</div>
+                        <Select
+                            value={filters.listCategory}
+                            onChange={(v) => setFilters({ ...filters, listCategory: v })}
+                            placeholder="全部"
+                            style={{ width: 140 }}
+                            options={[
+                                { label: '全部', value: undefined },
+                                { label: '汽油', value: '汽油' },
+                                { label: '柴油', value: '柴油' },
+                            ]}
+                            allowClear
+                        />
+                    </div>
+                    <div className={styles.filterItem}>
+                        <div className={styles.filterLabel}>油品状态:</div>
+                        <Select
+                            value={filters.listStatus}
+                            onChange={(v) => setFilters({ ...filters, listStatus: v })}
+                            placeholder="全部"
+                            style={{ width: 140 }}
+                            options={[
+                                { label: '全部', value: undefined },
+                                { label: '启用', value: '启用' },
+                                { label: '停用', value: '停用' },
+                            ]}
+                            allowClear
+                        />
+                    </div>
+                    <Space>
+                        <Button type="primary" icon={<SearchOutlined />}>查询</Button>
+                        <Button icon={<ReloadOutlined />}>重置</Button>
+                    </Space>
+                </div>
+                <StandardTable
+                    rowKey="key"
+                    columns={columns}
+                    data={{ list: tableData, pagination: { total: tableData.length, pageSize: 10, current: 1 } }}
+                />
+            </Card>
+        </div>
+    );
+};
+
+export default BasicInfo;
+
+
diff --git a/src/pages/business_basic/components/BasicInfo.less b/src/pages/business_basic/components/BasicInfo.less
new file mode 100644
index 0000000..a03b1c2
--- /dev/null
+++ b/src/pages/business_basic/components/BasicInfo.less
@@ -0,0 +1,72 @@
+@panel-border: #bfe3e3;
+@panel-bg: #f6fbfb;
+
+.container {
+    padding: 0;
+}
+
+.section {
+    margin-bottom: 16px;
+}
+
+.blockTitle {
+    font-size: 16px;
+    font-weight: 600;
+    color: #2f4f4f;
+    margin-bottom: 12px;
+}
+
+.panel {
+    border: 1px solid @panel-border;
+    background: @panel-bg;
+    border-radius: 6px;
+    padding: 12px;
+}
+
+.formGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1.5fr 120px; // 左2列输入、右侧描述、最右按钮列
+    grid-column-gap: 16px;
+    grid-row-gap: 12px;
+    align-items: start;
+}
+
+.colDesc {
+    grid-column: 3 / span 1;
+    grid-row: 1 / span 2;
+}
+
+.colButtons {
+    grid-column: 4 / span 1;
+    grid-row: 1 / span 2;
+    display: flex;
+    justify-content: flex-start;
+}
+
+.listHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.filterRow {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 12px;
+}
+
+.filterItem {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.filterLabel {
+    color: #666;
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+
diff --git a/src/pages/business_basic/components/CustomerInfoManagement.js b/src/pages/business_basic/components/CustomerInfoManagement.js
index 45398d2..904e94c 100644
--- a/src/pages/business_basic/components/CustomerInfoManagement.js
+++ b/src/pages/business_basic/components/CustomerInfoManagement.js
@@ -10,7 +10,7 @@ const CustomerInfoManagement = () => {
 
     const columns = [
         {
-            title: '编号',
+            title: '编号3333',
             dataIndex: 'id',
             key: 'id',
             width: 80,
diff --git a/src/pages/business_basic/components/CustomerInfoManagement.less b/src/pages/business_basic/components/CustomerInfoManagement.less
index 6b1387b..1bfbfe5 100644
--- a/src/pages/business_basic/components/CustomerInfoManagement.less
+++ b/src/pages/business_basic/components/CustomerInfoManagement.less
@@ -1,6 +1,6 @@
 .container {
     padding: 20px;
-    background: #f5f5f5;
+    // background: #f5f5f5;
     min-height: 100%;
 
     .header {
diff --git a/src/pages/business_basic/components/DataModeling.js b/src/pages/business_basic/components/DataModeling.js
index 78401f3..f03377b 100644
--- a/src/pages/business_basic/components/DataModeling.js
+++ b/src/pages/business_basic/components/DataModeling.js
@@ -10,7 +10,7 @@ const DataModeling = () => {
 
     const columns = [
         {
-            title: '编号',
+            title: '编号111',
             dataIndex: 'id',
             key: 'id',
             width: 80,
diff --git a/src/pages/business_basic/components/DataModeling.less b/src/pages/business_basic/components/DataModeling.less
index 6b1387b..1bfbfe5 100644
--- a/src/pages/business_basic/components/DataModeling.less
+++ b/src/pages/business_basic/components/DataModeling.less
@@ -1,6 +1,6 @@
 .container {
     padding: 20px;
-    background: #f5f5f5;
+    // background: #f5f5f5;
     min-height: 100%;
 
     .header {
diff --git a/src/pages/business_basic/components/OilDataManagement.js b/src/pages/business_basic/components/OilDataManagement.js
index 439fb5d..6556f04 100644
--- a/src/pages/business_basic/components/OilDataManagement.js
+++ b/src/pages/business_basic/components/OilDataManagement.js
@@ -1,119 +1,65 @@
-import React from 'react';
-import { Card, Table, Input, Button, Space } from 'antd';
-import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+import { Card, Select } from 'antd';
 import styles from './OilDataManagement.less';
+import BasicInfo from './BasicInfo';
+import PhysChem from './PhysChem';
 
 const OilDataManagement = () => {
-    const onSearch = (value) => {
-        console.log('搜索内容:', value);
-    };
-
-    const columns = [
-        {
-            title: '编号',
-            dataIndex: 'id',
-            key: 'id',
-            width: 80,
-        },
-        {
-            title: '油品名称',
-            dataIndex: 'oilName',
-            key: 'oilName',
-            width: 120,
-        },
-        {
-            title: '油品类型',
-            dataIndex: 'oilType',
-            key: 'oilType',
-            width: 120,
-        },
-        {
-            title: '规格',
-            dataIndex: 'specification',
-            key: 'specification',
-            width: 100,
-        },
-        {
-            title: '库存量',
-            dataIndex: 'stock',
-            key: 'stock',
-            width: 100,
-        },
-        {
-            title: '单位',
-            dataIndex: 'unit',
-            key: 'unit',
-            width: 80,
-        },
-        {
-            title: '创建时间',
-            dataIndex: 'createTime',
-            key: 'createTime',
-            width: 180,
-        },
-        {
-            title: '操作',
-            dataIndex: 'action',
-            key: 'action',
-            width: 150,
-            render: (text, record) => (
-                <Space>
-                    <Button type="link" size="small">编辑</Button>
-                    <Button type="link" size="small" danger>删除</Button>
-                </Space>
-            ),
-        },
-    ];
-
-    const tableData = [
-        {
-            key: '1',
-            id: '001',
-            oilName: '92号汽油',
-            oilType: '汽油',
-            specification: '92#',
-            stock: '5000',
-            unit: '升',
-            createTime: '2024-12-20 10:00:00',
-        },
-        {
-            key: '2',
-            id: '002',
-            oilName: '95号汽油',
-            oilType: '汽油',
-            specification: '95#',
-            stock: '3000',
-            unit: '升',
-            createTime: '2024-12-20 10:00:00',
-        },
-    ];
+    // 顶部一行选择：第一个为“基本信息/理化性质”，其余占位
+    const [firstMenu, setFirstMenu] = useState('basic');
+    const [secondMenu, setSecondMenu] = useState(undefined);
+    const [thirdMenu, setThirdMenu] = useState(undefined);
+    const [fourthMenu, setFourthMenu] = useState(undefined);
+    const [fifthMenu, setFifthMenu] = useState(undefined);
 
     return (
         <div className={styles.container}>
-            <Card>
-                <div className={styles.header}>
-                    <div className={styles.title}>油资料管理</div>
-                    <Space>
-                        <Input.Search
-                            placeholder="搜索油品名称..."
-                            onSearch={onSearch}
-                            style={{ width: 200 }}
-                            prefix={<SearchOutlined />}
-                        />
-                        <Button type="primary" icon={<PlusOutlined />}>
-                            新增油品
-                        </Button>
-                    </Space>
-                </div>
-                <Table
-                    columns={columns}
-                    dataSource={tableData}
-                    pagination={{
-                        pageSize: 10,
-                        showTotal: (total) => `共 ${total} 条`,
-                    }}
+            <div className={styles.topBar}>
+                <div className={styles.currentLabel}>当前：</div>
+                <Select
+                    className={styles.topSelect}
+                    value={firstMenu}
+                    onChange={setFirstMenu}
+                    options={[
+                        { label: '基本信息', value: 'basic' },
+                        { label: '理化性质', value: 'physchem' },
+                    ]}
+                />
+                <Select
+                    className={styles.topSelect}
+                    value={secondMenu}
+                    onChange={setSecondMenu}
+                    placeholder="安全与合规"
+                    options={[]}
+                    disabled
+                />
+                <Select
+                    className={styles.topSelect}
+                    value={thirdMenu}
+                    onChange={setThirdMenu}
+                    placeholder="业务属性"
+                    options={[]}
+                    disabled
                 />
-            </Card>
+                <Select
+                    className={styles.topSelect}
+                    value={fourthMenu}
+                    onChange={setFourthMenu}
+                    placeholder="文档资料"
+                    options={[]}
+                    disabled
+                />
+                <Select
+                    className={styles.topSelect}
+                    value={fifthMenu}
+                    onChange={setFifthMenu}
+                    placeholder="审计日志"
+                    options={[]}
+                    disabled
+                />
+            </div>
+
+            {firstMenu === 'basic' ? <BasicInfo /> : <PhysChem />}
         </div>
     );
 };
diff --git a/src/pages/business_basic/components/OilDataManagement.less b/src/pages/business_basic/components/OilDataManagement.less
index 6b1387b..9020e8e 100644
--- a/src/pages/business_basic/components/OilDataManagement.less
+++ b/src/pages/business_basic/components/OilDataManagement.less
@@ -1,18 +1,90 @@
 .container {
     padding: 20px;
-    background: #f5f5f5;
+    // background: #f5f5f5;
     min-height: 100%;
 
-    .header {
+    .topBar {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        margin-bottom: 20px;
+        gap: 12px;
+        padding: 8px 12px;
+        background: #f0f7f7;
+        border: 1px solid #e1eeee;
+        border-radius: 6px;
+        margin-bottom: 16px;
 
-        .title {
-            font-size: 18px;
+        .currentLabel {
+            color: #2f4f4f;
             font-weight: 600;
-            color: #333;
+        }
+
+        .topSelect {
+            width: 160px;
+        }
+    }
+
+    .section {
+        margin-bottom: 16px;
+
+        .blockTitle {
+            font-size: 16px;
+            font-weight: 600;
+            color: #2f4f4f;
+            margin-bottom: 12px;
+        }
+
+        .formGrid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-column-gap: 16px;
+            grid-row-gap: 12px;
+
+            .formItem {
+                display: flex;
+                flex-direction: column;
+
+                .label {
+                    color: #666;
+                    font-size: 12px;
+                    margin-bottom: 6px;
+                }
+            }
+
+            .span2 {
+                grid-column: 1 / span 2;
+            }
+        }
+
+        .actionsRight {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 12px;
+        }
+
+        .listHeader {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+        }
+
+        .filterRow {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            margin-bottom: 12px;
+
+            .filterItem {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+
+                .filterLabel {
+                    color: #666;
+                    font-size: 12px;
+                    white-space: nowrap;
+                }
+            }
         }
     }
 }
diff --git a/src/pages/business_basic/components/PhysChem.js b/src/pages/business_basic/components/PhysChem.js
new file mode 100644
index 0000000..03c095c
--- /dev/null
+++ b/src/pages/business_basic/components/PhysChem.js
@@ -0,0 +1,294 @@
+import React, { useMemo, useState } from 'react';
+import { Card, Input, Button, Space, Select, Switch, message } from 'antd';
+import { PlusOutlined, SearchOutlined, ReloadOutlined, ExportOutlined } from '@ant-design/icons';
+import StandardTable from '@/components/StandardTable';
+import styles from './PhysChem.less';
+
+const PhysChem = () => {
+    const [form, setForm] = useState({
+        densityP15: '0.735',
+        octane: '92',
+        flashPoint: '-38',
+        initBoilingPoint: '35',
+        ninetyBoilingPoint: '180',
+        aromaticContent: '8',
+        kinematicViscosity: '2.5',
+        rvp: '60',
+        tenBoilingPoint: '55',
+    });
+
+    const [filters, setFilters] = useState({
+        listCategory: undefined,
+        listStatus: undefined,
+    });
+
+    const onSave = () => {
+        message.success('已保存理化性质');
+    };
+
+    const onCancel = () => {
+        message.info('已取消更改');
+    };
+
+    const onQuery = () => {
+        message.success('已按条件查询列表');
+    };
+
+    const onReset = () => {
+        setFilters({ listCategory: undefined, listStatus: undefined });
+        message.info('筛选已重置');
+    };
+
+    const columns = useMemo(() => {
+        return [
+            { title: '油品信息', dataIndex: 'name', key: 'name', width: 180 },
+            { title: '油品分类', dataIndex: 'category', key: 'category', width: 100 },
+            { title: '密度（P15）', dataIndex: 'density', key: 'density', width: 120 },
+            { title: '闪点（℃）', dataIndex: 'flashPoint', key: 'flashPoint', width: 100 },
+            { title: '粘度(MM²/S)', dataIndex: 'viscosity', key: 'viscosity', width: 120 },
+            { title: '硫含量(MG/KG)', dataIndex: 'sulfur', key: 'sulfur', width: 140 },
+            {
+                title: '状态',
+                dataIndex: 'enabled',
+                key: 'enabled',
+                width: 90,
+                render: (val, record) => (
+                    <Switch
+                        size="small"
+                        checked={val}
+                        onChange={(checked) => {
+                            record.enabled = checked;
+                            message.success(`已${checked ? '启用' : '停用'}`);
+                        }}
+                    />
+                ),
+            },
+            { title: '最后更新', dataIndex: 'updatedAt', key: 'updatedAt', width: 180 },
+            {
+                title: '操作',
+                key: 'action',
+                fixed: 'right',
+                width: 180,
+                render: (_, record) => (
+                    <Space size={12}>
+                        <Button type="link" size="small">查看详情</Button>
+                        <Button type="link" size="small">修改</Button>
+                        <Button type="link" size="small" danger>删除</Button>
+                    </Space>
+                ),
+            },
+        ];
+    }, []);
+
+    const tableData = [
+        {
+            key: '1',
+            name: '92#汽油P001',
+            category: '汽油',
+            density: '0.852 kg/L',
+            flashPoint: '-43',
+            viscosity: '0.55',
+            sulfur: '10',
+            enabled: true,
+            updatedAt: '2025-10-25 22:30:16',
+        },
+        {
+            key: '2',
+            name: '95#汽油P001',
+            category: '汽油',
+            density: '0.725 kg/L',
+            flashPoint: '-43',
+            viscosity: '0.55',
+            sulfur: '10',
+            enabled: false,
+            updatedAt: '2025-10-25 10:28:14',
+        },
+        {
+            key: '3',
+            name: '0#柴油油P003',
+            category: '柴油',
+            density: '0.832 kg/L',
+            flashPoint: '65',
+            viscosity: '3.0',
+            sulfur: '10',
+            enabled: true,
+            updatedAt: '2025-10-23 20:58:24',
+        },
+        {
+            key: '4',
+            name: '航空煤油P004',
+            category: '航空煤油',
+            density: '0.852 kg/L',
+            flashPoint: '48',
+            viscosity: '1.25',
+            sulfur: '8',
+            enabled: false,
+            updatedAt: '2025-10-23 04:59:13',
+        },
+        {
+            key: '5',
+            name: '测流油P005',
+            category: '测流油',
+            density: '0.876 kg/L',
+            flashPoint: '32',
+            viscosity: '2.00',
+            sulfur: '300',
+            enabled: false,
+            updatedAt: '2025-10-22 03:03:13',
+        },
+    ];
+
+    return (
+        <div className={styles.container}>
+            <Card className={styles.section}>
+                <div className={styles.blockTitle}>理化性质</div>
+                <div className={styles.panel}>
+                    <div className={styles.formGrid}>
+                        <div className={styles.formItem}>
+                            <div className={styles.label}>标准密度(p15)<span className={styles.required}>*</span>:</div>
+                            <Input
+                                value={form.densityP15}
+                                onChange={(e) => setForm({ ...form, densityP15: e.target.value })}
+                                addonAfter="kg/L"
+                                placeholder=""
+                            />
+                        </div>
+                        <div className={styles.formItem}>
+                            <div className={styles.label}>辛烷值<span className={styles.required}>*</span>:</div>
+                            <Input
+                                value={form.octane}
+                                onChange={(e) => setForm({ ...form, octane: e.target.value })}
+                                placeholder=""
+                            />
+                        </div>
+                        <div className={styles.formItem}>
+                            <div className={styles.label}>闪点<span className={styles.required}>*</span>:</div>
+                            <Input
+                                value={form.flashPoint}
+                                onChange={(e) => setForm({ ...form, flashPoint: e.target.value })}
+                                addonAfter="℃"
+                                placeholder=""
+                            />
+                        </div>
+                        <div className={styles.formItem}>
+                            <div className={styles.label}>初馏点<span className={styles.required}>*</span>:</div>
+                            <Input
+                                value={form.initBoilingPoint}
+                                onChange={(e) => setForm({ ...form, initBoilingPoint: e.target.value })}
+                                addonAfter="℃"
+                                placeholder=""
+                            />
+                        </div>
+                        <div className={styles.formItem}>
+                            <div className={styles.label}>90%馏出温度<span className={styles.required}>*</span>:</div>
+                            <Input
+                                value={form.ninetyBoilingPoint}
+                                onChange={(e) => setForm({ ...form, ninetyBoilingPoint: e.target.value })}
+                                addonAfter="℃"
+                                placeholder=""
+                            />
+                        </div>
+                        <div className={styles.formItem}>
+                            <div className={styles.label}>芳烃含量<span className={styles.required}>*</span>:</div>
+                            <Input
+                                value={form.aromaticContent}
+                                onChange={(e) => setForm({ ...form, aromaticContent: e.target.value })}
+                                addonAfter="ppm"
+                                placeholder=""
+                            />
+                        </div>
+                        <div className={styles.formItem}>
+                            <div className={styles.label}>运动粘度:</div>
+                            <Input
+                                value={form.kinematicViscosity}
+                                onChange={(e) => setForm({ ...form, kinematicViscosity: e.target.value })}
+                                addonAfter="cSt"
+                                placeholder=""
+                            />
+                        </div>
+                        <div className={styles.formItem}>
+                            <div className={styles.label}>蒸汽压(RVP):</div>
+                            <Input
+                                value={form.rvp}
+                                onChange={(e) => setForm({ ...form, rvp: e.target.value })}
+                                addonAfter="kPa"
+                                placeholder=""
+                            />
+                        </div>
+                        <div className={styles.formItem}>
+                            <div className={styles.label}>10%馏出温度<span className={styles.required}>*</span>:</div>
+                            <Input
+                                value={form.tenBoilingPoint}
+                                onChange={(e) => setForm({ ...form, tenBoilingPoint: e.target.value })}
+                                addonAfter="℃"
+                                placeholder=""
+                            />
+                        </div>
+                    </div>
+                    <div className={styles.actionsRight}>
+                        <Space>
+                            <Button type="primary" onClick={onSave}>保存</Button>
+                            <Button onClick={onCancel}>取消</Button>
+                        </Space>
+                    </div>
+                </div>
+            </Card>
+
+            <Card className={styles.section}>
+                <div className={styles.listHeader}>
+                    <div className={styles.blockTitle}>油品列表</div>
+                    <Space>
+                        <Button type="primary" icon={<PlusOutlined />}>新增油品</Button>
+                        <Button icon={<ExportOutlined />}>批量导出</Button>
+                    </Space>
+                </div>
+                <div className={styles.filterRow}>
+                    <div className={styles.filterItem}>
+                        <div className={styles.filterLabel}>油品分类:</div>
+                        <Select
+                            value={filters.listCategory}
+                            onChange={(v) => setFilters({ ...filters, listCategory: v })}
+                            placeholder="全部"
+                            style={{ width: 140 }}
+                            options={[
+                                { label: '全部', value: undefined },
+                                { label: '汽油', value: '汽油' },
+                                { label: '柴油', value: '柴油' },
+                            ]}
+                            allowClear
+                        />
+                    </div>
+                    <div className={styles.filterItem}>
+                        <div className={styles.filterLabel}>油品状态:</div>
+                        <Select
+                            value={filters.listStatus}
+                            onChange={(v) => setFilters({ ...filters, listStatus: v })}
+                            placeholder="全部"
+                            style={{ width: 140 }}
+                            options={[
+                                { label: '全部', value: undefined },
+                                { label: '启用', value: '启用' },
+                                { label: '停用', value: '停用' },
+                            ]}
+                            allowClear
+                        />
+                    </div>
+                    <Space>
+                        <Button type="primary" icon={<SearchOutlined />} onClick={onQuery}>查询</Button>
+                        <Button icon={<ReloadOutlined />} onClick={onReset}>重置</Button>
+                    </Space>
+                </div>
+                <StandardTable
+                    rowKey="key"
+                    columns={columns}
+                    data={{ list: tableData, pagination: { total: tableData.length, pageSize: 10, current: 1 } }}
+                    // use default small size from StandardTable
+                />
+            </Card>
+        </div>
+    );
+};
+
+export default PhysChem;
+
+
diff --git a/src/pages/business_basic/components/PhysChem.less b/src/pages/business_basic/components/PhysChem.less
new file mode 100644
index 0000000..7c8b048
--- /dev/null
+++ b/src/pages/business_basic/components/PhysChem.less
@@ -0,0 +1,81 @@
+@panel-border: #bfe3e3;
+@panel-bg: #f6fbfb;
+
+.container {
+    padding: 0;
+}
+
+.section {
+    margin-bottom: 16px;
+}
+
+.blockTitle {
+    font-size: 16px;
+    font-weight: 600;
+    color: #2f4f4f;
+    margin-bottom: 12px;
+}
+
+.panel {
+    border: 1px solid @panel-border;
+    background: @panel-bg;
+    border-radius: 6px;
+    padding: 12px;
+}
+
+.formGrid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: 16px;
+    grid-row-gap: 12px;
+}
+
+.formItem {
+    display: flex;
+    flex-direction: column;
+}
+
+.label {
+    color: #666;
+    font-size: 12px;
+    margin-bottom: 6px;
+}
+
+.required {
+    color: #fa541c;
+    margin-left: 2px;
+}
+
+.actionsRight {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 12px;
+}
+
+.listHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.filterRow {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 12px;
+}
+
+.filterItem {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.filterLabel {
+    color: #666;
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+