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

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

@@ -1,10 +1,10 @@
 <script setup lang="tsx">
 import type { ProColumns } from '@pubinfo/pro-components';
 import type { dataPermissionType } from './enum';
-import { deleteRbacPubDataPermissionsDelete, postRbacPubDataPermissionsPageQuery } from '@/api/modules/rbac';
 import { ProTable } from '@pubinfo/pro-components';
 import { useToggle } from '@vueuse/core';
 import { message, Modal } from 'ant-design-vue';
+import { deleteRbacPubDataPermissionsDelete, postRbacPubDataPermissionsPageQuery } from '@/api/modules/rbac';
 import CreateAndEditDataPermission from './components/createAndEditDataPermission.vue';
 import { ACTION, dataPermissionOptionsAll, dataPermissionTypeLabel } from './enum';
 
@@ -155,7 +155,7 @@ function onAction(key: string, record?: API.shujuquanxianshituduixiang): void {
               <PubinfoIcon name="edit" class="text-base" />
               <span class="ml-4px">{{ ACTION.EDIT }}</span>
             </a>
-            <a
+            <span
               v-auth="'data_permission_delete'"
               flex
               items-center
@@ -167,7 +167,7 @@ function onAction(key: string, record?: API.shujuquanxianshituduixiang): void {
             >
               <PubinfoIcon name="remove" class="text-base" />
               <span class="ml-4px">{{ ACTION.REMOVE }}</span>
-            </a>
+            </span>
           </a-space>
         </template>
       </template>
@@ -176,15 +176,12 @@ function onAction(key: string, record?: API.shujuquanxianshituduixiang): void {
   </div>
 </template>
 
-<style lang="scss">
-.page-data-permission {
-  .ant-card.pro-table {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
+<style scoped>
+.page-data-permission :deep(.ant-card.pro-table) {
+  --at-apply: rounded-t-none;
+}
 
-  .ant-form-item-label {
-    width: 102px !important;
-  }
+.page-data-permission :deep(.ant-form-item-label) {
+  width: 102px !important;
 }
 </style>

package/src/views/dictionary/components/drawerDictionary.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Rule } from 'ant-design-vue/es/form';
 import type { FormExpose } from 'ant-design-vue/es/form/Form';
-import { postDictTypeSave } from '@/api/modules/configData';
 import { useToggle } from '@vueuse/core';
 import { message } from 'ant-design-vue';
+import { postDictTypeSave } from '@/api/modules/configData';
 import { ACTION } from '../enum';
 
 defineOptions({

package/src/views/dictionary/components/drawerDictionaryItem.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Rule } from 'ant-design-vue/es/form';
 import type { FormExpose } from 'ant-design-vue/es/form/Form';
-import { postDictItemSave } from '@/api/modules/configData';
 import { useToggle } from '@vueuse/core';
 import { message } from 'ant-design-vue';
+import { postDictItemSave } from '@/api/modules/configData';
 import { ACTION } from '../enum';
 
 defineOptions({

package/src/views/dictionary/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="tsx">
 import type { ProColumns } from '@pubinfo/pro-components';
-import { deleteDictTypeDeleteById, postDictTypePage } from '@/api/modules/configData';
 import { ProTable } from '@pubinfo/pro-components';
 import { message, Modal } from 'ant-design-vue';
+import { deleteDictTypeDeleteById, postDictTypePage } from '@/api/modules/configData';
 import DrawerDictionary from './components/drawerDictionary.vue';
 import { ACTION } from './enum';
 
@@ -174,14 +174,14 @@ function getDictionaryData() {
               <PubinfoIcon name="edit" class="text-base" />
               <span class="ml-4px">{{ ACTION.EDIT }}</span>
             </a>
-            <a
+            <span
               v-auth="'dictionary_remove'"
               class="flex items-center text-red-500 hover:cursor-pointer hover:opacity-80"
               @click="onAction(ACTION.REMOVE, record)"
             >
               <PubinfoIcon name="remove" class="text-base" />
               <span class="ml-4px">{{ ACTION.REMOVE }}</span>
-            </a>
+            </span>
           </a-space>
         </template>
       </template>

package/src/views/dictionary/itemlist.vue

@@ -1,8 +1,8 @@
 <script setup lang="tsx">
 import type { ProColumns } from '@pubinfo/pro-components';
-import { deleteDictItemDeleteById, postDictItemPage } from '@/api/modules/configData';
 import { ProTable } from '@pubinfo/pro-components';
 import { Badge, message, Modal } from 'ant-design-vue';
+import { deleteDictItemDeleteById, postDictItemPage } from '@/api/modules/configData';
 import drawerDictionaryItem from './components/drawerDictionaryItem.vue';
 import { ACTION } from './enum';
 
@@ -147,10 +147,10 @@ function getDictData() {
               <PubinfoIcon name="edit" class="text-base" />
               <span class="ml-4px">{{ ACTION.EDIT }}</span>
             </a>
-            <a v-auth="'dictionary_data_remove'" class="flex items-center text-red-500 hover:cursor-pointer hover:opacity-80" @click="onAction(ACTION.REMOVE, record)">
+            <span v-auth="'dictionary_data_remove'" class="flex items-center text-red-500 hover:cursor-pointer hover:opacity-80" @click="onAction(ACTION.REMOVE, record)">
               <PubinfoIcon name="remove" class="text-base" />
               <span class="ml-4px">{{ ACTION.REMOVE }}</span>
-            </a>
+            </span>
           </a-space>
         </template>
       </template>

package/src/views/group/components/drawerGroup.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 { getGroupDetailById, postGroupSaveOrUpdate } from '@/api/modules/assist';
-import { selectOrg, selectUser } from '@/components/OrgUserSelector';
 import { useToggle } from '@vueuse/core';
 import { message } from 'ant-design-vue';
+import { getGroupDetailById, postGroupSaveOrUpdate } from '@/api/modules/assist';
+import { selectOrg, selectUser } from '@/components/OrgUserSelector';
 import { ACTION, GROUP_TYPE, useOptions } from '../enum';
 
 defineOptions({

package/src/views/group/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="tsx">
 import type { ProColumns } from '@pubinfo/pro-components';
-import { deleteGroupDeleteById, postGroupFindPage } from '@/api/modules/assist';
 import { ProTable } from '@pubinfo/pro-components';
 import { message, Modal } from 'ant-design-vue';
+import { deleteGroupDeleteById, postGroupFindPage } from '@/api/modules/assist';
 import DrawerGroup from './components/drawerGroup.vue';
 import { ACTION } from './enum';
 
@@ -156,7 +156,7 @@ function onAction(key: string, type: string, record?: API.PubGroup): void {
           :scroll="{ x: 1100 }"
         >
           <template #toolbar>
-            <a-button type="primary" @click="onAction(ACTION.ADD, query.type)">
+            <a-button v-auth="'group_save'" type="primary" @click="onAction(ACTION.ADD, query.type)">
               <PlusCircleOutlined />
               {{ ACTION.ADD }}
             </a-button>
@@ -164,11 +164,12 @@ function onAction(key: string, type: string, record?: API.PubGroup): void {
           <template #bodyCell="{ column, record }">
             <template v-if="column.dataIndex === 'action'">
               <a-space>
-                <a class="flex items-center" @click="onAction(ACTION.EDIT, query.type, record)">
+                <a v-auth="'group_edit'" class="flex items-center" @click="onAction(ACTION.EDIT, query.type, record)">
                   <PubinfoIcon name="edit" class="text-base" />
                   <span class="ml-4px">{{ ACTION.EDIT }}</span>
                 </a>
                 <span
+                  v-auth="'group_delete'"
                   class="flex items-center text-red-500 hover:cursor-pointer hover:opacity-80"
                   @click="onAction(ACTION.REMOVE, query.type, record)"
                 >
@@ -185,23 +186,17 @@ function onAction(key: string, type: string, record?: API.PubGroup): void {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .box_sh {
-  box-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%);
+  --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%)];
 }
-
 .tabs_custom {
-  height: 46px;
-
-  :deep(.ant-tabs-nav) {
-    margin: 0;
-
-    .ant-tabs-nav-list {
-      padding-left: 16px;
-    }
-  }
+  --at-apply: h-[46px];
+}
+.tabs_custom :deep(.ant-tabs-nav) {
+  --at-apply: m-0;
+}
+.tabs_custom :deep(.ant-tabs-nav .ant-tabs-nav-list) {
+  --at-apply: pl-4;
 }
 </style>

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>