tang-ui-x 1.0.0

package/components/TText/README.md

@@ -0,0 +1,124 @@
+# TText 文本组件
+
+文本组件，支持多种类型、尺寸、粗细和样式。
+
+## 基础用法
+
+```vue
+<template>
+  <TText text="默认文本" />
+  <TText type="primary" text="主要文本" />
+  <TText type="success" text="成功文本" />
+  <TText type="warning" text="警告文本" />
+  <TText type="danger" text="危险文本" />
+  <TText type="info" text="信息文本" />
+</template>
+```
+
+## 文本尺寸
+
+```vue
+<template>
+  <TText size="large" text="大号文本" />
+  <TText size="medium" text="中号文本" />
+  <TText size="small" text="小号文本" />
+  <TText size="mini" text="迷你文本" />
+</template>
+```
+
+## 文本粗细
+
+```vue
+<template>
+  <TText weight="lighter" text="细体文本" />
+  <TText weight="normal" text="正常文本" />
+  <TText weight="medium" text="中粗文本" />
+  <TText weight="bold" text="粗体文本" />
+</template>
+```
+
+## 文本对齐
+
+```vue
+<template>
+  <TText align="left" text="左对齐" />
+  <TText align="center" text="居中对齐" />
+  <TText align="right" text="右对齐" />
+  <TText align="justify" text="两端对齐" />
+</template>
+```
+
+## 文本样式
+
+```vue
+<template>
+  <TText bold text="加粗文本" />
+  <TText italic text="斜体文本" />
+  <TText underline text="下划线文本" />
+  <TText strikethrough text="删除线文本" />
+</template>
+```
+
+## 自定义颜色
+
+```vue
+<template>
+  <TText color="#ff0000" text="红色文本" />
+  <TText color="#00ff00" text="绿色文本" />
+  <TText color="#0000ff" text="蓝色文本" />
+</template>
+```
+
+## 文本省略
+
+```vue
+<template>
+  <TText ellipsis text="这是一段很长的文本，超出部分会显示省略号" />
+  <TText :max-lines="2" text="这是一段很长的文本，最多显示两行，超出部分会被隐藏" />
+</template>
+```
+
+## 自定义行高
+
+```vue
+<template>
+  <TText :line-height="2" text="行高为2的文本" />
+  <TText line-height="30px" text="行高为30px的文本" />
+</template>
+```
+
+## 使用插槽
+
+```vue
+<template>
+  <TText type="primary">
+    这是通过插槽传入的文本内容
+  </TText>
+</template>
+```
+
+## Props
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|------|------|------|--------|--------|
+| text | 文本内容 | string | - | - |
+| type | 文本类型 | string | primary / success / warning / danger / info / default | default |
+| size | 文本尺寸 | string | large / medium / small / mini | medium |
+| weight | 文本粗细 | string | lighter / normal / medium / bold | normal |
+| align | 文本对齐 | string | left / center / right / justify | left |
+| color | 自定义颜色 | string | - | - |
+| lineHeight | 行高 | number / string | - | 1.5 |
+| maxLines | 最大行数 | number | - | 0 |
+| ellipsis | 是否显示省略号 | boolean | - | false |
+| bold | 是否加粗 | boolean | - | false |
+| italic | 是否斜体 | boolean | - | false |
+| underline | 是否显示下划线 | boolean | - | false |
+| strikethrough | 是否显示删除线 | boolean | - | false |
+| customClass | 自定义类名 | string | - | - |
+| customStyle | 自定义样式 | string | - | - |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 文本内容 |

package/components/TText/index.uvue

@@ -0,0 +1,257 @@
+
+
+<script  setup lang="uts" >
+import { computed } from 'vue'
+import type { TextType, TextSize, TextWeight, TextAlign } from './type.uts'
+
+/**
+ * TText 文本组件
+ * @description 支持多种类型、尺寸、粗细的文本组件
+ */
+
+// Props 定义
+interface Props {
+  text?: string
+  type?: TextType
+  size?: TextSize
+  weight?: TextWeight
+  align?: TextAlign
+  color?: string
+  lineHeight?: number | string
+  maxLines?: number
+  ellipsis?: boolean
+  bold?: boolean
+  italic?: boolean
+  underline?: boolean
+  strikethrough?: boolean
+  customClass?: string
+  customStyle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  text: '',
+  type: 'default',
+  size: 'medium',
+  weight: 'normal',
+  align: 'left',
+  color: '',
+  lineHeight: 1.5,
+  maxLines: 0,
+  ellipsis: false,
+  bold: false,
+  italic: false,
+  underline: false,
+  strikethrough: false,
+  customClass: '',
+  customStyle: ''
+})
+
+/**
+ * 计算文本类名
+ */
+const textClasses = computed((): string => {
+  const classes: string[] = []
+
+  // 类型样式
+  classes.push(`t-text--${props.type}`)
+
+  // 尺寸样式
+  classes.push(`t-text--${props.size}`)
+
+  // 粗细样式
+  classes.push(`t-text--${props.weight}`)
+
+  // 对齐样式
+  classes.push(`t-text--${props.align}`)
+
+  // 加粗
+  if (props.bold) {
+    classes.push('t-text--bold')
+  }
+
+  // 斜体
+  if (props.italic) {
+    classes.push('t-text--italic')
+  }
+
+  // 下划线
+  if (props.underline) {
+    classes.push('t-text--underline')
+  }
+
+  // 删除线
+  if (props.strikethrough) {
+    classes.push('t-text--strikethrough')
+  }
+
+  // 省略号
+  if (props.ellipsis) {
+    classes.push('t-text--ellipsis')
+  }
+
+  // 自定义类名
+  if (props.customClass) {
+    classes.push(props.customClass)
+  }
+
+  return classes.join(' ')
+})
+
+/**
+ * 计算文本样式
+ */
+const textStyles = computed((): string => {
+  const styles: string[] = []
+
+  // 自定义颜色
+  if (props.color) {
+    styles.push(`color: ${props.color}`)
+  }
+
+  // 行高
+  if (props.lineHeight) {
+    const lineHeight = typeof props.lineHeight === 'number'
+      ? props.lineHeight
+      : props.lineHeight
+    styles.push(`line-height: ${lineHeight}`)
+  }
+
+  // 最大行数
+  if (props.maxLines > 0) {
+    styles.push(`-webkit-line-clamp: ${props.maxLines}`)
+    styles.push('display: -webkit-box')
+    styles.push('-webkit-box-orient: vertical')
+    styles.push('overflow: hidden')
+  }
+
+  // 自定义样式
+  if (props.customStyle) {
+    styles.push(props.customStyle)
+  }
+
+  return styles.join('; ')
+})
+</script>
+
+<template>
+  <text class="t-text" :class="textClasses" :style="textStyles">
+    <slot>{{ text }}</slot>
+  </text>
+</template>
+
+<style lang="scss" scoped>
+  // 重置 uni-text 的默认样式
+  .t-text {
+  text-align: left;
+  line-height: 1.5;
+  color: inherit;
+  font-size: 14px;
+  display: inline;
+  margin: 0;
+  padding: 0;
+  word-wrap: break-word;
+
+  // 类型样式
+  &--default {
+    color: #606266;
+  }
+
+  &--primary {
+    color: #409eff;
+  }
+
+  &--success {
+    color: #67c23a;
+  }
+
+  &--warning {
+    color: #e6a23c;
+  }
+
+  &--danger {
+    color: #f56c6c;
+  }
+
+  &--info {
+    color: #909399;
+  }
+
+  // 尺寸样式
+  &--large {
+    font-size: 18px;
+  }
+
+  &--medium {
+    font-size: 14px;
+  }
+
+  &--small {
+    font-size: 12px;
+  }
+
+  &--mini {
+    font-size: 10px;
+  }
+
+  // 粗细样式
+  &--lighter {
+    font-weight: 300;
+  }
+
+  &--normal {
+    font-weight: 400;
+  }
+
+  &--medium {
+    font-weight: 500;
+  }
+
+  &--bold {
+    font-weight: 700;
+  }
+
+  // 对齐样式
+  &--left {
+    text-align: left;
+  }
+
+  &--center {
+    text-align: center;
+  }
+
+  &--right {
+    text-align: right;
+  }
+
+  &--justify {
+    text-align: justify;
+  }
+
+  // 加粗
+  &--bold {
+    font-weight: bold;
+  }
+
+  // 斜体
+  &--italic {
+    font-style: italic;
+  }
+
+  // 下划线
+  &--underline {
+    text-decoration: underline;
+  }
+
+  // 删除线
+  &--strikethrough {
+    text-decoration: line-through;
+  }
+
+  // 省略号
+  &--ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+</style>

package/components/TText/type.uts

@@ -0,0 +1,114 @@
+/**
+ * TText 组件类型定义
+ */
+
+/**
+ * 文本类型
+ */
+export type TextType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'
+
+/**
+ * 文本尺寸
+ */
+export type TextSize = 'large' | 'medium' | 'small' | 'mini'
+
+/**
+ * 文本粗细
+ */
+export type TextWeight = 'lighter' | 'normal' | 'medium' | 'bold'
+
+/**
+ * 文本对齐
+ */
+export type TextAlign = 'left' | 'center' | 'right' | 'justify'
+
+/**
+ * 文本 Props 接口
+ */
+export interface TTextProps {
+  /**
+   * 文本内容
+   */
+  text?: string
+
+  /**
+   * 文本类型
+   * @default 'default'
+   */
+  type?: TextType
+
+  /**
+   * 文本尺寸
+   * @default 'medium'
+   */
+  size?: TextSize
+
+  /**
+   * 文本粗细
+   * @default 'normal'
+   */
+  weight?: TextWeight
+
+  /**
+   * 文本对齐
+   * @default 'left'
+   */
+  align?: TextAlign
+
+  /**
+   * 自定义颜色
+   */
+  color?: string
+
+  /**
+   * 行高
+   * @default 1.5
+   */
+  lineHeight?: number | string
+
+  /**
+   * 最大行数
+   * @default 0
+   */
+  maxLines?: number
+
+  /**
+   * 是否显示省略号
+   * @default false
+   */
+  ellipsis?: boolean
+
+  /**
+   * 是否加粗
+   * @default false
+   */
+  bold?: boolean
+
+  /**
+   * 是否斜体
+   * @default false
+   */
+  italic?: boolean
+
+  /**
+   * 是否显示下划线
+   * @default false
+   */
+  underline?: boolean
+
+  /**
+   * 是否显示删除线
+   * @default false
+   */
+  strikethrough?: boolean
+
+  /**
+   * 自定义类名
+   */
+  customClass?: string
+
+  /**
+   * 自定义样式
+   */
+  customStyle?: string
+}

package/components/TTextarea/index.uvue

@@ -0,0 +1,239 @@
+<script setup lang="uts">
+import { ref, computed } from 'vue'
+import type { TTextareaProps } from './type.uts'
+
+/**
+ * TTextarea 多行文本输入组件
+ * @description 支持自动高度、字数统计、清空等功能的多行文本输入框
+ */
+
+// Props 定义 (从 type.uts 导入，排除 modelValue)
+type Props = Omit<TTextareaProps, 'modelValue'>
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: '请输入内容',
+  placeholderStyle: '',
+  disabled: false,
+  maxlength: -1,
+  showCount: false,
+  autoHeight: false,
+  rows: 3,
+  autoFocus: false,
+  clearable: false,
+  customClass: '',
+  customStyle: ''
+})
+
+// 使用 defineModel 管理双向绑定
+const modelValue = defineModel<string>({ default: '' })
+
+// Emits 定义
+const emit = defineEmits<{
+  input: [value: string]
+  focus: [event: Event]
+  blur: [event: Event]
+  clear: []
+}>()
+
+// 状态管理
+const isFocused = ref<boolean>(false)
+
+/**
+ * 计算当前字符数
+ */
+const currentLength = computed((): number => {
+  return modelValue.value.length
+})
+
+/**
+ * 计算容器类名
+ */
+const containerClasses = computed((): string => {
+  const classes: string[] = ['t-textarea']
+
+  if (props.disabled) {
+    classes.push('t-textarea--disabled')
+  }
+
+  if (isFocused.value) {
+    classes.push('t-textarea--focused')
+  }
+
+  if (props.customClass) {
+    classes.push(props.customClass)
+  }
+
+  return classes.join(' ')
+})
+
+/**
+ * 计算容器样式
+ */
+const containerStyle = computed((): string => {
+  const styles: string[] = []
+
+  if (props.customStyle) {
+    styles.push(props.customStyle)
+  }
+
+  return styles.join('; ')
+})
+
+/**
+ * 计算 textarea 样式
+ */
+const textareaStyle = computed((): string => {
+  const styles: string[] = []
+
+  if (!props.autoHeight && props.rows > 0) {
+    // 固定行数时计算高度（每行约 24px + 12px 行间距）
+    const height = props.rows * 36
+    styles.push(`height: ${height}px`)
+  }
+
+  return styles.join('; ')
+})
+
+/**
+ * 输入事件处理
+ */
+const handleInput = (event: any): void => {
+  const value = event.detail.value as string
+  modelValue.value = value
+  emit('input', value)
+}
+
+/**
+ * 聚焦事件处理
+ */
+const handleFocus = (event: Event): void => {
+  isFocused.value = true
+  emit('focus', event)
+}
+
+/**
+ * 失焦事件处理
+ */
+const handleBlur = (event: Event): void => {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+/**
+ * 清空输入
+ */
+const handleClear = (): void => {
+  modelValue.value = ''
+  emit('clear')
+}
+</script>
+
+<template>
+  <view :class="containerClasses" :style="containerStyle">
+    <!-- 文本域 -->
+    <textarea
+      class="t-textarea__input"
+      :style="textareaStyle"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :placeholder-style="placeholderStyle"
+      :disabled="disabled"
+      :maxlength="maxlength"
+      :auto-height="autoHeight"
+      :focus="autoFocus"
+      @input="handleInput"
+      @focus="handleFocus"
+      @blur="handleBlur"
+    />
+
+    <!-- 底部操作栏 -->
+    <view v-if="showCount || clearable" class="t-textarea__footer">
+      <!-- 字数统计 -->
+      <text v-if="showCount" class="t-textarea__count">
+        {{ currentLength }}{{ maxlength > 0 ? `/${maxlength}` : '' }}
+      </text>
+
+      <!-- 清空按钮 -->
+      <view
+        v-if="clearable && modelValue.length > 0 && !disabled"
+        class="t-textarea__clear"
+        @click="handleClear"
+      >
+        <text class="t-textarea__clear-icon">✕</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.t-textarea {
+  position: relative;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  padding: 8px 12px;
+  transition: border-color 0.2s;
+
+  &--focused {
+    border-color: #1890ff;
+  }
+
+  &--disabled {
+    background-color: #f5f7fa;
+    border-color: #e4e7ed;
+    cursor: not-allowed;
+
+    .t-textarea__input {
+      color: #c0c4cc;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.t-textarea__input {
+  width: 100%;
+  font-size: 14px;
+  color: #303133;
+  line-height: 1.5;
+  box-sizing: border-box;
+  resize: none;
+  border: none;
+  outline: none;
+  background-color: transparent;
+}
+
+.t-textarea__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.t-textarea__count {
+  font-size: 12px;
+  color: #909399;
+}
+
+.t-textarea__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  border-radius: 50%;
+  background-color: #c0c4cc;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #909399;
+  }
+}
+
+.t-textarea__clear-icon {
+  font-size: 12px;
+  color: #fff;
+}
+</style>