misp-ui-library-test 0.0.1

package/src/playground/mixins/element.js

@@ -0,0 +1,98 @@
+import _ from '../../utils/lodash/index.js'
+
+export default {
+  props: {
+    // instance: {},
+  },
+  computed: {
+    // 获取 instance 实例类名
+    className() {
+      return (this.instance && this.instance.className) || ''
+    },
+    // 元素标准样式注入
+    styleProp() {
+      return {
+        left: this.instance.left,
+        top: this.instance.top,
+        width: this.instance.width,
+        height: this.instance.height,
+        margin: this.instance.margin,
+        padding: this.instance.padding,
+        flex: this.instance.flex,
+      }
+    },
+    // 元素标准类名注入
+    extraClassName() {
+      return [
+        this.instance.flexEnd ? 'flex-end' : '',
+        this.instance && this.instance.extraCustom && this.instance.extraCustom.isCard ? 'is-card' : ''
+      ]
+    },
+    // 元素交互事件配置
+    echoCode() {
+      return (this.instance && this.instance.echoCode) || {}
+    },
+    // 元素是否支持点击
+    hasClickPermission() {
+      const clickCode = this.echoCode && this.echoCode.click
+      return !_.isEmpty(clickCode)
+    },
+    // 元素是否支持数据变更响应
+    hasChangePermission() {
+      const changeCode = this.echoCode && this.echoCode.change
+      return !_.isEmpty(changeCode)
+    }
+  },
+  methods: {
+    /**
+     * 点击事件响应
+     * @param {PointerEvent} event 
+     */
+    clickHandler(event) {
+      const clickCode = this.echoCode && this.echoCode.click;
+      if (clickCode === undefined || !this.hasClickPermission) return;
+      event.stopPropagation()
+      this.eventEchoHandler(clickCode || '', event)
+    },
+    /**
+     * 数据变更事件响应
+     */
+    changeHandler() {
+      const changeCode = this.echoCode && this.echoCode.change
+      if (changeCode === undefined || !this.hasChangePermission) return;
+      this.eventEchoHandler(changeCode, ...arguments)
+    },
+    /**
+     * 元素交互事件响应
+     * @param {string | Array} eventCode 
+     */
+    eventEchoHandler(eventCode, ...arg) {
+      if (_.isEmpty(eventCode)) return
+      if (Array.isArray(eventCode)) {
+        // 点击事件配置了多个响应 code 时, 按序触发
+        eventCode.forEach(code => {
+          echo(code, ...arg)
+        })
+      } else {
+        echo(eventCode, ...arg)
+      }
+    },
+    /**
+     * 单个标准事件响应
+     * @param {string | Function} code 
+     */
+    echo(code, ...arg) {
+      if (typeof code === 'function') {
+        code(this, ...arg)
+      } else if (typeof code === 'string') {
+        this.$emit(code, this.eventArgumentsReturn())
+      }
+    },
+    /**
+     * 事件参数返回处理
+     */
+    eventArgumentsReturn() {
+      return this.instance;
+    }
+  }
+}

package/src/playground/types/element.js

@@ -0,0 +1,197 @@
+/**
+ * 判断尺寸是否为百分比弹性宽度（支持负数）
+ */
+export const elasticSizeReg = /^-?\d+(?:\.\d+)?%$/
+
+/**
+ * 判断尺寸是否为像素固定宽度（支持负数）
+ */
+export const pixcelSizeReg = /^-?\d+(?:\.\d+)?px$/
+
+/**
+ * 判断尺寸是否弹性占位
+ */
+export const flexRangeReg = /^\d+(?:\.\d+)?fr$/
+
+/**
+ * 判断尺寸是否为计算尺寸
+ */
+export const calcSizeReg = /^calc\(\s*\)$/
+
+/**
+ * 特定类型尺寸
+ */
+export const enumSizeMap = ['max-content']
+
+/**
+ * @typedef {Object} EchoCode
+ * @property {string|Function|Array<string|Function>} [x] - echo event name
+ */
+
+/**
+ * @typedef {Object} ElementProp
+ * @property {string} [left] - 元素距离容器左边界的距离
+ * @property {string} [top] - 元素距离容器上边界的距离
+ * @property {string} [width] - 元素宽度
+ * @property {string} [height] - 元素高度
+ * @property {string|number[]} [margin] - 元素与其他元素的间距
+ * @property {string|number[]} [padding] - 元素与容器的间距
+ * @property {number|string} [flex] - 子元素弹性比例
+ * @property {boolean} [flexEnd] - 是否将元素放置在容器末尾
+ * @property {EchoCode} [echoCode] - 元素事件回调处理器
+ * @property {Object} [extraCustom] - 额外自定义属性
+ */
+
+export class Element {
+  /**
+   * 创建 Element 实例
+   * @constructor
+   * @param {ElementProp} options - 元素配置选项
+   * @param {string} [options.left=''] - 元素距离容器左边界的距离
+   * @param {string} [options.top=''] - 元素距离容器上边界的距离
+   * @param {string} [options.width=''] - 元素宽度
+   * @param {string} [options.height=''] - 元素高度
+   * @param {string|number[]} [options.margin=''] - 元素与其他元素的间距
+   * @param {string|number[]} [options.padding=''] - 元素与容器的间距
+   * @param {number|string} [options.flex=''] - 子元素弹性比例
+   * @param {boolean} [options.flexEnd=false] - 是否将元素放置在容器末尾
+   * @param {EchoCode} [options.echoCode={}] - 元素事件回调处理器
+   * @param {Object} [options.extraCustom] - 额外自定义属性
+   * @throws {TypeError} 当 ElementProp 中存在非法值时抛出
+   * @throws {TypeError} 当 echoCode 中存在非法值时抛出
+   */
+  constructor(options) {
+    const {
+      left = '',
+      top = '',
+      width = '',
+      height = '',
+      margin = '',
+      padding = '',
+      flex = '',
+      flexEnd = false,
+      echoCode = {},
+      ...extraCustom
+    } = options
+
+    // 元素长度属性校验
+    const distanceValueValidSet = [left, top, width, height]
+    if (distanceValueValidSet.some(value => !this.isDinstanceValue(value))) {
+      throw new TypeError('ElementProp 中存在非法值')
+    }
+
+    // 边距属性校验
+    const roundDistanceValueValidSet = [margin, padding]
+    if (roundDistanceValueValidSet.some(value => {
+      if (Array.isArray(value)) {
+        return !value.every(v => typeof v === 'number')
+      } else {
+        return this.isDinstanceValue(value) && !value.split(' ').every(p => this.isDinstanceValue(p))
+      }
+    })) {
+      throw new TypeError('ElementProp 中存在非法值, 请检查 margin 和 padding')
+    }
+
+    // EchoCode 校验
+    if (!(echoCode instanceof Object)) {
+      throw new TypeError('echoCode 中存在非法值')
+    } else {
+      Object.keys(echoCode).forEach(eventName => {
+        const eventEcho = echoCode[eventName]
+        if (Array.isArray(eventEcho) && !eventEcho.every(value => ['string', 'function'].includes(typeof value))) {
+          throw new TypeError('echoCode 中存在非法值')
+        } else if (!Array.isArray(eventEcho) && !['string', 'function'].includes(typeof eventEcho)) {
+          throw new TypeError('echoCode 中存在非法值')
+        }
+      })
+    }
+
+    this.left = left
+    this.top = top
+    this.width = width
+    this.height = height
+    this.margin = margin
+    this.padding = padding
+    this.flex = flex
+    this.flexEnd = flexEnd
+    this.echoCode = echoCode
+    this.extraCustom = extraCustom
+  }
+
+  /**
+   * 返回类属性值
+   * @param {string} field
+   * @returns {*} 元素中的属性值
+   */
+  getProperty(field) {
+    return this[field]
+  }
+
+  /**
+   * 属性 Getter 传递
+   * @param {Object} prop 构造入参 
+   * @param {string} field 字段名
+   */
+  propertyGetter(prop, field) {
+    const desc = Object.getOwnPropertyDescriptor(prop, field)
+    if (desc?.get) {
+      Object.defineProperty(this, field, {
+        ...desc,
+        get() { return prop[field] }
+      })
+    } else {
+      this[field] = prop[field]
+    }
+  }
+
+  /**
+   * 设置类属性值
+   * @param {string} field 
+   * @param {*} value
+   */
+  setProperty(field, value) {
+    this[field] = value
+  }
+
+  /**
+   * 合并类属性值
+   * @param {string} field 
+   * @param {Object} value 
+   */
+  assignProperty(field, value) {
+    Object.assign(this[field], value)
+  }
+
+  /**
+   * 判断传入值是否为 '' 或者为 '100%'/'32px'/'max-content' 此类 css 长度
+   * @param {string} value - 传入值
+   * @returns {Boolean}
+   */
+  isDinstanceValue(value) {
+    return !value || elasticSizeReg.test(value) || pixcelSizeReg.test(value) || enumSizeMap.includes(value)
+  }
+
+  /**
+   * 判断传入值是否符合弹性布局组成元素
+   * @param {string} value 传入值
+   * @returns {boolean} 是否符合弹性布局组成元素
+   */
+  isflexRangeValue(value) {
+    return !value || (elasticSizeReg.test(value) || pixcelSizeReg.test(value) || flexRangeReg.test(value))
+  }
+
+  /**
+   * 判定 Icon 类型
+   * @param {string} icon - icon 名
+   * @returns {string} - icon 类型 ('' | 'elIcon' | 'svgIcon')
+   */
+  iconType(icon) {
+    if (icon.startsWith('el-icon')) {
+      return 'elIcon'
+    } else {
+      return ''
+    }
+  }
+
+  refresh() {}
+}

package/src/playground/types/layout.js

@@ -0,0 +1,80 @@
+import { Element, ElementProp } from './element.js'
+
+/**
+ * @typedef {Object} LayoutExtraProp
+ * @property {Element[]} children - 子元素列表
+ */
+/**
+ * @typedef {ElementProp & LayoutExtraProp} LayoutProp
+ */
+
+/**
+ * Layout 布局类 - 继承自 Element
+ * @extends Element
+ */
+export class Layout extends Element {
+  /**
+   * 创建 Layout 实例
+   * @constructor
+   * @param {LayoutProp} options - 布局配置选项
+   * @param {any[]} [options.children=[]] - 子元素列表
+   * @throws {TypeError} 当未传入组件列表时抛出
+   * @throws {TypeError} 当存在非 Element 实例时抛出
+   */
+  constructor(options) {
+    const { children = [], ...boxProp } = options
+    super(boxProp)
+
+    if (!Array.isArray(children)) {
+      throw new TypeError('Layout 中必须传入组件列表')
+    }
+
+    this.children = children
+  }
+
+  /**
+   * @override 布局内容刷新，转发子元素刷新方法
+   */
+  refresh() {
+    this.children.forEach(child => child.refresh())
+  }
+
+  /**
+   * 获取元素索引组，按照给定判定方法对给定数组进行索引分组
+   * @template T
+   * @param {Array<T>} arr - 值数组
+   * @param {function(T): boolean} [validPredicate] - 判定元素通过方法，默认判断值是否为真
+   * @param {function(T): boolean} [passPredicate] - 判定元素跳过方法，默认与 validPredicate 相反
+   * @returns {Array<Array<number>>} 索引分组数组
+   * @throws {TypeError} 当传入非数组对象时抛出
+   */
+  getIndexsGroup(
+    arr,
+    validPredicate = (v) => !!v,
+    passPredicate = (v) => !validPredicate(v)
+  ) {
+    if (!Array.isArray(arr)) {
+      throw new TypeError('传入非数组对象')
+    }
+
+    return arr.reduce((acc, value, index) => {
+      if (passPredicate(value)) {
+        if (acc[acc.length - 1].length > 0) acc.push([])
+      } else if (validPredicate(value)) {
+        acc[acc.length - 1].push(index)
+      }
+      return acc
+    }, [[]]).filter(arr => arr.length > 0)
+  }
+
+  /**
+   * 获取各子元素中指定属性值集合
+   * @param {string} field - 属性名
+   * @returns {Array<string>} 属性值数组
+   * @example
+   * const widths = layout.getFieldSizeList('width')
+   */
+  getFieldSizeList(field) {
+    return this.children.map(item => item[field] || '')
+  }
+}

package/src/plugins/i18n.js

@@ -0,0 +1,125 @@
+/**
+ * 轻量级 Vue i18n 插件（不依赖 vue-i18n）
+ */
+
+// 响应式语言存储
+let currentLocale = 'zh-CN'
+let fallbackLocale = 'zh-CN'
+let messages = {}
+let VueConstructor = null
+
+// 创建响应式语言对象
+function createReactiveLocale() {
+  if (!VueConstructor) return
+  return new VueConstructor({
+    data: {
+      locale: currentLocale
+    }
+  })
+}
+
+let reactiveLocale = null
+
+// 翻译函数
+function translate(key, params = {}) {
+  const locale = reactiveLocale ? reactiveLocale.locale : currentLocale
+  const keys = key.split('.')
+  
+  // 从当前语言查找
+  let value = getMessage(locale, keys)
+  
+  // 回退到备用语言
+  if (value === undefined && locale !== fallbackLocale) {
+    value = getMessage(fallbackLocale, keys)
+  }
+  
+  // 未找到返回原 key
+  if (value === undefined) {
+    return key
+  }
+  
+  // 参数替换 {name} 格式
+  if (typeof value === 'string') {
+    return value.replace(/\{(\w+)\}/g, (_, paramKey) => {
+      return params[paramKey] !== undefined ? params[paramKey] : `{${paramKey}}`
+    })
+  }
+  
+  return value
+}
+
+// 获取嵌套消息
+function getMessage(locale, keys) {
+  let msg = messages[locale]
+  if (!msg) return undefined
+  
+  for (const key of keys) {
+    if (msg === undefined || msg === null) return undefined
+    msg = msg[key]
+  }
+  return msg
+}
+
+// 设置语言
+function setLocale(locale) {
+  if (!messages[locale]) {
+    console.warn(`[i18n] Locale "${locale}" not found, fallback to "${fallbackLocale}"`)
+    locale = fallbackLocale
+  }
+  if (reactiveLocale) {
+    reactiveLocale.locale = locale
+  }
+  currentLocale = locale
+}
+
+// 获取当前语言
+function getLocale() {
+  return reactiveLocale ? reactiveLocale.locale : currentLocale
+}
+
+// 注册语言包
+function registerMessages(locale, msg) {
+  messages[locale] = msg
+}
+
+// Vue 插件安装
+export default {
+  install(Vue, options = {}) {
+    VueConstructor = Vue
+    reactiveLocale = createReactiveLocale()
+    
+    // 初始化配置
+    currentLocale = options.locale || 'zh-CN'
+    fallbackLocale = options.fallbackLocale || 'zh-CN'
+    messages = options.messages || {}
+    
+    // 全局注入 $t 方法
+    Vue.prototype.$t = translate
+    Vue.prototype.$locale = getLocale
+    Vue.prototype.$setLocale = setLocale
+    
+    // 添加计算属性支持
+    Vue.mixin({
+      computed: {
+        $localeCode() {
+          return getLocale()
+        }
+      }
+    })
+    
+    // 监听语言变化（可选）
+    if (reactiveLocale) {
+      reactiveLocale.$watch('locale', (newVal, oldVal) => {
+        Vue.prototype.$locale = getLocale
+      })
+    }
+  }
+}
+
+// 导出工具函数
+export {
+  translate,
+  setLocale,
+  getLocale,
+  registerMessages
+}

package/src/styles/index.scss

@@ -0,0 +1,138 @@
+// Import global styles
+@import './variables.scss';
+@import './reset.scss';
+// @import '../../dist/theme-chalk/index.scss';
+
+// Global Color Transition
+// $--transition-duration: .2s;
+// * {
+//   transition:
+//     color $--transition-duration,
+//     border-color $--transition-duration,
+//     border-top-color $--transition-duration,
+//     border-bottom-color $--transition-duration,
+//     border-left-color $--transition-duration,
+//     border-right-color $--transition-duration,
+//     background $--transition-duration,
+//     background-color $--transition-duration;
+// }
+
+// Scrollbar Style
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  border: 0;
+  background: var(--md-bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--fr-text);
+  border-radius: 8px;
+}
+
+// Global UI Style
+.global-ui {
+  .go-to-top {
+    color: var(--primary-blue) !important;
+  }
+}
+
+// BEM naming convention helper
+// ----------------------------
+
+// Block modifier
+@mixin b($block) {
+  .ui-#{$block} {
+    @content;
+  }
+}
+
+// Element
+@mixin e($element) {
+  &__#{$element} {
+    @content;
+  }
+}
+
+// Modifier
+@mixin m($modifier) {
+  &--#{$modifier} {
+    @content;
+  }
+}
+
+// Block element modifier
+@mixin bem($block, $element, $modifier) {
+  .ui-#{$block}__#{$element}--#{$modifier} {
+    @content;
+  }
+}
+
+// Common mixins
+// -------------
+
+// Clearfix
+@mixin clearfix {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+// Text ellipsis
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Multi-line ellipsis
+@mixin multi-ellipsis($lines: 2) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lines;
+  overflow: hidden;
+}
+
+// Responsive utilities
+@mixin respond-to($breakpoint) {
+  @if $breakpoint == phone {
+    @media (max-width: 767px) { @content; }
+  }
+  @if $breakpoint == tablet {
+    @media (min-width: 768px) and (max-width: 1023px) { @content; }
+  }
+  @if $breakpoint == desktop {
+    @media (min-width: 1024px) { @content; }
+  }
+}
+
+// Focus styles
+@mixin focus() {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(var(--ui-color-primary, #409eff), 0.5);
+}
+
+// Disabled state
+@mixin disabled() {
+  cursor: not-allowed;
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+// Transition helper
+@mixin transition($properties: all, $duration: var(--ui-transition-duration, $--transition-duration)) {
+  transition: $properties $duration ease;
+}
+
+// Box shadow
+@mixin box-shadow($level: base) {
+  @if $level == base {
+    box-shadow: var(--ui-box-shadow-base, $--box-shadow-base);
+  } @else if $level == light {
+    box-shadow: var(--ui-box-shadow-light, $--box-shadow-light);
+  } @else if $level == dark {
+    box-shadow: var(--ui-box-shadow-dark, $--box-shadow-dark);
+  }
+}