tang-ui-x 1.0.0

package/components/TBadge/type.uts

@@ -0,0 +1,48 @@
+/**
+ * TBadge 徽标组件属性类型定义
+ */
+export type TBadgeProps = {
+  /**
+   * 显示的数值
+   */
+  value?: number | string
+
+  /**
+   * 最大值，超过最大值显示 max+
+   * @default 99
+   */
+  max?: number
+
+  /**
+   * 是否显示小圆点
+   * @default false
+   */
+  isDot?: boolean
+
+  /**
+   * 是否隐藏徽标
+   * @default false
+   */
+  hidden?: boolean
+
+  /**
+   * 徽标类型
+   * @default "danger"
+   */
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
+
+  /**
+   * 自定义背景色
+   */
+  bgColor?: string
+
+  /**
+   * 自定义文字颜色
+   */
+  color?: string
+
+  /**
+   * 偏移量 [x, y]
+   */
+  offset?: [number, number]
+}

package/components/TButton/README.md

@@ -0,0 +1,111 @@
+# TButton 按钮组件
+
+按钮组件，支持多种类型、尺寸、形状和状态。
+
+## 基础用法
+
+```vue
+<template>
+  <TButton text="默认按钮" />
+  <TButton type="primary" text="主要按钮" />
+  <TButton type="success" text="成功按钮" />
+  <TButton type="warning" text="警告按钮" />
+  <TButton type="danger" text="危险按钮" />
+  <TButton type="info" text="信息按钮" />
+</template>
+```
+
+## 朴素按钮
+
+```vue
+<template>
+  <TButton plain text="朴素按钮" />
+  <TButton type="primary" plain text="主要按钮" />
+  <TButton type="success" plain text="成功按钮" />
+</template>
+```
+
+## 按钮尺寸
+
+```vue
+<template>
+  <TButton size="large" text="大型按钮" />
+  <TButton size="medium" text="中等按钮" />
+  <TButton size="small" text="小型按钮" />
+  <TButton size="mini" text="迷你按钮" />
+</template>
+```
+
+## 按钮形状
+
+```vue
+<template>
+  <TButton shape="square" text="方形按钮" />
+  <TButton shape="round" text="圆角按钮" />
+  <TButton shape="circle" icon="+" />
+</template>
+```
+
+## 禁用状态
+
+```vue
+<template>
+  <TButton disabled text="禁用按钮" />
+  <TButton type="primary" disabled text="禁用按钮" />
+</template>
+```
+
+## 加载状态
+
+```vue
+<template>
+  <TButton loading text="加载中" />
+  <TButton type="primary" loading text="加载中" />
+</template>
+```
+
+## 块级按钮
+
+```vue
+<template>
+  <TButton block text="块级按钮" />
+  <TButton type="primary" block text="块级按钮" />
+</template>
+```
+
+## 带图标按钮
+
+```vue
+<template>
+  <TButton icon="🔍" text="搜索" />
+  <TButton type="primary" icon="✓" text="确认" />
+</template>
+```
+
+## Props
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| type | 按钮类型 | string | primary / success / warning / danger / info / default | default |
+| size | 按钮尺寸 | string | large / medium / small / mini | medium |
+| shape | 按钮形状 | string | square / round / circle | square |
+| plain | 是否为朴素按钮 | boolean | - | false |
+| disabled | 是否禁用 | boolean | - | false |
+| loading | 是否加载中 | boolean | - | false |
+| block | 是否为块级按钮 | boolean | - | false |
+| text | 按钮文本 | string | - | - |
+| icon | 图标 | string | - | - |
+| customClass | 自定义类名 | string | - | - |
+| customStyle | 自定义样式 | string | - | - |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| click | 点击按钮时触发 | - |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 按钮内容 |

package/components/TButton/index.uvue

@@ -0,0 +1,380 @@
+<script  setup lang="uts" >
+import { computed } from 'vue'
+import type { ButtonType, ButtonSize, ButtonShape } from './type.uts'
+
+/**
+ * TButton 按钮组件
+ * @description 支持多种类型、尺寸、形状的按钮组件
+ */
+
+// Props 定义
+interface Props {
+  type?: ButtonType
+  size?: ButtonSize
+  shape?: ButtonShape
+  plain?: boolean
+  disabled?: boolean
+  loading?: boolean
+  block?: boolean
+  text?: string
+  icon?: string
+  customClass?: string
+  customStyle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'default',
+  size: 'medium',
+  shape: 'square',
+  plain: false,
+  disabled: false,
+  loading: false,
+  block: false,
+  text: '',
+  icon: '',
+  customClass: '',
+  customStyle: ''
+})
+
+// Emits 定义
+const emit = defineEmits<{
+  click: []
+}>()
+
+/**
+ * 计算按钮类名
+ */
+const buttonClasses = computed((): string => {
+  const classes: string[] = []
+
+  // 类型样式
+  classes.push(`t-button--${props.type}`)
+
+  // 尺寸样式
+  classes.push(`t-button--${props.size}`)
+
+  // 形状样式
+  classes.push(`t-button--${props.shape}`)
+
+  // 朴素按钮
+  if (props.plain) {
+    classes.push('t-button--plain')
+  }
+
+  // 禁用状态
+  if (props.disabled) {
+    classes.push('t-button--disabled')
+  }
+
+  // 加载状态
+  if (props.loading) {
+    classes.push('t-button--loading')
+  }
+
+  // 块级按钮
+  if (props.block) {
+    classes.push('t-button--block')
+  }
+
+  // 自定义类名
+  if (props.customClass) {
+    classes.push(props.customClass)
+  }
+
+  return classes.join(' ')
+})
+
+/**
+ * 计算按钮样式
+ */
+const buttonStyles = computed((): string => {
+  return props.customStyle
+})
+
+/**
+ * 计算 hover 类名
+ */
+const hoverClass = computed((): string => {
+  if (props.disabled || props.loading) {
+    return 'none'
+  }
+  return 't-button--hover'
+})
+
+/**
+ * 处理点击事件
+ */
+const handleClick = () => {
+  if (props.disabled || props.loading) {
+    return
+  }
+  emit('click')
+}
+</script>
+
+<template>
+  <button
+    class="t-button"
+    :class="buttonClasses"
+    :style="buttonStyles"
+    :disabled="disabled || loading"
+    :hover-class="hoverClass"
+    @click="handleClick"
+  >
+    <!-- 加载图标 -->
+    <view v-if="loading" class="t-button__loading">
+      <text class="t-button__loading-icon">⟳</text>
+    </view>
+
+    <!-- 自定义图标 -->
+    <view v-else-if="icon" class="t-button__icon">
+      <text class="t-button__icon-text">{{ icon }}</text>
+    </view>
+
+    <!-- 按钮文本 -->
+    <view v-if="text || $slots.default" class="t-button__text">
+      <slot>{{ text }}</slot>
+    </view>
+  </button>
+</template>
+
+
+<style lang="scss" scoped>
+// 覆盖 uni-button 原生组件的默认样式
+// 使用 uni-button.t-button 确保覆盖原生样式
+uni-button.t-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0 16px;
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: center;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  transition: all 0.3s;
+  cursor: pointer;
+  user-select: none;
+  // 重置 uni-button 的默认样式
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  min-height: 0;
+  min-width: 0;
+  background-image: none;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &__loading {
+    display: flex;
+    align-items: center;
+    margin-right: 4px;
+  }
+
+  &__loading-icon {
+    display: inline-block;
+    animation: rotate 1s linear infinite;
+    font-size: 14px;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    margin-right: 4px;
+  }
+
+  &__icon-text {
+    font-size: 16px;
+  }
+
+  &__text {
+    display: flex;
+    align-items: center;
+  }
+
+  // 尺寸样式
+  &--large {
+    height: 44px;
+    padding: 0 20px;
+    font-size: 16px;
+  }
+
+  &--medium {
+    height: 36px;
+    padding: 0 16px;
+    font-size: 14px;
+  }
+
+  &--small {
+    height: 28px;
+    padding: 0 12px;
+    font-size: 12px;
+  }
+
+  &--mini {
+    height: 24px;
+    padding: 0 8px;
+    font-size: 12px;
+  }
+
+  // 形状样式
+  &--square {
+    border-radius: 4px;
+  }
+
+  &--round {
+    border-radius: 999px;
+  }
+
+  &--circle {
+    border-radius: 50%;
+    padding: 0;
+    width: 36px;
+
+    &.t-button--large {
+      width: 44px;
+    }
+
+    &.t-button--small {
+      width: 28px;
+    }
+
+    &.t-button--mini {
+      width: 24px;
+    }
+  }
+
+  // 类型样式 - 默认
+  &--default {
+    background-color: #ffffff;
+    border-color: #dcdfe6;
+    color: #606266;
+
+    &.t-button--hover {
+      background-color: #f5f7fa;
+      border-color: #c6e2ff;
+      color: #409eff;
+    }
+
+    &.t-button--plain {
+      background-color: #ffffff;
+      border-color: #dcdfe6;
+      color: #606266;
+    }
+  }
+
+  // 类型样式 - 主要
+  &--primary {
+    background-color: #409eff;
+    border-color: #409eff;
+    color: #ffffff;
+
+    &.t-button--hover {
+      background-color: #66b1ff;
+      border-color: #66b1ff;
+    }
+
+    &.t-button--plain {
+      background-color: #ecf5ff;
+      border-color: #b3d8ff;
+      color: #409eff;
+    }
+  }
+
+  // 类型样式 - 成功
+  &--success {
+    background-color: #67c23a;
+    border-color: #67c23a;
+    color: #ffffff;
+
+    &.t-button--hover {
+      background-color: #85ce61;
+      border-color: #85ce61;
+    }
+
+    &.t-button--plain {
+      background-color: #f0f9ff;
+      border-color: #c2e7b0;
+      color: #67c23a;
+    }
+  }
+
+  // 类型样式 - 警告
+  &--warning {
+    background-color: #e6a23c;
+    border-color: #e6a23c;
+    color: #ffffff;
+
+    &.t-button--hover {
+      background-color: #ebb563;
+      border-color: #ebb563;
+    }
+
+    &.t-button--plain {
+      background-color: #fdf6ec;
+      border-color: #f5dab1;
+      color: #e6a23c;
+    }
+  }
+
+  // 类型样式 - 危险
+  &--danger {
+    background-color: #f56c6c;
+    border-color: #f56c6c;
+    color: #ffffff;
+
+    &.t-button--hover {
+      background-color: #f78989;
+      border-color: #f78989;
+    }
+
+    &.t-button--plain {
+      background-color: #fef0f0;
+      border-color: #fbc4c4;
+      color: #f56c6c;
+    }
+  }
+
+  // 类型样式 - 信息
+  &--info {
+    background-color: #909399;
+    border-color: #909399;
+    color: #ffffff;
+
+    &.t-button--hover {
+      background-color: #a6a9ad;
+      border-color: #a6a9ad;
+    }
+
+    &.t-button--plain {
+      background-color: #f4f4f5;
+      border-color: #d3d4d6;
+      color: #909399;
+    }
+  }
+
+  // 禁用状态
+  &--disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  // 块级按钮
+  &--block {
+    display: flex;
+    width: 100%;
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/components/TButton/type.uts

@@ -0,0 +1,95 @@
+/**
+ * TButton 组件类型定义
+ */
+
+/**
+ * 按钮类型
+ */
+export type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'
+
+/**
+ * 按钮尺寸
+ */
+export type ButtonSize = 'large' | 'medium' | 'small' | 'mini'
+
+/**
+ * 按钮形状
+ */
+export type ButtonShape = 'square' | 'round' | 'circle'
+
+/**
+ * 按钮 Props 接口
+ */
+export interface TButtonProps {
+  /**
+   * 按钮类型
+   * @default 'default'
+   */
+  type?: ButtonType
+
+  /**
+   * 按钮尺寸
+   * @default 'medium'
+   */
+  size?: ButtonSize
+
+  /**
+   * 按钮形状
+   * @default 'square'
+   */
+  shape?: ButtonShape
+
+  /**
+   * 是否为朴素按钮
+   * @default false
+   */
+  plain?: boolean
+
+  /**
+   * 是否为禁用状态
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * 是否为加载状态
+   * @default false
+   */
+  loading?: boolean
+
+  /**
+   * 是否为块级按钮
+   * @default false
+   */
+  block?: boolean
+
+  /**
+   * 按钮文本
+   */
+  text?: string
+
+  /**
+   * 图标名称
+   */
+  icon?: string
+
+  /**
+   * 自定义类名
+   */
+  customClass?: string
+
+  /**
+   * 自定义样式
+   */
+  customStyle?: string
+}
+
+/**
+ * 按钮事件接口
+ */
+export interface TButtonEmits {
+  /**
+   * 点击事件
+   */
+  click: () => void
+}