y-admin-pro 0.0.1

package/packages/utils/theme-util.ts

@@ -0,0 +1,323 @@
+import { generate } from '@ant-design/colors';
+import { FastColor } from '@ant-design/fast-color';
+import type { RGB } from '@ant-design/fast-color';
+
+/**
+ * 主题皮肤配置
+ */
+export interface SkinConfig {
+  /** 主题皮肤名称 */
+  name?: string;
+  /** 主题皮肤缩略图 */
+  cover?: string;
+  /** 自定义主题皮肤基于的默认主题皮肤名称 */
+  skinName?: string;
+  /** 主题色 */
+  color?: string;
+  /** 背景图片 */
+  wallpaper?: string;
+  /** 背景蒙层 */
+  maskColor?: string;
+  /** 顶栏背景 */
+  headerBg?: string;
+  /** 侧栏背景 */
+  sidebarBg?: string;
+  /** 卡片背景 */
+  cardBg?: string;
+  /** 弹层背景 */
+  overlayBg?: string;
+  /** 弹层背景蒙层 */
+  overlayMaskColor?: string;
+  /** 暗黑主题配置 */
+  darkConfig?: Omit<SkinConfig, 'name' | 'darkConfig'>;
+}
+
+/**
+ * 获取主题变量选择器
+ * @param themeSelector 主题变量选择器
+ */
+function getThemeSelector(themeSelector?: string) {
+  return themeSelector ?? ':root';
+}
+
+/**
+ * 获取暗黑主题变量选择器
+ * @param darkSelector 暗黑主题变量选择器
+ */
+function getDarkSelector(darkSelector?: string) {
+  return darkSelector ?? 'html.dark';
+}
+
+/**
+ * 获取暗黑主题节点类名
+ * @param darkClass 暗黑主题节点类名
+ */
+function getDarkClass(darkClass?: string) {
+  return darkClass ?? 'dark';
+}
+
+/**
+ * 主题节点设置主题色属性
+ * @param color 主题色
+ * @param themeEl 主题节点
+ */
+function setColorAttr(color: string | null | undefined, themeEl: HTMLElement) {
+  if (color) {
+    themeEl.dataset.color = color;
+  } else {
+    themeEl.removeAttribute('data-color');
+  }
+}
+
+/**
+ * 判断是否是颜色值
+ * @param value 颜色
+ */
+export function isColorValue(value?: string) {
+  let color: FastColor | undefined = void 0;
+  try {
+    color = value ? new FastColor(value) : void 0;
+    if (color != null) {
+      const rgb = color.toRgb();
+      if (
+        rgb.r === 0 &&
+        rgb.g === 0 &&
+        rgb.b === 0 &&
+        rgb.a === 1 &&
+        color.toRgbString() !== value
+      ) {
+        color = void 0;
+      }
+    }
+  } catch (_e) {
+    //
+  }
+  return color != null;
+}
+
+/**
+ * 生成背景值
+ * @param bg 背景
+ * @param mask 背景蒙层
+ */
+function getBgValue(bg?: string, mask?: string) {
+  if (!mask || !bg) {
+    return bg;
+  }
+  if (!isColorValue(mask)) {
+    return `${mask}, ${bg}`;
+  }
+  return `linear-gradient(${mask}, ${mask}) center / 102% 102%, ${bg}`;
+}
+
+/**
+ * 增加颜色透明度
+ * @param rgb 颜色
+ * @param minus 增加的透明度
+ */
+function getColorLevel(rgb: RGB, minus: number) {
+  const a = (Math.min(Math.max(rgb.a * 100 - minus, 0), 100) / 100).toFixed(2);
+  return new FastColor({ ...rgb, a: Number(a) }).toRgbString();
+}
+
+/**
+ * 生成色阶
+ * @param color 颜色
+ * @param dark 是否暗黑模式
+ * @param isTransparent 是否透明模式
+ */
+function generateColors(color: string, dark: boolean, isTransparent: boolean) {
+  const levels = generate(color, dark ? { theme: 'dark' } : {});
+  const colors = {
+    color, // 主色
+    colorL: levels[4], // 亮
+    colorXL: levels[3], // 很亮
+    colorXXL: levels[2], // 特亮
+    colorXXXL: levels[1], // 超亮
+    colorXXXXL: levels[0], // 极亮
+    colorD: dark ? levels[5] : levels[6] // 暗
+  };
+  if (!isTransparent) {
+    return colors;
+  }
+  const rgb = new FastColor(color).toRgb();
+  return {
+    color, // 主色
+    colorL: getColorLevel(rgb, 18), // 亮
+    colorXL: getColorLevel(rgb, 36), // 很亮
+    colorXXL: getColorLevel(rgb, 58), // 特亮
+    colorXXXL: getColorLevel(rgb, 72), // 超亮
+    colorXXXXL: getColorLevel(rgb, 86), // 极亮
+    colorD: colors.colorD // 暗
+  };
+}
+
+/**
+ * 生成色阶 css 变量
+ * @param color 颜色
+ * @param dark 是否暗黑模式
+ * @param isTransparent 是否透明模式
+ * @param varName 颜色对应的变量名
+ */
+function generateCssVar(
+  color: string,
+  dark?: boolean,
+  isTransparent?: boolean,
+  varName = 'primary'
+) {
+  const colors = generateColors(color, !!dark, !!isTransparent);
+  return [
+    `--el-color-${varName}:${colors.color};`,
+    `--el-color-${varName}-light-3:${colors.colorL};`,
+    `--el-color-${varName}-light-5:${colors.colorXL};`,
+    `--el-color-${varName}-light-7:${colors.colorXXL};`,
+    `--el-color-${varName}-light-8:${colors.colorXXXL};`,
+    `--el-color-${varName}-light-9:${colors.colorXXXXL};`,
+    `--el-color-${varName}-dark-2:${colors.colorD};`
+  ];
+}
+
+/**
+ * 切换主题色
+ * @param color 颜色值
+ * @param dark 是否暗黑模式
+ * @param isTransparent 是否是皮肤主题
+ * @param themeEl 主题节点
+ * @param themeSelector 主题变量选择器
+ * @param darkClass 暗黑主题节点类名
+ * @param darkSelector 暗黑主题变量选择器
+ */
+export function changeColor(
+  color?: string | null,
+  dark?: boolean,
+  isTransparent?: boolean,
+  themeEl?: HTMLElement,
+  themeSelector?: string,
+  darkClass?: string,
+  darkSelector?: string
+) {
+  const $el = themeEl ?? document.documentElement;
+  if (!$el) {
+    return;
+  }
+  const id = 'ele-theme-var';
+  const el = document.getElementById(id);
+  if (el?.parentNode) {
+    el.parentNode.removeChild(el);
+  }
+  if (color) {
+    const selector = dark
+      ? getDarkSelector(darkSelector)
+      : getThemeSelector(themeSelector);
+    const colorCssVar = generateCssVar(color, dark, isTransparent);
+    if (isTransparent) {
+      colorCssVar.push(
+        generateCssVar(
+          dark ? '#49aa19' : '#52c41a',
+          dark,
+          isTransparent,
+          'success'
+        ).join('')
+      );
+      colorCssVar.push(
+        generateCssVar(
+          dark ? '#d89614' : '#faad14',
+          dark,
+          isTransparent,
+          'warning'
+        ).join('')
+      );
+      colorCssVar.push(
+        generateCssVar(
+          dark ? '#dc4446' : '#ff4d4f',
+          dark,
+          isTransparent,
+          'danger'
+        ).join('')
+      );
+      colorCssVar.push(
+        generateCssVar(
+          dark ? '#dc4446' : '#ff4d4f',
+          dark,
+          isTransparent,
+          'error'
+        ).join('')
+      );
+      colorCssVar.push(
+        generateCssVar(
+          dark ? '#8b8b8b' : '#909399',
+          dark,
+          isTransparent,
+          'info'
+        ).join('')
+      );
+    }
+    const elem = document.createElement('style');
+    elem.id = id;
+    elem.setAttribute('type', 'text/css');
+    elem.innerHTML = `${selector}{ ${colorCssVar.join('')} }`;
+    document.head.appendChild(elem);
+  }
+  setColorAttr(color, $el);
+  const darkClassName = getDarkClass(darkClass);
+  if (dark) {
+    $el.classList.add(darkClassName);
+  } else {
+    $el.classList.remove(darkClassName);
+  }
+}
+
+/**
+ * 切换主题皮肤
+ * @param skinConfig 主题皮肤配置
+ * @param dark 是否暗黑模式
+ * @param themeEl 主题节点
+ * @param themeSelector 主题变量选择器
+ * @param themeClass 主题节点类名
+ */
+export function changeSkin(
+  skinConfig?: SkinConfig | null,
+  dark?: boolean,
+  themeEl?: HTMLElement,
+  themeSelector?: string,
+  themeClass?: string
+) {
+  const $el = themeEl ?? document.documentElement;
+  if (!$el) {
+    return;
+  }
+  const id = 'ele-skin-var';
+  const el = document.getElementById(id);
+  if (el?.parentNode) {
+    el.parentNode.removeChild(el);
+  }
+  const className = themeClass ?? 'is-transparent';
+  if (!skinConfig) {
+    $el.classList.remove(className);
+    return;
+  }
+  const selector = themeSelector ?? 'html.is-transparent';
+  const skin = dark ? skinConfig.darkConfig || {} : skinConfig;
+  const wallpaper = getBgValue(skin.wallpaper, skin.maskColor);
+  const overlayBg = getBgValue(skin.overlayBg, skin.overlayMaskColor);
+  const tooltipBg = getBgValue(
+    skinConfig.darkConfig?.overlayBg,
+    skinConfig.darkConfig?.overlayMaskColor
+  );
+  const cssVar = [
+    `${selector}{`,
+    wallpaper ? `--ele-skin-bg-wallpaper:${wallpaper};` : void 0,
+    skin.headerBg ? `--ele-skin-bg-header:${skin.headerBg};` : void 0,
+    skin.sidebarBg ? `--ele-skin-bg-sidebar:${skin.sidebarBg};` : void 0,
+    skin.cardBg ? `--ele-skin-bg-card:${skin.cardBg};` : void 0,
+    overlayBg ? `--ele-skin-bg-overlay:${overlayBg};` : void 0,
+    tooltipBg ? `--ele-skin-bg-tooltip:${tooltipBg};` : void 0,
+    '}'
+  ];
+  const elem = document.createElement('style');
+  elem.id = id;
+  elem.setAttribute('type', 'text/css');
+  elem.innerHTML = cssVar.filter((s) => !!s).join('');
+  document.head.appendChild(elem);
+  $el.classList.add(className);
+}

package/packages/utils/validate.ts

@@ -0,0 +1,359 @@
+/** 格式校验工具 */
+
+/**
+ * 手机号正则表达式
+ */
+export const phoneReg = /^1\d{10}$/;
+
+/**
+ * 手机号正则表达式(强校验)
+ */
+export const phoneStrongReg = /^1[3|5|7|8|9][0-9]{9}$/;
+
+/**
+ * 固话正则表达式
+ */
+export const telReg =
+  /^(400|800)([0-9\\-]{7,10})|(([0-9]{4}|[0-9]{3})(-| )?)?([0-9]{7,8})((-| |转)*([0-9]{1,4}))?$/;
+
+/**
+ * 邮箱正则表达式
+ */
+export const emailReg =
+  /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+
+/**
+ * 网址正则表达式
+ */
+export const urlReg = /(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/;
+
+/**
+ * 身份证正则表达式
+ */
+export const identityReg = /(^\d{15}$)|(^\d{17}(x|X|\d)$)/;
+
+/**
+ * 日期正则表达式
+ */
+export const dateReg =
+  /^(\d{4})[-/](\d{1}|0\d{1}|1[0-2])([-/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/;
+
+/**
+ * 数字正则表达式
+ */
+export const numberReg = /^[0-9]+\.?[0-9]*$/;
+
+/**
+ * 整数正则表达式
+ */
+export const integerReg = /^-?\d+$/;
+
+/**
+ * 正整数正则表达式
+ */
+export const positiveIntegerReg = /^[1-9]\d*$/;
+
+/**
+ * 负整数正则表达式
+ */
+export const negativeIntegerReg = /^-[1-9]\d*$/;
+
+/**
+ * 非负整数(正整数或0)正则表达式
+ */
+export const nonNegativeIntegerReg = /^\d+$/;
+
+/**
+ * 非正整数(负整数或0)正则表达式
+ */
+export const nonPositiveIntegerReg = /^-[1-9]\d*|0/;
+
+/**
+ * 中文正则表达式
+ */
+export const chineseReg = /^[\u4E00-\u9FA5]{2,4}$/;
+
+/**
+ * 端口号正则表达式
+ */
+export const portReg =
+  /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/;
+
+/**
+ * IP 正则表达式
+ */
+export const ipReg =
+  /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
+
+/**
+ * 经度正则表达式, -180.0 ~ +180.0(整数部分为 0 ~ 180 , 必须输入 1 到 5 位小数)
+ */
+export const longitudeReg =
+  /^[-|+]?(0?\d{1,2}\.\d{1,5}|1[0-7]?\d{1}\.\d{1,5}|180\.0{1,5})$/;
+
+/**
+ * 纬度正则表达式, -90.0 ~ +90.0(整数部分为 0 ~ 90, 必须输入 1 到 5 位小数)
+ */
+export const latitudeReg = /^[-|+]?([0-8]?\d{1}\.\d{1,5}|90\.0{1,5})$/;
+
+/**
+ * 是否是手机号
+ * @param value
+ */
+export function isPhone(value: string): boolean {
+  return phoneReg.test(value);
+}
+
+/**
+ * 是否是手机号(强校验)
+ * @param value
+ */
+export function isPhoneStrong(value: string): boolean {
+  return phoneStrongReg.test(value);
+}
+
+/**
+ * 是否为固话
+ * @param value
+ */
+export function isTel(value: string): boolean {
+  return telReg.test(value);
+}
+
+/**
+ * 是否是邮箱
+ * @param value
+ */
+export function isEmail(value: string): boolean {
+  return emailReg.test(value);
+}
+
+/**
+ * 是否是网址
+ * @param value
+ */
+export function isUrl(value: string): boolean {
+  return urlReg.test(value);
+}
+
+/**
+ * 是否是身份证
+ * @param value
+ */
+export function isIdentity(value: string): boolean {
+  return identityReg.test(value);
+}
+
+/**
+ * 是否是日期
+ * @param value
+ */
+export function isDate(value: string): boolean {
+  return dateReg.test(value);
+}
+
+/**
+ * 是否是数字
+ * @param value
+ */
+export function isNumber(value: string): boolean {
+  //return !isNaN(value);
+  return numberReg.test(value);
+}
+
+/**
+ * 是否是整数
+ * @param value
+ */
+export function isInteger(value: string): boolean {
+  return integerReg.test(value);
+}
+
+/**
+ * 是否是正整数
+ * @param value
+ */
+export function isPositiveInteger(value: string): boolean {
+  return positiveIntegerReg.test(value);
+}
+
+/**
+ * 是否是负整数
+ * @param value
+ */
+export function isNegativeInteger(value: string): boolean {
+  return negativeIntegerReg.test(value);
+}
+
+/**
+ * 是否是非负整数(正整数或 0)
+ * @param value
+ */
+export function isNonNegativeInteger(value: string): boolean {
+  return nonNegativeIntegerReg.test(value);
+}
+
+/**
+ * 是否是非正整数(负整数或 0)
+ * @param value
+ */
+export function isNonPositiveInteger(value: string): boolean {
+  return nonPositiveIntegerReg.test(value);
+}
+
+/**
+ * 是否是中文
+ * @param value
+ */
+export function isChinese(value: string): boolean {
+  return chineseReg.test(value);
+}
+
+/**
+ * 是否是端口号
+ * @param value
+ */
+export function isPort(value: string): boolean {
+  return portReg.test(value);
+}
+
+/**
+ * 是否是 IP
+ * @param value
+ */
+export function isIP(value: string): boolean {
+  return ipReg.test(value);
+}
+
+/**
+ * 是否是经度, -180.0 ~ +180.0(整数部分为 0 ~ 180 , 必须输入 1 到 5 位小数)
+ * @param value
+ */
+export function isLongitude(value: string): boolean {
+  return longitudeReg.test(value);
+}
+
+/**
+ * 是否是纬度, -90.0 ~ +90.0(整数部分为 0 ~ 90 , 必须输入 1 到 5 位小数)
+ * @param value
+ */
+export function isLatitude(value: string): boolean {
+  return latitudeReg.test(value);
+}
+
+/**
+ * 验证最小长度, 最大长度
+ * @param value
+ * @param minLength
+ * @param maxLength
+ */
+export function maxMinLength(
+  value: string,
+  minLength?: number,
+  maxLength?: number
+): boolean {
+  if (value == null) {
+    return !minLength;
+  }
+  if (minLength && value.toString().length < minLength) {
+    return false;
+  }
+  return !(maxLength != null && value.toString().length > maxLength);
+}
+
+/**
+ * 验证最小值, 最大值
+ * @param value
+ * @param min
+ * @param max
+ */
+export function maxMin(value: number, min?: number, max?: number): boolean {
+  if (value == null) {
+    return min == null;
+  }
+  if (min != null && value < min) {
+    return false;
+  }
+  return !(max != null && value > max);
+}
+
+/**
+ * 是否是身份证(强校验)
+ * @param value
+ */
+export function isIdentityStrong(value: string): string | null | undefined {
+  if (!isIdentity(value)) {
+    return '身份证号码格式错误';
+  }
+  const ai =
+    value.length === 18
+      ? value.substring(0, 17)
+      : value.substring(0, 6) + '19' + value.substring(6, 15);
+  // 验证出生年月
+  const year = ai.substring(6, 10); // 年
+  const birthday =
+    year + '/' + ai.substring(10, 12) + '/' + ai.substring(12, 14);
+  if (!isDate(birthday)) {
+    return '身份证号码出生日期无效';
+  }
+  const now = new Date();
+  if (
+    now.getFullYear() - Number.parseInt(year) > 150 ||
+    now.getTime() - new Date(birthday).getTime() < 0
+  ) {
+    return '身份证号码出生日期不在有效范围';
+  }
+  // 验证地区码
+  const areaCodes = [
+    '11',
+    '12',
+    '13',
+    '14',
+    '15',
+    '21',
+    '22',
+    '23',
+    '31',
+    '32',
+    '33',
+    '34',
+    '35',
+    '36',
+    '37',
+    '41',
+    '42',
+    '43',
+    '44',
+    '45',
+    '46',
+    '50',
+    '51',
+    '52',
+    '53',
+    '54',
+    '61',
+    '62',
+    '63',
+    '64',
+    '65',
+    '71',
+    '81',
+    '82',
+    '91'
+  ];
+  if (areaCodes.indexOf(ai.substring(0, 2)) === -1) {
+    return '身份证号码地区编码错误';
+  }
+  // 验证最后一位
+  if (value.length === 18) {
+    const valCode = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
+    const wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+    let totalMulAiWi = 0;
+    for (let i = 0; i < 17; i++) {
+      totalMulAiWi += Number.parseInt(ai.charAt(i)) * wi[i];
+    }
+    if (value !== ai + valCode[totalMulAiWi % 11]) {
+      return '身份证号码最后一位错误';
+    }
+  }
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - packages/*
+  - docs

package/publish.sh

@@ -0,0 +1,37 @@
+#!/usr/bin/env bash
+set -e
+
+npm run clean
+
+npm run build
+cd dist/t-ui-plus
+npm publish --registry=https://registry.npmjs.org/
+echo "Successfully published t-ui-plus"
+cd -
+
+cd packages/utils
+echo "build utils..."
+npm run build
+echo "publish utils..."
+npm publish --registry=https://registry.npmjs.org/
+echo "Successfully published utils"
+cd -
+
+cd packages/resolver
+echo "build resolver..."
+npm run build
+echo "publish resolver..."
+npm publish --registry=https://registry.npmjs.org/
+echo "Successfully published resolver"
+cd -
+
+cd packages/eslint-config
+echo "build eslint-config..."
+npm run build
+echo "publish eslint-config..."
+npm publish --registry=https://registry.npmjs.org/
+echo "Successfully published eslint-config"
+cd -
+
+echo "✅ Publish completed"
+exit