tmui-cli 2.0.0 → 2.0.2

package/data/examples/upload-photo.vue

@@ -0,0 +1,39 @@
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b mt-16">图片上传 TmUploadPhoto</tm-text>
+            <view class="">
+                <tm-text>样式丰富塑造性好。长按可排序。</tm-text>
+            </view>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-upload-photo v-model="modelvalue"></tm-upload-photo>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b ">自定样式,列,上传位置,长按可排序。</tm-text>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-upload-photo v-model="modelvalue2" add-pos="before" :column="3" img-height="200">
+                <tm-sheet style="box-sizing: border-box;"  round="10" width="100%" height="100%" class="flex flex-row flex-row-center-center" border-color="primary" border-width="1" margin="0" padding="0">
+                    <tm-icon size="64" color="primary" name="inbox-unarchive-fill"></tm-icon>
+                </tm-sheet>
+            </tm-upload-photo>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b">限定一个</tm-text>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-upload-photo :column="1" img-height="200" :max-count="1">
+                <tm-sheet style="box-sizing: border-box;" round="10" width="100%" height="100%" class="flex flex-row flex-row-center-center" color="#e7f2ff" border-style="dashed" border-color="primary" border-width="1" margin="0" padding="0">
+                    <tm-icon size="74" color="primary" name="sticky-note-add-line"></tm-icon>
+                </tm-sheet>
+            </tm-upload-photo>
+        </tm-sheet>
+    </view>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const modelvalue = ref<Array<Record<string, any> | string>>(['https://img-cdn-tx.dcloud.net.cn/stream/plugin_screens/0306ed00-b46d-11ee-800c-6f5e9833f51b_0.jpg?&v=1716952063'])
+const modelvalue2 = ref<Array<Record<string, any> | string>>(['https://img-cdn-tx.dcloud.net.cn/stream/plugin_screens/0306ed00-b46d-11ee-800c-6f5e9833f51b_0.jpg?&v=1716952063'])
+
+</script>

package/data/examples/upload-video.vue

@@ -0,0 +1,29 @@
+<template>
+    <view>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b mt-16">视频上传 TmUploadVideo</tm-text>
+            <view class="">
+                <tm-text>样式丰富塑造性好。</tm-text>
+            </view>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-upload-video v-model="modelvalue2" add-pos="before" :column="3" img-height="200">
+                <tm-sheet style="box-sizing: border-box;"  round="10" width="100%" height="100%" class="flex flex-row flex-row-center-center" border-color="primary" border-width="1" margin="0" padding="0">
+                    <tm-icon size="64" color="primary" name="camera-line"></tm-icon>
+                </tm-sheet>
+            </tm-upload-video>
+        </tm-sheet>
+        <tm-sheet>
+            <tm-text font-size="36" class="text-weight-b d-block mb-n8">限定一个</tm-text>
+
+            <tm-upload-video :column="1" img-height="200" :max-count="1">
+            </tm-upload-video>
+        </tm-sheet>
+    </view>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const modelvalue2 = ref<Array<Record<string, any> | string>>(['https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4'])
+
+</script>

package/data/guides/cli.md

@@ -0,0 +1,110 @@
+---
+title: MCP和CLI
+---
+
+<script setup>
+import webview from '../components/mobileWebview.vue'
+import headertips from '../components/headertips.vue'
+</script>
+
+<headertips></headertips>
+
+##### 开发指南 tmui.design
+
+# tmui-cli 介绍与使用
+
+`tmui-cli` 是 TMUI DESIGN 的终端工具：在命令行里创建或升级 uniapp CLI / HBX 项目，也可以作为 IDE 的 MCP 服务，让 Cursor、VS Code 等 Agent 直接查组件文档、创建项目。
+
+需要 **Node.js 22.18+**。
+
+## 安装
+
+```bash
+npm i -g tmui-cli
+tmui
+```
+
+Windows / macOS / Linux 命令相同。macOS 若提示权限、需要 `sudo`，不要用 sudo 装全局包；请用 nvm 管理 Node，再执行上面的命令。
+
+也可以不装全局，用 npx：
+
+```bash
+npx -y tmui-cli
+```
+
+## 交互菜单（`tmui`）
+
+在任意目录执行 `tmui` 会打开终端菜单（不是浏览器页面）：
+
+1. 打印 TMUI DESIGN logo
+2. 检测当前目录是否已是 uniapp 项目
+3. 选择操作
+
+| 菜单 | 说明 |
+| --- | --- |
+| 创建项目 | CLI / HBX 模板 + TMUI |
+| 升级项目 | 升级 TMUI 或 UniSdk |
+| 访问官网主页 | 用系统默认浏览器打开 https://tmui.design |
+| 退出 | 结束进程 |
+
+按键：`↑/↓` 选择，`Enter` 确认，`Esc` 返回，`Ctrl+C` 退出。
+
+### 创建项目
+
+依次选择：项目类型（CLI / HBX）→ 目录 → 名称 → TMUI 版本 →（仅 CLI）UniSdk 通道与版本 → npm 或 pnpm。
+
+- CLI：推荐，可用 VS Code / Cursor 等命令行编译
+- HBX：仅 HBuilderX
+- 依赖安装固定走阿里云源 `https://registry.npmmirror.com`
+
+### 升级项目
+
+- TMUI：下载组件库到 `uni_modules/tm-ui`（3.1 为 `tmui`）
+- UniSdk：仅 CLI 项目，改 `package.json` 后用所选 npm/pnpm 安装
+
+当前目录不是 uniapp 项目时，升级会先让你选择项目目录。
+
+## MCP（给 Cursor / VS Code 等 IDE 用）
+
+`tmui mcp` 启动 MCP stdio 服务，**不会**打开交互菜单。stdout 只走协议，供 IDE 拉起。
+
+全局安装后，在 IDE 的 MCP 配置里写：
+
+```json
+{
+  "mcpServers": {
+    "tmui": {
+      "command": "tmui",
+      "args": ["mcp"]
+    }
+  }
+}
+```
+
+或用 npx（无需全局安装）：
+
+```json
+{
+  "mcpServers": {
+    "tmui": {
+      "command": "npx",
+      "args": ["-y", "tmui-cli", "mcp"]
+    }
+  }
+}
+```
+
+Cursor 写在项目级 `.cursor/mcp.json`，VS Code / Copilot 写在用户或工作区的 MCP 配置，字段同样是 `command` + `args`。配好后重启或刷新 MCP 连接。
+
+### 提供的工具
+
+| 工具 | 说明 |
+| --- | --- |
+| `create_uniapp_hbx_project` | 创建 uniapp HBuilderX 项目（含 TMUI） |
+| `create_uniapp_cli_project` | 创建 uniapp CLI 项目（自动安装依赖，含 TMUI） |
+| `query_tmui_config` | 查询组件库全局配置（mode / unit / radius / color 等） |
+| `list_components` | 列出全部组件，按分类分组 |
+| `get_component_doc` | 获取单个组件文档与示例（如 `tm-button`） |
+| `query_tmui_doc` | 查询引导/配置文档（常见问题、快速上手、安装等） |
+
+创建类工具与交互菜单共用同一套创建逻辑。CLI 项目未指定版本时，默认取 CDN 最新 TMUI、正式包最新 UniSdk，安装器默认 npm。

package/data/guides//344/273/213/347/273/215.md

@@ -0,0 +1,34 @@
+---
+title: TMUI3.2Vue版
+---
+
+# 介绍 TMUI3.2Vue版
+
+它是web vue移动端开发版本组件，类似Vant移动端组件库。不同的是它是基于tmui3.2 uniapp版本改进而来。
+因此它可以在任意vue环境下编译，可以不依赖uniapp，只要在vue项目中引入就可以了。
+
+
+## 理念和优势
+
+横向对比了多个移动端组件库好像也没几个,目前最好的H5移动端vue组件库：
+[京东NutUi](https://nutui.jd.com/h5/vue/4x/#/zh-CN/component/button)，
+[有赞VantUi](https://vant-ui.github.io/vant/#/zh-CN/home),这两个还是好用的，没啥毛病。
+
+vant吧，就是用的px单位，字太小了，经常搞完小小的，要配置插件转设计单位。包括京东的nutui.
+我们习惯了uniapp开发的话，已经习惯了rpx单位的自适应和一些快捷方法。用uniap不就是为了快吗？不管是京东的还是有赞的这些都挺好，只是习惯了uniapp还是有点不适应的。
+
+因此我改进了tmui3.2 vue组件库，它的组件都是基于tmui3.2 uniapp版本改进而来。同时附带了方便性：
+
+比如：你可以用rpx单位写布局，也可以写view,text标签（仅这两）。主要是它与uniapp3 tmui3.2是同步维护的，原汁源味。而且组件文档属性几乎共用的。
+
+## 为什么要再做TMUI3.2Vue版？
+
+主要是为了tmui4x 的Uniappx原生app混合开发的。
+
+它已经融合了tmui4xjssdk.js，并且类型提示功能完善。采用ts开发。类型完美。组件与tmui4x等深度融合。主题样式自动适应app的主题色，都不需要额外的配置。
+为你的app开发功能模块简直不要太方便。
+
+可以写rpx单位,内置几种uni常见方法来兼容,布局习惯都不用变。
+如何高效的与uniapp-x混合开发？详见[混合开发指南](https://xui.tmui.design/70.混合开发/01.关于.md)
+
+后续会持续与3.2一同更新，如果你有uniapp-x项目的混合开发这是一个好选择。

package/data/guides//345/205/274/345/256/271/346/200/247.md

@@ -0,0 +1,41 @@
+---
+title: 关于3.0兼容性
+---
+
+##### 开发指南 tmui.design
+
+图标说明：<br>
+:heavy_check_mark: 已测试并兼容 <br>
+:white_check_mark: 未测试，理论兼容  <br>
+:x: 不兼容 <br>
+:no_entry: 未知 <br>
+
+# 兼容性
+这里提到的兼容性需要注意。如果你的项目牵涉范围大，一定要注意这方面的问题，好配置你的资源。
+
+## :gear: vue版本兼容性
+| VUE2 | VUE3 |
+| --- | --- |
+| :x: [vue2版本](https://jx2d.cn) | :heavy_check_mark: |
+
+## :gear: 语言特性
+| TypeScript | vite | pinia |
+| --- | --- | --- |
+| :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |
+
+## :gear: 系统兼容
+| IOS | Android | Brower | PC |
+| --- | --- | --- | --- |
+| ios9.3+ | 4.4.5+ | [查看](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7) | :heavy_check_mark: |
+
+## :gear: 平台兼容
+
+| APP-VUE | APP-NVUE | 各家小程序 |
+| --- | --- | --- |
+| :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark:(微信已测试) :white_check_mark:(其它未测) |
+
+## :gear: HBX和CLI版本要求
+
+| HBX | CLI-SDK |
+| --- | --- |
+| hbx3.14+ | 3.0.0-alpha-3041320220531002以上对应hbx alpha版本3.13+ |

package/data/guides//345/215/225/344/275/215/346/240/207/347/255/276/350/257/264/346/230/216.md

@@ -0,0 +1,22 @@
+# TMUI3.2Vue版
+
+## 标签说明
+
+建议遵循web开发标准，使用还div等标签。
+
+但为了兼容tmui3.2组件库使用了vite插件在编译阶段转译了正如标签：
+
+view:转译为div标签
+
+text:转译为span标签
+
+scroll-view,swiper,swiper-item这三个不会转译直接使用内置同名组件。
+
+## 单位说明
+
+移动端竖屏时，可以用rpx单位方便布局和做响应。另外设计参考单位与uniapp一样的。
+
+设计稿以750px为基准：2rpx = 1px,就是375的2倍。假设你的设计稿是375px，你写布局时一比一写，稿是多宽就写多宽。
+
+
+