diff --git a/src/router/modules/sales.js b/src/router/modules/sales.js
index 6712a57..6e04a1b 100644
--- a/src/router/modules/sales.js
+++ b/src/router/modules/sales.js
@@ -71,6 +71,37 @@ export default [
                     },
                 ],
             },
+            {
+                path: 'product',
+                name: 'ProductManagement',
+                component: () => import('@/views/sales/product/index.vue'),
+                meta: {
+                    title: '商品管理',
+                    icon: 'barcode-box-fill',
+                },
+                children: [
+                    {
+                        path: 'create',
+                        name: 'CreateProduct',
+                        component: () => import('@/views/sales/product/form/index.vue'),
+                        meta: {
+                            title: '创建商品',
+                            icon: 'barcode-box-fill',
+                            hidden: true,
+                        },
+                    },
+                    {
+                        path: 'update/:id/:step?',
+                        name: 'UpdateProduct',
+                        component: () => import('@/views/sales/product/form/index.vue'),
+                        meta: {
+                            title: '编辑商品',
+                            icon: 'barcode-box-fill',
+                            hidden: true,
+                        },
+                    },
+                ],
+            },
         ],
     },
 ];
diff --git a/src/store/modules/sales/product.js b/src/store/modules/sales/product.js
new file mode 100644
index 0000000..57d109e
--- /dev/null
+++ b/src/store/modules/sales/product.js
@@ -0,0 +1,130 @@
+import * as api from '@/api/sales/category.js';
+import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
+const state = () => ({
+    code: 'ProductManagement',
+    condition: {
+        orderIs: [],
+    },
+    list: [],
+    total: 0,
+    summary: [],
+    opts: {
+        init: false,
+        category: [],
+        tag: [
+            {
+                label: '爆款',
+                value: 1,
+            },
+            {
+                label: '推荐',
+                value: 2,
+            },
+            {
+                label: '特价',
+                value: 3,
+            },
+        ],
+        limit: [
+            {
+                label: '不限购',
+                value: 0,
+            },
+            {
+                label: '单人单次限购',
+                value: 1,
+            },
+        ],
+        postage: [
+            {
+                label: '全国包邮，偏远地区除外（青海、西藏、新疆地区）',
+                value: 0,
+            },
+        ],
+    },
+});
+const getters = {};
+const mutations = {
+    setCode: (state, data) => (state.code = data),
+    setCondition: (state, data) => (state.condition = data),
+    setList: (state, data) => (state.list = data),
+    setTotal: (state, data) => (state.total = data),
+    setSummary: (state, data) => (state.summary = data),
+    setOpts: (state, data) => (state.opts = data),
+};
+const actions = {
+    search: async ({ state, commit }) => {
+        let data = { ...state.condition };
+        data.productStatus = (data.productStatus || []).join(',');
+        if (data.productStatus === '0') {
+            delete data.productStatus;
+        }
+        let res = await api.search(data);
+        commit('setList', res);
+        if (!res) {
+            ElMessage.error('查询商品列表失败');
+        }
+        return res;
+    },
+    load: async ({ state, commit }) => {
+        commit('setOpts', {
+            ...state.opts,
+            init: true,
+            category: await api.search(),
+        });
+    },
+    detail: async ({ state, dispatch }, id) => {
+        if (!state.list.length) {
+            await dispatch('search');
+        }
+        let res = state.list.find((item) => item.id === id);
+        if (!res) {
+            ElMessage.error('加载详情失败');
+        }
+        return res;
+    },
+    save: async ({ dispatch }, data) => {
+        let save = data.id ? api.update : api.create;
+        let res = await save(data);
+        if (res) {
+            ElMessage.success('保存成功');
+            dispatch('search');
+        } else {
+            ElMessage.error('保存失败');
+        }
+        return res;
+    },
+    sort: async (context, data) => {
+        let res = await api.sort(data);
+        if (res) {
+            ElMessage.success(`移动前序号：${data.oldSort + 1}；移动后序号：${data.currentSort + 1}`);
+        } else {
+            ElMessage.error('保存排序失败');
+        }
+        return res;
+    },
+    remove: async ({ dispatch }, ids) => {
+        if (!ids.length) {
+            ElMessage.warning('请选择要删除的数据');
+        } else {
+            try {
+                await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
+                let res = await api.remove({ id: ids.join(',') });
+                if (res) {
+                    ElMessage.success('删除成功');
+                    dispatch('search');
+                } else {
+                    ElMessage.error('删除失败');
+                }
+            } catch (e) {
+                console.info('取消删除', e);
+            }
+        }
+    },
+};
+export default {
+    state,
+    getters,
+    mutations,
+    actions,
+};
diff --git a/src/store/modules/sales/productPicker.js b/src/store/modules/sales/productPicker.js
index bd2b9ed..4e10d31 100644
--- a/src/store/modules/sales/productPicker.js
+++ b/src/store/modules/sales/productPicker.js
@@ -1,5 +1,5 @@
 import * as api from '@/api/sales/category.js';
-import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
+import { ElMessage } from '@/plugins/element-plus';
 const state = () => ({
     code: 'ProductPicker',
     condition: {
@@ -27,7 +27,7 @@ const actions = {
         let res = await api.search(state.condition);
         commit('setList', res);
         if (!res) {
-            ElMessage.error('查询商品分类列表失败');
+            ElMessage.error('查询商品列表失败');
         }
         return res;
     },
@@ -38,54 +38,6 @@ const actions = {
             category: await api.search(),
         });
     },
-    detail: async ({ state, dispatch }, id) => {
-        if (!state.list.length) {
-            await dispatch('search');
-        }
-        let res = state.list.find((item) => item.id === id);
-        if (!res) {
-            ElMessage.error('加载详情失败');
-        }
-        return res;
-    },
-    save: async ({ dispatch }, data) => {
-        let save = data.id ? api.update : api.create;
-        let res = await save(data);
-        if (res) {
-            ElMessage.success('保存成功');
-            dispatch('search');
-        } else {
-            ElMessage.error('保存失败');
-        }
-        return res;
-    },
-    sort: async (context, data) => {
-        let res = await api.sort(data);
-        if (res) {
-            ElMessage.success(`移动前序号：${data.oldSort + 1}；移动后序号：${data.currentSort + 1}`);
-        } else {
-            ElMessage.error('保存排序失败');
-        }
-        return res;
-    },
-    remove: async ({ dispatch }, ids) => {
-        if (!ids.length) {
-            ElMessage.warning('请选择要删除的数据');
-        } else {
-            try {
-                await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
-                let res = await api.remove({ id: ids.join(',') });
-                if (res) {
-                    ElMessage.success('删除成功');
-                    dispatch('search');
-                } else {
-                    ElMessage.error('删除失败');
-                }
-            } catch (e) {
-                console.info('取消删除', e);
-            }
-        }
-    },
 };
 export default {
     state,
diff --git a/src/views/sales/product/form/index.vue b/src/views/sales/product/form/index.vue
new file mode 100644
index 0000000..9bb02b0
--- /dev/null
+++ b/src/views/sales/product/form/index.vue
@@ -0,0 +1,46 @@
+<template>
+    <div class="form-container">
+        <el-steps :active="+activeStep" finish-status="success" simple>
+            <el-step v-for="(item, index) in steps" :key="index" :title="index + 1 + '、' + item.label" />
+        </el-steps>
+        <keep-alive>
+            <component :is="'Step' + activeStep" />
+        </keep-alive>
+    </div>
+</template>
+
+<script>
+    import Step1 from './step1.vue';
+    import Step2 from './step2.vue';
+    export default defineComponent({
+        name: 'ProductForm',
+        components: { Step1, Step2 },
+        setup() {
+            const route = useRoute();
+            const activeStep = computed(() => route.params.step || 1);
+            const state = reactive({
+                steps: [{ label: '填写商品信息' }, { label: '填写商品属性' }],
+            });
+            return {
+                activeStep,
+                ...toRefs(state),
+            };
+        },
+    });
+</script>
+
+<style lang="less" scoped>
+    .form-container {
+        display: flex;
+        flex-direction: column;
+        .el-steps {
+            width: 100%;
+            margin-bottom: 20px;
+            box-sizing: border-box;
+        }
+        .step-container {
+            flex: 1;
+            overflow: hidden auto;
+        }
+    }
+</style>
diff --git a/src/views/sales/product/form/step1.vue b/src/views/sales/product/form/step1.vue
new file mode 100644
index 0000000..73d05c7
--- /dev/null
+++ b/src/views/sales/product/form/step1.vue
@@ -0,0 +1,125 @@
+<template>
+    <div v-loading="loading" class="step-container">
+        <el-scrollbar class="step-content">
+            <el-form ref="refsForm" label-width="110px" :model="form" :rules="rules">
+                <el-form-item label="商品分类" prop="category">
+                    <el-cascader
+                        v-model="form.category"
+                        :options="opts.category"
+                        :props="{
+                            checkStrictly: true,
+                            expandTrigger: 'hover',
+                            label: 'name',
+                            value: 'id',
+                            children: 'children',
+                            emitPath: false,
+                        }"
+                    />
+                </el-form-item>
+                <el-form-item label="商品分类" prop="category">
+                    <el-input v-model="form.category" maxlength="50" />
+                </el-form-item>
+                <el-form-item label="商品备注" prop="category">
+                    <el-input v-model="form.category" type="textarea" />
+                </el-form-item>
+                <el-form-item label="商品上架" prop="category">
+                    <el-switch v-model="form.category" />
+                </el-form-item>
+                <el-form-item label="商品标签" prop="category">
+                    <el-checkbox-group v-model="form.tag" :opts="opts.tag" />
+                </el-form-item>
+                <el-form-item label="限购设置" prop="limit">
+                    <el-radio-group v-model="form.limit" :opts="opts.limit" />
+                    <el-input-number v-show="form.limit === 1" v-model="form.limitValue" />
+                </el-form-item>
+                <el-form-item label="邮费设置" prop="postage">
+                    <el-radio-group v-model="form.postage" :opts="opts.postage" />
+                    <el-input-number v-show="form.postage === 0" v-model="form.postageValue" />
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+        <div class="step-footer">
+            <el-button type="primary" @click="handleSave">下一步、填写商品属性</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default defineComponent({
+        name: 'ProductFormStep1',
+        setup() {
+            const route = useRoute();
+            const router = useRouter();
+            const store = useStore();
+
+            const state = reactive({
+                loading: false,
+                refsForm: null,
+                currentTab: 'APP',
+                form: {
+                    id: '123',
+                    limit: 0,
+                    limitValue: 0,
+                    postage: 0,
+                    postageValue: 10,
+                },
+                rules: {},
+            });
+            const opts = computed(() => store.state.product.opts);
+            if (!unref(opts).init) {
+                store.dispatch('product/load');
+            }
+            const handleLoad = async () => {
+                const id = route.params.id;
+                if (id && id !== state.form.id) {
+                    let res = await store.dispatch('product/detail', id);
+                    Object.assign(state.form, res);
+                }
+            };
+            onActivated(handleLoad);
+            const handleSave = async () => {
+                state.loading = true;
+                try {
+                    await state.refsForm.validate();
+                    router.push({
+                        name: 'UpdateProduct',
+                        params: {
+                            id: route.params.id || state.form.id,
+                            step: 2,
+                        },
+                    });
+                } catch (e) {
+                    console.info('取消保存', e);
+                }
+                state.loading = false;
+            };
+
+            return {
+                ...toRefs(state),
+                opts,
+                handleSave,
+            };
+        },
+    });
+</script>
+
+<style lang="less" scoped>
+    .step-container {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        .step-content {
+            flex: 1;
+            overflow: auto;
+            .flex {
+                display: flex;
+                .el-form-item {
+                    width: 50%;
+                }
+            }
+        }
+        .step-footer {
+            margin: 10px 0;
+        }
+    }
+</style>
diff --git a/src/views/sales/product/form/step2.vue b/src/views/sales/product/form/step2.vue
new file mode 100644
index 0000000..2cd400b
--- /dev/null
+++ b/src/views/sales/product/form/step2.vue
@@ -0,0 +1,96 @@
+<template>
+    <div v-loading="loading" class="step-container">
+        <el-scrollbar class="step-content">
+            <el-form ref="refsForm" label-width="110px" :model="form" :rules="rules">
+                <el-form-item label="商品属性" prop="category">设置商品属性</el-form-item>
+                <el-form-item label="商品图片" prop="picture">
+                    <el-upload-image v-model="form.picture" config-id="product" :limit="5" />
+                </el-form-item>
+                <el-form-item label="商品详情" prop="desc">
+                    <el-editor v-model="form.desc" />
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+        <div class="step-footer">
+            <el-button type="primary" @click="handleSave">下一步、填写商品属性</el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default defineComponent({
+        name: 'ProductFormStep2',
+        setup() {
+            const route = useRoute();
+            const router = useRouter();
+            const store = useStore();
+
+            const state = reactive({
+                loading: false,
+                refsForm: null,
+                currentTab: 'APP',
+                form: {
+                    id: '123',
+                    picture: [],
+                    desc: null,
+                },
+                rules: {},
+            });
+            const opts = computed(() => store.state.product.opts);
+            if (!unref(opts).init) {
+                store.dispatch('product/load');
+            }
+            const handleLoad = async () => {
+                const id = route.params.id;
+                if (id && id !== state.form.id) {
+                    let res = await store.dispatch('product/detail', id);
+                    Object.assign(state.form, res);
+                }
+            };
+            onActivated(handleLoad);
+            const handleSave = async () => {
+                state.loading = true;
+                try {
+                    await state.refsForm.validate();
+                    router.push({
+                        name: 'UpdateProduct',
+                        params: {
+                            id: route.params.id || state.form.id,
+                            step: 2,
+                        },
+                    });
+                } catch (e) {
+                    console.info('取消保存', e);
+                }
+                state.loading = false;
+            };
+
+            return {
+                ...toRefs(state),
+                opts,
+                handleSave,
+            };
+        },
+    });
+</script>
+
+<style lang="less" scoped>
+    .step-container {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        .step-content {
+            flex: 1;
+            overflow: auto;
+            .flex {
+                display: flex;
+                .el-form-item {
+                    width: 50%;
+                }
+            }
+        }
+        .step-footer {
+            margin: 10px 0;
+        }
+    }
+</style>
diff --git a/src/views/sales/product/index.vue b/src/views/sales/product/index.vue
new file mode 100644
index 0000000..6e5f89b
--- /dev/null
+++ b/src/views/sales/product/index.vue
@@ -0,0 +1,295 @@
+<template>
+    <div class="list-container">
+        <ul class="product-status">
+            <li v-for="(item, index) in opts.status" :key="index">
+                <el-button
+                    :type="state.condition.productStatus.includes(item.value) ? 'primary' : 'default'"
+                    @click="handleStatus(item.value)"
+                >
+                    <span>
+                        {{ item.label }}
+                    </span>
+                    <span>(</span>
+                    <span class="num">{{ summary[index] || 0 }}</span>
+                    <span>)</span>
+                </el-button>
+            </li>
+        </ul>
+        <TableList
+            v-loading="loading"
+            :code="code"
+            :config="config"
+            :data="list"
+            :operation="['search', 'create']"
+            :reset="handleReset"
+            title="商品"
+            :total="total"
+            @create="handleCreate"
+            @search="handleSearch"
+        >
+            <template #search>
+                <el-form inline>
+                    <el-form-item label="商品名称" prop="name">
+                        <el-input v-model="state.condition.name" />
+                    </el-form-item>
+                    <el-form-item label="商品分类" prop="category">
+                        <el-select
+                            v-model="state.condition.category"
+                            :config="{ label: 'name', value: 'id' }"
+                            :opts="opts.category"
+                        />
+                    </el-form-item>
+                    <el-form-item label="标签" prop="status">
+                        <el-select
+                            v-model="state.condition.tag"
+                            :config="{ label: 'name', value: 'id' }"
+                            :opts="opts.tag"
+                        />
+                    </el-form-item>
+                </el-form>
+            </template>
+        </TableList>
+    </div>
+</template>
+
+<script setup lang="jsx">
+    import ElButton from '@/components/extra/ElButton.vue';
+    import ElSwitch from '@/components/extra/ElSwitch.vue';
+    const router = useRouter();
+    const store = useStore();
+    const loading = ref(false);
+    const code = computed(() => store.state.product.code);
+    const list = computed(() => _.cloneDeep(store.state.product.list));
+    const total = computed(() => store.state.product.total);
+    const summary = computed(() => store.state.product.summary);
+    const opts = computed(() => store.state.product.opts);
+    if (!unref(opts).init) {
+        store.dispatch('product/load');
+    }
+
+    /* 查询订单 */
+    const state = reactive({
+        condition: {
+            orderNo: null,
+            userPhone: null,
+            orderSource: null,
+            productStatus: [0],
+            dateRange: [],
+            startTime: null,
+            endTime: null,
+        },
+    });
+    watch(
+        () => state.condition,
+        (value) => {
+            store.commit('product/setCondition', _.cloneDeep(value));
+        },
+        { immediate: true, deep: true }
+    );
+    watch(
+        () => state.condition.productStatus,
+        () => {
+            handleSearch();
+        },
+        { deep: true }
+    );
+    const handleReset = () => {
+        state.condition = {
+            orderNo: null,
+            userPhone: null,
+            orderSource: null,
+            productStatus: [0],
+            dateRange: [],
+            startTime: null,
+            endTime: null,
+        };
+    };
+    const handleStatus = (status) => {
+        let index = state.condition.productStatus.indexOf(status);
+        if (index === -1) {
+            if (status === 0) {
+                state.condition.productStatus = [0];
+            } else {
+                state.condition.productStatus.push(status);
+                state.condition.productStatus = state.condition.productStatus.filter((item) => item > 0);
+            }
+        } else {
+            if (status !== 0) {
+                state.condition.productStatus.splice(index, 1);
+                if (state.condition.productStatus.length) {
+                    state.condition.productStatus = state.condition.productStatus.filter((item) => item > 0);
+                } else {
+                    state.condition.productStatus = [0];
+                }
+            }
+        }
+    };
+    const handleSearch = async () => {
+        loading.value = true;
+        await store.dispatch('product/search');
+        loading.value = false;
+    };
+
+    /* 新增 */
+    const handleCreate = () => {
+        router.push({
+            name: 'CreateProduct',
+        });
+    };
+
+    /* 编辑 */
+    const handleUpdate = (row) => {
+        router.push({
+            name: 'UpdateProduct',
+            params: { id: row.id },
+        });
+    };
+
+    /* 删除 */
+    const handleRemove = (row) => {
+        store.dispatch('product/remove', row.id);
+    };
+
+    /* 查看详情 */
+    const handleDetail = (row) => {
+        router.push({
+            name: 'ProductDetail',
+            params: {
+                id: row.orderId,
+            },
+        });
+    };
+
+    /* 商品标签 */
+    const handleTag = (row, tag) => {
+        row[tag] = true;
+    };
+
+    /* SKU */
+    const handleSku = (row) => {
+        console.info(row);
+    };
+
+    /* SKU */
+    const handleEnabled = (row) => {
+        console.info(row);
+    };
+
+    /* 列表配置 */
+    const config = reactive({
+        columns: [
+            {
+                label: '编号',
+                prop: 'id',
+                minWidth: 100,
+                fixed: 'left',
+            },
+            {
+                label: '商品图片',
+                minWidth: 100,
+                slots: {
+                    default: ({ row }) => <ElImage src={row.picture} alt={row.name} height="100px" />,
+                },
+            },
+            {
+                label: '商品名称',
+                prop: 'name',
+                minWidth: 240,
+            },
+            {
+                label: '价格',
+                prop: 'payAmount',
+                minWidth: 120,
+            },
+            {
+                label: '标签',
+                width: 160,
+                slots: {
+                    default: ({ row }) => (
+                        <div>
+                            <ElSwitch value={row.hot} onInput={() => handleTag(row, 'hot')} active-text="爆款" />
+                            <ElSwitch
+                                value={row.recommand}
+                                onInput={() => handleTag(row, 'recommand')}
+                                active-text="推荐"
+                            />
+                            <ElSwitch
+                                value={row.special}
+                                onInput={() => handleTag(row, 'special')}
+                                active-text="特价"
+                            />
+                        </div>
+                    ),
+                },
+            },
+            {
+                label: '排序',
+                width: 120,
+                prop: 'orderSourceDesc',
+            },
+            {
+                label: 'SKU库存',
+                width: 120,
+                slots: {
+                    default: ({ row }) => (
+                        <ElButton type="text" onClick={() => handleSku(row)}>
+                            <ElIcon name="Edit" />
+                        </ElButton>
+                    ),
+                },
+            },
+            {
+                label: '上/下架',
+                width: 120,
+                slots: {
+                    default: ({ row }) => <ElSwitch value={row.isEnabled} onInput={() => handleEnabled(row)} />,
+                },
+            },
+            {
+                label: '销量',
+                prop: 'submitTime',
+                width: 180,
+                sortable: true,
+            },
+            {
+                label: '操作',
+                fixed: 'right',
+                width: 160,
+                slots: {
+                    default: ({ row }) => (
+                        <div>
+                            <ElButton type="text" onClick={() => handleDetail(row)}>
+                                查看
+                            </ElButton>
+                            <ElButton type="text" onClick={() => handleUpdate(row)}>
+                                编辑
+                            </ElButton>
+                            <ElButton type="text" onClick={() => handleRemove(row)}>
+                                删除
+                            </ElButton>
+                        </div>
+                    ),
+                },
+            },
+        ],
+    });
+</script>
+
+<style lang="less" scoped>
+    .list-container {
+        display: flex;
+        flex-direction: column;
+        .common-list {
+            flex-shrink: 1;
+        }
+        .product-status {
+            display: flex;
+            margin-bottom: @layout-space;
+            li {
+                + li {
+                    margin-left: @layout-space;
+                }
+            }
+        }
+    }
+</style>