@pubinfo-nightly/module-rbac 2025.11.14

package/src/components/OrgUserSelector/provider.ts

@@ -0,0 +1,373 @@
+import type { OrgProviderProps, UserProviderProps } from '@pubinfo/headlessui';
+import { message } from 'ant-design-vue';
+import { getGroupDetailById, postGroupFindPage } from '@/api/modules/assist';
+import { getRbacOrgOrgListByParentId, getRbacOrgSearchSubOrgById, postRbacCollectAdd, postRbacCollectFindPage, postRbacCollectRemoveCollect, postRbacOrgSearch, postRbacOrgSearchOrgByIds, postRbacUsedAddBatch, postRbacUsedFindPage, postRbacUserUserAndOrgList, postRbacUserUserForMultiOrgPage } from '@/api/modules/rbac';
+
+interface ExtraApis {
+  /** 回显选中项 */
+  getSelectedData?: (items: any[]) => Promise<any[]>
+  /** 添加到最近常用 */
+  addRecentlyUsed?: (items: any[]) => Promise<any>
+}
+
+type Filter<T = any> = (value: T, index: number) => boolean;
+
+export const orgFieldNames: OrgProviderProps['fieldNames'] = {
+  value: 'orgId',
+  label: 'orgName',
+  favorite: 'collect',
+  info: 'fullName',
+};
+
+export const userFieldNames: OrgProviderProps['fieldNames'] = {
+  value: 'orgUserId',
+  label: 'userName',
+  favorite: 'collect',
+  info: 'fullName',
+};
+
+export function joinId(orgId: string = '', userId: string = '') {
+  return `${orgId}_${userId}`;
+}
+
+export function resolveId(orgUserId: string) {
+  const [orgId, userId] = orgUserId?.split('_');
+  return {
+    orgId,
+    userId,
+  };
+}
+
+function setDataAuth(auth?: string) {
+  if (auth) {
+    return {
+      headers: { 'X-ResourceMark': auth },
+    };
+  }
+
+  return {};
+}
+
+export function useOrgAPIs(
+  { auth, filter }: { auth?: string, filter: Filter },
+): OrgProviderProps['apis'] & ExtraApis {
+  return {
+    // 回显选中项
+    async getSelectedData(items: any[]) {
+      const res = await postRbacOrgSearchOrgByIds(
+        items.map(item => item[orgFieldNames.value]),
+        setDataAuth(auth),
+      );
+      return res?.data?.map((e) => {
+        return {
+          ...e,
+          [orgFieldNames.value]: e.id,
+          [orgFieldNames.label]: e.name,
+          [orgFieldNames.info]: e.fullName,
+        };
+      }) ?? [];
+    },
+
+    // 添加到最近常用
+    async addRecentlyUsed(items: any[]) {
+      await postRbacUsedAddBatch(items.map((item) => {
+        return {
+          type: '1',
+          orgId: item[orgFieldNames.value],
+          orgName: item[orgFieldNames.label],
+        };
+      }), setDataAuth(auth));
+    },
+
+    // 最近常用
+    async recentlyUsed({ search, current }) {
+      const res = await postRbacUsedFindPage({
+        type: '1',
+        orgName: search,
+        currentPage: current,
+        pageSize: 20,
+        showIsCollect: true,
+      }, setDataAuth(auth));
+      return {
+        total: 20,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [orgFieldNames.value]: e.orgId,
+            [orgFieldNames.label]: e.orgName,
+            [orgFieldNames.info]: e.fullOrgName,
+          };
+        }) ?? [],
+      };
+    },
+
+    // 收藏
+    async favorites({ search, current, pageSize }) {
+      const res = await postRbacCollectFindPage({
+        type: '1',
+        orgName: search,
+        currentPage: current,
+        pageSize,
+      }, setDataAuth(auth));
+      return {
+        total: res.data?.total ?? 0,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [orgFieldNames.value]: e.orgId,
+            [orgFieldNames.label]: e.orgName,
+            [orgFieldNames.info]: e.fullOrgName,
+          };
+        }) ?? [],
+      };
+    },
+
+    // 添加取消收藏
+    async favoriteToggle({ favorite, record }) {
+      const request = favorite ? postRbacCollectAdd : postRbacCollectRemoveCollect;
+      const res = await request({ type: '1', orgId: record?.[orgFieldNames.value] }, setDataAuth(auth));
+      if (res.success) {
+        message.success(favorite ? '收藏成功' : '取消收藏成功');
+      }
+    },
+
+    // 群组列表
+    async groups({ search, current, pageSize }) {
+      const res = await postGroupFindPage({
+        type: '1',
+        name: search,
+        currentPage: current,
+        pageSize,
+      });
+      return {
+        total: res.data?.total ?? 0,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [orgFieldNames.value]: e.id,
+            [orgFieldNames.label]: e.name,
+          };
+        }) ?? [],
+      };
+    },
+
+    // 群组数据
+    async groupData({ node }) {
+      const res = await getGroupDetailById({ id: node?.id, showIsCollect: true }, setDataAuth(auth));
+      return res.data?.pubGroupMemberList?.map((e) => {
+        return {
+          ...e,
+          [orgFieldNames.value]: e.orgId,
+          [orgFieldNames.label]: e.orgName,
+          [orgFieldNames.info]: e.fullOrgName,
+          isLeaf: true,
+        };
+      }).filter(filter) ?? [];
+    },
+
+    // 组织树
+    async orgTree({ node }) {
+      const res = await getRbacOrgOrgListByParentId({
+        parentId: node?.orgId,
+        enable: true,
+        showFullName: true,
+        showIsCollect: true,
+      }, setDataAuth(auth));
+      return res.data?.map((e) => {
+        return {
+          ...e,
+          [orgFieldNames.value]: e.id,
+          [orgFieldNames.label]: e.name,
+          [orgFieldNames.info]: e.fullName,
+          isLeaf: e.leaf,
+        };
+      }).filter(filter) ?? [];
+    },
+
+    // 组织的所有子节点
+    async orgChildren({ node }) {
+      const res = await getRbacOrgSearchSubOrgById({ parentId: node?.orgId }, setDataAuth(auth));
+      return res.data?.map((e) => {
+        return {
+          ...e,
+          [orgFieldNames.value]: e.id,
+          [orgFieldNames.label]: e.name,
+          [orgFieldNames.info]: e.fullName,
+          isLeaf: e.leaf,
+        };
+      }).filter(filter) ?? [];
+    },
+
+    // 组织列表
+    async orgList({ search, current, pageSize }) {
+      const res = await postRbacOrgSearch({
+        keyWord: search,
+        currentPage: current,
+        pageSize,
+        showIsCollect: true,
+      }, setDataAuth(auth));
+      return {
+        total: res.data?.total ?? 0,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [orgFieldNames.value]: e.id,
+            [orgFieldNames.label]: e.simpleName,
+            [orgFieldNames.info]: e.fullName,
+          };
+        }).filter(filter) ?? [],
+      };
+    },
+  };
+}
+
+export function useUserAPIs(
+  { auth, filter }: { auth?: string, filter: Filter },
+): UserProviderProps['apis'] & ExtraApis {
+  return {
+    // 回显选中项
+    async getSelectedData(items: any[]) {
+      const res = await postRbacUserUserAndOrgList(items.map((item) => {
+        return {
+          orgId: item.orgId,
+          userId: item.userId,
+        };
+      }), setDataAuth(auth));
+      return res?.data?.map((e) => {
+        return {
+          ...e,
+          [userFieldNames.value]: joinId(e?.orgId, e.id),
+          [userFieldNames.label]: e.realName,
+          [userFieldNames.info]: e.fullOrgName,
+        };
+      }) ?? [];
+    },
+
+    // 添加到最近常用
+    async addRecentlyUsed(items: any[]) {
+      await postRbacUsedAddBatch(items.map((item) => {
+        const ids = resolveId(item[userFieldNames.value]);
+        return {
+          type: '2',
+          orgId: ids.orgId,
+          userId: ids.userId,
+          userName: item[userFieldNames.label],
+        };
+      }), setDataAuth(auth));
+    },
+
+    // 最近常用
+    async recentlyUsed({ search, current }) {
+      const res = await postRbacUsedFindPage({
+        type: '2',
+        userName: search,
+        currentPage: current,
+        pageSize: 20,
+        showIsCollect: true,
+      }, setDataAuth(auth));
+      return {
+        total: 20,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [userFieldNames.value]: joinId(e.orgId, e.userId),
+            [userFieldNames.label]: e.userName,
+            [userFieldNames.info]: e.fullOrgName,
+          };
+        }) ?? [],
+      };
+    },
+
+    // 收藏
+    async favorites({ search, current, pageSize }) {
+      const res = await postRbacCollectFindPage({
+        type: '2',
+        userName: search,
+        currentPage: current,
+        pageSize,
+      }, setDataAuth(auth));
+      return {
+        total: res.data?.total ?? 0,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [userFieldNames.value]: joinId(e.orgId, e.userId),
+            [userFieldNames.label]: e.userName,
+            [userFieldNames.info]: e.fullOrgName,
+          };
+        }) ?? [],
+      };
+    },
+
+    // 添加取消收藏
+    async favoriteToggle({ favorite, record }) {
+      const request = favorite ? postRbacCollectAdd : postRbacCollectRemoveCollect;
+      const ids = resolveId(record?.[userFieldNames.value]);
+      const res = await request({
+        type: '2',
+        orgId: ids.orgId,
+        userId: ids.userId,
+      }, setDataAuth(auth));
+      if (res.success) {
+        message.success(favorite ? '收藏成功' : '取消收藏成功');
+      }
+    },
+
+    // 群组列表
+    async groups({ search, current, pageSize }) {
+      const res = await postGroupFindPage({
+        type: '2',
+        name: search,
+        currentPage: current,
+        pageSize,
+      }, setDataAuth(auth));
+      return {
+        total: res.data?.total ?? 0,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [userFieldNames.value]: e.id,
+            [userFieldNames.label]: e.name,
+          };
+        }) ?? [],
+      };
+    },
+
+    // 群组数据
+    async groupData({ node }) {
+      const res = await getGroupDetailById({ id: node?.id, showIsCollect: true }, setDataAuth(auth));
+      return res.data?.pubGroupMemberList?.map((e) => {
+        return {
+          ...e,
+          [userFieldNames.value]: joinId(e.orgId, e.userId),
+          [userFieldNames.label]: e.userName,
+          [userFieldNames.info]: e.fullOrgName,
+          isLeaf: true,
+        };
+      }).filter(filter) ?? [];
+    },
+
+    // 用户列表
+    async userList({ orgId, search, current, pageSize }) {
+      const res = await postRbacUserUserForMultiOrgPage({
+        orgId,
+        realName: search,
+        currentPage: current,
+        pageSize,
+        enable: true,
+        showIsCollect: true,
+      }, setDataAuth(auth));
+      return {
+        total: res.data?.total ?? 0,
+        data: res.data?.records?.map((e) => {
+          return {
+            ...e,
+            [userFieldNames.value]: joinId(e.orgId, e.userId),
+            [userFieldNames.label]: e.userName,
+            [userFieldNames.info]: e.fullOrgName,
+          };
+        }).filter(filter) ?? [],
+      };
+    },
+  };
+}

package/src/components/ResourceIcones/BoxColorPicker.vue

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+defineOptions({ name: 'ResourceIconesBoxColorPicker' });
+
+const props = defineProps<{ angle?: number | string, background?: Background, radius?: number | string, iconSize?: number | string, disabled?: boolean }>();
+
+const emit = defineEmits<{
+  (e: 'update:angle', v: number | string): void
+  (e: 'update:background', v: Background): void
+  (e: 'update:radius', v: number | string): void
+  (e: 'update:iconSize', v: number | string): void
+}>();
+
+type Background = string | { from: string, to: string };
+
+function normalizeAngle(a?: number | string): number {
+  if (typeof a === 'number' && Number.isFinite(a)) {
+    return (a % 360 + 360) % 360;
+  }
+  if (typeof a === 'string') {
+    const n = Number.parseFloat(a);
+    if (Number.isFinite(n)) {
+      return (n % 360 + 360) % 360;
+    }
+  }
+  return 65;
+}
+function normalizeBg(b?: Background): { from: string, to: string } {
+  if (!b) {
+    return { from: '#65E54A', to: '#35C724' };
+  }
+  if (typeof b === 'string') {
+    return { from: b, to: b };
+  }
+  return { from: b.from, to: b.to };
+}
+// 圆角改为百分比：内部使用纯数字 0-50 表示 0%-50%，对外发射 'xx%'
+function normalizeRadius(r?: number | string): number {
+  if (typeof r === 'string' && r.trim().endsWith('%')) {
+    const n = Number.parseFloat(r);
+    if (Number.isFinite(n)) {
+      return clampPercent(n);
+    }
+  }
+  if (typeof r === 'number' && Number.isFinite(r)) {
+    return clampPercent(r);
+  }
+  if (typeof r === 'string') {
+    const n = Number.parseFloat(r);
+    if (Number.isFinite(n)) {
+      return clampPercent(n);
+    }
+  }
+  return 50;
+}
+
+// 图标大小（百分比）：内部使用 0-100 数字，外部发射 'xx%'
+function normalizeIconSize(v?: number | string): number {
+  if (typeof v === 'string' && v.trim().endsWith('%')) {
+    const n = Number.parseFloat(v);
+    if (Number.isFinite(n)) {
+      return clamp100(n);
+    }
+  }
+  if (typeof v === 'number' && Number.isFinite(v)) {
+    return clamp100(v);
+  }
+  if (typeof v === 'string') {
+    const n = Number.parseFloat(v);
+    if (Number.isFinite(n)) {
+      return clamp100(n);
+    }
+  }
+  return 50;
+}
+
+function clampPercent(n: number) {
+  // 一般正方形圆角超过 50% 没有意义，这里限制 0-50
+  return Math.min(50, Math.max(0, n));
+}
+
+function clamp100(n: number) {
+  return Math.min(100, Math.max(0, n));
+}
+
+const init = normalizeBg(props.background);
+const fromColor = ref<string>(init.from);
+const toColor = ref<string>(init.to);
+const angleRef = ref<number>(normalizeAngle(props.angle));
+const radiusRef = ref<number>(normalizeRadius(props.radius));
+const iconSizeRef = ref<number>(normalizeIconSize(props.iconSize));
+
+// 原生 color 输入：放在前缀里，用透明绝对定位来锚定弹层位置
+const fromColorPickerRef = ref<HTMLInputElement | null>(null);
+const toColorPickerRef = ref<HTMLInputElement | null>(null);
+function openFromPicker() {
+  if (props.disabled) {
+    return;
+  }
+  const el = fromColorPickerRef.value;
+  if (el) {
+    // 确保有尺寸与位置，避免浏览器把弹层放到左上角
+    el.style.width = '16px';
+    el.style.height = '16px';
+    el.click();
+  }
+}
+function openToPicker() {
+  if (props.disabled) {
+    return;
+  }
+  const el = toColorPickerRef.value;
+  if (el) {
+    el.style.width = '16px';
+    el.style.height = '16px';
+    el.click();
+  }
+}
+
+watch([fromColor, toColor, angleRef, radiusRef], () => {
+  emit('update:background', { from: fromColor.value, to: toColor.value });
+  emit('update:angle', angleRef.value);
+  emit('update:radius', `${radiusRef.value}%`);
+}, { immediate: true });
+
+watch(iconSizeRef, () => {
+  emit('update:iconSize', `${iconSizeRef.value}%`);
+}, { immediate: true });
+
+watch(() => props.background, (b) => {
+  if (b == null) {
+    return;
+  }
+  const n = normalizeBg(b);
+  fromColor.value = n.from;
+  toColor.value = n.to;
+});
+watch(() => props.angle, (a) => {
+  if (a == null) {
+    return;
+  }
+  angleRef.value = normalizeAngle(a);
+});
+watch(() => props.radius, (r) => {
+  if (r == null) {
+    return;
+  }
+  radiusRef.value = normalizeRadius(r);
+});
+
+watch(() => props.iconSize, (v) => {
+  if (v == null) {
+    return;
+  }
+  iconSizeRef.value = normalizeIconSize(v);
+});
+
+// 提示：预览区已移除以节省侧栏空间
+</script>
+
+<template>
+  <div class="flex flex-col gap-3 w-full select-none">
+    <!-- 起始色：紧凑输入（前缀色块 + 文本），隐藏原生 color 触发器 -->
+    <div class="flex items-center gap-3">
+      <label class="text-12px opacity-70 w-14 shrink-0">起始色</label>
+      <a-input v-model:value="fromColor" :disabled="props.disabled" placeholder="#65E54A" size="small" class="flex-1 min-w-0">
+        <template #prefix>
+          <div class="relative inline-flex items-center">
+            <button type="button" :disabled="props.disabled" class="w-4 h-4 rounded border border-gray-300 dark:border-gray-700" :class="props.disabled ? 'opacity-50 cursor-not-allowed' : ''" :style="{ background: fromColor }" @click="openFromPicker" />
+            <!-- 透明绝对定位的原生 input，用于正确锚定系统取色器位置 -->
+            <input
+              ref="fromColorPickerRef"
+              type="color"
+              :value="fromColor"
+              :disabled="props.disabled"
+              class="absolute left-0 top-0 opacity-0 pointer-events-none"
+              style="width:16px;height:16px;"
+              @input="fromColor = ($event.target as HTMLInputElement).value"
+            >
+          </div>
+        </template>
+      </a-input>
+    </div>
+
+    <!-- 结束色：紧凑输入（前缀色块 + 文本），隐藏原生 color 触发器 -->
+    <div class="flex items-center gap-3">
+      <label class="text-12px opacity-70 w-14 shrink-0">结束色</label>
+      <a-input v-model:value="toColor" :disabled="props.disabled" placeholder="#35C724" size="small" class="flex-1 min-w-0">
+        <template #prefix>
+          <div class="relative inline-flex items-center">
+            <button type="button" :disabled="props.disabled" class="w-4 h-4 rounded border border-gray-300 dark:border-gray-700" :class="props.disabled ? 'opacity-50 cursor-not-allowed' : ''" :style="{ background: toColor }" @click="openToPicker" />
+            <input
+              ref="toColorPickerRef"
+              type="color"
+              :value="toColor"
+              :disabled="props.disabled"
+              class="absolute left-0 top-0 opacity-0 pointer-events-none"
+              style="width:16px;height:16px;"
+              @input="toColor = ($event.target as HTMLInputElement).value"
+            >
+          </div>
+        </template>
+      </a-input>
+    </div>
+
+    <!-- 角度：仅使用数字输入，节省横向空间 -->
+    <div class="flex items-center gap-3">
+      <label class="text-12px opacity-70 w-14 shrink-0">角度</label>
+      <a-input-number v-model:value="angleRef" :disabled="props.disabled" :min="0" :max="360" :step="1" size="small" class="w-28" />
+      <span class="text-12px opacity-70">deg</span>
+    </div>
+
+    <!-- 圆角（百分比）：仅使用数字输入，节省横向空间 -->
+    <div class="flex items-center gap-3">
+      <label class="text-12px opacity-70 w-14 shrink-0">圆角</label>
+      <a-input-number v-model:value="radiusRef" :disabled="props.disabled" :min="0" :max="50" :step="1" size="small" class="w-28" />
+      <span class="text-12px opacity-70">%</span>
+    </div>
+
+    <!-- 图标大小（百分比）：仅在盒子内生效，控制内层图标比例 -->
+    <div class="flex items-center gap-3">
+      <label class="text-12px opacity-70 w-14 shrink-0">图标大小</label>
+      <a-input-number v-model:value="iconSizeRef" :disabled="props.disabled" :min="0" :max="100" :step="1" size="small" class="w-28" />
+      <span class="text-12px opacity-70">%</span>
+    </div>
+  </div>
+</template>