-
Notifications
You must be signed in to change notification settings - Fork 325
chore(Chat): support skyline render #4151
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
anlyyao
wants to merge
27
commits into
develop
Choose a base branch
from
feature/chat-skyline
base: develop
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+578
−247
Open
Changes from all commits
Commits
Show all changes
27 commits
Select commit
Hold shift + click to select a range
5811753
feat(chat): 添加skyline渲染支持及滚动优化
zydemail dcb6615
feat: 增加chat-sender对skyline渲染模式的支持
goldjunkrat 0cd7982
Feature/thinking skyline fix (#4143)
zhangjiaoalice 14b2ab5
fix: 图片示例样式调整
mimaoxiao 6bff515
fix: agent示例样式调整
mimaoxiao 98ec922
fix: skyline样式调整
mimaoxiao 504034f
fix: attachments在skyline模式下loading样式为spinner
waiterxiaoyy 2284d80
feat: 横向滚动计算高度
mimaoxiao 4475296
feat: 横向滚动计算高度
mimaoxiao 9d707ca
feat: 样式调整
mimaoxiao 1f7b564
feat(chat): 添加skyline渲染支持及滚动优化
zydemail e1698d9
feat: 增加chat-sender对skyline渲染模式的支持
goldjunkrat d06124d
Feature/thinking skyline fix (#4143)
zhangjiaoalice cf58b74
fix: 图片示例样式调整
mimaoxiao 7b29df5
fix: agent示例样式调整
mimaoxiao 8e148c1
fix: skyline样式调整
mimaoxiao 907dd09
fix: attachments在skyline模式下loading样式为spinner
waiterxiaoyy f96aa92
feat: 横向滚动计算高度
mimaoxiao df72d7c
feat: 横向滚动计算高度
mimaoxiao 0e4e8e5
feat: 样式调整
mimaoxiao 81ed772
chore(ChatList): support skyline render
anlyyao 8c2e411
fix: 移除分享按钮边框
zydemail 29a5844
fix: 对话里的图片是横向，附件是纵向
zydemail 201435a
fix: 去掉组件源码里的isSkyline
zydemail a59258a
Merge branch 'feature/chat-skyline' of https://github.com/Tencent/tde…
mimaoxiao c4006fb
feat: 根据 isSkyline 动态切换加载动画主题
zydemail 3c0fb26
Merge branch 'feature/chat-skyline' of https://github.com/Tencent/tde…
mimaoxiao File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
packages/pro-components/chat/attachments/_example/attachments.json
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| .skyline { | ||
| display: flex; | ||
| flex-direction: column; | ||
| height: 100vh; | ||
|
|
||
| .scroll-view { | ||
| flex: 1; | ||
| height: 0; | ||
| } | ||
| } | ||
42 changes: 23 additions & 19 deletions
42
packages/pro-components/chat/attachments/_example/attachments.wxml
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,24 @@ | ||
| <t-navbar class="demo-navbar" title="Attachments" leftArrow placeholder /> | ||
| <view class="demo"> | ||
| <t-demo-header | ||
| title="Attachments 文件附件" | ||
| desc="用于聊天场景中上传、预览和管理附件的组件。" | ||
| notice="渲染框架支持情况：WebView" | ||
| /> | ||
| <t-demo title="01 组件类型" desc="图片类型"> | ||
| <base /> | ||
| </t-demo> | ||
| <t-demo desc="文件类型"> | ||
| <file /> | ||
| </t-demo> | ||
| <t-demo title="02 组件状态" desc="图片类型加载状态"> | ||
| <imageLoading /> | ||
| </t-demo> | ||
| <t-demo desc="文件类型加载状态"> | ||
| <fileLoading /> | ||
| </t-demo> | ||
| <view class="skyline"> | ||
| <t-navbar class="demo-navbar" title="Attachments" leftArrow placeholder /> | ||
| <scroll-view scroll-y type="list" class="scroll-view"> | ||
| <view class="demo"> | ||
| <t-demo-header | ||
| title="Attachments 文件附件" | ||
| desc="用于聊天场景中上传、预览和管理附件的组件。" | ||
| notice="渲染框架支持情况：WebView" | ||
| /> | ||
| <t-demo title="01 组件类型" desc="图片类型"> | ||
| <base /> | ||
| </t-demo> | ||
| <t-demo desc="文件类型"> | ||
| <file /> | ||
| </t-demo> | ||
| <t-demo title="02 组件状态" desc="图片类型加载状态"> | ||
| <imageLoading /> | ||
| </t-demo> | ||
| <t-demo desc="文件类型加载状态"> | ||
| <fileLoading /> | ||
| </t-demo> | ||
| </view> | ||
| </scroll-view> | ||
| </view> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
176 changes: 111 additions & 65 deletions
176
packages/pro-components/chat/attachments/attachments.wxml
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1,121 @@ | ||
| <wxs src="./attachments.wxs" module="_this" /> | ||
| <wxs src="../../../components/common/utils.wxs" module="_" /> | ||
|
|
||
| <!-- 图片文件模板 --> | ||
| <template name="image-item"> | ||
| <view class="file-image {{classPrefix}}__file {{removable ? classPrefix + '__file--removable' : ''}}"> | ||
| <block wx:if="{{item.status==='pending' || item.status==='fail' || item.status==='error'}}"> | ||
| <view class="{{item.status}} {{classPrefix}}__file--{{item.status}}"> | ||
| <t-loading theme="{{isSkyline ? 'spinner' : 'circular'}}" size="48rpx" /> | ||
| </view> | ||
| </block> | ||
| <block wx:else> | ||
| <image | ||
| class="image" | ||
| src="{{item.url}}" | ||
| mode="{{_this.getImageMode(item)}}" | ||
| lazy-load="false" | ||
| style="{{inChat ? _this.imageStyle(item) : ''}}" | ||
| bindload="onImageLoad" | ||
| ></image> | ||
| </block> | ||
| <view wx:if="{{removable}}" class="{{classPrefix}}__remove"> | ||
| <t-icon data-index="{{index}}" name="multiply" size="16px" catchtap="onRemoveTap" /> | ||
| </view> | ||
| </view> | ||
| </template> | ||
|
|
||
| <!-- 普通文件模板 --> | ||
| <template name="file-item"> | ||
| <view class="file {{classPrefix}}__file {{removable ? classPrefix + '__file--removable' : ''}}"> | ||
| <view class="image"> | ||
| <block wx:if="{{item.status==='pending'}}"> | ||
| <view class="loading {{classPrefix}}__file--pending"> | ||
| <t-loading theme="{{isSkyline ? 'spinner' : 'circular'}}" size="48rpx" /> | ||
| </view> | ||
| </block> | ||
| <block wx:elif="{{item.status==='fail'}}"> | ||
| <view class="fail {{classPrefix}}__file--fail"> | ||
| <t-loading theme="{{isSkyline ? 'spinner' : 'circular'}}" size="48rpx" /> | ||
| </view> | ||
| </block> | ||
| <block wx:elif="{{item.status==='error'}}"> | ||
| <view class="error {{classPrefix}}__file--error"> | ||
| <t-loading theme="{{isSkyline ? 'spinner' : 'circular'}}" size="48rpx" /> | ||
| </view> | ||
| </block> | ||
| <block wx:else> | ||
| <t-icon name="{{item.fileIcon.name}}" color="{{item.fileIcon.color}}" size="48rpx"></t-icon> | ||
| </block> | ||
| </view> | ||
| <view class="{{classPrefix}}__content"> | ||
| <view class="{{classPrefix}}__title">{{item.name}}</view> | ||
| <view wx:if="{{item.status==='pending'}}" class="{{classPrefix}}__desc">上传中...{{item.progress || 0+"%"}}</view> | ||
| <view wx:elif="{{item.status==='fail'}}" class="{{classPrefix}}__desc">上传失败</view> | ||
| <view wx:elif="{{item.status==='error'}}" class="{{classPrefix}}__desc">{{item.errorMessage}}</view> | ||
| <view wx:else class="{{classPrefix}}__desc">{{item.desc}}</view> | ||
| </view> | ||
| <view wx:if="{{removable}}" class="{{classPrefix}}__remove"> | ||
| <t-icon data-index="{{index}}" name="multiply" size="16px" catchtap="onRemoveTap" /> | ||
| </view> | ||
| </view> | ||
| </template> | ||
|
|
||
| <view | ||
| class="{{classPrefix}} {{[inChat ? classPrefix + '--chatting' : '', _this.getFileTypeClass(inChat, files)]}}" | ||
| style="{{_._style([style, customStyle])}}" | ||
| > | ||
| <view class="{{classPrefix}}__left"> | ||
| <view class="{{classPrefix}}__scrollable scroll-x"> | ||
| <block wx:for="{{files}}" wx:for-item="item" wx:for-index="index" wx:key="index"> | ||
| <view class="{{classPrefix}}__files" bindtap="onFileWrapTap" data-index="{{index}}"> | ||
| <block wx:if="{{item.fileType==='image'}}"> | ||
| <view class="file-image {{classPrefix}}__file {{removable ? classPrefix + '__file--removable' : ''}}"> | ||
| <block wx:if="{{item.status==='pending' || item.status==='fail' || item.status==='error'}}"> | ||
| <view class="{{item.status}} {{classPrefix}}__file--{{item.status}}"> | ||
| <t-loading theme="circular" size="48rpx" /> | ||
| </view> | ||
| </block> | ||
| <block wx:else> | ||
| <image | ||
| class="image" | ||
| src="{{item.url}}" | ||
| mode="{{_this.getImageMode(item)}}" | ||
| lazy-load="false" | ||
| style="{{inChat ? _this.imageStyle(item) : ''}}" | ||
| ></image> | ||
| </block> | ||
| <view wx:if="{{removable}}" class="{{classPrefix}}__remove"> | ||
| <t-icon data-index="{{index}}" name="multiply" size="16px" catchtap="onRemoveTap" /> | ||
| </view> | ||
| </view> | ||
| </block> | ||
| <block wx:else> | ||
| <view class="file {{classPrefix}}__file {{removable ? classPrefix + '__file--removable' : ''}}"> | ||
| <view class="image"> | ||
| <block wx:if="{{item.status==='pending'}}"> | ||
| <view class="loading {{classPrefix}}__file--pending"> | ||
| <t-loading theme="circular" size="48rpx" /> | ||
| </view> | ||
| </block> | ||
| <block wx:elif="{{item.status==='fail'}}"> | ||
| <view class="fail {{classPrefix}}__file--fail"> | ||
| <t-loading theme="circular" size="48rpx" /> | ||
| </view> | ||
| </block> | ||
| <block wx:elif="{{item.status==='error'}}"> | ||
| <view class="error {{classPrefix}}__file--error"> | ||
| <t-loading theme="circular" size="48rpx" /> | ||
| </view> | ||
| </block> | ||
| <block wx:else> | ||
| <t-icon name="{{item.fileIcon.name}}" color="{{item.fileIcon.color}}" size="48rpx"></t-icon> | ||
| </block> | ||
| </view> | ||
| <view class="{{classPrefix}}__content"> | ||
| <view class="{{classPrefix}}__title">{{item.name}}</view> | ||
| <block> | ||
| <view wx:if="{{item.status==='pending'}}" class="{{classPrefix}}__desc" | ||
| >上传中...{{item.progress || 0+"%"}}</view | ||
| > | ||
| <view wx:elif="{{item.status==='fail'}}" class="{{classPrefix}}__desc">上传失败</view> | ||
| <view wx:elif="{{item.status==='error'}}" class="{{classPrefix}}__desc">{{item.errorMessage}}</view> | ||
| <view wx:else class="{{classPrefix}}__desc">{{item.desc}}</view> | ||
| </block> | ||
| </view> | ||
| <view wx:if="{{removable}}" class="{{classPrefix}}__remove"> | ||
| <t-icon data-index="{{index}}" name="multiply" size="16px" catchtap="onRemoveTap" /> | ||
| </view> | ||
| </view> | ||
| </block> | ||
| </view> | ||
| </block> | ||
| </view> | ||
| <!-- 对话模式：图片横向滚动，文件纵向排列 --> | ||
| <block wx:if="{{inChat}}"> | ||
| <!-- 图片横向滚动区域 --> | ||
| <scroll-view | ||
| wx:if="{{_this.hasImageFile(files)}}" | ||
| class="{{classPrefix}}__scrollable scroll-x" | ||
| scroll-x | ||
| style="height: {{scrollViewHeight}}px" | ||
| > | ||
| <block wx:for="{{files}}" wx:for-item="item" wx:for-index="index" wx:key="index"> | ||
| <view | ||
| wx:if="{{item.fileType==='image'}}" | ||
| class="{{classPrefix}}__files" | ||
| bindtap="onFileWrapTap" | ||
| data-index="{{index}}" | ||
| > | ||
| <template is="image-item" data="{{item, index, classPrefix, removable, inChat}}" /> | ||
| </view> | ||
| </block> | ||
| </scroll-view> | ||
|
|
||
| <!-- 非图片文件纵向排列 --> | ||
| <view class="{{classPrefix}}__files-container"> | ||
| <block wx:for="{{files}}" wx:for-item="item" wx:for-index="index" wx:key="index"> | ||
| <view | ||
| wx:if="{{item.fileType!=='image'}}" | ||
| class="{{classPrefix}}__files" | ||
| bindtap="onFileWrapTap" | ||
| data-index="{{index}}" | ||
| > | ||
| <template is="file-item" data="{{item, index, classPrefix, removable}}" /> | ||
| </view> | ||
| </block> | ||
| </view> | ||
| </block> | ||
|
|
||
| <!-- 非对话模式：所有文件横向滚动 --> | ||
| <block wx:else> | ||
| <scroll-view class="{{classPrefix}}__scrollable scroll-x" scroll-x style="height: {{scrollViewHeight}}px"> | ||
| <block wx:for="{{files}}" wx:for-item="item" wx:for-index="index" wx:key="index"> | ||
| <view class="{{classPrefix}}__files" bindtap="onFileWrapTap" data-index="{{index}}"> | ||
| <template | ||
| wx:if="{{item.fileType==='image'}}" | ||
| is="image-item" | ||
| data="{{item, index, classPrefix, removable, inChat}}" | ||
| /> | ||
| <template wx:else is="file-item" data="{{item, index, classPrefix, removable}}" /> | ||
| </view> | ||
| </block> | ||
| </scroll-view> | ||
| </block> | ||
| </view> | ||
| </view> |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
与全局样式文件内容重复，可移除