tang-ui-x 1.3.6 → 1.3.7

package/components/TCard/index.uvue

@@ -1,31 +1,31 @@
-<script  setup lang="uts" >
-import { computed } from 'vue'
-import type { TCardProps } from './type.uts'
-
-/**
- * TCard 卡片组件
- * @description 通用卡片容器组件，用于展示内容块
- */
-
-// 定义 props
-const props = withDefaults(defineProps<TCardProps>(), {
-  title: '',
-  subtitle: '',
-  shadow: true,
-  border: false,
-  padding: 'medium',
-  radius: 'medium',
-  customClass: ''
-})
-
-// 定义 emits
-const emit = defineEmits<{
-  click: []
-}>()
-
-/**
- * 计算卡片样式类
- */
+<script  setup lang="uts" >
+import { computed } from 'vue'
+import type { TCardProps } from './type.uts'
+
+/**
+ * TCard 卡片组件
+ * @description 通用卡片容器组件，用于展示内容块
+ */
+
+// 定义 props
+const props = withDefaults(defineProps<TCardProps>(), {
+  title: '',
+  subtitle: '',
+  shadow: true,
+  border: false,
+  padding: 'medium',
+  radius: 'medium',
+  customClass: ''
+})
+
+// 定义 emits
+const emit = defineEmits<{
+  click: []
+}>()
+
+/**
+ * 计算卡片样式类
+ */
 const cardClass = computed(() => {
   const classes: string[] = [
     't-card',
@@ -66,11 +66,11 @@ const cardClass = computed(() => {
       classes.push('rounded-lg')
       break
   }
-
-  if (props.customClass !== '') {
-    classes.push(props.customClass)
-  }
-
+
+  if (props.customClass !== '') {
+    classes.push(props.customClass)
+  }
+
   return classes.join(' ')
 })
 
@@ -92,18 +92,18 @@ const cardStyle = computed((): string => {
 
   return styles.join('; ')
 })
-
-/**
- * 处理卡片点击
- */
-const handleClick = (): void => {
-  emit('click')
-}
-</script>
-
-<template>
+
+/**
+ * 处理卡片点击
+ */
+const handleClick = (): void => {
+  emit('click')
+}
+</script>
+
+<template>
   <view :class="cardClass" :style="cardStyle" @click="handleClick">
-    <!-- 卡片头部 -->
+    <!-- 卡片头部 -->
     <view
       v-if="title !== '' || subtitle !== ''"
       class="t-card__header mb-4 flex flex-row items-center justify-between border-b border-border-soft pb-4"
@@ -123,8 +123,6 @@ const handleClick = (): void => {
     </view>
 
     <!-- 卡片底部 -->
-    <view class="t-card__footer mt-4 border-t border-border-soft pt-4">
-      <slot name="footer"></slot>
-    </view>
+    <slot name="footer"/>
   </view>
 </template>

package/components/TNoticeBar/type.uts

@@ -6,7 +6,7 @@ export type NoticeBarMode = 'closeable' | 'link'
 
 export type TNoticeBarProps = {
   text?: string
-  mode?: NoticeBarMode | null
+  mode?: NoticeBarMode | undefined
   color?: string
   background?: string
   leftIcon?: string

package/components/Tabs/index.uvue

@@ -38,7 +38,7 @@ const hasItemIcon = (item: TabItem): boolean => {
 }
 
 const hasItemBadge = (item: TabItem): boolean => {
-  return item.badge !== null && item.badge !== ''
+  return item.badge != null && item.badge !== ''
 }
 
 /** 获取默认激活项的 key */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tang-ui-x",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "UniApp X UI 组件库 - 基于 uni-app x 的移动端 UI 组件库",
   "main": "index.uts",
   "module": "index.uts",

package/static/tailwind.css

@@ -61,9 +61,6 @@
 .top-1\/2 {
     top: 50%
 }
-.top-2 {
-    top: 8px
-}
 .top-3 {
     top: 12px
 }
@@ -93,10 +90,6 @@
     margin-left: auto;
     margin-right: auto
 }
-.mx-sm {
-    margin-left: 8px;
-    margin-right: 8px
-}
 .my-0 {
     margin-top: 0px;
     margin-bottom: 0px
@@ -170,9 +163,6 @@
 .mt-3 {
     margin-top: 12px
 }
-.mt-4 {
-    margin-top: 16px
-}
 .mt-5 {
     margin-top: 20px
 }
@@ -332,9 +322,6 @@
 .min-w-10 {
     min-width: 40px
 }
-.min-w-7 {
-    min-width: 28px
-}
 .min-w-theme {
     min-width: 74px
 }
@@ -797,10 +784,6 @@
     padding-left: 4px;
     padding-right: 4px
 }
-.px-10 {
-    padding-left: 40px;
-    padding-right: 40px
-}
 .px-2 {
     padding-left: 8px;
     padding-right: 8px
@@ -809,10 +792,6 @@
     padding-left: 10px;
     padding-right: 10px
 }
-.px-2xl {
-    padding-left: 32px;
-    padding-right: 32px
-}
 .px-3 {
     padding-left: 12px;
     padding-right: 12px
@@ -825,10 +804,6 @@
     padding-left: 20px;
     padding-right: 20px
 }
-.px-7 {
-    padding-left: 28px;
-    padding-right: 28px
-}
 .px-8 {
     padding-left: 32px;
     padding-right: 32px
@@ -837,10 +812,6 @@
     padding-left: 16px;
     padding-right: 16px
 }
-.px-xl {
-    padding-left: 24px;
-    padding-right: 24px
-}
 .py-0\.5 {
     padding-top: 2px;
     padding-bottom: 2px
@@ -881,10 +852,6 @@
     padding-top: 16px;
     padding-bottom: 16px
 }
-.py-5 {
-    padding-top: 20px;
-    padding-bottom: 20px
-}
 .py-8 {
     padding-top: 32px;
     padding-bottom: 32px
@@ -893,10 +860,6 @@
     padding-top: 16px;
     padding-bottom: 16px
 }
-.py-md {
-    padding-top: 12px;
-    padding-bottom: 12px
-}
 .py-sm {
     padding-top: 8px;
     padding-bottom: 8px
@@ -1007,9 +970,6 @@
 .leading-6 {
     line-height: 24px
 }
-.leading-7 {
-    line-height: 28px
-}
 .leading-\[1\.5\] {
     line-height: 1.5
 }

package/components/Tags/README.md

@@ -1,297 +0,0 @@
-# Tabs 标签页组件
-
-类似 Ant Design 的 Tabs 标签页组件，支持多种样式和功能。
-
-## 基本用法
-
-```vue
-<script setup>
-import Tabs from "@/components/Tabs";
-import type { TabItem } from "@/components/Tabs";
-
-const tabItems: TabItem[] = [
-  { key: "1", label: "选项卡 1" },
-  { key: "2", label: "选项卡 2" },
-  { key: "3", label: "选项卡 3" },
-];
-
-const activeKey = ref("1");
-</script>
-
-<template>
-  <Tabs :items="tabItems" v-model="activeKey">
-    <view v-if="activeKey === '1'">内容 1</view>
-    <view v-if="activeKey === '2'">内容 2</view>
-    <view v-if="activeKey === '3'">内容 3</view>
-  </Tabs>
-</template>
-```
-
-## 卡片式标签页
-
-```vue
-<template>
-  <Tabs :items="tabItems" type="card" v-model="activeKey">
-    <view v-if="activeKey === '1'">卡片内容 1</view>
-    <view v-if="activeKey === '2'">卡片内容 2</view>
-  </Tabs>
-</template>
-```
-
-## 带徽标和图标
-
-```vue
-<script setup>
-const tabItems: TabItem[] = [
-  { key: "1", label: "消息", icon: "💬", badge: 5 },
-  { key: "2", label: "通知", icon: "🔔", badge: 99 },
-  { key: "3", label: "设置", icon: "⚙️" },
-];
-</script>
-
-<template>
-  <Tabs :items="tabItems" />
-</template>
-```
-
-## 禁用选项卡
-
-```vue
-<script setup>
-const tabItems: TabItem[] = [
-  { key: "1", label: "可用选项" },
-  { key: "2", label: "禁用选项", disabled: true },
-  { key: "3", label: "可用选项" },
-];
-</script>
-```
-
-## 居中显示
-
-```vue
-<template>
-  <Tabs :items="tabItems" centered />
-</template>
-```
-
-## 自定义颜色
-
-```vue
-<template>
-  <Tabs :items="tabItems" active-color="#52c41a" inactive-color="#999999" />
-</template>
-```
-
-### 颜色变量机制
-
-组件内部使用 CSS 变量统一管理颜色，支持以下变量：
-
-- `--active-color`：激活标签的主颜色（控制文字、边框、滑块颜色）
-- `--active-color-rgb`：激活颜色的 RGB 值（用于生成透明背景）
-
-组件会自动将 `activeColor` prop 转换为对应的 CSS 变量，无需手动设置。
-
-**card 类型的增强效果：**
-
-card 类型的激活标签会自动应用：
-
-- 透明背景色：`rgba(var(--active-color-rgb), 0.1)`
-- 轻微上移效果：`translateY(-2px)`
-- 动态阴影：`0 4px 12px rgba(var(--active-color-rgb), 0.2)`
-
-## 不同尺寸
-
-```vue
-<template>
-  <!-- 小号 -->
-  <Tabs :items="tabItems" size="small" />
-
-  <!-- 中号（默认） -->
-  <Tabs :items="tabItems" size="medium" />
-
-  <!-- 大号 -->
-  <Tabs :items="tabItems" size="large" />
-</template>
-```
-
-## 使用插槽自定义内容
-
-```vue
-<template>
-  <Tabs :items="tabItems" v-model="activeKey">
-    <template #default="{ activeKey }">
-      <view class="p-4"> 当前激活: {{ activeKey }} </view>
-    </template>
-  </Tabs>
-</template>
-```
-
-## API
-
-### TabItem 类型
-
-| 属性     | 说明             | 类型               | 默认值  |
-| -------- | ---------------- | ------------------ | ------- |
-| key      | 唯一标识（必填） | `string`           | -       |
-| label    | 标签标题（必填） | `string`           | -       |
-| disabled | 是否禁用         | `boolean`          | `false` |
-| badge    | 徽标数字         | `number \| string` | -       |
-| icon     | 自定义图标       | `string`           | -       |
-
-### Props
-
-| 属性                          | 说明               | 类型                             | 默认值       |
-| ----------------------------- | ------------------ | -------------------------------- | ------------ |
-| items                         | 选项卡数据         | `TabItem[]`                      | `[]`         |
-| activeKey / v-model:activeKey | 当前激活的 tab key | `string`                         | -            |
-| defaultActiveKey              | 默认激活的 tab key | `string`                         | 第一项的 key |
-| type                          | 选项卡类型         | `'line' \| 'card'`               | `'line'`     |
-| tabPosition                   | 选项卡位置         | `'top' \| 'bottom'`              | `'top'`      |
-| centered                      | 是否居中显示       | `boolean`                        | `false`      |
-| scrollable                    | 是否可滑动         | `boolean`                        | `true`       |
-| activeColor                   | 激活标签的颜色     | `string`                         | `'#1677ff'`  |
-| inactiveColor                 | 未激活标签的颜色   | `string`                         | `'#666666'`  |
-| size                          | 标签大小           | `'small' \| 'medium' \| 'large'` | `'medium'`   |
-| animated                      | 是否显示动画       | `boolean`                        | `true`       |
-
-### Events
-
-| 事件名           | 说明                      | 回调参数                       |
-| ---------------- | ------------------------- | ------------------------------ |
-| change           | 切换标签时触发            | `(key: string)`                |
-| update:activeKey | 当前激活的 tab 改变时触发 | `(key: string)`                |
-| tabClick         | 点击标签时触发            | `(key: string, item: TabItem)` |
-
-### Slots
-
-| 插槽名  | 说明     | 参数                    |
-| ------- | -------- | ----------------------- |
-| default | 内容区域 | `{ activeKey: string }` |
-
-## 完整示例
-
-```vue
-<script setup>
-import Tabs from "@/components/Tabs";
-import type { TabItem } from "@/components/Tabs";
-
-const tabItems: TabItem[] = [
-  { key: "tab1", label: "首页", icon: "🏠" },
-  { key: "tab2", label: "消息", icon: "💬", badge: 5 },
-  { key: "tab3", label: "禁用", disabled: true },
-  { key: "tab4", label: "设置", icon: "⚙️" },
-];
-
-const activeKey = ref("tab1");
-
-const handleChange = (key: string) => {
-  console.log("切换到:", key);
-};
-
-const handleTabClick = (key: string, item: TabItem) => {
-  console.log("点击标签:", key, item);
-};
-</script>
-
-<template>
-  <view class="page">
-    <Tabs
-      :items="tabItems"
-      v-model="activeKey"
-      type="line"
-      size="medium"
-      active-color="#1677ff"
-      @change="handleChange"
-      @tab-click="handleTabClick"
-    >
-      <view class="tab-content">
-        <view v-if="activeKey === 'tab1'" class="p-4">
-          <text>首页内容</text>
-        </view>
-        <view v-if="activeKey === 'tab2'" class="p-4">
-          <text>消息内容</text>
-        </view>
-        <view v-if="activeKey === 'tab4'" class="p-4">
-          <text>设置内容</text>
-        </view>
-      </view>
-    </Tabs>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.page {
-  padding: 32px;
-}
-
-.tab-content {
-  background-color: #ffffff;
-  min-height: 400px;
-}
-</style>
-```
-
-## 注意事项
-
-1. 每个 `TabItem` 的 `key` 必须唯一
-2. `v-model:activeKey` 支持双向绑定
-3. 滑动指示器动画仅在 `type="line"` 且 `animated=true` 时生效
-4. 使用 `scrollable` 时，标签超出屏幕宽度会自动滚动
-5. `tabPosition="bottom"` 可将标签放置在底部（适合底部导航场景）
-
-```ts
-// 选项项
-
-/**
-
- * TabItem 类型定义
-
- */
-
-export type TabItem = {
-  /** 唯一标识 */
-
-  key: string;
-
-  /** 标签标题 */
-
-  label: string;
-
-  /** 是否禁用 */
-
-  disabled?: boolean;
-
-  /** 徽标数字 */
-
-  badge?: number | string;
-
-  /** 自定义图标 */
-
-  icon?: string;
-};
-
-type TabsProps = {
-  /** 选项卡数据 */
-  items: TabItem[];
-  /** 当前激活的 tab key */
-  activeKey?: string;
-  /** 默认激活的 tab key */
-  defaultActiveKey?: string;
-  /** 选项卡类型 */
-  type?: "line" | "card";
-  /** 选项卡位置 */
-  tabPosition?: "top" | "bottom";
-  /** 是否居中显示 */
-  centered?: boolean;
-  /** 是否可滑动 */
-  scrollable?: boolean;
-  /** 激活标签的颜色 */
-  activeColor?: string;
-  /** 未激活标签的颜色 */
-  inactiveColor?: string;
-  /** 标签大小 */
-  size?: "small" | "medium" | "large";
-  /** 是否显示动画 */
-  animated?: boolean;
-};
-```

package/components/Tags/index.uvue

@@ -1,354 +0,0 @@
-<script setup lang="uts">
-import { computed, nextTick, onMounted, ref } from 'vue'
-import type { Ref } from 'vue'
-import type { TagItem, TTagsProps } from './type.uts'
-
-type TagsModelValue = string | number | null
-
-// v-model 绑定当前激活 key
-const model = defineModel({ default: null }) as Ref<TagsModelValue>
-
-const props = withDefaults(defineProps<TTagsProps>(), {
-  items: () => [],
-  type: 'line',
-  tabPosition: 'top',
-  centered: false,
-  scrollable: true,
-  activeColor: '#00bba7',
-  inactiveColor: '#666666',
-  size: 'medium',
-  animated: true,
-})
-
-const emit = defineEmits<{
-  /** 切换标签时触发 */
-  change: [key: string | number]
-  /** 当前激活的 tag 改变时触发 */
-  'update:activeKey': [key: string | number]
-  /** 点击标签时触发 */
-  tagClick: [key: string | number, item: TagItem]
-}>()
-
-const hasItemIcon = (item: TagItem): boolean => {
-  return item.icon != null && item.icon !== ''
-}
-
-const hasItemBadge = (item: TagItem): boolean => {
-  return item.badge != null && item.badge !== ''
-}
-
-/** 获取默认激活项的 key */
-const getDefaultKey = (): string | number => {
-  const defaultActiveKey = props.defaultActiveKey
-  if (defaultActiveKey != null && defaultActiveKey !== '') {
-    return defaultActiveKey
-  }
-  if (props.items.length > 0) {
-    const firstEnabled = props.items.find((item: TagItem): boolean => item.disabled !== true)
-    if (firstEnabled != null) {
-      return firstEnabled.key
-    }
-    return props.items[0].key
-  }
-  return ''
-}
-
-/** 初始化默认激活项 */
-onMounted(() => {
-  if (model.value === null || model.value === '') {
-    model.value = getDefaultKey()
-  }
-})
-
-const isItemActive = (item: TagItem): boolean => {
-  const currentKey = model.value
-  if (currentKey === null || currentKey === '') {
-    return false
-  }
-  if (item.key === null || item.key === '') {
-    return false
-  }
-  return item.key === currentKey
-}
-
-/** 计算当前激活项的索引 */
-const activeIndex = computed((): number => {
-  return props.items.findIndex(item => isItemActive(item))
-})
-
-const showNavLine = computed((): boolean => {
-  return props.type === 'line' && props.animated === true && activeIndex.value >= 0
-})
-
-/** 获取当前激活项的 DOM 元素 */
-const navListRef = ref<UniElement | null>(null)
-
-/** 将十六进制颜色转换为 RGB */
-const hexToRgb = (hex: string): string => {
-  // 移除 # 号
-  hex = hex.replace('#', '')
-
-  // 处理缩写形式 (#fff)
-  if (hex.length === 3) {
-    const r = hex.substring(0, 1)
-    const g = hex.substring(1, 2)
-    const b = hex.substring(2, 3)
-    hex = r + r + g + g + b + b
-  }
-
-  // 转换为 RGB
-  const r = parseInt(hex.substring(0, 2), 16)
-  const g = parseInt(hex.substring(2, 4), 16)
-  const b = parseInt(hex.substring(4, 6), 16)
-
-  return `${r}, ${g}, ${b}`
-}
-
-/** 计算激活颜色的 RGB 值 */
-const activeColorRgb = computed(() => {
-  // 如果是 rgba 格式，直接提取 RGB 部分
-  if (props.activeColor.startsWith('rgb')) {
-    const match = props.activeColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)
-    if (match != null) {
-      return `${match[1]}, ${match[2]}, ${match[3]}`
-    }
-  }
-  // 如果是十六进制颜色，转换为 RGB
-  return hexToRgb(props.activeColor)
-})
-
-const containerClass = computed((): string => {
-  return 'w-full overflow-hidden bg-white'
-})
-
-const getNavListClass = (isBottom: boolean): string => {
-  const classes: string[] = [
-    'relative',
-    'flex',
-    'flex-row',
-    'items-center',
-    'overflow-x-auto',
-    'overflow-y-hidden',
-    'whitespace-nowrap'
-  ]
-
-  if (props.type === 'card') {
-    classes.push('rounded-t-xl', 'bg-action-divider', 'px-xl', 'py-lg')
-  } else {
-    classes.push('py-5')
-  }
-
-  if (props.centered) {
-    classes.push('justify-center')
-  }
-
-  if (isBottom) {
-    classes.push('border-t', 'border-divider')
-  }
-
-  return classes.join(' ')
-}
-
-const getItemPaddingClass = (): string => {
-  if (props.size === 'small') {
-    return 'px-5 py-md'
-  }
-
-  if (props.size === 'large') {
-    return 'px-10 py-5'
-  }
-
-  return props.type === 'card' ? 'px-2xl py-lg' : 'px-7 py-lg'
-}
-
-const navLabelClass = computed((): string => {
-  const classes: string[] = ['transition-all', 'duration-300']
-
-  if (props.size === 'small') {
-    classes.push('text-2xl')
-  } else if (props.size === 'large') {
-    classes.push('text-hero')
-  } else {
-    classes.push('text-7')
-  }
-
-  return classes.join(' ')
-})
-
-const navLineClass = computed((): string => {
-  const classes: string[] = ['absolute', 'h-1', 'rounded-2', 'transition-all', 'duration-300']
-
-  if (props.tabPosition === 'bottom') {
-    classes.push('top-0')
-  } else {
-    classes.push('bottom-0')
-  }
-
-  return classes.join(' ')
-})
-
-const navLineStyle = computed((): string => {
-  return `background-color: ${props.activeColor}; opacity: ${props.animated ? 1 : 0};`
-})
-
-const getNavItemClass = (item: TagItem): string => {
-  const classes: string[] = [
-    'relative',
-    'inline-flex',
-    'items-center',
-    'justify-center',
-    'origin-center',
-    'transition-all',
-    'duration-300',
-    getItemPaddingClass()
-  ]
-
-  if (props.type === 'card') {
-    classes.push('mx-sm', 'rounded-lg', 'border', 'border-border-soft', 'bg-white')
-  }
-
-  if (isItemActive(item) && props.type !== 'card') {
-    classes.push('scale-105')
-  }
-
-  if (item.disabled === true) {
-    classes.push('cursor-not-allowed', 'opacity-50')
-  } else {
-    classes.push('cursor-pointer')
-  }
-
-  return classes.join(' ')
-}
-
-const getNavItemStyle = (item: TagItem): string => {
-  const styles: string[] = []
-
-  if (props.type === 'card' && isItemActive(item)) {
-    styles.push(`background-color: rgba(${activeColorRgb.value}, 0.1)`)
-    styles.push(`border-color: ${props.activeColor}`)
-    styles.push(`box-shadow: 0 4px 12px rgba(${activeColorRgb.value}, 0.2)`)
-    styles.push('transform: translateY(-2px)')
-  }
-
-  return styles.join('; ')
-}
-
-/** 点击切换 tab */
-const handleClick = (item: TagItem, _index: number) => {
-  if (item.disabled === true) return
-
-  model.value = item.key
-  emit('update:activeKey', item.key)
-  emit('change', item.key)
-  emit('tagClick', item.key, item)
-
-  // 滚动到激活项
-  if (props.scrollable) {
-    nextTick(() => {
-    })
-  }
-}
-
-const getNavLabelStyle = (item: TagItem): string => {
-  return `color: ${isItemActive(item) ? props.activeColor : props.inactiveColor}`
-}
-
-const badgeClass = computed((): string => {
-  return 'absolute right-3 top-2 min-w-7 rounded-14 bg-danger px-2 text-center text-5 leading-7 text-white'
-})
-
-const badgeStyle = computed((): string => {
-  return 'height: 28px; transform: translateX(8px);'
-})
-
-</script>
-
-<template>
-  <view
-    :class="containerClass"
-  >
-    <scroll-view
-      v-if="tabPosition === 'top'"
-      ref="navListRef"
-      class="w-full whitespace-nowrap"
-      :scroll-x="true"
-      :show-scrollbar="false"
-    >
-      <view :class="getNavListClass(false)">
-        <view
-          v-for="(item, index) in items"
-          :key="item.key"
-          :class="getNavItemClass(item)"
-          :style="getNavItemStyle(item)"
-          :ref="'navItem' + index"
-          @click="handleClick(item, index)"
-        >
-          <image v-if="hasItemIcon(item)" class="mr-sm h-9 w-9 transition-all duration-300" :src="item.icon" mode="aspectFit" />
-
-          <text
-            :class="navLabelClass"
-            :style="getNavLabelStyle(item)"
-          >
-            {{ item.label }}
-          </text>
-
-          <view
-            v-if="hasItemBadge(item)"
-            :class="badgeClass"
-            :style="badgeStyle"
-          >
-            {{ item.badge }}
-          </view>
-        </view>
-      </view>
-    </scroll-view>
-
-    <!-- 内容插槽 -->
-    <view class="bg-white">
-      <slot :active-key="model"></slot>
-    </view>
-
-    <!-- 底部标签 -->
-    <scroll-view
-      v-if="tabPosition === 'bottom'"
-      ref="navListRef"
-      class="w-full whitespace-nowrap"
-      :scroll-x="true"
-      :show-scrollbar="false"
-    >
-      <view :class="getNavListClass(true)">
-        <view
-          v-for="(item, index) in items"
-          :key="item.key"
-          :class="getNavItemClass(item)"
-          :style="getNavItemStyle(item)"
-          @click="handleClick(item, index)"
-        >
-          <image v-if="hasItemIcon(item)" class="mr-sm h-9 w-9 transition-all duration-300" :src="item.icon" mode="aspectFit" />
-
-          <text
-            :class="navLabelClass"
-            :style="getNavLabelStyle(item)"
-          >
-            {{ item.label }}
-          </text>
-
-          <view
-            v-if="hasItemBadge(item)"
-            :class="badgeClass"
-            :style="badgeStyle"
-          >
-            {{ item.badge }}
-          </view>
-        </view>
-
-        <!-- 滑动指示器 -->
-        <view
-          v-if="showNavLine"
-          :class="navLineClass"
-          :style="navLineStyle"
-        ></view>
-      </view>
-    </scroll-view>
-  </view>
-</template>

package/components/Tags/type.uts

@@ -1,117 +0,0 @@
-/**
- * Tags 组件类型定义
- */
-
-/**
- * Tag 选项项
- */
-export type TagItem = {
-  key: string | number
-  label: string
-  disabled?: boolean
-  badge?: number | string
-  icon?: string
-}
-
-/**
- * 标签类型
- */
-export type TagType = 'line' | 'card'
-
-/**
- * 标签位置
- */
-export type TagPosition = 'top' | 'bottom'
-
-/**
- * 标签大小
- */
-export type TagSize = 'small' | 'medium' | 'large'
-
-/**
- * Tags Props 接口
- */
-export type TTagsProps = {
-  /**
-   * 选项卡数据
-   */
-  items: TagItem[]
-
-  /**
-   * 当前激活的 tag key
-   */
-  activeKey?: string | number
-
-  /**
-   * 默认激活的 tag key
-   */
-  defaultActiveKey?: string | number
-
-  /**
-   * 选项卡类型
-   * @default 'line'
-   */
-  type?: TagType
-
-  /**
-   * 选项卡位置
-   * @default 'top'
-   */
-  tabPosition?: TagPosition
-
-  /**
-   * 是否居中显示
-   * @default false
-   */
-  centered?: boolean
-
-  /**
-   * 是否可滑动
-   * @default true
-   */
-  scrollable?: boolean
-
-  /**
-   * 激活标签的颜色
-   * @default '#00bba7'
-   */
-  activeColor?: string
-
-  /**
-   * 未激活标签的颜色
-   * @default '#666666'
-   */
-  inactiveColor?: string
-
-  /**
-   * 标签大小
-   * @default 'medium'
-   */
-  size?: TagSize
-
-  /**
-   * 是否显示动画
-   * @default true
-   */
-  animated?: boolean
-}
-
-/**
- * Tags 事件接口
- */
-export interface TTagsEmits {
-  /**
-   * 切换标签时触发
-   */
-  change: (key: string | number) => void
-
-  /**
-   * 当前激活的 tag 改变时触发
-   */
-  'update:activeKey': (key: string | number) => void
-
-  /**
-   * 点击标签时触发
-   */
-  tagClick: (key: string | number, item: TagItem) => void
-}