# tx-ui-demo

**Repository Path**: jigr/tx-ui-demo

## Basic Information

- **Project Name**: tx-ui-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-28
- **Last Updated**: 2026-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TX-UI Demo

TX-UI 组件库演示项目，展示所有组件的使用方法和效果。

- 📖 **在线文档**: [http://txui.aypkq.com/#/](http://txui.aypkq.com/#/)

## 环境要求

- Node.js >= 16
- HBuilderX >= 3.96
- pnpm / npm / yarn

## 安装依赖

```bash
npm install
# 或
pnpm install
```

## 运行项目

### Web 端

使用 HBuilderX 打开项目，点击运行 → 运行到浏览器

### App 端

使用 HBuilderX 打开项目，点击运行 → 运行到手机或模拟器

### 小程序端

使用 HBuilderX 打开项目，点击运行 → 运行到小程序模拟器

## 项目结构

```
demo/
├── pages/                    # 页面目录
│   ├── index/               # 首页相关
│   │   ├── home.uvue        # 首页 - 组件库介绍
│   │   ├── components.uvue  # 组件列表页
│   │   └── api.uvue         # API 列表页
│   ├── components/          # 组件演示页面
│   │   ├── button.uvue      # 按钮组件演示
│   │   ├── icon.uvue        # 图标组件演示
│   │   └── ...              # 其他组件演示
│   ├── templates/           # 模板页面
│   │   ├── index.uvue       # 模板列表
│   │   ├── login.uvue       # 登录模板
│   │   └── ...              # 其他模板
│   └── api/                 # API 详情页
│       └── detail.uvue      # API 详情
├── uni_modules/             # uni_modules 目录
│   └── tx-ui/               # TX-UI 组件库
├── static/                  # 静态资源
├── plugins/                 # 插件
├── config/                  # 配置文件
├── App.uvue                 # 应用入口
├── main.uts                 # 主入口文件
├── pages.json               # 页面配置
├── manifest.json            # 应用配置
├── vite.config.ts           # Vite 配置
└── package.json             # 项目依赖
```

## 组件使用示例

### 基础用法

```vue
<template>
  <view>
    <!-- 按钮 -->
    <tx-button type="primary">主要按钮</tx-button>
    
    <!-- 图标 -->
    <tx-icon name="home-4" size="24" color="#4F46E5" />
    
    <!-- 输入框 -->
    <tx-input v-model="value" placeholder="请输入" />
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const value = ref('')
</script>
```

### 表单组件

```vue
<template>
  <tx-form ref="formRef" :model="form" :rules="rules">
    <tx-form-item label="用户名" prop="username">
      <tx-input v-model="form.username" />
    </tx-form-item>
    <tx-form-item label="密码" prop="password">
      <tx-input v-model="form.password" type="password" />
    </tx-form-item>
    <tx-button type="primary" @click="submit">提交</tx-button>
  </tx-form>
</template>
```

### 反馈组件

```vue
<script setup lang="uts">
// Toast 提示
uni.showToast({ title: '操作成功', icon: 'success' })

// Dialog 对话框
// 使用 tx-dialog 组件
</script>
```

## 主题配置

项目使用 Indigo 色系作为主色调：

| 变量 | 值 | 说明 |
|------|-----|------|
| Primary | #4F46E5 | 主色 |
| Primary Light | #6366F1 | 主色浅 |
| Background | #F8FAFC | 背景色 |
| Text | #1E1B4B | 文字色 |

## 相关链接

- [TX-UI 在线文档](http://txui.aypkq.com/#/)
- [uni-app x 官方文档](https://doc.dcloud.net.cn/uni-app-x/)

## 许可证

[MIT License](./LICENSE)