@pubinfo/core 2.0.0-beta.9 → 2.0.0-rc.2

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';
@@ -56,8 +56,10 @@ function createHomeBreadcrumb() {
   };
 }
 
+interface BreadcrumbItemNode { title: string, path: string, mainIndex?: number }
+
 const breadcrumbList = computed(() => {
-  const breadcrumbList: Array<{ title: string, path: string }> = [];
+  const breadcrumbList: BreadcrumbItemNode[] = [];
   if (settingsStore.settings.home.enable) {
     breadcrumbList.push(createHomeBreadcrumb());
   }
@@ -74,7 +76,8 @@ const breadcrumbList = computed(() => {
 
     if (menuStore.allMenus[index]?.meta) {
       breadcrumbList.push({
-        path: '',
+        path: `__MAIN__${index}`,
+        mainIndex: index,
         title: generateI18nTitle(menuStore.allMenus[index].meta?.i18n, menuStore.allMenus[index].meta?.title),
       });
     }
@@ -147,21 +150,40 @@ function recursiveTreeMap<T extends { children?: T[] }>(tree: T[], fn: (node: T)
  * 根据 path 字段读取树中的指定节点
  */
 function getCurrentBreadcrumb(path: string) {
+  if (path.startsWith('__MAIN__')) {
+    const idx = Number(path.replace('__MAIN__', ''));
+    const main = menuStore.allMenus[idx];
+    if (main) {
+      const mapNode = (r: any): any => ({
+        title: generateI18nTitle(r.meta?.i18n, r.meta?.title),
+        path: r.path,
+        children: (r.children || [])
+          .filter((c: any) => c.meta?.sidebar !== false)
+          .map((c: any) => mapNode(c)),
+      });
+      return {
+        title: generateI18nTitle(main.meta?.i18n, main.meta?.title),
+        path,
+        children: (main.children || [])
+          .filter(c => c.meta?.sidebar !== false)
+          .map(c => mapNode(c)),
+      };
+    }
+    return {};
+  }
+
   const fn = (node: Record<string, any>) => node.path === path;
   const list = [...breadcrumbTree.value];
   let currentNode;
-
   for (const node of list) {
     if (fn(node)) {
       currentNode = node;
       break;
     }
-
     if (node?.children) {
       list.push(...node.children);
     }
   }
-
   return currentNode ?? {};
 }
 
@@ -169,16 +191,16 @@ function getCurrentBreadcrumb(path: string) {
  * 点击面包屑的下拉树节点
  */
 function onSelect(node: RouteRecordRaw, index: number) {
-  if (!node.path || (index === (breadcrumbList.value.length - 1))) {
+  if (!node) {
     return;
   }
 
-  if (!node) {
+  if (index === (breadcrumbList.value.length - 1)) {
     return;
   }
 
-  if (!node?.children?.length) {
-    router.push(pathCompile(node?.path));
+  if (!node?.children?.length && node.path) {
+    router.push(pathCompile(node.path));
   }
 }
 </script>
@@ -192,7 +214,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"
@@ -218,7 +240,7 @@ function onSelect(node: RouteRecordRaw, index: number) {
           >
             <HDropdownTree
               :item="getCurrentBreadcrumb(item.path)"
-              :disabled="!item.path || (index === breadcrumbList.length - 1) || getCurrentBreadcrumb(item.path)?.children?.length === 1"
+              :disabled="(index === breadcrumbList.length - 1) || getCurrentBreadcrumb(item.path)?.children?.length <= 1"
               @select="onSelect($event, index)"
             >
               <span class="flex items-center gap-0.5">
@@ -238,64 +260,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/built-in/layout-component/composables/useGlobalSearch.ts

@@ -0,0 +1,48 @@
+import { ref } from 'vue';
+
+type SearchType = 'menu' | 'tab';
+
+const isShow = ref(false);
+const searchType = ref<SearchType>('menu');
+
+function open(type?: SearchType) {
+  if (type) {
+    searchType.value = type;
+  }
+  isShow.value = true;
+}
+
+function close() {
+  isShow.value = false;
+}
+
+function toggle(type?: SearchType) {
+  if (!isShow.value) {
+    if (type) {
+      searchType.value = type;
+    }
+    isShow.value = true;
+  }
+  else {
+    isShow.value = false;
+  }
+}
+
+/**
+ * 全局搜索服务
+ * 可以支持多处挂载，只需要使用 `useGlobalSearch` 开启即可
+ * 这样可以避免如果使用快捷键可能会多处开启 search 的问题
+ *
+ * close [#38](https://github.com/wsypower/pubinfo/issues/38)
+ */
+export function useGlobalSearch() {
+  return {
+    isShow,
+    searchType,
+    open,
+    close,
+    toggle,
+  };
+}
+
+export type { SearchType };

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;
     }