@litianxiang/portal-ui 0.0.1

package/README.md

@@ -0,0 +1,5 @@
+# @litianxiang/portal-ui
+
+统一的流程表单公共控件库。
+
+目前只是搭好包结构，后续可以从各项目的 `components/control` 中逐步抽取 Base/Busi 系列组件到此包，并通过 pnpm workspace 或 npm 发布给各微服务项目复用。

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@litianxiang/portal-ui",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.d.ts",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "build": "echo \"TODO: add build step (vite/tsup)\""
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "element-plus": "^2.9.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.3",
+    "vue": "^3.5.0",
+    "element-plus": "^2.9.0"
+  },
+  "license": "UNLICENSED"
+}

package/src/components/control/base/base-date.vue

@@ -0,0 +1,148 @@
+<template>
+  <ElDatePicker
+    ref="dateRef"
+    v-model="dateValue"
+    :type="type"
+    :placeholder="placeholder"
+    :start-placeholder="startPlaceholder"
+    :end-placeholder="endPlaceholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    :clearable="clearable"
+    :size="size"
+    :format="format"
+    :value-format="valueFormat"
+    :disabled-date="disabledDate"
+    :shortcuts="shortcuts"
+    :range-separator="rangeSeparator"
+    @change="handleChange"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @clear="handleClear"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ElDatePicker } from 'element-plus'
+
+type DateValue = string | Date | [string, string] | [Date, Date] | undefined
+
+interface Shortcut {
+  text: string
+  value: Date | (() => Date) | [Date, Date] | (() => [Date, Date])
+}
+
+interface Props {
+  modelValue?: DateValue
+  field?: string
+  type?: 'date' | 'datetime' | 'daterange' | 'datetimerange' | 'month' | 'year' | 'week' | 'dates'
+  placeholder?: string
+  startPlaceholder?: string
+  endPlaceholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  clearable?: boolean
+  size?: 'small' | 'default' | 'large'
+  format?: string
+  valueFormat?: string
+  disabledDate?: (date: Date) => boolean
+  shortcuts?: Shortcut[]
+  rangeSeparator?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  field: '',
+  type: 'date',
+  placeholder: '请选择日期',
+  startPlaceholder: '开始日期',
+  endPlaceholder: '结束日期',
+  disabled: false,
+  readonly: false,
+  clearable: true,
+  size: 'default',
+  format: 'YYYY-MM-DD',
+  valueFormat: 'YYYY-MM-DD',
+  rangeSeparator: '至'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: DateValue]
+  'change': [value: DateValue]
+  'focus': [event: FocusEvent]
+  'blur': [event: FocusEvent]
+  'clear': []
+}>()
+
+const dateRef = ref()
+
+const dateValue = computed<DateValue>({
+  get: () => props.modelValue,
+  set: (val: DateValue) => emit('update:modelValue', val)
+})
+
+const handleChange = (value: DateValue) => {
+  emit('change', value)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  emit('blur', event)
+}
+
+const handleClear = () => {
+  emit('clear')
+}
+
+const getValue = () => {
+  return props.modelValue
+}
+
+const setValue = (value: DateValue) => {
+  emit('update:modelValue', value)
+}
+
+const getDateObject = (): Date | [Date, Date] | undefined => {
+  if (!props.modelValue) return undefined
+  if (props.modelValue instanceof Date) return props.modelValue
+  if (typeof props.modelValue === 'string') return new Date(props.modelValue)
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.map((v: string | Date) => v instanceof Date ? v : new Date(v)) as [Date, Date]
+  }
+  return undefined
+}
+
+const getFormattedValue = () => {
+  return props.modelValue
+}
+
+const clear = () => {
+  emit('update:modelValue', undefined)
+}
+
+const focus = () => {
+  dateRef.value?.focus()
+}
+
+const blur = () => {
+  dateRef.value?.blur()
+}
+
+const getField = () => {
+  return props.field ?? ''
+}
+
+defineExpose({
+  getValue,
+  setValue,
+  getDateObject,
+  getFormattedValue,
+  clear,
+  focus,
+  blur,
+  getField
+})
+</script>

package/src/components/control/base/base-input.vue

@@ -0,0 +1,130 @@
+<template>
+  <ElInput
+    ref="inputRef"
+    v-model="inputValue"
+    :type="type"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    :clearable="clearable"
+    :show-password="showPassword"
+    :maxlength="maxLength"
+    :minlength="minLength"
+    :show-word-limit="showCount"
+    :size="size"
+    :prefix-icon="prefixIcon"
+    :suffix-icon="suffixIcon"
+    @input="handleInput"
+    @change="handleChange"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @clear="handleClear"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed, type Component } from 'vue'
+import { ElInput, type InputInstance } from 'element-plus'
+
+interface Props {
+  modelValue?: string
+  field?: string
+  type?: 'text' | 'password' | 'textarea'
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  clearable?: boolean
+  showPassword?: boolean
+  showCount?: boolean
+  maxLength?: number
+  minLength?: number
+  size?: 'small' | 'default' | 'large'
+  prefixIcon?: string | Component
+  suffixIcon?: string | Component
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  field: '',
+  type: 'text',
+  disabled: false,
+  readonly: false,
+  clearable: false,
+  showPassword: false,
+  showCount: false,
+  size: 'default'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'input': [value: string]
+  'change': [value: string]
+  'focus': [event: FocusEvent]
+  'blur': [event: FocusEvent]
+  'clear': []
+}>()
+
+const inputRef = ref<InputInstance>()
+
+const inputValue = computed({
+  get: () => props.modelValue ?? '',
+  set: (val: string) => emit('update:modelValue', val)
+})
+
+const handleInput = (value: string) => {
+  emit('input', value)
+}
+
+const handleChange = (value: string) => {
+  emit('change', value)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  emit('blur', event)
+}
+
+const handleClear = () => {
+  emit('clear')
+}
+
+const getValue = (): string => {
+  return props.modelValue ?? ''
+}
+
+const setValue = (value: string) => {
+  emit('update:modelValue', value)
+}
+
+const clear = () => {
+  emit('update:modelValue', '')
+}
+
+const focus = () => {
+  inputRef.value?.focus()
+}
+
+const blur = () => {
+  inputRef.value?.blur()
+}
+
+const select = () => {
+  inputRef.value?.select()
+}
+
+const getField = (): string => {
+  return props.field ?? ''
+}
+
+defineExpose({
+  getValue,
+  setValue,
+  clear,
+  focus,
+  blur,
+  select,
+  getField
+})
+</script>

package/src/components/control/base/base-number.vue

@@ -0,0 +1,133 @@
+<template>
+  <ElInputNumber
+    ref="numberRef"
+    v-model="numberValue"
+    :min="min"
+    :max="max"
+    :step="step"
+    :step-strictly="stepStrictly"
+    :precision="precision"
+    :disabled="disabled"
+    :readonly="readonly"
+    :size="size"
+    :controls="controls"
+    :controls-position="controlsPosition"
+    :placeholder="placeholder"
+    @change="handleChange"
+    @focus="handleFocus"
+    @blur="handleBlur"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ElInputNumber, type InputNumberInstance } from 'element-plus'
+
+interface Props {
+  modelValue?: number
+  field?: string
+  placeholder?: string
+  min?: number
+  max?: number
+  step?: number
+  stepStrictly?: boolean
+  precision?: number
+  disabled?: boolean
+  readonly?: boolean
+  controls?: boolean
+  controlsPosition?: '' | 'right'
+  size?: 'small' | 'default' | 'large'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  field: '',
+  step: 1,
+  stepStrictly: false,
+  disabled: false,
+  readonly: false,
+  controls: true,
+  controlsPosition: 'right',
+  size: 'default'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined]
+  'change': [value: number | undefined, oldValue: number | undefined]
+  'focus': [event: FocusEvent]
+  'blur': [event: FocusEvent]
+}>()
+
+const numberRef = ref<InputNumberInstance>()
+
+const numberValue = computed<number | undefined>({
+  get: () => props.modelValue,
+  set: (val: number | undefined) => emit('update:modelValue', val)
+})
+
+const handleChange = (value: number | undefined, oldValue: number | undefined) => {
+  emit('change', value, oldValue)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  emit('blur', event)
+}
+
+const getValue = () => {
+  return props.modelValue
+}
+
+const setValue = (value: number) => {
+  emit('update:modelValue', value)
+}
+
+const clear = () => {
+  emit('update:modelValue', undefined)
+}
+
+const increase = () => {
+  const currentValue = props.modelValue ?? 0
+  const step = props.step ?? 1
+  let newValue = currentValue + step
+  if (props.max !== undefined && newValue > props.max) {
+    newValue = props.max
+  }
+  emit('update:modelValue', newValue)
+}
+
+const decrease = () => {
+  const currentValue = props.modelValue ?? 0
+  const step = props.step ?? 1
+  let newValue = currentValue - step
+  if (props.min !== undefined && newValue < props.min) {
+    newValue = props.min
+  }
+  emit('update:modelValue', newValue)
+}
+
+const focus = () => {
+  numberRef.value?.focus()
+}
+
+const blur = () => {
+  numberRef.value?.blur()
+}
+
+const getField = () => {
+  return props.field ?? ''
+}
+
+defineExpose({
+  getValue,
+  setValue,
+  clear,
+  increase,
+  decrease,
+  focus,
+  blur,
+  getField
+})
+</script>

package/src/components/control/base/base-select.vue

@@ -0,0 +1,156 @@
+<template>
+  <ElSelect
+    ref="selectRef"
+    v-model="selectValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :multiple="multiple"
+    :filterable="filterable"
+    :clearable="clearable"
+    :size="size"
+    :collapse-tags="collapseTags"
+    :collapse-tags-tooltip="collapseTagsTooltip"
+    :max-collapse-tags="maxTagCount"
+    :no-data-text="emptyText"
+    @change="handleChange"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @clear="handleClear"
+  >
+    <ElOption
+      v-for="option in options"
+      :key="option.key"
+      :label="option.value"
+      :value="option.key"
+      :disabled="option.disabled"
+    />
+  </ElSelect>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ElSelect, ElOption, type SelectInstance } from 'element-plus'
+
+interface IOption {
+  key: string | number
+  value: string
+  disabled?: boolean
+}
+
+interface Props {
+  modelValue?: string | number | (string | number)[]
+  field?: string
+  options?: IOption[]
+  placeholder?: string
+  disabled?: boolean
+  multiple?: boolean
+  filterable?: boolean
+  clearable?: boolean
+  collapseTags?: boolean
+  collapseTagsTooltip?: boolean
+  maxTagCount?: number
+  emptyText?: string
+  size?: 'small' | 'default' | 'large'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  field: '',
+  options: () => [],
+  placeholder: '请选择',
+  disabled: false,
+  multiple: false,
+  filterable: false,
+  clearable: false,
+  collapseTags: true,
+  collapseTagsTooltip: true,
+  maxTagCount: 3,
+  emptyText: '暂无数据',
+  size: 'default'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | (string | number)[] | undefined]
+  'change': [value: string | number | (string | number)[] | undefined]
+  'focus': [event: FocusEvent]
+  'blur': [event: FocusEvent]
+  'clear': []
+}>()
+
+const selectRef = ref<SelectInstance>()
+
+const selectValue = computed<string | number | (string | number)[] | undefined>({
+  get: () => props.modelValue,
+  set: (val: string | number | (string | number)[] | undefined) => emit('update:modelValue', val)
+})
+
+const handleChange = (value: string | number | (string | number)[]) => {
+  emit('change', value)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  emit('blur', event)
+}
+
+const handleClear = () => {
+  emit('clear')
+}
+
+const getValue = () => {
+  return props.modelValue
+}
+
+const setValue = (value: string | number | (string | number)[]) => {
+  emit('update:modelValue', value)
+}
+
+const getSelectedOption = () => {
+  if (!props.modelValue) return undefined
+  if (props.multiple && Array.isArray(props.modelValue)) {
+    return props.modelValue.map((key: string | number) => props.options.find((opt: IOption) => opt.key === key)!)
+  }
+  return props.options.find((opt: IOption) => opt.key === props.modelValue)
+}
+
+const getSelectedValue = () => {
+  if (!props.modelValue) return undefined
+  if (props.multiple && Array.isArray(props.modelValue)) {
+    return props.modelValue.map((key: string | number) => {
+      const option = props.options.find((opt: IOption) => opt.key === key)
+      return option?.value ?? ''
+    })
+  }
+  const option = props.options.find((opt: IOption) => opt.key === props.modelValue)
+  return option?.value
+}
+
+const clear = () => {
+  emit('update:modelValue', props.multiple ? [] : undefined)
+}
+
+const focus = () => {
+  selectRef.value?.focus()
+}
+
+const blur = () => {
+  selectRef.value?.blur()
+}
+
+const getField = () => {
+  return props.field ?? ''
+}
+
+defineExpose({
+  getValue,
+  setValue,
+  getSelectedOption,
+  getSelectedValue,
+  clear,
+  focus,
+  blur,
+  getField
+})
+</script>

package/src/components/control/base/base-textarea.vue

@@ -0,0 +1,117 @@
+<template>
+  <ElInput
+    ref="textareaRef"
+    v-model="inputValue"
+    type="textarea"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    :maxlength="maxLength"
+    :minlength="minLength"
+    :rows="rows"
+    :autosize="autosize"
+    :resize="resize"
+    :show-word-limit="showCount"
+    @input="handleInput"
+    @change="handleChange"
+    @focus="handleFocus"
+    @blur="handleBlur"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ElInput, type InputInstance } from 'element-plus'
+
+interface Props {
+  modelValue?: string
+  field?: string
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  maxLength?: number
+  minLength?: number
+  rows?: number
+  autosize?: boolean | { minRows?: number; maxRows?: number }
+  resize?: 'none' | 'both' | 'horizontal' | 'vertical'
+  showCount?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  field: '',
+  disabled: false,
+  readonly: false,
+  rows: 3,
+  resize: 'vertical',
+  showCount: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'input': [value: string]
+  'change': [value: string]
+  'focus': [event: FocusEvent]
+  'blur': [event: FocusEvent]
+}>()
+
+const textareaRef = ref<InputInstance>()
+
+const inputValue = computed({
+  get: () => props.modelValue ?? '',
+  set: (val: string) => emit('update:modelValue', val)
+})
+
+const handleInput = (value: string) => {
+  emit('input', value)
+}
+
+const handleChange = (value: string) => {
+  emit('change', value)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  emit('blur', event)
+}
+
+const getValue = (): string => {
+  return props.modelValue ?? ''
+}
+
+const setValue = (value: string) => {
+  emit('update:modelValue', value)
+}
+
+const clear = () => {
+  emit('update:modelValue', '')
+}
+
+const focus = () => {
+  textareaRef.value?.focus()
+}
+
+const blur = () => {
+  textareaRef.value?.blur()
+}
+
+const getLength = (): number => {
+  return (props.modelValue || '').length
+}
+
+const getField = (): string => {
+  return props.field ?? ''
+}
+
+defineExpose({
+  getValue,
+  setValue,
+  clear,
+  focus,
+  blur,
+  getLength,
+  getField
+})
+</script>

package/src/components/control/base/base-time.vue

@@ -0,0 +1,138 @@
+<template>
+  <ElTimePicker
+    ref="timeRef"
+    v-model="timeValue"
+    :is-range="isRange"
+    :placeholder="placeholder"
+    :start-placeholder="startPlaceholder"
+    :end-placeholder="endPlaceholder"
+    :disabled="disabled"
+    :readonly="readonly"
+    :clearable="clearable"
+    :size="size"
+    :format="format"
+    :value-format="valueFormat"
+    :disabled-hours="disabledHours"
+    :disabled-minutes="disabledMinutes"
+    :disabled-seconds="disabledSeconds"
+    :range-separator="rangeSeparator"
+    :arrow-control="arrowControl"
+    @change="handleChange"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @clear="handleClear"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ElTimePicker } from 'element-plus'
+
+type TimeValue = string | Date | [string, string] | [Date, Date] | undefined
+
+interface Props {
+  modelValue?: TimeValue
+  field?: string
+  isRange?: boolean
+  placeholder?: string
+  startPlaceholder?: string
+  endPlaceholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  clearable?: boolean
+  size?: 'small' | 'default' | 'large'
+  format?: string
+  valueFormat?: string
+  disabledHours?: () => number[]
+  disabledMinutes?: (hour: number) => number[]
+  disabledSeconds?: (hour: number, minute: number) => number[]
+  rangeSeparator?: string
+  arrowControl?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  field: '',
+  isRange: false,
+  placeholder: '请选择时间',
+  startPlaceholder: '开始时间',
+  endPlaceholder: '结束时间',
+  disabled: false,
+  readonly: false,
+  clearable: true,
+  size: 'default',
+  format: 'HH:mm:ss',
+  valueFormat: 'HH:mm:ss',
+  rangeSeparator: '至',
+  arrowControl: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: TimeValue]
+  'change': [value: TimeValue]
+  'focus': [event: FocusEvent]
+  'blur': [event: FocusEvent]
+  'clear': []
+}>()
+
+const timeRef = ref()
+
+const timeValue = computed<TimeValue>({
+  get: () => props.modelValue,
+  set: (val: TimeValue) => emit('update:modelValue', val)
+})
+
+const handleChange = (value: TimeValue) => {
+  emit('change', value)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  emit('blur', event)
+}
+
+const handleClear = () => {
+  emit('clear')
+}
+
+const getValue = () => {
+  return props.modelValue
+}
+
+const setValue = (value: TimeValue) => {
+  emit('update:modelValue', value)
+}
+
+const getFormattedValue = () => {
+  return props.modelValue
+}
+
+const clear = () => {
+  emit('update:modelValue', undefined)
+}
+
+const focus = () => {
+  timeRef.value?.focus()
+}
+
+const blur = () => {
+  timeRef.value?.blur()
+}
+
+const getField = () => {
+  return props.field ?? ''
+}
+
+
+defineExpose({
+  getValue,
+  setValue,
+  getFormattedValue,
+  clear,
+  focus,
+  blur,
+  getField
+})
+</script>

package/src/index.d.ts

@@ -0,0 +1,8 @@
+import type { DefineComponent } from 'vue'
+
+export const BaseInput: DefineComponent<any, any, any>
+export const BaseSelect: DefineComponent<any, any, any>
+export const BaseNumber: DefineComponent<any, any, any>
+export const BaseTextarea: DefineComponent<any, any, any>
+export const BaseDate: DefineComponent<any, any, any>
+export const BaseTime: DefineComponent<any, any, any>

package/src/index.ts

@@ -0,0 +1,10 @@
+// 公共表单控件库入口
+// 统一导出基础表单控件，供各微服务项目复用
+
+export { default as BaseInput } from './components/control/base/base-input.vue'
+export { default as BaseSelect } from './components/control/base/base-select.vue'
+export { default as BaseNumber } from './components/control/base/base-number.vue'
+export { default as BaseTextarea } from './components/control/base/base-textarea.vue'
+export { default as BaseDate } from './components/control/base/base-date.vue'
+export { default as BaseTime } from './components/control/base/base-time.vue'
+