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

package/src/views/layout_setting/index.vue

@@ -1,7 +1,7 @@
 <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';
 
 defineOptions({
   name: 'LayoutSetting',
@@ -102,205 +102,195 @@ function clickHandle(item: Settings.menu['menuMode']) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .item {
-  display: flex;
-  flex-direction: column;
+  --at-apply: flex flex-col cursor-pointer border border-[color:var(--g-tabbar-tab-hover-bg)] pt-[26px] rounded-lg border-solid;
   place-items: center center;
-  padding-top: 26px;
-  cursor: pointer;
   background: linear-gradient(180deg, var(--g-bg) 0%, var(--g-bg) 100%);
-  border: 1px solid var(--g-tabbar-tab-hover-bg);
-  border-radius: 8px;
+}
 
-  .mode {
-    --at-apply: relative w-16 h-12 transition;
+.item .mode {
+  --at-apply: relative w-16 h-12 transition;
+}
 
-    &::before,
-    &::after,
-    .mode-container {
-      --at-apply: absolute pointer-events-none;
+.item .mode::before,
+.item .mode::after,
+.item .mode .mode-container {
+  --at-apply: absolute pointer-events-none border-[0.15rem];
+}
 
-      border-width: 0.15rem;
-    }
+.item .mode::before {
+  --at-apply: content-empty bg-ui-primary;
+}
 
-    &::before {
-      --at-apply: content-empty bg-ui-primary;
-    }
+.item .mode::after {
+  --at-apply: content-empty bg-ui-primary/60;
+}
 
-    &::after {
-      --at-apply: content-empty bg-ui-primary/60;
-    }
+.item .mode .mode-container {
+  --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
+}
 
-    .mode-container {
-      --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
+.item .mode .mode-container::before {
+  --at-apply: content-empty absolute w-full h-full;
+}
 
-      &::before {
-        --at-apply: content-empty absolute w-full h-full;
-      }
-    }
+.item .mode-side::before {
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+}
 
-    &-side {
-      &::before {
-        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
-      }
+.item .mode-side::after {
+  --at-apply: top-2 bottom-2 left-4.5 w-3;
+}
 
-      &::after {
-        --at-apply: top-2 bottom-2 left-4.5 w-3;
-      }
+.item .mode-side .mode-container {
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
+}
 
-      .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
-      }
-    }
+.item .mode-head::before {
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+}
 
-    &-head {
-      &::before {
-        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
-      }
+.item .mode-head::after {
+  --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
+}
 
-      &::after {
-        --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
-      }
+.item .mode-head .mode-container {
+  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
+}
 
-      .mode-container {
-        --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
-      }
-    }
+.item .mode-single::after {
+  --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
+}
 
-    &-single {
-      &::after {
-        --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
-      }
+.item .mode-single .mode-container {
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
+}
 
-      .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
-      }
-    }
+.item .mode-only-side::before {
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+}
 
-    &-only-side {
-      &::before {
-        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
-      }
+.item .mode-only-side .mode-container {
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-4.5 rounded-tr-1 rounded-br-1;
+}
 
-      .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-4.5 rounded-tr-1 rounded-br-1;
-      }
-    }
+.item .mode-only-head::before {
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+}
 
-    &-only-head {
-      &::before {
-        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
-      }
+.item .mode-only-head .mode-container {
+  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-2 rounded-bl-1 rounded-br-1;
+}
 
-      .mode-container {
-        --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-2 rounded-bl-1 rounded-br-1;
-      }
-    }
-  }
+.item .jb {
+  background: linear-gradient(180deg, var(--g-container-bg) 0%, rgba(255, 255, 255, 0) 100%);
+}
 
-  .jb {
-    background: linear-gradient(180deg, var(--g-container-bg) 0%, #fff0 100%);
+.item .jb .layout-demo {
+  --at-apply: w-70%;
+}
 
-    .layout-demo {
-      width: 70%;
-    }
-  }
+.item-side .layout-demo {
+  background: url("@/assets/images/layout/item2.webp") no-repeat;
+  background-size: 100%;
+}
 
-  &-side {
-    .layout-demo {
-      background: url("@/assets/images/layout/item2.webp") no-repeat;
-      background-size: 100%;
-    }
-  }
+.item-head .layout-demo {
+  background: url("@/assets/images/layout/item1.webp") no-repeat;
+  background-size: 100%;
+}
 
-  &-head {
-    .layout-demo {
-      background: url("@/assets/images/layout/item1.webp") no-repeat;
-      background-size: 100%;
-    }
-  }
+.item-single .layout-demo {
+  background: url("@/assets/images/layout/item3.webp") no-repeat;
+  background-size: 100%;
+}
 
-  &-single {
-    .layout-demo {
-      background: url("@/assets/images/layout/item3.webp") no-repeat;
-      background-size: 100%;
-    }
-  }
+.item-only-side .layout-demo {
+  background: url("@/assets/images/layout/item4.webp") no-repeat;
+  background-size: 100%;
+}
 
-  &-only-side {
-    .layout-demo {
-      background: url("@/assets/images/layout/item4.webp") no-repeat;
-      background-size: 100%;
-    }
-  }
+.item-only-head .layout-demo {
+  background: url("@/assets/images/layout/item5.webp") no-repeat;
+  background-size: 100%;
+}
 
-  &-only-head {
-    .layout-demo {
-      background: url("@/assets/images/layout/item5.webp") no-repeat;
-      background-size: 100%;
-    }
-  }
+.item.active {
+  border: 2.6px solid rgb(var(--ui-primary));
+  border-radius: 8px;
+  box-shadow: 0 2.6px 13px 0 #59626940;
+}
 
-  &.active {
-    border: 2.6px solid rgb(var(--ui-primary));
-    border-radius: 8px;
-    box-shadow: 0 2.6px 13px 0 #59626940;
-  }
+/* 深色主题样式 */
+:deep([data-theme="dark"]) .item,
+:deep([data-theme="dracula"]) .item,
+:deep([data-theme="luxury"]) .item,
+:deep([data-theme="stone"]) .item,
+:deep([data-theme="night"]) .item,
+:deep([data-theme="synthwave"]) .item {
+  background: #3a3e43;
+  border: 1px solid transparent;
 }
 
-[data-theme="dark"],
-[data-theme="dracula"],
-[data-theme="luxury"],
-[data-theme="stone"],
-[data-theme="night"],
-[data-theme="synthwave"] {
-  .item {
-    background: #3a3e43;
-    border: 1px solid transparent;
-    // .jb {
-    //   background: linear-gradient(180deg, #ffffff1a 0%, #ffffff00 100%);
-    // }
-    &-side {
-      .layout-demo {
-        background: url("@/assets/images/layout/item2_dark.webp") no-repeat;
-        background-size: 100%;
-      }
-    }
+:deep([data-theme="dark"]) .item-side .layout-demo,
+:deep([data-theme="dracula"]) .item-side .layout-demo,
+:deep([data-theme="luxury"]) .item-side .layout-demo,
+:deep([data-theme="stone"]) .item-side .layout-demo,
+:deep([data-theme="night"]) .item-side .layout-demo,
+:deep([data-theme="synthwave"]) .item-side .layout-demo {
+  background: url("@/assets/images/layout/item2_dark.webp") no-repeat;
+  background-size: 100%;
+}
 
-    &-head {
-      .layout-demo {
-        background: url("@/assets/images/layout/item1_dark.webp") no-repeat;
-        background-size: 100%;
-      }
-    }
+:deep([data-theme="dark"]) .item-head .layout-demo,
+:deep([data-theme="dracula"]) .item-head .layout-demo,
+:deep([data-theme="luxury"]) .item-head .layout-demo,
+:deep([data-theme="stone"]) .item-head .layout-demo,
+:deep([data-theme="night"]) .item-head .layout-demo,
+:deep([data-theme="synthwave"]) .item-head .layout-demo {
+  background: url("@/assets/images/layout/item1_dark.webp") no-repeat;
+  background-size: 100%;
+}
 
-    &-single {
-      .layout-demo {
-        background: url("@/assets/images/layout/item3_dark.webp") no-repeat;
-        background-size: 100%;
-      }
-    }
+:deep([data-theme="dark"]) .item-single .layout-demo,
+:deep([data-theme="dracula"]) .item-single .layout-demo,
+:deep([data-theme="luxury"]) .item-single .layout_demo,
+:deep([data-theme="stone"]) .item-single .layout-demo,
+:deep([data-theme="night"]) .item-single .layout-demo,
+:deep([data-theme="synthwave"]) .item-single .layout-demo {
+  background: url("@/assets/images/layout/item3_dark.webp") no-repeat;
+  background-size: 100%;
+}
 
-    &-only-side {
-      .layout-demo {
-        background: url("@/assets/images/layout/item4_dark.webp") no-repeat;
-        background-size: 100%;
-      }
-    }
+:deep([data-theme="dark"]) .item-only-side .layout-demo,
+:deep([data-theme="dracula"]) .item-only-side .layout-demo,
+:deep([data-theme="luxury"]) .item-only-side .layout-demo,
+:deep([data-theme="stone"]) .item-only-side .layout-demo,
+:deep([data-theme="night"]) .item-only-side .layout-demo,
+:deep([data-theme="synthwave"]) .item-only-side .layout-demo {
+  background: url("@/assets/images/layout/item4_dark.webp") no-repeat;
+  background-size: 100%;
+}
 
-    &-only-head {
-      .layout-demo {
-        background: url("@/assets/images/layout/item5_dark.webp") no-repeat;
-        background-size: 100%;
-      }
-    }
+:deep([data-theme="dark"]) .item-only-head .layout-demo,
+:deep([data-theme="dracula"]) .item-only-head .layout-demo,
+:deep([data-theme="luxury"]) .item-only-head .layout-demo,
+:deep([data-theme="stone"]) .item-only-head .layout-demo,
+:deep([data-theme="night"]) .item-only-head .layout-demo,
+:deep([data-theme="synthwave"]) .item-only-head .layout-demo {
+  background: url("@/assets/images/layout/item5_dark.webp") no-repeat;
+  background-size: 100%;
+}
 
-    &.active {
-      border: 2.6px solid rgb(var(--ui-primary));
-      border-radius: 8px;
-      box-shadow: 0 2.6px 13px 0 #59626940;
-    }
-  }
+:deep([data-theme="dark"]) .item.active,
+:deep([data-theme="dracula"]) .item.active,
+:deep([data-theme="luxury"]) .item.active,
+:deep([data-theme="stone"]) .item.active,
+:deep([data-theme="night"]) .item.active,
+:deep([data-theme="synthwave"]) .item.active {
+  border: 2.6px solid rgb(var(--ui-primary));
+  border-radius: 8px;
+  box-shadow: 0 2.6px 13px 0 rgba(89, 98, 105, 0.25);
 }
 </style>

package/src/views/log_center/components/loginHistoryDetail.vue

@@ -58,14 +58,12 @@ function notifyClose() {
   </a-drawer>
 </template>
 
-<style lang="scss" scoped>
-.detail-info {
-  :deep(.ant-descriptions-item-label) {
-    color: rgba($color: #000, $alpha: 60%);
-  }
+<style scoped>
+.detail-info :deep(.ant-descriptions-item-label) {
+  color: rgba(0, 0, 0, 0.6);
+}
 
-  :deep(.ant-descriptions-item-content) {
-    color: rgba($color: #000, $alpha: 100%);
-  }
+.detail-info :deep(.ant-descriptions-item-content) {
+  color: rgba(0, 0, 0, 1);
 }
 </style>

package/src/views/log_center/components/operateHistoryDetail.vue

@@ -67,14 +67,12 @@ function notifyClose() {
   </a-drawer>
 </template>
 
-<style lang="scss" scoped>
-.detail-info {
-  :deep(.ant-descriptions-item-label) {
-    color: rgba($color: #000, $alpha: 60%);
-  }
+<style scoped>
+.detail-info ::v-deep(.ant-descriptions-item-label) {
+  color: rgba(0, 0, 0, 0.6);
+}
 
-  :deep(.ant-descriptions-item-content) {
-    color: rgba($color: #000, $alpha: 100%);
-  }
+.detail-info ::v-deep(.ant-descriptions-item-content) {
+  color: rgba(0, 0, 0, 1);
 }
 </style>

package/src/views/log_center/login_history.vue

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import type { ProColumns } from '@pubinfo/pro-components';
-import { postLogLoginPage } from '@/api/modules/log';
 import { ProTable } from '@pubinfo/pro-components';
+import { postLogLoginPage } from '@/api/modules/log';
 import LoginHistoryDetail from './components/loginHistoryDetail.vue';
 
 defineOptions({
@@ -223,17 +223,12 @@ function showDetailDrawer(record: API.PubLoginLogDto) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .status-mark {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  margin-right: 4px;
-  background-color: #aeaeae;
-  border-radius: 50%;
+  --at-apply: inline-block w-2 h-2 bg-[#aeaeae] mr-1 rounded-[50%];
+}
 
-  &.active {
-    background: #01d689;
-  }
+.status-mark.active {
+  --at-apply: [background:#01d689];
 }
 </style>

package/src/views/log_center/operate_history.vue

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import type { ProColumns } from '@pubinfo/pro-components';
-import { postLogOperatePage } from '@/api/modules/log';
 import { ProTable } from '@pubinfo/pro-components';
+import { postLogOperatePage } from '@/api/modules/log';
 import OperateHistoryDetail from './components/operateHistoryDetail.vue';
 
 defineOptions({
@@ -217,17 +217,12 @@ function showDetailDrawer(record: API.PubOperateLogDto) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .status-mark {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  margin-right: 4px;
-  background-color: #aeaeae;
-  border-radius: 50%;
+  --at-apply: inline-block w-2 h-2 bg-[#aeaeae] mr-1 rounded-[50%];
+}
 
-  &.active {
-    background: #01d689;
-  }
+.status-mark.active {
+  background: #01d689;
 }
 </style>

package/src/views/menu_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 {
   darkEnableHotkeysData,
@@ -200,7 +200,7 @@ function setStyle(jsonStr: string) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .bar-header {
   background: var(--g-bg);
 }

package/src/views/organization/components/drawerOrganization.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { Rule } from 'ant-design-vue/es/form';
 import type { FormExpose } from 'ant-design-vue/es/form/Form';
-import { getDictItemList } from '@/api/modules/configData';
-import { getRbacOrgInfo, postRbacOrgAddOrg, postRbacOrgUpdateOrg } from '@/api/modules/rbac';
 import { useToggle } from '@vueuse/core';
 import { message } from 'ant-design-vue';
+import { getDictItemList } from '@/api/modules/configData';
+import { getRbacOrgInfo, postRbacOrgAddOrg, postRbacOrgUpdateOrg } from '@/api/modules/rbac';
 import { ACTION } from '../enum';
 
 defineOptions({
@@ -40,7 +40,7 @@ getDictItemList({ dictCode: 'orgType' }).then((res: API.ResponseDataListDictItem
     };
   });
 });
-const form = ref<Partial<API.PubOrg & { parentName: string } >>({ parentId: '', enable: true });
+const form = ref<Partial<API.PubOrg & { parentName: string }>>({ parentId: '', enable: true });
 async function onOpen(key: ACTION, record?: API.PubOrg) {
   setOpen(true);
   state.title = key;

package/src/views/organization/components/drawerRole.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { Rule } from 'ant-design-vue/es/form';
 import type { FormExpose } from 'ant-design-vue/es/form/Form';
-import { getRbacOrgRoleGetByOrgId, postRbacOrgRoleSaveOrgRole } from '@/api/modules/rbac';
-import useAppAndResource from '@/components/ResourceSelector/hooks/useAppAndResource';
 import { useToggle } from '@vueuse/core';
 import { message } from 'ant-design-vue';
-import RoleSelect from './roleSelect.vue';
+import { getRbacOrgRoleGetByOrgId, postRbacOrgRoleSaveOrgRole } from '@/api/modules/rbac';
+import useAppAndResource from '@/components/ResourceSelector/hooks/useAppAndResource';
+import { RoleSelector } from '@/components/RoleSelector';
 
 defineOptions({
   name: 'DrawerRole',
@@ -43,10 +43,11 @@ const [loading, setLoading] = useToggle(false);
 
 const roleModelRef = ref();
 function chooseRole() {
-  roleModelRef.value.open((form.value.roleList || []).map((item: API.PubRole) => item.id));
+  const selectedValue = (form.value.roleList || []).map((item: API.PubRole) => ({ value: item.id, label: item.name }));
+  roleModelRef.value.open(selectedValue);
 }
-function onRoleSelected(data: API.PubRole[]) {
-  form.value.roleList = data;
+function onRoleSelected(data: any[]) {
+  form.value.roleList = data.map(e => ({ id: e.value, name: e.label }));
 }
 function onSubmit() {
   formRef.value?.validate().then(() => {
@@ -154,6 +155,7 @@ defineExpose({
         </a-button>
       </a-space>
     </template>
-    <RoleSelect ref="roleModelRef" @select="onRoleSelected" />
+
+    <RoleSelector ref="roleModelRef" @select="onRoleSelected" />
   </a-drawer>
 </template>