@pubinfo-nightly/module-rbac 2025.11.14

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { DoubleRightOutlined } from '@ant-design/icons-vue';
+import { useToggle } from '@vueuse/core';
+import { theme } from 'ant-design-vue';
+
+defineOptions({
+  name: 'HoverCard',
+});
+
+defineProps<{
+  more?: boolean
+}>();
+
+const { token } = theme.useToken();
+const [hovered, toggle] = useToggle();
+const [expanded, expand] = useToggle();
+</script>
+
+<template>
+  <div
+    class="relative rounded-t-lg h-[72px] px-5 border border-solid"
+    :class="[expanded && more ? 'rounded-b-none' : 'rounded-b-lg']"
+    :style="{
+      borderColor: hovered ? token.colorPrimary : token.colorBorder,
+      boxShadow: hovered ? token.boxShadow : 'none',
+    }"
+    @mouseenter="toggle(true)"
+    @mouseleave="toggle(false)"
+  >
+    <slot />
+
+    <template v-if="more">
+      <div v-if="!expanded" class="absolute bottom-1 left-0 w-full text-center text-xs space-x-1 cursor-pointer" @click="expand(true)">
+        <span>更多</span>
+        <DoubleRightOutlined
+          :rotate="90"
+          class="animate-bounce"
+        />
+      </div>
+
+      <div
+        v-if="expanded"
+        class="absolute top-[70px] -left-px z-50 w-[calc(100%+2px)] pt-5 px-5 border border-solid rounded-b-lg"
+        :style="{
+          borderColor: hovered ? token.colorPrimary : token.colorBorder,
+          backgroundColor: token.colorBgElevated,
+          boxShadow: token.boxShadow,
+        }"
+      >
+        <slot name="more" />
+
+        <div class="mt-5 pb-1 w-full text-center text-xs space-x-1 cursor-pointer" @click="expand(false)">
+          <span>收起</span>
+          <DoubleRightOutlined
+            :rotate="270"
+            class="animate-bounce"
+          />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import type { Form } from '../interface';
+import { PubinfoIcon } from 'pubinfo-nightly';
+import ResourceIconesSelect from '../../../components/ResourceIcones/Select.vue';
+import { RESOURCE_TYPE } from '../enum';
+
+defineOptions({
+  name: 'ResourceIconSelect',
+});
+
+const modelValue = defineModel<Form>({
+  default: {
+    meta: {
+      url: '',
+      component: '',
+    },
+  },
+});
+
+// 仅当选择了非空的 boxType 时才把 iconOptions 持久化到 meta.iconOptions，
+// 避免未选择边框模式时仍写入多余数据导致后端解析问题。
+interface LocalIconOptions {
+  boxType: 'null' | 'square' | 'prism'
+  angle: number
+  background: { from: string, to: string } | string
+  radius: number | string
+  iconColor: string
+  iconSize?: number | string
+}
+
+function createDefaultIconOptions(): LocalIconOptions {
+  return {
+    boxType: 'null',
+    angle: 65,
+    background: { from: '#65E54A', to: '#35C724' },
+    radius: '50%',
+    iconColor: '',
+    iconSize: '50%',
+  };
+}
+
+const metaRef = computed(() => (modelValue.value.meta as any) || ((modelValue.value.meta as any) = {}));
+
+// 本地响应式副本，解决：刷新后后端异步填充 meta.iconOptions（对象引用被整体替换）导致视图仍指向初始默认对象的问题。
+const iconOptions = reactive<LocalIconOptions>(createDefaultIconOptions());
+
+// 监听 meta.iconOptions 的“引用”变化（后端数据覆盖时）并合并到本地副本；
+// 不用 deep 避免属性级别循环触发。
+watch(
+  () => metaRef.value.iconOptions,
+  (val) => {
+    if (val) {
+      Object.assign(iconOptions, createDefaultIconOptions(), val);
+    }
+    else {
+      // 若后端未提供，重置为默认值
+      Object.assign(iconOptions, createDefaultIconOptions());
+    }
+  },
+  { immediate: true },
+);
+
+// 将本地修改“写回” meta.iconOptions，使用浅比较避免无限循环。
+watch(
+  iconOptions,
+  (val) => {
+    if (!modelValue.value.icon) {
+      if (metaRef.value.iconOptions) {
+        Reflect.deleteProperty(metaRef.value, 'iconOptions');
+      }
+      return;
+    }
+    const current = metaRef.value.iconOptions;
+    let changed = false;
+    if (!current) {
+      changed = true;
+    }
+    else {
+      const keys = new Set([...Object.keys(current), ...Object.keys(val as any)]);
+      for (const k of keys) {
+        if ((current as any)[k] !== (val as any)[k]) {
+          changed = true;
+          break;
+        }
+      }
+    }
+    if (changed) {
+      metaRef.value.iconOptions = { ...(val as any) };
+    }
+  },
+  { deep: true },
+);
+
+const show = computed(() => {
+  const type = modelValue.value.type as RESOURCE_TYPE;
+
+  return {
+    icon: [RESOURCE_TYPE.DYNAMIC_APP, RESOURCE_TYPE.INDEX, RESOURCE_TYPE.MENU, RESOURCE_TYPE.IFRAME, RESOURCE_TYPE.LINK].includes(type),
+  };
+});
+
+/** 是否展示微应用/动态应用的额外表单项 */
+const isDynamicRoutesForm = computed(() => {
+  return true;
+});
+
+/** 清除已选择的图标 */
+function clearIcon(e: MouseEvent) {
+  e.stopPropagation();
+  if (modelValue.value.icon) {
+    modelValue.value.icon = undefined; // 设为 undefined 以触发 v-if 切换
+    Reflect.deleteProperty(metaRef.value, 'iconOptions');
+  }
+}
+</script>
+
+<template>
+  <a-form-item v-if="isDynamicRoutesForm && show.icon" label="资源图标">
+    <ResourceIconesSelect
+      v-slot="{ open }"
+      v-model="modelValue.icon"
+      v-model:box-type="iconOptions.boxType"
+      v-model:angle="iconOptions.angle"
+      v-model:background="iconOptions.background"
+      v-model:radius="iconOptions.radius"
+      v-model:icon-color="iconOptions.iconColor"
+      v-model:icon-size="iconOptions.iconSize"
+    >
+      <!-- select box -->
+      <template v-if="modelValue.icon">
+        <!-- 已选择图标展示盒子 -->
+        <div
+          class="size-64px flex justify-center items-center cursor-pointer
+          rounded-md border-px border-dashed relative group
+          border-[#d9d9d9] dark:border-[#424242]
+          hover:border-[#5794f7] dark:hover:border-[#5187e1] p-8px"
+          @click="open"
+        >
+          <PubinfoIcon
+            v-if="iconOptions.boxType && iconOptions.boxType !== 'null'"
+            :name="modelValue.icon"
+            :box="iconOptions.boxType"
+            size="48px"
+            :radius="iconOptions.radius"
+            :background="iconOptions.background"
+            :angle="iconOptions.angle"
+            :icon-size="iconOptions.iconSize"
+            :color="(modelValue.icon || '').startsWith('antd:') ? (iconOptions.iconColor || '#ffffff') : undefined"
+          />
+          <PubinfoIcon
+            v-else
+            :name="modelValue.icon"
+            size="48px"
+            :color="(modelValue.icon || '').startsWith('antd:') ? (iconOptions.iconColor || undefined) : undefined"
+          />
+          <!-- 清除按钮 -->
+          <button
+            v-if="modelValue.icon"
+            class="absolute -top-1.5 -right-1.5 size-5 flex items-center justify-center rounded-full
+            cursor-pointer border-none op-65 dark:op-55 hover:op-100"
+            type="button"
+            @click="clearIcon"
+          >
+            <PubinfoIcon name="antd:CloseOutlined" size="10px" />
+          </button>
+        </div>
+      </template>
+      <!-- null icon select box -->
+      <template v-else>
+        <div
+          class="size-64px flex justify-center items-center
+          rounded-md border-px border-dashed cursor-pointer
+          border-[#d9d9d9] dark:border-[#424242]
+          hover:border-[#5794f7] dark:hover:border-[#5187e1]
+          text-[#d9d9d9] dark:text-[#424242]
+          hover:text-[#5794f7] dark:hover:text-[#5187e1]
+          transition"
+          @click="open"
+        >
+          <div class="flex flex-col items-center justify-center">
+            <PubinfoIcon name="antd:PlusOutlined" />
+            <span class="text-10px mt-1">选择图标</span>
+          </div>
+        </div>
+      </template>
+    </ResourceIconesSelect>
+  </a-form-item>
+</template>

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

@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import type { TreeNode } from '../interface';
+import { ClockCircleOutlined, CloudDownloadOutlined, CloudUploadOutlined, DeleteOutlined, UndoOutlined } from '@ant-design/icons-vue';
+import { useToggle } from '@vueuse/core';
+import { message, theme, Upload } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { saveAs } from 'file-saver';
+import { deleteRbacResourceBackupDeleteResourceBackup, getRbacResourceBackupDetail, getRbacResourceBackupList, getRbacResourceBackupRestore, postRbacResourceBackupExportResourceData, postRbacResourceBackupImportResourceData } from '@/api/modules/rbac';
+import { RESOURCE_COLOR, resourceOptions } from '../enum';
+
+defineOptions({
+  name: 'ImportExport',
+});
+
+const props = defineProps<{ dataSource: TreeNode[] }>();
+const emit = defineEmits(['submit']);
+
+const { token } = theme.useToken();
+
+const [open, setOpen] = useToggle(false);
+const [loading, setLoading] = useToggle(false);
+
+const historyState = reactive<{
+  selectedId: string
+  list: any[]
+  treeData: any[]
+}>({
+  selectedId: '',
+  list: [],
+  treeData: [],
+});
+
+const tabList = computed(() => {
+  return historyState.selectedId
+    ? [
+        { key: 'current', tab: '当前资源' },
+        { key: 'history', tab: '历史记录' },
+      ]
+    : [{ key: 'current', tab: '当前资源' }];
+});
+
+const selectedKeys = ref<string[]>([]);
+const treeData = computed(() => props.dataSource as any);
+
+const tabState = reactive({
+  list: tabList,
+  key: 'current',
+  onTabChange(key: string) {
+    tabState.key = key;
+  },
+});
+
+function onOpen() {
+  setOpen(true);
+  tabState.key = 'current';
+  selectedKeys.value = [];
+  historyState.selectedId = '';
+  getHistoryList();
+}
+
+const [historyLoading, setHistoryLoading] = useToggle(false);
+async function getHistoryList() {
+  try {
+    setHistoryLoading(true);
+    const res = await getRbacResourceBackupList({ type: '0' });
+    if (res.success) {
+      historyState.list = res?.data ?? [];
+    }
+  }
+  finally {
+    setHistoryLoading(false);
+  }
+}
+
+const [selectHistoryLoading, setSelectHistoryLoading] = useToggle(false);
+async function onSelectHistory(id: string) {
+  if (historyState.selectedId === id) {
+    historyState.selectedId = '';
+    tabState.key = 'current';
+    return;
+  }
+  historyState.selectedId = id;
+  tabState.key = 'history';
+
+  try {
+    setSelectHistoryLoading(true);
+    const res = await getRbacResourceBackupDetail({ id });
+    if (res.success) {
+      historyState.treeData = res.data?.content ?? [];
+    }
+  }
+  finally {
+    setSelectHistoryLoading(false);
+  }
+}
+
+async function onExport() {
+  if (selectedKeys.value.length === 0) {
+    message.info(`请选中你要导出的资源节点。`);
+    return;
+  }
+
+  try {
+    setLoading(true);
+    const res = await postRbacResourceBackupExportResourceData(selectedKeys.value);
+    if (res.success) {
+      downloadJSON(res.data);
+      message.success('导出成功！');
+    }
+  }
+  finally {
+    setLoading(false);
+  }
+}
+
+async function onImport(file: File) {
+  try {
+    setLoading(true);
+    const res = await postRbacResourceBackupImportResourceData({ parentId: selectedKeys.value[0] ?? '0' }, {}, file);
+    if (res.success) {
+      message.success('导入成功！');
+      getHistoryList();
+    }
+    return Upload.LIST_IGNORE;
+  }
+  catch {
+    return Upload.LIST_IGNORE;
+  }
+  finally {
+    setLoading(false);
+    emit('submit');
+  }
+}
+
+function downloadJSON(data: any, filename = `资源数据_${dayjs().format('YYYYMMDDHHmmss')}.json`) {
+  const jsonStr = JSON.stringify(data, null, 2);
+  const blob = new Blob([jsonStr], { type: 'application/json;charset=utf-8' });
+  saveAs(blob, filename);
+}
+
+const [restoreLoading, setRestoreLoading] = useToggle(false);
+async function restoreBackup() {
+  try {
+    setRestoreLoading(true);
+    const res = await getRbacResourceBackupRestore({ id: historyState.selectedId });
+    if (res.success) {
+      message.success('恢复备份成功！');
+      getHistoryList();
+      emit('submit');
+    }
+  }
+  finally {
+    setRestoreLoading(false);
+  }
+}
+
+const [removeLoading, setRemoveLoading] = useToggle(false);
+async function removeBackup() {
+  try {
+    setRemoveLoading(true);
+    const res = await deleteRbacResourceBackupDeleteResourceBackup({ id: historyState.selectedId });
+    if (res.success) {
+      message.success('删除备份成功！');
+      getHistoryList();
+      tabState.key = 'current';
+      historyState.selectedId = '';
+    }
+  }
+  finally {
+    setRemoveLoading(false);
+  }
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-modal
+    v-model:open="open"
+    title="导入 / 导出"
+    centered
+    :width="1000"
+    destroy-on-close
+    :mask-closable="false"
+    :footer="null"
+  >
+    <div class="h-[70vh]">
+      <a-row :gutter="8" class="h-full">
+        <a-col span="16" class="h-full">
+          <a-card
+            :head-style="{ marginBottom: 0, padding: '0 12px' }"
+            :body-style="{ padding: '12px', height: 'calc(100% - 56px)', overflow: 'auto' }"
+            :tab-list="tabState.list"
+            :active-tab-key="tabState.key"
+            class="h-full"
+            @tab-change="(key: string) => tabState.onTabChange(key)"
+          >
+            <template #tabBarExtraContent>
+              <a-space v-if="tabState.key === 'current'">
+                <a-upload :before-upload="onImport">
+                  <a-button type="primary" :loading="loading">
+                    <CloudUploadOutlined />
+                    导入
+                  </a-button>
+                </a-upload>
+                <a-button :disabled="selectedKeys.length === 0" :loading="loading" @click="onExport()">
+                  <CloudDownloadOutlined />
+                  导出
+                </a-button>
+              </a-space>
+
+              <template v-if="tabState.key === 'history'">
+                <a-space>
+                  <a-popconfirm
+                    title="是否使用该历史数据覆盖当前数据?"
+                    @confirm="restoreBackup()"
+                  >
+                    <a-button :loading="restoreLoading">
+                      <UndoOutlined />
+                      恢复备份
+                    </a-button>
+                  </a-popconfirm>
+                  <a-popconfirm
+                    title="是否删除该历史数据备份?"
+                    @confirm="removeBackup()"
+                  >
+                    <a-button :loading="removeLoading" danger>
+                      <DeleteOutlined />
+                      删除备份
+                    </a-button>
+                  </a-popconfirm>
+                </a-space>
+              </template>
+            </template>
+
+            <div v-show="tabState.key === 'current'">
+              <a-tree
+                key="current"
+                v-model:selected-keys="selectedKeys"
+                :field-names="{ children: 'children', title: 'name', key: 'id' }"
+                :tree-data="treeData"
+                block-node
+              >
+                <template #title="node">
+                  <a-tag :color="RESOURCE_COLOR[node.type]" :bordered="false">
+                    {{ resourceOptions.find(item => item.value === node.type)?.label }}
+                  </a-tag>
+                  <span>{{ node.name }}</span>
+                </template>
+              </a-tree>
+            </div>
+
+            <div v-show="tabState.key === 'history' " class="size-full">
+              <a-spin :spinning="selectHistoryLoading">
+                <a-tree
+                  key="history"
+                  :field-names="{ children: 'children', title: 'name', key: 'id' }"
+                  :tree-data="historyState.treeData"
+                  :selectable="false"
+                  class="size-full"
+                >
+                  <template #title="node">
+                    <a-tag :color="RESOURCE_COLOR[node.type]" :bordered="false">
+                      {{ resourceOptions.find(item => item.value === node.type)?.label }}
+                    </a-tag>
+                    <span>{{ node.name }}</span>
+                  </template>
+                </a-tree>
+              </a-spin>
+            </div>
+          </a-card>
+        </a-col>
+
+        <a-col span="8" class="h-full">
+          <a-card
+            title="历史记录"
+            :head-style="{ marginBottom: 0, padding: '0 12px' }"
+            :body-style="{ padding: '8px', height: 'calc(100% - 56px)', overflowY: 'auto' }"
+            class="h-full"
+          >
+            <div
+              v-if="historyLoading"
+              class="flex flex-col items-center justify-center size-full"
+            >
+              <a-spin />
+            </div>
+            <div
+              v-if="historyState.list.length === 0 && !historyLoading"
+              class="flex flex-col items-center justify-center size-full"
+            >
+              <a-empty />
+            </div>
+            <div
+              v-for="item in historyState.list"
+              :key="item.id"
+              class="flex justify-between items-center space-x-2 cursor-pointer hover:bg-gray-50 py-1 px-2 rounded"
+              :style="{ backgroundColor: historyState.selectedId === item.id ? token.colorPrimaryBg : '' }"
+              @click="onSelectHistory(item.id)"
+            >
+              <div class="space-x-1">
+                <ClockCircleOutlined />
+                <span class="text-sm truncate">{{ item.createTime }}</span>
+              </div>
+              <span class="text-xs shrink-0" :style="{ color: token.colorTextTertiary }">{{ item.createUserName }}</span>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+  </a-modal>
+</template>

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

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { Form } from '../interface';
+import { useLayoutForm } from '../hooks/useLayoutForm';
+import HoverCard from './HoverCard.vue';
+
+/**
+ * 修改系统层的布局
+ *
+ * ## Methods
+ * - 控制 侧边栏 是否显示
+ * - 控制 顶栏 是否显示
+ * - 控制 Tabs 是否显示
+ * - 控制 面包屑 是否显示
+ */
+
+defineOptions({
+  name: 'LayoutForm',
+});
+
+const form = defineModel<Form>({
+  default: {
+    meta: {
+      layout: {
+        header: true,
+        sidebar: true,
+        tabs: true,
+        toolbar: true,
+      },
+    },
+  },
+});
+
+const { layoutForm, show } = useLayoutForm(form);
+</script>
+
+<template>
+  <div v-if="show">
+    <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">
+              显示 Header
+            </div>
+            <a-switch v-model:checked="layoutForm.header" />
+          </HoverCard>
+        </a-form-item>
+      </a-col>
+
+      <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">
+              显示 Sidebar
+            </div>
+            <a-switch v-model:checked="layoutForm.sidebar" />
+          </HoverCard>
+        </a-form-item>
+      </a-col>
+
+      <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">
+              显示 Tabs
+            </div>
+            <a-switch v-model:checked="layoutForm.tabs" />
+          </HoverCard>
+        </a-form-item>
+      </a-col>
+
+      <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">
+              显示 Toolbar
+            </div>
+            <a-switch v-model:checked="layoutForm.toolbar" />
+          </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>