@atooyu/uxto-ui 1.0.0

package/src/components/u-read-more/u-read-more.vue

@@ -0,0 +1,117 @@
+<template>
+  <view class="u-read-more">
+    <view
+      class="u-read-more__content"
+      :style="contentStyle"
+    >
+      <slot />
+    </view>
+    <view
+      v-if="showToggle"
+      class="u-read-more__toggle"
+      @click="handleToggle"
+    >
+      <text class="u-read-more__toggle-text">{{ toggleText }}</text>
+      <text class="u-read-more__toggle-icon">{{ expanded ? '↑' : '↓' }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+interface Props {
+  maxLength?: number
+  rows?: number
+  expandText?: string
+  collapseText?: string
+  autoCollapse?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxLength: 200,
+  rows: 3,
+  expandText: '展开',
+  collapseText: '收起',
+  autoCollapse: false
+})
+
+const emit = defineEmits<{
+  (e: 'expand'): void
+  (e: 'collapse'): void
+}>()
+
+const expanded = ref(false)
+const showToggle = ref(true)
+
+// 内容区域样式
+const contentStyle = computed(() => {
+  if (expanded.value) {
+    return {}
+  }
+  // 使用 line-clamp 限制行数
+  return {
+    display: '-webkit-box',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    webkitLineClamp: String(props.rows),
+    webkitBoxOrient: 'vertical'
+  }
+})
+
+// 切换按钮文字
+const toggleText = computed(() => {
+  return expanded.value ? props.collapseText : props.expandText
+})
+
+// 切换展开/收起
+const handleToggle = () => {
+  expanded.value = !expanded.value
+
+  if (expanded.value) {
+    emit('expand')
+  } else {
+    emit('collapse')
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-read-more {
+  &__content {
+    font-size: $--font-size-md;
+    color: $--text-color;
+    line-height: 1.6;
+    word-break: break-all;
+  }
+
+  &__toggle {
+    display: inline-flex;
+    align-items: center;
+    margin-top: $--spacing-sm;
+    color: $--color-primary;
+    font-size: $--font-size-md;
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+
+  &__toggle-text {
+    margin-right: $--spacing-xs;
+  }
+
+  &__toggle-icon {
+    font-size: $--font-size-sm;
+  }
+}
+</style>

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

@@ -0,0 +1,238 @@
+<template>
+  <view
+    class="u-search"
+    :class="{
+      'u-search--disabled': disabled,
+      'u-search--focus': isFocus
+    }"
+  >
+    <view class="u-search__content" :style="contentStyle">
+      <view v-if="showSearchIcon" class="u-search__icon">
+        <text class="u-search__icon-text">🔍</text>
+      </view>
+
+      <view class="u-search__body">
+        <input
+          class="u-search__control"
+          :type="type"
+          :value="modelValue"
+          :placeholder="placeholder"
+          :placeholder-style="placeholderStyle"
+          :placeholder-class="'u-search__placeholder'"
+          :disabled="disabled"
+          :maxlength="maxlength"
+          :focus="focus"
+          :confirm-type="confirmType"
+          :adjust-position="adjustPosition"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @confirm="handleSearch"
+        />
+      </view>
+
+      <view v-if="clearable && modelValue" class="u-search__clear" @click="handleClear">
+        <text class="u-search__clear-icon">×</text>
+      </view>
+    </view>
+
+    <view v-if="$slots.action || actionText" class="u-search__action" @click="handleAction">
+      <slot name="action">
+        <text class="u-search__action-text">{{ actionText }}</text>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+type ConfirmType = 'send' | 'search' | 'next' | 'go' | 'done'
+
+interface Props {
+  modelValue?: string | number
+  type?: 'text' | 'number' | 'idcard' | 'digit'
+  placeholder?: string
+  placeholderStyle?: string
+  disabled?: boolean
+  maxlength?: number
+  clearable?: boolean
+  focus?: boolean
+  confirmType?: ConfirmType
+  adjustPosition?: boolean
+  showSearchIcon?: boolean
+  actionText?: string
+  inputAlign?: 'left' | 'center' | 'right'
+  shape?: 'square' | 'round'
+  background?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  type: 'text',
+  placeholder: '请输入搜索关键词',
+  disabled: false,
+  maxlength: 140,
+  clearable: true,
+  focus: false,
+  confirmType: 'search',
+  adjustPosition: true,
+  showSearchIcon: true,
+  actionText: '',
+  inputAlign: 'left',
+  shape: 'round',
+  background: '#f7f8fa'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  input: [value: string]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+  search: [value: string]
+  clear: []
+  action: []
+}>()
+
+const isFocus = ref(false)
+
+const contentStyle = computed(() => {
+  const style: Record<string, string> = {
+    background: props.background,
+    'text-align': props.inputAlign
+  }
+  if (props.shape === 'round') {
+    style['border-radius'] = '999px'
+  }
+  return style
+})
+
+const handleInput = (event: any) => {
+  const value = event.detail.value
+  emit('update:modelValue', value)
+  emit('input', value)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  isFocus.value = true
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  isFocus.value = false
+  emit('blur', event)
+}
+
+const handleSearch = (event: any) => {
+  emit('search', event.detail.value)
+}
+
+const handleClear = () => {
+  emit('update:modelValue', '')
+  emit('input', '')
+  emit('clear')
+}
+
+const handleAction = () => {
+  if (!props.disabled) {
+    emit('action')
+    emit('search', String(props.modelValue))
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-search {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: $--spacing-sm $--spacing-md;
+
+  &--disabled {
+    opacity: 0.6;
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    height: $--search-height;
+    padding: 0 $--spacing-md;
+    background-color: $--bg-color-2;
+    border-radius: $--border-radius-lg;
+    transition: all $--transition-duration;
+  }
+
+  &--focus .u-search__content {
+    background-color: $--bg-color-2;
+    box-shadow: 0 0 0 1px $--color-primary;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    margin-right: $--spacing-sm;
+  }
+
+  &__icon-text {
+    font-size: $--font-size-md;
+    color: $--text-color-2;
+  }
+
+  &__body {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  &__control {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    font-size: $--font-size-md;
+    color: $--text-color;
+    background: transparent;
+  }
+
+  &__placeholder {
+    color: $--text-color-3;
+  }
+
+  &__clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin-left: $--spacing-sm;
+    background-color: $--text-color-3;
+    border-radius: 50%;
+  }
+
+  &__clear-icon {
+    color: $--bg-color-2;
+    font-size: 12px;
+    line-height: 1;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+    padding: $--spacing-sm $--spacing-md;
+  }
+
+  &__action-text {
+    font-size: $--font-size-md;
+    color: $--color-primary;
+  }
+}
+</style>

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

@@ -0,0 +1,192 @@
+<template>
+  <view v-if="!loading" class="u-skeleton__content">
+    <slot />
+  </view>
+  <view v-else class="u-skeleton" :class="{ 'u-skeleton--animate': animate }">
+    <!-- 头像骨架 -->
+    <view
+      v-if="avatar"
+      class="u-skeleton__avatar"
+      :class="`u-skeleton__avatar--${avatarShape}`"
+      :style="avatarStyle"
+    />
+    <!-- 内容区域 -->
+    <view class="u-skeleton__content">
+      <!-- 标题骨架 -->
+      <view
+        v-if="title"
+        class="u-skeleton__title"
+        :style="titleStyle"
+      />
+      <!-- 段落骨架 -->
+      <view class="u-skeleton__paragraphs">
+        <view
+          v-for="(row, index) in rowList"
+          :key="index"
+          class="u-skeleton__paragraph"
+          :style="getRowStyle(index)"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type AvatarShape = 'circle' | 'square'
+type TitleWidth = number | string
+
+interface Props {
+  loading?: boolean
+  animate?: boolean
+  avatar?: boolean
+  avatarSize?: number | string
+  avatarShape?: AvatarShape
+  title?: boolean
+  titleWidth?: TitleWidth
+  row?: number
+  rowWidth?: number | string | (number | string)[]
+  rowHeight?: number | string | (number | string)[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: true,
+  animate: true,
+  avatar: false,
+  avatarSize: 40,
+  avatarShape: 'circle',
+  title: true,
+  titleWidth: '40%',
+  row: 3,
+  rowWidth: '100%',
+  rowHeight: 16
+})
+
+const avatarStyle = computed(() => {
+  const size = typeof props.avatarSize === 'number'
+    ? `${props.avatarSize}px`
+    : props.avatarSize
+  return {
+    width: size,
+    height: size
+  }
+})
+
+const titleStyle = computed(() => {
+  const width = typeof props.titleWidth === 'number'
+    ? `${props.titleWidth}px`
+    : props.titleWidth
+  return { width }
+})
+
+const rowList = computed(() => {
+  return Array.from({ length: props.row }, (_, i) => i)
+})
+
+const getRowStyle = (index: number) => {
+  const style: Record<string, string> = {}
+
+  // 处理宽度
+  if (Array.isArray(props.rowWidth)) {
+    const width = props.rowWidth[index]
+    if (width !== undefined) {
+      style.width = typeof width === 'number' ? `${width}px` : width
+    }
+  } else if (index === props.row - 1 && props.rowWidth === '100%') {
+    // 最后一行默认 60% 宽度（如果是 100% 才处理）
+    style.width = '60%'
+  } else {
+    style.width = typeof props.rowWidth === 'number'
+      ? `${props.rowWidth}px`
+      : props.rowWidth
+  }
+
+  // 处理高度
+  if (Array.isArray(props.rowHeight)) {
+    const height = props.rowHeight[index]
+    if (height !== undefined) {
+      style.height = typeof height === 'number' ? `${height}px` : height
+    }
+  } else {
+    style.height = typeof props.rowHeight === 'number'
+      ? `${props.rowHeight}px`
+      : props.rowHeight
+  }
+
+  return style
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-skeleton {
+  display: flex;
+  gap: $--spacing-md;
+
+  &--animate {
+    .u-skeleton__avatar,
+    .u-skeleton__title,
+    .u-skeleton__paragraph {
+      animation: skeleton-blink 1.2s ease-in-out infinite;
+    }
+  }
+
+  &__avatar {
+    flex-shrink: 0;
+    background-color: $--bg-color-3;
+    border-radius: 50%;
+
+    &--circle {
+      border-radius: 50%;
+    }
+
+    &--square {
+      border-radius: $--radius-sm;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__title {
+    height: 20px;
+    margin-bottom: $--spacing-md;
+    background-color: $--bg-color-3;
+    border-radius: $--radius-sm;
+  }
+
+  &__paragraphs {
+    display: flex;
+    flex-direction: column;
+    gap: $--spacing-sm;
+  }
+
+  &__paragraph {
+    background-color: $--bg-color-3;
+    border-radius: $--radius-sm;
+  }
+}
+
+@keyframes skeleton-blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>