@pubinfo/core 2.0.0-beta.1

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

@@ -0,0 +1,177 @@
+<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/layout/ui-kit/HTooltip.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    text: string
+  }>(),
+  {
+    text: '',
+  },
+);
+</script>
+
+<template>
+  <VTooltip v-bind="$attrs">
+    <slot />
+    <template #popper>
+      <slot name="text">
+        {{ text }}
+      </slot>
+    </template>
+  </VTooltip>
+</template>

package/src/locales/index.ts

@@ -0,0 +1,80 @@
+import type { App } from 'vue';
+import { useSettingsStore } from '@/stores';
+import { cloneDeep } from 'lodash-es';
+import { createI18n as _createI18n } from 'vue-i18n';
+import _en from './lang/en.json';
+import _zhCN from './lang/zh-cn.json';
+import _zhTW from './lang/zh-tw.json';
+import { en, zhCN, zhTW } from './ui';
+
+const messages = {
+  'en': _en,
+  'zh-cn': _zhCN,
+  'zh-tw': _zhTW,
+};
+
+function createI18n() {
+  const settingsStore = useSettingsStore();
+  // 如果没设置默认语言，则根据当前浏览器语言设置默认语言
+  if (!settingsStore.settings.app.defaultLang) {
+    const lang = navigator.language.toLowerCase();
+    for (const key in messages) {
+      if (lang.includes(key)) {
+        settingsStore.setDefaultLang(key);
+      }
+    }
+  }
+  const locale = settingsStore.settings.app.defaultLang;
+  const i18n = _createI18n({
+    legacy: false,
+    locale,
+    flatJson: true,
+    fallbackLocale: 'zh-cn',
+    messages,
+    globalInjection: true,
+  });
+  return i18n;
+}
+
+function getLocales() {
+  return cloneDeep(messages);
+}
+
+function getUILocales() {
+  const locales: {
+    [key: string]: any
+  } = {};
+  for (const key in messages) {
+    locales[key] = {};
+    switch (key) {
+      case 'zh-cn':
+        Object.assign(locales[key], { labelName: '中文(简体)' }, { ui: zhCN });
+        break;
+      case 'zh-tw':
+        Object.assign(locales[key], { labelName: '中文(繁體)' }, { ui: zhTW });
+        break;
+      case 'en':
+        Object.assign(locales[key], { labelName: 'English' }, { ui: en });
+        break;
+    }
+  }
+  return locales;
+}
+
+// 用于路由 meta.i18n 配置，方便在 VSCode I18n Ally 插件进行显示，无实际作用
+function $t(key: string) {
+  return key;
+}
+
+function setupI18n({ app }: { app: App }) {
+  const i18n = createI18n();
+  app.use(i18n);
+  return app;
+}
+
+export {
+  $t,
+  getLocales,
+  getUILocales,
+  setupI18n,
+};

package/src/locales/lang/en.json

@@ -0,0 +1,96 @@
+{
+  "app": {
+    "account": "account",
+    "captcha": "captcha",
+    "changeOrg": "Switch",
+    "changePassword": "change Password",
+    "check": "Submit",
+    "goLogin": "go login",
+    "hotkeys": "Hotkeys Introduction",
+    "login": "Login",
+    "logout": "Logout",
+    "newPassword": "new password",
+    "password": "password",
+    "preferences": "Preferences",
+    "search": {
+      "enter": "Enter",
+      "esc": "Exit",
+      "input": "Search page, support title, URL fuzzy query",
+      "text": "Search",
+      "type": {
+        "menu": "Search menus",
+        "tab": "Search tabs"
+      },
+      "up_down": "Choice"
+    },
+    "sendCaptcha": "send captcha",
+    "tabbar": {
+      "close": "Close",
+      "closeLeftSide": "Close Leftside Tabs",
+      "closeOtherSide": "Close Otherside Tabs",
+      "closeRightSide": "Close Rightside Tabs",
+      "favorites": {
+        "add": "Add to Favorites",
+        "my-favorites": "my favorites",
+        "remove": "Remove from favorites"
+      },
+      "maximize": "Maximize",
+      "pin": "Pin",
+      "reload": "Reload",
+      "searchTabs": "Search Tabs",
+      "unpin": "Unpin"
+    }
+  },
+  "route": {
+    "demo": "Example",
+    "home": "Home",
+    "login": "Login",
+    "multimenu": {
+      "level2": {
+        "level3": {
+          "page1": "Navigation 2-2-1",
+          "page2": "Navigation 2-2-2",
+          "root": "Navigation 3"
+        },
+        "page": "Navigation 2-1",
+        "root": "Navigation 2"
+      },
+      "page": "Navigation 1",
+      "root": "Multi-level navigation"
+    },
+    "personal": {
+      "notification": "Notification",
+      "profile": "personal center"
+    },
+    "rbac": {
+      "dictionary": "Dictionary",
+      "organization": "Organizational",
+      "permission": "Authority",
+      "resource": "Resource",
+      "role": "Role",
+      "dataPermission": "DataPermission",
+      "title": "Rbac",
+      "blacklist": "Blacklist",
+      "whitelist": "WhiteList",
+      "user": "User",
+      "tenant": "Tenant",
+      "position": "Position",
+      "group": "Group",
+      "region": "Region",
+      "layoutSetting": "LayoutSetting",
+      "themeSetting": "ThemeSetting",
+      "pageSizeSetting": "PageSizeSetting",
+      "pageAnimationSetting": "PageAnimationSetting",
+      "menuSetting": "MenuSetting",
+      "tabbarSetting": "TabbarSetting",
+      "toolbarSetting": "ToolbarSetting",
+      "breadcrumbSetting": "BreadcrumbSetting",
+      "watermarkSetting": "WatermarkSetting",
+      "otherSetting": "OtherSetting",
+      "loginHistory": "LoginHistory",
+      "operateHistory": "OperateHistory",
+      "safeSetting": "SafeSetting"
+    },
+    "undefined": "[ No title ]"
+  }
+}

package/src/locales/lang/zh-cn.json

@@ -0,0 +1,97 @@
+{
+  "app": {
+    "account": "用户名",
+    "captcha": "验证码",
+    "check": "确认",
+    "goLogin": "去登录",
+    "hotkeys": "快捷键介绍",
+    "login": "登录",
+    "logout": "退出登录",
+    "newPassword": "新密码",
+    "changePassword": "修改密码",
+    "password": "密码",
+    "preferences": "个人偏好设置",
+    "changeOrg": "切换组织",
+    "search": {
+      "enter": "访问",
+      "esc": "退出",
+      "input": "搜索页面，支持标题、URL模糊查询",
+      "text": "搜索",
+      "type": {
+        "menu": "搜索导航菜单",
+        "tab": "搜索标签页"
+      },
+      "up_down": "切换"
+    },
+    "sendCaptcha": "发送验证码",
+    "tabbar": {
+      "close": "关闭标签页",
+      "closeLeftSide": "关闭左侧标签页",
+      "closeOtherSide": "关闭其它标签页",
+      "closeRightSide": "关闭右侧标签页",
+      "favorites": {
+        "add": "添加到收藏夹",
+        "my-favorites": "我的收藏夾",
+        "remove": "从收藏夹移除"
+      },
+      "maximize": "最大化",
+      "pin": "固定",
+      "reload": "重新加载",
+      "searchTabs": "搜索标签页",
+      "unpin": "取消固定"
+    }
+  },
+  "route": {
+    "demo": "演示管理系统",
+    "home": "主页",
+    "login": "登录",
+    "multimenu": {
+      "level2": {
+        "level3": {
+          "page1": "导航2-2-1",
+          "page2": "导航2-2-2",
+          "root": "导航3"
+        },
+        "page": "导航2-1",
+        "root": "导航2"
+      },
+      "page": "导航1",
+      "root": "多级导航"
+    },
+    "personal": {
+      "notification": "通知中心",
+      "profile": "个人中心"
+    },
+    "rbac": {
+      "dictionary": "字典管理",
+      "organization": "组织管理",
+      "permission": "权限管理",
+      "resource": "资源管理",
+      "role": "角色管理",
+      "roleGroup": "角色组管理",
+      "dataPermission": "数据权限管理",
+      "title": "权限管理系统",
+      "blacklist": "黑名单管理",
+      "whitelist": "白名单管理",
+      "user": "用户管理",
+      "tenant": "租户管理",
+      "position": "岗位管理",
+      "group": "群组管理",
+      "region": "区域管理",
+      "layoutSetting": "布局配置",
+      "themeSetting": "主题配置",
+      "pageSizeSetting": "页宽配置",
+      "pageAnimationSetting": "页面动画配置",
+      "menuSetting": "导航栏配置",
+      "tabbarSetting": "标签栏配置",
+      "toolbarSetting": "工具栏配置",
+      "breadcrumbSetting": "面包屑配置",
+      "watermarkSetting": "页面水印配置",
+      "otherSetting": "其他配置",
+      "loginHistory": "登录日志",
+      "operateHistory": "操作日志",
+      "safeSetting": "安全配置"
+    },
+    "undefined": "[ 无标题 ]"
+  }
+}

package/src/locales/lang/zh-tw.json

@@ -0,0 +1,97 @@
+{
+  "app": {
+    "account": "賬號",
+    "captcha": "驗證碼",
+    "changeOrg": "切換組織",
+    "changePassword": "修改密碼",
+    "check": "確 認",
+    "goLogin": "去登錄",
+    "hotkeys": "熱鍵介紹",
+    "login": "登 錄",
+    "logout": "退出登錄",
+    "newPassword": "新密碼",
+    "password": "密碼",
+    "preferences": "偏好設置",
+    "search": {
+      "enter": "訪問",
+      "esc": "退出",
+      "input": "搜索頁面，支持標題、URL模糊查詢",
+      "text": "搜索",
+      "type": {
+        "menu": "搜索導航菜單",
+        "tab": "搜索標籤頁"
+      },
+      "up_down": "切換"
+    },
+    "sendCaptcha": "發送驗證碼",
+    "tabbar": {
+      "close": "關閉標籤頁",
+      "closeLeftSide": "關閉左側標籤頁",
+      "closeOtherSide": "關閉其它標籤頁",
+      "closeRightSide": "關閉右側標籤頁",
+      "favorites": {
+        "add": "加入收藏夾",
+        "my-favorites": "我的收藏夾",
+        "remove": "從收藏夾移除"
+      },
+      "maximize": "最大化",
+      "pin": "固定",
+      "reload": "重新載入",
+      "searchTabs": "搜索標籤頁",
+      "unpin": "取消固定"
+    }
+  },
+  "route": {
+    "demo": "演示管理系統",
+    "home": "主頁",
+    "login": "登錄",
+    "multimenu": {
+      "level2": {
+        "level3": {
+          "page1": "導航2-2-1",
+          "page2": "導航2-2-2",
+          "root": "導航3"
+        },
+        "page": "導航2-1",
+        "root": "導航2"
+      },
+      "page": "導航1",
+      "root": "多級導航"
+    },
+    "personal": {
+      "notification": "通知中心",
+      "profile": "個人中心"
+    },
+    "rbac": {
+      "dictionary": "字典管理",
+      "organization": "組織管理",
+      "permission": "權限管理",
+      "resource": "資源管理",
+      "role": "角色管理",
+      "roleGroup": "角色组管理",
+      "dataPermission": "數據權限管理",
+      "title": "權限管理系統",
+      "blacklist": "黑名單管理",
+      "whitelist": "白名單管理",
+      "user": "使用者管理",
+      "tenant": "租戶管理",
+      "position": "崗位管理",
+      "group": "群組管理",
+      "region": "區域管理",
+      "layoutSetting": "布局配置",
+      "themeSetting": "主題配置",
+      "pageSizeSetting": "頁寬配置",
+      "pageAnimationSetting": "頁麵動畫配置",
+      "menuSetting": "導航欄配置",
+      "tabbarSetting": "標簽欄配置",
+      "toolbarSetting": "工具欄配置",
+      "breadcrumbSetting": "麵包屑配置",
+      "watermarkSetting": "頁麵水印配置",
+      "otherSetting": "其他配置",
+      "loginHistory": "登錄日志",
+      "operateHistory": "操作日志",
+      "safeSetting": "安全配置"
+    },
+    "undefined": "[ 無標題 ]"
+  }
+}

package/src/locales/ui.ts

@@ -0,0 +1,3 @@
+export { default as en } from 'ant-design-vue/es/locale/en_US';
+export { default as zhCN } from 'ant-design-vue/es/locale/zh_CN';
+export { default as zhTW } from 'ant-design-vue/es/locale/zh_TW';

package/src/modules.ts

@@ -0,0 +1,49 @@
+import type { Context, FalsyModule, Module, ModuleOptions } from './interface';
+import { hooks } from './context';
+import { asyncFlatten } from './utils';
+
+export async function resolveModules(modules: ModuleOptions[] = [], context: Context) {
+  const filterModules = (m: Module | FalsyModule): m is Module => Boolean(m);
+
+  const rawModules = (await asyncFlatten(modules)).filter(filterModules);
+  rawModules.forEach((m) => {
+    m?.setup?.(context);
+    hooks.addHooks(m.hooks ?? {});
+  });
+}
+
+/**
+ * @desc: 根据 `enforce` 区分 `pre/post`
+ * @param {ModuleOptions} modules
+ */
+export function extractModules(modules: ModuleOptions[] = []) {
+  const result = {
+    pre: [] as Module[],
+    post: [] as Module[],
+    default: [] as Module[],
+  };
+
+  function traverse(options: ModuleOptions) {
+    if (!options) {
+      return;
+    }
+
+    if (Array.isArray(options)) {
+      options.forEach(traverse);
+    }
+    else if (typeof options === 'object' && options.name) {
+      if (options.enforce === 'pre') {
+        result.pre.push(options);
+      }
+      else if (options.enforce === 'post') {
+        result.post.push(options);
+      }
+      else {
+        result.default.push(options);
+      }
+    }
+  }
+
+  modules?.forEach(traverse);
+  return result;
+}

package/src/pages/personal/notification.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { PageHeader, PageMain, PubinfoIcon } from '@/components';
+import { useNotificationStore } from '@/stores';
+
+defineOptions({
+  name: 'PersonalNotification',
+});
+
+const notificationStore = useNotificationStore();
+
+function messagePlus() {
+  notificationStore.$patch((state) => {
+    state.message += 1;
+  });
+}
+function messageMinus() {
+  notificationStore.$patch((state) => {
+    state.message -= state.message > 0 ? 1 : 0;
+  });
+}
+
+function todoPlus() {
+  notificationStore.$patch((state) => {
+    state.todo += 1;
+  });
+}
+function todoMinus() {
+  notificationStore.$patch((state) => {
+    state.todo -= state.todo > 0 ? 1 : 0;
+  });
+}
+</script>
+
+<template>
+  <div>
+    <PageHeader title="通知中心" content="本页面仅模拟右上角通知数变化，具体业务逻辑请到 /src/store/modules/notification.ts 文件中编写" />
+    <PageMain title="消息">
+      <HButton @click="messagePlus">
+        <PubinfoIcon name="i-ep-plus" />
+        1
+      </HButton>
+      <HButton ml-2 @click="messageMinus">
+        <PubinfoIcon name="i-ep-minus" />
+        1
+      </HButton>
+    </PageMain>
+    <PageMain title="待办">
+      <HButton @click="todoPlus">
+        <PubinfoIcon name="i-ep-plus" />
+        1
+      </HButton>
+      <HButton ml-2 @click="todoMinus">
+        <PubinfoIcon name="i-ep-minus" />
+        1
+      </HButton>
+    </PageMain>
+  </div>
+</template>