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

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

@@ -1,112 +0,0 @@
-<script lang="ts" setup>
-import { useToggle } from '@vueuse/core';
-import AntDesignSettingTwotone from '~icons/ant-design/setting-twotone';
-import LetsIconsBookOpenDuotoneLine from '~icons/lets-icons/book-open-duotone-line';
-import { useContext } from '../../composables/useContext';
-
-defineOptions({
-  name: 'SettingBar',
-});
-
-const AppSetting = defineAsyncComponent(() => import('./AppSetting.vue'));
-
-const { settingsStore, isDev } = useContext();
-
-function openDocs() {
-  window.open('http://124.223.184.245:10000/docs/');
-}
-
-const [open, setOpen] = useToggle(false);
-</script>
-
-<template>
-  <div v-if="settingsStore.settings.app.enableAppSetting && isDev" class="app-setting-warp">
-    <div class="app-setting">
-      <div class="app-setting-item" @click="setOpen()">
-        <AntDesignSettingTwotone class="icon" text="18px" />
-      </div>
-      <div class="divider" />
-      <div class="app-setting-item">
-        <LetsIconsBookOpenDuotoneLine text="18px" @click="openDocs" />
-      </div>
-    </div>
-    <div class="vue-devtools__anchor--glowing" />
-
-    <AppSetting v-model:open="open" />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.app-setting-warp {
-  position: relative;
-  position: fixed;
-  top: calc(50%);
-  right: 10px;
-  z-index: 10;
-
-  .vue-devtools__anchor--glowing {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: 160px;
-    height: 160px;
-    pointer-events: none;
-    background-image: linear-gradient(45deg, #00dc82, #36e4da, #0047e1);
-    filter: blur(60px);
-    border-radius: 9999px;
-    opacity: 0;
-    transition: all 1s ease;
-    transform: translate(-25%, -25%);
-  }
-
-  &:hover {
-    .vue-devtools__anchor--glowing {
-      opacity: 0.7;
-    }
-  }
-}
-
-.app-setting {
-  --at-apply: text-white dark:text-dark bg-ui-primary;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  width: 30px;
-  height: 76px;
-  font-size: 14px;
-  cursor: pointer;
-  border-radius: 30px;
-
-  .app-setting-item {
-    display: flex;
-    flex: auto;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 0;
-  }
-
-  .divider {
-    width: 10px;
-    height: 1px;
-    background-color: darken($color: #fff, $amount: 30%);
-  }
-
-  .icon {
-    animation: rotate 5s linear infinite;
-  }
-
-  @keyframes rotate {
-    from {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}
-</style>

package/src/layout/components/Tools/Breadcrumb/index.vue

@@ -1,21 +0,0 @@
-<template>
-  <div class="flex items-center text-sm">
-    <slot />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-:deep(.breadcrumb-item) {
-  &:first-child {
-    .separator {
-      display: none;
-    }
-  }
-
-  &:last-child {
-    .text {
-      opacity: 1;
-    }
-  }
-}
-</style>

package/src/layout/components/Tools/DayNightSwitch.vue

@@ -1,93 +0,0 @@
-<script setup lang="ts">
-import { useContext } from '../../composables/useContext';
-
-defineOptions({
-  name: 'DayNightSwitch',
-});
-
-const { settingsStore } = useContext();
-</script>
-
-<template>
-  <label v-if="settingsStore.settings.toolbar.enableColorScheme" class="day-night">
-    <div
-      class="animate-icon"
-      :class="{
-        'animate-icon-day': settingsStore.settings.app.colorScheme !== 'dark',
-      }"
-    />
-  </label>
-</template>
-
-<style lang="scss" scoped>
-$night-btn: #fff;
-$day-btn: #ffce6e;
-
-.day-night {
-  width: 44px;
-  height: 44px;
-  cursor: pointer;
-  transform: scale(0.45);
-
-  .animate-icon {
-    position: relative;
-    width: 38px;
-    height: 38px;
-    border-radius: 50%;
-    box-shadow: inset 16px -16px 0 0 $night-btn;
-    transition: box-shadow 0.5s ease 0s, transform 0.4s ease 0.1s;
-    transform: scale(1) rotate(-2deg);
-
-    &::before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: inherit;
-      height: inherit;
-      content: "";
-      border-radius: inherit;
-      transition: background 0.3s ease;
-    }
-
-    &::after {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 8px;
-      height: 8px;
-      margin: -4px 0 0 -4px;
-      content: "";
-      border-radius: 50%;
-      box-shadow:
-        0 -23px 0 $day-btn,
-        0 23px 0 $day-btn,
-        23px 0 0 $day-btn,
-        -23px 0 0 $day-btn,
-        15px 15px 0 $day-btn,
-        -15px 15px 0 $day-btn,
-        15px -15px 0 $day-btn,
-        -15px -15px 0 $day-btn;
-      transition: all 0.3s ease;
-      transform: scale(0);
-    }
-  }
-
-  .animate-icon-day {
-    width: 44px;
-    height: 44px;
-    box-shadow: inset 32px -32px 0 0 $night-btn;
-    transition: transform 0.3s ease 0.1s, box-shadow 0.2s ease 0s;
-    transform: scale(0.5) rotate(0deg);
-
-    &::before {
-      background: $day-btn;
-      transition: background 0.3s ease 0.1s;
-    }
-
-    &::after {
-      transition: transform 0.5s ease 0.15s;
-      transform: scale(1.5);
-    }
-  }
-}
-</style>

package/src/layout/components/Tools/I18nSelector.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { getUILocales } from '@/locales';
-import { useI18n } from 'vue-i18n';
-import { useContext } from '../../composables/useContext';
-
-// TODO 完成功能
-
-defineOptions({
-  name: 'I18nSelector',
-});
-
-const { locale } = useI18n();
-const route = useRoute();
-
-const { settingsStore, generateI18nTitle } = useContext();
-
-const UILocales = computed(() => getUILocales());
-
-const langItems = computed(() => {
-  return Object.keys(UILocales.value).map((item: string) => {
-    const icons: Record<string, string> = {
-      'en': 'i-circle-flags-en',
-      'zh-cn': 'i-circle-flags-cn',
-      'zh-tw': 'i-circle-flags-cn',
-    };
-    return {
-      icon: icons[item],
-      label: UILocales.value[item].labelName,
-      disabled: settingsStore.settings.app.defaultLang === item,
-      handle: () => setLanguage(item),
-    };
-  });
-});
-
-function setLanguage(name: string) {
-  locale.value = name;
-  settingsStore.setDefaultLang(name);
-
-  if (route.meta.breadcrumbNeste?.at(-1)?.i18n || route.meta.breadcrumbNeste?.at(-1)?.title) {
-    settingsStore.setTitle(generateI18nTitle(route.meta.breadcrumbNeste?.at(-1)?.i18n, route.meta.breadcrumbNeste?.at(-1)?.title));
-  }
-  else {
-    settingsStore.setTitle(generateI18nTitle(route.meta.i18n, route.meta.title));
-  }
-}
-</script>
-
-<template>
-  <HDropdownMenu v-if="settingsStore.settings.toolbar.enableI18n" :items="[langItems]">
-    <slot />
-  </HDropdownMenu>
-</template>

package/src/layout/ui-kit/HDivider.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'HDivider',
-});
-
-const props = defineProps<{
-  title: string
-}>();
-</script>
-
-<template>
-  <div w-full>
-    <div class="divider">
-      <div class="divider-card">
-        {{ props.title }}
-      </div>
-    </div>
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.divider {
-  --at-apply:
-    flex
-    items-center
-    justify-between
-    gap-4
-    my-4
-    whitespace-nowrap
-    text-sm
-    font-500;
-
-  &::before,
-  &::after {
-    --at-apply:
-      content-empty
-      w-full
-      h-1px
-      bg-stone-2
-      dark:bg-stone-6;
-  }
-
-  .divider-card {
-    padding: 5px 10px;
-
-    // --at-apply:
-    //   rounded-md
-    //   bg-#409EFF
-    //   dark:bg-blue;
-  }
-}
-</style>

package/src/layout/ui-kit/HToggle.vue

@@ -1,177 +0,0 @@
-<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 />
-  </label>
-</template>
-
-<style scoped lang="scss">
-$greed: var(--ui-primary);
-
-.switch {
-  cursor: pointer;
-  transform: scale(0.75);
-
-  input {
-    display: none;
-
-    & + span {
-      position: relative;
-      display: block;
-      width: 48px;
-      height: 28px;
-      background: #d6d3d1;
-      border-radius: 14px;
-      transition: all 0.3s ease;
-
-      --at-apply: dark:bg-stone-5;
-
-      &::before,
-      &::after {
-        position: absolute;
-        display: block;
-        content: "";
-        transition: all 0.3s ease;
-      }
-
-      &::before {
-        top: 5px;
-        left: 5px;
-        width: 18px;
-        height: 18px;
-        border: 5px solid #fff;
-        border-radius: 9px;
-
-        --at-apply: dark:border-dark;
-      }
-
-      &::after {
-        top: 5px;
-        left: 32px;
-        width: 6px;
-        height: 18px;
-        background: #fff;
-        border-radius: 40%;
-        opacity: 0;
-        transform-origin: 50% 50%;
-
-        --at-apply: dark:bg-stone-7;
-      }
-
-      &:active {
-        transform: scale(0.92);
-      }
-    }
-
-    &:checked {
-      & + span {
-        background: rgb($greed);
-        box-shadow: 0 8px 16px -1px rgba($greed, 0.2);
-
-        &::before {
-          width: 0;
-          margin-left: 27px;
-          background: #fff;
-          border-width: 3px;
-          border-radius: 3px;
-
-          --at-apply: dark:bg-stone-7;
-        }
-
-        &::after {
-          animation: blob-checked  0.35s linear forwards 0.2s;
-        }
-      }
-    }
-
-    &: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;
-}
-
-* {
-  box-sizing: border-box;
-
-  &::before,
-  &::after {
-    box-sizing: border-box;
-  }
-}
-</style>

package/src/pages/system/change-password/page.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { PassStrengthValidator } from '@/components';
-import ChangePasswordForm from './components/ChangePasswordForm/index.vue';
-
-defineOptions({
-  name: 'ChangePasswordPageView',
-});
-
-const ChangePassWordForm = ref<InstanceType<typeof ChangePasswordForm>>();
-
-const newPassWord = computed({
-  get() {
-    return ChangePassWordForm.value?.formState.newPassword;
-  },
-  set() {},
-});
-
-const route = useRoute();
-const token = route.params.changePassWordToken;
-const isValidate = ref(false);
-</script>
-
-<template>
-  <div
-    flex="~"
-    w-full
-    h-full
-  >
-    <main
-      flex="~ auto center"
-      w-full
-      h-full
-      pt-10px
-    >
-      <div
-        w-full
-        h-full
-        flex="~"
-        justify-between
-        bg="#fff"
-        px-32px
-        py-20px
-      >
-        <div w-420px ml-60px mt-70px>
-          <div flex="~ col center" mb-40px>
-            <span text="18px" font="bold">
-              更改密码
-            </span>
-          </div>
-          <ChangePasswordForm ref="ChangePassWordForm" v-model:validate="isValidate" :token="token" />
-        </div>
-        <div w-644px py-15px bg="red">
-          <PassStrengthValidator v-model="newPassWord" v-model:validate="isValidate" />
-        </div>
-      </div>
-    </main>
-  </div>
-</template>

package/src/pages/system/index.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="home">
-    主页
-  </div>
-</template>

package/src/route/async.ts

@@ -1,18 +0,0 @@
-import type { Route } from '#/vue-router';
-
-let asyncRoutes: Route.recordMainRaw[] = [];
-
-/**
- * 定义并注册动态路由
- */
-export function defineAsyncRoutes(routes: Route.recordMainRaw[]) {
-  asyncRoutes = [...asyncRoutes, ...routes];
-  return routes;
-}
-
-/**
- * 读取注册的动态路由
- */
-export function getAsyncRoutes() {
-  return asyncRoutes;
-}

package/src/route/guard/basic.ts

@@ -1,23 +0,0 @@
-import type { Router } from 'vue-router';
-import {
-  useSettingsStore,
-} from '@/stores';
-import { useNProgress } from '@vueuse/integrations/useNProgress';
-
-/** 基础路由守卫 */
-export function createBasicGuard(router: Router) {
-  const settingsStore = useSettingsStore();
-  const { start, done } = useNProgress();
-
-  if (settingsStore.settings.app.enableProgress) {
-    router.beforeEach((to, from) => {
-      if (to.path !== from.path) {
-        start();
-      }
-    });
-
-    router.afterEach(() => {
-      done();
-    });
-  }
-}

package/src/route/guard/index.ts

@@ -1,3 +0,0 @@
-export * from './auth';
-export * from './basic';
-export * from './setting';

package/src/route/index.ts

@@ -1,12 +0,0 @@
-import type { Router } from 'vue-router';
-import { createAuthGuard, createBasicGuard, createSettingGuard } from './guard';
-
-export function setupRouterGuard({ router }: { router: Router }) {
-  createBasicGuard(router);
-  createAuthGuard(router);
-  createSettingGuard(router);
-}
-
-export * from './async';
-export * from './guard';
-export * from './routes';