misp-ui-library-test 0.0.1

package/src/packages/tag/src/main.vue

@@ -0,0 +1,194 @@
+<script>
+/**
+ * @fileoverview Vue2 UI Library - Tag 标签组件
+ * @description 用于标记和选择的小型标签组件，支持多种类型、尺寸和效果
+ */
+
+import { colorOpacityTrans } from '../../../utils/color'
+
+export default {
+  /**
+   * 组件名称
+   * @type {String}
+   */
+  name: 'UiTag',
+
+  /**
+   * 组件属性配置
+   * @namespace Props
+   */
+  props: {
+    /**
+     * 标签文本内容
+     * @type {String}
+     * @default ''
+     */
+    text: String,
+
+    /**
+     * 是否可关闭
+     * @type {Boolean}
+     * @default false
+     */
+    closable: Boolean,
+
+    /**
+     * 标签类型
+     * @type {String}
+     * @default ''
+     * @values info, success, warning, danger
+     */
+    type: String,
+
+    /**
+     * 标签边框是否与文字颜色相同
+     * @type {Boolean}
+     * @default false
+     */
+    hit: Boolean,
+
+    /**
+     * 是否禁用渐变动画
+     * @type {Boolean}
+     * @default false
+     */
+    disableTransitions: Boolean,
+
+    /**
+     * 背景颜色，覆盖默认类型颜色
+     * @type {String}
+     * @default ''
+     */
+    color: String,
+
+    /**
+     * 标签尺寸
+     * @type {String}
+     * @default ''
+     * @values medium, small, mini
+     */
+    size: String,
+
+    /**
+     * 标签显示效果
+     * @type {String}
+     * @default 'light'
+     * @values dark, light, plain
+     */
+    effect: {
+      type: String,
+      default: 'light',
+      /**
+       * 效果值验证器
+       * @param {String} val - 传入的效果值
+       * @returns {Boolean} 是否为有效值
+       */
+      validator(val) {
+        return ['dark', 'light', 'plain'].indexOf(val) !== -1
+      },
+    },
+  },
+
+  /**
+   * 组件方法集合
+   * @namespace Methods
+   */
+  methods: {
+    /**
+     * 处理关闭按钮点击
+     * @method handleClose
+     * @param {Event} event - 点击事件对象
+     * @description 阻止事件冒泡并触发 close 事件
+     * @emits close
+     * @returns {void}
+     */
+    handleClose(event) {
+      event.stopPropagation()
+      this.$emit('close', event)
+    },
+
+    /**
+     * 处理标签点击
+     * @method handleClick
+     * @param {Event} event - 点击事件对象
+     * @description 触发 click 事件
+     * @emits click
+     * @returns {void}
+     */
+    handleClick(event) {
+      this.$emit('click', event)
+    },
+  },
+
+  /**
+   * 计算属性集合
+   * @namespace Computed
+   */
+  computed: {
+    /**
+     * 标签尺寸
+     * @member tagSize
+     * @memberof UiTag
+     * @instance
+     * @type {String}
+     * @description 优先使用组件 size 属性，否则使用全局配置
+     * @returns {String} 标签尺寸值
+     */
+    tagSize() {
+      return this.size || (this.$ELEMENT || {}).size
+    },
+  },
+
+  /**
+   * 渲染函数
+   * @method render
+   * @param {Function} h - 创建虚拟节点的函数
+   * @returns {VNode} 标签虚拟 DOM 节点
+   * @description 根据配置渲染标签元素，支持关闭按钮和过渡动画
+   */
+  render(h) {
+    const { type, tagSize, hit, effect } = this
+    /**
+     * CSS 类名列表
+     * @type {Array}
+     */
+    const classes = [
+      'ui-tag',
+      type ? `ui-tag--${type}` : '',
+      tagSize ? `ui-tag--${tagSize}` : '',
+      effect ? `ui-tag--${effect}` : '',
+      hit && 'is-hit',
+    ]
+
+    /**
+     * 如果自定义了颜色，生成 Tag 的字体、边框和背景颜色
+     * @type {Object}
+     */
+    let customColorProp = {}
+    if (this.color) {
+      customColorProp = {
+        color: this.color,
+        borderColor: this.color,
+        backgroundColor: colorOpacityTrans(this.color, 0.2),
+      }
+    }
+
+    /**
+     * 标签元素
+     * @type {VNode}
+     */
+    const tagEl = (
+      <span class={classes} style={customColorProp} on-click={this.handleClick}>
+        {this.$slots.default}
+        {this.closable && <i class="ui-tag__close ui-icon-close" on-click={this.handleClose}></i>}
+      </span>
+    )
+
+    /**
+     * 根据是否禁用过渡动画返回最终渲染结果
+     * @returns {VNode}
+     */
+    return this.disableTransitions ? tagEl : <transition name="ui-zoom-in-center">{tagEl}</transition>
+  },
+}
+</script>

package/src/packages/time-picker/index.js

@@ -0,0 +1,17 @@
+/**
+ * UiTimePicker 时间选择器组件
+ * 通过 type prop 支持多种时间选择模式:
+ *   - 'HH:mm:ss'                                -> 单时间
+ *   - 'YYYY-MM-DD HH:mm:ss'                     -> 单日期时间
+ *   - 'HH:mm:ss ~ HH:mm:ss'                     -> 时间范围
+ *   - 'YYYY-MM-DD HH:mm:ss ~ YYYY-MM-DD HH:mm:ss' -> 日期时间范围
+ */
+
+import UiTimePicker from './src/main.vue'
+
+// 自动安装
+UiTimePicker.install = function(Vue) {
+  Vue.component(UiTimePicker.name, UiTimePicker)
+}
+
+export default UiTimePicker

package/src/packages/time-picker/src/date-utils.js

@@ -0,0 +1,455 @@
+const separators = [' to ', ' 到 ', ' 至 ', ' - ', ' ~ ', ' , '];
+
+/**
+ * 解析单个时间格式片段，提取其包含的日期和时间成分字符串
+ * 
+ * 该函数用于识别并规整单个时间格式单元（非范围类型）。它会根据预定义的规则
+ * 验证年、月、日、时、分、秒、毫秒的组合合法性，并返回标准化的格式字符串。
+ * 
+ * **解析规则：**
+ * 1. **特殊值**：如果输入为 'timestamp' (不区分大小写)，直接返回 'timestamp'。
+ * 2. **日期部分**：
+ *    - 必须包含年份 (Y) 才能构成合法的日期部分起点。
+ *    - 合法组合：'YYYY' | `YYYY-MM` | `YYYY-MM-DD`。
+ *    - 非法组合：缺少年份、有年无月有日、有月无年等，均返回 null。
+ * 3. **时间部分**：
+ *    - 必须包含小时 (H) 才能构成合法的时间部分起点。
+ *    - 合法组合：'HH' | `HH:mm` | `HH:mm:ss` | `HH:mm:ss.SSS`。
+ *    - 非法组合：缺少小时、有分无时、有秒无分等，均返回 null。
+ * 4. **组合逻辑**：
+ *    - 若同时存在合法的日期和时间部分，返回 `${dateStr} ${timeStr}`。
+ *    - 若仅存在日期部分，返回 dateStr。
+ *    - 若仅存在时间部分，返回 `timeStr`。
+ *    - 若既无日期也无时间成分，或组合非法，返回 null。
+ * 
+ * @param {string} part - 待解析的时间格式片段，例如 'YYYY-MM-DD', 'HH:mm:ss', 'timestamp'
+ * @returns {string|null} 解析出的规整格式字符串。
+ *   - 成功时返回标准格式，如 'YYYY-MM-DD', 'HH:mm:ss.SSS', 'timestamp' 等。
+ *   - 失败时（格式非法或无法识别）返回 null。
+ * 
+ * @example
+ * parsePartType('YYYY-MM-DD')       // => 'YYYY-MM-DD'
+ * parsePartType('HH:mm:ss')         // => 'HH:mm:ss'
+ * parsePartType('timestamp')        // => 'timestamp'
+ * parsePartType('YYYY-MM-DD HH:mm:ss') // => 'YYYY-MM-DD HH:mm:ss'
+ * parsePartType('HH:mm:ss.SSS')     // => 'HH:mm:ss.SSS'
+ * parsePartType('MM-DD')            // => null (缺少年份)
+ * parsePartType('mm:ss')            // => null (缺少小时)
+ * parsePartType('invalid')          // => null
+ */
+function parsePartType(part) {
+  if (part.toLowerCase() === 'timestamp') return 'timestamp';
+
+  // 提取各时间成分的具体字符串
+  // 注意：正则需按顺序匹配，确保捕获最长的连续字符（如 YYYY 而不是 Y）
+  const matchY = part.match(/Y+/);
+  const matchM = part.match(/M+/);      // 大写 M 代表月份
+  const matchD = part.match(/D+/);
+  const matchH = part.match(/H+/);
+  const matchLowerM = part.match(/m+/); // 小写 m 代表分钟
+  const matchS = part.match(/s+/);      // 小写 s 代表秒
+  const matchSSS = part.match(/S{3,}/); // SSS 或更多 S 代表毫秒
+
+  const strY = matchY ? matchY[0] : null;
+  const strM = matchM ? matchM[0] : null;
+  const strD = matchD ? matchD[0] : null;
+  const strH = matchH ? matchH[0] : null;
+  const strLowerM = matchLowerM ? matchLowerM[0] : null;
+  const strS = matchS ? matchS[0] : null;
+  const strSSS = matchSSS ? matchSSS[0] : null;
+
+  // --- 日期部分构建 ---
+  let dateStr = '';
+  // 逻辑：必须包含年，或者符合特定规范。这里沿用原逻辑：必须有Y才能算合法的日期部分起点，或者严格遵循 Y-M-D 组合
+  // 原逻辑中：只有M或只有D被视为非法。这里保持一致。
+  if (strY && !strM && !strD) {
+    dateStr = strY;
+  } else if (strY && strM && !strD) {
+    dateStr = `${strY}-${strM}`;
+  } else if (strY && strM && strD) {
+    dateStr = `${strY}-${strM}-${strD}`;
+  } else if (strY || strM || strD) {
+    // 存在日期字符但组合不符合规范（如只有月日没有年，或有年无月有日等），视为非法
+    return null;
+  }
+
+  // --- 时间部分构建 ---
+  let timeStr = '';
+  if (strH && !strLowerM && !strS && !strSSS) {
+    timeStr = strH;
+  } else if (strH && strLowerM && !strS && !strSSS) {
+    timeStr = `${strH}:${strLowerM}`;
+  } else if (strH && strLowerM && strS && !strSSS) {
+    timeStr = `${strH}:${strLowerM}:${strS}`;
+  } else if (strH && strLowerM && strS && strSSS) {
+    timeStr = `${strH}:${strLowerM}:${strS}.${strSSS}`;
+  } else if (strH || strLowerM || strS || strSSS) {
+    // 存在时间字符但组合不符合规范（如只有分没有时），视为非法
+    return null;
+  }
+
+  // --- 组合日期与时间字符串 ---
+  if (dateStr && timeStr) {
+    return `${dateStr} ${timeStr}`;
+  } else if (dateStr) {
+    return dateStr;
+  } else if (timeStr) {
+    return timeStr;
+  }
+
+  // 既无日期也无时间成分，视为非法
+  return null;
+}
+
+/**
+ * 解析时间格式字符串，输出对应的时间格式规整版本
+ * 
+ * @param {string} format - 时间格式字符串，例如 'YYYY-MM-DD', 'HH:mm:ss', 'timestamp', 'YYYY-MM-DD HH:mm:ss to YYYY-MM-DD HH:mm:ss'
+ * @returns {string} 规整后的时间格式字符串，可能的返回值包括：
+ *   - 'YYYY', 'YYYY-MM', 'YYYY-MM-DD'
+ *   - 'HH', 'HH:mm', 'HH:mm:ss', 'HH:mm:ss.SSS'
+ *   - 'timestamp'
+ *   - [年月日][时分秒][-range]组合类型
+ *   - 默认为 'HH:mm:ss' (当格式非法或无法识别时)
+ * 
+ * @example
+ * formatterType('YYYY-MM-DD') // => 'YYYY-MM-DD'
+ * formatterType('HH:mm:ss') // => 'HH:mm:ss'
+ * formatterType('timestamp') // => 'timestamp'
+ * formatterType('YYYY-MM-DD HH:mm:ss') // => 'YYYY-MM-DD HH:mm:ss'
+ * formatterType('YYYY-MM-DD to YYYY-MM-DD') // => 'YYYY-MM-DD-range'
+ * formatterType('YY-M-D') // => 'YY-M-D' (保留原始格式)
+ * formatterType('invalid') // => 'HH:mm:ss'
+ */
+export function formatterType(format) {
+  // 参数校验：非字符串或空值直接返回默认类型
+  if (!format || typeof format !== 'string') {
+    return 'HH:mm:ss';
+  }
+
+  // 特殊处理：直接识别 'timestamp'
+  if (format.trim().toLowerCase() === 'timestamp') {
+    return 'timestamp';
+  }
+
+  // 首先检测范围类型
+  // 常见范围分隔符列表，按优先级尝试分割
+
+  const tokens = format.split(' ').map(t => t.trim()).filter(t => t);
+  let isRange = false
+  const startPart = []
+  const separators = []
+  const endPart = []
+  for (const token of tokens) {
+    if (isRange && endPart.length && !parsePartType(token)) break
+    if (parsePartType(token)) {
+      isRange ? endPart.push(token) : startPart.push(token)
+    }
+    if (!parsePartType(token)) {
+      isRange = true
+      separators.push(token)
+    }
+  }
+  if (startPart.length && endPart.length && separators.length) return `${startPart.join(' ')}-range`
+
+  // 以单值解析
+  const singleType = parsePartType(format);
+  if (singleType) {
+    return singleType;
+  }
+  // 缺省返回
+  return 'HH:mm:ss';
+}
+
+/**
+ * 获取时间范围格式中的连接符
+ * 
+ * @param {string} format - 时间格式字符串，例如 'YYYY-MM-DD to YYYY-MM-DD'
+ * @returns {string|null} 如果格式是范围类型，返回连接符；否则返回 null
+ * 
+ * @example
+ * getRangeSeparator('YYYY-MM-DD to YYYY-MM-DD') // => ' to '
+ * getRangeSeparator('YYYY-MM-DD - YYYY-MM-DD') // => ' - '
+ * getRangeSeparator('YYYY-MM-DD') // => null
+ */
+export function getRangeSeparator(format) {
+  if (!format || typeof format !== 'string') return null;
+
+  const tokens = format.split(' ').map(t => t.trim()).filter(t => t);
+  let isRange = false
+  const startPart = []
+  const separators = []
+  const endPart = []
+  for (const token of tokens) {
+    if (isRange && endPart.length && !parsePartType(token)) break
+    if (parsePartType(token)) {
+      isRange ? endPart.push(token) : startPart.push(token)
+    }
+    if (!parsePartType(token)) {
+      isRange = true
+      separators.push(token)
+    }
+  }
+  if (startPart.length && endPart.length && separators.length) return separators.join(' ')
+  else return null
+}
+
+/**
+ * 将 formatterType 的返回值映射为具体的业务分类
+ * @param {string} formatType - formatterType 函数的返回值
+ * @returns {'time' | 'date' | 'datetime' | 'date-range' | 'datetime-range' | 'timestamp' | 'timestamp-range' | 'year' | 'month' | 'unknown'} 
+ */
+export function classifyFormat(formatType) {
+  if (!formatType || typeof formatType !== 'string') {
+    return 'unknown';
+  }
+
+  // 1. 特殊处理：直接识别 timestamp
+  if (formatType === 'timestamp') {
+    return 'timestamp';
+  }
+  
+  // 特殊处理：识别 timestamp-range
+  if (formatType === 'timestamp-range') {
+    return 'timestamp-range';
+  }
+
+  // 2. 判断是否为范围类型 (以 -range 结尾)
+  const isRange = formatType.endsWith('-range');
+  
+  // 获取去除 -range 后的基础格式，用于判断是纯日期还是日期时间
+  // 如果是范围类型，去掉后缀；如果不是，保持原样
+  const baseFormat = isRange ? formatType.replace(/-range$/, '') : formatType;
+
+  // 3. 判断基础格式中是否包含时间成分 (H, m, s, S)
+  const hasTimeComponent = /[HmsS]/.test(baseFormat);
+
+  // 4. 判断基础格式中是否包含日期成分 (Y, M, D)
+  const hasDateComponent = /[YMD]/.test(baseFormat);
+
+  // --- 分类逻辑 ---
+
+  if (isRange) {
+    // 范围类型
+    if (hasTimeComponent) {
+      // 包含时间 -> 日期时间范围 (例如: YYYY-MM-DD HH:mm:ss-range)
+      return 'datetime-range';
+    } else if (hasDateComponent) {
+      // 仅包含日期 -> 日期范围 (例如: YYYY-MM-DD-range)
+      // 注意：通常范围选择器不区分 year-range 或 month-range，统一归为 date-range
+      // 如果有特殊需求，也可以在此处进一步细分，但通常 UI 组件中 date-range 涵盖所有日期粒度
+      return 'date-range';
+    } else {
+      return 'unknown';
+    }
+  } else {
+    // 非范围类型 (单值)
+    if (hasTimeComponent && hasDateComponent) {
+      // 既有日期又有时间 -> 日期时间 (例如: YYYY-MM-DD HH:mm:ss)
+      return 'datetime';
+    } else if (hasDateComponent) {
+      // 仅有日期部分，需要进一步细分
+      
+      // 检查是否仅为年份 (例如: YYYY)
+      if (onlyYear(baseFormat)) {
+        return 'year';
+      }
+      
+      // 检查是否仅为年月 (例如: YYYY-MM)
+      if (onlyMonth(baseFormat)) {
+        return 'month';
+      }
+
+      // 其他日期格式 (例如: YYYY-MM-DD)
+      return 'date';
+    } else if (hasTimeComponent) {
+      // 仅有时间 -> 时间 (例如: HH:mm:ss)
+      return 'time';
+    } else {
+      return 'unknown';
+    }
+  }
+}
+
+/**
+ * 判断输入的时间格式字符串是否为仅包含时间部分，如HH:mm:ss
+ * @param {string} format 
+ * @returns {boolean}
+ */
+export function onlyTime(format) {
+  // 参数校验：非字符串或空值返回 false
+  if (!format || typeof format !== 'string') {
+    return false;
+  }
+
+  // 定义日期和时间成分的正则表达式
+  // 日期成分：Y (年), M (月, 大写), D (日)
+  const datePattern = /[YMD]/;
+  // 时间成分：H (时), m (分, 小写), s (秒, 小写), S (毫秒, 大写)
+  const timePattern = /[HmsS]/;
+
+  // 如果包含任何日期成分，则不是纯时间格式
+  if (datePattern.test(format)) {
+    return false;
+  }
+
+  // 必须包含至少一种时间成分
+  if (!timePattern.test(format)) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * 判断输入的时间格式字符串是否为仅包含日期部分，如YYYY-MM-DD
+ * @param {string} format 
+ * @returns {boolean}
+ */
+export function onlyDate(format) {
+  // 参数校验：非字符串或空值返回 false
+  if (!format || typeof format !== 'string') {
+    return false;
+  }
+
+  // 定义日期和时间成分的正则表达式
+  // 时间成分：H (时), m (分, 小写), s (秒, 小写), S (毫秒, 大写)
+  const timePattern = /[HmsS]/;
+  // 日期成分：Y (年), M (月, 大写), D (日)
+  const datePattern = /[YMD]/;
+
+  // 如果包含任何时间成分，则不是纯日期格式
+  if (timePattern.test(format)) {
+    return false;
+  }
+
+  // 必须包含至少一种日期成分
+  if (!datePattern.test(format)) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * 判断输入的时间格式字符串是否仅包含年份部分，如YYYY
+ * @param {string} format 
+ * @returns {boolean}
+ */
+export function onlyYear(format) {
+  // 参数校验
+  if (!format || typeof format !== 'string') {
+    return false;
+  }
+
+  // 必须包含 Y
+  if (!/Y+/.test(format)) {
+    return false;
+  }
+
+  // 不能包含 M, D, H, m, s, S
+  // 注意：M 是大写月份，m 是小写分钟
+  if (/[MDHmsS]/.test(format)) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * 判断输入的时间格式字符串是否为年月格式，如YYYY-MM
+ * （即包含年和月，但不包含日、时、分、秒等更精细的单位）
+ * @param {string} format 
+ * @returns {boolean}
+ */
+export function onlyMonth(format) {
+  // 参数校验
+  if (!format || typeof format !== 'string') {
+    return false;
+  }
+
+  // 必须包含 Y 和 M (大写)
+  const hasY = /Y+/.test(format);
+  const hasM = /M+/.test(format);
+
+  if (!hasY || !hasM) {
+    return false;
+  }
+
+  // 不能包含 D, H, m, s, S
+  if (/[DHmsS]/.test(format)) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * 判断输入的时间格式字符串是否包含小时部分
+ * 
+ * @param {string} format - 时间格式字符串，例如 'HH:mm:ss', 'YYYY-MM-DD HH:mm'
+ * @returns {boolean} 如果格式中包含小时标记 (H)，则返回 true，否则返回 false
+ * 
+ * @example
+ * hasHour('HH:mm:ss') // => true
+ * hasHour('YYYY-MM-DD') // => false
+ * hasHour('mm:ss') // => false
+ */
+export function hasHour(format) {
+  // 参数校验：非字符串或空值返回 false
+  if (!format || typeof format !== 'string') {
+    return false;
+  }
+
+  // 检查是否包含 H (小时)
+  // 注意：通常小时用 H 或 hh 表示，这里主要检测大写 H，兼容常见格式
+  return /H+/.test(format);
+}
+
+/**
+ * 判断输入的时间格式字符串是否包含分钟部分
+ * 
+ * @param {string} format - 时间格式字符串，例如 'HH:mm:ss', 'YYYY-MM-DD HH:mm'
+ * @returns {boolean} 如果格式中包含分钟标记 (m)，则返回 true，否则返回 false
+ * 
+ * @example
+ * hasMinute('HH:mm:ss') // => true
+ * hasMinute('HH:mm') // => true
+ * hasMinute('HH:ss') // => false
+ * hasMinute('YYYY-MM-DD') // => false
+ */
+export function hasMinute(format) {
+  // 参数校验：非字符串或空值返回 false
+  if (!format || typeof format !== 'string') {
+    return false;
+  }
+
+  // 检查是否包含 m (分钟)
+  // 注意：必须区分大写 M (月份) 和小写 m (分钟)
+  // 使用正则 /[^M]m+|^m+/ 或者简单检测小写 m，但需确保不是 MM 的一部分
+  // 更严谨的方式：查找独立的小写 m 序列，且不被大写 M 混淆
+  // 由于格式字符串通常由分隔符连接，直接匹配小写 m 即可，因为大写 M 不会匹配小写 m
+  return /m+/.test(format);
+}
+
+/**
+ * 判断输入的时间格式字符串是否包含秒部分
+ * 
+ * @param {string} format - 时间格式字符串，例如 'HH:mm:ss', 'YYYY-MM-DD HH:mm:ss'
+ * @returns {boolean} 如果格式中包含秒标记 (s)，则返回 true，否则返回 false
+ * 
+ * @example
+ * hasSecond('HH:mm:ss') // => true
+ * hasSecond('HH:mm') // => false
+ * hasSecond('YYYY-MM-DD') // => false
+ */
+export function hasSecond(format) {
+  // 参数校验：非字符串或空值返回 false
+  if (!format || typeof format !== 'string') {
+    return false;
+  }
+
+  // 检查是否包含 s (秒)
+  // 注意：必须区分大写 S (毫秒) 和小写 s (秒)
+  return /s+/.test(format);
+}