tmui-cli 2.0.1 → 2.0.3

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/50./345/233/276/345/275/242/347/263/273/347/273/237/13.IStar.md

@@ -0,0 +1,115 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+## IStar
+
+星形图形类，用于绘制星形图案。
+
+```mermaid
+flowchart LR
+IStar --> Shape --> IShape
+```
+
+## 属性
+
+继承自 `Shape` 的所有属性，并包含以下特定属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `numPoints` | number | 5 | 星的角数量 |
+| `innerRadius` | number | 16 | 内圆半径 |
+| `outerRadius` | number | 30 | 外圆半径 |
+| `type` | string | "IStar" | 图形类型标识 |
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 可选的配置对象
+- `canvas`: 画布实例
+
+### 设置方法
+
+#### `setInnerRadius(value: number): IStar`
+设置内圆半径
+- `value`: 内圆半径值
+- 返回值: 当前IStar实例
+
+#### `setOuterRadius(value: number): IStar`
+设置外圆半径
+- `value`: 外圆半径值
+- 返回值: 当前IStar实例
+
+#### `setNumPoints(value: number): IStar`
+设置星的角数量
+- `value`: 角数量
+- 返回值: 当前IStar实例
+
+#### `setWidth(value: number): IStar`
+设置宽度（会同时更新外圆半径和高度）
+- `value`: 宽度值
+- 返回值: 当前IStar实例
+
+#### `setHeight(value: number): IStar`
+设置高度（会同时更新外圆半径和宽度）
+- `value`: 高度值
+- 返回值: 当前IStar实例
+
+### 继承方法
+
+继承自 `Shape` 的所有方法，包括：
+- `draw(ctx: CanvasRenderingContext2D)`: 绘制星形
+- `isPointInPath(x: number, y: number, shapeId: string): boolean`: 检测点是否在星形内
+- `getBoundRect(): IShapeBoundRect`: 获取边界矩形
+
+## 使用示例
+
+```typescript
+// 创建一个五角星
+const star = new IStar({
+    x: 100,
+    y: 100,
+    numPoints: 5,
+    innerRadius: 20,
+    outerRadius: 40,
+    fill: "#ff0000",
+    stroke: "#000000",
+    strokeWidth: 2
+}, canvas);
+
+// 添加到画布
+canvas.addShape(star);
+
+// 修改星形属性
+star.setNumPoints(6)
+    .setInnerRadius(15)
+    .setOuterRadius(50)
+    .setFill("#00ff00")
+    .setStroke("#ff0000");
+
+// 创建六角星
+const sixPointStar = new IStar({
+    x: 200,
+    y: 100,
+    numPoints: 6,
+    innerRadius: 25,
+    outerRadius: 45,
+    fill: "#0000ff",
+    stroke: "#ffffff",
+    strokeWidth: 1
+}, canvas);
+```
+
+## 注意事项
+
+1. 星形从垂直向上开始绘制
+2. 支持填充和描边两种渲染模式
+3. 点击检测基于星形的复杂几何形状
+4. 边界矩形基于外圆半径计算
+5. 支持旋转和缩放变换
+6. 内圆半径必须小于外圆半径

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/50./345/233/276/345/275/242/347/263/273/347/273/237/14.IText.md

@@ -0,0 +1,136 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+## IText
+
+文本图形类，用于在画布上显示文本。
+
+```mermaid
+flowchart LR
+IText --> Shape --> IShape
+```
+
+## 属性
+
+继承自 `Shape` 的所有属性，并包含以下特定属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `text` | string | "" | 文本内容 |
+| `fontSize` | number | 12 | 字体大小 |
+| `fontFamily` | string | "Arial" | 字体族 |
+| `textAlign` | string | "left" | 文本对齐方式 |
+| `textBaseline` | string | "top" | 文本基线 |
+| `padding` | number | 0 | 内边距 |
+| `lineHeight` | number | 1.2 | 行高 |
+| `textBgColor` | string | "" | 文本背景色 |
+| `type` | string | "IText" | 图形类型标识 |
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 可选的配置对象
+- `canvas`: 画布实例
+
+### 设置方法
+
+#### `setText(value: string): IText`
+设置文本内容
+- `value`: 文本内容
+- 返回值: 当前IText实例
+
+#### `setFontSize(value: number): IText`
+设置字体大小
+- `value`: 字体大小
+- 返回值: 当前IText实例
+
+#### `setFontFamily(value: string): IText`
+设置字体族
+- `value`: 字体族
+- 返回值: 当前IText实例
+
+#### `setTextAlign(value: 'left' | 'center' | 'right'): IText`
+设置文本对齐方式
+- `value`: 对齐方式
+- 返回值: 当前IText实例
+
+#### `setTextBaseline(value: 'top' | 'middle' | 'bottom'): IText`
+设置文本基线
+- `value`: 基线位置
+- 返回值: 当前IText实例
+
+#### `setPadding(value: number): IText`
+设置内边距
+- `value`: 内边距值
+- 返回值: 当前IText实例
+
+#### `setLineHeight(value: number): IText`
+设置行高
+- `value`: 行高值
+- 返回值: 当前IText实例
+
+#### `setTextBgColor(value: string): IText`
+设置文本背景色
+- `value`: 背景色
+- 返回值: 当前IText实例
+
+### 继承方法
+
+继承自 `Shape` 的所有方法，包括：
+- `draw(ctx: CanvasRenderingContext2D)`: 绘制文本
+- `isPointInPath(x: number, y: number, shapeId: string): boolean`: 检测点是否在文本内
+- `getBoundRect(): IShapeBoundRect`: 获取边界矩形
+
+## 使用示例
+
+```typescript
+// 创建文本图形
+const text = new IText({
+    x: 100,
+    y: 100,
+    text: "Hello World",
+    fontSize: 16,
+    fontFamily: "Arial",
+    textAlign: "center",
+    textBaseline: "middle",
+    fill: "#000000",
+    stroke: "#ffffff",
+    strokeWidth: 1
+}, canvas);
+
+// 添加到画布
+canvas.addShape(text);
+
+// 修改文本属性
+text.setText("Hello TMUI")
+    .setFontSize(20)
+    .setFontFamily("Helvetica")
+    .setFill("#ff0000");
+
+// 创建带背景的文本
+const textWithBg = new IText({
+    x: 200,
+    y: 150,
+    text: "带背景的文本",
+    fontSize: 14,
+    padding: 10,
+    textBgColor: "#ffff00",
+    fill: "#000000"
+}, canvas);
+```
+
+## 注意事项
+
+1. 支持多行文本自动换行
+2. 支持填充和描边两种渲染模式
+3. 支持文本背景色设置
+4. 点击检测基于文本的边界矩形
+5. 支持旋转和缩放变换
+6. 行高和字体大小影响文本的实际高度
+7. 内边距会影响文本的显示区域

package/data/tmui4x/40./345/267/245/345/205/267/345/272/223/30./347/224/273/345/270/203/50./345/233/276/345/275/242/347/263/273/347/273/237/15.IQrcode.md

@@ -0,0 +1,94 @@
+---
+outline: deep
+---
+
+# ICanvas - 图形系统
+
+## IQrcode
+
+二维码图形类，用于在画布上绘制可配置的二维码，可支持带圆角背景矩形、描边与前景色控制。
+
+```mermaid
+flowchart LR
+IQrcode --> Shape --> IShape
+```
+
+## 属性
+
+继承自 `Shape` 的所有属性，并包含以下特定属性：
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `type` | string | "IQrcode" | 图形类型标识 |
+| `radius` | number | 0 | 背景矩形圆角半径（非二维码点阵圆角） |
+| `foreground` | string | "#000000" | 二维码前景块颜色 |
+| `qrcodeText` | string | "" | 二维码内容文本 |
+| `fill` | string | "" | 背景填充色（可用于留白/底色） |
+| `stroke` | string | "" | 背景描边色 |
+| `strokeWidth` | number | 1 | 背景描边宽度 |
+
+说明：二维码点阵绘制会铺满设置的 `width`×`height` 区域；`fill`/`stroke` 作用于背景路径（支持圆角）。
+
+## 方法
+
+### 构造函数
+```typescript
+constructor(config: IShapeOptional, canvas: ICanvas)
+```
+- `config`: 配置对象，支持 `qrcodeText`、`foreground`、`radius` 等
+- `canvas`: 画布实例
+
+### 设置方法
+
+#### `setRadius(value: number): IQrcode`
+设置背景矩形圆角半径。
+
+#### `setQrcodeLabel(text: string): void`
+设置二维码内容文本，设置后会标记为需更新并在下次绘制时生效。
+
+### 继承方法
+
+继承自 `Shape` 的常用方法，包括但不限于：
+- `draw(ctx: CanvasRenderingContext2D)`
+- `isPointInPath(x: number, y: number, shapeId: string): boolean`
+- `getBoundRect(): IShapeBoundRect`
+- `setWidth(value: number)`, `setHeight(value: number)` 等（已重写，均以左上角为定位）
+
+## 使用示例
+
+```typescript
+// 创建一个二维码
+const qr = new IQrcode({
+    x: 100,
+    y: 100,
+    width: 200,
+    height: 200,
+    radius: 16,               // 背景圆角
+    fill: "#ffffff",          // 背景色（用于留白）
+    stroke: "#e5e6eb",
+    strokeWidth: 1,
+    foreground: "#111111",    // 前景点阵颜色
+    qrcodeText: "https://tmui.design"
+}, canvas);
+
+canvas.addShape(qr);
+
+// 动态更新二维码内容
+qr.setQrcodeLabel("TMUI4X · Canvas QR");
+```
+
+## 行为说明
+
+- 二维码纠错级别当前为固定高等级（"H"），有利于在中心覆盖图标或有轻微遮挡时保持可扫性。
+- 点阵单元大小按 `width / 实际点阵宽度` 自动计算，当前未内置"静区"边距；如需留白，建议：
+  - 使用 `fill` 设为背景白色，并在外层通过布局留边，或
+  - 适当增大 `width/height` 并在容器中留出间距。
+- `foreground` 控制点阵颜色；背景与描边由 `fill`/`stroke` 控制。
+
+## 注意事项
+
+1. 请确保 `qrcodeText` 非空，否则绘制的二维码无意义。
+2. `radius` 仅影响背景矩形的圆角，不影响二维码点阵本身形状。
+3. 当 `stroke` 非空时，边界矩形计算会包含 `strokeWidth/2` 的扩展。
+4. 对于超小尺寸二维码，可能因采样与显示器物理像素导致观感粗糙，建议 `width ≥ 160`。
+5. 如需在二维码中心叠加 Logo，建议使用更高容错级别（当前已为 "H"），并预留足够的背景留白。

package/data/tmui4x/60.AI/350/207/252/345/212/250/345/214/226/01.Agent.md

@@ -0,0 +1,40 @@
+# Agent
+
+## MCP 工具
+
+在使用AI时可以优先使用MCP工具查询文档，精确 了解组件用法及示例。
+
+```json
+"tmui4x": {
+    "command": "npx",
+    "args": ["-y", "tmui-cli", "mcp4x"]
+}
+```
+
+接着在项目及的rules中创建文档```uvue-dev.mdc```的规则
+让你的AI优先使用MCP工具了解和查询用法及示例。
+
+
+```
+---
+description: 编写 .uvue 文件（页面或组件）时必须遵循的规范
+globs: ["**/*.uvue", "pages.json"]
+alwaysApply: false
+---
+
+# UVue 开发强制规范
+
+编写任何 .uvue 文件前，先读 `.cursor/skills/tmui4x-dev/SKILL.md`。
+
+## 强制执行清单
+
+1. **读 SKILL.md**：编码规则以 skill 为准。
+2. **查文档用 MCP**：使用任何 `<x-xxx>`、插件、Pinia、请求库前，调用 tmui4x MCP（`query_tmui4x_doc` / `search_tmui4x_doc` / `list_tmui4x_docs`）。禁止猜 Props，禁止用 tmui 3.2 的 `get_component_doc` / `query_tmui_doc`。
+3. **注册路由**：新建页面必须写入 `pages.json`。
+4. **优先 x- 组件**：按钮 `x-button`，输入 `x-input`，容器 `x-sheet`，表单 `x-form`，导航 `x-navbar`。不要用原生 `button`/`input` 替代。
+5. **优先 CSS 工具类**：间距 `pa-12`/`mt-8`，布局 `flex-row`/`flex-center`，圆角 `round-12`。完整清单见 `css-system.md`。
+6. **CSS 禁用**：禁止 `background` 简写；渐变只能 `linear-gradient(to xxx, 色1, 色2)`；禁止 `display:block/inline/grid`、`float`、`animation`、`@keyframes`、`calc()`；仅 class 选择器，样式不继承。
+7. **UTS**：只用 `type`，所有 ref/computed/函数显式标注，用 `==` 不用 `===`。被调用的函数/变量必须写在调用处之前。
+8. **条件编译**：APP 端 `scroll-view` 用 `#ifdef APP` 包裹。
+
+```

package/data/tmui4x/60.AI/350/207/252/345/212/250/345/214/226/04.SKILL.md

@@ -0,0 +1,16 @@
+# SKILL
+
+uniappx语法及页面生成，插件生成，组件创作约束文档，我已经生成了skills。
+
+并且它可以在你写页面时如果出现了错误，继续发给ai修复时会自动进化学习避免再次错误。
+
+因此它是一个越用越聪明的SKILL集。
+
+前提是：你需要使用聪明的AI模型。
+
+本SKILL使用Opus4.6,4.7进化学习，并且 随着 我的使用它会不断的优化学习并在仓库实时更新。
+
+请大家VIP会员及时更新自己的skill文档。
+
+skill文档地址：[skill下载](https://git.tmui.design/tmui/docs)
+

package/data/tmui4x/60.AI/350/207/252/345/212/250/345/214/226/05.LLMS.md

@@ -0,0 +1,9 @@
+# LLMS
+
+不同于专为搜索引擎设计的 robots.txt 和 sitemap.xml，LLMs.txt 专门针对 LLM 推理引擎进行了优化。它以一种易于 LLM 推理引擎理解的方式，提供了网站的详细信息。
+
+[官方介绍](https://llmstxt.org/)
+
+[知乎介绍](https://zhuanlan.zhihu.com/p/1893956842943673806)
+
+[本站llms.txt文档](https://xui.tmui.design/llms.txt)

package/data/tmui4x/60.AI/350/207/252/345/212/250/345/214/226/06./346/226/207/346/241/243/351/233/206.md

@@ -0,0 +1,10 @@
+# 文档集
+
+为了让你们自己的智能体阅读文档和理解，组件库提供了相关文档集以供AI阅读和理解。
+目前提供了以下文档版本供你使用：
+
+1. HTML格式版本，方便离线部署内部无网络时使用
+2. PDF版本，方便打印放在案头上随时查阅
+3. markdown版本，方便给ai查阅和阅读（包含了示例）
+
+[离线文档](https://git.tmui.design/tmui/docs)

package/data/tmui4x/70./346/267/267/345/220/210/345/274/200/345/217/221/01./345/205/263/344/272/216.md

@@ -0,0 +1,44 @@
+# 混合开发 - 关于
+
+## 平台兼容
+
+| Web/H5 | Harmony | andriod | IOS | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑ | ☑ | ☑ | 4.87+ | 1.1.21 |
+
+<ViewMobileJssdk />
+
+## 介绍
+
+现在：
+
+你可以轻松实现原生app混合开发。
+
+比如：支付宝，银行APP等，很多页面是基于webview的页面。
+
+你开发的页面中，只要引入tmui4xJssdk.js即可与宿主app交互
+
+与之对应的tmui4xJssdk.js中封装映射了大量uniapp-x的原生接口，
+
+当然你也可以根据开放接口自定实现更多。
+
+## 为什么不使用自带的Webview?
+
+官方自带的局限大，权限控制难。而且还无法扩展函数，比如想让web js调用宿主方法并实现
+结果值回调根本无法实现，比如加载前的数据注入实现页面验证等。
+
+## 原理逻辑
+
+一、html页面推荐使用tmui3.2 web vue开发页面，它已经融合了tmui4xjssdk.js，并且类型提示功能完善。采用ts开发。类型完美。组件与tmui4x等深度融合。
+
+二、tmui4xJssdk.js起到与APP之间的桥梁作用。
+
+```mermaid
+
+flowchart TB
+	web应用 --> tmuiJssdk.js --> xWebviewU  --> uniappX应用
+	uniappX应用  --> xWebviewU  --> tmuiJssdk.js --> web应用
+
+```
+
+

package/data/tmui4x/70./346/267/267/345/220/210/345/274/200/345/217/221/02./345/205/263/351/224/256/350/257/215/346/246/202/345/277/265.md

@@ -0,0 +1,26 @@
+# 混合开发 - 关键词概念
+
+## 宿主
+
+是指承载html页面的APP应用本身，就是你开发的这个原生APP的上下文环境。
+
+这里的的环境是指：uniapp-x uvue 开发环境。
+
+插件内部是UTS 原生执行环境（目前使用者不需要了解）
+
+## 网页
+
+是指你开发的这个WEB页面应用，应当有一个远程访问地址，然后通过xWebviewU显示你的页面。
+
+这里的网页页面环境是指：web开发环境
+
+
+## tmuiJssk.js
+
+这是需要你在开发 页面 时引用的一个sdk，它构建起了 页面 与 宿主 之间的通信桥梁。
+如果你选择tmui3.2web vue组件开发，显然你不需要再引入，已经内置，并且加了类型提示，开发更友好。当然你也可不选择。采用其它方案。但无法与tmui4x
+的主题，外观等尝试深度融合。
+
+## xWebviewU
+
+这是在宿主应用中引用并使用的本混合开发的组件，用于承载显示 页面 的组件，你需要在你的宿主页面中引用，并指向你的页面。