diff --git a/index.html b/index.html
index 1c1d367..b3e7569 100644
--- a/index.html
+++ b/index.html
@@ -140,7 +140,7 @@
     </style>
     <div class="app-loading">
         <div class="app-loading-wrap">
-            <img src="/logo.png" class="app-loading-logo" alt="Logo" />
+            <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" />
             <div class="app-loading-dots">
                 <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
             </div>
diff --git a/src/api/product/model/productCategoryModel.ts b/src/api/product/model/productCategoryModel.ts
new file mode 100644
index 0000000..62771d6
--- /dev/null
+++ b/src/api/product/model/productCategoryModel.ts
@@ -0,0 +1,9 @@
+export interface ProductCategoryResp {
+    id: number | string;
+    parentId: number | string;
+    categoryName: string;
+    categoryLevel: string;
+    serialNumber: string;
+    remark: string;
+    sort: number;
+}
\ No newline at end of file
diff --git a/src/api/product/productCategory.ts b/src/api/product/productCategory.ts
new file mode 100644
index 0000000..11514a7
--- /dev/null
+++ b/src/api/product/productCategory.ts
@@ -0,0 +1,19 @@
+import {defHttp} from '/@/utils/http/axios';
+import { ErrorMessageMode } from '/#/axios';
+import {BaseDataResp} from "@/api/model/baseModel";
+import {ProductCategoryResp} from "@/api/product/model/productCategoryModel";
+
+enum Api {
+    List = '/product/category/list',
+}
+
+export function getCategoryList(mode: ErrorMessageMode = 'notice') {
+    return defHttp.get<BaseDataResp<ProductCategoryResp>>(
+        {
+            url: Api.List,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
\ No newline at end of file
diff --git a/src/components/Table/src/hooks/useDataSource.ts b/src/components/Table/src/hooks/useDataSource.ts
index 926e028..d748ac1 100644
--- a/src/components/Table/src/hooks/useDataSource.ts
+++ b/src/components/Table/src/hooks/useDataSource.ts
@@ -310,11 +310,19 @@ export function useDataSource(
       const result  = await api(params);
       const res = result.data;
       if (isTreeTable) {
-        const tree = array2tree(res.data);
-        rawDataSourceRef.value = tree;
-        isArrayResult = Array.isArray(tree);
-        resultItems = isArrayResult ? tree : get(tree, listField);
-        resultTotal = isArrayResult ? tree.length : get(tree, totalField);
+        if(res.data){
+          const tree = array2tree(res.data);
+          rawDataSourceRef.value = tree;
+          isArrayResult = Array.isArray(tree);
+          resultItems = isArrayResult ? tree : get(tree, listField);
+          resultTotal = isArrayResult ? tree.length : get(tree, totalField);
+        }else {
+          const tree = array2tree(res);
+          rawDataSourceRef.value = array2tree(res);
+          isArrayResult = Array.isArray(tree);
+          resultItems = isArrayResult ? tree : get(tree, listField);
+          resultTotal = isArrayResult ? tree.length : get(tree, totalField);
+        }
       } else {
         rawDataSourceRef.value = res;
         isArrayResult = Array.isArray(res);
diff --git a/src/views/product/category/CategoryDrawer.vue b/src/views/product/category/CategoryDrawer.vue
new file mode 100644
index 0000000..229e34e
--- /dev/null
+++ b/src/views/product/category/CategoryDrawer.vue
@@ -0,0 +1,53 @@
+<template>
+  <BasicDrawer
+      v-bind="$attrs"
+      @register="registerDrawer"
+      showFooter
+      :title="getTitle"
+      width="50%"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, unref } from 'vue';
+import { BasicForm, useForm } from '/@/components/Form/index';
+import { CategorySchema } from './category.data';
+import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
+export default defineComponent({
+  name: 'CategoryDrawer',
+  components: { BasicDrawer, BasicForm },
+  emits: ['success', 'register'],
+  setup(_, { emit }) {
+    const isUpdate = ref(true);
+    const menuId = ref<number>(0);
+    const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
+      labelWidth: 100,
+      schemas: CategorySchema,
+      showActionButtonGroup: false,
+      baseColProps: { lg: 12, md: 24 },
+    });
+
+    const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+      resetFields();
+      setDrawerProps({ confirmLoading: false });
+      isUpdate.value = !!data?.isUpdate;
+
+      if (unref(isUpdate)) {
+        setFieldsValue({
+          ...data,
+        });
+      }
+      if ('record' in data) {
+        menuId.value = data.id;
+      }
+    });
+
+    const getTitle = computed(() => (!unref(isUpdate) ? '新增产品分类' : '编辑产品分类'));
+
+    return { registerDrawer, registerForm, getTitle };
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/views/product/category/CategoryModal.vue b/src/views/product/category/CategoryModal.vue
deleted file mode 100644
index 5ff38f5..0000000
--- a/src/views/product/category/CategoryModal.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-
-</template>
-
-<script lang="ts">
-
-</script>
\ No newline at end of file
diff --git a/src/views/product/category/category.data.ts b/src/views/product/category/category.data.ts
index e69de29..0e7b898 100644
--- a/src/views/product/category/category.data.ts
+++ b/src/views/product/category/category.data.ts
@@ -0,0 +1,55 @@
+import {FormSchema} from "@/components/Form";
+import {BasicColumn} from "@/components/Table";
+import {getCategoryList} from "@/api/product/productCategory";
+export const columns: BasicColumn[] = [
+    {
+        title: '分类名称',
+        dataIndex: 'categoryName',
+        width: 150,
+        align: 'left',
+    },
+    {
+        title: '父级分类id',
+        dataIndex: 'parentId',
+    },
+    {
+        title: '分类级别',
+        dataIndex: 'categoryLevel',
+    },
+    {
+        title: '序列号',
+        dataIndex: 'serialNumber',
+    },
+    {
+        title: '排序',
+        dataIndex: 'sort',
+    },
+    {
+        title: '备注',
+        dataIndex: 'remark',
+    },
+]
+export const CategorySchema: FormSchema[] = [
+    {
+        field: 'id',
+        label: '分类id',
+        component: 'Input',
+        show: false,
+    },
+    {
+        field: 'categoryName',
+        label: '分类名称',
+        component: 'Input',
+    },
+    {
+        field: 'parentId',
+        label: '上级分类',
+        component: 'ApiTreeSelect',
+        componentProps: {
+            api: getCategoryList,
+            resultField: 'data',
+            labelField: 'categoryName',
+            valueField: 'id',
+        },
+    },
+]
\ No newline at end of file
diff --git a/src/views/product/category/index.vue b/src/views/product/category/index.vue
index a8d5a6a..ecdd593 100644
--- a/src/views/product/category/index.vue
+++ b/src/views/product/category/index.vue
@@ -1,165 +1,115 @@
 <template>
-  <a-row :gutter="10">
-    <a-col :md="12" :sm="24">
-      <a-card :bordered="false">
-        <!-- 按钮操作区域 -->
-        <a-row style="margin-left: 14px">
-          <a-button @click="" type="primary">添加类别</a-button>
-          <a-button title="删除多条数据" @click="" type="default">批量删除</a-button>
-          <a-button @click="" type="default" icon="reload">刷新</a-button>
-        </a-row>
-        <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
-          <a-alert type="info" :showIcon="true">
-            <div slot="message">
-              当前选择：<span >测试</span>
-              <a style="margin-left: 10px" @click="">取消选择</a>
-            </div>
-          </a-alert>
-          <!-- 树-->
-          <a-col :md="10" :sm="24">
-            <template>
-              <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="">
-               <span style="user-select: none">
-                <a-tree
-                    checkable
-                    multiple
-                    @select=""
-                    @check=""
-                    @rightClick=""
-                    :autoExpandParent="true"
-                    @expand=""/>
-                </span>
-              </a-dropdown>
-            </template>
-          </a-col>
-        </div>
-      </a-card>
-      <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
-      <div class="drawer-bootom-button">
-        <a-dropdown :trigger="['click']" placement="topCenter">
-          <a-menu slot="overlay">
-            <a-menu-item key="1" >父子关联</a-menu-item>
-            <a-menu-item key="2" >取消关联</a-menu-item>
-            <a-menu-item key="3" >全部勾选</a-menu-item>
-            <a-menu-item key="4" >取消全选</a-menu-item>
-            <a-menu-item key="5" >展开所有</a-menu-item>
-            <a-menu-item key="6" >合并所有</a-menu-item>
-          </a-menu>
-          <a-button>
-            树操作 <a-icon type="up" />
-          </a-button>
-        </a-dropdown>
-      </div>
-    </a-col>
-    <a-col :md="12" :sm="24">
-      <a-card :bordered="false">
-        <a-form >
-          <a-form-item  label="名称">
-            <a-input placeholder="请输入名称" v-decorator="['name', '' ]"/>
-          </a-form-item>
-          <a-form-item  label="编号">
-            <a-input placeholder="请输入编号" v-decorator="['serialNo', '' ]"/>
-          </a-form-item>
-          <a-form-item  label="上级目录">
-            <a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
-                           allow-clear :treeDefaultExpandAll="true"
-                            v-decorator="[ 'parentId' ]" placeholder="请选择上级目录">
-            </a-tree-select>
-          </a-form-item>
-          <a-form-item  label="排序">
-            <a-input v-decorator="[ 'sort' ]"/>
-          </a-form-item>
-          <a-form-item  label="备注">
-            <a-textarea placeholder="请输入备注" :rows="2" v-decorator.trim="[ 'remark' ]" />
-          </a-form-item>
-        </a-form>
-        <div class="anty-form-btn">
-          <a-button  type="default" htmlType="button" icon="sync">重置</a-button>
-          <a-button  type="primary" htmlType="button" icon="form">保存</a-button>
-        </div>
-      </a-card>
-      <a-card >
-        <a-empty>
-          <span slot="description"> 请先选择一个类别! </span>
-        </a-empty>
-      </a-card>
-    </a-col>
-    <material-category-modal ref="materialCategoryModal" ></material-category-modal>
-  </a-row>
+  <div>
+    <BasicTable @register="registerTable" @fetch-success="onFetchSuccess">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增产品分类 </a-button>
+        <a-button type="primary" @click="handleBatchDelete"> 批量删除产品分类 </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+              :actions="[
+              {
+                icon: 'clarity:note-edit-line',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  placement: 'left',
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <CategoryDrawer @register="registerDrawer" @success="handleSuccess"/>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import CategoryModal from "@/views/product/category/CategoryModal.vue";
+import {defineComponent, nextTick} from 'vue';
 import {BasicForm} from "@/components/Form";
+import {BasicModal} from "@/components/Modal";
+import {BasicTree,} from "@/components/Tree";
+import CategoryModal from "@/views/product/category/CategoryDrawer.vue";
+import {BasicTable, TableAction, useTable} from "@/components/Table";
+import {getCategoryList} from "@/api/product/productCategory";
+import {columns} from "@/views/product/category/category.data";
+import {useDrawer} from "@/components/Drawer";
+import CategoryDrawer from "@/views/product/category/CategoryDrawer.vue";
+import MenuDrawer from "@/views/sys/menu/MenuDrawer.vue";
 
 export default defineComponent({
   name: 'ProductCategory',
-  components: { CategoryModal, BasicForm},
+  components: {MenuDrawer, CategoryDrawer, BasicTable, TableAction, BasicTree, BasicModal, CategoryModal, BasicForm},
   setup() {
+    const [registerDrawer, { openDrawer }] = useDrawer();
+    const [registerTable, { reload, expandAll }] = useTable({
+      title: '产品分类列表',
+      api: getCategoryList,
+      columns,
+      formConfig: {
+        labelWidth: 120,
+      },
+      isTreeTable: true,
+      pagination: false,
+      striped: false,
+      useSearchForm: false,
+      showTableSetting: true,
+      bordered: true,
+      showIndexColumn: false,
+      canResize: false,
+      actionColumn: {
+        width: 80,
+        title: '操作',
+        dataIndex: 'action',
+        fixed: undefined,
+      },
+    });
 
-  }
-})
-</script>
-
-<style scoped lang="less">
-.ant-card-body .table-operator {
-  margin: 15px;
-}
-
-.anty-form-btn {
-  width: 100%;
-  text-align: center;
-}
-
-.anty-form-btn button {
-  margin: 0 5px;
-}
+    function handleSuccess() {
+      reload();
+    }
 
-.anty-node-layout .ant-layout-header {
-  padding-right: 0
-}
+    function onFetchSuccess() {
+      nextTick(expandAll);
+    }
 
-.header {
-  padding: 0 8px;
-}
+    async function handleEdit(record: Recordable) {
+      openDrawer(true, {
+        record,
+        isUpdate: true,
+      });
+    }
 
-.header button {
-  margin: 0 3px
-}
+    async function handleDelete(record: Recordable) {
+    }
 
-.ant-modal-cust-warp {
-  height: 100%
-}
+    async function handleCreate() {
+      openDrawer(true, {
+        isUpdate: false,
+      });
+    }
 
-.ant-modal-cust-warp .ant-modal-body {
-  height: calc(100% - 110px) !important;
-  overflow-y: auto
-}
+    async function handleBatchDelete() {
 
-.ant-modal-cust-warp .ant-modal-content {
-  height: 90% !important;
-  overflow-y: hidden
-}
+    }
 
-#app .desktop {
-  height: auto !important;
-}
-
-/** Button按钮间距 */
-.ant-btn {
-  margin-left: 3px
-}
-
-.drawer-bootom-button {
-  /*position: absolute;*/
-  bottom: 0;
-  width: 100%;
-  border-top: 1px solid #e8e8e8;
-  padding: 10px 16px;
-  text-align: left;
-  left: 0;
-  background: #fff;
-  border-radius: 0 0 2px 2px;
-}
-</style>
\ No newline at end of file
+    return {
+      registerDrawer,
+      registerTable,
+      handleEdit,
+      handleDelete,
+      onFetchSuccess,
+      handleSuccess,
+      handleCreate,
+      handleBatchDelete,
+    };
+  }
+})
+</script>
\ No newline at end of file