From 7a0e5244d8ee29a770ea6de446de513de9f83f2f Mon Sep 17 00:00:00 2001 From: nekowu <1142809915@qq.com> Date: Fri, 21 Nov 2025 11:14:44 +0800 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20actionbar=E9=95=BF=E6=8C=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chat/chat-actionbar/chat-actionbar.less | 71 ++++++++++++++---- .../chat/chat-actionbar/chat-actionbar.ts | 32 +++++++- .../chat/chat-actionbar/chat-actionbar.wxml | 14 ++-- .../chat/chat-actionbar/type.ts | 2 +- .../chat/chat-list/_example/base/index.js | 73 +++++++++++++------ .../chat/chat-list/_example/base/index.wxml | 8 +- .../chat/chat-message/chat-message.ts | 2 +- 7 files changed, 154 insertions(+), 48 deletions(-) diff --git a/packages/pro-components/chat/chat-actionbar/chat-actionbar.less b/packages/pro-components/chat/chat-actionbar/chat-actionbar.less index 05d6960a2..c9aefd0be 100644 --- a/packages/pro-components/chat/chat-actionbar/chat-actionbar.less +++ b/packages/pro-components/chat/chat-actionbar/chat-actionbar.less @@ -3,14 +3,18 @@ @chat-actionbar: ~'@{prefix}-chat-actionbar'; @chat-actionbar-padding: var(--chat-actionbar-padding, 0); -@chat-actionbar-item-padding: var(--chat-actionbar-item-padding, 16rpx 28rpx); +@chat-actionbar-item-padding: var(--chat-actionbar-item-padding, 4rpx 28rpx); +@chat-actionbar-item-margin: 12rpx 0; @chat-actionbar-item-color: @text-color-primary; @chat-actionbar-item-active: @brand-color; // TODO: 长按弹出层样式 -@chat-actionbar-popover-background: @mask-active; -@chat-actionbar-popover-radius: 32rpx; -@chat-actionbar-popover-padding: 45rpx; +@chat-actionbar-popover-background: rgba(0, 0, 0, 0.9); +@chat-actionbar-popover-radius: 6rpx; +@chat-actionbar-popover-padding: 40rpx 16rpx; +@chat-actionbar-popover-padding-tri-width: 24rpx; +@chat-actionbar-popover-padding-tri-height: 10rpx; +@chat-actionbar-popover-item-color: @font-white-1; .@{chat-actionbar} { display: flex; @@ -25,6 +29,53 @@ justify-content: flex-end; } + // 弹出层 + &--popover { + position: fixed; + display: none; + padding: @chat-actionbar-popover-padding; + color: @font-white-1; + background-color: @chat-actionbar-popover-background; + border-radius: @chat-actionbar-popover-radius; + + // 顶部三角形 + &::before { + content: ''; + position: absolute; + top: calc(@chat-actionbar-popover-padding-tri-height * -2); + left: 50%; + transform: translateX(-50%); + width: 0; + height: 0; + border-left: @chat-actionbar-popover-padding-tri-width solid transparent; + border-right: @chat-actionbar-popover-padding-tri-width solid transparent; + border-bottom: calc(@chat-actionbar-popover-padding-tri-height * 2) solid @chat-actionbar-popover-background; + } + + &.popover-visible { + display: block; + } + + .@{chat-actionbar}__inner { + background-color: unset; + border: none; + + &--column { + gap: 8rpx; + } + } + + .@{chat-actionbar}__item--popover { + color: #fff; + background-color: unset; + padding: 0; + font-size: 28rpx; + line-height: 42rpx; + width: 128rpx; + text-align: center; + } + } + // 内部容器 &__inner { background-color: @bg-color-secondarycontainer; @@ -42,14 +93,6 @@ align-items: center; justify-content: space-between; } - - // 弹出层 - &--popover { - padding: @chat-actionbar-popover-padding; - background-color: @chat-actionbar-popover-background; - border-radius: @chat-actionbar-popover-radius; - color: @font-white-1; - } } // 左侧内容 @@ -62,8 +105,8 @@ // 操作项 &__item { color: @chat-actionbar-item-color; - margin: 12rpx 0; - padding: 4rpx 28rpx; + margin: @chat-actionbar-item-margin; + padding: @chat-actionbar-item-padding; border-right: 2rpx solid @component-stroke; background-color: unset; outline: none; diff --git a/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts b/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts index 2a8a560eb..148e83708 100644 --- a/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts +++ b/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts @@ -17,6 +17,7 @@ export default class ChatActionbar extends SuperComponent { actions: [], classPrefix: name, pComment: '', + computedPlacement: '', iconMap: { good: 'thumb-up', bad: 'thumb-down', @@ -28,13 +29,12 @@ export default class ChatActionbar extends SuperComponent { good: 'thumb-up-filled', bad: 'thumb-down-filled', }, + popoverPosition: '', }; observers = { comment(newVal) { - this.setData({ - pComment: newVal || '', - }); + this.setPComment(newVal); }, 'actionBar, pComment'() { this.setActions(); @@ -122,6 +122,12 @@ export default class ChatActionbar extends SuperComponent { }); }, + setComputedPlacement() { + this.setData({ + computedPlacement: this.properties.placement || 'start', + }); + }, + setActions() { const baseActions = []; if (Array.isArray(this.properties.actionBar)) { @@ -143,6 +149,23 @@ export default class ChatActionbar extends SuperComponent { actions: baseActions, }); }, + + setPComment(newVal) { + this.setData({ + pComment: newVal || '', + }); + }, + + showPopover(str) { + const width = (this.data.actions.length * 128 + (this.data.actions.length - 1) * 8 + 16 * 2) / 2; + this.setData({ + popoverPosition: `${str};margin-left:-${width}rpx`, + }); + }, + + hidePopover() { + this.setData({ popoverPosition: '' }); + }, }; lifetimes = { @@ -150,6 +173,9 @@ export default class ChatActionbar extends SuperComponent { this.data.filterSpecialChars = this.filterSpecialChars.bind(this); this.data.handleActionClick = this.handleActionClick.bind(this); this.data.handleCopy = this.handleCopy.bind(this); + this.data.showPopover = this.showPopover.bind(this); + this.data.hidePopover = this.hidePopover.bind(this); + this.data.setPComment = this.setPComment.bind(this); }, attached() { diff --git a/packages/pro-components/chat/chat-actionbar/chat-actionbar.wxml b/packages/pro-components/chat/chat-actionbar/chat-actionbar.wxml index af86db22b..84ab8158e 100644 --- a/packages/pro-components/chat/chat-actionbar/chat-actionbar.wxml +++ b/packages/pro-components/chat/chat-actionbar/chat-actionbar.wxml @@ -1,11 +1,13 @@ - + @@ -13,22 +15,24 @@ + {{item.name}} diff --git a/packages/pro-components/chat/chat-actionbar/type.ts b/packages/pro-components/chat/chat-actionbar/type.ts index f600f0d52..fb609874a 100644 --- a/packages/pro-components/chat/chat-actionbar/type.ts +++ b/packages/pro-components/chat/chat-actionbar/type.ts @@ -59,6 +59,6 @@ export interface TdChatActionbarProps { */ placement?: { type: StringConstructor; - value?: 'start' | 'end' | 'space-around' | 'space-between'; + value?: 'start' | 'end' | 'space-around' | 'space-between' | 'longpress'; }; } diff --git a/packages/pro-components/chat/chat-list/_example/base/index.js b/packages/pro-components/chat/chat-list/_example/base/index.js index 0ee1a13b1..df5dfb09b 100644 --- a/packages/pro-components/chat/chat-list/_example/base/index.js +++ b/packages/pro-components/chat/chat-list/_example/base/index.js @@ -40,20 +40,20 @@ Component({ role: 'assistant', status: 'complete', content: [ - { - type: 'text', - data: '它叫 McMurdo Station ATM,是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。', - }, - ], + { + type: 'text', + data: '它叫 McMurdo Station ATM,是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。', + }, + ], }, { - role: 'user', - content: [ - { - type: 'text', - data: '牛顿第一定律是否适用于所有参考系?', - }, - ], + role: 'user', + content: [ + { + type: 'text', + data: '牛顿第一定律是否适用于所有参考系?', + }, + ], }, ], value: '', // 输入框的值 @@ -62,6 +62,7 @@ Component({ inputStyle: '', // 输入框样式 contentHeight: '100vh', // 内容高度 animation: 'dots', + activePopover: '', }, methods: { @@ -122,7 +123,7 @@ Component({ // 模拟助手回复 simulateAssistantReply() { - this.setData({ loading: true}); + this.setData({ loading: true }); // 请求中 const assistantMessage = { role: 'assistant', @@ -141,15 +142,15 @@ Component({ const that = this; wx.nextTick(() => { fetchStream(mockData, { - success(result) { - // 生文中 - that.data.chatList[0].status = 'streaming'; - if (!that.data.loading) return; - that.data.chatList[0].content[0].data += result; - that.setData({ - chatList: that.data.chatList, - }); - }, + success(result) { + // 生文中 + that.data.chatList[0].status = 'streaming'; + if (!that.data.loading) return; + that.data.chatList[0].content[0].data += result; + that.setData({ + chatList: that.data.chatList, + }); + }, complete() { that.data.chatList[0].status = 'complete'; that.setData({ @@ -194,6 +195,34 @@ Component({ theme: 'success', }); }, + showPopover(e) { + const { e: event, id } = e.detail; + const child = this.selectComponent('.popover-actionbar'); + const actionbar = this.selectComponent(`#actionbar-${id}`); + if (child) { + this.setData({ + activePopover: id, + }); + child.__data__.setPComment(actionbar.__data__.pComment); + child.__data__.showPopover(`top:${event.detail.y}px;left:${event.detail.x}px`); + } + }, + hidePopover() { + const child = this.selectComponent('.popover-actionbar'); + if (child) { + child.__data__.hidePopover(); + } + }, + handlePopoverAction(e) { + const { name } = e.detail; + + this.handleAction(e); + if (name === 'good' || name === 'bad') { + const actionbar = this.selectComponent(`#actionbar-${this.data.activePopover}`); + const child = this.selectComponent('.popover-actionbar'); + actionbar.__data__.setPComment(child.__data__.pComment); + } + }, }, lifetimes: { attached: function () { diff --git a/packages/pro-components/chat/chat-list/_example/base/index.wxml b/packages/pro-components/chat/chat-list/_example/base/index.wxml index 9dc4cfa35..128d3c35f 100644 --- a/packages/pro-components/chat/chat-list/_example/base/index.wxml +++ b/packages/pro-components/chat/chat-list/_example/base/index.wxml @@ -1,7 +1,8 @@ - + + diff --git a/packages/pro-components/chat/chat-message/chat-message.ts b/packages/pro-components/chat/chat-message/chat-message.ts index 8fbb36542..3fc91ea25 100644 --- a/packages/pro-components/chat/chat-message/chat-message.ts +++ b/packages/pro-components/chat/chat-message/chat-message.ts @@ -43,7 +43,7 @@ export default class ChatMessage extends SuperComponent { methods = { handleLongPress(e) { - this.triggerEvent('longpress', { + this.triggerEvent('message-longpress', { e, id: this.data.chatId, }); From 6017a246ceeabb5da1b7017917446cedae74b10d Mon Sep 17 00:00:00 2001 From: nekowu <1142809915@qq.com> Date: Tue, 25 Nov 2025 11:31:27 +0800 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=E5=B0=BA=E5=AF=B8=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chat/chat-sender/_example/attachments/index.wxml | 4 ++-- .../pro-components/chat/chat-sender/_example/base/index.wxml | 4 ++-- .../chat/chat-sender/_example/content-citation/index.wxml | 4 ++-- .../chat/chat-sender/_example/file-citation/index.wxml | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/pro-components/chat/chat-sender/_example/attachments/index.wxml b/packages/pro-components/chat/chat-sender/_example/attachments/index.wxml index 6b5f70cb3..ad7d29793 100644 --- a/packages/pro-components/chat/chat-sender/_example/attachments/index.wxml +++ b/packages/pro-components/chat/chat-sender/_example/attachments/index.wxml @@ -32,11 +32,11 @@ > - + 深度思考 - + diff --git a/packages/pro-components/chat/chat-sender/_example/base/index.wxml b/packages/pro-components/chat/chat-sender/_example/base/index.wxml index 6cc3463ea..f3270e0a4 100644 --- a/packages/pro-components/chat/chat-sender/_example/base/index.wxml +++ b/packages/pro-components/chat/chat-sender/_example/base/index.wxml @@ -33,11 +33,11 @@ > - + 深度思考 - + diff --git a/packages/pro-components/chat/chat-sender/_example/content-citation/index.wxml b/packages/pro-components/chat/chat-sender/_example/content-citation/index.wxml index 380ac3f68..de25dc45e 100644 --- a/packages/pro-components/chat/chat-sender/_example/content-citation/index.wxml +++ b/packages/pro-components/chat/chat-sender/_example/content-citation/index.wxml @@ -41,11 +41,11 @@ - + 深度思考 - + diff --git a/packages/pro-components/chat/chat-sender/_example/file-citation/index.wxml b/packages/pro-components/chat/chat-sender/_example/file-citation/index.wxml index 3874da7d8..2baf2595b 100644 --- a/packages/pro-components/chat/chat-sender/_example/file-citation/index.wxml +++ b/packages/pro-components/chat/chat-sender/_example/file-citation/index.wxml @@ -49,11 +49,11 @@ - + 深度思考 - + From 8c138edb3d1c8b2bee633f085a8f511183908973 Mon Sep 17 00:00:00 2001 From: nekowu <1142809915@qq.com> Date: Mon, 1 Dec 2025 19:58:21 +0800 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E4=BC=A0?= =?UTF-8?q?=E5=8F=82=E5=BD=A2=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chat/chat-actionbar/chat-actionbar.ts | 7 +++- .../chat/chat-list/_example/base/index.js | 41 ++++++++++++++----- .../chat/chat-list/_example/base/index.wxml | 13 ++++-- .../chat/chat-message/chat-message.ts | 4 ++ 4 files changed, 50 insertions(+), 15 deletions(-) diff --git a/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts b/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts index 148e83708..e5b259e22 100644 --- a/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts +++ b/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts @@ -95,6 +95,7 @@ export default class ChatActionbar extends SuperComponent { this.triggerEvent('actions', { name, active: !isActive, + chatId: this.properties.chatId, }); } else if (name === 'bad') { const isActive = this.data.pComment === 'bad'; @@ -104,10 +105,12 @@ export default class ChatActionbar extends SuperComponent { this.triggerEvent('actions', { name, active: !isActive, + chatId: this.properties.chatId, }); } else { this.triggerEvent('actions', { name, + chatId: this.properties.chatId, }); } }, @@ -156,10 +159,10 @@ export default class ChatActionbar extends SuperComponent { }); }, - showPopover(str) { + showPopover(pos) { const width = (this.data.actions.length * 128 + (this.data.actions.length - 1) * 8 + 16 * 2) / 2; this.setData({ - popoverPosition: `${str};margin-left:-${width}rpx`, + popoverPosition: `top:${pos.y}px;left:${pos.x}px;margin-left:-${width}rpx`, }); }, diff --git a/packages/pro-components/chat/chat-list/_example/base/index.js b/packages/pro-components/chat/chat-list/_example/base/index.js index df5dfb09b..04667dace 100644 --- a/packages/pro-components/chat/chat-list/_example/base/index.js +++ b/packages/pro-components/chat/chat-list/_example/base/index.js @@ -45,6 +45,8 @@ Component({ data: '它叫 McMurdo Station ATM,是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。', }, ], + chatId: `${Date.now()}`, + comment: '', }, { role: 'user', @@ -62,7 +64,8 @@ Component({ inputStyle: '', // 输入框样式 contentHeight: '100vh', // 内容高度 animation: 'dots', - activePopover: '', + activePopoverId: '', // 当前打开悬浮actionbar的chatId + activePopoverComment: '', // 当前打开悬浮actionbar的comment }, methods: { @@ -135,6 +138,8 @@ Component({ ], avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png', status: 'pending', + chatId: `${Date.now()}`, + comment: '', }; this.setData({ chatList: [assistantMessage, ...this.data.chatList], @@ -164,7 +169,7 @@ Component({ }); }, handleAction(e) { - const { name, active, data } = e.detail; + const { name, active, data, chatId } = e.detail; let message = ''; switch (name) { @@ -194,17 +199,28 @@ Component({ message, theme: 'success', }); + + if (name === 'good' || name === 'bad') { + this.data.chatList.forEach((item) => { + if (item.chatId === chatId) { + item.comment = active ? name : ''; + } + }); + this.setData({ + chatList: this.data.chatList, + }); + } }, showPopover(e) { - const { e: event, id } = e.detail; + const { id, longPressPosition } = e.detail; const child = this.selectComponent('.popover-actionbar'); const actionbar = this.selectComponent(`#actionbar-${id}`); if (child) { this.setData({ - activePopover: id, + activePopoverId: id, + activePopoverComment: actionbar.__data__.pComment, }); - child.__data__.setPComment(actionbar.__data__.pComment); - child.__data__.showPopover(`top:${event.detail.y}px;left:${event.detail.x}px`); + child.__data__.showPopover(longPressPosition); } }, hidePopover() { @@ -214,13 +230,18 @@ Component({ } }, handlePopoverAction(e) { - const { name } = e.detail; + const { name, active } = e.detail; this.handleAction(e); if (name === 'good' || name === 'bad') { - const actionbar = this.selectComponent(`#actionbar-${this.data.activePopover}`); - const child = this.selectComponent('.popover-actionbar'); - actionbar.__data__.setPComment(child.__data__.pComment); + this.data.chatList.forEach((item) => { + if (item.chatId === this.data.activePopoverId) { + item.comment = active ? name : ''; + } + }); + this.setData({ + chatList: this.data.chatList, + }); } }, }, diff --git a/packages/pro-components/chat/chat-list/_example/base/index.wxml b/packages/pro-components/chat/chat-list/_example/base/index.wxml index 128d3c35f..19f797fc3 100644 --- a/packages/pro-components/chat/chat-list/_example/base/index.wxml +++ b/packages/pro-components/chat/chat-list/_example/base/index.wxml @@ -2,7 +2,7 @@ - + diff --git a/packages/pro-components/chat/chat-message/chat-message.ts b/packages/pro-components/chat/chat-message/chat-message.ts index 3fc91ea25..9f3337199 100644 --- a/packages/pro-components/chat/chat-message/chat-message.ts +++ b/packages/pro-components/chat/chat-message/chat-message.ts @@ -46,6 +46,10 @@ export default class ChatMessage extends SuperComponent { this.triggerEvent('message-longpress', { e, id: this.data.chatId, + longPressPosition: { + x: e.detail.x, + y: e.detail.y, + }, }); }, setShowAvatar() { From e87a81010305d106cd02e8b91925581c88a366d2 Mon Sep 17 00:00:00 2001 From: nekowu <1142809915@qq.com> Date: Mon, 1 Dec 2025 20:19:45 +0800 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E5=AE=9E?= =?UTF-8?q?=E7=8E=B0=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chat/chat-actionbar/README.md | 2 +- .../chat/chat-list/_example/base/index.js | 23 ++++++++----------- .../chat/chat-message/README.md | 2 +- 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/packages/pro-components/chat/chat-actionbar/README.md b/packages/pro-components/chat/chat-actionbar/README.md index 8b8e0fe4a..bc21732c2 100644 --- a/packages/pro-components/chat/chat-actionbar/README.md +++ b/packages/pro-components/chat/chat-actionbar/README.md @@ -58,4 +58,4 @@ placement | String | start | 【实验】操作栏位置。可选项:start/end 名称 | 参数 | 描述 -- | -- | -- -actions | `(detail: {name: string, active: boolean})` | 点击点赞,点踩,复制,分享,重新生成按钮时触发发 +actions | `(detail: {name: string, active: boolean, chatId: string})` | 点击点赞,点踩,复制,分享,重新生成按钮时触发发 diff --git a/packages/pro-components/chat/chat-list/_example/base/index.js b/packages/pro-components/chat/chat-list/_example/base/index.js index 04667dace..b6f456830 100644 --- a/packages/pro-components/chat/chat-list/_example/base/index.js +++ b/packages/pro-components/chat/chat-list/_example/base/index.js @@ -1,6 +1,12 @@ import Toast from 'tdesign-miniprogram/toast'; import { getNavigationBarHeight } from '../../../utils/utils'; +let uniqueId = 0; +const getUniqueKey = () => { + uniqueId += 1; + return `key-${uniqueId}`; +}; + const mockData = `南极的自动提款机并没有一个特定的专属名称,但历史上确实有一台ATM机曾短暂存在于南极的**麦克默多站**(McMurdo Station)。这台ATM由美国**富兰克林国家银行**(Wells Fargo)于1998年安装,主要供驻扎在该站的科研人员使用。不过,由于南极的极端环境和极低的人口密度,这台ATM机并未长期运行,最终被移除。 **背景补充:** @@ -45,7 +51,7 @@ Component({ data: '它叫 McMurdo Station ATM,是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。', }, ], - chatId: `${Date.now()}`, + chatId: getUniqueKey(), comment: '', }, { @@ -138,7 +144,7 @@ Component({ ], avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png', status: 'pending', - chatId: `${Date.now()}`, + chatId: getUniqueKey(), comment: '', }; this.setData({ @@ -230,19 +236,8 @@ Component({ } }, handlePopoverAction(e) { - const { name, active } = e.detail; - + e.detail.chatId = this.data.activePopoverId; this.handleAction(e); - if (name === 'good' || name === 'bad') { - this.data.chatList.forEach((item) => { - if (item.chatId === this.data.activePopoverId) { - item.comment = active ? name : ''; - } - }); - this.setData({ - chatList: this.data.chatList, - }); - } }, }, lifetimes: { diff --git a/packages/pro-components/chat/chat-message/README.md b/packages/pro-components/chat/chat-message/README.md index fc5551ec3..a7c49d155 100644 --- a/packages/pro-components/chat/chat-message/README.md +++ b/packages/pro-components/chat/chat-message/README.md @@ -79,7 +79,7 @@ variant | String | base | 气泡框样式,支持基础、线框、文字三种 名称 | 参数 | 描述 -- | -- | -- -longpress | `(detail: { id: string })` | \- +message-longpress | `(detail: { id: string, longPressPosition: { x: number, y: number } })` | 长按事件 ### ChatMessage Slots From 21c0a10ec52f1b833d061204d6d319fa65354862 Mon Sep 17 00:00:00 2001 From: nekowu <1142809915@qq.com> Date: Tue, 2 Dec 2025 11:04:46 +0800 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8F=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chat/chat-actionbar/chat-actionbar.less | 14 ++++++++++++-- .../chat/chat-actionbar/chat-actionbar.ts | 3 ++- .../chat/chat-list/_example/base/index.js | 12 ++++++++++-- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/packages/pro-components/chat/chat-actionbar/chat-actionbar.less b/packages/pro-components/chat/chat-actionbar/chat-actionbar.less index c9aefd0be..073727bc4 100644 --- a/packages/pro-components/chat/chat-actionbar/chat-actionbar.less +++ b/packages/pro-components/chat/chat-actionbar/chat-actionbar.less @@ -11,7 +11,7 @@ // TODO: 长按弹出层样式 @chat-actionbar-popover-background: rgba(0, 0, 0, 0.9); @chat-actionbar-popover-radius: 6rpx; -@chat-actionbar-popover-padding: 40rpx 16rpx; +@chat-actionbar-popover-padding: 8rpx 16rpx; @chat-actionbar-popover-padding-tri-width: 24rpx; @chat-actionbar-popover-padding-tri-height: 10rpx; @chat-actionbar-popover-item-color: @font-white-1; @@ -37,6 +37,7 @@ color: @font-white-1; background-color: @chat-actionbar-popover-background; border-radius: @chat-actionbar-popover-radius; + max-width: 544rpx; // 顶部三角形 &::before { @@ -59,6 +60,9 @@ .@{chat-actionbar}__inner { background-color: unset; border: none; + display: flex; + flex-wrap: wrap; + gap: 4rpx; &--column { gap: 8rpx; @@ -69,10 +73,16 @@ color: #fff; background-color: unset; padding: 0; + margin: 0; font-size: 28rpx; line-height: 42rpx; width: 128rpx; - text-align: center; + height: 156rpx; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8rpx; } } diff --git a/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts b/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts index e5b259e22..3fa578bd0 100644 --- a/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts +++ b/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts @@ -160,7 +160,8 @@ export default class ChatActionbar extends SuperComponent { }, showPopover(pos) { - const width = (this.data.actions.length * 128 + (this.data.actions.length - 1) * 8 + 16 * 2) / 2; + const lineNumber = Math.min(this.data.actions.length, 4); + const width = (lineNumber * 128 + (lineNumber - 1) * 8 + 16 * 2) / 2; this.setData({ popoverPosition: `top:${pos.y}px;left:${pos.x}px;margin-left:-${width}rpx`, }); diff --git a/packages/pro-components/chat/chat-list/_example/base/index.js b/packages/pro-components/chat/chat-list/_example/base/index.js index b6f456830..02b3e816a 100644 --- a/packages/pro-components/chat/chat-list/_example/base/index.js +++ b/packages/pro-components/chat/chat-list/_example/base/index.js @@ -62,6 +62,7 @@ Component({ data: '牛顿第一定律是否适用于所有参考系?', }, ], + chatId: getUniqueKey(), }, ], value: '', // 输入框的值 @@ -99,6 +100,7 @@ Component({ data: value.trim(), }, ], + chatId: getUniqueKey(), }; // 将用户消息插入到chatList的开头(因为reverse为true,所以用unshift) @@ -220,11 +222,17 @@ Component({ showPopover(e) { const { id, longPressPosition } = e.detail; const child = this.selectComponent('.popover-actionbar'); - const actionbar = this.selectComponent(`#actionbar-${id}`); if (child) { + let comment = ''; + this.data.chatList.forEach((item) => { + if (item.chatId === id) { + comment = item.comment; + } + }); + this.setData({ activePopoverId: id, - activePopoverComment: actionbar.__data__.pComment, + activePopoverComment: comment, }); child.__data__.showPopover(longPressPosition); } From c9b719e79bbae57f89233a85293dccf96d8e20fc Mon Sep 17 00:00:00 2001 From: zydemail <1054055589@qq.com> Date: Tue, 2 Dec 2025 15:27:00 +0800 Subject: [PATCH 6/7] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=95=BF?= =?UTF-8?q?=E6=8C=89=E4=BD=8D=E7=BD=AE=E5=B1=9E=E6=80=A7=E5=8F=8A=E5=BC=B9?= =?UTF-8?q?=E7=AA=97=E6=8E=A7=E5=88=B6=EF=BC=8C=E4=BC=98=E5=8C=96=E5=BC=B9?= =?UTF-8?q?=E7=AA=97=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/common | 2 +- .../chat/chat-actionbar/README.md | 3 +- .../chat/chat-actionbar/chat-actionbar.ts | 9 +++++ .../chat/chat-actionbar/props.ts | 5 +++ .../chat/chat-actionbar/type.ts | 14 +++++++ .../chat/chat-list/_example/base/index.js | 37 ++++++++++--------- .../chat/chat-list/_example/base/index.wxml | 1 + 7 files changed, 52 insertions(+), 19 deletions(-) diff --git a/packages/common b/packages/common index aa1ba4375..8b565d28d 160000 --- a/packages/common +++ b/packages/common @@ -1 +1 @@ -Subproject commit aa1ba4375744d85b42f77cbf45b82b912c3e14b2 +Subproject commit 8b565d28da2a7e99e9a9e2d03784b2670c3bd402 diff --git a/packages/pro-components/chat/chat-actionbar/README.md b/packages/pro-components/chat/chat-actionbar/README.md index bc21732c2..4c2f58267 100644 --- a/packages/pro-components/chat/chat-actionbar/README.md +++ b/packages/pro-components/chat/chat-actionbar/README.md @@ -52,7 +52,8 @@ comment | String | - | 评价内容 | N content | String | - | 被复制的内容 | N copy-mode | String | markdown | 【实验】复制内容的模式,可选 'markdown'(复制markdown原文)或 'text'(复制纯文本)。可选项:markdown/text | N disabled | Boolean | false | 【讨论中】操作按钮是否可点击 | N -placement | String | start | 【实验】操作栏位置。可选项:start/end/space-around/space-between | N +long-press-position | Object | - | 【实验】长按触发点的位置信息,用于定位 popover。TS 类型:`{pageX: number; pageY: number; clientX: number; clientY: number; x: number; y: number}` | N +placement | String | start | 【实验】操作栏位置。可选项:start/end/space-around/space-between/longpress | N ### ChatActionbar Events diff --git a/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts b/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts index 3fa578bd0..43a5aad14 100644 --- a/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts +++ b/packages/pro-components/chat/chat-actionbar/chat-actionbar.ts @@ -39,6 +39,15 @@ export default class ChatActionbar extends SuperComponent { 'actionBar, pComment'() { this.setActions(); }, + longPressPosition(newVal) { + if (this.properties.placement === 'longpress') { + if (newVal) { + this.showPopover(newVal); + } else { + this.hidePopover(); + } + } + }, }; methods = { diff --git a/packages/pro-components/chat/chat-actionbar/props.ts b/packages/pro-components/chat/chat-actionbar/props.ts index f75f62193..4df0e18b4 100644 --- a/packages/pro-components/chat/chat-actionbar/props.ts +++ b/packages/pro-components/chat/chat-actionbar/props.ts @@ -41,6 +41,11 @@ const props: TdChatActionbarProps = { type: String, value: 'start', }, + /** 【实验】长按触发点的位置信息,用于定位 popover */ + longPressPosition: { + type: Object, + value: null, + }, }; export default props; diff --git a/packages/pro-components/chat/chat-actionbar/type.ts b/packages/pro-components/chat/chat-actionbar/type.ts index fb609874a..5a6d1a920 100644 --- a/packages/pro-components/chat/chat-actionbar/type.ts +++ b/packages/pro-components/chat/chat-actionbar/type.ts @@ -61,4 +61,18 @@ export interface TdChatActionbarProps { type: StringConstructor; value?: 'start' | 'end' | 'space-around' | 'space-between' | 'longpress'; }; + /** + * 【实验】长按触发点的位置信息,用于定位 popover + */ + longPressPosition?: { + type: ObjectConstructor; + value?: { + pageX: number; + pageY: number; + clientX: number; + clientY: number; + x: number; + y: number; + }; + }; } diff --git a/packages/pro-components/chat/chat-list/_example/base/index.js b/packages/pro-components/chat/chat-list/_example/base/index.js index 02b3e816a..b9a2fb4e1 100644 --- a/packages/pro-components/chat/chat-list/_example/base/index.js +++ b/packages/pro-components/chat/chat-list/_example/base/index.js @@ -221,27 +221,30 @@ Component({ }, showPopover(e) { const { id, longPressPosition } = e.detail; - const child = this.selectComponent('.popover-actionbar'); - if (child) { - let comment = ''; - this.data.chatList.forEach((item) => { - if (item.chatId === id) { - comment = item.comment; - } - }); + let comment = ''; + let role = ''; + this.data.chatList.forEach((item) => { + if (item.chatId === id) { + comment = item.comment; + role = item.role; + } + }); - this.setData({ - activePopoverId: id, - activePopoverComment: comment, - }); - child.__data__.showPopover(longPressPosition); + // 仅当 role 为 user 时才显示 popover + if (role !== 'user') { + return; } + + this.setData({ + activePopoverId: id, + activePopoverComment: comment, + longPressPosition, + }); }, hidePopover() { - const child = this.selectComponent('.popover-actionbar'); - if (child) { - child.__data__.hidePopover(); - } + this.setData({ + longPressPosition: null, + }); }, handlePopoverAction(e) { e.detail.chatId = this.data.activePopoverId; diff --git a/packages/pro-components/chat/chat-list/_example/base/index.wxml b/packages/pro-components/chat/chat-list/_example/base/index.wxml index 19f797fc3..7db468520 100644 --- a/packages/pro-components/chat/chat-list/_example/base/index.wxml +++ b/packages/pro-components/chat/chat-list/_example/base/index.wxml @@ -41,6 +41,7 @@ placement="longpress" comment="{{activePopoverComment}}" bind:actions="handlePopoverAction" + longPressPosition="{{longPressPosition}}" /> From 650aa63331bd2abe8abc8649d7c2a40c9a581fb0 Mon Sep 17 00:00:00 2001 From: nekowu <1142809915@qq.com> Date: Tue, 2 Dec 2025 17:49:51 +0800 Subject: [PATCH 7/7] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E5=8F=82?= =?UTF-8?q?=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/pro-components/chat/chat-list/_example/base/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/pro-components/chat/chat-list/_example/base/index.js b/packages/pro-components/chat/chat-list/_example/base/index.js index b9a2fb4e1..fbbc33fe3 100644 --- a/packages/pro-components/chat/chat-list/_example/base/index.js +++ b/packages/pro-components/chat/chat-list/_example/base/index.js @@ -73,6 +73,7 @@ Component({ animation: 'dots', activePopoverId: '', // 当前打开悬浮actionbar的chatId activePopoverComment: '', // 当前打开悬浮actionbar的comment + longPressPosition: null, // 长按位置对象 }, methods: {