@pubinfo/core 2.0.0-beta.8 → 2.0.0-rc.1

package/src/{layout → built-in/layout-component}/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 '@/features/components';
 import { useContext } from '../../../composables/useContext';
 
 defineOptions({
@@ -102,7 +102,7 @@ watch(favoritesContainerRef, (newSortableContainer) => {
         py-6
         text-stone-5
       >
-        <PubinfoIcon name="favorites" :size="150" />
+        <img src="../../../assets/icons/favorites.svg" class="size-[150px]" alt="">
         <p
           v-show="favoritesStore.canAdd(route.fullPath, routeStore.routes)"
           m-0
@@ -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 → built-in/layout-component}/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 '@/features/components';
 import { useContext } from '../../../composables/useContext';
 import Breadcrumb from '../../Tools/Breadcrumb/index.vue';
 import BreadcrumbItem from '../../Tools/Breadcrumb/item.vue';
@@ -192,7 +192,7 @@ function onSelect(node: RouteRecordRaw, index: number) {
         :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }"
         @click="settingsStore.toggleSidebarCollapse()"
       >
-        <PubinfoIcon name="toolbar-collapse" class="icon" />
+        <img src="../../../assets/icons/toolbar-collapse.svg" class="size-[1em]" alt="">
       </div>
       <HDropdown
         v-if="settingsStore.mode === 'pc' && settingsStore.settings.favorites.enable"
@@ -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 → built-in/layout-component}/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/ui-kit → built-in/layout-component/components/ui}/HCheckList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PubinfoIcon } from '@/components';
+import { PubinfoIcon } from '@/features/components';
 
 const props = withDefaults(
   defineProps<{

package/src/{layout/ui-kit → built-in/layout-component/components/ui}/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/built-in/layout-component/components/ui/HDivider.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'HDivider',
+});
+
+const props = defineProps<{
+  title: string
+}>();
+</script>
+
+<template>
+  <div w-full>
+    <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>

package/src/{layout/ui-kit → built-in/layout-component/components/ui}/HDropdownMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PubinfoIcon } from '@/components';
+import { PubinfoIcon } from '@/features/components';
 
 const props = defineProps<{
   items: {

package/src/{layout/ui-kit → built-in/layout-component/components/ui}/HDropdownTree.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PubinfoIcon } from '@/components';
+import { PubinfoIcon } from '@/features/components';
 
 defineOptions({
   name: 'HDropdownTree',

package/src/{layout/ui-kit → built-in/layout-component/components/ui}/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/built-in/layout-component/components/ui/HToggle.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean
+    disabled?: boolean
+    onIcon?: string
+    offIcon?: string
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [boolean]
+}>();
+
+const enabled = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value) {
+    emit('update:modelValue', value);
+  },
+});
+</script>
+
+<template>
+  <label class="switch">
+    <input v-model="enabled" type="checkbox">
+    <span class="bg-[#d6d3d1] dark:bg-stone-5" />
+  </label>
+</template>
+
+<style scoped lang="css">
+.switch {
+  --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 {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  30% {
+    transform: scale(1.12, 0.94);
+  }
+
+  60% {
+    transform: scale(0.96, 1.06);
+  }
+}
+
+@keyframes blob-checked {
+  0% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+
+  30% {
+    transform: scaleX(1.44);
+  }
+
+  70% {
+    transform: scaleX(1.18);
+  }
+
+  50%,
+  99% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scaleX(1);
+  }
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+</style>

package/src/{layout/ui-kit → built-in/layout-component/components/ui}/HTooltip.vue

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

package/src/{layout → built-in/layout-component}/composables/useContext.ts

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

package/src/{layout → built-in/layout-component}/composables/useGetComputedStyle.ts

@@ -1,4 +1,4 @@
-import { useMenuStore, useSettingsStore } from '@/stores';
+import { useMenuStore, useSettingsStore } from '@/features/stores';
 
 /**
  * 获取指定元素的计算样式属性值

package/src/{layout → built-in/layout-component}/composables/useHotkey.ts

@@ -1,4 +1,4 @@
-import type { useMenuStore, useSettingsStore } from '@/stores';
+import type { useMenuStore, useSettingsStore } from '@/features/stores';
 import hotkeys from 'hotkeys-js';
 import useMainPage from './useMainPage';
 import useMenu from './useMenu';

package/src/{layout → built-in/layout-component}/composables/useMainPage.ts

@@ -1,4 +1,4 @@
-import { useSettingsStore, useTabbarStore } from '@/stores';
+import { useSettingsStore, useTabbarStore } from '@/features/stores';
 import useTabbar from './useTabbar';
 
 /**
@@ -23,7 +23,7 @@ export default function useMainPage() {
    */
   function reload() {
     router.push({
-      name: 'reload',
+      name: 'Reload',
     });
   }
 

package/src/{layout → built-in/layout-component}/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 '@/features/stores';
 
 /**
  * 用于管理菜单功能的自定义组合函数。

package/src/{layout → built-in/layout-component}/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 '@/features/stores';
 
 export default function useTabbar() {
   const route = useRoute();

package/src/{layout → built-in/layout-component}/composables/useTitle.ts

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

package/src/{layout → built-in/layout-component}/composables/useWatermark.ts

@@ -1,5 +1,5 @@
-import { useSettingsStore, useUserStore } from '@/stores';
-import { eventBus, watermark } from '@/utils';
+import { useSettingsStore, useUserStore } from '@/features/stores';
+import { eventBus, watermark } from '../utils';
 
 export default function useWatermark() {
   const settingsStore = useSettingsStore();
@@ -27,11 +27,11 @@ export default function useWatermark() {
     const type = settingsStore.settings.watermark.text;
     switch (type) {
       case 'U':
-        return `${userStore.account}`;
+        return `${userStore.user.account}`;
       case 'O':
         return `${userStore.userOrgName}`;
       case 'OU':
-        return `${userStore.userOrgName}  ${userStore.account}`;
+        return `${userStore.userOrgName}  ${userStore.user.account}`;
       default:
         return type;
     }

package/src/{layout → built-in/layout-component}/index.ts

@@ -1,5 +1,8 @@
 /* eslint-disable perfectionist/sort-imports */
 /* eslint-disable perfectionist/sort-named-exports */
+import type { ModuleOptions } from '@/core';
+import { defineSystemRoutes } from '@/features';
+
 import { Provider as LayoutProvider } from './provider';
 import Layout from './Layout.vue';
 import LayoutContent from './components/Content/index.vue';
@@ -16,28 +19,47 @@ import Copyright from './components/Copyright/index.vue';
 import SettingBar from './components/SettingBar/index.vue';
 import BackTop from './components/BackTop/index.vue';
 
-import type { App } from 'vue';
 import FloatingVue from 'floating-vue';
 import Message from 'vue-m-message';
 import 'vue-m-message/dist/style.css';
 import 'floating-vue/dist/style.css';
 
-export function setupLayout({ app }: { app: App }) {
-  app.use(Message);
-  app.use(FloatingVue, {
-    distance: 12,
-    themes: {
-      'more-appley': {
-        placement: 'bottom',
-      },
-      'not-cursor': {
-        placement: 'bottom',
-      },
-      'dropdown-tree': {
-        $extend: 'menu',
-      },
+/**
+ * 布局组件
+ */
+export function LayoutComponent(): ModuleOptions {
+  defineSystemRoutes([{
+    path: 'reload',
+    name: 'Reload',
+    component: () => import('./pages/reload/index.vue'),
+    meta: {
+      title: '重新加载',
+      breadcrumb: false,
+    },
+  }]);
+
+  return {
+    name: 'built-in:layout-component',
+    setup(ctx) {
+      const { app } = ctx;
+
+      app.use(Message);
+      app.use(FloatingVue, {
+        distance: 12,
+        themes: {
+          'more-appley': {
+            placement: 'bottom',
+          },
+          'not-cursor': {
+            placement: 'bottom',
+          },
+          'dropdown-tree': {
+            $extend: 'menu',
+          },
+        },
+      });
     },
-  });
+  };
 }
 
 export {

package/src/{layout → built-in/layout-component}/provider.ts

@@ -1,3 +1,5 @@
+import { h } from 'vue';
+import { PubinfoProvider } from '@/features/components';
 import {
   useFavoritesStore,
   useIframeStore,
@@ -7,7 +9,7 @@ import {
   useSettingsStore,
   useTabbarStore,
   useUserStore,
-} from '@/stores';
+} from '@/features/stores';
 import { createContext } from './composables/useContext';
 import { useTitle } from './composables/useTitle';
 
@@ -53,6 +55,10 @@ export const Provider = defineComponent({
       generateI18nTitle,
     });
 
-    return () => slots?.default?.();
+    return () => h(
+      PubinfoProvider,
+      {},
+      () => slots?.default?.(),
+    );
   },
 });

package/src/built-in/layout-component/utils/eventBus.ts

@@ -0,0 +1,8 @@
+// TODO 考虑优化掉
+import mitt from 'mitt';
+
+interface MittTypes {
+  [key: PropertyKey]: any
+}
+
+export const eventBus = mitt<MittTypes>();

package/src/built-in/layout-component/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './eventBus';
+export * from './injectionKeys';
+export * from './watermark';

package/src/{utils → built-in/layout-component/utils}/watermark.ts

@@ -46,7 +46,7 @@ interface settingsType {
   monitor?: boolean
 }
 
-export default function wmFn() {
+export function watermark() {
   const globalSetting: settingsType = {};
   const defaultSettings: Required<settingsType> = {
     id: 'wm_div_id',
@@ -68,7 +68,7 @@ export default function wmFn() {
     parent_width: 0,
     parent_height: 0,
     parent_node: null,
-    monitor: true,
+    monitor: false,
   };
   let forceRemove = false;
   const watermarkDom = new MutationObserver(domChangeCallback);