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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pubinfo/core",
   "type": "module",
-  "version": "2.0.0-beta.31",
+  "version": "2.0.0-beta.32",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -23,45 +23,45 @@
     "types"
   ],
   "peerDependencies": {
-    "alova": "^3.2.13",
-    "pinia": "^2.3.1",
-    "vue": "^3.5.16",
+    "alova": "^3.3.4",
+    "pinia": "^3.0.3",
+    "vue": "^3.5.17",
     "vue-i18n": "^10.0.7",
     "vue-router": "^4.5.1",
-    "@pubinfo/config": "2.0.0-beta.31"
+    "@pubinfo/config": "2.0.0-beta.32"
   },
   "dependencies": {
-    "@alova/adapter-axios": "^2.0.14",
+    "@alova/adapter-axios": "^2.0.16",
     "@ant-design/icons-vue": "^7.0.1",
     "@headlessui/vue": "^1.7.23",
-    "@imengyu/vue3-context-menu": "^1.5.0",
+    "@imengyu/vue3-context-menu": "^1.5.1",
     "@pubinfo/pro-components": "^1.7.1",
     "@unocss/reset": "^65.5.0",
-    "@vueuse/core": "^13.3.0",
-    "@vueuse/integrations": "^13.3.0",
+    "@vueuse/core": "^13.5.0",
+    "@vueuse/integrations": "^13.5.0",
     "ant-design-vue": "^4.2.6",
-    "axios": "^1.9.0",
+    "axios": "^1.10.0",
     "consola": "^3.4.2",
     "floating-vue": "5.2.2",
     "hookable": "^5.5.3",
-    "hotkeys-js": "^3.13.10",
+    "hotkeys-js": "^3.13.14",
     "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
     "md5": "^2.3.0",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
-    "overlayscrollbars": "^2.11.3",
+    "overlayscrollbars": "^2.11.4",
     "overlayscrollbars-vue": "^0.5.9",
     "path-browserify": "^1.0.1",
-    "path-to-regexp": "^6.3.0",
-    "pinia-plugin-persistedstate": "^3.2.3",
+    "path-to-regexp": "^8.2.0",
+    "pinia-plugin-persistedstate": "^4.4.1",
     "sortablejs": "^1.15.6",
     "vue-m-message": "^4.0.2",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.343",
-    "@iconify/vue": "^4.3.0",
+    "@iconify/json": "^2.2.354",
+    "@iconify/vue": "^5.0.0",
     "@pubinfo/openapi": "^0.8.4",
     "@pubinfo/preset-openapi": "^0.8.4",
     "@types/lodash-es": "^4.17.12",
@@ -70,22 +70,21 @@
     "@types/path-browserify": "^1.0.3",
     "@types/sortablejs": "^1.15.8",
     "@types/zxcvbn": "^4.4.5",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "@vitejs/plugin-vue-jsx": "^4.2.0",
-    "alova": "^3.2.13",
-    "pinia": "^2.3.1",
-    "sass": "1.83.0",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vitejs/plugin-vue-jsx": "^5.0.1",
+    "alova": "^3.3.4",
+    "pinia": "^3.0.3",
     "type-fest": "^4.41.0",
     "unocss": "^65.5.0",
-    "unplugin-auto-import": "^0.18.6",
-    "unplugin-icons": "^0.22.0",
-    "unplugin-vue-components": "^0.27.5",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-icons": "^22.1.0",
+    "unplugin-vue-components": "^28.8.0",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
-    "vue": "^3.5.16",
+    "vue": "^3.5.17",
     "vue-i18n": "^10.0.7",
     "vue-router": "^4.5.1",
-    "@pubinfo/config": "2.0.0-beta.31"
+    "@pubinfo/config": "2.0.0-beta.32"
   },
   "scripts": {
     "dev": "vite build -w -m watch",

package/src/assets/styles/globals.css

@@ -0,0 +1,188 @@
+/* 页面布局 CSS 变量 */
+:root {
+  /* 这是一个复合变量
+     当页宽模式为 adaption-min-width 时，它代表 最小宽度
+     当页宽模式为 center 时，它代表 固定宽度
+     当页宽模式为 center-max-width 时，它代表 最大宽度 */
+  --g-app-width: 1400px;
+
+  /* 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示） */
+  --g-header-width: 100%;
+
+  /* 头部高度 */
+  --g-header-height: 56px;
+
+  /* 侧边栏宽度 */
+  --g-main-sidebar-width: 63px;
+  --g-sub-sidebar-width: 220px;
+  --g-sub-sidebar-collapse-width: 64px;
+
+  /* 侧边栏 Logo 区域高度 */
+  --g-sidebar-logo-height: 50px;
+
+  /* 标签栏高度 */
+  --g-tabbar-height: 48px;
+
+  /* 工具栏高度 */
+  --g-toolbar-height: 45px;
+
+  /* 标签页最大最小宽度，两个宽度为同一数值时，则为固定宽度，反之将宽度设置为 unset 则为自适应 */
+  --g-tabbar-tab-max-width: 150px;
+  --g-tabbar-tab-min-width: 150px;
+}
+
+/* 明暗模式 CSS 变量 */
+:root {
+  color-scheme: light;
+  --g-box-shadow-color: rgba(0, 0, 0, 0.12);
+}
+
+:root::view-transition-old(root),
+:root::view-transition-new(root) {
+  mix-blend-mode: normal;
+  animation: none;
+}
+
+:root::view-transition-old(root) {
+  z-index: 1;
+}
+
+:root::view-transition-new(root) {
+  z-index: 9999;
+}
+
+:root.dark {
+  color-scheme: dark;
+  --g-box-shadow-color: rgba(0, 0, 0, 0.72);
+}
+
+:root.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+
+:root.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.4);
+  background-clip: padding-box;
+  border: 3px solid transparent;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
+  background-color: var(--g-container-bg);
+  -webkit-tap-highlight-color: transparent;
+}
+
+body.overflow-hidden {
+  overflow: hidden;
+}
+
+* {
+  box-sizing: inherit;
+}
+
+/* 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width] */
+[data-fixed-calc-width] {
+  position: fixed;
+  right: 0;
+  left: 50%;
+}
+
+[data-app-width-mode="adaption"] [data-fixed-calc-width],
+[data-app-width-mode="adaption-min-width"] [data-fixed-calc-width] {
+  width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
+  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+}
+
+[data-app-width-mode="center"] [data-fixed-calc-width],
+[data-app-width-mode="center-max-width"] [data-fixed-calc-width] {
+  width: calc(var(--g-app-width) - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
+  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+}
+
+[data-mode="mobile"] [data-fixed-calc-width] {
+  width: 100% !important;
+  transform: translateX(-50%) !important;
+}
+
+/* textarea 字体跟随系统 */
+textarea {
+  font-family: inherit;
+}
+
+/* Overrides Floating Vue */
+.v-popper--theme-dropdown,
+.v-popper--theme-tooltip {
+  display: inline-flex;
+}
+
+.v-popper--theme-dropdown .v-popper__inner,
+.v-popper--theme-tooltip .v-popper__inner {
+  background-color: white;
+  color: #1a1a1a;
+  border-radius: 6px;
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(120, 113, 108, 0.2);
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.dark .v-popper--theme-dropdown .v-popper__inner,
+.dark .v-popper--theme-tooltip .v-popper__inner {
+  background-color: #1c1c1e;
+  color: white;
+}
+
+.v-popper--theme-tooltip .v-popper__arrow-inner,
+.v-popper--theme-dropdown .v-popper__arrow-inner {
+  border-color: white;
+}
+
+.dark .v-popper--theme-tooltip .v-popper__arrow-inner,
+.dark .v-popper--theme-dropdown .v-popper__arrow-inner {
+  border-color: #2c2c2e;
+}
+
+.v-popper--theme-tooltip .v-popper__arrow-outer,
+.v-popper--theme-dropdown .v-popper__arrow-outer {
+  border-color: rgba(120, 113, 108, 0.2);
+}
+
+.v-popper--theme-tooltip.v-popper--shown,
+.v-popper--theme-tooltip.v-popper--shown * {
+  transition: none !important;
+}
+
+[data-overlayscrollbars-contents] {
+  overscroll-behavior: contain;
+}
+
+/* medium-zoom */
+.medium-zoom-overlay,
+.medium-zoom-image {
+  z-index: 3000;
+}

package/src/assets/styles/index.ts

@@ -1,6 +1,6 @@
 import '@unocss/reset/normalize.css';
 import 'overlayscrollbars/overlayscrollbars.css';
-import './globals.scss';
-import './nprogress.scss';
-import './rbac.scss';
+import './globals.css';
+import './nprogress.css';
+import './rbac.css';
 import 'virtual:uno.css';

package/src/assets/styles/nprogress.css

@@ -0,0 +1,68 @@
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1031;
+  width: 100%;
+  height: 2px;
+  background: rgb(var(--ui-primary));
+}
+
+#nprogress .peg {
+  position: absolute;
+  right: 0;
+  display: block;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px rgb(var(--ui-primary)), 0 0 5px rgb(var(--ui-primary));
+  opacity: 1;
+  -webkit-transform: rotate(3deg) translate(0, -4px);
+  -moz-transform: rotate(3deg) translate(0, -4px);
+  -ms-transform: rotate(3deg) translate(0, -4px);
+  transform: rotate(3deg) translate(0, -4px);
+}
+
+#nprogress .spinner {
+  position: fixed;
+  top: 11px;
+  right: 14px;
+  z-index: 1031;
+  display: block;
+}
+
+#nprogress .spinner .spinner-icon {
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  border: solid 2px transparent;
+  border-top-color: rgb(var(--ui-primary));
+  border-left-color: rgb(var(--ui-primary));
+  border-radius: 50%;
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  -moz-animation: nprogress-spinner 400ms linear infinite;
+  -ms-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  position: relative;
+  overflow: hidden;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/assets/styles/rbac.css

@@ -0,0 +1,51 @@
+[data-theme="classic"] #app-main {
+  background-image: url("@/assets/images/slider-bg.png");
+  background-repeat: no-repeat;
+  background-position: left bottom;
+  background-size: 450px 89%;
+}
+
+[data-theme="classic"] #app-main .sub-sidebar-container {
+  background-color: transparent;
+}
+
+[data-theme="classic"] #app-main > header {
+  background-image: url("@/assets/images/header-bg.png");
+  background-repeat: no-repeat;
+  background-position: left bottom;
+  background-size: cover;
+}
+
+[data-theme="classic"] #app-main > header .menu {
+  background-color: transparent !important;
+}
+
+[data-theme="classic"] #app-main > header .header-container .tools > span {
+  background-color: #4173f9;
+}
+
+[data-theme="classic"] #app-main .page-container {
+  padding-left: 0;
+}
+
+[data-theme="classic"] .wrapper .sidebar-container {
+  box-shadow: none !important;
+}
+
+[data-theme="classic"] .wrapper .main-container {
+  box-shadow: none !important;
+}
+
+/* FIXME: Over rides @pubinfo/pro-components */
+.pro-table .ant-form-item {
+  margin-bottom: 16px;
+}
+
+.pro-table .ant-card .ant-card-body {
+  padding: 16px;
+}
+
+.pro-table .ant-card .ant-card-head {
+  min-height: 48px;
+  padding: 0 16px;
+}

package/src/assets/styles/resources/utils.css

@@ -0,0 +1,53 @@
+/* 单行超出隐藏固定宽度 */
+.text-overflow-singleline {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 多行超出隐藏，例如两行 */
+.text-overflow-multiline {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+}
+
+/* 定位居中 - 水平居中 */
+.position-center-x {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* 定位居中 - 垂直居中 */
+.position-center-y {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* 定位居中 - 水平垂直居中 */
+.position-center-xy {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+/* 文字两端对齐 */
+.justify-align {
+  text-align: justify;
+  text-align-last: justify;
+}
+
+/* 清除浮动 */
+.clearfix {
+  zoom: 1;
+}
+.clearfix::before,
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: "";
+}

package/src/assets/styles/resources/variables.css

@@ -0,0 +1,5 @@
+/* 全局变量 */
+:root {
+  --g-app-width: 1400px;
+  --g-header-width: 100%;
+}

package/src/components/NotAllowed/index.vue

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

package/src/components/PassStrengthValidator/index.vue

@@ -152,61 +152,46 @@ watchEffect(() => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .pass-strength-validator {
-  padding: 15px;
-
-  .title-wrap {
-    margin-bottom: 40px;
-    font-size: 24px;
-    font-weight: 600;
-    color: #1677ff;
-  }
-
-  .rules-title {
-    margin-bottom: 15px;
-    font-size: 16px;
-    font-weight: 500;
-  }
-
-  &.vertical {
-    width: 1130px;
-    padding: 18px 32px 24px;
-
-    .title-wrap {
-      margin-bottom: 16px;
-      font-size: 16px;
-    }
+  --at-apply: p-15px;
+}
 
-    .rules-wrap {
-      display: flex;
-    }
+.pass-strength-validator .title-wrap {
+  --at-apply: text-2xl font-semibold text-[#1677ff] mb-10;
+}
 
-    .basic-rules,
-    .advanced-rules {
-      position: relative;
-      flex: 1;
-    }
+.pass-strength-validator .rules-title {
+  --at-apply: text-base font-medium mb-[15px];
+}
 
-    .basic-rules::after {
-      position: absolute;
-      top: 11px;
-      right: 35px;
-      bottom: 11px;
-      width: 1px;
-      height: auto;
-      content: "";
-      background: #e5e6eb;
-    }
+.pass-strength-validator.vertical {
+  --at-apply: w-[1130px] pt-[18px] pb-6 px-8;
+}
+.pass-strength-validator.vertical .title-wrap {
+  --at-apply: text-base mb-4;
+}
+.pass-strength-validator.vertical .rules-wrap {
+  --at-apply: flex;
+}
+.pass-strength-validator.vertical .basic-rules,
+.pass-strength-validator.vertical .advanced-rules {
+  --at-apply: relative flex-1;
+}
+.pass-strength-validator.vertical .basic-rules::after {
+  --at-apply: absolute w-px h-auto content-[""] right-[35px] inset-y-[11px];
+  background: #e5e6eb;
+}
+.pass-strength-validator.vertical .rules-title {
+  --at-apply: text-sm font-[bold] mb-3.5;
+}
 
-    .rules-title {
-      margin-bottom: 14px;
-      font-size: 14px;
-      font-weight: bold;
-    }
-  }
+/* 样式穿透，用于覆盖 ant-design-vue 组件样式 */
+.pass-strength-validator :deep(.ant-divider) {
+  --at-apply: mx-0 my-4;
 }
 
+/* 暗色主题支持 */
 .dark .pass-strength-validator.vertical .basic-rules::after {
   background: #424242;
 }

package/src/components/PassStrengthValidator/rule.vue

@@ -23,29 +23,17 @@ const props = defineProps<{
   </div>
 </template>
 
-<style scoped lang="scss">
-  .rule-item {
-    display: flex;
-    flex-direction: row;
-    padding: 10px 0;
-    font-size: 14px;
-    line-height: 19px;
-
-    .icon {
-      margin-right: 10px;
-      line-height: 23px;
-    }
-
-    &.vertical {
-      padding: 0;
-      margin-bottom: 6px;
-      line-height: 18px;
-      color: #86909c;
-
-      .icon {
-        margin-right: 6px;
-        line-height: 18px;
-      }
-    }
-  }
+<style scoped>
+.rule-item {
+  --at-apply: flex flex-row text-sm leading-[19px] px-0 py-2.5;
+}
+.rule-item .icon {
+  --at-apply: leading-[23px] mr-2.5;
+}
+.rule-item.vertical {
+  --at-apply: leading-[18px] text-[#86909c] mb-1.5 p-0;
+}
+.rule-item.vertical .icon {
+  --at-apply: leading-[18px] mr-1.5;
+}
 </style>

package/src/components/PubinfoIcon/index.vue

@@ -69,19 +69,15 @@ const style = computed(() => {
   };
 });
 
-function _loadIcon() {
-  if (!loadIcon && outputType.value === 'custom') {
-    return new Error('Need pro `loadIcon`, according to [PubinfoProvider].');
-  }
-
+const icon = computed(() => {
   return loadIcon?.(props.name) ?? iconRegistry.get(props.name);
-}
+});
 </script>
 
 <template>
-  <i class="relative h-[1em] w-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :style="style">
+  <i class="relative size-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :style="style">
     <i v-if="outputType === 'css'" :class="outputName" />
     <Icon v-else-if="outputType === 'svg'" :icon="outputName" />
-    <img v-else-if="loadIcon" class="w-1em h-1em" :src="_loadIcon()">
+    <img v-else-if="icon" class="size-1em" :src="icon">
   </i>
 </template>

package/src/composables/watchDiff.ts

@@ -35,7 +35,7 @@ export function watchDiffObject<
 ) {
   let oldValue: Record<string, any> = options?.immediate
     ? {}
-    : cloneDeep(source instanceof Function
+    : cloneDeep(typeof source === 'function'
         ? source()
         : source,
       );