@atooyu/uxto-ui 1.0.0

package/src/components/u-number-box/u-number-box.vue

@@ -0,0 +1,262 @@
+<template>
+  <view
+    class="u-number-box"
+    :class="{
+      'u-number-box--disabled': disabled
+    }"
+  >
+    <view
+      class="u-number-box__btn u-number-box__btn--minus"
+      :class="{
+        'u-number-box__btn--disabled': minusDisabled
+      }"
+      :style="btnStyle"
+      @click="handleMinus"
+      @touchstart="startLongPress('minus')"
+      @touchend="stopLongPress"
+      @touchcancel="stopLongPress"
+    >
+      <text class="u-number-box__btn-icon">−</text>
+    </view>
+
+    <input
+      class="u-number-box__input"
+      :class="{
+        'u-number-box__input--disabled': disabledInput
+      }"
+      :style="inputStyle"
+      :type="inputType"
+      :value="displayValue"
+      :disabled="disabled || disabledInput"
+      @input="handleInput"
+      @blur="handleBlur"
+      @focus="handleFocus"
+    />
+
+    <view
+      class="u-number-box__btn u-number-box__btn--plus"
+      :class="{
+        'u-number-box__btn--disabled': plusDisabled
+      }"
+      :style="btnStyle"
+      @click="handlePlus"
+      @touchstart="startLongPress('plus')"
+      @touchend="stopLongPress"
+      @touchcancel="stopLongPress"
+    >
+      <text class="u-number-box__btn-icon">+</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted } from 'vue'
+
+interface Props {
+  modelValue?: number
+  min?: number
+  max?: number
+  step?: number
+  integer?: boolean
+  decimalPlaces?: number
+  disabled?: boolean
+  disabledInput?: boolean
+  disabledLongPress?: boolean
+  buttonSize?: number | string
+  inputWidth?: number | string
+  theme?: 'default' | 'primary'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  min: 0,
+  max: Infinity,
+  step: 1,
+  integer: false,
+  decimalPlaces: 0,
+  disabled: false,
+  disabledInput: false,
+  disabledLongPress: false,
+  buttonSize: 28,
+  inputWidth: 36,
+  theme: 'default'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+  change: [value: number]
+  overlimit: [type: 'minus' | 'plus']
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+}>()
+
+const currentValue = ref(props.modelValue)
+let longPressTimer: ReturnType<typeof setInterval> | null = null
+
+const minusDisabled = computed(() => props.disabled || currentValue.value <= props.min)
+const plusDisabled = computed(() => props.disabled || currentValue.value >= props.max)
+
+const inputType = computed(() => props.integer ? 'number' : 'digit')
+
+const displayValue = computed(() => {
+  if (props.decimalPlaces > 0) {
+    return currentValue.value.toFixed(props.decimalPlaces)
+  }
+  return currentValue.value
+})
+
+const btnSize = computed(() => {
+  const size = props.buttonSize
+  return typeof size === 'number' ? `${size}px` : size
+})
+
+const iptWidth = computed(() => {
+  const width = props.inputWidth
+  return typeof width === 'number' ? `${width}px` : width
+})
+
+const btnStyle = computed(() => ({
+  width: btnSize.value,
+  height: btnSize.value,
+  fontSize: `calc(${btnSize.value} * 0.5)`,
+  backgroundColor: props.theme === 'primary' ? '#1989fa' : '#f2f3f5',
+  color: props.theme === 'primary' ? '#fff' : '#323233'
+}))
+
+const inputStyle = computed(() => ({
+  width: iptWidth.value,
+  height: btnSize.value
+}))
+
+watch(() => props.modelValue, (val) => {
+  currentValue.value = formatValue(val)
+})
+
+const formatValue = (val: number): number => {
+  let value = Number(val)
+  if (isNaN(value)) value = props.min
+  if (props.integer) value = Math.round(value)
+  value = Math.max(props.min, Math.min(props.max, value))
+  return value
+}
+
+const updateValue = (val: number) => {
+  const formatted = formatValue(val)
+  currentValue.value = formatted
+  emit('update:modelValue', formatted)
+  emit('change', formatted)
+}
+
+const handleMinus = () => {
+  if (minusDisabled.value) {
+    emit('overlimit', 'minus')
+    return
+  }
+  updateValue(currentValue.value - props.step)
+}
+
+const handlePlus = () => {
+  if (plusDisabled.value) {
+    emit('overlimit', 'plus')
+    return
+  }
+  updateValue(currentValue.value + props.step)
+}
+
+const handleInput = (event: any) => {
+  const val = event.detail.value
+  if (val === '' || val === '-') return
+  let value = Number(val)
+  if (!isNaN(value)) {
+    currentValue.value = value
+  }
+}
+
+const handleBlur = (event: FocusEvent) => {
+  updateValue(currentValue.value)
+  emit('blur', event)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  emit('focus', event)
+}
+
+const startLongPress = (type: 'minus' | 'plus') => {
+  if (props.disabledLongPress || props.disabled) return
+
+  const action = type === 'minus' ? handleMinus : handlePlus
+  longPressTimer = setInterval(() => {
+    action()
+  }, 150)
+}
+
+const stopLongPress = () => {
+  if (longPressTimer) {
+    clearInterval(longPressTimer)
+    longPressTimer = null
+  }
+}
+
+onUnmounted(() => {
+  stopLongPress()
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-number-box {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &__btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    transition: all $--transition-duration;
+    border-radius: $--border-radius-sm;
+
+    &:active {
+      opacity: 0.7;
+    }
+
+    &--disabled {
+      opacity: 0.4;
+    }
+  }
+
+  &__btn-icon {
+    line-height: 1;
+  }
+
+  &__input {
+    text-align: center;
+    font-size: $--font-size-md;
+    color: $--text-color;
+    background: $--bg-color-2;
+    border: 1px solid $--border-color;
+    border-radius: $--border-radius-sm;
+    outline: none;
+
+    &--disabled {
+      background: $--bg-color;
+    }
+  }
+}
+</style>

package/src/components/u-parse/u-parse.vue

@@ -0,0 +1,197 @@
+<template>
+  <view class="u-parse">
+    <rich-text
+      :nodes="parsedNodes"
+      :selectable="selectable"
+      :image-menu-prevent="imageMenuPrevent"
+      @tap="handleTap"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  content: string
+  selectable?: boolean
+  imageMenuPrevent?: boolean
+  imageMode?: 'aspectFit' | 'aspectFill' | 'widthFix' | 'scaleToFill'
+  tagStyle?: Record<string, string>
+  lazyLoad?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  content: '',
+  selectable: false,
+  imageMenuPrevent: false,
+  imageMode: 'widthFix',
+  lazyLoad: false
+})
+
+const emit = defineEmits<{
+  load: []
+  error: [event: Event]
+  imgTap: [src: string]
+  linkTap: [href: string]
+}>()
+
+// 默认标签样式
+const defaultTagStyle: Record<string, string> = {
+  p: 'margin: 0 0 16px 0; line-height: 1.6;',
+  h1: 'font-size: 28px; font-weight: bold; margin: 0 0 16px 0;',
+  h2: 'font-size: 24px; font-weight: bold; margin: 0 0 14px 0;',
+  h3: 'font-size: 20px; font-weight: bold; margin: 0 0 12px 0;',
+  h4: 'font-size: 18px; font-weight: bold; margin: 0 0 10px 0;',
+  h5: 'font-size: 16px; font-weight: bold; margin: 0 0 8px 0;',
+  h6: 'font-size: 14px; font-weight: bold; margin: 0 0 8px 0;',
+  img: 'max-width: 100%; height: auto; display: block;',
+  ul: 'margin: 0 0 16px 0; padding-left: 20px;',
+  ol: 'margin: 0 0 16px 0; padding-left: 20px;',
+  li: 'margin: 4px 0;',
+  blockquote: 'margin: 0 0 16px 0; padding: 8px 16px; border-left: 4px solid #ebedf0; background: #f7f8fa;',
+  pre: 'margin: 0 0 16px 0; padding: 12px; background: #f7f8fa; border-radius: 4px; overflow-x: auto;',
+  code: 'padding: 2px 6px; background: #f7f8fa; border-radius: 2px; font-family: monospace;',
+  a: 'color: #1989fa; text-decoration: none;',
+  table: 'width: 100%; border-collapse: collapse; margin: 0 0 16px 0;',
+  th: 'padding: 8px; border: 1px solid #ebedf0; background: #f7f8fa; font-weight: bold;',
+  td: 'padding: 8px; border: 1px solid #ebedf0;',
+  hr: 'border: none; border-top: 1px solid #ebedf0; margin: 16px 0;',
+  br: 'content: ""; display: block; margin-bottom: 8px;'
+}
+
+// 合并样式
+const mergedTagStyle = computed(() => {
+  return { ...defaultTagStyle, ...props.tagStyle }
+})
+
+// 解析内容
+const parsedNodes = computed(() => {
+  if (!props.content) return ''
+
+  let html = props.content
+
+  // 处理图片
+  html = html.replace(/<img([^>]*)>/gi, (match, attrs) => {
+    const srcMatch = attrs.match(/src=["']([^"']+)["']/i)
+    const altMatch = attrs.match(/alt=["']([^"']*)["']/i)
+    const widthMatch = attrs.match(/width=["']?(\d+)["']?/i)
+    const heightMatch = attrs.match(/height=["']?(\d+)["']?/i)
+
+    const src = srcMatch ? srcMatch[1] : ''
+    const alt = altMatch ? altMatch[1] : ''
+    const width = widthMatch ? widthMatch[1] : 'auto'
+    const height = heightMatch ? heightMatch[1] : 'auto'
+
+    const style = mergedTagStyle.value.img || ''
+    const widthStyle = width !== 'auto' ? `width: ${width}px;` : 'width: 100%;'
+    const heightStyle = height !== 'auto' ? `height: ${height}px;` : ''
+
+    // 懒加载处理
+    const lazyAttr = props.lazyLoad ? `lazy-load="true"` : ''
+    return `<img src="${src}" alt="${alt}" style="${style} ${widthStyle} ${heightStyle}" data-src="${src}" ${lazyAttr} />`
+  })
+
+  // 处理链接
+  html = html.replace(/<a([^>]*)>/gi, (match, attrs) => {
+    const hrefMatch = attrs.match(/href=["']([^"']+)["']/i)
+    const href = hrefMatch ? hrefMatch[1] : '#'
+    const style = mergedTagStyle.value.a || ''
+    return `<a href="${href}" style="${style}" data-href="${href}">`
+  })
+
+  // 添加默认样式到标签
+  const tags = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'blockquote', 'pre', 'code', 'table', 'th', 'td', 'hr']
+  tags.forEach(tag => {
+    const style = mergedTagStyle.value[tag]
+    if (style) {
+      const regex = new RegExp(`<${tag}([^>]*)>`, 'gi')
+      html = html.replace(regex, (match, attrs) => {
+        const hasStyle = /style=/i.test(attrs)
+        if (hasStyle) {
+          return match.replace(/style=["']([^"']*)["']/i, `style="$1; ${style}"`)
+        }
+        return `<${tag} style="${style}"${attrs}>`
+      })
+    }
+  })
+
+  return html
+})
+
+// 处理点击事件
+const handleTap = (event: any) => {
+  const target = event.target
+
+  // 处理图片点击
+  if (target.tagName === 'IMG') {
+    const src = target.getAttribute('data-src') || target.getAttribute('src')
+    if (src) {
+      emit('imgTap', src)
+    }
+  }
+
+  // 处理链接点击
+  if (target.tagName === 'A') {
+    event.stopPropagation?.()
+    const href = target.getAttribute('data-href') || target.getAttribute('href')
+    if (href && href !== '#') {
+      emit('linkTap', href)
+    }
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-parse {
+  font-size: $--font-size-md;
+  line-height: 1.6;
+  color: $--text-color;
+  word-break: break-word;
+
+  :deep(img) {
+    max-width: 100%;
+    height: auto;
+    vertical-align: middle;
+  }
+
+  :deep(a) {
+    color: $--color-primary;
+    text-decoration: none;
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+
+  :deep(pre) {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+
+  :deep(code) {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  :deep(table) {
+    display: block;
+    overflow-x: auto;
+  }
+
+  :deep(blockquote) {
+    border-left: 4px solid $--border-color;
+    background-color: $--bg-color;
+    padding: $--spacing-md $--spacing-lg;
+    margin: $--spacing-md 0;
+  }
+}
+</style>

package/src/components/u-picker/u-picker.vue

@@ -0,0 +1,219 @@
+<template>
+  <view v-if="visible" class="u-picker" @click="handleOverlayClick">
+    <view class="u-picker__popup" @click.stop>
+      <view class="u-picker__toolbar">
+        <text class="u-picker__action" @click="handleCancel">取消</text>
+        <text class="u-picker__title">{{ title }}</text>
+        <text class="u-picker__action u-picker__action--confirm" @click="handleConfirm">确定</text>
+      </view>
+
+      <view v-if="loading" class="u-picker__loading">
+        <text>加载中...</text>
+      </view>
+
+      <picker-view
+        v-else
+        class="u-picker__view"
+        :value="innerIndexes"
+        indicator-class="u-picker__indicator"
+        @change="handlePickerChange"
+      >
+        <picker-view-column v-for="(column, columnIndex) in normalizedColumns" :key="columnIndex">
+          <view
+            v-for="(option, optionIndex) in column"
+            :key="option.value ?? option.label ?? optionIndex"
+            class="u-picker__option"
+          >
+            <text>{{ option.label }}</text>
+          </view>
+        </picker-view-column>
+      </picker-view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+interface PickerOption {
+  label: string
+  value: string | number
+}
+
+type PickerColumn = Array<string | number | PickerOption>
+type PickerValue = Array<string | number>
+
+interface Props {
+  visible?: boolean
+  columns?: PickerColumn[]
+  modelValue?: PickerValue
+  title?: string
+  loading?: boolean
+  closeOnClickOverlay?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  columns: () => [],
+  modelValue: () => [],
+  title: '选择器',
+  loading: false,
+  closeOnClickOverlay: false
+})
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'update:modelValue': [value: PickerValue]
+  change: [value: PickerValue, columnIndex: number]
+  confirm: [value: PickerValue]
+  cancel: []
+}>()
+
+const normalizedColumns = computed(() => props.columns.map((column) => column.map(normalizeOption)))
+const innerIndexes = ref<number[]>([])
+
+watch(
+  () => [props.columns, props.modelValue],
+  () => {
+    innerIndexes.value = getIndexesByValue(props.modelValue)
+  },
+  { immediate: true, deep: true }
+)
+
+const currentValues = computed(() => getValuesByIndexes(innerIndexes.value))
+
+const handlePickerChange = (event: any) => {
+  const values = event.detail.value as number[]
+  const previousIndexes = [...innerIndexes.value]
+  innerIndexes.value = values
+  const changedColumn = getChangedColumn(previousIndexes, values)
+  const nextValues = getValuesByIndexes(values)
+  emit('update:modelValue', nextValues)
+  emit('change', nextValues, changedColumn)
+}
+
+const handleCancel = () => {
+  emit('update:visible', false)
+  emit('cancel')
+}
+
+const handleConfirm = () => {
+  emit('update:visible', false)
+  emit('confirm', currentValues.value)
+}
+
+const handleOverlayClick = () => {
+  if (props.closeOnClickOverlay) {
+    emit('update:visible', false)
+    emit('cancel')
+  }
+}
+
+function normalizeOption(option: string | number | PickerOption): PickerOption {
+  if (typeof option === 'object' && option !== null) {
+    return option
+  }
+
+  return {
+    label: String(option),
+    value: option
+  }
+}
+
+function getIndexesByValue(values: PickerValue) {
+  return normalizedColumns.value.map((column, index) => {
+    const target = values[index]
+    const foundIndex = column.findIndex((option) => option.value === target)
+    return foundIndex >= 0 ? foundIndex : 0
+  })
+}
+
+function getValuesByIndexes(indexes: number[]) {
+  return normalizedColumns.value.map((column, index) => column[indexes[index] || 0]?.value).filter((value) => value !== undefined)
+}
+
+function getChangedColumn(previousIndexes: number[], nextIndexes: number[]) {
+  return nextIndexes.findIndex((item, index) => item !== previousIndexes[index])
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-picker {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 1000;
+
+  &__popup {
+    width: 100%;
+    background: $--bg-color-2;
+    border-radius: $--border-radius-lg $--border-radius-lg 0 0;
+    overflow: hidden;
+  }
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 48px;
+    padding: 0 $--spacing-lg;
+    border-bottom: 1px solid $--border-color;
+  }
+
+  &__title {
+    font-size: $--font-size-md;
+    color: $--text-color;
+    font-weight: 600;
+  }
+
+  &__action {
+    font-size: $--font-size-md;
+    color: $--text-color-2;
+
+    &--confirm {
+      color: $--color-primary;
+    }
+  }
+
+  &__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 240px;
+    font-size: $--font-size-md;
+    color: $--text-color-2;
+  }
+
+  &__view {
+    width: 100%;
+    height: 240px;
+  }
+
+  &__indicator {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 48px;
+    font-size: $--font-size-lg;
+    color: $--text-color;
+  }
+}
+</style>