@pubinfo/module-rbac 2.0.0-beta.31 → 2.0.0-beta.32

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 { getThemes } from 'pubinfo/client';
+import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
+import { useSettingsStore } from '@/stores';
 
 interface ThemeListCard {
   label: string
@@ -221,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',

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

@@ -1,9 +1,9 @@
 <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 { getRbacPubDataPermissionsDataPermissionList, getRbacPubRoleGroupGetAll, postRbacPubDataPermissionsGetUserOrgDataPermissionList, postRbacUserGrantUserRoleAndDatPermission } from '@/api/modules/rbac';
 import RoleSelect from './roleSelect.vue';
 
 defineOptions({
@@ -249,12 +249,12 @@ defineExpose({
   </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/components/roleSelect.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { getRbacPubRoleGroupGetAll, getRbacPubRoleGroupGetById, getRbacRoleRoleList } from '@/api/modules/rbac';
 import { SearchOutlined } from '@ant-design/icons-vue';
 import { useToggle } from '@vueuse/core';
+import { getRbacPubRoleGroupGetAll, getRbacPubRoleGroupGetById, getRbacRoleRoleList } from '@/api/modules/rbac';
 
 defineOptions({
   name: 'RoleSelect',
@@ -110,7 +110,7 @@ defineExpose({
             </template>
           </a-input>
           <div class="overflow-y-auto overflow-x-hidden h-[calc(100%-30px)] mt-10px">
-            <a-spin v-if="loading" class="cent" />
+            <a-spin v-if="loading" class="relative top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
             <a-checkbox-group v-else v-model:value="checkedKeys" class="w-full">
               <div v-for="ite in roleData" v-show="filterName(ite)" :key="ite.id" class="w-full py-10px bodb">
                 <a-checkbox :value="ite.id">
@@ -125,7 +125,7 @@ defineExpose({
         </div>
       </div>
 
-      <div class="flex-1 flex flex-col border-solid border-0px border-l-1px border_color">
+      <div class="flex-1 flex flex-col border-solid border-0px border-l-1px border-[#e5e6eb] dark:border-[#fdfdfd] dark:border-op-12">
         <div class="w-full h-34px bg-[#F2F3F5] flex px-15px items-center justify-between text-[#1D2129] dark:bg-[#1D2129] dark:text-[#F2F3F5]">
           <div class="">
             已选角色
@@ -165,22 +165,13 @@ defineExpose({
   </a-modal>
 </template>
 
-<style lang="scss" scoped>
-.cent {
-  position: relative;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
+<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-[#FDFDFD] border-op-12;
 }
 
 .border_c {
@@ -189,70 +180,47 @@ defineExpose({
 }
 
 :deep(.ant-dropdown-link) {
-  padding: 4px 6px;
-  font-size: 12px;
-  border-radius: 2px;
+  --at-apply: text-xs px-1.5 py-1 rounded-sm;
   transform: scale(0.7);
 }
-</style>
-
-<style lang='scss' scoped>
-.custom_modal {
-  :deep(.ant-modal-content) {
-    padding: 0;
-    border-radius: 0;
-  }
-
-  :deep(.ant-modal-header) {
-    padding: 12px 16px;
-    margin-bottom: 0;
-    border-bottom: 1px solid #e5e6eb;
-  }
-
-  :deep(.ant-modal-title) {
-    font-size: 16px;
-    font-weight: 500;
-    color: #1d2129;
-  }
-
-  :deep(.ant-modal-body) {
-    padding: 16px;
-  }
-
-  .bodb {
-    border-bottom: 1px solid #e5e6eb;
-  }
-
-  :deep(.ant-modal-footer) {
-    padding: 16px;
-    border-top: 1px solid #e5e6eb;
 
-    .ant-btn {
-      border-radius: 2px;
-    }
-  }
+.custom_modal :deep(.ant-modal-content) {
+  --at-apply: p-0 rounded-none;
+}
+.custom_modal :deep(.ant-modal-header) {
+  --at-apply: mb-0 px-4 py-3 border-b-[#e5e6eb] border-b border-solid;
+}
+.custom_modal :deep(.ant-modal-title) {
+  --at-apply: text-base font-medium text-[#1d2129];
+}
+.custom_modal :deep(.ant-modal-body) {
+  --at-apply: p-4;
+}
+.custom_modal .bodb {
+  --at-apply: border-b-[#e5e6eb] border-b border-solid border-0;
+}
+.custom_modal :deep(.ant-modal-footer) {
+  --at-apply: p-4 border-t-[#e5e6eb] border-t border-solid;
+}
+.custom_modal :deep(.ant-modal-footer .ant-btn) {
+  --at-apply: rounded-sm;
 }
-
 :deep(.ant-tree-checkbox) {
   margin-block-start: 0;
   margin-inline-end: 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;
 }
 </style>