@pubinfo-nightly/module-rbac 2025.11.14

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

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import type { Form } from '../interface';
+import { useMetaForm } from '../hooks/useMetaForm';
+import HoverCard from './HoverCard.vue';
+
+defineOptions({
+  name: 'MetaForm',
+});
+
+const form = defineModel<Form>({
+  default: {
+    meta: {
+      url: '',
+      component: '',
+    },
+  },
+});
+
+const { show } = useMetaForm(form);
+</script>
+
+<template>
+  <div>
+    <a-divider>其他配置</a-divider>
+
+    <!--
+      其他配置区域：根据资源类型的不同，显示不同的配置选项
+      - 开发模式：仅对应用和动态应用有效，用于开发环境的特殊配置
+      - 缓存标签页/固定标签页：仅对菜单有效，因为只有菜单会在浏览器标签页中展示
+      - 其他显示相关配置：适用于所有可视化的资源类型
+    -->
+
+    <a-row :gutter="[8, 8]">
+      <a-col :span="12">
+        <a-form-item name="enable" :label-col="{ span: 0 }">
+          <HoverCard class="flex items-center justify-between">
+            <div class="text-sm font-medium">
+              启用
+            </div>
+            <a-switch v-model:checked="form.enable" />
+          </HoverCard>
+        </a-form-item>
+      </a-col>
+
+      <!-- 开发模式：仅在应用或动态应用中显示 -->
+      <a-col v-if="show.devMode" :span="12">
+        <HoverCard :more="form.meta?.isDev" class="flex flex-wrap items-center">
+          <a-form-item
+            name="isDev"
+            :label-col="{ span: 0 }"
+            class="form-item-bottom-0 w-full"
+          >
+            <div class="flex items-center justify-between">
+              <div class="text-sm font-medium">
+                开发模式
+              </div>
+              <a-switch v-model:checked="form.meta!.isDev" />
+            </div>
+          </a-form-item>
+
+          <template #more>
+            <!-- 开发模式文本：仅在开启开发模式时显示 -->
+            <a-form-item
+              v-if="form.meta?.isDev"
+              label="提示文本"
+              name="devText"
+              tooltip="此文本将在用户点击开发模式应用时显示在提示框中"
+              :label-col="{ style: { fontSize: '12px' } }"
+              class="w-full"
+            >
+              <a-input
+                v-model:value="form.meta!.devText"
+                placeholder="请输入开发模式下的提示文本"
+                :maxlength="100"
+                show-count
+                size="small"
+              />
+            </a-form-item>
+          </template>
+        </HoverCard>
+      </a-col>
+
+      <a-col v-if="show.iframe" :span="12">
+        <a-form-item name="enable" :label-col="{ span: 0 }">
+          <HoverCard class="flex items-center justify-between">
+            <div class="text-sm font-medium">
+              启用缓存
+            </div>
+            <a-switch v-model:checked="form.meta!.iframeCache" />
+          </HoverCard>
+        </a-form-item>
+      </a-col>
+
+      <!-- 缓存标签页：仅在菜单中显示 -->
+      <a-col v-if="show.cacheAndPin" :span="12">
+        <HoverCard :more="form.meta?.cache" class="flex flex-wrap items-center">
+          <a-form-item name="cache" :label-col="{ span: 0 }" class="form-item-bottom-0 w-full">
+            <div class="flex items-center justify-between">
+              <div class="text-sm font-medium">
+                缓存标签页
+              </div>
+              <a-switch v-model:checked="form.meta!.cache" />
+            </div>
+          </a-form-item>
+
+          <template #more>
+            <a-form-item
+              label="指定页缓存"
+              name="cacheName"
+              tooltip="设置页面name值，前往指定页面时，当前页被缓存"
+              :label-col="{ style: { fontSize: '12px', width: '120px' } }"
+              class="w-full"
+            >
+              <a-input
+                v-model:value="form.meta!.cacheName"
+                placeholder="路由名称（多个用,隔开）"
+                size="small"
+              />
+            </a-form-item>
+
+            <a-form-item
+              label="指定页不缓存"
+              name="cacheName"
+              tooltip="设置页面name值，前往指定页面时，当前页不缓存"
+              :label-col="{ style: { fontSize: '12px', width: '120px' } }"
+              class="w-full"
+            >
+              <a-input
+                v-model:value="form.meta!.noCache"
+                placeholder="路由名称（多个用,隔开）"
+                size="small"
+              />
+            </a-form-item>
+          </template>
+        </HoverCard>
+      </a-col>
+
+      <!-- 固定标签页：仅在菜单中显示 -->
+      <a-col v-if="show.cacheAndPin" :span="12">
+        <a-form-item name="pin" :label-col="{ span: 0 }">
+          <HoverCard class="flex items-center justify-between">
+            <div class="text-sm font-medium">
+              固定在标签页
+            </div>
+            <a-switch v-model:checked="form.meta!.pin" />
+          </HoverCard>
+        </a-form-item>
+      </a-col>
+
+      <!-- 侧边栏显示：不适用于应用和动态应用 -->
+      <a-col v-if="show.sidebar" :span="12">
+        <a-form-item name="sidebar" :label-col="{ span: 0 }">
+          <HoverCard class="flex items-center justify-between">
+            <div class="text-sm font-medium">
+              在侧边栏显示
+            </div>
+            <a-switch v-model:checked="form.meta!.sidebar" />
+          </HoverCard>
+        </a-form-item>
+      </a-col>
+
+      <!-- 标签栏显示：不适用于应用、动态应用和目录 -->
+      <a-col v-if="show.tabbar" :span="12">
+        <a-form-item name="tabbar" :label-col="{ span: 0 }">
+          <HoverCard class="flex items-center justify-between">
+            <div class="text-sm font-medium">
+              在标签栏显示
+            </div>
+            <a-switch v-model:checked="form.meta!.tabbar" />
+          </HoverCard>
+        </a-form-item>
+      </a-col>
+
+      <a-col v-if="show.breadcrumb" :span="12">
+        <a-form-item name="breadcrumb" :label-col="{ span: 0 }">
+          <HoverCard class="flex items-center justify-between">
+            <div class="text-sm font-medium">
+              在面包屑显示
+            </div>
+            <a-switch v-model:checked="form.meta!.breadcrumb" />
+          </HoverCard>
+        </a-form-item>
+      </a-col>
+
+      <a-col :span="12">
+        <a-form-item name="custom" :label-col="{ span: 0 }">
+          <HoverCard class="flex items-center justify-between">
+            <div class="text-sm font-medium">
+              自定义 meta 数据
+
+              <span class="text-[rgba(0,0,0,0.45)]">
+                <a-tooltip title="自定义的数据在路由的 meta.custom 中获取">
+                  <QuestionCircleOutlined />
+                </a-tooltip>
+              </span>
+            </div>
+
+            <JsonEditorModal v-model="form.meta!.custom" title="自定义 meta 数据">
+              <template #trigger>
+                <a-button type="primary" size="small">
+                  配置
+                </a-button>
+              </template>
+            </JsonEditorModal>
+          </HoverCard>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<style lang="css" scoped>
+.form-item-bottom-0, .ant-form-item {
+  margin-bottom: 0;
+}
+</style>

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

@@ -0,0 +1,331 @@
+<script setup lang="ts">
+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 { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { cloneDeep } from 'lodash-es';
+import { PartyLoginModal } from 'pubinfo-nightly';
+import { getRbacResourceInfo, postRbacResourceAddResource, postRbacResourceResourceUpdate } from '@/api/modules/rbac';
+import { DATA_PERMISSION_TYPE, dataPermissionOptions } 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 ResourceIconSelect from './IconSelect.vue';
+import LayoutForm from './LayoutForm.vue';
+import MetaForm from './MetaForm.vue';
+
+defineOptions({
+  name: 'ResourceEdit',
+});
+
+const props = defineProps<{ dataSource: TreeNode[] }>();
+const emit = defineEmits(['submit']);
+
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+const form = ref<Partial<Form>>({});
+const state = reactive<{
+  title: string
+  record: TreeNode
+  initData: Partial<Form>
+}>({
+  title: '',
+  record: {},
+  initData: {
+    type: RESOURCE_TYPE.DYNAMIC_APP,
+    sort: 0,
+    enable: true,
+    enableDataPermission: false,
+    dataPermissionType: DATA_PERMISSION_TYPE.ALL,
+    meta: {
+      url: '',
+      component: '',
+    },
+  },
+});
+
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '请输入资源名称', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择资源类型', trigger: 'change' }],
+  code: [{ required: true, message: '请输入资源编码', trigger: 'blur' }],
+  sort: [{ type: 'number', required: true, message: '请输入排序', trigger: 'blur' }],
+  enable: [{ type: 'boolean', required: true, message: '请选择是否启用', trigger: 'change' }],
+};
+
+const parentNode = computed(() => {
+  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];
+  for (const node of list) {
+    if (fn(node)) {
+      return node;
+    }
+    if (node.children) {
+      list.push(...node.children);
+    }
+  }
+  return null;
+}
+
+const resourceComputedOptions = computed(() => {
+  switch (parentNode.value?.type) {
+    case RESOURCE_TYPE.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 => [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 => [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 => [RESOURCE_TYPE.APP, RESOURCE_TYPE.DYNAMIC_APP].includes(node.value));
+  }
+});
+
+const { show, resetIncompatibleOptions } = useMetaForm(form);
+
+// 计算第三方登录的目标URL (iframe或link地址)
+const partyLoginTargetUrl = computed(() => {
+  return form.value.meta?.iframe || form.value.meta?.link || '';
+});
+
+const [formLoading, setFormLoading] = useToggle(false);
+async function onOpen(key: ACTION, record?: Form) {
+  state.title = key;
+  form.value = cloneDeep(state.initData);
+  setOpen(true);
+
+  try {
+    setFormLoading(true);
+    if (key === ACTION.ADD_CHILD) {
+      form.value.parentId = record?.id as string;
+      form.value.type = resourceComputedOptions.value[0].value;
+
+      // 清除不适用于当前资源类型的配置项，确保业务逻辑一致性
+      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);
+function onSubmit() {
+  formRef.value?.validate().then(() => {
+    const params = cloneDeep({
+      ...form.value,
+      icon: form.value.icon || undefined,
+    });
+
+    // app, 目录等不参与数据权限筛选
+    if (!show.value.dataPermission) {
+      params.enableDataPermission = false;
+    }
+
+    // 如果是开发模式的应用，给出警告提示
+    if (show.value.devMode && form.value.meta?.isDev) {
+      console.warn('开发模式应用的子路由将不会在生产环境中注册到vue-router，请确保这是预期行为。');
+    }
+
+    // 处理 cache 相关逻辑
+    if (params.meta?.cache) {
+      if (params.meta.cacheName) {
+        params.meta.cache = params.meta.cacheName.split(',');
+      }
+    }
+
+    if (params.meta?.noCache) {
+      params.meta.noCache = params.meta.noCache.split(',');
+    }
+
+    if (!params.meta?.cache) {
+      delete params?.meta?.noCache;
+    }
+    delete params?.meta?.cacheName;
+
+    // 可以在提交前检查目录下是否有有效的子菜单，如果没有则给出提示
+    // 这部分逻辑可能需要额外的API调用来检查子资源
+
+    const promise
+      = state.title === ACTION.EDIT
+        ? postRbacResourceResourceUpdate(params as EditForm)
+        : postRbacResourceAddResource({ parentId: '', ...params } as AddForm);
+    setLoading(true);
+    promise
+      .then((res) => {
+        if (res?.success) {
+          message.success(`${state.title}成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    :title="state.title"
+    placement="right"
+    :width="800"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+  >
+    <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" :tooltip="!parentNode?.type ? '动态应用为后端路由，应用为前端路由' : ''">
+              <div
+                v-if="state.title === ACTION.EDIT"
+                class="flex items-center space-x-1"
+              >
+                <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-col :span="24">
+            <ResourceIconSelect v-model="form" />
+          </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 v-if="show.dynamic" :gutter="8">
+          <a-col :span="24">
+            <a-form-item label="对接第三方" name="description" :label-col="{ span: 3 }">
+              <PartyLoginModal v-model="form.meta!.partyLogin" :target-url="partyLoginTargetUrl">
+                <template #trigger>
+                  <a-input
+                    :value="form.meta!.partyLogin && form.meta!.partyLogin.length > 0 ? '已配置第三方登录流程' : ''"
+                    placeholder="配置第三方登录流程"
+                    readonly
+                  />
+                </template>
+              </PartyLoginModal>
+            </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>
+
+        <a-row v-if="show.dataPermission" :gutter="8">
+          <a-col :span="8">
+            <a-form-item label="启用数据权限" name="enableDataPermission">
+              <a-switch v-model:checked="form.enableDataPermission" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="16">
+            <a-form-item v-if="form.enableDataPermission" label="数据权限规则" name="dataPermissionType">
+              <a-select v-model:value="form.dataPermissionType" :options="dataPermissionOptions" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+        <MetaForm v-model="form" />
+        <LayoutForm v-model="form" />
+      </a-form>
+    </a-spin>
+
+    <template #footer>
+      <a-space>
+        <a-button @click="setOpen(false)">
+          取消
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="onSubmit()">
+          提交
+        </a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { ColumnsType } from 'ant-design-vue/es/table';
+import type { TreeNode } from '../interface';
+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',
+});
+
+const { token } = theme.useToken();
+
+const [open, setOpen] = useToggle(false);
+const { loading, data: dataSource, send } = useRequest(
+  params => getRbacResourceGetRoleListByResourceId(params, {
+    transform(data) {
+      return data.data ?? [];
+    },
+  }),
+  { immediate: false },
+);
+
+const columns: ColumnsType<API.PubRoleBo> = [
+  {
+    title: '角色名称',
+    dataIndex: 'name',
+    ellipsis: true,
+  },
+  {
+    title: '创建人',
+    dataIndex: 'createUserName',
+    width: 180,
+    ellipsis: true,
+  },
+];
+
+function onOpen(record: TreeNode) {
+  setOpen(true);
+  send({ id: record.id });
+  computeTableHeight();
+}
+
+const tableHeight = computed(() => {
+  return window.innerHeight
+    - 57 // Drawer header
+    - 48 // Drawer padding
+    - 55 // Table header
+    - 64; // Table pagination
+});
+
+function computeTableHeightHandler() {
+  nextTick(() => {
+    const tableBody = document.querySelector('.role-relation')?.querySelector<HTMLElement>('.ant-table-body');
+    if (tableBody) {
+      tableBody.style.height = `${tableHeight.value}px`;
+    }
+  });
+}
+
+function computeTableHeight() {
+  nextTick(computeTableHeightHandler);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    title="分配查看"
+    placement="right"
+    :width="520"
+    :footer-style="{ textAlign: 'right' }"
+  >
+    <a-table
+      row-key="id"
+      :loading="loading"
+      :columns="columns"
+      :data-source="dataSource"
+      :scroll="{ y: `${tableHeight}px` }"
+      :pagination="{ defaultPageSize: 20, showSizeChanger: true }"
+      class="role-relation"
+    >
+      <template #bodyCell="{ column, text }">
+        <template v-if="column.dataIndex === 'name'">
+          <div class="w-full truncate space-x-2">
+            <a-avatar size="small" :style="{ backgroundColor: token.colorPrimary }">
+              {{ text[0] }}
+            </a-avatar>
+            <span>{{ text }}</span>
+          </div>
+        </template>
+      </template>
+    </a-table>
+  </a-drawer>
+</template>

package/src/views/resource/enum.ts

@@ -0,0 +1,33 @@
+import { RESOURCE_TYPE } from 'pubinfo-nightly';
+
+/** 操作按钮 */
+export enum ACTION {
+  /** 分配查看 */
+  ROLE_RELATION = '分配查看',
+  /** 新建 */
+  ADD = '新建',
+  /** 新建下级 */
+  ADD_CHILD = '新建下级',
+  /** 导入/导出 */
+  IMPORT_EXPORT = '导入 / 导出',
+  /** 修改 */
+  EDIT = '修改',
+  /** 删除 */
+  REMOVE = '删除',
+}
+
+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.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 },
+];