@atooyu/uxto-ui 1.0.0

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@atooyu/uxto-ui",
+  "version": "1.0.0",
+  "description": "跨平台 UI 组件库 - 支持 Android、iOS、鸿蒙",
+  "keywords": [
+    "uxto-ui",
+    "uni-app",
+    "cross-platform",
+    "android",
+    "ios",
+    "harmony",
+    "vue3",
+    "components"
+  ],
+  "author": "",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style": "./dist/style.css",
+    "./scss": "./src/styles/index.scss"
+  },
+  "files": [
+    "dist",
+    "src/components",
+    "src/styles"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/atooyu/uxto-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/atooyu/uxto-ui/issues"
+  },
+  "homepage": "https://uxto-ui.atooyu.com",
+  "scripts": {
+    "dev": "uni -p app",
+    "dev:h5": "uni",
+    "dev:mp-weixin": "uni -p mp-weixin",
+    "build:app": "uni build -p app",
+    "build:h5": "uni build",
+    "build:mp-weixin": "uni build -p mp-weixin",
+    "build:harmony": "uni build -p app-harmony",
+    "build:lib": "vite build --config vite.build.config.ts",
+    "build:types": "tsc --emitDeclarationOnly --declaration --outDir dist",
+    "build:all": "npm run build:lib && npm run build:types",
+    "docs:dev": "cd docs && npm run docs:dev",
+    "docs:build": "cd docs && npm run docs:build",
+    "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx",
+    "test": "vitest",
+    "prepublishOnly": "npm run build:all"
+  },
+  "dependencies": {
+    "@dcloudio/uni-app": "3.0.0-4060620250520001",
+    "@dcloudio/uni-app-harmony": "3.0.0-4060620250520001",
+    "@dcloudio/uni-components": "3.0.0-4060620250520001",
+    "@dcloudio/uni-h5": "3.0.0-4060620250520001",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@dcloudio/types": "^3.4.14",
+    "@dcloudio/uni-automator": "3.0.0-4060620250520001",
+    "@dcloudio/uni-cli-shared": "3.0.0-4060620250520001",
+    "@dcloudio/uni-stacktracey": "3.0.0-4060620250520001",
+    "@dcloudio/vite-plugin-uni": "3.0.0-4060620250520001",
+    "@types/node": "^22.13.10",
+    "@vue/runtime-core": "^3.5.13",
+    "sass": "^1.85.1",
+    "typescript": "^5.8.2",
+    "vite": "^5.2.8",
+    "vitest": "^3.0.8"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,51 @@
+// 组件导出
+export { default as UButton } from './u-button/u-button.vue'
+export { default as UInput } from './u-input/u-input.vue'
+export { default as UCell } from './u-cell/u-cell.vue'
+export { default as UCellGroup } from './u-cell-group/u-cell-group.vue'
+export { default as UModal } from './u-modal/u-modal.vue'
+export { default as UIcon } from './u-icon/u-icon.vue'
+// SVG 图标库
+export * from './u-icon/index'
+export { default as ULoading } from './u-loading/u-loading.vue'
+export { default as UTag } from './u-tag/u-tag.vue'
+export { default as USwitch } from './u-switch/u-switch.vue'
+export { default as UImage } from './u-image/u-image.vue'
+export { default as UDivider } from './u-divider/u-divider.vue'
+export { default as UNoticeBar } from './u-notice-bar/u-notice-bar.vue'
+export { default as ULayout } from './u-layout/u-layout.vue'
+export { default as UBadge } from './u-badge/u-badge.vue'
+export { default as ULoadingPage } from './u-loading-page/u-loading-page.vue'
+export { default as UParse } from './u-parse/u-parse.vue'
+export { default as UKeyboard } from './u-keyboard/u-keyboard.vue'
+export { default as UPicker } from './u-picker/u-picker.vue'
+export { default as UDatetimePicker } from './u-datetime-picker/u-datetime-picker.vue'
+export { default as URate } from './u-rate/u-rate.vue'
+export { default as UGrid } from './u-grid/u-grid.vue'
+export { default as UGridItem } from './u-grid-item/u-grid-item.vue'
+export { default as USwiper } from './u-swiper/u-swiper.vue'
+export { default as USwiperItem } from './u-swiper-item/u-swiper-item.vue'
+export { default as USearch } from './u-search/u-search.vue'
+export { default as UNumberBox } from './u-number-box/u-number-box.vue'
+export { default as UUpload } from './u-upload/u-upload.vue'
+export { default as UTextarea } from './u-textarea/u-textarea.vue'
+export { default as USlider } from './u-slider/u-slider.vue'
+export { default as UList } from './u-list/u-list.vue'
+export { default as UListItem } from './u-list-item/u-list-item.vue'
+export { default as ULineProgress } from './u-line-progress/u-line-progress.vue'
+export { default as UCountDown } from './u-count-down/u-count-down.vue'
+export { default as UTooltip } from './u-tooltip/u-tooltip.vue'
+export { default as UAvatar } from './u-avatar/u-avatar.vue'
+export { default as UEmpty } from './u-empty/u-empty.vue'
+export { default as UCheckbox } from './u-checkbox/u-checkbox.vue'
+export { default as UCheckboxGroup } from './u-checkbox-group/u-checkbox-group.vue'
+export { default as URadio } from './u-radio/u-radio.vue'
+export { default as URadioGroup } from './u-radio-group/u-radio-group.vue'
+export { default as UToast } from './u-toast/u-toast.vue'
+export { default as UPopup } from './u-popup/u-popup.vue'
+export { default as UCodeInput } from './u-code-input/u-code-input.vue'
+export { default as USkeleton } from './u-skeleton/u-skeleton.vue'
+export { default as UTransition } from './u-transition/u-transition.vue'
+export { default as ULink } from './u-link/u-link.vue'
+export { default as UReadMore } from './u-read-more/u-read-more.vue'
+export { default as UTabbar } from './u-tabbar/u-tabbar.vue'

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

@@ -0,0 +1,205 @@
+<template>
+  <view class="u-avatar" :class="avatarClass" :style="avatarStyle">
+    <slot>
+      <image v-if="src" class="u-avatar__image" :src="src" mode="aspectFill" @error="handleError" />
+      <text v-else-if="text" class="u-avatar__text">{{ displayText }}</text>
+      <text v-else class="u-avatar__icon">{{ icon || '👤' }}</text>
+    </slot>
+    <view v-if="badge && !badgeSlot" class="u-avatar__badge" :class="badgeClass">
+      <text v-if="!dot" class="u-avatar__badge-text">{{ badge }}</text>
+    </view>
+    <slot name="badge" />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useSlots } from 'vue'
+
+type AvatarSize = 'small' | 'medium' | 'large' | 'xlarge'
+type AvatarShape = 'circle' | 'square'
+type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
+
+interface Props {
+  src?: string
+  text?: string
+  icon?: string
+  size?: AvatarSize | number
+  shape?: AvatarShape
+  color?: string
+  bgColor?: string
+  badge?: string | number
+  dot?: boolean
+  badgeColor?: string
+  badgePosition?: BadgePosition
+  maxTextLength?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  src: '',
+  text: '',
+  icon: '',
+  size: 'medium',
+  shape: 'circle',
+  bgColor: '#e8e8e8',
+  dot: false,
+  badgePosition: 'top-right',
+  maxTextLength: 2
+})
+
+const slots = useSlots()
+const loadError = ref(false)
+
+const badgeSlot = computed(() => Boolean(slots.badge))
+
+const handleError = () => {
+  loadError.value = true
+}
+
+const displayText = computed(() => {
+  if (!props.text) return ''
+  if (props.text.length <= props.maxTextLength) return props.text
+  return props.text.slice(0, props.maxTextLength)
+})
+
+const sizeMap: Record<string, number> = {
+  small: 32,
+  medium: 48,
+  large: 64,
+  xlarge: 80
+}
+
+const avatarSize = computed(() => {
+  if (typeof props.size === 'number') return props.size
+  return sizeMap[props.size] || 48
+})
+
+const avatarClass = computed(() => [
+  `u-avatar--${props.shape}`,
+  {
+    'u-avatar--error': loadError.value
+  }
+])
+
+const avatarStyle = computed(() => {
+  const style: Record<string, string> = {}
+  const size = avatarSize.value
+
+  style.width = `${size}px`
+  style.height = `${size}px`
+
+  if (props.bgColor) {
+    style.backgroundColor = props.bgColor
+  }
+
+  if (props.color) {
+    style.color = props.color
+  }
+
+  if (props.shape === 'square') {
+    style.borderRadius = '4px'
+  }
+
+  return style
+})
+
+const badgeClass = computed(() => [
+  `u-avatar__badge--${props.badgePosition}`,
+  {
+    'u-avatar__badge--dot': props.dot
+  }
+])
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  box-sizing: border-box;
+  background-color: $--bg-color;
+  font-weight: 500;
+
+  &--circle {
+    border-radius: 50%;
+  }
+
+  &--square {
+    border-radius: $--radius-sm;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__text {
+    font-size: 16px;
+    color: $--text-color-2;
+    line-height: 1;
+  }
+
+  &__icon {
+    font-size: 24px;
+    color: $--text-color-3;
+  }
+
+  &__badge {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    font-size: 10px;
+    color: $--text-color-white;
+    background-color: $--color-danger;
+    border-radius: 999px;
+    box-sizing: border-box;
+
+    &--dot {
+      min-width: 8px;
+      width: 8px;
+      height: 8px;
+      padding: 0;
+      border-radius: 50%;
+    }
+
+    &--top-right {
+      top: 0;
+      right: 0;
+      transform: translate(25%, -25%);
+    }
+
+    &--top-left {
+      top: 0;
+      left: 0;
+      transform: translate(-25%, -25%);
+    }
+
+    &--bottom-right {
+      bottom: 0;
+      right: 0;
+      transform: translate(25%, 25%);
+    }
+
+    &--bottom-left {
+      bottom: 0;
+      left: 0;
+      transform: translate(-25%, 25%);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,145 @@
+<template>
+  <view class="u-badge" :class="{ 'u-badge--fixed': fixed }">
+    <slot />
+    <view
+      v-if="showBadge"
+      class="u-badge__content"
+      :class="[`u-badge__content--${type}`, { 'u-badge__content--dot': dot, 'u-badge__content--alone': !$slots.default }]"
+      :style="badgeStyle"
+    >
+      <text v-if="!dot && displayValue" class="u-badge__text">{{ displayValue }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+
+interface Props {
+  value?: number | string
+  max?: number
+  dot?: boolean
+  hidden?: boolean
+  type?: BadgeType
+  color?: string
+  offset?: [number, number]
+  fixed?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  max: 99,
+  dot: false,
+  hidden: false,
+  type: 'danger',
+  fixed: false
+})
+
+const showBadge = computed(() => {
+  return !props.hidden && (props.dot || props.value !== undefined)
+})
+
+const displayValue = computed(() => {
+  if (props.dot) return ''
+  if (typeof props.value === 'number') {
+    return props.value > props.max ? `${props.max}+` : props.value
+  }
+  return props.value
+})
+
+const badgeStyle = computed(() => {
+  const style: Record<string, string> = {}
+
+  if (props.color) {
+    style.backgroundColor = props.color
+  }
+
+  if (props.offset && props.offset.length === 2) {
+    const [x, y] = props.offset
+    style.transform = `translate(${x}px, ${y}px)`
+  }
+
+  return style
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-badge {
+  position: relative;
+  display: inline-block;
+
+  &--fixed {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+  }
+
+  &__content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 5px;
+    border-radius: 999px;
+    font-size: $--font-size-xs;
+    line-height: 1;
+    color: $--text-color-white;
+    white-space: nowrap;
+    box-sizing: border-box;
+
+    &--dot {
+      min-width: 8px;
+      width: 8px;
+      height: 8px;
+      padding: 0;
+      border-radius: 50%;
+    }
+
+    &--alone {
+      position: relative;
+      transform: none;
+    }
+
+    &--primary {
+      background-color: $--color-primary;
+    }
+
+    &--success {
+      background-color: $--color-success;
+    }
+
+    &--warning {
+      background-color: $--color-warning;
+    }
+
+    &--danger {
+      background-color: $--color-danger;
+    }
+
+    &--info {
+      background-color: $--color-info;
+    }
+  }
+
+  &__text {
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+</style>