feat(chat): 添加skyline渲染支持及滚动优化

zydemail · zydemail · commit 58117534db3a · 2025-12-22T20:39:29.000+08:00
diff --git a/packages/pro-components/chat/attachments/_example/attachments.json b/packages/pro-components/chat/attachments/_example/attachments.json
@@ -1,5 +1,6 @@
 {
   "navigationBarTitleText": "Attachments 聊天附件",
+  "disableScroll": true,
   "usingComponents": {
     "base": "./base",
     "fileLoading": "./file-loading",
diff --git a/packages/pro-components/chat/attachments/_example/attachments.less b/packages/pro-components/chat/attachments/_example/attachments.less
@@ -0,0 +1,10 @@
+.skyline {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+
+  .scroll-view {
+    flex: 1;
+    height: 0;
+  }
+}
diff --git a/packages/pro-components/chat/attachments/_example/attachments.wxml b/packages/pro-components/chat/attachments/_example/attachments.wxml
@@ -1,5 +1,7 @@
-<t-navbar class="demo-navbar" title="Attachments" leftArrow />
-<view class="demo">
+<view class="skyline">
+  <t-navbar class="demo-navbar" title="Attachments" leftArrow />
+  <scroll-view scroll-y type="list" class="scroll-view">
+    <view class="demo">
   <t-demo-header
     title="Attachments 文件附件"
     desc="用于聊天场景中上传、预览和管理附件的组件。"
@@ -17,4 +19,6 @@
   <t-demo desc="文件类型加载状态">
     <fileLoading />
   </t-demo>
+    </view>
+  </scroll-view>
 </view>
diff --git a/packages/pro-components/chat/chat-content/_example/chat-content.json b/packages/pro-components/chat/chat-content/_example/chat-content.json
@@ -1,5 +1,6 @@
 {
   "navigationBarTitleText": "ChatContent",
+  "disableScroll": true,
   "usingComponents": {
     "base": "./base"
   }
diff --git a/packages/pro-components/chat/chat-content/_example/chat-content.less b/packages/pro-components/chat/chat-content/_example/chat-content.less
@@ -0,0 +1,10 @@
+.skyline {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+
+  .scroll-view {
+    flex: 1;
+    height: 0;
+  }
+}
diff --git a/packages/pro-components/chat/chat-content/_example/chat-content.wxml b/packages/pro-components/chat/chat-content/_example/chat-content.wxml
@@ -1,7 +1,11 @@
-<t-navbar class="demo-navbar" title="ChatContent" leftArrow />
-<view class="demo">
+<view class="skyline">
+  <t-navbar class="demo-navbar" title="ChatContent" leftArrow />
+  <scroll-view scroll-y type="list" class="scroll-view">
+    <view class="demo">
   <t-demo-header title="ChatContent 对话正文" desc="支持 markdown 格式的渲染。" notice="渲染框架支持情况：WebView" />
   <t-demo title="01 组件类型">
     <base />
   </t-demo>
+    </view>
+  </scroll-view>
 </view>
diff --git a/packages/pro-components/chat/chat-list/chat-list.wxml b/packages/pro-components/chat/chat-list/chat-list.wxml
@@ -12,6 +12,7 @@
     bindscroll="onScroll"
     bindscrolltoupper="handlerScrollToUpper"
     bindscrolltolower="handlerScrollToLower"
+    type="list"
   >
     <block wx:if="{{reverse}}">
       <view class="placeholder"></view>
diff --git a/packages/pro-components/chat/chat-markdown/_example/chat-markdown.json b/packages/pro-components/chat/chat-markdown/_example/chat-markdown.json
@@ -1,5 +1,6 @@
 {
   "navigationBarTitleText": "ChatMarkdown 聊天 Markdown 渲染器",
+  "disableScroll": true,
   "usingComponents": {
     "base": "./base",
     "list": "./list",
diff --git a/packages/pro-components/chat/chat-markdown/_example/chat-markdown.less b/packages/pro-components/chat/chat-markdown/_example/chat-markdown.less
@@ -15,3 +15,14 @@
 .demo-block__content {
   min-height: 200rpx;
 }
+
+.skyline {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+
+  .scroll-view {
+    flex: 1;
+    height: 0;
+  }
+}
diff --git a/packages/pro-components/chat/chat-markdown/_example/chat-markdown.wxml b/packages/pro-components/chat/chat-markdown/_example/chat-markdown.wxml
@@ -1,5 +1,7 @@
-<t-navbar class="demo-navbar" title="ChatMarkdown" leftArrow />
-<view class="demo">
+<view class="skyline">
+  <t-navbar class="demo-navbar" title="ChatMarkdown" leftArrow />
+  <scroll-view scroll-y type="list" class="scroll-view">
+    <view class="demo">
   <t-demo-header
     title="ChatMarkdown Markdown内容"
     desc="用于聊天场景中渲染 Markdown 格式文本的组件，内置 marked 解析器，支持多种 Markdown 语法和配置选项。"
@@ -23,4 +25,6 @@
   <t-demo title="04 引用">
     <refer />
   </t-demo>
+    </view>
+  </scroll-view>
 </view>
diff --git a/packages/pro-components/chat/chat-message/_example/chat-message.json b/packages/pro-components/chat/chat-message/_example/chat-message.json
@@ -1,5 +1,6 @@
 {
   "navigationBarTitleText": "ChatItem",
+  "disableScroll": true,
   "usingComponents": {
     "t-skeleton": "tdesign-miniprogram/skeleton/skeleton",
     "base": "./base",
diff --git a/packages/pro-components/chat/chat-message/_example/chat-message.less b/packages/pro-components/chat/chat-message/_example/chat-message.less
@@ -5,3 +5,14 @@
 .t-button:last-child {
   margin-right: 0;
 }
+
+.skyline {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+
+  .scroll-view {
+    flex: 1;
+    height: 0;
+  }
+}
diff --git a/packages/pro-components/chat/chat-message/_example/chat-message.wxml b/packages/pro-components/chat/chat-message/_example/chat-message.wxml
@@ -1,5 +1,7 @@
-<t-navbar class="demo-navbar" title="ChatMessage" leftArrow />
-<view class="demo">
+<view class="skyline">
+  <t-navbar class="demo-navbar" title="ChatMessage" leftArrow />
+  <scroll-view scroll-y type="list" class="scroll-view">
+    <view class="demo">
   <t-demo-header
     title="ChatMessage 对话消息体"
     desc="用于在聊天对话中显示单个消息项。它可以展示用户的头像、昵称、时间、聊天内容，支持多种消息状态和样式变体。"
@@ -23,4 +25,6 @@
   <t-demo title="03 组件样式" desc="气泡样式">
     <style-component />
   </t-demo>
+    </view>
+  </scroll-view>
 </view>
diff --git a/packages/pro-components/chat/chat-sender/_example/chat-sender.json b/packages/pro-components/chat/chat-sender/_example/chat-sender.json
@@ -1,5 +1,6 @@
 {
   "navigationBarTitleText": "ChatSender",
+  "disableScroll": true,
   "usingComponents": {
     "t-tabs": "tdesign-miniprogram/tabs/tabs",
     "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
diff --git a/packages/pro-components/chat/chat-sender/_example/chat-sender.less b/packages/pro-components/chat/chat-sender/_example/chat-sender.less
@@ -16,3 +16,14 @@
   margin-right: 0;
 }
 
+.skyline {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+
+  .scroll-view {
+    flex: 1;
+    height: 0;
+  }
+}
+
diff --git a/packages/pro-components/chat/chat-sender/_example/chat-sender.wxml b/packages/pro-components/chat/chat-sender/_example/chat-sender.wxml
@@ -1,5 +1,7 @@
-<t-navbar class="demo-navbar" title="ChatSender" leftArrow />
-<view class="demo">
+<view class="skyline">
+  <t-navbar class="demo-navbar" title="ChatSender" leftArrow />
+  <scroll-view scroll-y type="list" class="scroll-view">
+    <view class="demo">
   <t-demo-header
     title="ChatSender 对话输入"
     desc="用于 AI 聊天的输入框，可以扩展模型、多模态等能力。"
@@ -17,4 +19,6 @@
   <t-demo desc="文件引用">
     <file-citation />
   </t-demo>
+    </view>
+  </scroll-view>
 </view>
diff --git a/packages/pro-components/chat/chat-thinking/_example/chat-thinking.json b/packages/pro-components/chat/chat-thinking/_example/chat-thinking.json
@@ -1,5 +1,6 @@
 {
   "navigationBarTitleText": "ChatThinking 聊天思考状态",
+  "disableScroll": true,
   "usingComponents": {
     "base": "./base",
     "layout": "./layout",
diff --git a/packages/pro-components/chat/chat-thinking/_example/chat-thinking.less b/packages/pro-components/chat/chat-thinking/_example/chat-thinking.less
@@ -0,0 +1,10 @@
+.skyline {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+
+  .scroll-view {
+    flex: 1;
+    height: 0;
+  }
+}
diff --git a/packages/pro-components/chat/chat-thinking/_example/chat-thinking.wxml b/packages/pro-components/chat/chat-thinking/_example/chat-thinking.wxml
@@ -1,6 +1,7 @@
-<t-navbar class="demo-navbar" title="ChatThinking" leftArrow />
-
-<view class="demo">
+<view class="skyline">
+  <t-navbar class="demo-navbar" title="ChatThinking" leftArrow />
+  <scroll-view scroll-y type="list" class="scroll-view">
+    <view class="demo">
   <t-demo-header title="ChatThinking 思考过程" desc="用于展示思考过程的组件。" notice="渲染框架支持情况：WebView" />
   <t-demo title="01 组件类型" desc="支持多种加载动效类型，包括gradient、moving、dots">
     <base />
@@ -14,4 +15,6 @@
   <t-demo title="03 组件样式" desc="">
     <layout />
   </t-demo>
+    </view>
+  </scroll-view>
 </view>
diff --git a/packages/tdesign-miniprogram/example/app.json b/packages/tdesign-miniprogram/example/app.json
@@ -98,79 +98,127 @@
   "subpackages": [
     {
       "root": "pages/chat-list/",
-      "pages": ["chat-list"]
+      "pages": [
+        "chat-list"
+      ]
     },
     {
       "root": "pages/chat-content/",
-      "pages": ["chat-content"]
+      "pages": [
+        "chat-content"
+      ]
     },
     {
       "root": "pages/chat-actionbar/",
-      "pages": ["chat-actionbar"]
+      "pages": [
+        "chat-actionbar"
+      ]
     },
     {
       "root": "pages/chat-loading/",
-      "pages": ["chat-loading"]
+      "pages": [
+        "chat-loading"
+      ]
     },
     {
       "root": "pages/chat-thinking/",
-      "pages": ["chat-thinking"]
+      "pages": [
+        "chat-thinking"
+      ]
     },
     {
       "root": "pages/attachments/",
-      "pages": ["attachments"]
+      "pages": [
+        "attachments"
+      ]
     },
     {
       "root": "pages/chat-markdown/",
-      "pages": ["chat-markdown"]
+      "pages": [
+        "chat-markdown"
+      ]
     },
     {
       "root": "pages/chat-sender/",
-      "pages": ["chat-sender"]
+      "pages": [
+        "chat-sender"
+      ]
     },
     {
       "root": "pages/side-bar/",
-      "pages": ["side-bar", "base/index", "switch/index", "custom/index", "with-icon/index"]
+      "pages": [
+        "side-bar",
+        "base/index",
+        "switch/index",
+        "custom/index",
+        "with-icon/index"
+      ]
     },
     {
       "root": "pages/action-sheet/",
-      "pages": ["action-sheet"]
+      "pages": [
+        "action-sheet"
+      ]
     },
     {
       "root": "pages/avatar/",
-      "pages": ["avatar", "skyline/avatar"]
+      "pages": [
+        "avatar",
+        "skyline/avatar"
+      ]
     },
     {
       "root": "pages/calendar/",
-      "pages": ["calendar"]
+      "pages": [
+        "calendar"
+      ]
     },
     {
       "root": "pages/dialog/",
-      "pages": ["dialog", "skyline/dialog"]
+      "pages": [
+        "dialog",
+        "skyline/dialog"
+      ]
     },
     {
       "root": "pages/picker/",
-      "pages": ["picker", "skyline/picker"]
+      "pages": [
+        "picker",
+        "skyline/picker"
+      ]
     },
     {
       "root": "pages/rate/",
-      "pages": ["rate"]
+      "pages": [
+        "rate"
+      ]
     },
     {
       "root": "pages/swiper/",
-      "pages": ["swiper", "skyline/swiper"]
+      "pages": [
+        "swiper",
+        "skyline/swiper"
+      ]
     },
     {
       "root": "pages/swipe-cell/",
-      "pages": ["swipe-cell"]
+      "pages": [
+        "swipe-cell"
+      ]
     },
     {
       "root": "pages/tree-select/",
-      "pages": ["tree-select"]
+      "pages": [
+        "tree-select"
+      ]
     },
     {
       "root": "pages/indexes/",
-      "pages": ["indexes", "base/index", "custom/index"]
+      "pages": [
+        "indexes",
+        "base/index",
+        "custom/index"
+      ]
     }
   ],
   "themeLocation": "theme.json",
@@ -191,6 +239,9 @@
   },
   "sitemapLocation": "sitemap.json",
   "lazyCodeLoading": "requiredComponents",
+  "renderer": "skyline",
+  "componentFramework": "glass-easel",
+  "disableScroll": true,
   "rendererOptions": {
     "skyline": {
       "disableABTest": true,

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"navigationBarTitleText": "Attachments 聊天附件",`
	`3`	`+ "disableScroll": true,`
`3`	`4`	`"usingComponents": {`
`4`	`5`	`"base": "./base",`
`5`	`6`	`"fileLoading": "./file-loading",`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"navigationBarTitleText": "ChatContent",`
	`3`	`+ "disableScroll": true,`
`3`	`4`	`"usingComponents": {`
`4`	`5`	`"base": "./base"`
`5`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@`
`12`	`12`	`bindscroll="onScroll"`
`13`	`13`	`bindscrolltoupper="handlerScrollToUpper"`
`14`	`14`	`bindscrolltolower="handlerScrollToLower"`
	`15`	`+ type="list"`
`15`	`16`	`>`
`16`	`17`	`<block wx:if="{{reverse}}">`
`17`	`18`	`<view class="placeholder"></view>`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"navigationBarTitleText": "ChatMarkdown 聊天 Markdown 渲染器",`
	`3`	`+ "disableScroll": true,`
`3`	`4`	`"usingComponents": {`
`4`	`5`	`"base": "./base",`
`5`	`6`	`"list": "./list",`