Skip to content

feat: uniapp迁移actionbar popover功能 #4211

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.

Sign up for GitHub

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

Merged
zydemail merged 3 commits into from
Jan 28, 2026
Merged

feat: uniapp迁移actionbar popover功能 #4211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b2d347d
feat: uniapp迁移actionbar popover功能
mimaoxiao Jan 26, 2026
efc7ea1
chore: 暂时关闭rpx转换
mimaoxiao Jan 26, 2026
56ccf43
Merge branch 'develop' into feature/uniapp-actionbar-popup
mimaoxiao Jan 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 11 additions & 14 deletions packages/tdesign-uniapp/example/script/release/less.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,25 +16,27 @@ const CONFIG = {
useRpxTransform: false,
};


// 配置参数（通常 1rpx=0.5px，设计稿 750px 宽时）
const options = {
transformType: 'rpx',
rpxUnit: 0.5, // 转换比例 1rpx = 0.5px
rpxPrecision: 6, // 输出精度
rpxUnit: 0.5, // 转换比例 1rpx = 0.5px
rpxPrecision: 6, // 输出精度
};

// 处理流程
async function processLess(inputFile, rawOutputFile) {
if (!inputFile.endsWith('.less')) return;
if (CONFIG.whiteList.find(item => inputFile.startsWith(item))) {
if (CONFIG.whiteList.find((item) => inputFile.startsWith(item))) {
return;
}

try {
let lessCode = fs.readFileSync(inputFile, 'utf8');

lessCode = lessCode.replace('@import \'@tdesign/uniapp/common/style/base.less\'', '@import \'../common/style/base.less\'');
lessCode = lessCode.replace(
"@import '@tdesign/uniapp/common/style/base.less'",
"@import '../common/style/base.less'",
);

const cssResult = await less.render(lessCode, {
// 设置导入路径
Expand All @@ -46,24 +48,19 @@ async function processLess(inputFile, rawOutputFile) {
],
});

const postcssResult = await postcss([
CONFIG.useRpxTransform ? rpxTransform(options) : null,
].filter(Boolean))
.process(cssResult.css, { from: undefined });

const postcssResult = await postcss(
[CONFIG.useRpxTransform ? rpxTransform(options) : null].filter(Boolean),
).process(cssResult.css, { from: undefined });

const getOutputFile = (rawOutputFile) => {
const filename = `${path
.basename(rawOutputFile, path.extname(rawOutputFile))
.replace(/^_/, '')}.css`;
const filename = `${path.basename(rawOutputFile, path.extname(rawOutputFile)).replace(/^_/, '')}.css`;

const outputFile = path.resolve(path.dirname(rawOutputFile), filename);
console.log('filename', filename);

return outputFile;
};


const outputFile = getOutputFile(rawOutputFile);
fs.writeFileSync(outputFile, postcssResult.css);
console.log(`✅ 转换完成: ${path.relative(PROJECT_ROOT, outputFile)}`);
Expand Down
5 changes: 3 additions & 2 deletions packages/uniapp-pro-components/chat/chat-actionbar/README.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,11 @@ comment | String | - | \- | N
content | String | - | \- | N
copy-mode | String | markdown | options: markdown/text | N
disabled | Boolean | false | \- | N
placement | String | start | options: start/end/space-around/space-between | N
long-press-position | Object | - | type: `{pageX: number; pageY: number; clientX: number; clientY: number; x: number; y: number}` | N
placement | String | start | options: start/end/space-around/space-between/longpress | N

### ChatActionbar Events

name | params | description
-- | -- | --
actions | `(context: {name: string, active: boolean})` | \-
actions | `(context: {name: string, active: boolean, chatId: string})` | \-
5 changes: 3 additions & 2 deletions packages/uniapp-pro-components/chat/chat-actionbar/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,11 @@ 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

名称 | 参数 | 描述
-- | -- | --
actions | `(context: {name: string, active: boolean})` | 点击点赞，点踩，复制，分享，重新生成按钮时触发发
actions | `(context: {name: string, active: boolean, chatId: string})` | 点击点赞，点踩，复制，分享，重新生成按钮时触发发
69 changes: 55 additions & 14 deletions packages/uniapp-pro-components/chat/chat-actionbar/chat-actionbar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,17 @@
@chat-actionbar-item-padding: var(--chat-actionbar-item-padding, 16rpx 28rpx);
@chat-actionbar-item-color: @text-color-primary;
@chat-actionbar-item-active: @brand-color;
@chat-actionbar-item-gap: 4rpx;

// 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: 8rpx 16rpx;
@chat-actionbar-popover-inner-size: 20rpx;
@chat-actionbar-popover-item-width: 128rpx;
@chat-actionbar-popover-item-height: 156rpx;
@chat-actionbar-popover-item-gap: 8rpx;
@chat-actionbar-popover-item-inner-gap: 8rpx;

.@{chat-actionbar} {
display: flex;
Expand All @@ -25,6 +31,40 @@
justify-content: flex-end;
}

// 弹出层
&--popover {
color: @font-white-1;
border-radius: @chat-actionbar-popover-radius;

.@{chat-actionbar}__inner {
background-color: unset;
border: none;
display: flex;
flex-wrap: wrap;
gap: @chat-actionbar-item-gap;

&--column {
gap: @chat-actionbar-popover-item-gap;
}
}

.@{chat-actionbar}__item--popover {
color: #fff;
background-color: unset;
padding: 0;
margin: 0;
font-size: 28rpx;
line-height: 42rpx;
width: @chat-actionbar-popover-item-width;
height: @chat-actionbar-popover-item-height;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: @chat-actionbar-popover-item-inner-gap;
}
}

// 内部容器
&__inner {
background-color: @bg-color-secondarycontainer;
Expand All @@ -42,14 +82,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;
}
}

// 左侧内容
Expand All @@ -62,8 +94,7 @@
// 操作项
&__item {
color: @chat-actionbar-item-color;
margin: 12rpx 0;
padding: 4rpx 28rpx;
padding: @chat-actionbar-item-padding;
border-right: 2rpx solid @component-stroke;
background-color: unset;
outline: none;
Expand All @@ -81,4 +112,14 @@
color: @chat-actionbar-item-active;
}
}

&__popover-skeleton {
position: fixed;
--td-popover-padding: @chat-actionbar-popover-padding;

&__inner {
width: @chat-actionbar-popover-inner-size;
height: @chat-actionbar-popover-inner-size;
}
}
}
Loading
Loading