@atooyu/uxto-ui 1.0.0

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

@@ -0,0 +1,301 @@
+<template>
+  <view class="u-swiper">
+    <swiper
+      class="u-swiper__wrapper"
+      :autoplay="autoplay"
+      :interval="interval"
+      :duration="duration"
+      :indicator-dots="showIndicator && !indicatorSlot"
+      :indicator-color="indicatorColor"
+      :indicator-active-color="indicatorActiveColor"
+      :circular="circular"
+      :vertical="vertical"
+      :current="currentIndex"
+      @change="handleChange"
+      @animationfinish="handleAnimationFinish"
+    >
+      <slot />
+    </swiper>
+
+    <!-- 加载状态 -->
+    <view v-if="loading" class="u-swiper__loading">
+      <view class="u-swiper__loading-icon" />
+    </view>
+
+    <!-- 标题 -->
+    <view v-if="showTitle && currentTitle" class="u-swiper__title">
+      <text class="u-swiper__title-text">{{ currentTitle }}</text>
+    </view>
+
+    <!-- 自定义指示器 -->
+    <view v-if="showIndicator && indicatorSlot" class="u-swiper__indicator">
+      <slot name="indicator" :current="currentIndex" :total="itemCount" />
+    </view>
+
+    <!-- 默认指示器样式 -->
+    <view v-if="showIndicator && !customIndicator && !indicatorSlot" :class="indicatorClass" :style="indicatorStyle">
+      <view
+        v-for="i in itemCount"
+        :key="i"
+        class="u-swiper__indicator-item"
+        :class="{ 'u-swiper__indicator-item--active': i - 1 === currentIndex }"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useSlots, watch, provide } from 'vue'
+
+type IndicatorPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+
+interface Props {
+  autoplay?: boolean
+  interval?: number
+  duration?: number
+  circular?: boolean
+  vertical?: boolean
+  indicatorDots?: boolean
+  indicatorColor?: string
+  indicatorActiveColor?: string
+  indicatorPosition?: IndicatorPosition
+  loading?: boolean
+  showTitle?: boolean
+  height?: string | number
+  card?: boolean
+  cardScale?: number
+  cardSpace?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  autoplay: true,
+  interval: 3000,
+  duration: 500,
+  circular: true,
+  vertical: false,
+  indicatorDots: true,
+  indicatorColor: 'rgba(255, 255, 255, 0.5)',
+  indicatorActiveColor: '#ffffff',
+  indicatorPosition: 'bottom-right',
+  loading: false,
+  showTitle: false,
+  height: 200,
+  card: false,
+  cardScale: 0.9,
+  cardSpace: 10
+})
+
+const emit = defineEmits<{
+  change: [index: number]
+  animationfinish: [index: number]
+}>()
+
+const slots = useSlots()
+const currentIndex = ref(0)
+const itemCount = ref(0)
+const currentTitle = ref('')
+const itemTitles = ref<string[]>([])
+
+const indicatorSlot = computed(() => Boolean(slots.indicator))
+const customIndicator = computed(() => props.card)
+
+const showIndicator = computed(() => props.indicatorDots && itemCount.value > 1)
+
+const indicatorClass = computed(() => [
+  'u-swiper__indicator-wrapper',
+  `u-swiper__indicator-wrapper--${props.indicatorPosition}`,
+  {
+    'u-swiper__indicator-wrapper--vertical': props.vertical
+  }
+])
+
+const indicatorStyle = computed(() => {
+  const style: Record<string, string> = {}
+
+  if (props.indicatorColor) {
+    style.setProperty('--indicator-color', props.indicatorColor)
+  }
+  if (props.indicatorActiveColor) {
+    style.setProperty('--indicator-active-color', props.indicatorActiveColor)
+  }
+
+  return style
+})
+
+const swiperHeight = computed(() => {
+  if (typeof props.height === 'number') {
+    return `${props.height}px`
+  }
+  return props.height
+})
+
+const registerItem = (title?: string) => {
+  const index = itemCount.value
+  itemCount.value += 1
+  if (title) {
+    itemTitles.value.push(title)
+  }
+  return index
+}
+
+const handleChange = (e: any) => {
+  const { current } = e.detail
+  currentIndex.value = current
+  if (itemTitles.value[current]) {
+    currentTitle.value = itemTitles.value[current]
+  }
+  emit('change', current)
+}
+
+const handleAnimationFinish = (e: any) => {
+  emit('animationfinish', e.detail.current)
+}
+
+const setActiveIndex = (index: number) => {
+  currentIndex.value = index
+}
+
+watch(() => props.loading, (val) => {
+  if (!val && itemTitles.value[currentIndex.value]) {
+    currentTitle.value = itemTitles.value[currentIndex.value]
+  }
+})
+
+provide('u-swiper', {
+  card: computed(() => props.card),
+  cardScale: computed(() => props.cardScale),
+  cardSpace: computed(() => props.cardSpace),
+  vertical: computed(() => props.vertical),
+  height: swiperHeight,
+  registerItem,
+  setActiveIndex
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-swiper {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  &__wrapper {
+    width: 100%;
+    height: var(--swiper-height, 200px);
+  }
+
+  &__loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.3);
+    z-index: 10;
+
+    &-icon {
+      width: 32px;
+      height: 32px;
+      border: 3px solid rgba(255, 255, 255, 0.3);
+      border-top-color: #fff;
+      border-radius: 50%;
+      animation: u-swiper-loading 0.8s linear infinite;
+    }
+  }
+
+  @keyframes u-swiper-loading {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  &__title {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: $--spacing-sm $--spacing-base;
+    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
+    z-index: 5;
+
+    &-text {
+      font-size: $--font-size-base;
+      color: $--text-color-white;
+      line-height: 1.4;
+    }
+  }
+
+  &__indicator {
+    position: absolute;
+    z-index: 5;
+  }
+
+  &__indicator-wrapper {
+    position: absolute;
+    display: flex;
+    z-index: 5;
+    padding: $--spacing-xs $--spacing-sm;
+
+    &--top-left {
+      top: 0;
+      left: 0;
+    }
+
+    &--top-right {
+      top: 0;
+      right: 0;
+    }
+
+    &--bottom-left {
+      bottom: 0;
+      left: 0;
+    }
+
+    &--bottom-right {
+      bottom: 0;
+      right: 0;
+    }
+
+    &--vertical {
+      flex-direction: column;
+    }
+  }
+
+  &__indicator-item {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--indicator-color, rgba(255, 255, 255, 0.5));
+    margin: 0 4px;
+    transition: all 0.3s;
+
+    &--active {
+      width: 16px;
+      border-radius: 4px;
+      background-color: var(--indicator-active-color, #fff);
+    }
+  }
+}
+
+.u-swiper__indicator-wrapper--vertical .u-swiper__indicator-item {
+  width: 6px;
+  height: 6px;
+  margin: 4px 0;
+
+  &--active {
+    width: 6px;
+    height: 16px;
+  }
+}
+</style>

package/src/components/u-swiper-item/u-swiper-item.vue

@@ -0,0 +1,82 @@
+<template>
+  <swiper-item class="u-swiper-item" :class="{ 'u-swiper-item--card': isCard }" :style="itemStyle">
+    <slot />
+  </swiper-item>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import type { ComputedRef } from 'vue'
+
+interface SwiperContext {
+  card: ComputedRef<boolean>
+  cardScale: ComputedRef<number>
+  cardSpace: ComputedRef<number>
+  vertical: ComputedRef<boolean>
+  height: ComputedRef<string>
+  registerItem: (title?: string) => number
+  setActiveIndex: (index: number) => void
+}
+
+interface Props {
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: ''
+})
+
+const swiper = inject<SwiperContext | null>('u-swiper', null)
+
+if (swiper) {
+  swiper.registerItem(props.title)
+}
+
+const isCard = computed(() => swiper?.card.value ?? false)
+const cardScale = computed(() => swiper?.cardScale.value ?? 0.9)
+const cardSpace = computed(() => swiper?.cardSpace.value ?? 10)
+const isVertical = computed(() => swiper?.vertical.value ?? false)
+const swiperHeight = computed(() => swiper?.height.value ?? '200px')
+
+const itemStyle = computed(() => {
+  if (!isCard.value) {
+    return {}
+  }
+
+  if (isVertical.value) {
+    return {
+      height: swiperHeight.value,
+      padding: `${cardSpace.value}px 0`
+    }
+  }
+
+  return {
+    width: `${cardScale.value * 100}%`,
+    marginLeft: `${(1 - cardScale.value) * 50}%`,
+    marginRight: `${(1 - cardScale.value) * 50}%`
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-swiper-item {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  &--card {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

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

@@ -0,0 +1,105 @@
+<template>
+  <view
+    class="u-switch"
+    :class="{ 'u-switch--on': modelValue, 'u-switch--disabled': disabled }"
+    :style="switchStyle"
+    @click="handleClick"
+  >
+    <view class="u-switch__node" :style="nodeStyle">
+      <u-loading v-if="loading" :size="nodeSize" :color="modelValue ? '#fff' : '#999'" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue?: boolean
+  disabled?: boolean
+  loading?: boolean
+  size?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  disabled: false,
+  loading: false,
+  size: 30
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  change: [value: boolean]
+}>()
+
+// 计算节点大小
+const nodeSize = computed(() => Math.round(props.size * 0.8))
+
+// 开关样式
+const switchStyle = computed(() => ({
+  width: `${Math.round(props.size * 1.67)}px`,
+  height: `${props.size}px`,
+  borderRadius: `${props.size / 2}px`
+}))
+
+// 节点样式
+const nodeStyle = computed(() => {
+  const node = nodeSize.value
+  const gap = Math.round((props.size - node) / 2)
+  const translateX = props.modelValue ? props.size - node - gap * 2 : 0
+
+  return {
+    width: `${node}px`,
+    height: `${node}px`,
+    top: `${gap}px`,
+    left: `${gap}px`,
+    transform: `translateX(${translateX}px)`
+  }
+})
+
+const handleClick = () => {
+  if (props.disabled || props.loading) return
+
+  const newValue = !props.modelValue
+  emit('update:modelValue', newValue)
+  emit('change', newValue)
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-switch {
+  position: relative;
+  background-color: $--bg-color-3;
+  transition: background-color $--transition-duration;
+  box-sizing: border-box;
+
+  &--on {
+    background-color: $--color-primary;
+  }
+
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &__node {
+    position: absolute;
+    background-color: $--bg-color-2;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform $--transition-duration;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+}
+</style>

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

@@ -0,0 +1,221 @@
+<template>
+  <view class="u-tabbar">
+    <!-- 导航栏背景 -->
+    <view class="u-tabbar__nav-wrap">
+      <!-- 左侧Tab按钮 -->
+      <view
+        class="u-tabbar__tab-btn"
+        :class="{ 'u-tabbar__tab-btn--active': modelValue === leftTab.value }"
+        @click="switchTab(leftTab.value)"
+      >
+        <text class="u-tabbar__tab-icon">{{ leftTab.icon }}</text>
+        <text class="u-tabbar__tab-text">{{ leftTab.label }}</text>
+      </view>
+
+      <!-- 中间占位 + 凸起按钮 -->
+      <view class="u-tabbar__center">
+        <view
+          class="u-tabbar__center-btn"
+          :class="{ 'u-tabbar__center-btn--active': modelValue === centerTab.value }"
+          @click="switchTab(centerTab.value)"
+        >
+          <text class="u-tabbar__center-brand">{{ centerBrand }}</text>
+          <text class="u-tabbar__center-text">{{ centerLabel }}</text>
+        </view>
+      </view>
+
+      <!-- 右侧Tab按钮 -->
+      <view
+        class="u-tabbar__tab-btn"
+        :class="{ 'u-tabbar__tab-btn--active': modelValue === rightTab.value }"
+        @click="switchTab(rightTab.value)"
+      >
+        <text class="u-tabbar__tab-icon">{{ rightTab.icon }}</text>
+        <text class="u-tabbar__tab-text">{{ rightTab.label }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface TabItem {
+  label: string
+  icon: string
+  value: string
+}
+
+interface Props {
+  modelValue?: string
+  leftTab?: TabItem
+  centerTab?: TabItem
+  rightTab?: TabItem
+  centerBrand?: string
+  centerLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 'home',
+  leftTab: () => ({ label: '首页', icon: '⌂', value: 'home' }),
+  centerTab: () => ({ label: '图域', icon: 'TU', value: 'center' }),
+  rightTab: () => ({ label: '我的', icon: '◉', value: 'mine' }),
+  centerBrand: 'TU',
+  centerLabel: '图域'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'tab-change': [value: string]
+}>()
+
+const switchTab = (tab: string) => {
+  emit('update:modelValue', tab)
+  emit('tab-change', tab)
+}
+</script>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// 薄荷主题色
+$--mint-1: #12b6af;
+$--mint-2: #9fe4dd;
+$--ink: #1b4d4a;
+$--paper: #ffffff;
+
+.u-tabbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  width: 100%;
+}
+
+// 导航栏容器 - 胶囊形状
+.u-tabbar__nav-wrap {
+  position: absolute;
+  left: 14px;
+  right: 14px;
+  bottom: calc(10px + env(safe-area-inset-bottom));
+  /* 鴻蒙兼容 */
+  bottom: calc(10px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom)));
+  z-index: 5;
+  height: 56px;
+  border-radius: 28px;
+  background: linear-gradient(90deg, $--mint-1 0%, $--mint-2 100%);
+  box-shadow: 0 10px 24px rgba(7, 114, 108, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 8px;
+  box-sizing: border-box;
+}
+
+// Tab按钮
+.u-tabbar__tab-btn {
+  flex: 1;
+  height: 40px;
+  border-radius: 20px;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  font-size: 14px;
+  transition: all 200ms ease;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
+
+  &--active {
+    background: $--paper;
+    color: #0c958e;
+    box-shadow: inset 0 0 0 1px rgba(17, 135, 128, 0.14);
+  }
+}
+
+.u-tabbar__tab-icon {
+  font-size: 16px;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.9);
+  flex-shrink: 0;
+}
+
+.u-tabbar__tab-btn--active .u-tabbar__tab-icon {
+  color: #0c958e;
+}
+
+.u-tabbar__tab-text {
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.9);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.u-tabbar__tab-btn--active .u-tabbar__tab-text {
+  color: #0c958e;
+}
+
+// 中间区域 - 占位
+.u-tabbar__center {
+  position: relative;
+  width: 72px;
+  height: 56px;
+  flex-shrink: 0;
+}
+
+// 中间凸起按钮
+.u-tabbar__center-btn {
+  position: absolute;
+  left: 50%;
+  top: -22px;
+  transform: translateX(-50%);
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  border: 2px solid #dff7f4;
+  background: linear-gradient(180deg, #65d8d1 0%, #21b5ae 100%);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  box-shadow: 0 8px 20px rgba(8, 112, 106, 0.3);
+  transition: all 200ms ease;
+
+  &:active {
+    transform: translateX(-50%) scale(0.95);
+  }
+
+  &--active {
+    background: $--paper;
+    border-color: $--mint-1;
+
+    .u-tabbar__center-brand,
+    .u-tabbar__center-text {
+      color: $--mint-1;
+    }
+  }
+}
+
+.u-tabbar__center-brand {
+  font-size: 22px;
+  line-height: 1;
+  font-weight: 700;
+  color: #fff;
+}
+
+.u-tabbar__center-text {
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  color: #fff;
+}
+</style>