@pubinfo-pr/module-rbac 0.221.3 → 0.222.2

package/src/components/ResourceSelector/index.vue

@@ -351,64 +351,94 @@ defineExpose({
 
 <style scoped>
 .border_color {
-  --at-apply: border-[#e5e6eb];
+  border-color: #e5e6eb;
 }
 
 [data-theme="dark"] .border_color {
-  --at-apply: border-[#fdfdfd1f];
+  border-color: rgb(253 253 253 / 0.12);
 }
 
 .border_c {
-  --at-apply: border rounded-[10px] border-dashed border-[#ccc];
+  border-width: 1px;
+  border-radius: 10px;
+  border-style: dashed;
+  border-color: #ccc;
 }
 
 :deep(.ant-dropdown-link) {
-  --at-apply: text-xs px-1.5 py-1 rounded-sm scale-[0.7];
+  font-size: 0.75rem; /* 12px */
+  line-height: 1rem; /* 16px */
+  padding-left: 0.375rem; /* 6px */
+  padding-right: 0.375rem; /* 6px */
+  padding-top: 0.25rem; /* 4px */
+  padding-bottom: 0.25rem; /* 4px */
+  border-radius: 0.125rem; /* 2px */
+  transform: scaleX(0.7) scaleY(0.7);
 }
 </style>
 
 <style lang='css' scoped>
 .custom_modal :deep(.ant-modal-content) {
-  --at-apply: p-0 rounded-none;
+  padding: 0;
+  border-radius: 0;
 }
 
 .custom_modal :deep(.ant-modal-header) {
-  --at-apply: mb-0 px-4 py-3 border-b-[#e5e6eb] border-b border-solid;
+  margin-bottom: 0;
+  padding-left: 1rem; /* 16px */
+  padding-right: 1rem; /* 16px */
+  padding-top: 0.75rem; /* 12px */
+  padding-bottom: 0.75rem; /* 12px */
+  border-bottom-color: #e5e6eb;
+  border-bottom-width: 1px;
+  border-style: solid;
 }
 
 .custom_modal :deep(.ant-modal-title) {
-  --at-apply: text-base font-medium text-[#1d2129];
+  font-size: 1rem; /* 16px */
+  line-height: 1.5rem; /* 24px */
+  font-weight: 500;
+  color: #1d2129;
 }
 
 .custom_modal :deep(.ant-modal-body) {
-  --at-apply: p-4;
+  padding: 1rem;
 }
 
 .custom_modal :deep(.ant-modal-footer) {
-  --at-apply: p-4 border-t-[#e5e6eb] border-t border-solid;
+  padding: 1rem; /* 16px */
+  border-top-color: #e5e6eb;
+  border-top-width: 1px;
+  border-style: solid;
 }
 
 .custom_modal :deep(.ant-modal-footer) .ant-btn {
-  --at-apply: rounded-sm;
+  border-radius: 0.125rem;
 }
 
 :deep(.ant-tree-checkbox) {
-  --at-apply: mt-0 mr-2px;
+  margin-top: 0;
+  margin-right: 2px;
 }
 
 :deep(.ant-tree-checkbox + span .ant-tree-iconEle) {
-  --at-apply: mr-1;
+  margin-right: 0.25rem;
 }
 
 .custom_tag {
-  --at-apply: px-2 py-[3px] rounded-sm border-0;
+  padding-left: 0.5rem; /* 8px */
+  padding-right: 0.5rem; /* 8px */
+  padding-top: 3px;
+  padding-bottom: 3px;
+  border-radius: 0.125rem; /* 2px */
+  border-width: 0px;
 }
 
 .custom_tag :deep(.ant-tag-close-icon) {
-  --at-apply: text-[#165dff] text-op-60;
+  color: rgb(22 93 255 / 0.6) /* #165dff */;
 }
 
 .custom_tag :deep(.ant-tag-close-icon):hover {
-  --at-apply: text-[#165dff] text-op-100;
+  color: #165dff;
 }
 </style>

package/src/views/blackWhiteList/index.vue

@@ -285,14 +285,20 @@ function onAction(key: string, record?: API.PubBlackWhiteList): void {
 
 <style scoped>
 .page-black-white-list :deep(.ant-card.pro-table) {
-  --at-apply: rounded-t-none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 .page-black-white-list .status-mark {
-  --at-apply: inline-block w-2 h-2 bg-[#aeaeae] mr-1 rounded-[50%];
+  display: inline-block;
+  width: 0.5rem; /* 8px */
+  height: 0.5rem; /* 8px */
+  background-color: #aeaeae;
+  margin-right: 0.25rem; /* 4px */
+  border-radius: 50%;
 }
 
 .page-black-white-list .status-mark.active {
-  --at-apply: [background:#01d689];
+  background: #01d689;
 }
 </style>

package/src/views/components/setItem.vue

@@ -105,7 +105,14 @@ watch(() => setActiveStyle.value, () => {
 
 <style scoped>
 .item_ani {
-  --at-apply: flex flex-col bg-[color:var(--g-bg)] border border-[color:var(--g-tabbar-tab-hover-bg)] pt-[26px] rounded-lg border-solid;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--g-bg);
+  border-width: 1px;
+  border-color: var(--g-tabbar-tab-hover-bg);
+  padding-top: 26px;
+  border-radius: 0.5rem; /* 8px */
+  border-style: solid;
   place-items: center center;
 }
 
@@ -114,6 +121,7 @@ watch(() => setActiveStyle.value, () => {
 }
 
 .custom_style :deep(.text-sm) {
-  --at-apply: text-xs;
+  font-size: 0.75rem; /* 12px */
+  line-height: 1rem; /* 16px */
 }
 </style>

package/src/views/data-permission/index.vue

@@ -178,7 +178,8 @@ function onAction(key: string, record?: API.shujuquanxianshituduixiang): void {
 
 <style scoped>
 .page-data-permission :deep(.ant-card.pro-table) {
-  --at-apply: rounded-t-none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 .page-data-permission :deep(.ant-form-item-label) {

package/src/views/group/index.vue

@@ -188,15 +188,18 @@ function onAction(key: string, type: string, record?: API.PubGroup): void {
 
 <style scoped>
 .box_sh {
-  --at-apply: shadow-[0_1px_2px_0_rgb(0_0_0_/_3%),0_1px_6px_-1px_rgb(0_0_0_/_2%),0_2px_4px_0_rgb(0_0_0_/_2%)];
+  --un-shadow: 0 1px 2px 0 rgb(0 0 0 / 3%), 0 1px 6px -1px rgb(0 0 0 / 2%),
+    0 2px 4px 0 rgb(0 0 0 / 2%);
+  box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
+    var(--un-shadow);
 }
 .tabs_custom {
-  --at-apply: h-[46px];
+  height: 46px;
 }
 .tabs_custom :deep(.ant-tabs-nav) {
-  --at-apply: m-0;
+  margin: 0;
 }
 .tabs_custom :deep(.ant-tabs-nav .ant-tabs-nav-list) {
-  --at-apply: pl-4;
+  padding-left: 1rem; /* 16px */
 }
 </style>

package/src/views/layout_setting/index.vue

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

package/src/views/log_center/login_history.vue

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

package/src/views/log_center/operate_history.vue

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

@@ -326,10 +326,15 @@ function onAction(key: string, record?: ChilData): void {
 </script>
 
 <template>
-  <div w-full h-full p-10px>
-    <div class="org_page bg-[#fff] dark:bg-[#141414]">
-      <div class="search_panel">
-        <div class="left">
+  <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">
           <label class="dark:text-[#f7f7f7]">组织名称：</label>
           <a-select
             v-model:value="searchId"
@@ -356,7 +361,7 @@ function onAction(key: string, record?: ChilData): void {
             </template>
           </a-select>
         </div>
-        <div class="right">
+        <div class="items-center">
           <a-button @click="reset">
             重置
           </a-button>
@@ -448,32 +453,24 @@ 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) {
-  --at-apply: m-0;
+  margin: 0;
 }
 </style>
 
 <style scoped>
 :deep(.vxe-table--body-wrapper) {
-  --at-apply: overflow-x-hidden;
+  overflow-x: hidden;
 }
 
 :deep(.vxe-tree--btn-wrapper) {
-  --at-apply: w-[15px] h-[15px] border rounded-md border-solid border-[#f0f0f0];
+  border-width: 1px;
+  border-radius: 0.375rem; /* 6px */
+  border-style: solid;
+  border-color: #f0f0f0;
   width: 15px !important;
   height: 15px !important;
 }
@@ -487,11 +484,16 @@ function onAction(key: string, record?: ChilData): void {
 }
 
 :deep(.vxe-header--column .vxe-resizable) {
-  --at-apply: w-px h-[1.6em] right-0 bottom-3.5;
+  width: 1px;
+  height: 1.6em;
+  right: 0;
+  bottom: 0.875rem; /* 14px */
   background-color: var(--vxe-table-border-color);
 }
 
 :deep([class*="vxe-icon-"]) {
-  --at-apply: text-xs scale-[0.8];
+  font-size: 0.75rem; /* 12px */
+  line-height: 1rem; /* 16px */
+  transform: scaleX(0.8) scaleY(0.8);
 }
 </style>

package/src/views/page_animation_setting/index.vue

@@ -119,11 +119,7 @@ function setStyle(jsonStr: string) {
 </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 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" />
@@ -150,8 +146,15 @@ function setStyle(jsonStr: string) {
             <div
               v-for="(mode, index) in transitionModeList"
               :key="mode.active"
-              class="item dark:bg-[#3a3e43]! "
-              :class="[transitionMode === mode.active ? 'active' : '', `item-${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}`]"
               aspect="[9/6]"
               @click="clickHandle(mode.active)"
               @mouseenter="play(index)"
@@ -160,7 +163,10 @@ 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] jb py-[10px] flex justify-center">
+              <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%);"
+              >
                 <AnimationItem
                   :key="index"
                   :ref="(el: any) => (itemRefs[index] = el as InstanceType<typeof AnimationItem>)"
@@ -175,18 +181,3 @@ 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,9 +60,7 @@ function clickHandle(item: Settings.layout['widthMode']) {
 
 <template>
   <div
-    w-full
-    h-full
-    p-10px
+    class="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]">
@@ -98,7 +96,16 @@ function clickHandle(item: Settings.layout['widthMode']) {
 
 <style scoped>
 .item {
-  --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;
+  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;
   background: linear-gradient(180deg, var(--g-bg) 0%, var(--g-bg) 100%);
 }
 
@@ -107,7 +114,7 @@ function clickHandle(item: Settings.layout['widthMode']) {
 }
 
 .item .jb .layout-demo {
-  --at-apply: w-7/10;
+  width: 70%;
 }
 
 .item-adaption .mode {
@@ -151,7 +158,13 @@ function clickHandle(item: Settings.layout['widthMode']) {
 }
 
 .item.active {
-  --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;
+  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;
 }
 
 [data-theme="dark"] .item,

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

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

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

@@ -85,6 +85,7 @@ defineExpose({
 
 <style scoped>
 :deep(.ant-drawer-body) {
-  --at-apply: px-0;
+  padding-left: 0;
+  padding-right: 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 {
-  --at-apply: w-9/10;
+  width: 90%;
 }
 </style>