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

package/src/components/ResourceIcones/Select.vue

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import * as AntdIcons from '@ant-design/icons-vue';
+import { Empty } from 'ant-design-vue';
+import { getAllIconModules, PubinfoIcon } from 'pubinfo';
+
+defineOptions({ name: 'ResourceIconesSelect' });
+
+// v-model
+const modelValueRef = defineModel<string>();
+
+// 弹窗
+const visibleRef = ref(false);
+function handleOpenModal() {
+  visibleRef.value = true;
+}
+function handleClose() {
+  visibleRef.value = false;
+}
+
+// 基础数据
+interface IconItem { name: string, module?: string }
+
+// 提取文件名(去后缀)
+function extractName(path: string) {
+  const seg = path.split(/[\\/]/).pop() || path;
+  return seg.replace(/\.(svg|png|jpe?g)$/i, '');
+}
+
+// 资产图标模块 -> 图标列表 (Map 迭代)
+const moduleIconMap = computed(() => {
+  const m = new Map<string, string[]>();
+  const all = getAllIconModules();
+  for (const [mod, record] of all.entries()) {
+    const arr = Object.keys(record)
+      .map(extractName)
+      .sort();
+    m.set(mod, arr);
+  }
+  return m;
+});
+
+// AntD 图标（带前缀 antd:）
+const antdIcons = computed<string[]>(() => Object.keys(AntdIcons)
+  .filter(n => /(?:Outlined|Filled|TwoTone)$/.test(n))
+  .map(n => `antd:${n}`)
+  .sort(),
+);
+
+// 模块列表（全部 + 本地(local) 优先 + 其余模块 + Ant Design）
+const moduleOptions = computed(() => {
+  const keys = Array.from(moduleIconMap.value.keys());
+  const hasLocal = keys.includes('local');
+  const others = keys.filter(k => k !== 'local').sort();
+  return [
+    { label: '全部', value: 'all' },
+    ...(hasLocal ? [{ label: '本地', value: 'local' }] : []),
+    ...others.map(v => ({ label: v, value: v })),
+    { label: 'Ant Design', value: 'antd' },
+  ];
+});
+const activeModule = ref('all');
+
+// 搜索关键字
+const keyword = ref('');
+
+// 所有图标集合
+const allIcons = computed<IconItem[]>(() => {
+  const list: IconItem[] = [];
+  for (const [mod, arr] of moduleIconMap.value.entries()) {
+    arr.forEach((n) => {
+      if (mod === 'local') {
+        list.push({ name: n, module: mod });
+      }
+      else {
+        list.push({ name: `${mod}-[${n}]`, module: mod });
+      }
+    });
+  }
+  antdIcons.value.forEach(n => list.push({ name: n, module: 'antd' }));
+  return list;
+});
+
+// 模块过滤
+const moduleFiltered = computed(() => {
+  if (activeModule.value === 'all') {
+    return allIcons.value;
+  }
+  if (activeModule.value === 'antd') {
+    return allIcons.value.filter(i => i.module === 'antd');
+  }
+  return allIcons.value.filter(i => i.module === activeModule.value);
+});
+
+// 搜索过滤（名称包含）
+const filtered = computed(() => {
+  const k = keyword.value.trim().toLowerCase();
+  if (!k) {
+    return moduleFiltered.value;
+  }
+  return moduleFiltered.value.filter(i => i.name.toLowerCase().includes(k));
+});
+
+// 计数
+function moduleCount(val: string) {
+  if (val === 'all') {
+    return allIcons.value.length;
+  }
+  if (val === 'antd') {
+    return allIcons.value.filter(i => i.module === 'antd').length;
+  }
+  return allIcons.value.filter(i => i.module === val).length;
+}
+
+// 分页 (30/页)
+const pageSize = 30;
+const currentPage = ref(1);
+const pageCount = computed(() => Math.max(1, Math.ceil(filtered.value.length / pageSize)));
+const pageIcons = computed(() => {
+  const start = (currentPage.value - 1) * pageSize;
+  return filtered.value.slice(start, start + pageSize);
+});
+watch([keyword, activeModule], () => {
+  currentPage.value = 1;
+});
+// 当过滤结果长度变化时，若当前页超出范围则回退到最后一页
+watch(filtered, () => {
+  if (currentPage.value > pageCount.value) {
+    currentPage.value = pageCount.value;
+  }
+});
+function onPageChange(page: number) {
+  currentPage.value = page;
+}
+
+// 选择
+function handleSelect(icon: IconItem) {
+  modelValueRef.value = icon.name;
+  handleClose();
+}
+
+const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
+</script>
+
+<template>
+  <a-input v-model:value="modelValueRef" @click="handleOpenModal">
+    <template #addonAfter>
+      <a-tooltip>
+        <template #title>
+          <PubinfoIcon :name="modelValueRef || ''" size="40px" class="cursor-default" />
+        </template>
+        <PubinfoIcon :name="modelValueRef || ''" size="20px" class="cursor-default" />
+      </a-tooltip>
+    </template>
+  </a-input>
+  <a-form-item-rest>
+    <a-modal
+      v-model:open="visibleRef"
+      title="选择图标"
+      width="1200px"
+      :footer="null"
+      destroy-on-close
+      @cancel="handleClose"
+    >
+      <div class="flex gap-4 min-h-[600px]">
+        <!-- 左侧模块列表 -->
+        <div class="w-58 flex flex-col border-r border-[#e5e7eb] dark:border-[#30363d] pr-3">
+          <div class="mb-3">
+            <a-input
+              v-model:value="keyword"
+              allow-clear
+              :bordered="true"
+              placeholder="搜索图标"
+              class="h-9 text-13px"
+            >
+              <template #prefix>
+                <PubinfoIcon name="i-carbon-search" size="16" class="text-[#7a869a]" />
+              </template>
+            </a-input>
+          </div>
+          <div class="flex-1 overflow-auto space-y-1 pr-1">
+            <div
+              v-for="m in moduleOptions"
+              :key="m.value"
+              class="flex items-center justify-between px-3 py-2 rounded-md cursor-pointer text-13px border border-transparent hover:bg-[#f3f6fa] dark:hover:bg-[#262c33] transition"
+              :class="activeModule === m.value ? 'bg-[#eef5ff] dark:bg-[#1e2a33] border-[#1677ff] text-[#1677ff] font-medium' : 'text-[#4b5563]'"
+              @click="activeModule = m.value"
+            >
+              <span class="truncate max-w-[120px]">{{ m.label }}</span>
+              <span class="ml-2 inline-block min-w-6 text-center text-11px rounded bg-[#eef1f5] dark:bg-[#2d3339] px-1 text-[#5d6671] dark:text-[#9aa3ad]">{{ moduleCount(m.value) }}</span>
+            </div>
+          </div>
+        </div>
+        <!-- 主体 -->
+        <div class="flex-1 flex flex-col min-w-0">
+          <template v-if="filtered.length">
+            <div class="grid grid-cols-6 gap-3 auto-rows-[96px] overflow-auto flex-1 p-1">
+              <a-tooltip
+                v-for="icon in pageIcons"
+                :key="`${icon.module || ''}:${icon.name}`"
+                :mouse-enter-delay="0.35"
+              >
+                <template #title>
+                  <div class="text-12px leading-tight space-y-1">
+                    <div class="font-medium">
+                      {{ icon.name }}
+                    </div>
+                    <div v-if="icon.module" class="opacity-70">
+                      模块: {{ icon.module }}
+                    </div>
+                  </div>
+                </template>
+                <div
+                  class="group relative flex flex-col items-center justify-center cursor-pointer rounded-md"
+                  :class="modelValueRef === icon.name ? 'border-[#1677ff] ring-2 ring-[#1677ff80]' : ''"
+                  @click="handleSelect(icon)"
+                >
+                  <PubinfoIcon :name="icon.name" size="30px" />
+                </div>
+              </a-tooltip>
+            </div>
+            <!-- 分页 -->
+            <div class="mt-4 flex justify-center select-none">
+              <a-pagination
+                :current="currentPage"
+                :page-size="pageSize"
+                :total="filtered.length"
+                :show-size-changer="false"
+                show-quick-jumper
+                @change="onPageChange"
+              />
+            </div>
+          </template>
+          <div v-else class="flex-1 flex items-center justify-center">
+            <a-empty :image="simpleImage" description="没有匹配的图标" />
+          </div>
+        </div>
+      </div>
+    </a-modal>
+  </a-form-item-rest>
+</template>

package/src/components/ResourceSelector/index.vue

@@ -349,83 +349,66 @@ defineExpose({
   </a-modal>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .border_color {
-  border-color: #e5e6eb;
+  --at-apply: border-[#e5e6eb];
 }
 
-[data-theme="dark"] {
-  .border_color {
-    border-color: rgb(253 253 253 / 12%);
-  }
+[data-theme="dark"] .border_color {
+  --at-apply: border-[#fdfdfd1f];
 }
 
 .border_c {
-  border: 1px dashed #ccc;
-  border-radius: 10px;
+  --at-apply: border rounded-[10px] border-dashed border-[#ccc];
 }
 
 :deep(.ant-dropdown-link) {
-  padding: 4px 6px;
-  font-size: 12px;
-  border-radius: 2px;
-  transform: scale(0.7);
+  --at-apply: text-xs px-1.5 py-1 rounded-sm scale-[0.7];
 }
 </style>
 
-<style lang='scss' scoped>
-.custom_modal {
-  :deep(.ant-modal-content) {
-    padding: 0;
-    border-radius: 0;
-  }
+<style lang='css' scoped>
+.custom_modal :deep(.ant-modal-content) {
+  --at-apply: p-0 rounded-none;
+}
 
-  :deep(.ant-modal-header) {
-    padding: 12px 16px;
-    margin-bottom: 0;
-    border-bottom: 1px solid #e5e6eb;
-  }
+.custom_modal :deep(.ant-modal-header) {
+  --at-apply: mb-0 px-4 py-3 border-b-[#e5e6eb] border-b border-solid;
+}
 
-  :deep(.ant-modal-title) {
-    font-size: 16px;
-    font-weight: 500;
-    color: #1d2129;
-  }
+.custom_modal :deep(.ant-modal-title) {
+  --at-apply: text-base font-medium text-[#1d2129];
+}
 
-  :deep(.ant-modal-body) {
-    padding: 16px;
-  }
+.custom_modal :deep(.ant-modal-body) {
+  --at-apply: p-4;
+}
 
-  :deep(.ant-modal-footer) {
-    padding: 16px;
-    border-top: 1px solid #e5e6eb;
+.custom_modal :deep(.ant-modal-footer) {
+  --at-apply: p-4 border-t-[#e5e6eb] border-t border-solid;
+}
 
-    .ant-btn {
-      border-radius: 2px;
-    }
-  }
+.custom_modal :deep(.ant-modal-footer) .ant-btn {
+  --at-apply: rounded-sm;
 }
 
 :deep(.ant-tree-checkbox) {
-  margin-block-start: 0;
-  margin-inline-end: 2px;
+  --at-apply: mt-0 mr-2px;
 }
 
 :deep(.ant-tree-checkbox + span .ant-tree-iconEle) {
-  margin-right: 4px;
+  --at-apply: mr-1;
 }
 
 .custom_tag {
-  padding: 3px 8px;
-  border-width: 0;
-  border-radius: 2px;
+  --at-apply: px-2 py-[3px] rounded-sm border-0;
+}
 
-  :deep(.ant-tag-close-icon) {
-    color: rgb(22 93 255 / 60%);
+.custom_tag :deep(.ant-tag-close-icon) {
+  --at-apply: text-[#165dff] text-op-60;
+}
 
-    &:hover {
-      color: #165dff;
-    }
-  }
+.custom_tag :deep(.ant-tag-close-icon):hover {
+  --at-apply: text-[#165dff] text-op-100;
 }
 </style>

package/src/components/RoleSelector/RoleSearch.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { SelectValue } from 'ant-design-vue/es/select';
+import { SearchOutlined } from '@ant-design/icons-vue';
+import { getRbacPubRoleGroupGetAll } from '@/api/modules/rbac';
+
+defineOptions({
+  name: 'RoleSearch',
+});
+
+const props = withDefaults(defineProps<{
+  group?: boolean
+}>(), {
+  group: false,
+});
+
+const emit = defineEmits(['select']);
+
+const searchContent = defineModel<string>();
+const groupId = defineModel<string>('groupId');
+
+const groups = ref<API.PubRoleGroup[]>([]);
+
+async function getRoleGroup() {
+  const res = await getRbacPubRoleGroupGetAll({ name: '' });
+  if (res.success) {
+    groups.value = res.data ?? [];
+  }
+}
+
+onMounted(() => {
+  if (props.group) {
+    getRoleGroup();
+  }
+});
+</script>
+
+<template>
+  <a-input v-model:value="searchContent" placeholder="请输入" allow-clear>
+    <template #addonBefore>
+      <a-select v-if="group" v-model:value="groupId" style="width: 90px;" @change="($event: SelectValue) => emit('select', $event)">
+        <a-select-option value="">
+          全部
+        </a-select-option>
+        <a-select-option v-for="item in groups" :key="item.id" :value="item.id">
+          <a-tooltip :title="item.name">
+            {{ item.name }}
+          </a-tooltip>
+        </a-select-option>
+      </a-select>
+
+      <div v-else>
+        全部
+      </div>
+    </template>
+
+    <template #suffix>
+      <SearchOutlined />
+    </template>
+  </a-input>
+</template>

package/src/components/RoleSelector/RoleSelector.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
+import type { SelectValue } from './interface';
+import type { Role } from './useRole';
+import { CloseOutlined } from '@ant-design/icons-vue';
+import { useToggle } from '@vueuse/core';
+import { Card, Checkbox, CheckboxGroup, Modal, Spin, theme } from 'ant-design-vue';
+import RoleSearch from './RoleSearch.vue';
+import TooltipLabel from './TooltipLabel.vue';
+import { useRole, useRoleGroup } from './useRole';
+
+defineOptions({
+  name: 'RoleSelector',
+});
+
+withDefaults(defineProps<{
+  group?: boolean
+}>(), {
+  group: false,
+});
+
+const emit = defineEmits(['select']);
+
+const { token } = theme.useToken();
+
+const open = defineModel<boolean>('open');
+const setOpen = useToggle(open);
+
+const selectValue = ref<SelectValue[]>([]);
+
+const role = reactive(useRole());
+const roleGroup = reactive(useRoleGroup());
+
+const search = ref('');
+const groupId = ref('');
+async function onSearchSelect(id: string) {
+  await roleGroup.getData(id);
+}
+
+async function onOpen(value: SelectValue[] = []) {
+  selectValue.value = value;
+  search.value = '';
+  groupId.value = '';
+  await role.getData();
+  setOpen(true);
+}
+
+const roleData = computed(() => {
+  return groupId.value === '' ? role.roles : roleGroup.roles;
+});
+
+function filterName(v: Role) {
+  return roleData.value.findIndex(item => item.id === v.id) > -1 && v.name?.includes(search.value);
+}
+
+function onCheck(e: CheckboxChangeEvent, item: Role) {
+  if (e.target.checked) {
+    selectValue.value.push({ value: item.id, label: item.name } as SelectValue);
+  }
+  else {
+    selectValue.value = selectValue.value.filter(e => e.value !== item.id);
+  }
+}
+
+function onClose(value: SelectValue['value']) {
+  selectValue.value = selectValue.value.filter(e => e.value !== value);
+}
+
+function onSubmit() {
+  emit('select', selectValue.value);
+  setOpen(false);
+}
+
+function onClear() {
+  const disabledData = selectValue.value.filter(e => !role.roles.some(role => role.id === e.value));
+  selectValue.value = disabledData;
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    title="角色选择"
+    :mask-closable="false"
+    :width="750"
+    :z-index="1001"
+    ok-text="确认"
+    cancel-text="取消"
+    destroy-on-close
+    @ok="onSubmit()"
+  >
+    <div class="border border-solid h-[400px]" :style="{ borderColor: token.colorBorder }">
+      <div class="h-full flex">
+        <Card
+          :bordered="false"
+          size="small"
+          :head-style="{ backgroundColor: token.colorBgLayout, borderRadius: 0, borderWidth: 0, borderBottomWidth: '1px', padding: 0 }"
+          :body-style="{ flex: 1, padding: 0, height: 'calc(100% - 38px)' }"
+          :style="{ boxShadow: 'none', borderRadius: 0, borderColor: token.colorBorder }"
+          class="flex h-full flex-col w-1/2"
+        >
+          <div class="p-2 flex flex-col h-full gap-2">
+            <RoleSearch v-model="search" v-model:group-id="groupId" :group="group" @select="onSearchSelect" />
+
+            <div class="flex-1 overflow-y-auto overflow-x-hidden">
+              <div v-if="role.loading || roleGroup.loading" class="flex items-center justify-center size-full">
+                <Spin />
+              </div>
+              <CheckboxGroup v-else :value="selectValue.map(e => e.value)" class="w-full overflow-x-hidden">
+                <div
+                  v-for="item in roleData"
+                  v-show="filterName(item)"
+                  :key="item.id"
+                  class="w-full py-2 border-0 border-b border-solid truncate"
+                  :style="{ borderColor: token.colorBorder }"
+                >
+                  <Checkbox :value="item.id" @change="($event) => onCheck($event, item)">
+                    <TooltipLabel :name="item.name" />
+                  </Checkbox>
+                </div>
+              </CheckboxGroup>
+            </div>
+          </div>
+        </Card>
+
+        <div
+          :style="{ borderColor: token.colorBorder }"
+          class="h-full border-0 border-r border-solid"
+        />
+
+        <Card
+          :bordered="false"
+          size="small"
+          :head-style="{ backgroundColor: token.colorBgLayout, borderRadius: 0, borderWidth: 0, borderBottomWidth: '1px' }"
+          :body-style="{ flex: 1, padding: 0, overflow: 'hidden' }"
+          :style="{ boxShadow: 'none', borderRadius: 0 }"
+          class="flex h-full flex-col flex-1"
+        >
+          <template #title>
+            <span class="font-normal">
+              已选角色
+            </span>
+          </template>
+          <template #extra>
+            <a :style="{ color: token.colorPrimary }" @click="onClear()">
+              清空
+            </a>
+          </template>
+
+          <div class="gap-1 p-2 h-full overflow-y-auto">
+            <div
+              v-for="item in selectValue"
+              :key="item.value"
+              class="inline-block mb-1 py-1 px-2 mx-0.5 max-w-full rounded"
+              :style="{ backgroundColor: token.colorPrimaryBg }"
+            >
+              <TooltipLabel :name="item.label" :size="20" />
+              <CloseOutlined
+                v-if="role.roles.some(role => role.id === item.value)"
+                class="ml-1 cursor-pointer text-xs"
+                :style="{ color: token.colorPrimary }"
+                @click="onClose(item.value)"
+              />
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  </Modal>
+</template>

package/src/components/RoleSelector/TooltipLabel.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Tooltip } from 'ant-design-vue';
+
+defineOptions({
+  name: 'TooltipLabel',
+  inheritAttrs: false,
+});
+
+withDefaults(defineProps<{
+  name?: string
+  size?: number
+}>(), {
+  size: 21,
+});
+</script>
+
+<template>
+  <Tooltip v-if="(name || '').length > size" :title="name">
+    <span v-bind="$attrs">{{ `${name?.slice(0, size)}...` }}</span>
+  </Tooltip>
+  <span v-else v-bind="$attrs">
+    {{ name }}
+  </span>
+</template>

package/src/components/RoleSelector/index.ts

@@ -0,0 +1,2 @@
+export * from './interface';
+export { default as RoleSelector } from './RoleSelector.vue';

package/src/components/RoleSelector/interface.ts

@@ -0,0 +1,4 @@
+export interface SelectValue {
+  value: string | number
+  label: string
+}

package/src/components/RoleSelector/useRole.ts

@@ -0,0 +1,56 @@
+import { useToggle } from '@vueuse/core';
+import { getRbacPubRoleGroupGetById, getRbacRoleRoleList } from '@/api/modules/rbac';
+
+export type Role = API.PubRole;
+
+export function useRole() {
+  const [loading, setLoading] = useToggle(false);
+
+  const roles = ref<Role[]>([]);
+
+  async function getData() {
+    try {
+      setLoading(true);
+      const res = await getRbacRoleRoleList();
+      if (res.success) {
+        roles.value = res.data ?? [];
+      }
+    }
+    finally {
+      setLoading(false);
+    }
+  }
+
+  return {
+    loading,
+    setLoading,
+    roles,
+    getData,
+  };
+}
+
+export function useRoleGroup() {
+  const [loading, setLoading] = useToggle(false);
+
+  const roles = ref<Role[]>([]);
+
+  async function getData(id: string) {
+    try {
+      setLoading(true);
+      const res = await getRbacPubRoleGroupGetById({ id });
+      if (res.success) {
+        roles.value = res.data?.roles ?? [];
+      }
+    }
+    finally {
+      setLoading(false);
+    }
+  }
+
+  return {
+    loading,
+    setLoading,
+    roles,
+    getData,
+  };
+}