diff --git a/src/api/open/openProduct.js b/src/api/open/openProduct.js
new file mode 100644
index 0000000000000000000000000000000000000000..c63ddf64d2e4ffcec868352af58a1dc28684aa3d
--- /dev/null
+++ b/src/api/open/openProduct.js
@@ -0,0 +1,167 @@
+import { request } from '@/utils/request.js'
+
+/**
+ * 商品 API JS
+ */
+
+export default {
+
+  /**
+   * 获取商品分页列表
+   * @returns
+   */
+  getList (params = {}) {
+    return request({
+      url: 'open/product/index',
+      method: 'get',
+      params
+    })
+  },
+
+  /**
+   * 添加商品
+   * @returns
+   */
+  save (data = {}) {
+    return request({
+      url: 'open/product/save',
+      method: 'post',
+      data
+    })
+  },
+
+  /**
+   * 更新商品数据
+   * @returns
+   */
+  update (id, data = {}) {
+    return request({
+      url: 'open/product/update/' + id,
+      method: 'put',
+      data
+    })
+  },
+
+  /**
+   * 读取商品
+   * @returns
+   */
+  read (data = {}) {
+    return request({
+      url: 'open/product/read',
+      method: 'get',
+      data
+    })
+  },
+
+  /**
+   * 将商品删除，有软删除则移动到回收站
+   * @returns
+   */
+  deletes (data) {
+    return request({
+      url: 'open/product/delete',
+      method: 'delete',
+      data
+    })
+  },
+
+  /**
+   * 从回收站获取商品数据列表
+   * @returns
+   */
+  getRecycleList (params = {}) {
+    return request({
+      url: 'open/product/recycle',
+      method: 'get',
+      params
+    })
+  },
+
+  /**
+   * 恢复商品数据
+   * @returns
+   */
+  recoverys (data) {
+    return request({
+      url: 'open/product/recovery',
+      method: 'put',
+      data
+    })
+  },
+
+  /**
+   * 真实删除商品
+   * @returns
+   */
+  realDeletes (data) {
+    return request({
+      url: 'open/product/realDelete',
+      method: 'delete',
+      data
+    })
+  },
+
+  /**
+   * 更改商品数据
+   * @returns
+   */
+  changeStatus (data = {}) {
+    return request({
+      url: 'open/product/changeStatus',
+      method: 'put',
+      data
+    })
+  },
+
+  /**
+   * 修改商品数值数据，自增自减
+   * @returns
+   */
+  numberOperation (data = {}) {
+    return request({
+      url: 'open/product/numberOperation',
+      method: 'put',
+      data
+    })
+  },
+
+  /**
+    * 商品导入
+    * @returns
+    */
+  importExcel (data = {}) {
+    return request({
+      url: 'open/product/import',
+      method: 'post',
+      data
+    })
+  },
+
+  /**
+   * 商品下载模板
+   * @returns
+   */
+  downloadTemplate () {
+    return request({
+      url: 'open/product/downloadTemplate',
+      method: 'post',
+      responseType: 'blob'
+    })
+  },
+
+  /**
+   * 商品导出
+   * @returns
+   */
+  exportExcel (params = {}) {
+    return request({
+      url: 'open/product/export',
+      method: 'post',
+      responseType: 'blob',
+      params
+    })
+  },
+
+
+}
\ No newline at end of file
diff --git a/src/components/ma-crud/index.vue b/src/components/ma-crud/index.vue
index b8c630d0b75382fe86540e015037213a36e72df7..742431f5a59b4ce5a74e0a3ea06bc39fab443137 100644
--- a/src/components/ma-crud/index.vue
+++ b/src/components/ma-crud/index.vue
@@ -211,7 +211,9 @@
       v-model="columns"
       v-model:crud="defaultCrud"
       @success="requestSuccess"
-    />
+    >
+      <slot name="form"></slot>
+    </ma-form>
 
     <ma-import
       ref="maCrudImport"
@@ -282,6 +284,8 @@ const defaultCrud = ref({
   dragSort: false,
   // 子节点为空隐藏节点按钮
   hideExpandButtonOnEmpty: true,
+  // 设置单列宽度
+  columnWidth: 80,
   // 默认展开所有行
   expandAllRows: false,
   // 斑马线
@@ -505,6 +509,10 @@ const requestData = async () => {
   if (defaultCrud.value.operationColumn && columns.value.length > 0 && columns.value[columns.value.length - 1].dataIndex !== '__operation') {
     columns.value.push({ title: defaultCrud.value.operationColumnText, dataIndex: '__operation', width: defaultCrud.value.operationWidth, align: 'right', fixed: 'right' })
   }
+  columns.value.forEach(item => {
+    item.width = defaultCrud.value.columnWidth
+  })
+  console.log(columns)
   showSearch.value = true
   initRequestParams()
   await refresh()
diff --git a/src/components/ma-form/index.vue b/src/components/ma-form/index.vue
index 7e5bfd52f2feeab77c6009154f037451a9c9bea8..dc8e954c2c868022836864190649a52eac73752f 100644
--- a/src/components/ma-form/index.vue
+++ b/src/components/ma-form/index.vue
@@ -593,6 +593,7 @@ const done = (status) => formLoading.value = status
 const requestDict = (url, method, params, data, timeout = 10 * 1000) => request({ url, method, params, data, timeout })
 
 const init = () => {
+  console.log(11111)
   formLoading.value = true
   const allowRequestFormType = ['radio', 'checkbox', 'select', 'transfer', 'treeSelect', 'tree-select', 'cascader']
   const allowCoverFormType = ['radio', 'checkbox', 'select', 'transfer']
@@ -610,6 +611,7 @@ const init = () => {
     })
 
     columns.value.map(async item => {
+      console.log(item)
 
       if (! form.value[item.dataIndex] && typeof form.value[item.dataIndex] == 'undefined') {
         form.value[item.dataIndex] = undefined
@@ -632,7 +634,7 @@ const init = () => {
         } else if (item.dict.url) {
           const response = await requestDict(item.dict.url, item.dict.method || 'GET', item.dict.params || {}, item.dict.body || {})
           if (response.data) {
-            formDictData.value[item.dataIndex] = handlerProps(allowCoverFormType, item, response.data)
+            formDictData.value[item.dataIndex] = typeof item.dict.success == 'function'  ? item.dict.success(allowCoverFormType, item, response.data) : handlerProps(allowCoverFormType, item, response.data)
           }
         } else if (item.dict.data) {
           if (isArray(item.dict.data)) {
diff --git a/src/views/open/product/index.vue b/src/views/open/product/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..06f7ed0ce99a58db47f685c25755b12390415be0
--- /dev/null
+++ b/src/views/open/product/index.vue
@@ -0,0 +1,345 @@
+<template>
+  <div class="ma-content-block lg:flex justify-between p-4">
+    <!-- CRUD 组件 -->
+    <ma-crud :crud="crud" :columns="columns" ref="crudRef">
+    </ma-crud>
+  </div>
+</template>
+<script setup>
+import { ref, reactive } from 'vue'
+import openProduct from '@/api/open/openProduct'
+import { Message } from '@arco-design/web-vue'
+import tool from '@/utils/tool'
+import * as common from '@/utils/common'
+
+const crudRef = ref()
+
+
+const numberOperation = (newValue, id, numberName) => {
+  openProduct.numberOperation({ id, numberName, numberValue: newValue }).then( res => {
+    res.success && Message.success(res.message)
+  }).catch( e => { console.log(e) } )
+}
+
+const switchStatus = (statusValue, id, statusName) => {
+  openProduct.changeStatus({ id, statusName, statusValue }).then( res => {
+    res.success && Message.success(res.message)
+  }).catch( e => { console.log(e) } )
+}
+
+
+const crud = reactive({
+  rowSelection: {
+    showCheckedAll: true
+  },
+  searchLabelWidth: '75px',
+  pk: 'id',
+  operationColumn: true,
+  operationWidth: 160,
+  viewLayoutSetting: {
+    layout: 'auto',
+    cols: 1,
+    viewType: 'modal',
+    width: 600
+  },
+  api: openProduct.getList,
+  recycleApi: openProduct.getRecycleList,
+  add: {
+    show: true,
+    api: openProduct.save,
+    auth: ['open:product:save']
+  },
+  edit: {
+    show: true,
+    api: openProduct.update,
+    auth: ['open:product:update']
+  },
+  delete: {
+    show: true,
+    api: openProduct.deletes,
+    auth: ['open:product:delete'],
+    realApi: openProduct.realDeletes,
+    realAuth: ['open:product:realDeletes']
+  },
+  recovery: {
+    show: true,
+    api: openProduct.recoverys,
+    auth: ['open:product:recovery']
+  },
+  import: {
+    show: true,
+    url: 'open/product/import',
+    templateUrl: 'open/product/downloadTemplate',
+    auth: ['open:product:import']
+  },
+  export: {
+    show: true,
+    url: 'open/product/export',
+    auth: ['open:product:export']
+  }
+})
+
+const columns = reactive([
+  {
+    title: "id",
+    dataIndex: "id",
+    formType: "input",
+    search: true,
+    addDisplay: false,
+    editDisplay: false,
+    sortable: {
+      sortDirections: [
+        "ascend",
+        "descend"
+      ],
+      sorter: true
+    }
+  },
+  {
+    title: "商品图片",
+    dataIndex: "image",
+    formType: "upload",
+    rules: {
+      required: true,
+      message: "请输入商品图片"
+    }
+  },
+  {
+    title: "分类id",
+    dataIndex: "classfiy_id",
+    formType: "select",
+    search: true,
+    rules: {
+      required: true,
+      message: "请输入分类id"
+    }
+  },
+  {
+    title: "推荐图",
+    dataIndex: "recommend_image",
+    formType: "upload"
+  },
+  {
+    title: "轮播图",
+    dataIndex: "slider_image",
+    formType: "upload"
+  },
+  {
+    title: "商品名称",
+    dataIndex: "store_name",
+    formType: "input",
+    search: true,
+    rules: {
+      required: true,
+      message: "请输入商品名称"
+    }
+  },
+  {
+    title: "商品简介",
+    dataIndex: "store_info",
+    formType: "editor",
+    rules: {
+      required: true,
+      message: "请输入商品简介"
+    }
+  },
+  {
+    title: "关键字",
+    dataIndex: "keyword",
+    formType: "input",
+    search: true
+  },
+  {
+    title: "商品价格",
+    dataIndex: "price",
+    formType: "input-number",
+    rules: {
+      required: true,
+      message: "请输入商品价格"
+    },
+    sortable: {
+      sortDirections: [
+        "ascend",
+        "descend"
+      ],
+      sorter: true
+    },
+    precision: 3,
+    max: 1000000,
+    min: 0
+  },
+  {
+    title: "市场价",
+    dataIndex: "ot_price",
+    formType: "input-number",
+    rules: {
+      required: true,
+      message: "请输入市场价"
+    },
+    precision: 3,
+    step: 0,
+    max: 1000000,
+    min: 0
+  },
+  {
+    title: "单位名",
+    dataIndex: "unit_name",
+    formType: "input",
+    search: true,
+    rules: {
+      required: true,
+      message: "请输入单位名"
+    }
+  },
+  {
+    title: "排序",
+    dataIndex: "sort",
+    formType: "input",
+    rules: {
+      required: true,
+      message: "请输入排序"
+    }
+  },
+  {
+    title: "销量",
+    dataIndex: "sales",
+    formType: "input",
+    rules: {
+      required: true,
+      message: "请输入销量"
+    },
+    sortable: {
+      sortDirections: [
+        "ascend",
+        "descend"
+      ],
+      sorter: true
+    }
+  },
+  {
+    title: "库存",
+    dataIndex: "stock",
+    formType: "input",
+    search: true,
+    rules: {
+      required: true,
+      message: "请输入库存"
+    }
+  },
+  {
+    title: "发送类型",
+    dataIndex: "send_type",
+    formType: "radio",
+    search: true,
+    rules: {
+      required: true,
+      message: "请输入发送类型"
+    },
+    dict: {
+      data: [
+        {
+          label: "手动发货",
+          value: "1"
+        },
+        {
+          label: "接口发货",
+          value: "2"
+        }
+      ],
+      translation: true
+    }
+  },
+  {
+    title: "上架",
+    dataIndex: "is_show",
+    formType: "switch",
+    search: true,
+    rules: {
+      required: true,
+      message: "请输入上架"
+    },
+    checkedValue: "1",
+    uncheckedValue: "0"
+  },
+  {
+    title: "是否删除",
+    dataIndex: "is_del",
+    formType: "input",
+    addDisplay: false,
+    editDisplay: false,
+    hide: true
+  },
+  {
+    title: "成本价",
+    dataIndex: "cost",
+    formType: "input",
+    search: true,
+    rules: {
+      required: true,
+      message: "请输入成本价"
+    }
+  },
+  {
+    title: "是否优品推荐",
+    dataIndex: "is_good",
+    formType: "switch",
+    checkedValue: "1",
+    uncheckedValue: "0"
+  },
+  {
+    title: "虚拟销量",
+    dataIndex: "ficti",
+    formType: "input"
+  },
+  {
+    title: "浏览量",
+    dataIndex: "browse",
+    formType: "input",
+    rules: {
+      required: true,
+      message: "请输入浏览量"
+    }
+  },
+  {
+    title: "自定义表单",
+    dataIndex: "custom_form",
+    formType: "input",
+    hide: true
+  },
+  {
+    title: "创建人",
+    dataIndex: "created_by",
+    formType: "input",
+    addDisplay: false,
+    editDisplay: false,
+    hide: true
+  },
+  {
+    title: "创建时间",
+    dataIndex: "created_at",
+    formType: "input",
+    search: true,
+    addDisplay: false,
+    editDisplay: false,
+    hide: true
+  },
+  {
+    title: "更新人",
+    dataIndex: "updated_by",
+    formType: "input",
+    addDisplay: false,
+    editDisplay: false,
+    hide: true
+  },
+  {
+    title: "更新时间",
+    dataIndex: "updated_at",
+    formType: "input",
+    search: true,
+    addDisplay: false,
+    editDisplay: false,
+    hide: true
+  }
+])
+</script>
+<script> export default { name: 'open:product' } </script>
\ No newline at end of file