@atooyu/uxto-ui 1.0.0

package/src/components/u-icon/icons/zoom-in.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+</svg>

package/src/components/u-icon/icons/zoom-out.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/>
+</svg>

package/src/components/u-icon/index.ts

@@ -0,0 +1,219 @@
+// 导入所有 SVG 图标
+import arrowDown from './icons/arrow-down.svg'
+import arrowLeft from './icons/arrow-left.svg'
+import arrowRight from './icons/arrow-right.svg'
+import arrowUp from './icons/arrow-up.svg'
+import check from './icons/check.svg'
+import checkCircle from './icons/check-circle.svg'
+import chevronLeft from './icons/chevron-left.svg'
+import chevronRight from './icons/chevron-right.svg'
+import clear from './icons/clear.svg'
+import clearO from './icons/clear-o.svg'
+import close from './icons/close.svg'
+import code from './icons/code.svg'
+import copy from './icons/copy.svg'
+import deleteIcon from './icons/delete.svg'
+import download from './icons/download.svg'
+import edit from './icons/edit.svg'
+import email from './icons/email.svg'
+import error from './icons/error.svg'
+import errorO from './icons/error-o.svg'
+import expandLess from './icons/expand-less.svg'
+import expandMore from './icons/expand-more.svg'
+import eye from './icons/eye.svg'
+import eyeOff from './icons/eye-off.svg'
+import flag from './icons/flag.svg'
+import flagO from './icons/flag-o.svg'
+import fullscreen from './icons/fullscreen.svg'
+import exitFullscreen from './icons/exit-fullscreen.svg'
+import grid from './icons/grid.svg'
+import heart from './icons/heart.svg'
+import heartO from './icons/heart-o.svg'
+import info from './icons/info.svg'
+import infoO from './icons/info-o.svg'
+import keyboardArrowDown from './icons/keyboard-arrow-down.svg'
+import keyboardArrowLeft from './icons/keyboard-arrow-left.svg'
+import keyboardArrowRight from './icons/keyboard-arrow-right.svg'
+import keyboardArrowUp from './icons/keyboard-arrow-up.svg'
+import like from './icons/like.svg'
+import likeO from './icons/like-o.svg'
+import link from './icons/link.svg'
+import list from './icons/list.svg'
+import lock from './icons/lock.svg'
+import unlock from './icons/unlock.svg'
+import loading from './icons/loading.svg'
+import menu from './icons/menu.svg'
+import menuO from './icons/menu-o.svg'
+import message from './icons/message.svg'
+import minus from './icons/minus.svg'
+import notification from './icons/notification.svg'
+import bell from './icons/bell.svg'
+import phone from './icons/phone.svg'
+import plus from './icons/plus.svg'
+import question from './icons/question.svg'
+import refresh from './icons/refresh.svg'
+import refreshO from './icons/refresh-o.svg'
+import reload from './icons/reload.svg'
+import redo from './icons/redo.svg'
+import undo from './icons/undo.svg'
+import search from './icons/search.svg'
+import searchO from './icons/search-o.svg'
+import setting from './icons/setting.svg'
+import share from './icons/share.svg'
+import smile from './icons/smile.svg'
+import smileO from './icons/smile-o.svg'
+import star from './icons/star.svg'
+import starO from './icons/star-o.svg'
+import success from './icons/success.svg'
+import successO from './icons/success-o.svg'
+import tick from './icons/tick.svg'
+import upload from './icons/upload.svg'
+import user from './icons/user.svg'
+import account from './icons/account.svg'
+import group from './icons/group.svg'
+import warning from './icons/warning.svg'
+import warningO from './icons/warning-o.svg'
+import zoomIn from './icons/zoom-in.svg'
+import zoomOut from './icons/zoom-out.svg'
+import sync from './icons/sync.svg'
+import clock from './icons/clock.svg'
+import bookmark from './icons/bookmark.svg'
+import bookmarkO from './icons/bookmark-o.svg'
+import chat from './icons/chat.svg'
+import clipboard from './icons/clipboard.svg'
+
+// 图标映射表
+export const icons: Record<string, string> = {
+  // 箭头类
+  'arrow-down': arrowDown,
+  'arrow-left': arrowLeft,
+  'arrow-right': arrowRight,
+  'arrow-up': arrowUp,
+  'chevron-left': chevronLeft,
+  'chevron-right': chevronRight,
+  'expand-less': expandLess,
+  'expand-more': expandMore,
+  'keyboard-arrow-down': keyboardArrowDown,
+  'keyboard-arrow-left': keyboardArrowLeft,
+  'keyboard-arrow-right': keyboardArrowRight,
+  'keyboard-arrow-up': keyboardArrowUp,
+
+  // 操作类
+  'check': check,
+  'check-circle': checkCircle,
+  'clear': clear,
+  'clear-o': clearO,
+  'close': close,
+  'plus': plus,
+  'minus': minus,
+  'tick': tick,
+
+  // 编辑类
+  'copy': copy,
+  'cut': copy,
+  'edit': edit,
+  'delete': deleteIcon,
+  'undo': undo,
+  'redo': redo,
+
+  // 文件类
+  'upload': upload,
+  'download': download,
+  'file': clipboard,
+  'folder': clipboard,
+
+  // 状态类
+  'success': success,
+  'success-o': successO,
+  'warning': warning,
+  'warning-o': warningO,
+  'error': error,
+  'error-o': errorO,
+  'info': info,
+  'info-o': infoO,
+  'question': question,
+  'loading': loading,
+
+  // 社交类
+  'heart': heart,
+  'heart-o': heartO,
+  'star': star,
+  'star-o': starO,
+  'like': like,
+  'like-o': likeO,
+  'share': share,
+
+  // 用户类
+  'user': user,
+  'account': account,
+  'group': group,
+  'smile': smile,
+  'smile-o': smileO,
+
+  // 安全类
+  'lock': lock,
+  'unlock': unlock,
+  'eye': eye,
+  'eye-off': eyeOff,
+
+  // 交互类
+  'search': search,
+  'search-o': searchO,
+  'zoom-in': zoomIn,
+  'zoom-out': zoomOut,
+  'refresh': refresh,
+  'refresh-o': refreshO,
+  'reload': reload,
+  'sync': sync,
+  'setting': setting,
+  'fullscreen': fullscreen,
+  'exit-fullscreen': exitFullscreen,
+
+  // 导航类
+  'menu': menu,
+  'menu-o': menuO,
+  'list': list,
+  'grid': grid,
+  'more': expandMore,
+  'less': expandLess,
+
+  // 通讯类
+  'email': email,
+  'phone': phone,
+  'message': message,
+  'chat': chat,
+  'notification': notification,
+  'bell': bell,
+  'link': link,
+
+  // 标记类
+  'flag': flag,
+  'flag-o': flagO,
+  'bookmark': bookmark,
+  'bookmark-o': bookmarkO,
+  'tag': flag,
+
+  // 其他
+  'code': code,
+  'clock': clock,
+  'time': clock,
+  'calendar': clock,
+}
+
+// 获取图标 SVG 内容
+export function getIcon(name: string): string | undefined {
+  return icons[name]
+}
+
+// 获取所有图标名称
+export function getIconNames(): string[] {
+  return Object.keys(icons)
+}
+
+// 添加自定义图标
+export function addIcon(name: string, svg: string): void {
+  icons[name] = svg
+}
+
+// 默认导出所有图标
+export default icons

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

@@ -0,0 +1,117 @@
+<template>
+  <view
+    class="u-icon"
+    :class="{ 'u-icon--spin': spin }"
+    :style="iconStyle"
+    @click="handleClick"
+  >
+    <!-- SVG 图标模式 -->
+    <image
+      v-if="isSvgIcon && iconSrc"
+      class="u-icon__svg"
+      :src="iconSrc"
+      :style="{ width: sizePx, height: sizePx }"
+      mode="aspectFit"
+    />
+    <!-- Emoji/文字模式 -->
+    <text v-else class="u-icon__inner">{{ name }}</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getIcon } from './index'
+
+interface Props {
+  name: string
+  size?: number | string
+  color?: string
+  spin?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 16
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const handleClick = (event: MouseEvent) => {
+  emit('click', event)
+}
+
+// 判断是否为 SVG 图标
+const isSvgIcon = computed(() => {
+  return !!getIcon(props.name)
+})
+
+// 获取图标 SVG 资源
+const iconSrc = computed(() => {
+  return getIcon(props.name)
+})
+
+// 尺寸转换为 px
+const sizePx = computed(() => {
+  const size = typeof props.size === 'number' ? props.size : parseInt(props.size)
+  return size + 'px'
+})
+
+// 图标样式
+const iconStyle = computed(() => {
+  const size = typeof props.size === 'number' ? props.size : parseInt(props.size)
+  const style: Record<string, string> = {
+    fontSize: size + 'px',
+    width: size + 'px',
+    height: size + 'px'
+  }
+  // SVG 图标通过 fill="currentColor" 支持颜色
+  // 但 image 标签不支持直接设置颜色，需要通过 filter 或特殊处理
+  if (props.color && !isSvgIcon.value) {
+    style.color = props.color
+  }
+  return style
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-style: normal;
+  line-height: 1;
+
+  &--spin {
+    animation: u-icon-spin 1s linear infinite;
+  }
+
+  &__inner {
+    font-family: inherit;
+    line-height: 1;
+  }
+
+  &__svg {
+    display: block;
+    object-fit: contain;
+  }
+}
+
+@keyframes u-icon-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

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

@@ -0,0 +1,106 @@
+<template>
+  <view class="u-image" :style="{ width: width + 'px', height: height + 'px' }">
+    <image
+      class="u-image__inner"
+      :src="src"
+      :mode="mode"
+      :lazy-load="lazyLoad"
+      :fade="fade"
+      @load="handleLoad"
+      @error="handleError"
+    />
+    <view v-if="loading && !loaded" class="u-image__loading">
+      <slot name="loading">
+        <u-loading :size="20" />
+      </slot>
+    </view>
+    <view v-if="error && !loaded" class="u-image__error">
+      <slot name="error">
+        <text class="u-image__error-text">加载失败</text>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  src: string
+  width?: number | string
+  height?: number | string
+  mode?: string
+  lazyLoad?: boolean
+  fade?: boolean
+  loading?: boolean
+  error?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  width: 100,
+  height: 100,
+  mode: 'aspectFill',
+  lazyLoad: true,
+  fade: true,
+  loading: true,
+  error: true
+})
+
+const emit = defineEmits<{
+  load: [event: Event]
+  error: [event: Event]
+}>()
+
+const loaded = ref(false)
+
+const handleLoad = (event: Event) => {
+  loaded.value = true
+  emit('load', event)
+}
+
+const handleError = (event: Event) => {
+  loaded.value = false
+  emit('error', event)
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-image {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+
+  &__inner {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  &__loading,
+  &__error {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $--bg-color;
+  }
+
+  &__error-text {
+    font-size: $--font-size-sm;
+    color: $--text-color-3;
+  }
+}
+</style>

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

@@ -0,0 +1,208 @@
+<template>
+  <view
+    class="u-input"
+    :class="{
+      'u-input--disabled': disabled,
+      'u-input--error': error,
+      'u-input--focus': isFocus
+    }"
+  >
+    <view v-if="$slots.prefix || prefixIcon" class="u-input__prefix">
+      <slot name="prefix">
+        <text class="u-input__icon">{{ prefixIcon }}</text>
+      </slot>
+    </view>
+
+    <view class="u-input__body">
+      <input
+        class="u-input__control"
+        :type="type"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :placeholder-style="placeholderStyle"
+        :placeholder-class="'u-input__placeholder'"
+        :disabled="disabled"
+        :maxlength="maxlength"
+        :focus="focus"
+        :confirm-type="confirmType"
+        :adjust-position="adjustPosition"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @confirm="handleConfirm"
+      />
+    </view>
+
+    <view v-if="clearable && modelValue" class="u-input__clear" @click="handleClear">
+      <text class="u-input__clear-icon">×</text>
+    </view>
+
+    <view v-if="$slots.suffix || suffixIcon" class="u-input__suffix">
+      <slot name="suffix">
+        <text class="u-input__icon">{{ suffixIcon }}</text>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+type InputType = 'text' | 'number' | 'idcard' | 'digit' | 'password'
+type ConfirmType = 'send' | 'search' | 'next' | 'go' | 'done'
+
+interface Props {
+  modelValue?: string | number
+  type?: InputType
+  placeholder?: string
+  placeholderStyle?: string
+  disabled?: boolean
+  maxlength?: number
+  clearable?: boolean
+  focus?: boolean
+  error?: boolean
+  confirmType?: ConfirmType
+  adjustPosition?: boolean
+  prefixIcon?: string
+  suffixIcon?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  type: 'text',
+  placeholder: '请输入',
+  disabled: false,
+  maxlength: 140,
+  clearable: false,
+  focus: false,
+  error: false,
+  confirmType: 'done',
+  adjustPosition: true
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  input: [value: string]
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+  confirm: [value: string]
+  clear: []
+}>()
+
+const isFocus = ref(false)
+
+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 handleConfirm = (event: any) => {
+  emit('confirm', event.detail.value)
+}
+
+const handleClear = () => {
+  emit('update:modelValue', '')
+  emit('input', '')
+  emit('clear')
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-input {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: $--input-height;
+  padding: 0 $--spacing-md;
+  background-color: $--bg-color-2;
+  border-radius: $--border-radius-md;
+  border: 1px solid $--border-color;
+  transition: all $--transition-duration;
+
+  &--focus {
+    border-color: $--color-primary;
+  }
+
+  &--error {
+    border-color: $--color-danger;
+  }
+
+  &--disabled {
+    background-color: $--bg-color;
+  }
+
+  &__body {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
+
+  &__control {
+    flex: 1;
+    height: 100%;
+    font-size: $--font-size-md;
+    color: $--text-color;
+    background: transparent;
+  }
+
+  &__placeholder {
+    color: $--text-color-3;
+  }
+
+  &__prefix,
+  &__suffix {
+    display: flex;
+    align-items: center;
+  }
+
+  &__prefix {
+    margin-right: $--spacing-sm;
+  }
+
+  &__suffix {
+    margin-left: $--spacing-sm;
+  }
+
+  &__icon {
+    color: $--text-color-2;
+    font-size: $--font-size-md;
+  }
+
+  &__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;
+  }
+}
+</style>