tmui-cli 2.0.6 → 5.3.2

package/data/uni-app-x-docs/vue/component.md

@@ -1,8 +1,6 @@
 # 组件
 
-我们可以对一段要复用的js/uts逻辑代码进行封装，抽出function、module等形式。
-
-那么涉及UI的复用时，该如何抽象？
+我们可以对一段要复用的js/ts/uts逻辑代码进行封装，抽出function、module等形式。那么涉及UI的复用时，该如何抽象？
 
 这就是vue的组件机制，把视图template、script、style都封装到独立的uvue组件文件中，在其他需要的地方使用组件的名称进行引用。
 
@@ -33,7 +31,7 @@ uni-app x 组件基于 vue 单文件组件规范，一个组件内，有 3 个
 
 
 ## 创建及引用组件 @create-and-import-component
-<!-- TODO：此处需要重写 -->
+
 ### 创建组件 @create-component
 
 #### easycom
@@ -56,14 +54,14 @@ uni-app x 项目支持使用 `.vue`、`.uvue` 文件作为组件使用，但同
 
 只要组件安装在项目的 `components` 目录下或 `uni_modules/插件 id/components/插件 id/插件 id.uvue` 目录下，并符合 `组件名称/组件名称.(vue|uvue)` 目录结构。就可以不用引用、注册，直接在页面中使用。
 
-- 比如 [uni-loading](https://ext.dcloud.net.cn/plugin?id=15980)，它导入到项目后，存放在了目录 /uni_modules/uni-loading/components/uni-loading/uni-loading.uvue
+- 比如 [uni-link](https://ext.dcloud.net.cn/plugin?id=27898)，它导入到项目后，存放在了目录 /uni_modules/uni-link-x/components/uni-link/uni-link.uvue
 
-  同时它的组件名称也叫 uni-loading，所以这样的组件，不用在 script 里注册和引用。如下：
+  同时它的组件名称也叫 uni-link，所以这样的组件，不用在 script 里注册和引用。如下：
 
   ```html
   <template>
       <view>
-        <uni-loading></uni-loading><!-- 这里会显示一个loading -->
+        <uni-link></uni-link><!-- 这里会显示一个loading -->
       </view>
     </template>
   <script>
@@ -72,9 +70,9 @@ uni-app x 项目支持使用 `.vue`、`.uvue` 文件作为组件使用，但同
   </script>
   ```
 
-这里出现了`uni_module`的概念，简单说下，它是uni-app的一种包管理方案。
+这里出现了`uni_module`的概念，简单说下，它是uni-app(x)的一种包管理方案。
 
-`uni_module`其实不止服务于组件，它可以容纳组件、script库、页面、项目等所有DCloud插件市场所支持的种类。
+`uni_module`其实不止服务于组件，它可以容纳组件、script库、原生插件、页面、项目等所有DCloud插件市场所支持的种类。
 
 在HBuilderX中点右键可方便的更新插件，插件作者也可以方便的上传插件。
 
@@ -105,7 +103,7 @@ uni_module有详细的专项文档，请另行查阅[uni_module规范](https://u
     <child ref="component1"></child>
   </view>
 </template>
-<script setup lang="uts">
+<script setup>
 // 引入 child 组件
 import child from './child.vue'
 
@@ -199,7 +197,7 @@ const component1 = ref<ComponentPublicInstance | null>(null) // 手动引入组
 
 :::
 
-#### 在 `main.uts` 中使用 `app.config.globalProperties`
+#### 在 `main.uts/ts/js` 中使用 `app.config.globalProperties`
 
 如在 `main.uts` 中的 `createApp` 方法中使用：
 ```ts
@@ -283,7 +281,7 @@ Android VDOM模式是强类型，如果不是内置组件，也不是easycom组
 
 callMethod可用于所有自定义组件，包括easycom组件也可以使用，只不过easycom组件可以直接`.`。
 
-蒸汽模式下不再推荐使用`callMethod`
+蒸汽模式下不再推荐使用`callMethod`，正常的使用`.`操作符访问组件的方法即可。
 
 **语法**
 
@@ -352,7 +350,7 @@ Uni`组件名(驼峰)`Element
 
 ### 组件监听应用、页面生命周期 @component-page-lifecycle
 
-|组件中监听应用生命周期 |Android |Android(Vapor)  |iOS  | iOS(Vapor) |HarmonyOS | HarmonyOS(Vapor) |Web |微信小程序 |
+|组件中监听应用生命周期 |Android(VDOM) |Android(Vapor)  |iOS(VDOM)  | iOS(Vapor) |HarmonyOS(VDOM) | HarmonyOS(Vapor) |Web |微信小程序 |
 |:-:			          |:-:		 |:-:             |:-:  |:-:         |:-:		  |:-:               |:-:	 |:-:		  |
 |onAppShow          |4.11    |5.21            |4.11 |5.21        |4.61     |5.21             |4.11 |4.41     |
 |onAppHide          |4.11    |5.21            |4.11 |5.21        |4.61     |5.21             |4.11 |4.41     |
@@ -372,7 +370,7 @@ Uni`组件名(驼峰)`Element
 
 :::
 
-|组件中监听页面生命周期 |Android |Android(Vapor) |iOS  | iOS(Vapor) |HarmonyOS | HarmonyOS(Vapor) |Web |微信小程序 |
+|组件中监听页面生命周期 |Android(VDOM) |Android(Vapor) |iOS(VDOM)  | iOS(Vapor) |HarmonyOS(VDOM) | HarmonyOS(Vapor) |Web |微信小程序 |
 |:-:			          |:-:		 |:-:             |:-:  |:-:         |:-:		   |:-:               |:-:	|:-:		  |
 |onLoad             |4.11    |5.21            |4.11 |5.21        |4.61     |5.21              |4.11 |4.41     |
 |onPageShow         |4.11    |5.21            |4.11 |5.21        |4.61     |5.21              |4.11 |4.41     |
@@ -411,14 +409,14 @@ Uni`组件名(驼峰)`Element
 
 ## 组件的生命周期 @component-lifecycle
 
-### 组件生命周期（选项式 API）兼容性 @component-lifecycle-options-compatibility
-
-<!-- VUEJSON.options_lifecycle.compatibility -->
-
 ### 组件生命周期（组合式 API）兼容性 @component-lifecycle-composition-compatibility
 
 <!-- VUEJSON.composition_lifecycle.compatibility -->
 
+### 组件生命周期（选项式 API）兼容性 @component-lifecycle-options-compatibility
+
+<!-- VUEJSON.options_lifecycle.compatibility -->
+
 示例 [详情](<!-- VUEJSON.E_lifecycle.component_ChildComponentOptions.gitUrl -->)
 
 ::: preview <!-- VUEJSON.E_lifecycle.component_component-options.webUrl -->
@@ -536,6 +534,8 @@ defineOptions({
 ```
 这个 `$attrs` 对象包含了除组件所声明的 `props` 和 `emits` 之外的所有其他 attribute，例如 `class`，`style`，`v-on` 监听器等等。
 
+uni-app x 编译到小程序时，`v-bind="$attrs"` 的显式透传范围存在限制，详见[文档](../mp/README.md#v-bind-attrs)。
+
 有几点需要注意：
 
 - 和 `props` 有所不同，透传 attributes 在 JavaScript 中保留了它们原始的大小写，所以像 `foo-bar` 这样的一个 attribute 需要通过 `$attrs['foo-bar']` 来访问。
@@ -565,13 +565,13 @@ defineOptions({
 
 ## ref
 
-在 `uni-app js 引擎版`中，非 `Web端` 只能用于获取自定义组件，不能用于获取内置组件实例（如：`view`、`text`）。\
+在 `老uni-app`中，非 `Web端` 只能用于获取自定义组件，不能用于获取内置组件实例（如：`view`、`text`）。\
 在 `uni-app x` 中，内置组件会返回组件根节点的引用，自定义组件会返回组件实例。
 
 **注意事项：**
 - 如果多个节点或自定义组件绑定相同 `ref` 属性，将获取到最后一个节点或组件实例的引用。
 - 在 `v-for` 循环时，绑定 `ref` 属性会获取到节点或组件实例的集合。
-- 在 `uni-app x` 中，要访问 `$refs` 中的属性，需要使用索引方式。
+- 访问 `$refs` 中的属性，Android平台VDOM模式无法使用`.`运算符，需要使用索引方式。
 
 示例 [详情](<!-- VUEJSON.E_component-instance.refs_refs-options.gitUrl -->)
 
@@ -609,7 +609,7 @@ defineOptions({
 
 ## 自定义组件 v-model 绑定复杂表达式 @v-model-complex-expression
 
-自定义组件 `v-model` 绑定复杂表达式时，需要通过 `as` 指定类型(仅App-Android 平台)。
+自定义组件 `v-model` 绑定复杂表达式时，Android平台VDOM模式需要通过 `as` 指定类型。
 
 ::: preview
 
@@ -682,7 +682,7 @@ defineOptions({
   </view>
 </template>
 
-<script setup lang="uts">
+<script setup lang="ts">
   // import componentA from './component-a' // 错误用法
   defineOptions({
     name: "component-a"

package/data/uni-app-x-docs/vue/composition-api.md

@@ -2,10 +2,10 @@
 
 > `App.uvue` 从HBuilderX 5.0+起支持组合式 API。
 
-::: warning Android注意
-- 暂不支持 `<script setup>` 和 `<script>` 同时使用，如果需要配置 `options` 内容，比如 `name`，可以使用 `defineOptions`。
-- 暂不支持顶层 `await`。
-- 暂不支持 `<script setup>` 配置 `generic` 泛型类型参数。
+::: warning 注意
+- App-Android VDOM 模式和 App 平台蒸汽模式均不支持同时使用 `<script setup>` 和 `<script>`。如需配置 `options` 内容（例如 `name`），可以使用 `defineOptions`。
+- App-Android VDOM 模式、微信小程序 VDOM 模式和 App 平台蒸汽模式均不支持顶层 `await`。
+- App-Android VDOM 模式不支持通过 `<script setup>` 的 `generic` 属性声明泛型类型参数。
 
 :::
 
@@ -107,9 +107,7 @@ watch(
 
   若要避免深层响应式转换，只想保留对这个对象顶层次访问的响应性，请使用 [shallowReactive()](#shallowreactive) 作替代。
 
-::: warning 注意
-- `reactive` 在 App-Android VDOM 模式不支持对 class 做响应式，推荐使用 type 定义存储数据的对象类型。
-:::
+注意： `reactive` 在 App-Android VDOM 模式不支持对 class 做响应式，此时推荐使用 type 定义存储数据的对象类型。
 
 - 示例 [详情](<!-- VUEJSON.E_reactivity.core_reactive_reactive.gitUrl -->)
 
@@ -442,11 +440,11 @@ watch(
 
 ::: warning 注意
 - `getCurrentInstance` 只能在 setup 或生命周期钩子中调用。
-- 在 `app` 端 `proxy` 属性可能为空，需使用 `!` 非空断言操作符。
+- 在 `app` 端 `proxy` 属性可能为空，在uts/ts等涉及类型的语言中需使用 `!` 非空断言操作符。
 :::
 
 ```uts
-<script setup lang="uts">
+<script setup lang="ts">
 // 通过 getCurrentInstance 获取当前 UniPage 对象
 const instance = getCurrentInstance()!.proxy!
 const currentPage = instance.$page
@@ -771,6 +769,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 ### 与渲染函数一起使用
 
+::: warning 注意
+`render()` 函数仅在 `VDOM 模式`下支持。
+:::
 
 示例 [详情](<!-- VUEJSON.E_render-function.render_render-composition.gitUrl -->)
 

package/data/uni-app-x-docs/vue/data-bind.md

@@ -8,38 +8,19 @@ vue的一大特色，就是可以定义一个响应式变量，通过模板绑
 
 响应式变量被绑定到UI界面后（template和style都可以），
 1. 在逻辑script中修改变量，UI界面会自动更新。省却再编写dom代码操作UI。
-2. 响应式变量有diff更新机制。比如对于一个大列表的UTSJSONObject数据，其中一项变更时，框架底层会自动计算diff，给UI层差量同步数据。这在大多数情况是很好的，但注意diff这个计算过程本身也会增加耗时。
+2. 响应式变量有diff更新机制。比如对于一个大列表数据，其中一项变更时，框架底层会自动计算diff，给UI层差量同步数据。这在大多数情况是很好的，但注意diff这个计算过程本身也会增加耗时。
 
 下面分别讲解各种方式的用法。
 
 ## 声明响应式状态 @declaring-reactive-state
 
-### 选项式 API @options-api
-
-选用选项式 API 时，会用 `data` 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数。Vue 将在创建新组件实例的时候调用此函数，并将函数返回的对象用响应式系统进行包装。此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的 `this`) 上。
-
-data需要特殊类型时，通过 as 来转换。
-
-如下示例中，
-- 首先在data的return中定义了响应式变量：str、num、arr，并赋值了初始值。
-- 第2步在模板template中通过`{{}}`的方式绑定和显示在text组件的内容区中。即右边预览区显示的3行内容，显示了3个响应式变量的初始值。
-- 第3步点击按钮“update data”，触发`updateData()`，在这个方法里通过`this.`来访问响应式变量，给它们重新赋值。然后界面上3行内容会被自动更新为新值。
-
-示例 [详情](<!-- VUEJSON.E_component-instance.data_data-options.gitUrl -->)
-
-::: preview <!-- VUEJSON.E_component-instance.data_data-options.webUrl -->
-<!-- VUEJSON.E_component-instance.data_data-options.code -->
-:::
-
-data中的响应式变量，如需在script中使用，需通过 `this.xx` 的方式，比如上述的`this.str`。
-
 ### 组合式 API @composition-api
 
 组合式 API 没有 data 这种选项，而是通过 `ref`、`reactive` 方法来声明组件的响应式状态。
 
 这种定义方式更加灵活和简洁。
 
-建议把 `ref` 定义都写在开头，否则到处都写也不好找。
+建议把 `ref` 定义都写在开头，方便统一管理。
 
 示例 [详情](<!-- VUEJSON.E_component-instance.data_data-composition.gitUrl -->)
 
@@ -51,13 +32,13 @@ data中的响应式变量，如需在script中使用，需通过 `this.xx` 的
 
 使用 `ref()` 函数来定义一个响应式变量。
 
-需要给 `ref` 标注类型时，可通过泛型的写法，如：`ref<string>()`， 或使用 `as` 的写法。
+需要给 `ref` 标注类型时，在uts/ts中可通过泛型的写法，如：`ref<string>()`， 或使用 `as` 的写法。
 
-当然 uts 有一定的自动推导能力，对于特别简单的布尔值/数字/字符串的字面量，不写泛型或as，也可以自动推导类型。
+当然 uts/ts 有一定的自动推导能力，对于特别简单的布尔值/数字/字符串的字面量，不写泛型或as，也可以自动推导类型。
 
 `ref()` 接收参数，并将其包裹在一个带有 `.value` 属性的 `ref` 对象中返回。这个对象，
 
-- 在 uts 中取值时，需要使用 `.value`属性。
+- ref定义的响应式变量，在script代码中取值时，需要使用 `.value`属性。
 - 而在模板中使用 ref 时，不需要附加 `.value`（为了方便起见，在模板中使用时，ref 会自动解包，这样模板里的写法和选项式保持了一致）。
 
 如下示例中，
@@ -65,7 +46,7 @@ data中的响应式变量，如需在script中使用，需通过 `this.xx` 的
 - 通过ref定义了3个响应式变量：count1、count2、counter（注意是小写），并赋值了初始值。
 - 在模板template中通过`{{}}`的方式绑定和显示在text组件的内容区中。即右边预览区显示的3行内容，显示了3个响应式变量的初始值。
 - 点击按钮“increment”，触发`increment()`，在这个方法里通过`.value`属性给响应式变量自增。然后界面上3行内容会被自动更新为新值。
-<!-- TODO 为什么加2 -->
+
 示例 [详情](<!-- VUEJSON.E_reactivity.core_ref_ref.gitUrl -->)
 
 ::: preview <!-- VUEJSON.E_reactivity.core_ref_ref.webUrl -->
@@ -100,6 +81,28 @@ data中的响应式变量，如需在script中使用，需通过 `this.xx` 的
 <!-- VUEJSON.E_component-instance.define-expose_define-expose.code -->
 :::
 
+
+### 选项式 API @options-api
+
+选用选项式 API 时，会用 `data` 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数。
+Vue 将在创建新组件实例的时候调用此函数，并将函数返回的对象用响应式系统进行包装。此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的 `this`) 上。
+
+data需要特殊类型时，通过 as 来转换。
+
+如下示例中，
+- 首先在data的return中定义了响应式变量：str、num、arr，并赋值了初始值。
+- 第2步在模板template中通过`{{}}`的方式绑定和显示在text组件的内容区中。即右边预览区显示的3行内容，显示了3个响应式变量的初始值。
+- 第3步点击按钮“update data”，触发`updateData()`，在这个方法里通过`this.`来访问响应式变量，给它们重新赋值。然后界面上3行内容会被自动更新为新值。
+
+示例 [详情](<!-- VUEJSON.E_component-instance.data_data-options.gitUrl -->)
+
+::: preview <!-- VUEJSON.E_component-instance.data_data-options.webUrl -->
+<!-- VUEJSON.E_component-instance.data_data-options.code -->
+:::
+
+data中的响应式变量，如需在script中使用，需通过 `this.xx` 的方式，比如上述的`this.str`。
+
+
 ## 绑定变量 @bind-data
 
 ### 在模板里绑定 @bind-template-data
@@ -134,9 +137,9 @@ data中的响应式变量，如需在script中使用，需通过 `this.xx` 的
 
 单文件组件的 `<style>` 标签支持使用 `v-bind` CSS 函数将 CSS 的值链接到动态的组件状态
 
-这个语法同样也适用于 `<script setup>`，且支持 UTS 表达式 (需要用引号包裹起来)
+这个语法同样也适用于 `<script setup>`，且支持表达式 (需要用引号包裹起来)
 
-`v-bind` 也可在样式中使用，可以很方便的在 uts 中改变样式，如下所示：
+`v-bind` 也可在样式中使用，可以很方便的在 script 中改变样式，如下所示：
 
 示例 [详情](<!-- VUEJSON.E_directive.v-bind_v-bind-options.gitUrl -->)
 
@@ -152,7 +155,7 @@ data中的响应式变量，如需在script中使用，需通过 `this.xx` 的
 ## 定义方法 @methods
 
 使用选项式 API 时可以在 `methods` 选项中定义方法，这些方法可以在模板中使用\
-而使用组合式 API 时，可以直接在 `<script setup lang="uts">` 中定义方法
+而使用组合式 API 时，可以直接在 `<script setup>` 中定义方法
 
 定义方法之后，可以传递给子组件，子组件使用 `emit` 调用，也可以在 `script` 中直接使用
 

package/data/uni-app-x-docs/web/README.md

@@ -9,7 +9,7 @@
 web版默认有页面滚动；app平台vdom模式时没有页面滚动，但蒸汽模式时已经支持页面滚动了。所以从蒸汽开始，这点平台差异不再存在。
 
 - 与老uni-app x相比，uni-app x 编译到web平台时，有几处不同：
-1. 如果使用uts代码，会走uts2js逻辑，会注入UTSJSONObject。如果使用ts/js则无法使用UTSJSONObject。
+1. 如果使用uts代码，会走[uts2js](../uts/uts2js.md)逻辑，会注入UTSJSONObject。如果使用ts/js则无法使用UTSJSONObject。
 2. 重置了css，拉齐App布局引擎，比如统一使用flex布局。详见[css重置](../css/README.md#css-reset)
 
 ## web运行失败注意事项@faq
@@ -162,15 +162,11 @@ position: fixed定位时，web端为相对于整个浏览器页面进行定位
   height: 100px;
   background-color: #FF0000;
   left: 10px;
-  /* #ifdef WEB */
   /*
    * HBuilderX 4.52之前只能使用--window-top，不可使用--uni-safe-area-inset-top
+	 * App端蒸汽模式5.31+起支持calc
    */
   top: calc(--uni-safe-area-inset-top + 10px);
-  /* #endif */
-  /* #ifdef APP */
-  top: 10px;  /* App端暂不支持calc */
-  /* #endif */
 }
 ```
 

package/data/uni-app-x-docs/web/ssr.md

@@ -43,18 +43,20 @@ export default defineConfig({
 
 **示例**
 
-```ts
+下面示例假设 `@/store/index.uts` 已导出 `useItemsStore`，包含按 ID 保存数据的 `items` 状态和异步 `fetchItem(id)` 方法。SSR 配置见下方 [Pinia](#pinia) 章节。
+
+```vue
 <template>
   <text v-if="item">{{ item.title }}</text>
   <text v-else>...</text>
 </template>
 
-<script setup lang="uts">
-  import { useStore } from 'vuex'
+<script setup lang="ts">
+  import { useItemsStore } from '@/store/index.uts'
 
   const id = 1 // 模拟ID
-  const store = useStore()
-  const item = computed(() => store.state.items[id])
+  const store = useItemsStore()
+  const item = computed(() => store.items[id])
 
   onMounted(() => { // 仅客户端执行的生命周期
     if (!item.value) { // 判断服务端是否已正常获取，若未获取，重新调用加载数据
@@ -67,7 +69,7 @@ export default defineConfig({
   })
 
   function fetchItem() {
-    return store.dispatch('fetchItem', id)
+    return store.fetchItem(id)
   }
 </script>
 ```
@@ -80,101 +82,35 @@ export default defineConfig({
 const categories = ssrRef(['c1', 'c2'], 'categories');
 ```
 
-#### vuex
+#### Pinia
 
-对于复杂的数据，如需保持云端客户端一致，建议使用vuex进行存储。下面是一个简单的示例：
+Pinia 的引入和 store 定义见[全局变量与状态管理](../tutorial/store.md#pinia)。SSR 时需为每次请求创建独立的 Pinia 实例，并返回以下 `store` 适配对象，以同步服务端和客户端状态：
 
 **main.uts**
 
 ```ts
 import { createSSRApp } from 'vue'
+import { createPinia } from 'pinia'
+import type { StateTree } from 'pinia'
 import App from './App.uvue'
-import createStore from './store'
+
 export function createApp() {
   const app = createSSRApp(App)
-
-  const store = createStore() // 创建 store
-  app.use(store)
+  const pinia = createPinia()
+  app.use(pinia)
 
   return {
     app,
-    store,// 必须返回 store
-  }
-}
-```
-
-**store/index.uts**
-
-```ts
-import { createStore } from 'vuex'
-
-// 模拟接口获取数据
-function fetchItem(id) {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve({
-        id,
-        title: 'title' + id,
-      })
-    }, 300)
-  })
-}
-
-export default () => {
-  return createStore({
-    state() {
-      return {
-        items: {},
-      }
-    },
-    actions: {
-      fetchItem({ commit }, id) {
-        return fetchItem(id).then((item) => {
-          commit('setItem', { id, item })
-        })
+    store: {
+      get state() {
+        return pinia.state.value
       },
-    },
-    mutations: {
-      setItem(state, { id, item }) {
-        state.items[id] = item
+      replaceState(state: Record<string, StateTree>) {
+        pinia.state.value = state
       },
     },
-  })
-}
-```
-
-**pages/index/index.uvue**
-
-```vue
-<template>
-  <text v-if="item">{{ item.title }}</text>
-  <text v-else>...</text>
-  <text>{{ JSON.stringify(categories) }}</text>
-</template>
-
-<script setup lang="uts">
-  import { ssrRef } from '@dcloudio/uni-app'
-  import { useStore } from 'vuex'
-
-  const categories = ssrRef(['c1', 'c2'], 'categories')
-  const id = 1 // 模拟ID
-  const store = useStore()
-  const item = computed(() => store.state.items[id])
-
-  onMounted(() => { // 仅客户端执行的生命周期
-    if (!item.value) { // 判断服务端是否已正常获取，若未获取，重新调用加载数据
-      fetchItem()
-    }
-  })
-
-  onServerPrefetch(async () => { // 服务端预取数据的生命周期
-    await fetchItem()
-  })
-
-  function fetchItem() {
-    return store.dispatch('fetchItem', id)
   }
-</script>
+}
 ```
 
 #### page-meta
@@ -278,7 +214,7 @@ uni-app-x内page-meta仅保留了存放head的功能，page-meta内的head节点
 
 ### 注意事项
 
-- 浏览器控制台提示如下警告，说明服务器和客户端渲染的结果不一致，检查模板绑定的属性是否使用了 `ssrRef`
+- 浏览器控制台提示如下警告，说明服务器和客户端渲染的结果不一致，检查模板绑定的状态是否通过 `ssrRef` 或上述 Pinia SSR 方式同步
 
 ```
 [Vue warn]: Hydration node mismatch:

package/data/uniappx/_sidebar.md

@@ -1,14 +1,11 @@
 * [概述](README.md)
 * [蒸汽模式](app-vapor.md)
+* benchmark
+  * [Android性能评测基准报告](benchmark/vapor-benchmark-android.md)
+  * [iOS性能评测基准报告](benchmark/vapor-benchmark-ios.md)
+  * [鸿蒙性能评测基准报告](benchmark/vapor-benchmark-harmony.md)
 * [项目](project.md)
 * [页面](page.md)
-* 教程
-	* Android VDOM模式注意
-		* [强类型下与js开发的差别](tutorial/codegap.md)
-		* [request联网教程](tutorial/request.md)
-	* [复杂列表开发指南](tutorial/stickynestlist.md)
-	* [全局变量与状态管理](tutorial/store.md)
-  * [几种组件标记的概念澄清](tutorial/idref.md)
 * web平台专题指南
   * [概述](web/README.md)
   * [跨域](tutorial/CORS.md)
@@ -51,8 +48,8 @@
     * [概述](tutorial/app-market.md)
     * [应用合规指南](tutorial/compliance.md)
     * [Android 16KB页面大小适配](tutorial/android-16kb.md)
-		* [iOS Appstore上架](https://uniapp.dcloud.net.cn/tutorial/ios-app-store.html)
-    * [iOS平台隐私清单](https://uniapp.dcloud.net.cn/tutorial/app-ios-privacyinfo.html)
+		* [iOS Appstore上架](tutorial/ios-app-store.md)
+    * [iOS平台隐私清单](tutorial/app-ios-privacyinfo.md)
 * 鸿蒙next平台专题指南
   * [概述](app-harmony/README.md)
   * [应用合规指南](tutorial/compliance.md)
@@ -65,35 +62,33 @@
     * [原生联调](native/debug/harmony.md)
 * 小程序平台专题指南
   * [概述](mp/README.md)
-  * [AI 开发模式接入指南](mp/mp-weixin-ai-develop.md)
   * [独立分包](mp/independent-subpackage.md)
-  * [组件和 WXS](mp/native-component-and-wxs.md)
+  * [组件和 WXS/SJS](mp/native-component-and-wxs.md)
   * [分包异步化](mp/miniprogram-subcontract-asynchrony.md)
-  * [适配 glass-easel](mp/mp-weixin-glass-easel.md)
+  * 微信
+    * [AI 开发模式接入指南](mp/mp-weixin-ai-develop.md)
+    * [适配 glass-easel](mp/mp-weixin-glass-easel.md)
 * 运行和调试
   * [Android/iOS运行](tutorial/run-app.md)
-  * [DevTools 审查元素、网络、存储](tutorial/debug/devtools.md)
+  * [鸿蒙运行](tutorial/harmony/runbuild.md)
   * [uts插件Android运行配置](tutorial/uts-development-android.md)
-  * [Android 审查元素](debug/android-inspector.md)
+  * [uts插件iOS运行配置](tutorial/uts-development-ios.md)
+  * [DevTools 审查元素、网络、存储](tutorial/debug/devtools.md)
   * [Android Debug断点](tutorial/uni-uts-debug.md)
+  * [iOS Debug断点](tutorial/uni-uts-debug-ios.md)
+  * [鸿蒙 Debug断点](tutorial/uni-uts-debug-harmony.md)
+  * [Android 审查元素](debug/android-inspector.md)
   * [Android 内存泄漏排查](tutorial/android-memoryleak.md)
-  * [uts插件iOS运行配置](tutorial/uts-development-ios.md)
-  * [uts插件iOS Debug](tutorial/uni-uts-debug-ios.md)
-  * [鸿蒙运行](tutorial/harmony/runbuild.md)
-  * [鸿蒙Debug断点](tutorial/uni-uts-debug-harmony.md)
-* [性能优化](performance.md)
 * [uni错误规范](err-spec.md)
 * [暗黑模式](api/theme-change.md)
 * [宽屏适配](adapt.md)
 * [国际化](i18n.md)
-* [源码和示例](sample.md)
+* [案例和开源示例](sample.md)
 * [兼容性表格导读](tutorial/compatibility.md)
-* benchmark
-  * [Android性能评测基准报告](benchmark/vapor-benchmark-android.md)
-  * [iOS性能评测基准报告](benchmark/vapor-benchmark-ios.md)
-  * [鸿蒙性能评测基准报告](benchmark/vapor-benchmark-harmony.md)
 * 选型参考
+	* [AI时代还需要跨平台框架吗？](./select/crossplatform-on-ai.md)
 	* [一文讲透原生渲染和自渲染](./select/native-render-and-self-render.md)
+	* [uni-app x和uni-app的对比](./uniappvsuniappx.md)
 * [uni-app 升级 uni-app x](uniapptox.md)
 * 安全专题
   * [综述](tutorial/safe.md)
@@ -132,8 +127,15 @@
     * [安卓、鸿蒙厂商推送配置](uni-push/vendor_config.md)
     * [谷歌FCM配置](uni-push/google-fcm.md)
   * [uni统计](https://uniapp.dcloud.net.cn/uni-stat-uniappx)
-* cursor/vscode插件
-  * [语言服务插件](tutorial/ls-plugin.md)
+* 教程
+	* [性能优化](performance.md)
+	* [复杂列表开发指南](tutorial/stickynestlist.md)
+	* [全局变量与状态管理](tutorial/store.md)
+  * [几种组件标记的概念澄清](tutorial/idref.md)
+	* Android VDOM模式注意
+		* [强类型下与js开发的差别](tutorial/codegap.md)
+		* [request联网教程](tutorial/request.md)
+	* [cursor/vscode插件语言服务插件](tutorial/ls-plugin.md)
   * [AI Rules/MCP](tutorial/rules_mcp.md)
 * 更新日志
   * [正式版](release.md)

package/data/uniappx/adapt.md

@@ -2,7 +2,7 @@
 
 uni-app-x 提供了两种宽屏适配方案，用于在不同屏幕尺寸下提供最佳的用户体验。本文档将详细介绍这两种方案的使用方法和实现思路。
 
-## 一、页面窗体级适配
+## 一、web页面窗体级适配
 
 > 只支持web端
 
@@ -29,7 +29,7 @@ uni-app-x 提供了两种宽屏适配方案，用于在不同屏幕尺寸下提
 ### 示例代码
 
 #### 配置示例
-leftWindow等配置，在pages.json里进行。[文档见](https://doc.dcloud.net.cn/uni-app-x/collocation/pagesjson.html#pages-topwindow)
+leftWindow等配置，在pages.json里进行。[文档](https://doc.dcloud.net.cn/uni-app-x/collocation/pagesjson.html#pages-topwindow)
 ```json
 {
 	"leftWindow": {
@@ -67,9 +67,9 @@ uni.$on('updateData', (data) => {
 ```
 
 #### 完整示例
-hello uni-app使用了topWindow和leftWindow，分为上左右3栏，[详见](https://hellouniappx.dcloud.net.cn/web#/)
+hello uni-app x 使用了topWindow和leftWindow，分为上左右3栏，[详见](https://hellouniappx.dcloud.net.cn/web#/)
 
-## 二、组件级适配 @component-adapt
+## 二、跨端组件级适配 @component-adapt
 
 > HBuilderX 4.71+ 全平台支持
 
@@ -113,6 +113,8 @@ const deviceType = uni.getDeviceInfo().deviceType
 isWideScreen.value = deviceType === 'pad' || deviceType === 'pc'
 ```
 
+也可以使用 [match-media组件](./component/match-media.md)。组件使用更简单，灵活性不如脚本编程。
+
 #### 布局实现
 宽屏窄屏模式，通过 CSS 类名动态控制布局，响应式设计适配不同屏幕尺寸