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

package/src/components/PubinfoIcon/index.vue

@@ -1,85 +0,0 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue';
-import { useProvider } from '../PubinfoProvider';
-
-defineOptions({
-  name: 'PubinfoIcon',
-});
-
-const props = defineProps<{
-  name: string
-  async?: boolean
-  flip?: 'horizontal' | 'vertical' | 'both'
-  rotate?: number
-  color?: string
-  size?: string | number
-}>();
-
-const { loadIcon } = useProvider();
-
-const outputType = computed(() => {
-  if (props.name.indexOf('i-') === 0) {
-    return props.async ? 'svg' : 'css';
-  }
-  else if (props.name.includes(':')) {
-    return 'svg';
-  }
-  else {
-    return 'custom';
-  }
-});
-
-const outputName = computed(() => {
-  if (props.name.indexOf('i-') === 0) {
-    let conversionName = props.name;
-    if (props.async) {
-      conversionName = conversionName.replace('i-', '');
-    }
-    return conversionName;
-  }
-  else {
-    return props.name;
-  }
-});
-
-const style = computed(() => {
-  const transform: string[] = [];
-  if (props.flip) {
-    switch (props.flip) {
-      case 'horizontal':
-        transform.push('rotateY(180deg)');
-        break;
-      case 'vertical':
-        transform.push('rotateX(180deg)');
-        break;
-      case 'both':
-        transform.push('rotateX(180deg)');
-        transform.push('rotateY(180deg)');
-        break;
-    }
-  }
-  if (props.rotate) {
-    transform.push(`rotate(${props.rotate % 360}deg)`);
-  }
-  return {
-    ...(props.color && { color: props.color }),
-    ...(props.size && { fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size }),
-    ...(transform.length && { transform: transform.join(' ') }),
-  };
-});
-
-function _loadIcon() {
-  if (!loadIcon && outputType.value === 'custom') {
-    return new Error('Need pro `loadIcon`, according to [PubinfoProvider].');
-  }
-  return loadIcon?.(props.name);
-}
-</script>
-
-<template>
-  <i class="relative h-[1em] w-[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()">
-  </i>
-</template>

package/src/config/index.ts

@@ -1 +0,0 @@
-export * from './settings';

package/src/context.ts

@@ -1,30 +0,0 @@
-import type { Context } from './interface';
-import { createHooks } from 'hookable';
-import { auth, basic } from 'pubinfo:project/api/request';
-import layout from 'pubinfo:project/layouts/index.vue';
-
-export const hooks = createHooks();
-
-let context: Context | undefined;
-
-export function createPubinfoContext(newState: Context) {
-  context = newState;
-}
-
-export function usePubinfoContext() {
-  if (!context) {
-    throw new Error('Global context is not defined');
-  }
-
-  return context;
-}
-
-/**
- * 读取项目中的约定式目录
- */
-export function readProject() {
-  return {
-    layout,
-    request: { auth, basic },
-  };
-}

package/src/create.ts

@@ -1,88 +0,0 @@
-import type { Component } from 'vue';
-import type { Context, Options, RouterOptions } from './interface';
-import { createPinia } from 'pinia';
-import { createApp as createVueApp } from 'vue';
-import { createRouter, createWebHashHistory } from 'vue-router';
-
-import { GetAPIValidateIp } from './api/system/app';
-
-import { createPubinfoContext, hooks } from './context';
-import { setupDirectives } from './directives';
-import { setupLayout } from './layout';
-import { setupI18n } from './locales';
-import { extractModules, resolveModules } from './modules';
-import { constantRoutes, setupRouterGuard } from './route';
-import { setupStore } from './stores';
-
-export function createPubinfo(
-  App: Component,
-  routerOptions: RouterOptions,
-  setup?: (context: Context) => Promise<void> | void,
-  options: Options = {},
-) {
-  const {
-    rootContainer = '#app',
-    immediate = true,
-    modules = [],
-    hooks: _hooks = {},
-  } = options;
-
-  async function createApp() {
-    const app = createVueApp(App);
-    const store = createPinia();
-
-    const { routes, base, ...restRouterOptions } = routerOptions;
-    const router = createRouter({
-      history: createWebHashHistory(base),
-      ...restRouterOptions,
-      routes: [
-        ...constantRoutes,
-        ...routes,
-      ],
-    });
-
-    const context: Context = {
-      app,
-      store,
-      router,
-    };
-
-    app.use(store);
-    app.use(router);
-
-    // create context
-    createPubinfoContext(context);
-
-    // add hooks
-    hooks.addHooks(_hooks);
-
-    // extract modules by enforce
-    const _modules = extractModules(modules);
-
-    await resolveModules(_modules.pre, context);
-    setupBasic(context);
-    await resolveModules(_modules.default, context);
-    await setup?.(context);
-    await resolveModules(_modules.post, context);
-    return context;
-  }
-
-  if (immediate) {
-    (async () => {
-      const { app, router } = await createApp();
-      await router.isReady();
-      await GetAPIValidateIp();
-      app.mount(rootContainer, true);
-    })();
-  }
-
-  return createApp;
-}
-
-function setupBasic(context: Context) {
-  setupStore(context);
-  setupRouterGuard(context);
-  setupDirectives(context);
-  setupLayout(context);
-  setupI18n(context);
-}

package/src/directives/index.ts

@@ -1,6 +0,0 @@
-import type { App } from 'vue';
-import { setupPermissionDirective } from './plugins/permission';
-
-export function setupDirectives({ app }: { app: App }) {
-  setupPermissionDirective(app);
-}

package/src/interface.ts

@@ -1,35 +0,0 @@
-import type { Pinia } from 'pinia';
-import type { App } from 'vue';
-import type { Router, RouterOptions as VueRouterOptions } from 'vue-router';
-
-type PartialKeys<T, Keys extends keyof T> = Omit<T, Keys> & Partial<Pick<T, Keys>>;
-
-export type RouterOptions = PartialKeys<VueRouterOptions, 'history'> & { base?: string };
-
-export interface Context {
-  app: App<Element>
-  store: Pinia
-  router: Router
-}
-
-export interface Options {
-  rootContainer?: string | Element
-  immediate?: boolean
-  modules?: ModuleOptions[]
-  hooks?: Partial<Hooks>
-}
-
-export interface Module {
-  name: string
-  setup?: (ctx: Context) => void
-  enforce?: 'pre' | 'post'
-  hooks?: Partial<Hooks>
-}
-
-export type FalsyModule = false | null | undefined;
-
-export type ModuleOptions = Module | ModuleOptions[] | FalsyModule;
-
-export interface Hooks {
-
-}

package/src/layout/Layout.vue

@@ -1,330 +0,0 @@
-<script setup lang="ts">
-import { PubinfoProvider } from '@/components';
-import RiLogoutBoxLine from '~icons/ri/logout-box-line';
-import BackTop from './components/BackTop/index.vue';
-import LayoutContent from './components/Content/index.vue';
-import Copyright from './components/Copyright/index.vue';
-import LayoutHeader from './components/Header/index.vue';
-
-import SettingBar from './components/SettingBar/index.vue';
-// import Sidebar from './components/Sidebar/index.vue';
-import MainSidebar from './components/Sidebar/MainSidebar.vue';
-import SubSidebar from './components/Sidebar/SubSidebar.vue';
-import Topbar from './components/Topbar/index.vue';
-import { useContext } from './composables/useContext';
-import { useGetSidebarActualWidth } from './composables/useGetComputedStyle';
-import { useHotkey } from './composables/useHotkey';
-import useWatermark from './composables/useWatermark';
-
-defineOptions({
-  name: 'Layout',
-});
-
-const routeInfo = useRoute();
-const { settingsStore, menuStore } = useContext();
-const { mainSidebarActualWidth, subSidebarActualWidth } = useGetSidebarActualWidth();
-
-useHotkey({
-  settingsStore,
-  menuStore,
-});
-
-useWatermark();
-
-watch(() => settingsStore.settings.menu.subMenuCollapse, (val) => {
-  if (settingsStore.mode === 'mobile') {
-    if (!val) {
-      document.body.classList.add('overflow-hidden');
-    }
-    else {
-      document.body.classList.remove('overflow-hidden');
-    }
-  }
-});
-
-watch(() => routeInfo.path, () => {
-  if (settingsStore.mode === 'mobile') {
-    settingsStore.$patch((state) => {
-      state.settings.menu.subMenuCollapse = true;
-    });
-  }
-});
-
-function loadIcon(name: string) {
-  const modules = (import.meta as any).glob('../assets/icons/*', { eager: true });
-  const path = `../assets/icons/${name}.svg`;
-  return modules[path]?.default;
-}
-</script>
-
-<template>
-  <PubinfoProvider :load-icon="loadIcon">
-    <div
-      class="layout"
-      :style="{
-        '--g-main-sidebar-actual-width': mainSidebarActualWidth,
-        '--g-sub-sidebar-actual-width': subSidebarActualWidth,
-      }"
-    >
-      <div id="app-main" :class="{ 'main-page-maximize': settingsStore.mainPageMaximizeStatus }">
-        <slot name="header">
-          <LayoutHeader />
-        </slot>
-
-        <div class="wrapper">
-          <div
-            class="sidebar-container"
-            :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.settings.menu.subMenuCollapse }"
-          >
-            <!-- TODO 这种写法会导致侧边栏模式的布局下，有样式问题 -->
-            <!-- <slot name="sidebar">
-              <Sidebar />
-            </slot> -->
-
-            <MainSidebar />
-            <SubSidebar />
-          </div>
-
-          <div
-            class="sidebar-mask"
-            :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.settings.menu.subMenuCollapse }"
-            @click="settingsStore.toggleSidebarCollapse()"
-          />
-
-          <div class="main-container" :style="{ 'padding-bottom': routeInfo.meta.paddingBottom }">
-            <slot name="topbar">
-              <Topbar />
-            </slot>
-
-            <div class="main">
-              <div
-                v-show="settingsStore.mainPageMaximizeStatus"
-                class="exit-main-page-maximize"
-                @click="settingsStore.setMainPageMaximize()"
-              >
-                <RiLogoutBoxLine />
-              </div>
-
-              <slot>
-                <LayoutContent />
-              </slot>
-            </div>
-
-            <slot name="footer">
-              <Copyright />
-            </slot>
-          </div>
-        </div>
-      </div>
-
-      <SettingBar />
-      <BackTop />
-    </div>
-  </PubinfoProvider>
-</template>
-
-<style lang="scss" scoped>
-[data-app-width-mode="adaption"] {
-  #app-main {
-    width: 100%;
-  }
-}
-
-[data-app-width-mode="adaption-min-width"] {
-  #app-main {
-    width: max(var(--g-app-width), 100%);
-  }
-}
-
-[data-app-width-mode="center"] {
-  #app-main {
-    width: var(--g-app-width);
-  }
-}
-
-[data-app-width-mode="center-max-width"] {
-  #app-main {
-    width: min(var(--g-app-width), 100%);
-  }
-}
-
-[data-mode="mobile"] {
-  #app-main {
-    width: 100%;
-  }
-
-  .sidebar-container {
-    transform: translateX(calc((var(--g-main-sidebar-width) + var(--g-sub-sidebar-width)) * -1));
-
-    &.show {
-      transform: translateX(0);
-    }
-  }
-
-  .main-container {
-    margin-left: 0 !important;
-  }
-
-  &[data-menu-mode="single"] {
-    .sidebar-container {
-      transform: translateX(calc(var(--g-sub-sidebar-width) * -1));
-
-      &.show {
-        transform: translateX(0);
-      }
-    }
-  }
-}
-
-.layout {
-  height: 100%;
-}
-
-#app-main {
-  height: 100%;
-  margin: 0 auto;
-  background-color: var(--g-bg);
-
-  // 当前标签页全屏
-  &.main-page-maximize {
-    header,
-    .sidebar-container {
-      display: none;
-    }
-
-    .wrapper {
-      padding-top: 0;
-
-      .main-container {
-        margin-left: 0;
-
-        .topbar-container {
-          display: none;
-        }
-
-        .main {
-          margin: 0;
-        }
-      }
-    }
-
-    :deep([data-fixed-calc-width]) {
-      width: 100%;
-      transform: translateX(-50%);
-    }
-  }
-}
-
-.wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  transition: padding-top 0.3s;
-
-  .sidebar-container {
-    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;
-  }
-
-  .sidebar-mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 500;
-    width: 100%;
-    height: 100%;
-    visibility: hidden;
-    background-image: radial-gradient(transparent 1px, rgb(0 0 0 / 30%) 1px);
-    background-size: 4px 4px;
-    backdrop-filter: saturate(50%) blur(4px);
-    opacity: 0;
-    transition: all 0.2s;
-
-    &.show {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
-  .main-sidebar-container:not(.main-sidebar-leave-active) + .sub-sidebar-container {
-    left: var(--g-main-sidebar-width);
-  }
-
-  .main-container {
-    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;
-
-    .main {
-      position: relative;
-      flex: auto;
-      flex-basis: 0;
-      height: 0;
-      transition: 0.3s;
-
-      .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;
-
-        position: fixed;
-        top: -40px;
-        right: -40px;
-        z-index: 1000;
-        width: 80px;
-        height: 80px;
-        cursor: pointer;
-        border-radius: 50%;
-
-        svg {
-          position: absolute;
-          bottom: 16px;
-          left: 16px;
-        }
-      }
-    }
-
-    .topbar-container.has-tabbar + .main {
-      margin: var(--g-tabbar-height) 0 0;
-    }
-
-    .topbar-container.has-toolbar + .main {
-      margin: var(--g-toolbar-height) 0 0;
-    }
-
-    .topbar-container.has-tabbar.has-toolbar + .main {
-      margin: calc(var(--g-tabbar-height) + var(--g-toolbar-height)) 0 0;
-    }
-  }
-}
-
-header:not(.header-leave-active) + .wrapper {
-  padding-top: var(--g-header-height);
-
-  .sidebar-container {
-    top: var(--g-header-height);
-
-    :deep(.sidebar-logo) {
-      display: none;
-    }
-  }
-
-  .main-container {
-    .topbar-container {
-      top: var(--g-header-height);
-
-      :deep(.tools) {
-        display: none;
-      }
-    }
-  }
-}
-</style>

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

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import { useContext } from '../../composables/useContext';
-import IframeView from './IframeView.vue';
-import LinkView from './LinkView.vue';
-
-defineOptions({
-  name: 'LayoutContent',
-});
-
-const routeInfo = useRoute();
-const { settingsStore, keepAliveStore } = useContext();
-
-const isIframe = computed(() => !!routeInfo.meta.iframe);
-const isLink = computed(() => !!routeInfo.meta.link);
-</script>
-
-<template>
-  <RouterView v-slot="{ Component, route }">
-    <Transition :name="settingsStore.settings.mainPage.enableTransition ? settingsStore.settings.mainPage.transitionMode : ''" mode="out-in" appear>
-      <KeepAlive :include="keepAliveStore.list">
-        <component
-          :is="Component"
-          v-show="!(isIframe || isLink)"
-          :key="route.fullPath"
-          class="page-container"
-        />
-      </KeepAlive>
-    </Transition>
-  </RouterView>
-
-  <IframeView v-show="isIframe && !isLink" />
-  <LinkView v-if="isLink" />
-</template>
-
-<style scoped lang="scss">
-// 主内容区动画
-.fade-enter-active,
-.slide-left-enter-active,
-.slide-right-enter-active,
-.slide-top-enter-active,
-.slide-bottom-enter-active {
-  transition: 0.2s;
-}
-
-.fade-leave-active,
-.slide-left-leave-active,
-.slide-right-leave-active,
-.slide-top-leave-active,
-.slide-bottom-leave-active {
-  transition: 0.15s;
-}
-
-.fade-enter-from {
-  opacity: 0;
-}
-
-.fade-leave-to {
-  opacity: 0;
-}
-
-.slide-left-enter-from {
-  margin-left: 20px;
-  opacity: 0;
-}
-
-.slide-left-leave-to {
-  margin-left: -20px;
-  opacity: 0;
-}
-
-.slide-right-enter-from {
-  margin-left: -20px;
-  opacity: 0;
-}
-
-.slide-right-leave-to {
-  margin-left: 20px;
-  opacity: 0;
-}
-
-.slide-top-enter-from {
-  margin-top: 20px;
-  opacity: 0;
-}
-
-.slide-top-leave-to {
-  margin-top: -20px;
-  opacity: 0;
-}
-
-.slide-bottom-enter-from {
-  margin-top: -20px;
-  opacity: 0;
-}
-
-.slide-bottom-leave-to {
-  margin-top: 20px;
-  opacity: 0;
-}
-</style>