@pubinfo/core 2.0.0-beta.1

package/src/components/PassStrengthValidator/index.vue

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import { isFunction } from 'lodash-es';
+import zxcvbn from 'zxcvbn';
+import RuleItem from './rule.vue';
+
+defineOptions({
+  name: 'PassStrengthValidator',
+});
+
+defineProps({
+  vertical: Boolean,
+});
+
+const value = defineModel<string>({
+  default: '',
+});
+const isValidate = defineModel('validate');
+
+const Zxc = computed(() => {
+  return zxcvbn(value.value);
+});
+
+function validate(target: string) {
+  return () => {
+    if (value.value === '') {
+      return false;
+    }
+    if (Array.isArray(Zxc.value.sequence)) {
+      return Zxc.value.sequence.every((item) => {
+        return item?.pattern !== target;
+      });
+    }
+    return false;
+  };
+}
+
+const rules = [
+  {
+    rule: /^.{8,16}$/,
+    message: '密码长度必须在8到16个字符之间。',
+    flag: false,
+    source: 'basic',
+  },
+  {
+    rule: /[a-z]/,
+    message: '密码必须至少包含一个小写英文字母。',
+    flag: false,
+    source: 'basic',
+  },
+  {
+    rule: /[A-Z]/,
+    message: '密码必须至少包含一个大写英文字母。',
+    flag: false,
+    source: 'basic',
+  },
+  {
+    rule: /\d/,
+    message: '密码必须至少包含一个数字。',
+    flag: false,
+    source: 'basic',
+  },
+  {
+    rule: /[~!@#$%^&*()_+=\-.,]/,
+    message: '密码必须至少包含一个特殊字符（例如：~!@#$%^&*()_+=\\-.,）。',
+    flag: false,
+    source: 'basic',
+  },
+  {
+    rule: validate('dictionary'),
+    message: '密码不应包含常用字典中的单词或短语。',
+    flag: false,
+  },
+  {
+    rule: validate('spatial'),
+    message: '密码不应基于键盘布局的简单模式（例如：连续的字母或键盘行）。',
+    flag: false,
+  },
+  {
+    rule: validate('repeat'),
+    message: '密码不应包含重复使用的字符或序列。',
+    flag: false,
+  },
+  {
+    rule: validate('sequence'),
+    message: '密码不应包含顺序排列的数字或字母序列。',
+    flag: false,
+  },
+  {
+    rule: validate('date'),
+    message: '密码不应使用常见的日期格式或数字序列。',
+    flag: false,
+  },
+];
+
+watchEffect(() => {
+  rules.forEach(({ rule }, index) => {
+    if (isFunction(rule)) {
+      const flag = rule();
+      rules[index].flag = flag;
+    }
+    else {
+      const flag = rule.test(value.value);
+      rules[index].flag = flag;
+    }
+  });
+  isValidate.value = rules.every(({ flag }) => flag);
+});
+</script>
+
+<template>
+  <div
+    class="pass-strength-validator"
+    :class="{ vertical }"
+  >
+    <div class="title-wrap">
+      密码强度校验提示
+    </div>
+    <div class="rules-wrap">
+      <div class="basic-rules">
+        <div class="rules-title">
+          标准规则集
+        </div>
+        <div>
+          <template v-for="(rule, index) in rules" :key="index">
+            <RuleItem
+              v-if="rule.source === 'basic'"
+              :message="rule.message"
+              :flag="rule.flag"
+              :vertical="vertical"
+            />
+          </template>
+        </div>
+        <a-divider v-if="!vertical" />
+      </div>
+      <div class="advanced-rules">
+        <div class="rules-title">
+          高级规则集
+        </div>
+        <div>
+          <template v-for="(rule, index) in rules" :key="index">
+            <RuleItem
+              v-if="rule.source !== 'basic'"
+              :rule="rule.rule"
+              :message="rule.message"
+              :flag="rule.flag"
+              :vertical="vertical"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.pass-strength-validator {
+  padding: 15px;
+
+  .title-wrap {
+    margin-bottom: 40px;
+    font-size: 24px;
+    font-weight: 600;
+    color: #1677ff;
+  }
+
+  .rules-title {
+    margin-bottom: 15px;
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  &.vertical {
+    width: 1130px;
+    padding: 18px 32px 24px;
+
+    .title-wrap {
+      margin-bottom: 16px;
+      font-size: 16px;
+    }
+
+    .rules-wrap {
+      display: flex;
+    }
+
+    .basic-rules,
+    .advanced-rules {
+      position: relative;
+      flex: 1;
+    }
+
+    .basic-rules::after {
+      position: absolute;
+      top: 11px;
+      right: 35px;
+      bottom: 11px;
+      width: 1px;
+      height: auto;
+      content: "";
+      background: #e5e6eb;
+    }
+
+    .rules-title {
+      margin-bottom: 14px;
+      font-size: 14px;
+      font-weight: bold;
+    }
+  }
+}
+
+.dark .pass-strength-validator.vertical .basic-rules::after {
+  background: #424242;
+}
+</style>

package/src/components/PassStrengthValidator/rule.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import AntDesignCheckCircleTwotone from '~icons/ant-design/check-circle-twotone';
+import AntDesignCloseCircleTwotone from '~icons/ant-design/close-circle-twotone';
+
+const props = defineProps<{
+  // rule: RegExp | ((...arg: any[]) => boolean)
+  message: string
+  flag: boolean
+  source?: 'basic' | undefined
+  vertical: boolean
+}>();
+</script>
+
+<template>
+  <div class="rule-item" :class="props.vertical ? 'vertical' : ''">
+    <div class="icon">
+      <AntDesignCheckCircleTwotone v-if="props.flag" text="16px green" />
+      <AntDesignCloseCircleTwotone v-else text="16px red" />
+    </div>
+    <span :class="[props.flag ? 'line-through text-gray-400' : '']">
+      {{ props.message }}
+    </span>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  .rule-item {
+    display: flex;
+    flex-direction: row;
+    padding: 10px 0;
+    font-size: 14px;
+    line-height: 19px;
+
+    .icon {
+      margin-right: 10px;
+      line-height: 23px;
+    }
+
+    &.vertical {
+      padding: 0;
+      margin-bottom: 6px;
+      line-height: 18px;
+      color: #86909c;
+
+      .icon {
+        margin-right: 6px;
+        line-height: 18px;
+      }
+    }
+  }
+</style>

package/src/components/PubinfoApp/index.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import NotAllowed from '../NotAllowed/index.vue';
+
+defineOptions({
+  name: 'PubinfoApp',
+});
+
+const route = useRoute();
+const { auth } = useAuth();
+
+const isAuth = computed(() => {
+  return route.matched.every((item) => auth(item.meta.auth ?? ''));
+});
+</script>
+
+<template>
+  <RouterView v-slot="{ Component }">
+    <component :is="Component" v-if="isAuth" />
+    <NotAllowed v-else />
+  </RouterView>
+</template>

package/src/components/PubinfoIcon/index.vue

@@ -0,0 +1,85 @@
+<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/components/PubinfoProvider/index.ts

@@ -0,0 +1,34 @@
+interface PubinfoProviderProps {
+  loadIcon?: (name?: string) => any
+}
+
+export const pubinfoInjectionKey: InjectionKey<PubinfoProviderProps> = Symbol('injectionKey');
+
+export function createPubinfoProvider(props: PubinfoProviderProps) {
+  provide(pubinfoInjectionKey, props);
+}
+
+export function useProvider() {
+  return inject(pubinfoInjectionKey, {});
+}
+
+export default defineComponent({
+  name: 'PubinfoProvider',
+  props: {
+    loadIcon: {
+      type: Function as PubinfoProviderProps['loadIcon'],
+      required: true,
+    },
+  },
+  setup(props, { slots }) {
+    const provider = useProvider();
+
+    createPubinfoProvider({
+      loadIcon(name) {
+        return props.loadIcon(name) ?? provider?.loadIcon?.(name);
+      },
+    });
+
+    return () => slots?.default?.();
+  },
+});

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export { default as NotAllowed } from './NotAllowed/index.vue';
+export { default as PageHeader } from './PageHeader/index.vue';
+export { default as PageMain } from './PageMain/index.vue';
+export { default as PassStrengthValidator } from './PassStrengthValidator/index.vue';
+export { default as PubinfoApp } from './PubinfoApp/index.vue';
+export { default as PubinfoIcon } from './PubinfoIcon/index.vue';
+export { default as PubinfoProvider } from './PubinfoProvider';
+export { createPubinfoProvider, pubinfoInjectionKey } from './PubinfoProvider';

package/src/composables/auth.ts

@@ -0,0 +1,53 @@
+import { useSettingsStore, useUserStore } from '@/stores';
+
+/**
+ * 处理身份验证和权限检查的自定义钩子。
+ * @returns 包含 auth 和 authAll 函数的对象。
+ */
+export function useAuth() {
+  /**
+   * 判断用户是否具有指定权限
+   * @param permission 权限字符串
+   * @returns 如果用户具有指定权限，则返回true；否则返回false
+   */
+  function hasPermission(permission: string) {
+    const settingsStore = useSettingsStore();
+    const userStore = useUserStore();
+    if (settingsStore.settings.app.enablePermission) {
+      return userStore.permissions.includes(permission);
+    }
+    else {
+      return true;
+    }
+  }
+
+  /**
+   * 检查用户是否具有所需的权限。
+   * @param value - 要检查的权限，可以是单个权限或权限数组。
+   * @returns 一个布尔值，指示用户是否具有所需的权限。
+   */
+  function auth(value: string | string[]) {
+    let auth;
+    if (typeof value === 'string') {
+      auth = value !== '' ? hasPermission(value) : true;
+    }
+    else {
+      auth = value.length > 0 ? value.some(item => hasPermission(item)) : true;
+    }
+    return auth;
+  }
+
+  /**
+   * 检查用户是否具有所有指定的权限。
+   * @param value - 权限字符串的数组。
+   * @returns 如果用户具有所有指定的权限，则返回true；否则返回false。
+   */
+  function authAll(value: string[]) {
+    return value.length > 0 ? value.every(item => hasPermission(item)) : true;
+  }
+
+  return {
+    auth,
+    authAll,
+  };
+}

package/src/composables/index.ts

@@ -0,0 +1,4 @@
+export * from './auth';
+export * from './log';
+export * from './theme';
+export * from './watchDiff';

package/src/composables/log.ts

@@ -0,0 +1,44 @@
+import { consola } from 'consola';
+
+enum LOG_TYPE {
+  ERROR = 'error',
+  SUCCESS = 'success',
+  WARN = 'warn',
+  INFO = 'info',
+  START = 'start',
+  BOX = 'box',
+}
+enum EMOJI {
+  ERROR = '🔴',
+  SUCCESS = '🟢',
+  WARN = '🟡',
+  INFO = '🔵',
+  START = '🟩',
+  BOX = '🟧',
+}
+
+const createConsoleLog = consola.withTag('腾龙开发底座');
+
+function createLog(type: LOG_TYPE, emoji: EMOJI) {
+  return (message: string | Error) => {
+    if (!import.meta.env.DEV) {
+      return;
+    }
+
+    if (typeof message === 'string') {
+      const msg = message.length > 0 ? `${emoji} ${message}` : '';
+      createConsoleLog[type](msg);
+    }
+    else {
+      const msg = message instanceof Error ? message : new Error(message);
+      createConsoleLog[type](msg);
+    }
+  };
+}
+
+export const useError = createLog(LOG_TYPE.ERROR, EMOJI.ERROR);
+export const useSuccess = createLog(LOG_TYPE.SUCCESS, EMOJI.SUCCESS);
+export const useWarn = createLog(LOG_TYPE.WARN, EMOJI.WARN);
+export const useInfo = createLog(LOG_TYPE.INFO, EMOJI.INFO);
+export const useStart = createLog(LOG_TYPE.START, EMOJI.START);
+export const useBox = createLog(LOG_TYPE.BOX, EMOJI.BOX);

package/src/composables/theme.ts

@@ -0,0 +1,16 @@
+import { useSettingsStore } from '@/stores';
+
+export function useTheme() {
+  const settingsStore = useSettingsStore();
+
+  const isDark = computed({
+    get() {
+      return settingsStore.settings.app.colorScheme === 'dark';
+    },
+    set(value) {
+      settingsStore.settings.app.colorScheme = (value ? 'dark' : 'light');
+    },
+  });
+
+  return { isDark };
+}

package/src/composables/watchDiff.ts

@@ -0,0 +1,53 @@
+import type { WatchOptions, WatchSource } from 'vue';
+import { cloneDeep, isEmpty, isObject } from 'lodash-es';
+import { watch } from 'vue';
+
+function deepDiff(original: Record<string, any>, updated: Record<string, any>) {
+  let hasDifferences = false;
+  const diff: Record<string, any> = Object.create(null);
+
+  const keys = new Set([...Object.keys(original), ...Object.keys(updated)]);
+  keys.forEach((key) => {
+    const origValue = original[key];
+    const updatedValue = updated[key];
+
+    if (isObject(origValue) && isObject(updatedValue)) {
+      const deeperDiff = deepDiff(origValue, updatedValue);
+      if (Object.keys(deeperDiff).length > 0) {
+        diff[key] = deeperDiff;
+        hasDifferences = true;
+      }
+    }
+    else if (origValue !== updatedValue) {
+      diff[key] = updatedValue;
+      hasDifferences = true;
+    }
+  });
+
+  return hasDifferences ? diff : {};
+}
+
+export function watchDiffObject<
+  T extends Record<string, any>, Immediate extends Readonly<boolean> = false>(
+  source: WatchSource<T> | T,
+  cb: (newVal: Record<string, any>, oldVal: Record<string, any>) => void,
+  options?: WatchOptions<Immediate>,
+) {
+  let oldValue: Record<string, any> = options?.immediate
+    ? {}
+    : cloneDeep(source instanceof Function
+        ? source()
+        : source,
+      );
+
+  return watch(source, (newVal, _) => {
+    const diff = deepDiff(oldValue, newVal);
+    if (!isEmpty(diff)) {
+      cb(diff, oldValue);
+    }
+    oldValue = cloneDeep(newVal);
+  }, {
+    ...options,
+    deep: true,
+  });
+}

package/src/config/index.ts

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

package/src/config/settings.ts

@@ -0,0 +1,107 @@
+import type { RequiredDeep } from 'type-fest';
+import { defaultsDeep } from 'lodash-es';
+
+/** 默认配置 */
+let globalSettings: RequiredDeep<Settings.all> = {
+  app: {
+    lightTheme: 'classic',
+    darkTheme: 'dark',
+    colorScheme: 'light',
+    defaultLang: 'zh-cn',
+    enablePermission: true,
+    enableProgress: true,
+    enableDynamicTitle: true,
+    storagePrefix: 'wsy_rbac',
+    // enableWatermark: false,
+    enableErrorLog: false,
+    routeBaseOn: 'frontend',
+    enableUserPreferences: true,
+    enableSettingPreferences: true,
+    enableAppSetting: true,
+  },
+  home: {
+    enable: false,
+    title: '主页',
+  },
+  layout: {
+    widthMode: 'adaption',
+    enableMobileAdaptation: false,
+  },
+  menu: {
+    menuMode: 'head',
+    isRounded: true,
+    menuActiveStyle: '',
+    switchMainMenuAndPageJump: true,
+    subMenuUniqueOpened: true,
+    subMenuOnlyOneHide: true,
+    subMenuCollapse: false,
+    enableSubMenuCollapseButton: true,
+    enableHotkeys: false,
+  },
+  topbar: {
+    mode: 'fixed',
+    switchTabbarAndToolbar: false,
+  },
+  tabbar: {
+    enable: true,
+    style: 'fashion',
+    enableIcon: true,
+    mergeTabsBy: 'activeMenu',
+    enableMemory: true,
+    enableHotkeys: true,
+    storageTo: 'local',
+  },
+  toolbar: {
+    enableNotification: true,
+    enableI18n: true,
+    enableFullscreen: true,
+    enablePageReload: true,
+    enableColorScheme: true,
+  },
+  favorites: {
+    enable: true,
+    storageTo: 'local',
+  },
+  breadcrumb: {
+    enable: true,
+    style: '',
+    enableMainMenu: true,
+  },
+  mainPage: {
+    enableHotkeys: true,
+    iframeCacheMax: 3,
+    enableTransition: true,
+    transitionMode: 'fade',
+  },
+  navSearch: {
+    enable: true,
+    enableHotkeys: true,
+  },
+  copyright: {
+    enable: false,
+    dates: '2024-2025',
+    company: '浙江省公众信息产业有限公司',
+    website: '',
+    beian: '',
+  },
+  watermark: {
+    enable: false,
+    text: 'PUBINFO',
+    width: 150,
+    x: 0,
+    y: 0,
+    x_space: 50,
+    y_space: 50,
+    alpha: 0.1,
+  },
+};
+
+/** 定义配置 */
+export function defineSettings(settings: Settings.all) {
+  globalSettings = defaultsDeep(settings, globalSettings);
+  return settings;
+}
+
+export function getSettings() {
+  return globalSettings;
+};