tmui-cli 1.3.0 → 2.0.1

package/data/guides//345/233/275/351/231/205/345/214/226.md

@@ -0,0 +1,454 @@
+---
+title: 关于tmUi3.0的介绍
+---
+<script setup>
+import webview from '../components/mobileWebview.vue'
+import headertips from '../components/headertips.vue'
+</script>
+
+<headertips></headertips>
+
+##### 关于我 tmui.design
+
+# 国际化 (i18n) 使用文档
+
+## 概述
+
+国际化插件是一个专为 uni-app 设计的多语言解决方案,由于直接安装Vuei18n，在app上是无法使用插值的，因为本插件主要实现的目标是为了全平台统一使用体验。
+
+## 快速开始
+
+### 1. 安装和配置
+
+建议直接导入语言包比如：`ko.json`文件，而不是使用ts模块。最好是json文件包。
+
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import tmui from '@/uni_modules/tm-ui'
+
+const app = createApp(App)
+
+// 配置 TMUI
+app.use(tmui, {
+  i18n: {
+    locale: 'zh-Hans',
+    fallbackLocale: 'en',
+    messages: {
+      'zh-Hans': {
+        welcome: '欢迎使用 TMUI',
+        hello: '你好，{name}！',
+        count: '你有 {count} 条消息 | 你有 {count} 条消息'
+      },
+      'en': {
+        welcome: 'Welcome to TMUI',
+        hello: 'Hello, {name}!',
+        count: 'You have {count} message | You have {count} messages'
+      }
+    }
+  }
+})
+
+app.mount('#app')
+```
+
+### 2. 基本使用
+
+```typescript
+import {$i18n} from "@/uni_modules/tm-ui"
+// 在任何组件中使用
+export default {
+  mounted() {
+    // 基础翻译
+    console.log($i18n.t('welcome'))
+    
+    // 带参数的翻译
+    console.log($i18n.t('hello', { name: 'World' }))
+    
+    // 复数形式
+    console.log($i18n.t('count', 1)) // 单数
+    console.log($i18n.t('count', 5)) // 复数
+  }
+}
+```
+
+## API 参考
+
+### 核心方法
+
+#### `t(key, ...args)` - 翻译方法
+
+主要的翻译方法，支持多种参数格式：
+
+导入：
+
+```typescript
+import {$i18n} from "@/uni_modules/tm-ui"
+```
+
+```typescript
+// 基础翻译
+$i18n.t('welcome')
+
+// 带插值参数
+$i18n.t('hello', { name: 'Alice' })
+
+// 复数形式
+$i18n.t('count', 1) // 单数
+$i18n.t('count', 5) // 复数
+
+// 指定语言
+$i18n.t('welcome', 'en')
+
+// 复数 + 插值参数
+$i18n.t('count', 3, { count: 3 })
+```
+
+#### `n(value, formatName?, options?)` - 数字格式化
+
+```typescript
+// 基础数字格式化
+$i18n.n(1234.56) // "1234.56"
+
+// 货币格式化
+$i18n.n(1234.56, null, {
+  style: 'currency',
+  currency: 'CNY',
+  local: 'zh-CN'
+}) // "¥1,234.56"
+
+// 百分比格式化
+$i18n.n(0.1234, null, {
+  style: 'percent',
+  local: 'zh-CN'
+}) // "12.34%"
+
+// 使用预定义格式
+$i18n.n(1234.56, 'currency') // 使用预定义的货币格式
+```
+
+#### `d(value, formatName?, options?)` - 日期时间格式化
+
+```typescript
+// 基础日期格式化
+$i18n.d(new Date()) // "2025-1-15"
+
+// 使用预定义样式
+$i18n.d(new Date(), null, {
+  dateStyle: 'full',
+  local: 'zh-CN'
+}) // "2025年1月15日 星期三"
+
+// 自定义格式
+$i18n.d(new Date(), null, {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+  local: 'zh-CN'
+}) // "2025年一月15日"
+
+// 时间格式化
+$i18n.d(new Date(), null, {
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+  local: 'zh-CN'
+}) // "14:30:25"
+```
+
+#### `rt(timeValue, unit?, locale?)` - 相对时间
+
+```typescript
+// 相对时间格式化
+$i18n.rt(Date.now() - 60000, 'minute') // "1分钟前"
+$i18n.rt(Date.now() + 3600000, 'hour') // "1小时后"
+
+// 智能单位选择
+$i18n.rt(Date.now() - 7200000) // 自动选择最合适的单位
+```
+
+### 语言管理
+
+#### `setLocale(locale)` - 设置语言
+
+```typescript
+// 切换语言
+$i18n.setLocale('en')
+$i18n.setLocale('zh-Hans')
+$i18n.setLocale('ja')
+```
+
+#### `getLocale()` - 获取当前语言
+
+```typescript
+const currentLang = $i18n.getLocale()
+console.log(currentLang) // "zh-Hans"
+```
+
+#### `mergeLocaleMessage(locale, messages)` - 动态添加语言
+
+```typescript
+// 动态添加新的翻译内容
+$i18n.mergeLocaleMessage('zh-Hans', {
+  newKey: '新的翻译内容',
+  nested: {
+    key: '嵌套的翻译'
+  }
+})
+```
+
+#### `te(key, locale?)` - 检查翻译键是否存在
+
+```typescript
+// 检查翻译键是否存在
+if ($i18n.te('welcome')) {
+  console.log('翻译键存在')
+}
+
+// 检查特定语言的翻译键
+if ($i18n.te('welcome', 'en')) {
+  console.log('英文翻译键存在')
+}
+```
+
+#### `availableLocales()` - 获取可用语言列表
+
+```typescript
+const locales = $i18n.availableLocales()
+console.log(locales) // ["zh-Hans", "en", "ja"]
+```
+
+## 高级功能
+
+### 复数规则
+
+支持自定义复数规则：
+
+```typescript
+// 在配置中设置复数规则
+app.use(tmui, {
+  i18n: {
+    pluralRule: (choice, choicesLength) => {
+      // 中文复数规则
+      if (choice === 0) return 0
+      if (choice === 1) return 1
+      return 2
+    }
+  }
+})
+
+// 使用复数
+const message = $i18n.t('count', 0) // 零
+const message = $i18n.t('count', 1) // 单数
+const message = $i18n.t('count', 5) // 复数
+```
+
+### 字符串插值
+
+支持多种插值方式：
+
+```typescript
+// 命名插值
+$i18n.t('hello', { name: 'Alice', age: 25 })
+
+// 位置插值
+$i18n.t('welcome', ['World', 'TMUI'])
+
+// 混合使用
+$i18n.t('info', { name: 'Alice' })
+```
+
+### 数字格式化选项
+
+完整的数字格式化配置：
+
+```typescript
+$i18n.n(1234.56, null, {
+  style: 'currency',           // 样式：decimal, currency, percent
+  currency: 'CNY',            // 货币代码
+  local: 'zh-CN',             // 语言代码
+  currencyDisplay: 'symbol',  // 货币显示方式
+  useGrouping: true,          // 使用千分位分隔符
+  minimumIntegerDigits: 1,    // 最小整数位数
+  minimumFractionDigits: 2,   // 最小小数位数
+  maximumFractionDigits: 2    // 最大小数位数
+})
+```
+
+### 日期时间格式化选项
+
+丰富的日期时间格式化配置：
+
+```typescript
+$i18n.d(new Date(), null, {
+  local: 'zh-CN',                    // 语言代码
+  calendar: 'gregory',               // 日历系统
+  timeZone: 'Asia/Shanghai',         // 时区
+  hour12: false,                     // 12小时制
+  dateStyle: 'full',                 // 日期样式
+  timeStyle: 'medium',               // 时间样式
+  weekday: 'long',                   // 星期显示
+  year: 'numeric',                   // 年份显示
+  month: 'long',                     // 月份显示
+  day: 'numeric',                    // 日期显示
+  hour: '2-digit',                   // 小时显示
+  minute: '2-digit',                 // 分钟显示
+  second: '2-digit'                  // 秒显示
+})
+```
+
+## 配置选项
+
+### 完整配置示例
+
+```typescript
+app.use(tmui, {
+  language: 'zh-Hans',
+  i18n: {
+    locale: 'zh-Hans',                    // 当前语言
+    fallbackLocale: 'en',                // 回退语言
+    messages: {},                         // 翻译消息
+    datetimeFormats: new Map(),          // 日期时间格式
+    numberFormats: new Map(),            // 数字格式
+    modifiers: new Map(),                // 字符串修饰器
+    pluralRules: new Map(),              // 复数规则
+    missing: null,                       // 缺失翻译处理函数
+    missingWarn: true,                   // 缺失翻译警告
+    fallbackWarn: true,                  // 回退语言警告
+    fallbackRoot: true,                  // 回退到根实例
+    fallbackFormat: false,               // 回退格式化
+    unresolving: true,                   // 允许未解析的翻译键
+    postTranslation: null,               // 翻译后处理函数
+    warnHtmlMessage: true,               // HTML消息警告
+    escapeParameter: true,               // 转义参数
+    inheritLocale: true,                 // 继承父级语言设置
+    warnHandler: (msg, err) => {},      // 警告处理器
+    pluralRule: null,                    // 默认复数规则
+    globalInjection: true,               // 全局注入
+    allowComposition: true,              // 允许组合式API
+    legacy: true                         // 遗留模式
+  }
+})
+```
+
+## 最佳实践
+
+### 1. 语言文件组织
+
+```typescript
+// 按模块组织翻译文件
+const messages = {
+  'zh-Hans': {
+    common: {
+      confirm: '确认',
+      cancel: '取消',
+      save: '保存'
+    },
+    user: {
+      profile: '个人资料',
+      settings: '设置'
+    }
+  }
+}
+```
+
+### 2. 动态语言切换
+
+```typescript
+// 语言切换函数
+function changeLanguage(locale: string) {
+  $i18n.setLocale(locale)
+  // 保存到本地存储
+  uni.setStorageSync('language', locale)
+  // 触发页面刷新或重新渲染
+}
+```
+
+### 3. 错误处理
+
+```typescript
+// 自定义缺失翻译处理
+app.use(tmui, {
+  i18n: {
+    missing: (locale, key) => {
+      console.warn(`Missing translation: ${locale}.${key}`)
+      return `[${key}]` // 返回键名作为占位符
+    }
+  }
+})
+```
+
+### 4. 性能优化
+
+```typescript
+// 预加载语言包
+const preloadLanguages = ['en', 'ja', 'ko']
+preloadLanguages.forEach(locale => {
+  // 异步加载语言包
+  import(`./locales/${locale}.json`).then(messages => {
+    $i18n.mergeLocaleMessage(locale, messages.default)
+  })
+})
+```
+
+## 常见问题
+
+### Q: 如何支持新的语言？
+
+A: 使用 `mergeLocaleMessage` 方法动态添加：
+
+```typescript
+$i18n.mergeLocaleMessage('fr', {
+  welcome: 'Bienvenue',
+  hello: 'Bonjour, {name}!'
+})
+```
+
+### Q: 如何处理复数形式的翻译？
+
+A: 使用 `|` 分隔符：
+
+```typescript
+// 翻译文件
+{
+  "count": "你有 {count} 条消息 | 你有 {count} 条消息"
+}
+
+// 使用
+$i18n.t('count', 1)  // "你有 1 条消息"
+$i18n.t('count', 5)  // "你有 5 条消息"
+```
+
+### Q: 如何格式化货币？
+
+A: 使用 `n` 方法配合货币选项：
+
+```typescript
+$i18n.n(1234.56, null, {
+  style: 'currency',
+  currency: 'CNY',
+  local: 'zh-CN'
+})
+```
+
+### Q: 如何获取相对时间？
+
+A: 使用 `rt` 方法：
+
+```typescript
+$i18n.rt(Date.now() - 60000, 'minute') // "1分钟前"
+```
+
+## 更新日志
+
+- **v1.0.0** - 初始版本，支持基础翻译功能
+
+## 技术支持
+
+如有问题或建议，请访问：
+- 官方网站：https://tmui.design
+
+---
+
+*本文档基于 TMUI4x v1.3.0 版本编写*

package/data/guides//345/256/211/350/243/205.md

@@ -0,0 +1,103 @@
+# TMUI3.2Vue版
+
+## uniappx混合开发使用
+
+详见[混合开发指南](https://xui.tmui.design/70.混合开发/07.TMUI3.2组件库.md);
+
+内置了tmuijssdk.js插件可轻松调用uniappx中的方法。
+
+
+## vue项目中使用
+
+仅作为你web vue 移动端使用。
+
+一、复制tmui3.2 vue组件
+
+从demo代码仓库中下载好tm-ui vue组件包。复制到你的项目目录`根目录/src/components/tm-ui`位置即可。
+
+二、引用
+
+在你的`src/main.ts`中如下配置
+
+```ts
+
+import { createApp } from 'vue'
+// @ts-ignore
+import './style.css'
+import App from './App.vue'
+//必须安装
+import { createPinia } from 'pinia'
+//必须安装
+import router from './router'
+// 引入组件包
+import tmui from './components/tm-ui'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+// 最后引用安装好。
+app.use(tmui)
+app.mount('#app')
+
+
+```
+
+三、配置tsconfig
+
+为了有类型提示，你还需要配置tsconfig来获得类型提示
+
+```ts
+
+{
+ ...
+  "compilerOptions": {
+	...
+    // 包含类型定义文件
+    "typeRoots": ["./components/tm-ui"],
+	...
+  },
+  "include": [
+    "components/tm-ui/*.ts",
+    "components/tm-ui/**/*.ts",
+  ]
+}
+
+
+```
+
+四、配置vite.config.ts
+
+为了让组件内可以使用view,rpx,uni.方法标签你需要配置我开发的vite插件以此来适配。tmui3.2
+
+```ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+//引入tmui中的插件
+import tmuiVitePlugin from './src/components/tm-ui/vitePlugin'
+
+// https://vite.dev/config/
+export default defineConfig({
+  server:{
+    port:3000,
+  },
+  plugins: [
+	vue(), 
+	// 配置插件,兼容rpx，view标签或者单位。
+	muiVitePlugin()
+  ],
+  resolve: {
+    alias: {
+      // 配置 Vue 别名为包含模板编译器的版本，主要是兼容编译tmui3.2
+      'vue': 'vue/dist/vue.esm-bundler.js'
+    }
+  }
+})
+
+
+```
+
+## 自带的全局方法
+
+可以在引用组件库后可全局使用
+
+```uni.方法```使用有关方法，只是部分映射了，注意里面有两个方法是特殊的。

package/data/guides//345/260/217/347/250/213/345/272/217/345/210/206/344/272/253.md

@@ -0,0 +1,34 @@
+---
+title: 关于3.0小程序分享
+---
+
+##### 开发指南 tmui.design
+
+# 小程序分享 <Badge type="danger" text="v3.0.63+" vertical="middle" />
+本UI框架，已经自定义混洧了分享函数在默认的hook中，默认是关闭的。可以通过全局的配置设置```shareDisable:false```来开启全局分享功能。
+开启后无法修改分享内容。如果想修改分享内容见下方配置。
+
+## 阻止分享
+
+全局的配置设置```shareDisable:true```
+
+## 自定分享内容
+要自定分享，请先关闭全局的分享设置（默认已经关闭）
+
+```ts
+import {onLoad } from "@dcloudio/uni-app";
+import { share } from "@/tmui/tool/lib/share";
+const { onShareAppMessage, setShareApp, setShareTime, onShareTimeline } = share();
+onShareAppMessage();
+onShareTimeline()
+//config是分享配置，可以不填写。如果填写了配置分享时的配置将以你的自定义为主。
+//请注意一定要在onReady或者onLoad中使用,切不可直接在setup中调用,会无法修改的.
+//请参见:https://github.com/dcloudio/uni-app/issues/3990
+onLoad(() => {
+	//可以在任何异步中设置，不一定要在onload中。分享是可以返回Promise的。
+	setShareApp(config)
+	setShareTime(config)
+})
+
+```
+

package/data/guides//345/270/270/350/247/201/351/227/256/351/242/230.md

@@ -0,0 +1,102 @@
+---
+title: 关于3.0 常见问题
+---
+
+##### 开发指南 tmui.design
+
+## 微信小程序样式问题
+
+mainset.json中
+各个平台比如：mp-weixin,mp-alipay节点下加入：
+
+```json
+{
+    scopedSlotsCompiler:true,
+    mergeVirtualHostAttributes:true,
+    slotMultipleInstance:true,
+}
+
+```
+这样就解决了样式的问题了，主要是这样配置可以减少组件节点数量，让样式可以穿透到组件根节点上。
+
+## 常见问题
+这里列举了经常遇到的uniapp的常见问题，可能不是我框架的问题。而是uniapp自身兼容问题，亦或者是你自身知识储备问题，对uniapp开发不够了解造成的。
+
+
+::: details 编译到app时，提示sdk版本不一致？
+1、如果喜欢hbx编译。按照教程，创建hbx项目，然后编译的时候，自动使用hbx的内置sdk。这样hbx和sdk版本号自动对齐。
+2、坚持使用cli的版本号，但用hbx编译的。检查hbx版本号，依照提示你是正式版本418。但sdk是默认的alpha 313。解决方案是升级sdk 至350把hbx升级到350 alpha再编译。
+:::
+
+::: details 按照教程cli运行不起来？
+运行不起来的原因有很多，我只列举你可能出现的问题！<br>
+1、电脑是否安装了nodejs npm环境。我目前默认的是node14.18.2 npm6.14.15,[下载node](https://mirrors.aliyun.com/nodejs-release/v14.18.2/),[安装nodejs教程](https://blog.csdn.net/Small_Yogurt/article/details/104968169)<br>
+2、你的hbx版本是否是3.4.15+<br>
+3、下载完cli后，是否在根目录执行了npm install<br>
+:::
+
+::: details NVUE编译是提示break-wrod
+因uniapp条件编译中无法区分安卓还是苹果系统。但break-word断行样式是除安卓下都支持。因为此编译警告提示，无法消除，除非你不用断行这个功能。
+:::
+
+::: details 支付宝小程序不支持动态修改主题和暗黑
+因为目前截止3.5.0 sdk官方还未支持在支付宝中使用pinia插件。因此支付宝中无法使用动态修改功能。但
+我们可以有其它方法实现：修改后热重启下应用即可实现。其它的静态设置主题不受影响。
+:::
+
+::: details 部分安卓机在nvue原生渲染时非常缓慢
+经过实际测试，确实有部分手机缓慢。究其原因是这部分手机对于在nvue上渲染icon图标性能不稳定造成。解决方案是字体图标改成图片图标。
+:::
+
+::: details HBX不能创建TS项目
+截止目前版本3.5.0，官方还未能添加可视化创建ts项目的nvue项目功能。因此请按照我的教程创建项目。
+:::
+
+::: details HBX编译至内置浏览器不显示且空白
+这是因为截止目前版本3.5.0版本，hbx内置浏览器内核版本过于老旧，不支持原生的ejs module造成的，请编译至外部edge,chrome浏览器等预览
+:::
+
+::: details 编译布局错乱
+目前使用3.5.0版本编译错乱，请更新版本至3.6.2+以上，解决。原因是uni此版本sdk自身bug造成。<br>
+有时开发编译时，时而正常时而不正常。这是编译缓存问题，强制关闭基座，重启即可。或者重新编译下。
+:::
+
+::: details 按照教程安装后编译时提示isCustomElement等错误
+因为我的组件库默认是需要自己引入组件到页面。请检查是否引入组件。你也可以全局引入组件，免去单个引入（方法见安装步骤中的教程）
+:::
+
+::: details 编译后console报...?,?.等错误
+这是因为你的浏览器不支持es6，请把你的浏览器更新至最新版本。建议chrome,edge。
+:::
+
+::: details 用flex布局，想要一排显示，固定一个宽度，另一个自动100%宽度？
+请使用标准的布局方法如下:
+```ts
+<view class="flex flex-row">
+    <view style="width:100rpx"><text>1</text></view>
+    <view class="flex-1" style="width:0px"><text>2</text></view>
+</view>
+```
+:::
+
+::: details 怎么布局100%宽度？
+因在nvue中默认是flex布局，默认就100%的宽度。但如果你row中想100%，如下：
+```ts
+<view class="flex flex-row">
+    <view class="flex-1"><text>这会占据一行的100%</text></view>
+</view>
+```
+:::
+
+::: details 怎么布局100%高度？
+因在nvue中默认是flex布局，默认就100%的宽度。但如果你row中想100%，如下：
+```ts
+<view class="flex flex-col" style="height:100rpx">
+    <view class="flex-1"><text>这里的元素的高度自动撑开到父的高度100%</text></view>
+</view>
+```
+:::
+
+::: details 为什么我文本各平台显示不一致？
+任何地方要显示文本请使用tm-text组件，以此在各平台表现一致的效果。
+:::