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

package/src/components/GroupSelector/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { IOption } from './interface';
+import { useToggle } from '@vueuse/core';
 import { postGroupList } from '@/api/modules/assist';
 import { GROUP_TYPE } from '@/views/group/enum';
-import { useToggle } from '@vueuse/core';
 
 defineOptions({
   name: 'GroupSelector',
@@ -170,92 +170,75 @@ defineExpose({
   </a-modal>
 </template>
 
-<style lang="scss">
-.group-modal {
-  .ant-tabs-content-holder {
-    padding: 0 16px 8px;
-    overflow: auto;
-  }
+<style>
+.group-modal .ant-tabs-content-holder {
+  --at-apply: overflow-auto pt-0 pb-2 px-4;
+}
 
-  .ant-tabs-nav::before {
-    display: none;
-  }
+.group-modal .ant-tabs-nav::before {
+  --at-apply: hidden;
+}
 
-  .ant-tabs-nav-wrap {
-    height: 38px;
-    background: rgb(245 245 245);
-  }
+.group-modal .ant-tabs-nav-wrap {
+  --at-apply: h-38px [background:#f5f5f5];
+}
 
-  .ant-tabs-tab {
-    padding: 0 12px;
-    margin: 0;
+.group-modal .ant-tabs-tab {
+  --at-apply: m-0 px-3 py-0;
+}
 
-    & + .ant-tabs-tab {
-      margin-left: 0 !important;
-    }
-  }
+.group-modal .ant-tabs-tab + .ant-tabs-tab {
+  margin-left: 0 !important;
+}
 
-  .ant-tabs-tab-active {
-    background: white;
-  }
+.group-modal .ant-tabs-tab-active {
+  --at-apply: [background:white];
+}
 
-  .ant-checkbox-group {
-    display: block;
-  }
+.group-modal .ant-checkbox-group {
+  --at-apply: block;
+}
 
-  .ant-checkbox-wrapper {
-    display: flex;
-    margin-bottom: 8px;
-  }
+.group-modal .ant-checkbox-wrapper {
+  --at-apply: flex mb-2;
+}
 
-  .ant-tabs-ink-bar {
-    display: none;
-  }
+.group-modal .ant-tabs-ink-bar {
+  --at-apply: hidden;
 }
 
-.dark .group-modal {
-  .ant-tabs-nav-wrap {
-    color: #f2f3f5;
-    background: #000;
-  }
+.dark .group-modal .ant-tabs-nav-wrap {
+  --at-apply: text-[#f2f3f5] [background:#000];
+}
 
-  .ant-tabs-tab-active {
-    background: rgb(20 20 20);
-  }
+.dark .group-modal .ant-tabs-tab-active {
+  --at-apply: [background:#141414];
 }
 </style>
 
-<style lang='scss' scoped>
-.group-modal {
-  :deep(.ant-modal-content) {
-    padding: 0;
-    border-radius: 0;
-  }
+<style scoped>
+.group-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;
-  }
+.group-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;
-  }
+.group-modal :deep(.ant-modal-title) {
+  --at-apply: text-base leading-none font-medium text-[#1d2129];
+}
 
-  :deep(.ant-modal-body) {
-    padding: 16px;
-  }
+.group-modal :deep(.ant-modal-body) {
+  --at-apply: p-4;
+}
 
-  :deep(.ant-modal-footer) {
-    padding: 16px;
-    border-top: 1px solid #e5e6eb;
+.group-modal :deep(.ant-modal-footer) {
+  --at-apply: p-4 border-t-[#e5e6eb] border-t border-solid;
+}
 
-    .ant-btn {
-      border-radius: 2px;
-    }
-  }
+.group-modal :deep(.ant-modal-footer) .ant-btn {
+  --at-apply: rounded-sm;
 }
 
 :deep(.ant-tree-checkbox) {
@@ -264,42 +247,34 @@ defineExpose({
 }
 
 :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];
 }
 
 .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-[#FDFDFD] border-op-12;
 }
 
 .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>

package/src/components/OrgTree/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { EventDataNode, TreeProps } from 'ant-design-vue/es/tree';
-import { getRbacOrgOrgListByParentId } from '@/api/modules/rbac';
 import { useToggle } from '@vueuse/core';
+import { getRbacOrgOrgListByParentId } from '@/api/modules/rbac';
 
 defineOptions({
   name: 'OrgTree',
@@ -86,6 +86,6 @@ onMounted(() => {
 
 <style scoped>
 :deep(.ant-tree .ant-tree-node-content-wrapper) {
-  overflow: hidden;
+  --at-apply: overflow-hidden;
 }
 </style>

package/src/components/OrgUserSelector/index.ts

@@ -14,6 +14,11 @@ export function selectUser(props: UserSelectorProps & { modelValue?: UserModelVa
   createAppElement(UserSelector, props);
 }
 
+export {
+  OrgSelector,
+  UserSelector,
+};
+
 function createAppElement(
   component: typeof OrgSelector | typeof UserSelector,
   props: Parameters<typeof selectUser | typeof selectOrg>[0],

package/src/components/OrgUserSelector/provider.ts

@@ -1,7 +1,7 @@
 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';
-import { message } from 'ant-design-vue';
 
 interface ExtraApis {
   /** 回显选中项 */

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>