@pubinfo/core 2.0.0-beta.31 → 2.0.0-beta.32

package/src/layout/components/Topbar/Toolbar/Favorites.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { PubinfoIcon } from '@/components';
 import { isUndefined } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue';
 import Sortable from 'sortablejs';
@@ -7,6 +6,7 @@ import { useI18n } from 'vue-i18n';
 import FluentDelete24Filled from '~icons/fluent/delete-24-filled';
 import FluentStarAdd16Regular from '~icons/fluent/star-add-16-regular';
 import FluentStarDismiss16Regular from '~icons/fluent/star-dismiss-16-regular';
+import { PubinfoIcon } from '@/components';
 import { useContext } from '../../../composables/useContext';
 
 defineOptions({
@@ -123,13 +123,13 @@ watch(favoritesContainerRef, (newSortableContainer) => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 :deep([data-overlayscrollbars-viewport]) {
-  overscroll-behavior: contain;
+  --at-apply: overscroll-contain;
 }
 
 .draggable-ghost {
-  opacity: 0;
+  --at-apply: op-0;
 }
 
 .name {

package/src/layout/components/Topbar/Toolbar/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { RouteRecordRaw } from 'vue-router';
-import { PubinfoIcon } from '@/components';
 import { cloneDeep } from 'lodash-es';
 import { compile } from 'path-to-regexp';
+import { PubinfoIcon } from '@/components';
 import { useContext } from '../../../composables/useContext';
 import Breadcrumb from '../../Tools/Breadcrumb/index.vue';
 import BreadcrumbItem from '../../Tools/Breadcrumb/item.vue';
@@ -238,64 +238,47 @@ function onSelect(node: RouteRecordRaw, index: number) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .toolbar-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: var(--g-toolbar-height);
-  background-color: var(--g-container-bg);
-  transition: background-color 0.3s;
-
-  .left-box {
-    display: flex;
-    align-items: center;
-    padding-right: 50px;
-    padding-left: 10px;
-    overflow: hidden;
-    mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 50px), transparent);
-
-    .breadcrumb {
-      padding-left: 10px;
-      white-space: nowrap;
-
-      &.breadcrumb-modern {
-        :deep(.breadcrumb-item) {
-          .text {
-            --at-apply: bg-stone-2/80 dark:bg-stone-8/80;
-
-            padding: 6px 16px;
-            clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
-
-            &.is-link:hover {
-              --at-apply: bg-stone-2 dark:bg-stone-8;
-            }
-          }
-
-          &:first-child .text {
-            padding-left: 12px;
-            clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
-            border-radius: 6px 0 0 6px;
-          }
-
-          &:last-child:not(:first-child) .text {
-            --at-apply: bg-stone-2 dark:bg-stone-8;
-
-            padding-right: 12px;
-            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
-            border-radius: 0 6px 6px 0;
-          }
-
-          .separator {
-            display: none;
-          }
-        }
-      }
-    }
-  }
+  --at-apply: flex items-center justify-between h-[--g-toolbar-height]
+  bg-[--g-container-bg] transition-[background-color] duration-[0.3s];
+}
+
+.left-box {
+  --at-apply: flex items-center overflow-hidden pl-2.5 pr-[50px];
+  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 50px), transparent);
+}
+
+.breadcrumb {
+  --at-apply: pl-10px whitespace-normal;
+}
+
+.breadcrumb.breadcrumb-modern :deep(.breadcrumb-item) .text {
+  --at-apply: bg-black/5 px-4 py-1.5 bg-stone-2/80 dark:bg-stone-8/80;
+  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
+}
+
+.breadcrumb.breadcrumb-modern :deep(.breadcrumb-item) .text.is-link:hover {
+  --at-apply: bg-stone-2 dark:bg-stone-8;
+}
+
+.breadcrumb.breadcrumb-modern :deep(.breadcrumb-item):first-child .text {
+  --at-apply: pl-3;
+  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
+  border-radius: 6px 0 0 6px;
+}
+
+.breadcrumb.breadcrumb-modern :deep(.breadcrumb-item):last-child:not(:first-child) .text {
+  --at-apply: bg-stone-2 dark:bg-stone-8 pl-3;
+  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
+  border-radius: 0 6px 6px 0;
+}
+
+.breadcrumb.breadcrumb-modern :deep(.breadcrumb-item) .separator {
+  --at-apply: hidden;
 }
 
-// 面包屑动画
+/* 面包屑动画 */
 .breadcrumb-enter-active {
   transition: transform 0.3s, opacity 0.3s;
 }

package/src/layout/components/Topbar/index.vue

@@ -76,31 +76,28 @@ watch(scrollTop, (val, oldVal) => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .topbar-container {
-  position: absolute;
-  top: 0;
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
+  --at-apply: absolute top-0 z-100 flex flex-col;
   box-shadow: 0 1px 0 0 var(--g-border-color);
   transition: width 0.3s, top 0.3s, transform 0.3s, box-shadow 0.3s;
+}
 
-  &.topbar-fixed,
-  &.topbar-sticky {
-    position: fixed;
+.topbar-container.topbar-fixed,
+.topbar-container.topbar-sticky {
+  --at-apply: fixed;
+}
 
-    &.shadow {
-      box-shadow: 0 10px 10px -10px var(--g-box-shadow-color);
-    }
-  }
+.topbar-container.topbar-fixed.shadow,
+.topbar-container.topbar-sticky.shadow {
+  box-shadow: 0 10px 10px -10px var(--g-box-shadow-color);
+}
 
-  &.topbar-sticky.hide {
-    top: calc((var(--g-tabbar-height) + var(--g-toolbar-height)) * -1) !important;
-  }
+.topbar-container.topbar-sticky.hide {
+  top: calc((var(--g-tabbar-height) + var(--g-toolbar-height)) * -1) !important;
+}
 
-  &.switch-tabbar-toolbar {
-    flex-direction: column-reverse;
-  }
+.topbar-container.switch-tabbar-toolbar {
+  flex-direction: column-reverse;
 }
 </style>

package/src/layout/composables/useContext.ts

@@ -1,3 +1,4 @@
+import type { InjectionKey } from 'vue';
 import type {
   useFavoritesStore,
   useIframeStore,
@@ -8,7 +9,6 @@ import type {
   useTabbarStore,
   useUserStore,
 } from '@/stores';
-import type { InjectionKey } from 'vue';
 
 interface LayoutContext {
   settingsStore: ReturnType<typeof useSettingsStore>

package/src/layout/composables/useMenu.ts

@@ -1,6 +1,6 @@
 import type { Menu } from '#/menu';
-import { useMenuStore, useSettingsStore } from '@/stores';
 import { message } from 'ant-design-vue';
+import { useMenuStore, useSettingsStore } from '@/stores';
 
 /**
  * 用于管理菜单功能的自定义组合函数。

package/src/layout/composables/useTabbar.ts

@@ -1,6 +1,6 @@
 import type { RouteLocationRaw } from 'vue-router';
-import { useSettingsStore, useTabbarStore } from '@/stores';
 import Message from 'vue-m-message';
+import { useSettingsStore, useTabbarStore } from '@/stores';
 
 export default function useTabbar() {
   const route = useRoute();

package/src/layout/composables/useTitle.ts

@@ -1,5 +1,5 @@
-import { useSettingsStore } from '@/stores';
 import { useI18n } from 'vue-i18n';
+import { useSettingsStore } from '@/stores';
 
 export function useTitle(appTitle: string) {
   const settingsStore = useSettingsStore();

package/src/layout/provider.ts

@@ -1,3 +1,4 @@
+import { h } from 'vue';
 import { PubinfoProvider } from '@/components';
 import {
   useFavoritesStore,
@@ -9,7 +10,6 @@ import {
   useTabbarStore,
   useUserStore,
 } from '@/stores';
-import { h } from 'vue';
 import { createContext } from './composables/useContext';
 import { useTitle } from './composables/useTitle';
 

package/src/layout/ui-kit/HDialog.vue

@@ -4,7 +4,7 @@ import CarbonClose from '~icons/carbon/close';
 
 const props = withDefaults(
   defineProps<{
-    modelValue: boolean
+    modelValue?: boolean
     appear?: boolean
     title?: string
     preventClose?: boolean

package/src/layout/ui-kit/HDivider.vue

@@ -10,44 +10,15 @@ const props = defineProps<{
 
 <template>
   <div w-full>
-    <div class="divider">
-      <div class="divider-card">
+    <div
+      class="flex items-center justify-between gap-4 my-4 whitespace-nowrap text-sm font-500
+      before:content-empty before:w-full before:h-1px before:bg-stone-2 dark:before:bg-stone-6
+      after:content-empty after:w-full after:h-1px after:bg-stone-2 dark:after:bg-stone-6"
+    >
+      <div class="px-2.5 py-[5px]">
         {{ props.title }}
       </div>
     </div>
     <slot />
   </div>
 </template>
-
-<style scoped lang="scss">
-.divider {
-  --at-apply:
-    flex
-    items-center
-    justify-between
-    gap-4
-    my-4
-    whitespace-nowrap
-    text-sm
-    font-500;
-
-  &::before,
-  &::after {
-    --at-apply:
-      content-empty
-      w-full
-      h-1px
-      bg-stone-2
-      dark:bg-stone-6;
-  }
-
-  .divider-card {
-    padding: 5px 10px;
-
-    // --at-apply:
-    //   rounded-md
-    //   bg-#409EFF
-    //   dark:bg-blue;
-  }
-}
-</style>

package/src/layout/ui-kit/HSlideover.vue

@@ -5,7 +5,7 @@ import CarbonClose from '~icons/carbon/close';
 
 const props = withDefaults(
   defineProps<{
-    modelValue: boolean
+    modelValue?: boolean
     appear?: boolean
     side?: 'left' | 'right'
     title?: string

package/src/layout/ui-kit/HToggle.vue

@@ -28,97 +28,56 @@ const enabled = computed({
 <template>
   <label class="switch">
     <input v-model="enabled" type="checkbox">
-    <span />
+    <span class="bg-[#d6d3d1] dark:bg-stone-5" />
   </label>
 </template>
 
-<style scoped lang="scss">
-$greed: var(--ui-primary);
-
+<style scoped lang="css">
 .switch {
-  cursor: pointer;
-  transform: scale(0.75);
-
-  input {
-    display: none;
-
-    & + span {
-      position: relative;
-      display: block;
-      width: 48px;
-      height: 28px;
-      background: #d6d3d1;
-      border-radius: 14px;
-      transition: all 0.3s ease;
-
-      --at-apply: dark:bg-stone-5;
-
-      &::before,
-      &::after {
-        position: absolute;
-        display: block;
-        content: "";
-        transition: all 0.3s ease;
-      }
-
-      &::before {
-        top: 5px;
-        left: 5px;
-        width: 18px;
-        height: 18px;
-        border: 5px solid #fff;
-        border-radius: 9px;
-
-        --at-apply: dark:border-dark;
-      }
-
-      &::after {
-        top: 5px;
-        left: 32px;
-        width: 6px;
-        height: 18px;
-        background: #fff;
-        border-radius: 40%;
-        opacity: 0;
-        transform-origin: 50% 50%;
-
-        --at-apply: dark:bg-stone-7;
-      }
-
-      &:active {
-        transform: scale(0.92);
-      }
-    }
-
-    &:checked {
-      & + span {
-        background: rgb($greed);
-        box-shadow: 0 8px 16px -1px rgba($greed, 0.2);
-
-        &::before {
-          width: 0;
-          margin-left: 27px;
-          background: #fff;
-          border-width: 3px;
-          border-radius: 3px;
-
-          --at-apply: dark:bg-stone-7;
-        }
-
-        &::after {
-          animation: blob-checked  0.35s linear forwards 0.2s;
-        }
-      }
-    }
-
-    &:not(:checked) {
-      & + span {
-        &::before {
-          animation: blob 0.85s linear forwards 0.2s;
-        }
-      }
-    }
-  }
+  --at-apply: cursor-pointer scale-75;
+}
+
+.switch input {
+  --at-apply: hidden;
+}
+
+.switch input + span {
+  --at-apply: relative block w-12 h-7 rounded-14px transition-all duration-300 ease;
+}
+
+.switch input + span::before,
+.switch input + span::after {
+  --at-apply: absolute block content-empty transition-all duration-300 ease;
+}
+
+.switch input + span::before {
+  --at-apply: top-5px left-5px size-18px border-5px border-solid border-white dark:border-dark rounded-9px;
+}
+
+.switch input + span::after {
+  --at-apply: top-5px left-32px w-6px h-18px bg-white rounded-4/10 op-0 dark:bg-stone-7;
+  transform-origin: 50% 50%;
+}
+
+.switch input + span:active {
+  --at-apply: scale-92;
+}
+
+.switch input:checked + span {
+  --at-apply: bg-ui-primary;
+  box-shadow: 0 8px 16px -1px rgba(var(--ui-primary), 0.2);
+}
+
+.switch input:checked + span::before {
+  --at-apply: w-0 ml-27px bg-white dark:bg-stone-7 border-3px rounded-3px;
+}
+
+.switch input:checked + span::after {
+  animation: blob-checked 0.35s linear forwards 0.2s;
+}
+
+.switch input:not(:checked) + span::before {
+  animation: blob 0.85s linear forwards 0.2s;
 }
 
 @keyframes blob {
@@ -166,12 +125,9 @@ html {
   -webkit-font-smoothing: antialiased;
 }
 
-* {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
-
-  &::before,
-  &::after {
-    box-sizing: border-box;
-  }
 }
 </style>

package/src/layout/ui-kit/HTooltip.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 withDefaults(
   defineProps<{
-    text: string
+    text?: string
   }>(),
   {
     text: '',

package/src/locales/index.ts

@@ -1,7 +1,7 @@
 import type { App } from 'vue';
-import { useSettingsStore } from '@/stores';
 import { cloneDeep } from 'lodash-es';
 import { createI18n as _createI18n } from 'vue-i18n';
+import { useSettingsStore } from '@/stores';
 import _en from './lang/en.json';
 import _zhCN from './lang/zh-cn.json';
 import _zhTW from './lang/zh-tw.json';

package/src/pages/personal/profile/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { ProColumns } from '@pubinfo/pro-components';
-import { getRbacUserUserEntireInfo } from '@/api/modules/rbac';
 import { SchemaForm } from '@pubinfo/pro-components';
 import { isNil } from 'lodash-es';
+import { getRbacUserUserEntireInfo } from '@/api/modules/rbac';
 
 // TODO 解耦组件库
 

package/src/pages/system/[...all].vue

@@ -59,16 +59,14 @@ function goBack() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .allIcon {
   background: url("@/assets/icons/404.svg") no-repeat;
   background-size: 100% 100%;
 }
 
-[data-theme="dark"] {
-  .allIcon {
-    background: url("@/assets/icons/404_dark.svg") no-repeat;
-    background-size: 100% 100%;
-  }
+[data-theme="dark"] .allIcon {
+  background: url("@/assets/icons/404_dark.svg") no-repeat;
+  background-size: 100% 100%;
 }
 </style>

package/src/pages/system/change-organization/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { message } from 'ant-design-vue';
 import { PubinfoIcon } from '@/components';
 import { useUserStore } from '@/stores';
-import { message } from 'ant-design-vue';
 
 defineOptions({
   name: 'ChangeOrganization',
@@ -125,50 +125,36 @@ async function changeOrganization() {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .change-org {
-  width: 100%;
-  height: 100%;
+  --at-apply: size-full;
   background: url("@/assets/images/login-small.png") no-repeat 50%;
   background-size: cover;
+}
 
-  .org-item {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: 91px;
-    padding: 22px 32px;
-    margin-bottom: 15px;
-    overflow: hidden;
-    color: #86909c;
-    cursor: pointer;
-    background: #fff;
-    border: 1px solid #f2f3f5;
-    border-radius: 8px;
+.change-org .org-item {
+  --at-apply: box-border flex items-center justify-between w-full h-[91px]
+  overflow-hidden text-[#86909c] cursor-pointer border mb-[15px] px-8
+  py-[22px] rounded-lg border-solid border-[#f2f3f5];
+  background: #fff;
+}
 
-    &.active {
-      background-color: rgb(22 119 255 / 10%);
-      border-color: #1677ff;
-    }
-  }
+.change-org .org-item.active {
+  --at-apply: bg-[#1677FF] bg-op-10 border-[#1677ff];
 }
 
-[data-theme="dark"] {
-  .change-org {
-    background: url("@/assets/images/login-small_dark.webp") no-repeat 50%;
-    background-size: cover;
-  }
+[data-theme="dark"] .change-org {
+  background: url("@/assets/images/login-small_dark.webp") no-repeat 50%;
+  background-size: cover;
+}
 
-  .org-item {
-    background: #2c2c2c;
-    border: 1px solid #2c2c2c;
+[data-theme="dark"] .org-item {
+  background: #2c2c2c;
+  border: 1px solid #2c2c2c;
+}
 
-    &.active {
-      background: rgb(20 20 20 / 60%);
-      border-color: #1668dc;
-    }
-  }
+[data-theme="dark"] .org-item.active {
+  background: rgb(20 20 20 / 60%);
+  border-color: #1668dc;
 }
 </style>

package/src/pages/system/change-password/components/ChangePasswordForm/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { FormInstance, Rule } from 'ant-design-vue/es/form';
 import type { RouteParamValue } from 'vue-router';
-import { useUserStore } from '@/stores';
 import { message } from 'ant-design-vue';
 import { delay } from 'lodash-es';
+import { useUserStore } from '@/stores';
 
 defineOptions({
   name: 'ChangePasswordForm',