tang-ui-x 1.2.6 → 1.2.8

package/components/TSearchBar/index.uvue

@@ -159,7 +159,7 @@ const handleCancel = (): void => {
     <view class="t-search-bar__content" :style="inputStyle">
       <!-- 左侧搜索图标 -->
       <view v-if="showLeftIcon" class="t-search-bar__icon-wrapper">
-        <TIcon name="sousuo" :size="32" color="#969799" />
+        <TIcon name="icon-sousuo" :size="32" color="#969799" />
       </view>
 
       <!-- 输入框 -->
@@ -183,7 +183,7 @@ const handleCancel = (): void => {
         class="t-search-bar__clear"
         @click="handleClear"
       >
-        <TIcon name="shanchu" color="#ffffff" />
+        <TIcon name="icon-shanchu" color="#ffffff" />
       </view>
     </view>
 

package/components/TSelect/index.uvue

@@ -432,12 +432,12 @@
 			<view class="select-icons">
 				<!-- 清空按钮 -->
 				<view v-if="showClearIcon" class="clear-icon" @click.stop="clearValue">
-					<Icon name="icon-close-circle" :size="14" color="#c0c4cc" />
+					<Icon name="icon-shanchu" color="#c0c4cc" />
 				</view>
 
 				<!-- 下拉箭头 -->
 				<view class="select-arrow" :class="{ 'arrow-up': showPopup }">
-					<Icon name="icon-xiajiantou-copy" :size="12" color="#999" />
+					<Icon name="icon-xiajiantou" :size="20" color="#999" />
 				</view>
 			</view>
 		</view>
@@ -486,7 +486,7 @@
 
 							<!-- 有子级时显示右箭头 -->
 							<view v-if="option.children != null && option.children.length > 0" class="cascade-arrow">
-								<Icon name="icon-xiajiantou-copy" :size="12" color="#999" />
+								<Icon name="icon-xiajiantou" :size="12" color="#999" />
 							</view>
 
 							<!-- 叶子节点被选中时显示 ✓ -->

package/package.json

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

package/static/font/iconfont.css

@@ -1,23 +1,31 @@
-@font-face {
-  font-family: "iconfont"; /* Project id 5118443 */
-  src: url('iconfont.woff2?t=1769506917347') format('woff2'),
-       url('iconfont.woff?t=1769506917347') format('woff'),
-       url('iconfont.ttf?t=1769506917347') format('truetype');
-}
-
-.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-shanchu:before {
-  content: "\e61a";
-}
-
-.icon-sousuo:before {
-  content: "\e602";
-}
-
+@font-face {
+  font-family: "iconfont"; /* Project id 5118443 */
+  src: url('iconfont.woff2?t=1772268917050') format('woff2'),
+       url('iconfont.woff?t=1772268917050') format('woff'),
+       url('iconfont.ttf?t=1772268917050') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-xiajiantou:before {
+  content: "\e656";
+}
+
+.icon-tianjia:before {
+  content: "\e62d";
+}
+
+.icon-shanchu:before {
+  content: "\e61a";
+}
+
+.icon-sousuo:before {
+  content: "\e602";
+}
+

package/static/font/iconfont.json

@@ -1,23 +1,37 @@
-{
-  "id": "5118443",
-  "name": "tang-ui",
-  "font_family": "iconfont",
-  "css_prefix_text": "icon-",
-  "description": "",
-  "glyphs": [
-    {
-      "icon_id": "4942655",
-      "name": "删除",
-      "font_class": "shanchu",
-      "unicode": "e61a",
-      "unicode_decimal": 58906
-    },
-    {
-      "icon_id": "17830630",
-      "name": "搜索",
-      "font_class": "sousuo",
-      "unicode": "e602",
-      "unicode_decimal": 58882
-    }
-  ]
-}
+{
+  "id": "5118443",
+  "name": "tang-ui",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "10515591",
+      "name": "下箭头",
+      "font_class": "xiajiantou",
+      "unicode": "e656",
+      "unicode_decimal": 58966
+    },
+    {
+      "icon_id": "9234825",
+      "name": "添 加",
+      "font_class": "tianjia",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "4942655",
+      "name": "删除",
+      "font_class": "shanchu",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "17830630",
+      "name": "搜索",
+      "font_class": "sousuo",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    }
+  ]
+}

package/style/README.md

@@ -0,0 +1,209 @@
+# 样式系统目录结构
+
+模块化的 Tailwind-like 原子类样式系统，便于维护和扩展。
+
+## 📁 目录结构
+
+```
+style/
+├── index.scss              # 主入口文件（导入所有模块）
+├── _variables.scss         # 设计变量（间距、字体、颜色等）
+├── layout/                 # 布局相关
+│   ├── _flexbox.scss      # Flex 布局
+│   └── _sizing.scss       # 尺寸、定位、溢出
+├── spacing/               # 间距相关
+│   ├── _margin.scss       # 外边距
+│   └── _padding.scss      # 内边距、间隙
+├── typography/            # 排版相关
+│   ├── _font.scss         # 字体大小、粗细、行高
+│   └── _text.scss         # 文本对齐、装饰、溢出
+├── colors/                # 颜色相关
+│   └── _colors.scss       # 文本色、背景色、边框色、圆角
+├── effects/               # 效果相关
+│   ├── _shadow.scss       # 阴影效果
+│   ├── _opacity.scss      # 透明度、过渡、变换
+│   ├── _touch.scss        # 触点反馈（重要✨）
+│   └── TOUCH_GUIDE.md     # 触点样式使用指南
+├── grid/                  # 网格布局
+│   └── _grid.scss         # Grid 布局系统
+├── utilities/             # 工具类
+│   └── _common.scss       # 通用工具（z-index、指针、安全区等）
+└── pages/                 # 页面专属样式
+    └── auth.scss          # 认证页面样式（登录、注册、忘记密码）
+```
+
+## 🎨 模块说明
+
+### 1. **变量定义** (`_variables.scss`)
+
+- 间距变量：0-96 的间距值
+- 字体大小：xs 到 9xl
+- 颜色系统：gray、red、blue、green、yellow、purple
+- 圆角值：none 到 full
+
+### 2. **布局模块** (`layout/`)
+
+- **Flexbox** (`_flexbox.scss`)
+  - 容器：`.flex`、`.inline-flex`
+  - 方向：`.flex-row`、`.flex-col`
+  - 对齐：`.justify-center`、`.items-center`
+  - 顺序：`.order-1`
+
+- **尺寸** (`_sizing.scss`)
+  - 宽高：`.w-full`、`.h-screen`
+  - 定位：`.absolute`、`.fixed`
+  - 溢出：`.overflow-hidden`
+
+### 3. **间距模块** (`spacing/`)
+
+- **Margin** (`_margin.scss`)
+  - 全方向：`.m-4`
+  - 单方向：`.mt-4`、`.mr-4`
+  - 负值：`.-mt-4`
+  - Auto：`.mx-auto`
+
+- **Padding** (`_padding.scss`)
+  - 全方向：`.p-4`
+  - 单方向：`.pt-4`、`.px-4`
+  - 间隙：`.gap-4`
+
+### 4. **排版模块** (`typography/`)
+
+- **字体** (`_font.scss`)
+  - 大小：`.text-xs` 到 `.text-9xl`
+  - 粗细：`.font-normal`、`.font-bold`
+  - 行高：`.leading-normal`
+
+- **文本** (`_text.scss`)
+  - 对齐：`.text-center`
+  - 装饰：`.underline`
+  - 溢出：`.truncate`、`.line-clamp-2`
+
+### 5. **颜色模块** (`colors/`)
+
+- 文本颜色：`.text-gray-500`、`.text-primary`
+- 背景颜色：`.bg-white`、`.bg-primary`
+- 边框：`.border`、`.border-gray-200`
+- 圆角：`.rounded`、`.rounded-full`
+
+### 6. **效果模块** (`effects/`)
+
+- **阴影** (`_shadow.scss`)
+  - `.shadow-sm`、`.shadow`、`.shadow-lg`
+
+- **透明度与动画** (`_opacity.scss`)
+  - 透明度：`.opacity-50`
+  - 过渡：`.transition`、`.transition-all`
+  - 变换：`.scale-110`、`.rotate-45`
+
+- **触点反馈** (`_touch.scss`) ⭐ 新增
+  - 通用：`.tap-active`、`.tap-scale`、`.tap-opacity`
+  - 按钮：`.tap-button`、`.tap-3d`
+  - 卡片：`.tap-card`、`.tap-list-item`
+  - 图标：`.tap-icon`、`.tap-bounce`
+  - 特效：`.tap-ripple`、`.tap-pulse`
+  - 查看详细指南：`effects/TOUCH_GUIDE.md`
+
+### 7. **网格布局** (`grid/`)
+
+- 网格容器：`.grid`
+- 列数：`.grid-cols-3`
+- 跨度：`.col-span-2`
+- 对齐：`.place-items-center`
+
+### 8. **工具类** (`utilities/`)
+
+- Z-index：`.z-10`、`.z-50`
+- 指针：`.pointer-events-none`
+- 安全区域：`.safe-area-top`、`.safe-area-bottom`
+- 页面容器：`.page`
+
+### 9. **页面专属样式** (`pages/`)
+
+- **认证页面** (`auth.scss`)
+  - 登录、注册、忘记密码页面的专属样式
+  - 包含：`.auth-container`、`.logo-bg`、`.form-card`
+  - 按钮样式：`.submit-btn`、`.code-btn`、`.deleted-btn`
+  - 支持深色模式和响应式设计
+
+## 🚀 使用方式
+
+### 在页面中使用
+
+```vue
+<template>
+  <view class="page">
+    <!-- 带触点反馈的按钮 -->
+    <view class="tap-button bg-primary text-white rounded-lg py-3 px-6">
+      <text class="text-white">点击我</text>
+    </view>
+
+    <!-- 可点击的卡片 -->
+    <view class="tap-card bg-white rounded-xl shadow-md p-6 m-4">
+      <text class="text-2xl font-bold mb-2">卡片标题</text>
+      <text class="text-gray-600 line-clamp-2">卡片内容...</text>
+    </view>
+
+    <!-- 宫格菜单 -->
+    <view class="grid grid-cols-4 gap-4 p-4">
+      <view class="tap-scale flex flex-col items-center">
+        <view
+          class="w-16 h-16 bg-blue-50 rounded-xl flex items-center justify-center mb-2"
+        >
+          <text>📱</text>
+        </view>
+        <text class="text-xs">菜单</text>
+      </view>
+    </view>
+
+    <!-- 列表项 -->
+    <view class="tap-list-item flex items-center justify-between p-4 bg-white">
+      <text>设置</text>
+      <text class="text-gray-400">›</text>
+    </view>
+  </view>
+</template>
+```
+
+## 🔧 修改和扩展
+
+### 添加新样式
+
+1. 确定样式类别（布局、间距、颜色等）
+2. 在对应模块文件中添加样式
+3. 不需要修改 `index.scss`（已自动导入）
+
+### 修改变量
+
+在 `_variables.scss` 中修改设计变量：
+
+```scss
+$spacings: (
+  // 添加新的间距值
+  128: 512rpx
+);
+
+$colors: (
+  // 添加新的颜色
+  custom-blue: #1e90ff
+);
+```
+
+### 创建新模块
+
+1. 在对应目录创建新的 `.scss` 文件
+2. 在 `index.scss` 中添加 `@import` 语句
+
+## 📝 命名规范
+
+- 使用小写字母和连字符（kebab-case）
+- 遵循 Tailwind 命名约定
+- 保持语义化和一致性
+
+## 💡 最佳实践
+
+1. **优先使用原子类**，避免自定义样式
+2. **组合使用**多个原子类实现复杂效果
+3. **保持一致性**，使用预定义的间距和颜色值
+4. **响应式设计**，使用百分比和 flex 布局
+5. **性能优化**，避免过度嵌套

package/style/colors/colors.scss

@@ -0,0 +1,216 @@
+// ========== 颜色样式 ==========
+
+@import '../../uni.scss';
+@import '../variables';
+
+// ==================================================
+// 🎯 全局取色函数
+// ==================================================
+@function color($name) {
+  @return map-get($colors, $name);
+}
+
+// 文本颜色
+@each $key, $value in $colors {
+  .text-#{'' + $key} {
+    color: $value;
+  }
+}
+
+// uni-app 主题色
+.text-primary {
+  color: $uni-color-primary;
+}
+.text-success {
+  color: $uni-color-success;
+}
+.text-warning {
+  color: $uni-color-warning;
+}
+.text-error {
+  color: $uni-color-error;
+}
+
+// 背景颜色 (支持 bg-opacity 透明度控制)
+@each $key, $value in $colors {
+  .bg-#{'' + $key} {
+    background-color: $value;
+    // 支持通过 CSS 自定义属性控制透明度
+    &[style*='--bg-opacity'] {
+      background-color: rgba($value, var(--bg-opacity, 1));
+    }
+  }
+}
+
+// uni-app 主题背景色 (支持 bg-opacity 透明度控制)
+.bg-primary {
+  background-color: $uni-color-primary;
+  &[style*='--bg-opacity'] {
+    background-color: rgba($uni-color-primary, var(--bg-opacity, 1));
+  }
+}
+.bg-success {
+  background-color: $uni-color-success;
+  &[style*='--bg-opacity'] {
+    background-color: rgba($uni-color-success, var(--bg-opacity, 1));
+  }
+}
+.bg-warning {
+  background-color: $uni-color-warning;
+  &[style*='--bg-opacity'] {
+    background-color: rgba($uni-color-warning, var(--bg-opacity, 1));
+  }
+}
+.bg-error {
+  background-color: $uni-color-error;
+  &[style*='--bg-opacity'] {
+    background-color: rgba($uni-color-error, var(--bg-opacity, 1));
+  }
+}
+
+// 特殊背景色 (支持 bg-opacity 透明度控制)
+.bg-page {
+  background-color: $uni-bg-color;
+  &[style*='--bg-opacity'] {
+    background-color: rgba($uni-bg-color, var(--bg-opacity, 1));
+  }
+}
+.bg-grey {
+  background-color: $uni-bg-color-grey;
+  &[style*='--bg-opacity'] {
+    background-color: rgba($uni-bg-color-grey, var(--bg-opacity, 1));
+  }
+}
+.bg-hover {
+  background-color: $uni-bg-color-hover;
+  &[style*='--bg-opacity'] {
+    background-color: rgba($uni-bg-color-hover, var(--bg-opacity, 1));
+  }
+}
+.bg-mask {
+  background-color: $uni-bg-color-mask;
+  &[style*='--bg-opacity'] {
+    background-color: rgba($uni-bg-color-mask, var(--bg-opacity, 1));
+  }
+}
+
+// 边框颜色
+@each $key, $value in $colors {
+  .border-#{'' + $key} {
+    border-color: $value;
+  }
+}
+
+// uni-app 边框色
+.border-primary {
+  border-color: $uni-color-primary;
+}
+.border-base {
+  border-color: $uni-border-color;
+}
+
+// 边框宽度
+.border-0 {
+  border-width: 0;
+}
+.border {
+  border-width: 1rpx;
+}
+.border-2 {
+  border-width: 2rpx;
+}
+.border-4 {
+  border-width: 4rpx;
+}
+.border-8 {
+  border-width: 8rpx;
+}
+
+// 单边框
+.border-t {
+  border-top-width: 1rpx;
+}
+.border-r {
+  border-right-width: 1rpx;
+}
+.border-b {
+  border-bottom-width: 1rpx;
+}
+.border-l {
+  border-left-width: 1rpx;
+}
+
+.border-t-0 {
+  border-top-width: 0;
+}
+.border-r-0 {
+  border-right-width: 0;
+}
+.border-b-0 {
+  border-bottom-width: 0;
+}
+.border-l-0 {
+  border-left-width: 0;
+}
+
+// 边框样式
+.border-solid {
+  border-style: solid;
+}
+.border-dashed {
+  border-style: dashed;
+}
+.border-dotted {
+  border-style: dotted;
+}
+.border-none {
+  border-style: none;
+}
+
+// 圆角
+@each $key, $value in $border-radius {
+  .rounded-#{$key} {
+    border-radius: $value;
+  }
+}
+
+.rounded {
+  border-radius: 4rpx;
+}
+
+// 单角圆角
+
+.rounded-t-none {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+// 单角圆角
+.rounded-t-none {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.rounded-r-none {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.rounded-b-none {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.rounded-l-none {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rounded-tl {
+  border-top-left-radius: 8rpx;
+}
+.rounded-tr {
+  border-top-right-radius: 8rpx;
+}
+.rounded-br {
+  border-bottom-right-radius: 8rpx;
+}
+.rounded-bl {
+  border-bottom-left-radius: 8rpx;
+}