misp-ui-library-test 0.0.1

package/src/packages/form/src/main.vue

@@ -0,0 +1,442 @@
+<template>
+  <form class="ui-form" :class="[labelPosition ? 'ui-form--label-' + labelPosition : '', inline ? 'ui-form--inline' : '']">
+    <ui-form-field v-if="hasFieldList" :fields="fieldList" />
+    <slot></slot>
+  </form>
+</template>
+
+<script>
+/**
+ * @typedef {Object | string | Function} ComponentType 组件类型，可以是组件名称字符串、原生标签字符串、或组件选项对象
+ *   - 字符串：'UiInput', 'UiSelect' (内置组件)
+ *   - 字符串：'div', 'span' (原生 HTML 标签)
+ *   - 对象/函数：直接传入 Vue 组件定义 (import MyComp from './MyComp.vue')
+ */
+/**
+ * @typedef OptionProp
+ * @property {String} label 标签
+ * @property {String} value 值
+ */
+/**
+ * @typedef SlotContentProp
+ * @property {ComponentType} [type] 自定义组件对象或名称
+ * @property {ComponentType} [component] [建议使用 type] 自定义组件对象或名称
+ * @property {String} [class] 类名
+ * @property {Object} [style] 样式
+ * @property {Object} [props] 传递给插槽内组件的属性
+ * @property {Object} [on] 事件监听
+ * @property {String} [text] 纯文本内容
+ * @property {String} [html] HTML 字符串 (使用 v-html)
+ */
+/**
+ * @callback ValidateHandler
+ * @param {RuleProp} rule 当前校验规则体
+ * @param {any} value 字段值
+ * @param {Function} callback 校验结果回调
+ * @returns {Boolean | Error | void} 校验结果返回
+ */
+/**
+ * @callback RowDataHandler
+ * @param {Object} rowData 当前表单数据对象，如果该表单项位于子表单内，则为子表单组内数据对象
+ * @param {Object} form 当前完整表单数据对象
+ * @returns {Boolean} 判断条件
+ */
+/**
+ * @typedef RuleProp
+ * @property {Boolean} [required] 是否必填
+ * @property {ValidateHandler} [validator] 自定义校验函数
+ * @property {String} [message] 提示信息
+ * @property {String | Array<String>} [trigger] 触发方式，可复选：'blur' | 'change'
+ */
+/**
+ * @typedef FormFieldProp
+ * @property {String} prop 字段属性名，对应 model 中的键值，用于校验和取值
+ * @property {ComponentType} type 控件类型
+ * @property {String} label 标签文本
+ * @property {String} labelWidth 标签宽度，如 '80px'`
+ * @property {RuleProp | Array<RuleProp>} rules 表单验证规则，可以是对象或数组
+ * @property {String} error 错误信息，当设置时，组件将回显 Error 状态，并回显错误信息
+ * @property {Boolean} showMessage 是否显示错误信息
+ * @property {Array<OptionProp> | Promise<OptionProp> | function(): OptionProp} options 传入选项
+ * @property {Boolean | RowDataHandler} disabled 是否禁用。支持布尔值或函数 (rowData, formModel) => boolean
+ * @property {Boolean | RowDataHandler} visible 是否展示。支持布尔值或函数 (rowData, formModel) => boolean
+ * @property {SlotContentProp | Object} [props] 组件自定义配置属性
+ * @property {Record<String, SlotContentProp | Array<SlotContentProp>>} [slots] - 插槽配置
+ * @property {String | Array<String | SlotContentProp>} [context] 简易元素，当 type 为普通 HTML 标签时启用
+ * @property {Object} [class] - 原生 Html 属性，类名
+ * @property {Object} [style] - 原生 Html 属性，样式
+ * @property {Object} [props] - 原生 Html 属性，传递给插槽内组件的属性
+ * @property {Object} [on] - 原生 Html 属性，事件监听
+ *   Key 为插槽名称 (如 'prefix', 'suffix', 'default')
+ *   Value 可以是单个配置对象或配置数组
+ * @property {Array<FormFieldProp>} [children] 嵌套表单
+ */
+
+import UiFormField from './form-field.vue'
+
+import { isArray, isEmpty, merge } from '../../../utils/lodash/index.js'
+
+/**
+ * UiForm 表单组件
+ * 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验和提交数据。
+ * @component UiForm
+ */
+export default {
+  name: 'UiForm',
+  components: { UiFormField },
+  mixins: [],
+  props: {
+    /**
+     * 表单数据对象
+     * @type {Object}
+     */
+    model: Object,
+
+    /**
+     * 表单字段列表，以代替 FormItem 组件传入
+     * @type {Array<FormFieldProp>}
+     */
+    fieldList: Array,
+
+    /**
+     * 表单验证规则
+     * @type {Object}
+     */
+    rules: Object,
+
+    /**
+     * 表单是否已完成
+     * @type {Boolean}
+     * @readonly
+     */
+    completed: Boolean,
+
+    /**
+     * 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width
+     * @type {'left' | 'right' | 'top'}
+     */
+    labelPosition: String,
+
+    /**
+     * 表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。
+     * @type {String}
+     */
+    labelWidth: String,
+
+    /**
+     * 表单域标签的后缀
+     * @type {String}
+     * @default ''
+     */
+    labelSuffix: {
+      type: String,
+      default: '',
+    },
+
+    /**
+     * 是否行内显示表单
+     * @type {Boolean}
+     */
+    inline: Boolean,
+
+    /**
+     * 是否行内显示校验信息
+     * @type {Boolean}
+     */
+    inlineMessage: Boolean,
+
+    /**
+     * 是否显示校验状态图标
+     * @type {Boolean}
+     */
+    statusIcon: Boolean,
+
+    /**
+     * 是否显示校验错误信息
+     * @type {Boolean}
+     * @default true
+     */
+    showMessage: {
+      type: Boolean,
+      default: true,
+    },
+
+    /**
+     * 用于控制该表单内组件的尺寸
+     * @type {'medium' | 'small' | 'mini'}
+     */
+    size: String,
+
+    /**
+     * 是否禁用该表单内的所有组件。若设置为 true，则表单内组件上的 disabled 属性不再生效
+     * @type {Boolean}
+     */
+    disabled: Boolean,
+
+    /**
+     * 是否在 rules 属性改变后立即触发一次验证
+     * @type {Boolean}
+     * @default true
+     */
+    validateOnRuleChange: {
+      type: Boolean,
+      default: true,
+    },
+
+    /**
+     * 是否隐藏必填字段的标签旁边的红色星号
+     * @type {Boolean}
+     * @default false
+     */
+    hideRequiredAsterisk: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: () => ({
+    /**
+     * 存储所有表单项实例
+     * @type {Array}
+     */
+    fields: [],
+
+    /**
+     * 存储所有可能的标签宽度值，用于计算自动标签宽度
+     * @type {Array}
+     */
+    potentialLabelWidthArr: [],
+  }),
+  provide() {
+    return {
+      uiForm: this,
+    }
+  },
+  filters: {},
+  computed: {
+    /**
+     * 自动计算的标签最大宽度
+     * @returns {String|Number} 最大宽度像素值或空字符串
+     */
+    autoLabelWidth() {
+      if (!this.potentialLabelWidthArr.length) return 0
+      const max = Math.max(...this.potentialLabelWidthArr)
+      return max ? `${max}px` : ''
+    },
+    hasFieldList() {
+      return isArray(this.fieldList) && !isEmpty(this.fieldList)
+    },
+  },
+  watch: {
+    /**
+     * 深度监听 model 变化，一旦数据变动，重新计算完成度
+     */
+     model: {
+      handler() {
+        this.checkCompleted()
+      },
+      deep: true
+    },
+    /**
+     * 监听 rules 变化，重新绑定验证事件并触发表单验证
+     * @param {Object} newRules - 新的验证规则
+     */
+    rules() {
+      this.fields.forEach((field) => {
+        field.removeValidateEvents()
+        field.addValidateEvents()
+      })
+      if (this.validateOnRuleChange) {
+        this.validate(() => {})
+      }
+    },
+  },
+  created() {
+    // 监听子组件添加事件
+    this.$on('ui.form.addField', (field) => {
+      field && this.fields.push(field)
+      this.checkCompleted()
+    })
+    // 监听子组件移除事件
+    this.$on('ui.form.removeField', (field) => {
+      field.prop && this.fields.splice(this.fields.indexOf(field), 1)
+      this.checkCompleted()
+    })
+  },
+  mounted() {},
+  activated() {},
+  beforeDestroy() {},
+  methods: {
+    /**
+     * 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
+     */
+    resetFields() {
+      if (!this.model) {
+        console.warn('[Element Warn][Form]model is required for resetFields to work.')
+        return
+      }
+      this.fields.forEach((field) => field.resetField())
+    },
+
+    /**
+     * 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果
+     * @param {string|string[]} [props=[]] - 可选，表单项的 prop 属性
+     */
+    clearValidate(props = []) {
+      const fields = props.length
+        ? typeof props === 'string'
+          ? this.fields.filter((field) => props === field.prop)
+          : this.fields.filter((field) => props.indexOf(field.prop) > -1)
+        : this.fields
+      fields.forEach((field) => field.clearValidate())
+    },
+
+    /**
+     * 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。
+     * 若不传入回调函数，则会返回一个 promise
+     * @param {Function} callback - 回调函数，接收 (valid, invalidFields) 参数
+     * @returns {Promise|undefined} 如果未提供 callback，则返回 Promise
+     */
+    validate(callback) {
+      if (!this.model) {
+        console.warn('[Element Warn][Form]model is required for validate to work!')
+        return
+      }
+
+      let promise
+      if (typeof callback !== 'function' && window.Promise) {
+        promise = new window.Promise((resolve, reject) => {
+          callback = function (valid, invalidFields) {
+            valid ? resolve(valid) : reject(invalidFields)
+          }
+        })
+      }
+
+      let valid = true
+      let count = 0
+      if (this.fields.length === 0 && callback) {
+        callback(true)
+        this.checkCompleted()
+      }
+      let invalidFields = {}
+      this.fields.forEach((field) => {
+        field.validate('', (message, field) => {
+          if (message) {
+            valid = false
+          }
+          invalidFields = merge({}, invalidFields, field) 
+          if (typeof callback === 'function' && ++count === this.fields.length) {
+            callback(valid, invalidFields)
+            this.$nextTick(() => {
+              this.checkCompleted()
+            })
+          }
+        })
+      })
+      if (promise) {
+        return promise
+      }
+    },
+
+    /**
+     * 对部分表单字段进行校验的方法
+     * @param {string|string[]} props - 需要校验的字段 prop 属性
+     * @param {Function} cb - 回调函数
+     */
+    validateField(props, cb) {
+      props = [].concat(props)
+      const fields = this.fields.filter((field) => props.indexOf(field.prop) !== -1)
+      if (!fields.length) {
+        console.warn('[Element Warn]please pass correct props!')
+        return
+      }
+      fields.forEach((field) => {
+        field.validate('', cb)
+      })
+    },
+
+    /**
+     * 对外暴露的方法，允许手动触发完成度检查
+     * 也可以在 UiFormItem 校验状态改变时调用此方法
+     */
+    notifyStatusChange() {
+      this.checkCompleted()
+    },
+
+     /**
+     * 检查表单完成度
+     * 逻辑：
+     * 1. 检查所有带有 required 规则的表单项，其值是否存在（非空）。
+     * 2. 检查所有表单项是否存在校验错误 (validateState === 'error')。
+     * 如果任一条件不满足，则未完成；否则完成。
+     */
+    checkCompleted() {
+      let isCompleted = true
+      
+      // 遍历所有注册的字段
+      for (const field of this.fields) {
+        // 检查是否有校验错误
+        if (field.validateState === 'error') {
+          isCompleted = false
+          break
+        }
+        
+        // 检查必填项是否已填写
+        // 获取该字段的规则
+        const rules = field.getRules ? field.getRules() : []
+        const isRequired = rules.some(rule => rule.required)
+        // 判断值是否为空
+        if (isRequired && isEmpty(field.fieldValue)) {
+          isCompleted = false
+          break
+        }
+      }
+      // 如果计算出的状态与当前 prop 不同，则发射更新事件
+      if (isCompleted !== this.completed) {
+        this.$emit('update:completed', isCompleted)
+      }
+    },
+
+    /**
+     * 获取标签宽度在数组中的索引
+     * @param {string} width - 标签宽度
+     * @returns {number} 索引值
+     * @throws {Error} 如果宽度未在数组中找到
+     * @private
+     */
+    getLabelWidthIndex(width) {
+      const index = this.potentialLabelWidthArr.indexOf(width)
+      if (!~index) {
+        throw new Error('[ElementForm]unpected width ', width)
+      }
+      return index
+    },
+
+    /**
+     * 注册标签宽度
+     * @param {string} val - 新宽度
+     * @param {string} oldVal - 旧宽度
+     * @private
+     */
+    registerLabelWidth(val, oldVal) {
+      if (val && oldVal) {
+        const index = this.getLabelWidthIndex(oldVal)
+        this.potentialLabelWidthArr.splice(index, 1, val)
+      } else if (val) {
+        this.potentialLabelWidthArr.push(val)
+      }
+    },
+
+    /**
+     * 注销标签宽度
+     * @param {string} val - 要注销的宽度
+     * @private
+     */
+    deregisterLabelWidth(val) {
+      const index = this.getLabelWidthIndex(val)
+      this.potentialLabelWidthArr.splice(index, 1)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped></style>

package/src/packages/form-item/index.js

@@ -0,0 +1,11 @@
+/**
+ * FormItem 表单项组件
+ */
+
+import UiFormItem from '../form/src/form-item.vue'
+
+UiFormItem.install = function(Vue) {
+  Vue.component(UiFormItem.name, UiFormItem)
+}
+
+export default UiFormItem

package/src/packages/header/index.js

@@ -0,0 +1,12 @@
+/**
+ * Header 顶部布局组件
+ */
+
+import UiHeader from './src/main.vue'
+
+// 自动安装
+UiHeader.install = function(Vue) {
+  Vue.component(UiHeader.name, UiHeader)
+}
+
+export default UiHeader

package/src/packages/header/src/main.vue

@@ -0,0 +1,20 @@
+<template>
+  <header class="ui-header" :style="{ height }">
+    <slot></slot>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'UiHeader',
+
+  componentName: 'UiHeader',
+
+  props: {
+    height: {
+      type: String,
+      default: '60px'
+    }
+  }
+};
+</script>

package/src/packages/icon/index.js

@@ -0,0 +1,12 @@
+/**
+ * Icon 图标组件
+ */
+
+import UiIcon from './src/main.vue'
+
+// 自动安装
+UiIcon.install = function(Vue) {
+  Vue.component(UiIcon.name, UiIcon)
+}
+
+export default UiIcon

package/src/packages/icon/src/main.vue

@@ -0,0 +1,48 @@
+<template>
+  <i :class="className" :style="style">
+    <slot></slot>
+  </i>
+</template>
+
+<script>
+export default {
+  name: 'UiIcon',
+  props: {
+    // 图标名称（不带前缀，见文档）
+    name: {
+      type: String,
+      default: ''
+    },
+    // 图标字号大小
+    size: [String, Number],
+    // 图标颜色
+    color: String
+  },
+  computed: {
+    className() {
+      return this.name ? `ui-icon-${this.name}` : 'ui-icon';
+    },
+    style() {
+      const style = {};
+      if (this.size) {
+        style.fontSize = typeof this.size === 'number' ? `${this.size}px` : this.size;
+      }
+      if (this.color) {
+        style.color = this.color;
+      }
+      style.transition = 'color 0.3s';
+      return style;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.ui-icon {
+  display: inline-block;
+  line-height: 1;
+  vertical-align: baseline;
+  color: var(--sd-text);
+  transition: color 0.3s;
+}
+</style>

package/src/packages/image/index.js

@@ -0,0 +1,12 @@
+/**
+ * Image 图片组件
+ */
+
+import UiImage from './src/main.vue'
+
+// 自动安装
+UiImage.install = function(Vue) {
+  Vue.component(UiImage.name, UiImage)
+}
+
+export default UiImage