@pubinfo-pr/module-rbac 0.222.4 → 0.224.1

package/src/views/layout_setting/index.vue

@@ -104,162 +104,83 @@ function clickHandle(item: Settings.menu['menuMode']) {
 
 <style scoped>
 .item {
-  display: flex;
-  flex-direction: column;
-  cursor: pointer;
-  border-width: 1px;
-  border-color: var(--g-tabbar-tab-hover-bg);
-  padding-top: 26px;
-  border-radius: 0.5rem; /* 8px */
-  border-style: solid;
+  --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;
   background: linear-gradient(180deg, var(--g-bg) 0%, var(--g-bg) 100%);
 }
 
 .item .mode {
-  position: relative;
-  width: 4rem; /* 64px */
-  height: 3rem; /* 48px */
-  transition-property: color, background-color, border-color,
-    text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
-    backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+  --at-apply: relative w-16 h-12 transition;
 }
 
 .item .mode::before,
 .item .mode::after,
 .item .mode .mode-container {
-  position: absolute;
-  pointer-events: none;
-  border-width: 0.15rem; /* 2.4px */
+  --at-apply: absolute pointer-events-none border-[0.15rem];
 }
 
 .item .mode::before {
-  content: "";
-  background-color: rgb(var(--ui-primary)) /* rgb(var(--ui-primary)) */;
+  --at-apply: content-empty bg-ui-primary;
 }
 
 .item .mode::after {
-  content: "";
-  background-color: rgb(var(--ui-primary) / 0.6) /* rgb(var(--ui-primary)) */;
+  --at-apply: content-empty bg-ui-primary/60;
 }
 
 .item .mode .mode-container {
-  background-color: rgb(var(--ui-primary) / 0.2) /* rgb(var(--ui-primary)) */;
-  border-style: dashed;
-  border-color: rgb(var(--ui-primary));
+  --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
 }
 
 .item .mode .mode-container::before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 100%;
+  --at-apply: content-empty absolute w-full h-full;
 }
 
 .item .mode-side::before {
-  top: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 0.5rem; /* 8px */
-  width: 0.5rem; /* 8px */
-  border-top-left-radius: 0.25rem; /* 4px */
-  border-bottom-left-radius: 0.25rem; /* 4px */
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
 }
 
 .item .mode-side::after {
-  top: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 1.125rem; /* 18px */
-  width: 0.75rem; /* 12px */
+  --at-apply: top-2 bottom-2 left-4.5 w-3;
 }
 
 .item .mode-side .mode-container {
-  top: 0.5rem; /* 8px */
-  right: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 2rem; /* 32px */
-  border-top-right-radius: 0.25rem; /* 4px */
-  border-bottom-right-radius: 0.25rem; /* 4px */
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
 }
 
 .item .mode-head::before {
-  top: 0.5rem; /* 8px */
-  left: 0.5rem; /* 8px */
-  right: 0.5rem; /* 8px */
-  height: 0.5rem; /* 8px */
-  border-top-left-radius: 0.25rem; /* 4px */
-  border-top-right-radius: 0.25rem; /* 4px */
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
 }
 
 .item .mode-head::after {
-  top: 1.125rem; /* 18px */
-  left: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  width: 0.75rem; /* 12px */
-  border-bottom-left-radius: 0.25rem; /* 4px */
+  --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
 }
 
 .item .mode-head .mode-container {
-  top: 1.125rem; /* 18px */
-  right: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 1.375rem; /* 22px */
-  border-bottom-right-radius: 0.25rem; /* 4px */
+  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
 }
 
 .item .mode-single::after {
-  top: 0.5rem; /* 8px */
-  left: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  width: 0.75rem; /* 12px */
-  border-top-left-radius: 0.25rem; /* 4px */
-  border-bottom-left-radius: 0.25rem; /* 4px */
+  --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
 }
 
 .item .mode-single .mode-container {
-  top: 0.5rem; /* 8px */
-  right: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 1.375rem; /* 22px */
-  border-top-right-radius: 0.25rem; /* 4px */
-  border-bottom-right-radius: 0.25rem; /* 4px */
+  --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 {
-  top: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 0.5rem; /* 8px */
-  width: 0.5rem; /* 8px */
-  border-top-left-radius: 0.25rem; /* 4px */
-  border-bottom-left-radius: 0.25rem; /* 4px */
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
 }
 
 .item .mode-only-side .mode-container {
-  top: 0.5rem; /* 8px */
-  right: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 1.125rem; /* 18px */
-  border-top-right-radius: 0.25rem; /* 4px */
-  border-bottom-right-radius: 0.25rem; /* 4px */
+  --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 {
-  top: 0.5rem; /* 8px */
-  left: 0.5rem; /* 8px */
-  right: 0.5rem; /* 8px */
-  height: 0.5rem; /* 8px */
-  border-top-left-radius: 0.25rem; /* 4px */
-  border-top-right-radius: 0.25rem; /* 4px */
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
 }
 
 .item .mode-only-head .mode-container {
-  top: 1.125rem; /* 18px */
-  right: 0.5rem; /* 8px */
-  bottom: 0.5rem; /* 8px */
-  left: 0.5rem; /* 8px */
-  border-bottom-left-radius: 0.25rem; /* 4px */
-  border-bottom-right-radius: 0.25rem; /* 4px */
+  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-2 rounded-bl-1 rounded-br-1;
 }
 
 .item .jb {
@@ -267,7 +188,7 @@ function clickHandle(item: Settings.menu['menuMode']) {
 }
 
 .item .jb .layout-demo {
-  width: 70%;
+  --at-apply: w-70%;
 }
 
 .item-side .layout-demo {

package/src/views/log_center/login_history.vue

@@ -225,15 +225,10 @@ function showDetailDrawer(record: API.PubLoginLogDto) {
 
 <style scoped>
 .status-mark {
-  display: inline-block;
-  width: 0.5rem; /* 8px */
-  height: 0.5rem; /* 8px */
-  background-color: #aeaeae;
-  margin-right: 0.25rem; /* 4px */
-  border-radius: 50%;
+  --at-apply: inline-block w-2 h-2 bg-[#aeaeae] mr-1 rounded-[50%];
 }
 
 .status-mark.active {
-  background: #01d689;
+  --at-apply: [background:#01d689];
 }
 </style>

package/src/views/log_center/operate_history.vue

@@ -192,10 +192,7 @@ function showDetailDrawer(record: API.PubOperateLogDto) {
       <template #bodyCell="{ column, record }">
         <template v-if="column.dataIndex === 'success'">
           <div class="flex items-center">
-            <i
-              :data-active="record.success"
-              class="inline-block w-2 h-2 bg-[#aeaeae] mr-1 rounded-[50%] data-[active]:[background:#01d689]"
-            />
+            <i class="status-mark" :class="[{ active: record.success }]" />
             <span class="ml-4px">{{ record.success ? '正常' : '异常' }}</span>
           </div>
         </template>
@@ -219,3 +216,13 @@ function showDetailDrawer(record: API.PubOperateLogDto) {
     />
   </div>
 </template>
+
+<style scoped>
+.status-mark {
+  --at-apply: inline-block w-2 h-2 bg-[#aeaeae] mr-1 rounded-[50%];
+}
+
+.status-mark.active {
+  background: #01d689;
+}
+</style>

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

@@ -5,6 +5,7 @@ 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 { selectUser } from '@/components/OrgUserSelector';
 import { ACTION } from '../enum';
 
 defineOptions({
@@ -41,13 +42,25 @@ getDictItemList({ dictCode: 'orgType' }).then((res: API.ResponseDataListDictItem
   });
 });
 const form = ref<Partial<API.PubOrg & { parentName: string }>>({ parentId: '', enable: true });
+const selectedUsers = ref<
+  {
+    orgId?: string
+    userId?: string
+    userName?: string
+  }[]>([]);
 async function onOpen(key: ACTION, record?: API.PubOrg) {
   setOpen(true);
   state.title = key;
+  selectedUsers.value = [];
   if (key === ACTION.EDIT) {
     const res = await getRbacOrgInfo({ id: record?.id as string });
     if (res.success) {
       form.value = res.data ?? {};
+      selectedUsers.value = [{
+        orgId: res.data?.leaderUserOrgId ?? '',
+        userId: res.data?.leaderUserId ?? '',
+        userName: res.data?.leaderUserName ?? '',
+      }];
     }
   }
   else if (key === ACTION.ADDNEXT) {
@@ -67,12 +80,34 @@ async function onOpen(key: ACTION, record?: API.PubOrg) {
   }
 }
 
+function chooseLeader() {
+  selectUser({
+    modelValue: selectedUsers.value, // 回显时选中的数据
+    multiple: false,
+    onSubmit(selected = []) {
+      // console.log(selected); // 点击确认后返回选中的数据
+      selectedUsers.value = selected.map((user) => {
+        return {
+          orgId: user.orgId as string,
+          userId: user.userId as string,
+          userName: user.userName as string,
+        };
+      });
+    },
+  });
+}
+
 const [loading, setLoading] = useToggle(false);
 function onSubmit() {
   const request = state.title === ACTION.EDIT ? postRbacOrgUpdateOrg : postRbacOrgAddOrg;
   formRef.value?.validate().then(() => {
     setLoading(true);
     const params: any = { ...form.value };
+    if (selectedUsers.value.length > 0) {
+      params.leaderUserId = selectedUsers.value[0].userId;
+      params.leaderUserName = selectedUsers.value[0].userName;
+      params.leaderUserOrgId = selectedUsers.value[0].orgId;
+    }
     request(params)
       .then((res: API.ResponseDataPubOrg) => {
         if (res.success) {
@@ -137,6 +172,14 @@ defineExpose({
       <a-form-item label="排序">
         <a-input-number v-model:value="form.sort" />
       </a-form-item>
+      <a-form-item label="组织负责人">
+        <div flex items-center>
+          <span v-if="selectedUsers.length > 0" mr-6px>{{ selectedUsers[0]?.userName }}</span>
+          <a-button type="primary" @click="chooseLeader">
+            选择负责人
+          </a-button>
+        </div>
+      </a-form-item>
       <a-form-item label="统一社会信用代码" name="creditCode">
         <a-input v-model:value="form.creditCode" />
       </a-form-item>

package/src/views/organization/index.vue

@@ -326,15 +326,10 @@ function onAction(key: string, record?: ChilData): void {
 </script>
 
 <template>
-  <div class="w-full h-full p-10px">
-    <div
-      class="org_page [list-style:none] relative box-border w-full h-full text-sm
-      leading-[1.5714] text-[rgb(0_0_0_/_88%)]
-      shadow-[0_1px_2px_0_rgba(0,0,0,0.03),0_1px_6px_-1px_rgba(0,0,0,0.02),0_2px_4px_0_rgba(0,0,0,0.02)]
-      m-0 p-0 rounded-lg bg-[#fff] dark:bg-[#141414]"
-    >
-      <div class="flex items-center justify-between pl-6 pr-4 py-4">
-        <div class="flex items-center">
+  <div w-full h-full p-10px>
+    <div class="org_page bg-[#fff] dark:bg-[#141414]">
+      <div class="search_panel">
+        <div class="left">
           <label class="dark:text-[#f7f7f7]">组织名称：</label>
           <a-select
             v-model:value="searchId"
@@ -361,7 +356,7 @@ function onAction(key: string, record?: ChilData): void {
             </template>
           </a-select>
         </div>
-        <div class="items-center">
+        <div class="right">
           <a-button @click="reset">
             重置
           </a-button>
@@ -453,24 +448,32 @@ function onAction(key: string, record?: ChilData): void {
 
 <style scoped>
 .org_page {
+  --at-apply: [list-style:none] relative box-border w-full h-full text-sm leading-[1.5714] text-[rgb(0_0_0_/_88%)] shadow-[0_1px_2px_0_rgba(0,0,0,0.03),0_1px_6px_-1px_rgba(0,0,0,0.02),0_2px_4px_0_rgba(0,0,0,0.02)] m-0 p-0 rounded-lg;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
+.search_panel {
+  --at-apply: flex items-center justify-between pl-6 pr-4 py-4;
+}
+
+.search_panel .left {
+  --at-apply: flex items-center;
+}
+.search_panel .right {
+  --at-apply: flex items-center;
+}
 :deep(.ant-divider-horizontal) {
-  margin: 0;
+  --at-apply: m-0;
 }
 </style>
 
 <style scoped>
 :deep(.vxe-table--body-wrapper) {
-  overflow-x: hidden;
+  --at-apply: overflow-x-hidden;
 }
 
 :deep(.vxe-tree--btn-wrapper) {
-  border-width: 1px;
-  border-radius: 0.375rem; /* 6px */
-  border-style: solid;
-  border-color: #f0f0f0;
+  --at-apply: w-[15px] h-[15px] border rounded-md border-solid border-[#f0f0f0];
   width: 15px !important;
   height: 15px !important;
 }
@@ -484,16 +487,11 @@ function onAction(key: string, record?: ChilData): void {
 }
 
 :deep(.vxe-header--column .vxe-resizable) {
-  width: 1px;
-  height: 1.6em;
-  right: 0;
-  bottom: 0.875rem; /* 14px */
+  --at-apply: w-px h-[1.6em] right-0 bottom-3.5;
   background-color: var(--vxe-table-border-color);
 }
 
 :deep([class*="vxe-icon-"]) {
-  font-size: 0.75rem; /* 12px */
-  line-height: 1rem; /* 16px */
-  transform: scaleX(0.8) scaleY(0.8);
+  --at-apply: text-xs scale-[0.8];
 }
 </style>

package/src/views/page_animation_setting/index.vue

@@ -119,7 +119,11 @@ function setStyle(jsonStr: string) {
 </script>
 
 <template>
-  <div class="w-full h-full p-10px">
+  <div
+    w-full
+    h-full
+    p-10px
+  >
     <div class="w-full h-full bg-white overflow-y-auto p-10px flex flex-col box-border dark:bg-[#141414]">
       <div class="bg-[#F0F4FF] h-[38px] pl-[16px] flex flex-row items-center dark:bg-[#32353B]">
         <PubinfoIcon name="icon_menu" class="text-base mr-[6px]" :size="22" />
@@ -146,15 +150,8 @@ function setStyle(jsonStr: string) {
             <div
               v-for="(mode, index) in transitionModeList"
               :key="mode.active"
-              class="flex flex-col cursor-pointer bg-[color:var(--g-bg)]
-              border border-[color:var(--g-tabbar-tab-hover-bg)] [place-items:center_center]
-              pt-[26px] rounded-lg border-solid dark:bg-[#3a3e43]!
-              data-[status=active]:border-[rgb(var(--ui-primary))]
-              data-[status=active]:shadow-[0_2.6px_13px_0_#59626940]
-              data-[status=active]:rounded-lg
-              data-[status=active]:border-[2.6px]
-              data-[status=active]:border-solid"
-              :data-status="[transitionMode === mode.active ? 'active' : '', `item-${mode.active}`]"
+              class="item dark:bg-[#3a3e43]! "
+              :class="[transitionMode === mode.active ? 'active' : '', `item-${mode.active}`]"
               aspect="[9/6]"
               @click="clickHandle(mode.active)"
               @mouseenter="play(index)"
@@ -163,10 +160,7 @@ function setStyle(jsonStr: string) {
               <div class="text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">
                 {{ mode.descripe }}
               </div>
-              <div
-                class="flex-1 mt-[20px] w-[75%] rounded-[8px] py-[10px] flex justify-center"
-                style="background: linear-gradient(180deg, var(--g-container-bg) 0%, #fff0 100%);"
-              >
+              <div class="flex-1 mt-[20px] w-[75%] rounded-[8px] jb py-[10px] flex justify-center">
                 <AnimationItem
                   :key="index"
                   :ref="(el: any) => (itemRefs[index] = el as InstanceType<typeof AnimationItem>)"
@@ -181,3 +175,18 @@ function setStyle(jsonStr: string) {
     </div>
   </div>
 </template>
+
+<style scoped>
+.item {
+  --at-apply: flex flex-col cursor-pointer bg-[color:var(--g-bg)] border border-[color:var(--g-tabbar-tab-hover-bg)] pt-[26px] rounded-lg border-solid;
+  place-items: center center;
+}
+
+.item .jb {
+  background: linear-gradient(180deg, var(--g-container-bg) 0%, #fff0 100%);
+}
+
+.item.active {
+  --at-apply: border-[rgb(var(--ui-primary))] shadow-[0_2.6px_13px_0_#59626940] rounded-lg border-[2.6px] border-solid;
+}
+</style>

package/src/views/page_w_setting/index.vue

@@ -60,7 +60,9 @@ function clickHandle(item: Settings.layout['widthMode']) {
 
 <template>
   <div
-    class="w-full h-full p-10px"
+    w-full
+    h-full
+    p-10px
   >
     <div class="w-full h-full bg-white overflow-y-auto p-10px flex flex-col box-border dark:bg-[#141414]">
       <div class="bg-[#F0F4FF] h-[38px] pl-[16px] flex flex-row items-center dark:bg-[#32353B]">
@@ -96,16 +98,7 @@ function clickHandle(item: Settings.layout['widthMode']) {
 
 <style scoped>
 .item {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  border-width: 1px;
-  border-color: var(--g-tabbar-tab-hover-bg);
-  padding-top: 26px;
-  border-radius: 0.5rem; /* 8px */
-  border-style: solid;
+  --at-apply: flex flex-col justify-center items-center cursor-pointer border border-[color:var(--g-tabbar-tab-hover-bg)] pt-[26px] rounded-lg border-solid;
   background: linear-gradient(180deg, var(--g-bg) 0%, var(--g-bg) 100%);
 }
 
@@ -114,7 +107,7 @@ function clickHandle(item: Settings.layout['widthMode']) {
 }
 
 .item .jb .layout-demo {
-  width: 70%;
+  --at-apply: w-7/10;
 }
 
 .item-adaption .mode {
@@ -158,13 +151,7 @@ function clickHandle(item: Settings.layout['widthMode']) {
 }
 
 .item.active {
-  border-color: rgb(var(--ui-primary));
-  --un-shadow: 0 2.6px 13px 0 var(--un-shadow-color, rgba(89, 98, 105, 0.25));
-  box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
-    var(--un-shadow);
-  border-radius: 0.5rem; /* 8px */
-  border-width: 2.6px;
-  border-style: solid;
+  --at-apply: border-[rgb(var(--ui-primary))] shadow-[0_2.6px_13px_0_rgba(89,98,105,0.25)] rounded-lg border-[2.6px] border-solid;
 }
 
 [data-theme="dark"] .item,

package/src/views/role/components/ResourceRelation.vue

@@ -107,7 +107,6 @@ defineExpose({
 
 <style scoped>
 :deep(.ant-drawer-body) {
-  padding-left: 0;
-  padding-right: 0;
+  --at-apply: px-0;
 }
 </style>

package/src/views/role_group/components/ResourceRelation.vue

@@ -85,7 +85,6 @@ defineExpose({
 
 <style scoped>
 :deep(.ant-drawer-body) {
-  padding-left: 0;
-  padding-right: 0;
+  --at-apply: px-0;
 }
 </style>

package/src/views/safe_setting/index.vue

@@ -230,6 +230,6 @@ async function onSubmit() {
 <style>
 .safe-rule-form .ant-input,
 .safe-rule-form .ant-select {
-  width: 90%;
+  --at-apply: w-9/10;
 }
 </style>