@atooyu/uxto-ui 1.0.7 → 1.0.9

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

@@ -1,117 +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;
-  }
-}
+<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-skeleton/u-skeleton.vue

@@ -1,192 +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;
-  }
-}
+<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>

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

@@ -29,10 +29,10 @@
           :class="{ 'u-tabbar__center-btn--active': modelValue === centerTab.value }"
           @click="switchTab(centerTab.value)"
         >
-          <text class="u-tabbar__center-brand" :style="{ color: modelValue === centerTab.value ? activeColor : '#ffffff' }">
+          <text class="u-tabbar__center-brand">
             {{ centerBrand }}
           </text>
-          <text class="u-tabbar__center-text" :style="{ color: modelValue === centerTab.value ? activeColor : '#ffffff' }">
+          <text class="u-tabbar__center-text">
             {{ centerLabel }}
           </text>
         </view>
@@ -166,7 +166,6 @@ $--paper: #ffffff;
 
   // Tab按钮
   &__tab-btn {
-    flex: 1;
     height: 40px;
     border-radius: 20px;
     background: transparent;
@@ -178,7 +177,7 @@ $--paper: #ffffff;
     transition: all 200ms ease;
     white-space: nowrap;
     overflow: hidden;
-    min-width: 0;
+    padding: 0 16px;
 
     &--active {
       background: $--paper;