@pubinfo/module-rbac 2.0.0-beta.9 → 2.0.0-rc.1

package/src/views/resource/components/ResourceEdit.vue

@@ -2,12 +2,16 @@
 import type { Rule } from 'ant-design-vue/es/form';
 import type { FormExpose } from 'ant-design-vue/es/form/Form';
 import type { AddForm, EditForm, Form, TreeNode } from '../interface';
-import { getRbacResourceInfo, postRbacResourceAddResource, postRbacResourceResourceUpdate } from '@/api/modules/rbac';
-import { DATA_PERMISSION_TYPE, dataPermissionOptions } from '@/views/data-permission/enum';
 import { useToggle } from '@vueuse/core';
 import { message } from 'ant-design-vue';
 import { cloneDeep } from 'lodash-es';
-import { ACTION, RESOURCE_TYPE, resourceOptions } from '../enum';
+import { getRbacResourceInfo, postRbacResourceAddResource, postRbacResourceResourceUpdate } from '@/api/modules/rbac';
+import { DATA_PERMISSION_TYPE } from '@/views/data-permission/enum';
+import { ACTION, RESOURCE_COLOR, RESOURCE_TYPE, resourceOptions } from '../enum';
+import { useMetaForm } from '../hooks/useMetaForm';
+import { defaultMeta } from '../model';
+import DynamicRoutesForm from './DynamicRoutesForm.vue';
+import MetaForm from './MetaForm.vue';
 
 defineOptions({
   name: 'ResourceEdit',
@@ -27,11 +31,15 @@ const state = reactive<{
   title: '',
   record: {},
   initData: {
-    type: RESOURCE_TYPE.APP,
+    type: RESOURCE_TYPE.DYNAMIC_APP,
     sort: 0,
     enable: true,
     enableDataPermission: false,
     dataPermissionType: DATA_PERMISSION_TYPE.ALL,
+    meta: {
+      url: '',
+      component: '',
+    },
   },
 });
 
@@ -44,7 +52,7 @@ const rules: Record<string, Rule[]> = {
 };
 
 const parentNode = computed(() => {
-  return recursiveTreeFind(props.dataSource, node => node.id === form.value.parentId);
+  return recursiveTreeFind(props.dataSource, node => node.id === form.value.parentId) ?? {};
 });
 function recursiveTreeFind<T extends { children?: T[] }>(tree: T[], fn: (node: T) => boolean) {
   const list = [...tree];
@@ -62,41 +70,60 @@ function recursiveTreeFind<T extends { children?: T[] }>(tree: T[], fn: (node: T
 const resourceComputedOptions = computed(() => {
   switch (parentNode.value?.type) {
     case RESOURCE_TYPE.APP:
+    case RESOURCE_TYPE.MICRO_APP:
+    case RESOURCE_TYPE.DYNAMIC_APP:
+      return resourceOptions.filter(node => [RESOURCE_TYPE.INDEX, RESOURCE_TYPE.MENU, RESOURCE_TYPE.IFRAME, RESOURCE_TYPE.LINK].includes(node.value));
+
     case RESOURCE_TYPE.INDEX:
-      return resourceOptions.filter(node => node.value !== RESOURCE_TYPE.APP);
+      return resourceOptions.filter(node => [RESOURCE_TYPE.INDEX, RESOURCE_TYPE.MENU, RESOURCE_TYPE.IFRAME, RESOURCE_TYPE.LINK, RESOURCE_TYPE.NON_MENU].includes(node.value));
 
     case RESOURCE_TYPE.MENU:
     case RESOURCE_TYPE.NON_MENU:
-      return resourceOptions.filter(node => (node.value === RESOURCE_TYPE.BUTTON || node.value === RESOURCE_TYPE.NON_MENU));
+      return resourceOptions.filter(node => [RESOURCE_TYPE.BUTTON, RESOURCE_TYPE.NON_MENU].includes(node.value));
 
     case RESOURCE_TYPE.BUTTON:
+    case RESOURCE_TYPE.IFRAME:
+    case RESOURCE_TYPE.LINK:
       return [];
 
     default:
-      return resourceOptions.filter(node => node.value === RESOURCE_TYPE.APP);
+      return resourceOptions.filter(node => [RESOURCE_TYPE.APP, RESOURCE_TYPE.MICRO_APP, RESOURCE_TYPE.DYNAMIC_APP].includes(node.value));
   }
 });
 
-const dataPermissionVisible = computed(() => {
-  return form.value.type === RESOURCE_TYPE.BUTTON || form.value.type === RESOURCE_TYPE.MENU || form.value.type === RESOURCE_TYPE.NON_MENU;
-});
+const { show, resetIncompatibleOptions } = useMetaForm(form);
 
+const [formLoading, setFormLoading] = useToggle(false);
 async function onOpen(key: ACTION, record?: Form) {
   state.title = key;
   form.value = cloneDeep(state.initData);
   setOpen(true);
 
-  if (key === ACTION.ADD_CHILD) {
-    form.value.parentId = record?.id as string;
-    form.value.type = resourceComputedOptions.value[0].value;
-  }
+  try {
+    setFormLoading(true);
+    if (key === ACTION.ADD_CHILD) {
+      form.value.parentId = record?.id as string;
+      form.value.type = resourceComputedOptions.value[0].value;
 
-  if (key === ACTION.EDIT) {
-    const res = await getRbacResourceInfo({ id: record?.id as string });
-    if (res.success) {
-      form.value = res.data ?? {};
+      // 清除不适用于当前资源类型的配置项，确保业务逻辑一致性
+      resetIncompatibleOptions();
+    }
+
+    if (key === ACTION.EDIT) {
+      const res = await getRbacResourceInfo({ id: record?.id as string });
+      if (res.success) {
+        form.value = res.data ?? {};
+        // 合并默认 meta 对象和返回的 meta 对象，form.value.meta 优先
+        form.value.meta = { ...defaultMeta, ...res.data?.meta };
+
+        // 确保编辑现有资源时也遵循业务规则约束
+        resetIncompatibleOptions();
+      }
     }
   }
+  finally {
+    setFormLoading(false);
+  }
 }
 
 const [loading, setLoading] = useToggle(false);
@@ -104,13 +131,22 @@ function onSubmit() {
   formRef.value?.validate().then(() => {
     const params = {
       ...form.value,
+      icon: form.value.icon || undefined,
     };
 
     // app, 目录等不参与数据权限筛选
-    if (!dataPermissionVisible.value) {
+    if (!show.value.dataPermission) {
       params.enableDataPermission = false;
     }
 
+    // 如果是开发模式的应用，给出警告提示
+    if (show.value.devMode && form.value.meta?.isDev) {
+      console.warn('开发模式应用的子路由将不会在生产环境中注册到vue-router，请确保这是预期行为。');
+    }
+
+    // 可以在提交前检查目录下是否有有效的子菜单，如果没有则给出提示
+    // 这部分逻辑可能需要额外的API调用来检查子资源
+
     const promise
       = state.title === ACTION.EDIT
         ? postRbacResourceResourceUpdate(params as EditForm)
@@ -138,62 +174,97 @@ defineExpose({
     v-model:open="open"
     :title="state.title"
     placement="right"
-    :width="520"
+    :width="800"
     destroy-on-close
     :footer-style="{ textAlign: 'right' }"
   >
-    <a-form
-      ref="formRef"
-      :model="form"
-      :rules="rules"
-      :label-col="{ span: 6 }"
-    >
-      <a-form-item v-if="parentNode?.name" name="parentId">
-        <template #label>
-          <DatabaseOutlined class="mr-1" />
-          父资源
-        </template>
-        {{ parentNode?.name }}
-      </a-form-item>
-      <a-form-item label="资源名称" name="name">
-        <a-input v-model:value="form.name" placeholder="请输入资源名称" :maxlength="128" />
-      </a-form-item>
-      <a-form-item label="资源类型" name="type">
-        <a-radio-group
-          v-model:value="form.type"
-          :options="resourceComputedOptions"
-          option-type="button"
-          button-style="solid"
-        />
-      </a-form-item>
-      <a-form-item label="资源编码" name="code">
-        <a-input v-model:value="form.code" placeholder="请输入资源编码" :maxlength="50" />
-      </a-form-item>
-      <a-form-item label="显示顺序" name="sort">
-        <a-input-number v-model:value="form.sort" :max="999" />
-      </a-form-item>
-      <a-form-item label="是否启用" name="enable">
-        <a-switch v-model:checked="form.enable" />
-      </a-form-item>
-      <a-form-item label="权限标识" name="permissionCode">
-        <a-input v-model:value="form.permissionCode" placeholder="请输入权限标识" :maxlength="128" />
-      </a-form-item>
-      <a-form-item label="描述" name="description">
-        <a-textarea
-          v-model:value="form.description"
-          placeholder="请输入描述"
-          :maxlength="255"
-          :auto-size="{ minRows: 2 }"
-          show-count
-        />
-      </a-form-item>
-      <a-form-item v-if="dataPermissionVisible" label="启用数据权限" name="enableDataPermission">
-        <a-switch v-model:checked="form.enableDataPermission" />
-      </a-form-item>
-      <a-form-item v-if="dataPermissionVisible && form.enableDataPermission" label="数据权限规则" name="dataPermissionType">
-        <a-select v-model:value="form.dataPermissionType" :options="dataPermissionOptions" />
-      </a-form-item>
-    </a-form>
+    <a-spin :spinning="formLoading">
+      <a-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        :label-col="{ style: { width: '100px' } }"
+      >
+        <a-row :gutter="8">
+          <a-col v-if="parentNode?.name" :span="24">
+            <a-form-item name="parentId">
+              <template #label>
+                <DatabaseOutlined class="mr-1" />
+                父资源
+              </template>
+              {{ parentNode?.name }}
+            </a-form-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-item label="资源类型" name="type">
+              <div
+                v-if="state.title === ACTION.EDIT"
+                class="flex items-center space-x-1"
+              >
+                <!-- <PubinfoIcon v-if="form.type" :name="`resource-${RESOURCE_ICON[Number(form.type)]}`" class="text-xl" />
+                <span>
+                  {{ resourceComputedOptions.find(e => e.value === form.type)?.label }}
+                </span> -->
+
+                <a-tag v-if="form.type" :color="RESOURCE_COLOR[Number(form.type)]" :bordered="false">
+                  {{ resourceComputedOptions.find(e => e.value === form.type)?.label }}
+                </a-tag>
+              </div>
+              <a-radio-group
+                v-else
+                v-model:value="form.type"
+                :options="resourceComputedOptions"
+                option-type="button"
+                button-style="solid"
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="8">
+          <a-col :span="12">
+            <a-form-item label="资源名称" name="name">
+              <a-input v-model:value="form.name" placeholder="请输入资源名称" :maxlength="128" />
+            </a-form-item>
+          </a-col>
+
+          <DynamicRoutesForm v-model="form" :parent="parentNode" />
+
+          <a-col :span="12">
+            <a-form-item label="资源编码" name="code">
+              <a-input v-model:value="form.code" placeholder="请输入资源编码（权限码）" :maxlength="50" />
+            </a-form-item>
+          </a-col>
+
+          <a-col :span="12">
+            <a-form-item label="接口权限" name="permissionCode">
+              <a-input v-model:value="form.permissionCode" placeholder="请输入接口权限（接口地址，多个使用逗号分隔）" :maxlength="256" />
+            </a-form-item>
+          </a-col>
+
+          <a-col :span="12">
+            <a-form-item label="显示顺序" name="sort">
+              <a-input-number v-model:value="form.sort" :max="999" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <a-row :gutter="8">
+          <a-col :span="24">
+            <a-form-item label="描述" name="description" :label-col="{ span: 3 }">
+              <a-textarea
+                v-model:value="form.description"
+                placeholder="请输入描述"
+                :maxlength="255"
+                :auto-size="{ minRows: 2 }"
+                show-count
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <MetaForm v-model="form" />
+      </a-form>
+    </a-spin>
 
     <template #footer>
       <a-space>

package/src/views/resource/components/RoleRelation.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { ColumnsType } from 'ant-design-vue/es/table';
 import type { TreeNode } from '../interface';
-import { getRbacResourceGetRoleListByResourceId } from '@/api/modules/rbac';
 import { useToggle } from '@vueuse/core';
 import { useRequest } from 'alova/client';
 import { theme } from 'ant-design-vue';
+import { getRbacResourceGetRoleListByResourceId } from '@/api/modules/rbac';
 
 defineOptions({
   name: 'RoleRelation',

package/src/views/resource/enum.ts

@@ -1,3 +1,5 @@
+import { RESOURCE_TYPE } from 'pubinfo';
+
 /** 操作按钮 */
 export enum ACTION {
   /** 分配查看 */
@@ -6,30 +8,27 @@ export enum ACTION {
   ADD = '新建',
   /** 新建下级 */
   ADD_CHILD = '新建下级',
+  /** 导入/导出 */
+  IMPORT_EXPORT = '导入 / 导出',
   /** 修改 */
   EDIT = '修改',
   /** 删除 */
   REMOVE = '删除',
 }
 
-/** 资源类型 */
-export enum RESOURCE_TYPE {
-  /** 应用 */
-  APP = '1',
-  /** 目录 */
-  INDEX = '2',
-  /** 菜单 */
-  MENU = '3',
-  /** 按钮 */
-  BUTTON = '4',
-  /** 非菜单页 */
-  NON_MENU = '5',
-}
+export { RESOURCE_TYPE };
+
+export const RESOURCE_ICON = ['', 'app', 'index', 'menu', 'btn', 'nonmenu', 'micro', 'dynamic', 'iframe', 'link'];
+export const RESOURCE_COLOR = ['', 'geekblue', 'blue', 'default', 'cyan', 'default', 'geekblue', 'geekblue', 'default', 'default'];
 
 export const resourceOptions = [
+  { label: '动态应用', value: RESOURCE_TYPE.DYNAMIC_APP },
   { label: '应用', value: RESOURCE_TYPE.APP },
+  { label: '微应用', value: RESOURCE_TYPE.MICRO_APP },
   { label: '目录', value: RESOURCE_TYPE.INDEX },
   { label: '菜单', value: RESOURCE_TYPE.MENU },
   { label: '按钮', value: RESOURCE_TYPE.BUTTON },
   { label: '非菜单页', value: RESOURCE_TYPE.NON_MENU },
+  { label: '内嵌', value: RESOURCE_TYPE.IFRAME },
+  { label: '外链', value: RESOURCE_TYPE.LINK },
 ];

package/src/views/resource/hooks/useMetaForm.ts

@@ -0,0 +1,103 @@
+import type { Ref } from 'vue';
+import type { Form } from '../interface';
+import { RESOURCE_TYPE } from '../enum';
+import { defaultMeta } from '../model';
+
+export function useMetaForm(form: Ref<Form>) {
+  const show = computed(() => {
+    const type = form.value.type as RESOURCE_TYPE;
+
+    return {
+      dataPermission: [RESOURCE_TYPE.BUTTON, RESOURCE_TYPE.MENU, RESOURCE_TYPE.NON_MENU].includes(type),
+
+      // 开发模式选项可见性：只在应用或动态应用中显示
+      devMode: [RESOURCE_TYPE.APP, RESOURCE_TYPE.DYNAMIC_APP].includes(type),
+
+      // 缓存标签页和固定标签页选项可见性：只在菜单中显示
+      cacheAndPin: [RESOURCE_TYPE.MENU].includes(type),
+
+      // 侧边栏显示选项可见性：应用和动态应用不显示此选项
+      sidebar: ![RESOURCE_TYPE.APP, RESOURCE_TYPE.DYNAMIC_APP, RESOURCE_TYPE.BUTTON, RESOURCE_TYPE.NON_MENU].includes(type),
+
+      // 标签栏显示选项可见性：应用、动态应用和目录不显示此选项
+      tabbar: ![RESOURCE_TYPE.APP, RESOURCE_TYPE.DYNAMIC_APP, RESOURCE_TYPE.INDEX, RESOURCE_TYPE.BUTTON].includes(type),
+
+      breadcrumb: ![RESOURCE_TYPE.BUTTON].includes(type),
+    };
+  });
+
+  // 监听资源类型变化，自动重置不适用的配置项
+  watch(
+    () => form.value.type,
+    (newType, oldType) => {
+      // 只有在资源类型真正改变时才执行重置逻辑
+      if (newType !== oldType && newType && oldType) {
+        resetIncompatibleOptions();
+      }
+    },
+    { immediate: false },
+  );
+
+  // 监听开发模式状态变化，自动处理开发模式文本
+  watch(
+    () => form.value.meta?.isDev,
+    (newIsDev, oldIsDev) => {
+      // 当开发模式从开启变为关闭时，重置文本
+      if (oldIsDev === true && newIsDev === false) {
+        if (form.value.meta) {
+          form.value.meta.devText = defaultMeta.devText;
+        }
+      }
+      // 当首次开启开发模式且文本为空时，设置默认文本
+      if (oldIsDev === false && newIsDev === true) {
+        if (form.value.meta && !form.value.meta.devText) {
+          form.value.meta.devText = defaultMeta.devText;
+        }
+      }
+    },
+    { immediate: false },
+  );
+
+  // 根据当前资源类型重置不适用的配置项
+  function resetIncompatibleOptions() {
+    if (!form.value.meta) {
+      form.value.meta = { ...defaultMeta };
+    }
+
+    // 如果当前资源类型不支持开发模式，则重置为false
+    if (!show.value.devMode) {
+      form.value.meta.isDev = false;
+      // 重置开发模式文本
+      form.value.meta.devText = defaultMeta.devText;
+    }
+
+    // 如果开发模式被关闭，重置开发模式文本为默认值
+    if (!form.value.meta.isDev) {
+      form.value.meta.devText = defaultMeta.devText;
+    }
+
+    // 如果当前资源类型不支持缓存和固定标签页，则重置为false
+    if (!show.value.cacheAndPin) {
+      form.value.meta.cache = false;
+      form.value.meta.pin = false;
+    }
+
+    // 如果当前资源类型不支持侧边栏显示，则重置为true（默认显示）
+    if (!show.value.sidebar) {
+      form.value.meta.sidebar = true;
+    }
+
+    // 如果当前资源类型不支持标签栏显示，则重置为true（默认显示）
+    if (!show.value.tabbar) {
+      form.value.meta.tabbar = true;
+    }
+
+    // 当应用或动态应用开启开发模式时，需要确保其子路由不会被注册到vue-router
+    // 这个逻辑主要在路由生成阶段处理，此处仅做数据一致性保证
+  }
+
+  return {
+    show,
+    resetIncompatibleOptions,
+  };
+}

package/src/views/resource/index.vue

@@ -1,14 +1,16 @@
 <script setup lang="tsx">
 import type { ProColumns } from '@pubinfo/pro-components';
 import type { AddForm, TreeNode } from './interface';
-import { getRbacResourceResourceDelete, getRbacResourceResourceTree } from '@/api/modules/rbac';
+import { SwapOutlined } from '@ant-design/icons-vue';
 import { ProTable } from '@pubinfo/pro-components';
-import { Badge, message, Modal } from 'ant-design-vue';
+import { Badge, message, Modal, Tag } from 'ant-design-vue';
 import { cloneDeep } from 'lodash-es';
 import { PubinfoIcon } from 'pubinfo';
+import { getRbacResourceResourceDelete, getRbacResourceResourceTree } from '@/api/modules/rbac';
+import ImportExport from './components/ImportExport.vue';
 import ResourceEdit from './components/ResourceEdit.vue';
 import RoleRelation from './components/RoleRelation.vue';
-import { ACTION, RESOURCE_TYPE, resourceOptions } from './enum';
+import { ACTION, RESOURCE_COLOR, RESOURCE_TYPE, resourceOptions } from './enum';
 
 defineOptions({
   name: 'Resource',
@@ -28,16 +30,6 @@ const columns: ProColumns<TreeNode> = [
       allowClear: true,
     },
   },
-  {
-    valueType: 'a-input',
-    title: '资源编码',
-    dataIndex: 'code',
-    ellipsis: true,
-    fieldProps: {
-      placeholder: '请输入资源编码',
-      allowClear: true,
-    },
-  },
   {
     valueType: 'a-select',
     title: '资源类型',
@@ -48,20 +40,47 @@ const columns: ProColumns<TreeNode> = [
       options: resourceOptions,
     },
     customRender({ text }) {
-      const icon = ['', 'app', 'index', 'menu', 'btn', 'nonmenu'];
       return (
         <div class="flex items-center space-x-1">
-          <PubinfoIcon name={`resource-${icon[text]}`} class="text-xl" />
-          <span>{resourceOptions.find(item => item.value === text)?.label}</span>
+          {/* <PubinfoIcon name={`resource-${RESOURCE_ICON[text]}`} class="text-xl" />
+          <span>{resourceOptions.find(item => item.value === text)?.label}</span> */}
+
+          <Tag color={RESOURCE_COLOR[text]} bordered={false}>{resourceOptions.find(item => item.value === text)?.label}</Tag>
         </div>
       );
     },
   },
+  {
+    valueType: 'a-input',
+    title: '资源编码',
+    dataIndex: 'code',
+    ellipsis: true,
+    fieldProps: {
+      placeholder: '请输入资源编码',
+      allowClear: true,
+    },
+  },
+  {
+    title: '资源路径',
+    dataIndex: 'meta',
+    ellipsis: true,
+    hideInSearch: true,
+    customRender({ text }) {
+      return text?.url || '-';
+    },
+  },
+  {
+    title: '接口权限',
+    dataIndex: 'permissionCode',
+    ellipsis: true,
+    hideInSearch: true,
+  },
   {
     valueType: 'a-select',
     title: '是否启用',
     dataIndex: 'enable',
-    width: 100,
+    width: 80,
+    align: 'center',
     fieldProps: {
       placeholder: '请选择是否启用',
       allowClear: true,
@@ -78,22 +97,18 @@ const columns: ProColumns<TreeNode> = [
       );
     },
   },
-  {
-    title: '权限标识',
-    dataIndex: 'permissionCode',
-    ellipsis: true,
-    hideInSearch: true,
-  },
   {
     title: '排序',
     dataIndex: 'sort',
+    width: 60,
+    align: 'center',
     hideInSearch: true,
   },
   {
     title: '操作',
     dataIndex: 'action',
     fixed: 'right',
-    width: 320,
+    width: 300,
     hideInSearch: true,
     hideInTable() {
       return !auth([
@@ -120,10 +135,9 @@ function getTreeData() {
 }
 
 async function request(query: any) {
-  const { pageSize, current, enabled, ...rest } = cloneDeep(query);
+  const { pageSize, current, ...rest } = cloneDeep(query);
   const params: AddForm = {
     ...rest,
-    enabled: Boolean(enabled),
   };
   const dataSource = await getRbacResourceResourceTree(params, {
     transform(data) {
@@ -141,6 +155,7 @@ async function request(query: any) {
 
 const editRef = ref();
 const relationRef = ref();
+const importExportRef = ref();
 function onAction(key: string, record?: TreeNode) {
   switch (key) {
     case ACTION.ROLE_RELATION:
@@ -159,6 +174,10 @@ function onAction(key: string, record?: TreeNode) {
       editRef.value.open(key, record);
       break;
 
+    case ACTION.IMPORT_EXPORT:
+      importExportRef.value.open();
+      break;
+
     case ACTION.REMOVE:
       if (!record?.leaf) {
         message.info('非叶子节点不能删除');
@@ -193,14 +212,21 @@ function onAction(key: string, record?: TreeNode) {
       :columns="columns"
       :request="request"
       :pagination="false"
-      :scroll="{ x: 1024 }"
+      :scroll="{ x: 1280 }"
       auto-height
     >
       <template #toolbar>
-        <a-button v-auth="'resource_app_add'" type="primary" @click="onAction(ACTION.ADD)">
-          <PlusCircleOutlined />
-          {{ ACTION.ADD }}
-        </a-button>
+        <a-space>
+          <a-button v-auth="'resource_app_add'" type="primary" @click="onAction(ACTION.ADD)">
+            <PlusCircleOutlined />
+            {{ ACTION.ADD }}
+          </a-button>
+
+          <a-button @click="onAction(ACTION.IMPORT_EXPORT)">
+            <SwapOutlined />
+            {{ ACTION.IMPORT_EXPORT }}
+          </a-button>
+        </a-space>
       </template>
 
       <template #bodyCell="{ column, record }">
@@ -211,7 +237,7 @@ function onAction(key: string, record?: TreeNode) {
               <span>{{ ACTION.ROLE_RELATION }}</span>
             </a>
             <a
-              v-if="record.type !== RESOURCE_TYPE.BUTTON"
+              v-if="![RESOURCE_TYPE.BUTTON, RESOURCE_TYPE.IFRAME, RESOURCE_TYPE.LINK].includes(record.type)"
               v-auth="'resource_add_child'"
               class="flex items-center"
               @click="onAction(ACTION.ADD_CHILD, record)"
@@ -233,5 +259,6 @@ function onAction(key: string, record?: TreeNode) {
     </ProTable>
     <ResourceEdit ref="editRef" :data-source="dataSource" @submit="getTreeData" />
     <RoleRelation ref="relationRef" />
+    <ImportExport ref="importExportRef" :data-source="dataSource" @submit="getTreeData" />
   </div>
 </template>

package/src/views/resource/interface.ts

@@ -1,4 +1,8 @@
-export type Form = API.PubResource;
+import type { CustomMeta } from './model';
+
+export type Form = Omit<API.PubResource, 'meta'> & {
+  meta?: CustomMeta | API.PubResource['meta']
+};
 export type AddForm = API.PubResourceAddDto;
 export type EditForm = API.PubResourceUpdateDto;
 export type TreeNode = Form & {