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

package/src/views/theme_setting/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { colorScheme, cssVarKey } from 'pubinfo/client';
-import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
-import { useSettingsStore } from '@/stores';
 import { message } from 'ant-design-vue';
 import { useTheme } from 'pubinfo';
-import { themes } from 'pubinfo/client';
+import { getThemes } from 'pubinfo/client';
+import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
+import { useSettingsStore } from '@/stores';
 
 interface ThemeListCard {
   label: string
@@ -38,6 +38,7 @@ const benchmark: cssVarKey[] = [
 ];
 
 const themeList = computed<ThemeListCard[]>(() => {
+  const themes = getThemes();
   const list = Object.keys(themes)
     .map((key) => {
       const value = themes[key];
@@ -220,246 +221,216 @@ async function updateConfig(options: object) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .theme-item {
-  display: flex;
-  flex-direction: column;
-  padding: 12px 24px 0;
-  cursor: pointer;
+  --at-apply: flex flex-col cursor-pointer border border-[color:var(--border-2,#e5e6eb)] pt-3 pb-0 px-6 rounded-lg border-solid;
   background: linear-gradient(180deg, #f4f7ff -22.05%, #fff 85.58%);
-  border: 1px solid var(--border-2, #e5e6eb);
-  border-radius: 8px;
-
-  .item-title {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    margin: 0;
-    font-size: 14px;
-    line-height: 22px;
-    text-align: center;
-  }
+}
 
-  .item-content {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    padding: calc(12 / 320 * 100%) calc(20 / 320 * 100%);
-    margin-top: calc(12 / 320 * 100%);
-    background: linear-gradient(180deg, #fff 0%, #fff0 100%);
-    border-radius: calc(8 / 320 * 100%);
-
-    .spots-wrap {
-      margin-left: calc(32 / 270 / 2 * 100%);
-    }
-
-    .color-spot {
-      flex-shrink: 0;
-      width: calc(30 / 270 * 100%);
-      max-width: 30px;
-      aspect-ratio: 1;
-      background: #fff;
-      border: 2px solid #fff;
-      border-radius: 30px;
-      box-shadow: 0 0 4px 0 #00000026;
-
-      &:nth-child(1) {
-        transform: translateX(0);
-      }
+.theme-item.active {
+  --at-apply: border-[rgb(var(--ui-primary))] shadow-[0_2.6px_13px_0_#59626940] border-[2.6px] border-solid;
+  background: linear-gradient(180deg, #f4f7ff -22.05%, #fff 85.58%);
+}
 
-      &:nth-child(2) {
-        transform: translateX(calc(-6 / 30 * 100%));
-      }
+.theme-item.dark {
+  --at-apply: border-transparent;
+  background: linear-gradient(0deg, #3a3e43 0%, #3a3e43 100%), linear-gradient(180deg, #f4f7ff -22.05%, #fff 85.58%);
+}
 
-      &:nth-child(3) {
-        transform: translateX(calc(-12 / 30 * 100%));
-      }
+.theme-item.dark.active {
+  border-color: rgb(var(--ui-primary));
+}
 
-      &:nth-child(4) {
-        transform: translateX(calc(-18 / 30 * 100%));
-      }
+.theme-item .item-title {
+  --at-apply: flex items-center justify-center text-sm leading-[22px] text-center m-0 p-0;
+}
 
-      &:nth-child(5) {
-        transform: translateX(calc(-24 / 30 * 100%));
-      }
+.theme-item .item-content {
+  --at-apply: flex flex-1 flex-col;
+  padding: calc(12 / 320 * 100%) calc(20 / 320 * 100%);
+  margin-top: calc(12 / 320 * 100%);
+  background: linear-gradient(180deg, #fff 0%, #fff0 100%);
+  border-radius: calc(8 / 320 * 100%);
+}
 
-      &:nth-child(6) {
-        transform: translateX(calc(-30 / 30 * 100%));
-      }
-    }
-
-    .skeleton {
-      display: flex;
-      flex: auto;
-      flex-direction: column;
-      height: 0;
-      margin-top: 22px;
-      background: #f5f8fe;
-      border-radius: 4px;
-
-      header {
-        display: flex;
-        align-items: center;
-        aspect-ratio: 10.45;
-        padding-left: 10px;
-        border-radius: 4px 4px 0 0;
-
-        .dot {
-          width: calc(8.5 / 230 * 100%);
-          aspect-ratio: 1;
-          margin-right: calc(5 / 230 * 100%);
-          background: rgb(255 255 255 / 50%);
-          border-radius: 50%;
-        }
-
-        .bar {
-          width: calc(68 / 230 * 100%);
-          aspect-ratio: calc(68 / 7);
-          background: rgb(255 255 255 / 50%);
-          border-radius: 2px;
-        }
-      }
+.theme-item.dark .item-content {
+  background: linear-gradient(180deg, #ffffff1a 0%, #fff0 100%);
+}
 
-      .skeleton-body {
-        display: flex;
-        flex: 1;
-        height: 0;
-        padding: calc(7 / 230 * 100%);
-      }
+.theme-item .item-content .spots-wrap {
+  margin-left: calc(32 / 270 / 2 * 100%);
+}
 
-      .aside {
-        width: calc(36 / 230 * 100%);
-        height: 100%;
-        padding-top: calc(12 / 230 * 100%);
-        margin-right: calc(7 / 230 * 100%);
-        background: #fff;
-        border-radius: 4px;
-
-        .side-line {
-          width: calc(24.1 / 36.6 * 100%);
-          aspect-ratio: calc(24.1 / 6.5);
-          margin: 0 auto calc(4 / 36.6 * 100%);
-          background: #eaeff7;
-          border-radius: 2px;
-        }
-      }
+.theme-item .item-content .color-spot {
+  --at-apply: shrink-0 max-w-[30px] aspect-[1] rounded-[30px] border-2 border-solid border-white;
+  background: #fff;
+  width: calc(30 / 270 * 100%);
+  box-shadow: 0 0 4px 0 #00000026;
+}
 
-      .main {
-        display: flex;
-        flex: auto;
-        justify-content: space-between;
-        height: 100%;
-        padding: 5.2% 5.6% 3%;
-        background: #fff;
-        border-radius: 2px;
-
-        .left {
-          flex: 1;
-        }
-
-        .right {
-          width: 30%;
-        }
-
-        .left-item {
-          display: flex;
-          margin-bottom: 6.5;
-
-          .dot {
-            width: calc(15 / 108) * 100%;
-            aspect-ratio: 1;
-            margin-right: calc(7.4 / 108) * 100%;
-            margin-bottom: calc(6.7 / 108) * 100%;
-            background: #eaeff7;
-            border-radius: 50%;
-          }
-
-          .lines-wrap {
-            flex: 1;
-            padding-top: calc(2 / 108) * 100%;
-          }
-
-          .line1 {
-            width: calc(53.4 / 82) * 100%;
-            aspect-ratio: calc(53.4 / 3.4);
-            background: #eaeff7;
-            border-radius: 1px;
-          }
-
-          .line2 {
-            width: calc(25.4 / 82) * 100%;
-            aspect-ratio: calc(25.4 / 3.4);
-            margin-top: 5px;
-            background: #eaeff7;
-            border-radius: 1px;
-          }
-        }
-
-        .right-item {
-          width: 100%;
-          aspect-ratio: calc(44 / 8.8);
-          margin-bottom: calc(10.14 / 44 * 100%);
-          background: #eaeff7;
-          border-radius: calc(1.1 / 44 * 100%);
-        }
-      }
-    }
-  }
+.theme-item .item-content .color-spot:nth-child(1) {
+  transform: translateX(0);
+}
 
-  &.active {
-    background: linear-gradient(180deg, #f4f7ff -22.05%, #fff 85.58%);
-    border: 2.6px solid rgb(var(--ui-primary));
-    box-shadow: 0 2.6px 13px 0 #59626940;
-  }
+.theme-item .item-content .color-spot:nth-child(2) {
+  transform: translateX(calc(-6 / 30 * 100%));
+}
 
-  // 暗色模式
-  &.dark {
-    background: linear-gradient(0deg, #3a3e43 0%, #3a3e43 100%), linear-gradient(180deg, #f4f7ff -22.05%, #fff 85.58%);
-    border-color: transparent;
-
-    &.active {
-      border-color: rgb(var(--ui-primary));
-    }
-
-    .item-content {
-      background: linear-gradient(180deg, #ffffff1a 0%, #fff0 100%);
-
-      .skeleton {
-        background: #111213;
-
-        header {
-          background: #26272a !important;
-
-          .dot,
-          .bar {
-            background: rgb(255 255 255 / 20%);
-          }
-        }
-
-        .skeleton-body {
-          .aside {
-            background: #25282d;
-
-            .side-line {
-              background: #32353b;
-            }
-          }
-
-          .main {
-            background: #25282d;
-
-            .dot,
-            .line1,
-            .line2,
-            .right-item {
-              background: #32353b;
-            }
-          }
-        }
-      }
-    }
-  }
+.theme-item .item-content .color-spot:nth-child(3) {
+  transform: translateX(calc(-12 / 30 * 100%));
+}
+
+.theme-item .item-content .color-spot:nth-child(4) {
+  transform: translateX(calc(-18 / 30 * 100%));
+}
+
+.theme-item .item-content .color-spot:nth-child(5) {
+  transform: translateX(calc(-24 / 30 * 100%));
+}
+
+.theme-item .item-content .color-spot:nth-child(6) {
+  transform: translateX(calc(-30 / 30 * 100%));
+}
+
+.theme-item .item-content .skeleton {
+  --at-apply: flex flex-[auto] flex-col h-0 rounded mt-[22px];
+  background: #f5f8fe;
+}
+
+.theme-item.dark .item-content .skeleton {
+  background: #111213;
+}
+
+.theme-item .item-content .skeleton header {
+  --at-apply: flex items-center aspect-[10.45] pl-2.5 rounded-[4px_4px_0_0];
+}
+
+.theme-item.dark .item-content .skeleton header {
+  background: #26272a !important;
+}
+
+.theme-item .item-content .skeleton header .dot {
+  --at-apply: aspect-1 rounded-1/2;
+  width: calc(8.5 / 230 * 100%);
+  margin-right: calc(5 / 230 * 100%);
+  background: rgb(255 255 255 / 50%);
+}
+
+.theme-item.dark .item-content .skeleton header .dot {
+  background: rgb(255 255 255 / 20%);
+}
+
+.theme-item .item-content .skeleton header .bar {
+  --at-apply: rounded-sm;
+  width: calc(68 / 230 * 100%);
+  aspect-ratio: calc(68 / 7);
+  background: rgb(255 255 255 / 50%);
+}
+
+.theme-item.dark .item-content .skeleton header .bar {
+  background: rgb(255 255 255 / 20%);
+}
+
+.theme-item .item-content .skeleton .skeleton-body {
+  --at-apply: flex flex-1 h-0;
+  padding: calc(7 / 230 * 100%);
+}
+
+.theme-item .item-content .skeleton .skeleton-body .aside {
+  --at-apply: h-full rounded;
+  width: calc(36 / 230 * 100%);
+  padding-top: calc(12 / 230 * 100%);
+  margin-right: calc(7 / 230 * 100%);
+  background: #fff;
+}
+
+.theme-item.dark .item-content .skeleton .skeleton-body .aside {
+  background: #25282d;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .aside .side-line {
+  --at-apply: rounded-sm;
+  width: calc(24.1 / 36.6 * 100%);
+  aspect-ratio: calc(24.1 / 6.5);
+  margin: 0 auto calc(4 / 36.6 * 100%);
+  background: #eaeff7;
+}
+
+.theme-item.dark .item-content .skeleton .skeleton-body .aside .side-line {
+  background: #32353b;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main {
+  --at-apply: flex flex-[auto] justify-between h-full pt-[5.2%] pb-[3%] px-[5.6%] rounded-sm;
+  background: #fff;
+}
+
+.theme-item.dark .item-content .skeleton .skeleton-body .main {
+  background: #25282d;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .left {
+  --at-apply: flex-1;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .right {
+  --at-apply: w-3/10;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .left-item {
+  --at-apply: flex mb-[6.5];
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .left-item .dot {
+  width: calc(calc(15 / 108) * 100%);
+  aspect-ratio: 1;
+  margin-right: calc(calc(7.4 / 108) * 100%);
+  margin-bottom: calc(calc(6.7 / 108) * 100%);
+  background: #eaeff7;
+  border-radius: 50%;
+}
+
+.theme-item.dark .item-content .skeleton .skeleton-body .main .left-item .dot {
+  background: #32353b;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .left-item .lines-wrap {
+  flex: 1;
+  padding-top: calc(calc(2 / 108) * 100%);
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .left-item .line1 {
+  width: calc(calc(53.4 / 82) * 100%);
+  aspect-ratio: calc(53.4 / 3.4);
+  background: #eaeff7;
+  border-radius: 1px;
+}
+
+.theme-item.dark .item-content .skeleton .skeleton-body .main .left-item .line1 {
+  background: #32353b;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .left-item .line2 {
+  width: calc(calc(25.4 / 82) * 100%);
+  aspect-ratio: calc(25.4 / 3.4);
+  margin-top: 5px;
+  background: #eaeff7;
+  border-radius: 1px;
+}
+
+.theme-item.dark .item-content .skeleton .skeleton-body .main .left-item .line2 {
+  background: #32353b;
+}
+
+.theme-item .item-content .skeleton .skeleton-body .main .right-item {
+  width: 100%;
+  aspect-ratio: calc(44 / 8.8);
+  margin-bottom: calc(10.14 / 44 * 100%);
+  background: #eaeff7;
+  border-radius: calc(1.1 / 44 * 100%);
+}
+
+.theme-item.dark .item-content .skeleton .skeleton-body .main .right-item {
+  background: #32353b;
 }
 </style>
-32

package/src/views/toolbar_setting/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { message } from 'ant-design-vue';
 import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
-import { useSettingsStore } from '@/stores';
 
-import { message } from 'ant-design-vue';
+import { useSettingsStore } from '@/stores';
 import SetItem from '../components/setItem.vue';
 import {
   darkEnableColorSchemeData,
@@ -182,7 +182,7 @@ function setStyle(jsonStr: string) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .bar-header {
   background: var(--g-bg);
 }

package/src/views/user/components/OrgAndPosition.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { Form } from '../interface';
-import { getRbacPostList } from '@/api/modules/rbac';
 import { useRequest } from 'alova/client';
 import { Form as AForm, Modal, theme } from 'ant-design-vue';
+import { getRbacPostList } from '@/api/modules/rbac';
 
 defineOptions({
   name: 'OrgAndPosition',
@@ -101,7 +101,7 @@ function onRemove(index: number) {
       >
         <OrgSelector
           :model-value="item.orgId ? [{ orgId: item.orgId, orgName: item.orgName }] : []"
-          @submit="(orgs) => {
+          @submit="(orgs: any[]) => {
             const org = orgs?.[0];
             item.orgId = org?.orgId;
             item.orgName = org?.orgName;

package/src/views/user/components/UserAuthorization.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { FormExpose } from 'ant-design-vue/es/form/Form';
 import type { AuthItem } from '../interface';
-import { getRbacPubDataPermissionsDataPermissionList, getRbacPubRoleGroupGetAll, postRbacPubDataPermissionsGetUserOrgDataPermissionList, postRbacUserGrantUserRoleAndDatPermission } from '@/api/modules/rbac';
 import { useToggle } from '@vueuse/core';
 import { message, theme } from 'ant-design-vue';
-import RoleSelect from './roleSelect.vue';
+import { getRbacPubDataPermissionsDataPermissionList, getRbacPubRoleGroupGetAll, postRbacPubDataPermissionsGetUserOrgDataPermissionList, postRbacUserGrantUserRoleAndDatPermission } from '@/api/modules/rbac';
+import { RoleSelector } from '@/components/RoleSelector';
 
 defineOptions({
   name: 'UserAuthorization',
@@ -137,10 +137,11 @@ const roleModelRef = ref();
 const selectindex = ref<number>(0);
 function chooseRole(index: number) {
   selectindex.value = index;
-  roleModelRef.value.open((form.value.authList[selectindex.value].roleList || []).map((item: API.PubRole) => item.id));
+  const selectedValue = (form.value.authList[selectindex.value].roleList || []).map((item: API.PubRole) => ({ value: item.id, label: item.name }));
+  roleModelRef.value.open(selectedValue);
 }
-function onRoleSelected(data: API.PubRole[]) {
-  form.value.authList[selectindex.value].roleList = data;
+function onRoleSelected(data: any[]) {
+  form.value.authList[selectindex.value].roleList = data.map(e => ({ id: e.value, name: e.label }));
 }
 defineExpose({
   open: onOpen,
@@ -159,7 +160,7 @@ defineExpose({
     <a-form
       ref="formRef"
       :model="form"
-      :label-col="{ span: 4 }"
+      :label-col="{ span: 5 }"
     >
       <a-card
         v-for="(item, index) in form.authList"
@@ -245,16 +246,16 @@ defineExpose({
         </a-button>
       </a-space>
     </template>
-    <RoleSelect ref="roleModelRef" @select="onRoleSelected" />
+    <RoleSelector ref="roleModelRef" group @select="onRoleSelected" />
   </a-drawer>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 .auth-card {
-  margin-top: 12px;
+  --at-apply: mt-3;
+}
 
-  &:first-of-type {
-    margin-top: 3px;
-  }
+.auth-card:first-of-type {
+  --at-apply: mt-3px;
 }
 </style>

package/src/views/user/components/UserEdit.vue

@@ -2,10 +2,10 @@
 import type { Rule } from 'ant-design-vue/es/form';
 import type { FormExpose } from 'ant-design-vue/es/form/Form';
 import type { AddForm, CurrentOrg, Data, EditForm, Form } from '../interface';
-import { getRbacUserInfo, postRbacUserPubUserAdd, postRbacUserUserUpdateV2 } from '@/api/modules/rbac';
 import { useToggle } from '@vueuse/core';
 import { message } from 'ant-design-vue';
 import { cloneDeep, isEmpty } from 'lodash-es';
+import { getRbacUserInfo, postRbacUserPubUserAdd, postRbacUserUserUpdateV2 } from '@/api/modules/rbac';
 import { ACTION } from '../enum';
 import OrgAndPosition from './OrgAndPosition.vue';
 

package/src/views/user/index.vue

@@ -2,9 +2,9 @@
 import type { ProColumns } from '@pubinfo/pro-components';
 import type { EventDataNode } from 'ant-design-vue/es/tree';
 import type { CurrentOrg, Data, Query } from './interface';
-import { getRbacUserUserDelete, postRbacUserUserPage, putRbacUserResetPassword } from '@/api/modules/rbac';
 import { ProTable } from '@pubinfo/pro-components';
 import { Badge, message, Modal, Popover, Space } from 'ant-design-vue';
+import { getRbacUserUserDelete, postRbacUserUserPage, putRbacUserResetPassword } from '@/api/modules/rbac';
 import UserAuthorization from './components/UserAuthorization.vue';
 import UserEdit from './components/UserEdit.vue';
 import { ACTION } from './enum';

package/src/views/watermark_setting/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
-import { useSettingsStore } from '@/stores';
 import { message } from 'ant-design-vue';
 import { eventBus } from 'pubinfo';
+import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
+import { useSettingsStore } from '@/stores';
 import AnimationItem from '../components/animation_item.vue';
 import {
   darkEnableData,
@@ -125,11 +125,7 @@ function onSubmit() {
 </script>
 
 <template>
-  <div
-    w-full
-    h-full
-    p-10px
-  >
+  <div class="w-full h-full p-10px">
     <div class="w-full h-full bg-white overflow-y-auto p-10px box-border dark:bg-[#141414]">
       <div class="h-[38px] pl-[16px] flex flex-row items-center bar-header">
         <PubinfoIcon name="icon_watermark" class="text-base mr-[6px]" :size="22" />
@@ -215,19 +211,16 @@ function onSubmit() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .item_ani {
-  display: flex;
-  flex-direction: column;
+  --at-apply: flex flex-col pt-[26px] rounded-lg;
   place-items: center center;
-  padding-top: 26px;
   background-color: var(--g-bg);
   border: 1px solid var(--g-tabbar-tab-hover-bg);
-  border-radius: 8px;
+}
 
-  .jb {
-    background: linear-gradient(180deg, var(--g-container-bg) 0%, #fff0 100%);
-  }
+.item_ani .jb {
+  background: linear-gradient(180deg, var(--g-container-bg) 0%, #fff0 100%);
 }
 
 .bar-header {