feat: Support merging categories and groups

packages/plugins/block/index.js

@@ -20,6 +20,9 @@ export default {
   apis: api,
   entry,
   metas: [BlockService],
+  options: {
+    mergeCategoriesAndGroups: false
+  },
   components: {
     SaveNewBlock
   }

packages/plugins/block/src/BlockConfig.vue

@@ -24,12 +24,12 @@
         ></tiny-input>
       </div>
     </tiny-form-item>
-    <tiny-form-item label="区块分类" prop="categoryId">
+    <tiny-form-item :label="groupLabels.select" prop="categoryId">
       <tiny-select
         ref="groupSelect"
         v-model="formData.categoryId"
         popper-class="block-popper"
-        placeholder="默认分类"
+        :placeholder="groupLabels.selectPlaceholder"
         :options="categoryList"
         filterable
         :filter-method="categoryFilter"
@@ -122,7 +122,7 @@ export default {
     TinyOption: Option
   },
   setup() {
-    const { getCategoryList } = useBlock()
+    const { getCategoryList, shouldReplaceCategoryWithGroup } = useBlock()
     const nameCn = 'name_cn'
     const state = reactive({
       inputVisible: false,
@@ -247,6 +247,16 @@ export default {
       }
     }
 
+    const groupLabels = shouldReplaceCategoryWithGroup
+      ? {
+          select: '区块分组',
+          selectPlaceholder: '默认分组'
+        }
+      : {
+          select: '区块分类',
+          selectPlaceholder: '默认分类'
+        }
+
     return {
       isVsCodeEnv,
       state,
@@ -265,7 +275,8 @@ export default {
       clearValidateForm,
       blockForm,
       categoryFilter,
-      changeBlockProperty
+      changeBlockProperty,
+      groupLabels
     }
   }
 }

packages/plugins/block/src/CategoryEdit.vue

@@ -17,10 +17,15 @@
       label-position="left"
       validate-type="text"
     >
-      <tiny-form-item label="分类名称" prop="name">
-        <tiny-input v-model="formData.name" placeholder="请输入分类名称" @change="handleChangeName"></tiny-input>
+      <tiny-form-item :label="groupLabels.nameInput" prop="name">
+        <tiny-input
+          v-model="formData.name"
+          :placeholder="groupLabels.nameInputPlaceholder"
+          @change="handleChangeName"
+        ></tiny-input>
       </tiny-form-item>
-      <tiny-form-item label="分类ID" prop="categoryId">
+      <!-- 分组不需要填写表单id字段 -->
+      <tiny-form-item v-if="!shouldReplaceCategoryWithGroup()" label="分类ID" prop="categoryId">
         <tiny-input v-model="formData.categoryId" placeholder="请输入分类ID" :disabled="isEdit"></tiny-input>
       </tiny-form-item>
     </tiny-form>
@@ -46,7 +51,7 @@ import { REGEXP_GROUP_NAME } from '@opentiny/tiny-engine-common/js/verification'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import { createOrUpdateCategory } from './js/blockSetting'
 
-const { getGroupList } = useBlock()
+const { getGroupList, shouldReplaceCategoryWithGroup } = useBlock()
 
 const props = defineProps({
   modelValue: Boolean,
@@ -55,6 +60,20 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
+const groupLabels = shouldReplaceCategoryWithGroup()
+  ? {
+      text: '分组',
+      nameInput: '分组名称',
+      nameInputPlaceholder: '请输入分组名称',
+      validateErrMsg: '分组名称不能重复！'
+    }
+  : {
+      text: '分类',
+      nameInput: '分类名称',
+      nameInputPlaceholder: '请输入分类名称',
+      validateErrMsg: '分类名称不能重复！'
+    }
+
 const state = reactive({
   visible: false
 })
@@ -69,7 +88,7 @@ const formData = reactive({ name: '', categoryId: '' })
 const validateGroup = (rule, value, callback) => {
   const isRepeat = props.initialValue?.name !== value && groupList.value.some((group) => group.name === value)
   if (isRepeat) {
-    callback(new Error('分类名称不能重复！'))
+    callback(new Error(groupLabels.validateErrMsg))
     return
   }
   callback()
@@ -86,6 +105,11 @@ const rules = reactive({
   categoryId: [{ required: true, message: '必填', trigger: 'blur' }]
 })
 
+// 分组不需要填写表单id字段
+if (shouldReplaceCategoryWithGroup()) {
+  rules.categoryId = []
+}
+
 const handleChangeName = (value) => {
   if (isEdit.value) {
     // 编辑时不允许修改id
@@ -103,7 +127,7 @@ const handleChangeName = (value) => {
   formData.categoryId = id
 }
 
-const title = computed(() => `${isEdit.value ? '编辑' : '新增'}分类`)
+const title = computed(() => `${isEdit.value ? '编辑' : '新增'}${groupLabels.text}`)
 
 const closeDialog = () => {
   emit('update:modelValue', false)

packages/plugins/block/src/Main.vue

@@ -16,7 +16,7 @@
           ref="groupSelect"
           v-model="state.categoryId"
           popper-class="block-popper"
-          placeholder="默认展示全部分类"
+          :placeholder="groupLabels.selectPlaceholder"
           filterable
           :filter-method="categoryFilter"
           clearable
@@ -48,7 +48,7 @@
                   <div class="popper-confirm" @mousedown.stop="">
                     <div class="popper-confirm-header">
                       <svg-icon class="icon" name="warning"></svg-icon>
-                      <span class="title">您确定删除该区块分类吗？</span>
+                      <span class="title">{{ groupLabels.deletePrompt }}</span>
                     </div>
                     <div class="popper-confirm-footer">
                       <tiny-button class="confirm-btn" size="small" type="primary" @click="delCategory(item.id)"
@@ -327,8 +327,20 @@ export default {
       }
     }
 
+    const groupLabels = useBlock().shouldReplaceCategoryWithGroup()
+      ? {
+          selectPlaceholder: '默认展示全部分组',
+          deletePrompt: '您确定删除该区块分组吗？',
+          deleteTitle: '删除分组'
+        }
+      : {
+          selectPlaceholder: '默认展示全部分类',
+          deletePrompt: '您确定删除该区块分类吗？',
+          deleteTitle: '删除分类'
+        }
+
     const changeCategory = (val) => {
-      let params = { categoryId: val }
+      let params = useBlock().shouldReplaceCategoryWithGroup() ? { groupId: val } : { categoryId: val }
 
       if (!val) {
         params = {}
@@ -349,7 +361,7 @@ export default {
 
     const deleteItem = (item) => {
       confirm({
-        title: '删除分类',
+        title: groupLabels.deleteTitle,
         status: 'custom',
         message: {
           render() {
@@ -423,7 +435,8 @@ export default {
       handleChangeDeletePopoverVisible,
       handleSelectVisibleChange,
       externalBlock,
-      docsUrl
+      docsUrl,
+      groupLabels
     }
   }
 }

packages/plugins/block/src/SaveNewBlock.vue

@@ -24,7 +24,7 @@
         <tiny-form-item label="区块ID" prop="label">
           <TinyInput v-model="formData.label" placeholder="请输入区块ID"></TinyInput>
         </tiny-form-item>
-        <tiny-form-item label="请选择区块分类" prop="group">
+        <tiny-form-item :label="shouldReplaceCategoryWithGroup() ? '请选择区块分组' : '请选择区块分类'" prop="group">
           <tiny-select v-model="formData.group" :options="categoryList" placeholder="请选择" @change="changeCategory">
           </tiny-select>
         </tiny-form-item>
@@ -67,7 +67,7 @@ export default {
       name_cn: '',
       group: ''
     })
-    const { createEmptyBlock, createBlock, getCategoryList } = useBlock()
+    const { createEmptyBlock, createBlock, getCategoryList, shouldReplaceCategoryWithGroup } = useBlock()
     const visible = computed(() => props.boxVisibility)
     const { PLUGIN_NAME, activePlugin } = useLayout()
     const { isSaved } = useCanvas()
@@ -127,7 +127,8 @@ export default {
       addBlock,
       cancel,
       changeCategory,
-      visible
+      visible,
+      shouldReplaceCategoryWithGroup
     }
   }
 }

packages/plugins/block/src/composable/useBlock.js

@@ -27,8 +27,10 @@ import {
   getMetaApi,
   META_APP,
   getMergeMeta,
+  getOptions,
   META_SERVICE
 } from '@opentiny/tiny-engine-meta-register'
+import meta from '../../meta'
 
 const { SORT_TYPE, SCHEMA_DATA_TYPE, BLOCK_OPENNESS } = constants
 
@@ -715,6 +717,11 @@ const getBlockAssetsByVersion = (block, version) => {
   return assets
 }
 
+const shouldReplaceCategoryWithGroup = () => {
+  const { mergeCategoriesAndGroups } = getOptions(meta.id)
+  return mergeCategoriesAndGroups
+}
+
 export default function () {
   return {
     NODE_TYPE_PAGE,
@@ -758,6 +765,7 @@ export default function () {
     removePropertyLink,
     getBlockProperties,
     getBlockPageSchema,
-    getDateFromNow
+    getDateFromNow,
+    shouldReplaceCategoryWithGroup
   }
 }

packages/plugins/block/src/js/blockSetting.jsx

@@ -42,7 +42,11 @@ import {
   fetchCategories,
   createCategory,
   updateCategory,
-  deleteCategory
+  deleteCategory,
+  fetchGroups,
+  createGroup,
+  updateGroup,
+  deleteGroup
 } from './http'
 import { constants, utils } from '@opentiny/tiny-engine-utils'
 import { generateBlock } from '@opentiny/tiny-engine-common/js/vscodeGenerateFile'
@@ -588,7 +592,9 @@ const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id
 
 const getCategories = () => {
   const appId = getAppId()
-  fetchCategories({ appId }).then((res) => {
+  const fetchData = useBlock().shouldReplaceCategoryWithGroup() ? fetchGroups : fetchCategories
+
+  fetchData({ appId }).then((res) => {
     useBlock().setCategoryList(res)
   })
 }
@@ -597,7 +603,17 @@ const getCategories = () => {
 const createBlock = (block = {}) => {
   const { message } = useModal()
   const created_app = getAppId()
-  const params = { ...block, created_app }
+
+  const { categories, ...rest } = block
+  const extraParams = {}
+
+  if (useBlock().shouldReplaceCategoryWithGroup()) {
+    extraParams.groups = categories
+  } else {
+    extraParams.categories = categories
+  }
+
+  const params = { ...rest, ...extraParams, created_app }
 
   if (isVsCodeEnv) {
     const id = getMaterialHistory()?.id
@@ -643,6 +659,14 @@ const updateBlock = (block = {}) => {
     label
   } = block
   const nameCn = 'name_cn'
+
+  const extraParams = {}
+  if (useBlock().shouldReplaceCategoryWithGroup()) {
+    extraParams.groups = categories
+  } else {
+    extraParams.categories = categories
+  }
+
   requestUpdateBlock(
     id,
     {
@@ -652,9 +676,9 @@ const updateBlock = (block = {}) => {
       public_scope_tenants,
       public: publicType,
       tags,
-      categories: categories.map((category) => category.id),
       description,
-      label
+      label,
+      ...extraParams
     },
     {
       params: {
@@ -777,11 +801,14 @@ export const getBlockById = async (id) => {
 export const createOrUpdateCategory = async ({ categoryId, ...params }, isEdit) => {
   const appId = getAppId()
   params.app = Number(appId)
-  let requestFunc = updateCategory
+  const replaceCategoryWithGroup = useBlock().shouldReplaceCategoryWithGroup()
+  let requestFunc = replaceCategoryWithGroup ? updateGroup : updateCategory
 
   if (!isEdit) {
-    params.category_id = categoryId
-    requestFunc = createCategory
+    if (!replaceCategoryWithGroup) {
+      params.category_id = categoryId
+    }
+    requestFunc = replaceCategoryWithGroup ? createGroup : createCategory
   }
 
   const res = await requestFunc(params)
@@ -792,7 +819,8 @@ export const createOrUpdateCategory = async ({ categoryId, ...params }, isEdit)
 }
 
 export const delCategory = async (id) => {
-  const res = await deleteCategory(id)
+  const deleteFn = useBlock().shouldReplaceCategoryWithGroup() ? deleteGroup : deleteCategory
+  const res = await deleteFn(id)
 
   if (res) {
     getCategories()

packages/plugins/block/src/js/http.js

@@ -75,3 +75,22 @@ export const createCategory = (params) =>
 // 删除区块分类
 export const deleteCategory = (id) =>
   getMetaApi(META_SERVICE.Http).delete(`/material-center/api/block-categories/${id}`)
+
+// 下面是区块分组的增删查改接口
+// 当 Block 插件的 options.mergeCategoriesAndGroups 为 true 时，将分类的接口全部替换成分组的接口
+
+// 区块分组列表
+export const fetchGroups = (params) =>
+  getMetaApi(META_SERVICE.Http).get(`/material-center/api/block-groups`, { params: { ...params, from: 'block' } })
+
+// 更新区块分组
+export const updateGroup = ({ id, ...params }) =>
+  getMetaApi(META_SERVICE.Http).post(`/material-center/api/block-groups/update/${id}`, params)
+
+// 新建区块分组
+export const createGroup = (params) =>
+  getMetaApi(META_SERVICE.Http).post('/material-center/api/block-groups/create', params)
+
+// 删除区块分组
+export const deleteGroup = (groupId) =>
+  getMetaApi(META_SERVICE.Http).get(`/material-center/api/block-groups/delete/${groupId}`)