@pubinfo-pr/core 0.221.3 → 0.222.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pubinfo-pr/core",
   "type": "module",
-  "version": "0.221.3",
+  "version": "0.222.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -27,9 +27,9 @@
     "node": "^20.19.0 || >=22.12.0"
   },
   "peerDependencies": {
-    "@pubinfo-pr/config": "0.221.3",
-    "@pubinfo-pr/devtools": "0.221.3",
-    "@pubinfo-pr/vite": "0.221.3",
+    "@pubinfo-pr/config": "0.222.1",
+    "@pubinfo-pr/devtools": "0.222.1",
+    "@pubinfo-pr/vite": "0.222.1",
     "alova": "^3.5.0",
     "pinia": "^3.0.4",
     "vue": "^3.5.28",
@@ -42,7 +42,7 @@
     "@headlessui/vue": "^1.7.23",
     "@imengyu/vue3-context-menu": "^1.5.4",
     "@pubinfo/pro-components": "^1.8.2",
-    "@pubinfo-pr/shared": "0.221.3",
+    "@pubinfo-pr/shared": "0.222.1",
     "@unocss/reset": "^66.6.0",
     "@vueuse/core": "^14.2.1",
     "@vueuse/integrations": "^14.2.1",
@@ -69,10 +69,10 @@
     "@alova/mock": "^2.0.18",
     "@iconify/json": "^2.2.437",
     "@iconify/vue": "^5.0.0",
-    "@pubinfo-pr/config": "0.221.3",
+    "@pubinfo-pr/config": "0.222.1",
     "@pubinfo/openapi": "^0.9.1",
     "@pubinfo/preset-openapi": "^0.9.1",
-    "@pubinfo-pr/vite": "0.221.3",
+    "@pubinfo-pr/vite": "0.222.1",
     "@types/lodash-es": "^4.17.12",
     "@types/md5": "^2.3.6",
     "@types/nprogress": "^0.2.3",

package/src/built-in/authentication/pages/change-organization/index.vue

@@ -127,20 +127,37 @@ async function changeOrganization() {
 
 <style scoped>
 .change-org {
-  --at-apply: size-full;
+  width: 100%;
+  height: 100%;
   background: url("./assets/login-small.png") no-repeat 50%;
   background-size: cover;
 }
 
 .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];
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  width: 100%;
+  height: 91px;
+  overflow: hidden;
+  border-width: 1px;
+  margin-bottom: 15px;
+  padding-left: 2rem; /* 32px */
+  padding-right: 2rem; /* 32px */
+  padding-top: 22px;
+  padding-bottom: 22px;
+  border-radius: 0.5rem; /* 8px */
+  border-style: solid;
+  color: #86909c;
+  border-color: #f2f3f5;
   background: #fff;
 }
 
 .change-org .org-item.active {
-  --at-apply: bg-[#1677FF] bg-op-10 border-[#1677ff];
+  background-color: rgb(22 119 255 / 0.1) /* #1677FF */;
+  border-color: rgb(22 119 255);
 }
 
 [data-theme="dark"] .change-org {

package/src/built-in/authentication/pages/change-password/index.vue

@@ -60,14 +60,41 @@ const isValidate = ref(false);
 
 <style scoped>
 .password-bg {
-  --at-apply: box-border flex flex-col size-full p-[25px];
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 25px;
   background: url("./assets/login-small.png") no-repeat 50%;
   background-size: cover;
 }
 
 .change-password-form {
-  --at-apply: flex flex-col w-[560px] min-h-[680px] overflow-hidden backdrop-blur-[7.5px]
-  pt-16 pb-[34px] px-20 rounded-lg border-2 border-solid border-white;
+  display: flex;
+  flex-direction: column;
+  width: 560px;
+  min-height: 680px;
+  overflow: hidden;
+  --un-backdrop-blur: blur(7.5px);
+  -webkit-backdrop-filter: var(--un-backdrop-blur) var(--un-backdrop-brightness)
+    var(--un-backdrop-contrast) var(--un-backdrop-grayscale)
+    var(--un-backdrop-hue-rotate) var(--un-backdrop-invert)
+    var(--un-backdrop-opacity) var(--un-backdrop-saturate)
+    var(--un-backdrop-sepia);
+  backdrop-filter: var(--un-backdrop-blur) var(--un-backdrop-brightness)
+    var(--un-backdrop-contrast) var(--un-backdrop-grayscale)
+    var(--un-backdrop-hue-rotate) var(--un-backdrop-invert)
+    var(--un-backdrop-opacity) var(--un-backdrop-saturate)
+    var(--un-backdrop-sepia);
+  padding-top: 4rem; /* 64px */
+  padding-bottom: 34px;
+  padding-left: 5rem; /* 80px */
+  padding-right: 5rem; /* 80px */
+  border-radius: 0.5rem; /* 8px */
+  border-width: 2px;
+  border-style: solid;
+  border-color: rgb(255 255 255);
 
   box-shadow: 0 20px 50px rgb(29 42 165 / 5%);
   background: linear-gradient(180deg, hsl(0deg 0% 100% / 90%), hsl(0deg 0% 100% / 75%));

package/src/built-in/layout-component/Layout.vue

@@ -176,7 +176,7 @@ watch(scrollTop, (val, oldVal) => {
 
 <style scoped>
 [data-app-width-mode="adaption"] #app-main {
-  --at-apply: w-full;
+  width: 100%;
 }
 
 [data-app-width-mode="adaption-min-width"] #app-main {
@@ -184,7 +184,7 @@ watch(scrollTop, (val, oldVal) => {
 }
 
 [data-app-width-mode="center"] #app-main {
-  --at-apply: w-[--g-app-width];
+  width: var(--g-app-width);
 }
 
 [data-app-width-mode="center-max-width"] #app-main {
@@ -192,7 +192,7 @@ watch(scrollTop, (val, oldVal) => {
 }
 
 [data-mode="mobile"] #app-main {
-  --at-apply: w-full;
+  width: 100%;
 }
 
 [data-mode="mobile"] .sidebar-container {
@@ -216,53 +216,71 @@ watch(scrollTop, (val, oldVal) => {
 }
 
 .layout {
-  --at-apply: h-full;
+  height: 100%;
 }
 
 #app-main {
-  --at-apply: h-full bg-[--g-bg] mx-auto my-0;
+  height: 100%;
+  background-color: var(--g-bg) /* var(--g-bg) */;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 :deep(#app-main.main-page-maximize header),
 #app-main.main-page-maximize .sidebar-container {
-  --at-apply: hidden;
+  display: none;
 }
 
 #app-main.main-page-maximize .wrapper {
-  --at-apply: pt-0;
+  padding-top: 0;
 }
 
 #app-main.main-page-maximize .wrapper .main-container {
-  --at-apply: ml-0;
+  margin-left: 0;
 }
 
 #app-main.main-page-maximize .wrapper .main-container .topbar-container {
-  --at-apply: hidden;
+  display: none;
 }
 
 #app-main.main-page-maximize .wrapper .main-container .main {
-  --at-apply: m-0;
+  margin: 0;
 }
 
 #app-main.main-page-maximize :deep([data-fixed-calc-width]) {
-  --at-apply: w-full -translate-x-2/4;
+  width: 100%;
+  transform: translateX(-50%);
 }
 
 .wrapper {
-  --at-apply: relative w-full h-full;
+  position: relative;
+  width: 100%;
+  height: 100%;
   transition: padding-top 0.3s;
 }
 
 .wrapper .sidebar-container {
-  --at-apply: fixed top-0 bottom-0 z-501 flex;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 501;
+  display: flex;
   width: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
   box-shadow: -1px 0 0 0 var(--g-border-color), 1px 0 0 0 var(--g-border-color);
   transition: width 0.3s, transform 0.3s, box-shadow 0.3s, top 0.3s;
 }
 
 .wrapper .sidebar-mask {
-  --at-apply: fixed z-[500] w-full h-full invisible opacity-0 left-0 top-0;
-
+  position: fixed;
+  z-index: 500;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  opacity: 0;
+  left: 0;
+  top: 0;
   background-size: 4px 4px;
   backdrop-filter: saturate(50%) blur(4px);
   transition: all 0.2s;
@@ -270,33 +288,62 @@ watch(scrollTop, (val, oldVal) => {
 }
 
 .wrapper .sidebar-mask.show {
-  --at-apply: visible op-100;
+  visibility: visible;
+  opacity: 1;
 }
 
 .wrapper ::v-deep(.main-sidebar-container:not(.main-sidebar-leave-active) + .sub-sidebar-container) {
-  --at-apply: left-[--g-main-sidebar-width];
+  left: var(--g-main-sidebar-width);
 }
 
 .wrapper .main-container {
-  --at-apply: flex flex-col h-0 min-h-full;
+  display: flex;
+  flex-direction: column;
+  height: 0;
+  min-height: 100%;
   margin-left: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
   box-shadow: -1px 0 0 0 var(--g-border-color), 1px 0 0 0 var(--g-border-color);
   transition: margin-left 0.3s, background-color 0.3s, box-shadow 0.3s;
 }
 
 .wrapper .main-container .main {
-  --at-apply: relative flex-[auto] basis-0 h-0;
+  position: relative;
+  flex: auto;
+  flex-basis: 0;
+  height: 0;
   transition: 0.3s;
 }
 
 .wrapper .main-container .main .exit-main-page-maximize {
-  --at-apply: bg-stone-7 dark:bg-stone-3 text-stone-3 dark:text-stone-7
-  op-50 hover:op-100 transition-opacity fixed z-[1000] w-20 h-20 cursor-pointer
-  rounded-[50%] -right-10 -top-10;
+  & {
+    position: fixed;
+    cursor: pointer;
+    opacity: 0.5;
+    transition-property: opacity;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    z-index: 1000;
+    width: 5rem; /* 80px */
+    height: 5rem; /* 80px */
+    border-radius: 50%;
+    background-color: #44403c;
+    color: #d6d3d1;
+    right: -2.5rem; /* -40px */
+    top: -2.5rem; /* -40px */
+  }
+  &:hover {
+    opacity: 1;
+  }
+  .dark & {
+    background-color: #d6d3d1;
+    color: #44403c;
+  }
 }
 
 .wrapper .main-container .main .exit-main-page-maximize svg {
-  --at-apply: absolute bottom-4 left-4;
+  position: absolute;
+  bottom: 1rem; /* 16px */
+  left: 1rem; /* 16px */
 }
 
 .wrapper .main-container .topbar-container.has-tabbar + .main {
@@ -312,35 +359,39 @@ watch(scrollTop, (val, oldVal) => {
 }
 
 header:not(.header-leave-active) + .wrapper {
-  --at-apply: pt-[--g-header-height];
+  padding-top: var(--g-header-height);
 }
 
 header:not(.header-leave-active) + .wrapper .sidebar-container {
-  --at-apply: top-[--g-header-height];
+  top: var(--g-header-height);
 }
 
 header:not(.header-leave-active) + .wrapper .sidebar-container :deep(.sidebar-logo) {
-  --at-apply: hidden;
+  display: none;
 }
 
 header:not(.header-leave-active) + .wrapper .main-container .topbar-container {
-  --at-apply: top-[--g-header-height];
+  top: var(--g-header-height);
 }
 
 header:not(.header-leave-active) + .wrapper .main-container .topbar-container :deep(.tools) {
-  --at-apply: hidden;
+  display: none;
 }
 
 /* 顶部栏 */
 .topbar-container {
-  --at-apply: absolute top-0 z-100 flex flex-col;
+  position: absolute;
+  top: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
   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-container.topbar-fixed,
 .topbar-container.topbar-sticky {
-  --at-apply: fixed;
+  position: fixed;
 }
 
 .topbar-container.topbar-fixed.shadow,

package/src/built-in/layout-component/components/Copyright/index.vue

@@ -35,14 +35,40 @@ const { settingsStore } = useContext();
 
 <style scoped>
 .copyright {
-  --at-apply: flex items-center justify-center flex-wrap my-4 px-4 text-sm text-stone-5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 1rem; /* 16px */
+  margin-bottom: 1rem; /* 16px */
+  padding-left: 1rem; /* 16px */
+  padding-right: 1rem; /* 16px */
+  font-size: 0.875rem; /* 14px */
+  line-height: 1.25rem; /* 20px */
+  color: #78716c;
 }
 
 .copyright span,a {
-  --at-apply: px-1;
+  padding-left: 0.25rem; /* 4px */
+  padding-right: 0.25rem; /* 4px */
 }
 
 .copyright a {
-  --at-apply: text-center no-underline text-stone-5 hover:text-dark dark:hover:text-light transition;
+  & {
+  text-align: center;
+  text-decoration: none;
+  color: #78716c;
+  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;
+}
+&:hover {
+  color: #222222;
+}
+.dark &:hover {
+  color: #f6f6f6;
+}
 }
 </style>

package/src/built-in/layout-component/components/Header/HeaderFullMenu/More.vue

@@ -56,11 +56,13 @@ function menuClick(index: number, item: Menu.recordMainRaw) {
 
 <style scoped>
 .menu-more-container {
-  --at-apply: min-w-180px p-10px pb-0;
+  min-width: 180px;
+  padding: 10px;
+  padding-bottom: 0;
 }
 
 .menu-more-container .is-dev {
-  --at-apply: cursor-not-allowed;
+  cursor: not-allowed;
 }
 
 .menu-more-container .is-dev i {
@@ -74,22 +76,31 @@ function menuClick(index: number, item: Menu.recordMainRaw) {
 
 <style>
 .v-popper--theme-more-appley {
-  --at-apply: z-1000;
+  z-index: 1000;
   z-index: 1000;
 }
 
 .v-popper--theme-more-appley .v-popper__inner {
-  --at-apply: border border-white border-solid rounded-8px;
+  border-width: 1px;
+  border-color: white;
+  border-style: solid;
+  border-radius: 8px;
   background-image: linear-gradient(-43deg, #fff 0%, #eaf3ff 87%);
   box-shadow: 8px 16px 28px -8px #8195b74f;
 }
 
 .v-popper--theme-more-appley .v-popper__arrow-container {
-  --at-apply: hidden;
+  display: none;
 }
 
 .dark .v-popper--theme-more-appley .v-popper__inner {
-  --at-apply: border border-#4b4f53 border-solid rounded-8px shadow-[none];
+  border-width: 1px;
+  border-color: #4b4f53;
+  border-style: solid;
+  border-radius: 8px;
+  --un-shadow: none;
+  box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
+    var(--un-shadow);
   background-image: linear-gradient(-43deg, #141414 0%, #141414 87%);
 }
 </style>

package/src/built-in/layout-component/components/Header/HeaderFullMenu/NotCursor.vue

@@ -38,33 +38,44 @@ withDefaults(defineProps<{
 
 <style scoped>
 .not-cursor-container {
---at-apply: size-full;
+  width: 100%;
+  height: 100%;
 }
 </style>
 
 <style>
 .v-popper--theme-not-cursor {
-  --at-apply: z-1000;
+  z-index: 1000;
 }
 
 .v-popper--theme-not-cursor .v-popper__inner {
-  --at-apply: w-228px h-123px border border-solid border-white rounded-md;
-
+  width: 228px;
+  height: 123px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgb(255 255 255 / 1);
+  border-radius: 0.375rem; /* 6px */
   background-image: linear-gradient(-55deg, #fff 0%, #eaf3ff 87%);
   box-shadow: 4px 8px 14px -4px #8195b74f;
 }
 
 .v-popper--theme-not-cursor .v-popper__inner > div {
-  --at-apply: size-full;
+  width: 100%;
+  height: 100%;
 }
 
 .v-popper--theme-not-cursor .v-popper__arrow-container {
-  --at-apply: hidden;
   display: none;
 }
 
 .dark .v-popper--theme-not-cursor .v-popper__inner {
-  --at-apply: shadow-[none] rounded-8px border border-solid border-[#4b4f53];
+  --un-shadow: none;
+  box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
+    var(--un-shadow);
+  border-radius: 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #4b4f53;
   background-image: linear-gradient(-43deg, #141414 0%, #141414 87%);
 }
 </style>

package/src/built-in/layout-component/components/Header/HeaderMenu.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { useContext } from '../../composables/useContext';
+import HeaderFullMenu from './HeaderFullMenu/index.vue';
+import HeaderThinMenu from './HeaderThinMenu.vue';
 
 defineOptions({
   name: 'LayoutHeaderMenu',
 });
 
-const HeaderFullMenu = defineAsyncComponent(() => import('./HeaderFullMenu/index.vue'));
-const HeaderThinMenu = defineAsyncComponent(() => import('./HeaderThinMenu.vue'));
-
 const { settingsStore } = useContext();
 </script>