feat：【mall】diy editor 的 hot-zone 代码优化（100%）完成商品分类的支持

apps/web-ele/src/views/mall/product/category/components/category-select.vue

@@ -3,32 +3,33 @@ import { computed, onMounted, ref } from 'vue';
 
 import { handleTree } from '@vben/utils';
 
+import { ElTreeSelect } from 'element-plus';
+
 import { getCategoryList } from '#/api/mall/product/category';
 
 /** 商品分类选择组件 */
 defineOptions({ name: 'ProductCategorySelect' });
 
 const props = defineProps({
-  // 选中的ID
   modelValue: {
     type: [Number, Array<Number>],
     default: undefined,
-  },
-  // 是否多选
+  }, // 选中的 ID
   multiple: {
     type: Boolean,
     default: false,
-  },
-  // 上级品类的编号
+  }, // 是否多选
   parentId: {
     type: Number,
     default: undefined,
-  },
+  }, // 上级品类的编号
 });
 
 /** 分类选择 */
 const emit = defineEmits(['update:modelValue']);
 
+const categoryList = ref<any[]>([]); // 分类树
+
 /** 选中的分类 ID */
 const selectCategoryId = computed({
   get: () => {
@@ -40,7 +41,6 @@ const selectCategoryId = computed({
 });
 
 /** 初始化 */
-const categoryList = ref<any[]>([]); // 分类树
 onMounted(async () => {
   const data = await getCategoryList({
     parentId: props.parentId,
@@ -49,20 +49,19 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <el-tree-select
+  <ElTreeSelect
     v-model="selectCategoryId"
     :data="categoryList"
+    node-key="id"
     :props="{
       children: 'children',
       label: 'name',
-      value: 'id',
-      isLeaf: 'leaf',
-      emitPath: false,
     }"
     :multiple="multiple"
     :show-checkbox="multiple"
-    class="w-1/1"
-    node-key="id"
+    check-strictly
+    default-expand-all
+    class="w-full"
     placeholder="请选择商品分类"
   />
 </template>

apps/web-ele/src/views/mall/product/category/components/index.ts

@@ -0,0 +1 @@
+export { default as ProductCategorySelect } from './category-select.vue';