介绍

TusongUI 是一个基于琥珀色/橙色暖色调设计的前端 UI 框架，专为宠物、生活、温馨类应用打造。它提供丰富的组件、响应式布局支持，以及简洁易用的 JavaScript API。

特性

暖色调设计，营造温馨氛围
响应式布局，完美适配各种设备
组件丰富，开箱即用
轻量高效，零依赖
易于定制，基于 CSS 变量

快速开始

下载文件

点击下方按钮下载 CSS 和 JavaScript 文件：

下载 CSS 下载 JS 下载全部

或使用 npm 安装：npm install tusong-ui

引入文件

<!-- CSS -->
<link rel="stylesheet" href="tusong-ui.css">

<!-- JavaScript -->
<script src="tusong-ui.js"></script>

初始化

TusongUI.init();

使用按钮

示例

<button class="ts-btn ts-btn-primary">主要按钮</button>
<button class="ts-btn ts-btn-secondary">次要按钮</button>
<button class="ts-btn ts-btn-success">成功</button>

按钮

按钮是用于触发操作的组件。TusongUI 提供多种按钮类型和尺寸。

按钮类型

基础按钮

<button class="ts-btn ts-btn-primary">主要</button>
<button class="ts-btn ts-btn-secondary">次要</button>
<button class="ts-btn ts-btn-success">成功</button>
<button class="ts-btn ts-btn-danger">危险</button>
<button class="ts-btn ts-btn-warning">警告</button>
<button class="ts-btn ts-btn-info">信息</button>

按钮尺寸

尺寸变体

<button class="ts-btn ts-btn-primary ts-btn-sm">小</button>
<button class="ts-btn ts-btn-primary ts-btn-small">中</button>
<button class="ts-btn ts-btn-primary">默认</button>

加载状态

按钮加载状态

// HTML
<button class="ts-btn ts-btn-primary ts-btn-loading">
  <span>加载中...</span>
</button>

// JavaScript - 控制加载状态
TusongUI.setButtonLoading(btn, true);   // 显示加载
TusongUI.setButtonLoading(btn, false);  // 隐藏加载

卡片

卡片是用于分组和展示内容的容器组件。

基础卡片

卡片标题

这是卡片的内容区域，可以放置文字、图片或其他元素。

<div class="ts-card">
  <h3>卡片标题</h3>
  <p>这是卡片的内容区域...</p>
</div>

徽章

徽章用于标记状态或分类。

徽章类型

成功警告危险主要信息次要

<span class="ts-badge ts-badge-success">成功</span>
<span class="ts-badge ts-badge-warning">警告</span>
<span class="ts-badge ts-badge-danger">危险</span>
<span class="ts-badge ts-badge-primary">主要</span>
<span class="ts-badge ts-badge-info">信息</span>
<span class="ts-badge ts-badge-secondary">次要</span>

开关

开关用于切换布尔值状态。

开关示例

开启关闭

<label class="ts-switch">
  <input type="checkbox" checked>
  <span class="ts-slider"></span>
</label>

表单

表单组件包括输入框、选择框、文本域等。

表单示例

文本输入

选择框

文本域

<div class="ts-form-group">
  <label>文本输入</label>
  <input type="text" class="ts-form-control" placeholder="请输入...">
</div>

<div class="ts-form-group">
  <label>选择框</label>
  <select class="ts-form-control">
    <option>选项一</option>
  </select>
</div>

<div class="ts-form-group">
  <label>文本域</label>
  <textarea class="ts-form-control" rows="3"></textarea>
</div>

表格

表格用于展示结构化数据，支持响应式设计。

编号	名称	状态	操作
#001	示例项目	完成
#002	测试项目	进行中

<div class="ts-table-wrapper">
  <table class="ts-table">
    <thead>
      <tr>
        <th>编号</th>
        <th>名称</th>
        <th>状态</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>#001</td>
        <td>示例项目</td>
        <td><span class="ts-badge ts-badge-success">完成</span></td>
      </tr>
    </tbody>
  </table>
</div>

模态框

模态框用于展示需要用户关注的内容。

// 打开模态框
TusongUI.modal('标题', '<div>内容</div>', '<button>确认</button>');

// 关闭模态框
TusongUI.closeModal();

// 带回调的示例
TusongUI.modal(
  '编辑信息',
  `
    <div class="ts-form-group">
      <label>名称</label>
      <input type="text" class="ts-form-control">
    </div>
  `,
  `
    <button class="ts-btn ts-btn-secondary" onclick="TusongUI.closeModal()">取消</button>
    <button class="ts-btn ts-btn-primary" onclick="saveData()">保存</button>
  `
);

Toast 提示

Toast 用于显示短暂的消息提示。

Toast 类型

// 基础用法
TusongUI.success('操作成功！');
TusongUI.error('操作失败！');
TusongUI.warning('请注意！');
TusongUI.info('提示信息');

// 自定义时长（毫秒）
TusongUI.success('5秒后消失', 5000);

// 完整语法
TusongUI.toast('消息内容', 'success', 3000);

确认对话框

确认对话框用于需要用户确认的操作，返回 Promise 对象。

// async/await 语法
async function deleteItem() {
  const confirmed = await TusongUI.confirm(
    '确认删除',           // 标题
    '此操作不可撤销',     // 消息
    'danger'              // 类型：warning / danger
  );
  
  if (confirmed) {
    // 用户点击了确认
    TusongUI.success('删除成功！');
  }
}

应用布局

使用布局组件快速构建后台管理界面。

<div class="ts-app-layout">
  <!-- 侧边栏 -->
  <div class="ts-sidebar" id="ts-sidebar">
    <div class="ts-sidebar-header">
      <div class="ts-logo-wrapper">
        <div class="ts-logo-icon">TS</div>
        <div class="ts-logo-text">
          <h1>应用名称</h1>
          <span>副标题</span>
        </div>
      </div>
    </div>
    
    <div class="ts-sidebar-nav">
      <button class="ts-nav-item active">首页</button>
      <button class="ts-nav-item">设置</button>
    </div>
  </div>
  
  <!-- 移动端遮罩 -->
  <div class="ts-sidebar-overlay" id="ts-sidebar-overlay"></div>
  
  <!-- 主内容区 -->
  <div class="ts-main-content">
    <div class="ts-header">
      <button class="ts-menu-toggle" onclick="TusongUI.toggleSidebar()">☰</button>
      <div class="ts-page-title-wrapper">
        <h2>页面标题</h2>
      </div>
    </div>
    <!-- 内容 -->
  </div>
</div>

照片网格

照片网格用于展示图片列表。

<div class="ts-photos-grid">
  <div class="ts-photo-item">
    <img src="..." class="ts-photo-thumb">
  </div>
  <div class="ts-photo-item is-cover">  <!-- 封面图片 -->
    <img src="..." class="ts-photo-thumb">
  </div>
</div>

CSS 变量

使用 CSS 变量可以轻松自定义主题颜色和样式。

--ts-primary

#f59e0b - 主色调

--ts-primary-light

#fbbf24 - 主色调浅色

--ts-primary-dark

#d97706 - 主色调深色

--ts-secondary

#f97316 - 辅助色

--ts-success

#10b981 - 成功色

--ts-danger

#ef4444 - 危险色

--ts-text-primary

#1f2937 - 主要文字

--ts-bg-primary

#fffbeb - 主要背景

/* 自定义主题颜色 */
:root {
  --ts-primary: #3b82f6;     /* 蓝色主题 */
  --ts-primary-light: #60a5fa;
  --ts-primary-dark: #2563eb;
  --ts-bg-primary: #eff6ff;    /* 浅蓝背景 */
}

工具方法

TusongUI 提供一些实用的 JavaScript 工具方法。

方法	说明	参数
`formatDate(dateStr)`	格式化日期	日期字符串
`formatPrice(price)`	格式化价格	数字
`previewPhoto(inputId, previewId)`	预览单张图片	输入框ID, 预览容器ID
`previewPhotos(inputId, previewId)`	预览多张图片	输入框ID, 预览容器ID
`uploadPhoto(file, url)`	上传图片（自动压缩）	File对象, 上传地址
`toggleSidebar()`	切换侧边栏	-

// 日期格式化
TusongUI.formatDate('2024-01-15T10:30:00');  // "2024-01-15"

// 价格格式化
TusongUI.formatPrice(3500);  // "¥3,500"

// 图片预览
TusongUI.previewPhoto('photoInput', 'photoPreview');
TusongUI.previewPhotos('photosInput', 'photosPreview');

// 图片上传（带压缩）
const url = await TusongUI.uploadPhoto(file, '/api/upload');