style(web): 卡片布局改左大右小,⚙ 固定宽度

卡片左侧占主空间(点开对话),右侧「⚙」固定宽度 28px(点开弹框),
点击更易触发。未绑定/已绑定无对话卡片也加右侧 ⚙ 管理。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
caoqianming 2026-06-26 12:17:32 +08:00
parent 013cbc28b5
commit 12a2289de2
2 changed files with 17 additions and 18 deletions

View File

@ -558,8 +558,9 @@
gap: 3px; vertical-align: 1px; }
.badge.wx svg { width: 11px; height: 11px; fill: currentColor; display: block; }
/* 渠道镜像卡片(微信 / 企业微信):固定在「新建任务」下,绿调入口,与普通任务列表分离。
并排放(flex row,各 flex:1)省纵向空间;窄栏内图标左、名称/条数时间堆两行。
三态:未绑定(cc-placeholder)、已绑定无对话(cc-placeholder)、已绑定有对话(active 高亮) */
并排放(flex row,各 flex:1)省纵向空间;窄栏内卡片左大右小:左侧占主空间(点开对话),
右侧「⚙」固定宽度(点开弹框)。三态:未绑定(cc-placeholder)、已绑定无对话(cc-placeholder)、
已绑定有对话(active 高亮)。 */
#channel-cards { padding: 6px 12px 2px; display: flex; gap: 6px; }
#channel-cards:empty { display: none; }
.channel-card { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 7px 9px;
@ -570,11 +571,14 @@
.channel-card .cc-icon { width: 18px; height: 18px; border-radius: 5px; background: #07C160; color: #fff;
display: inline-flex; align-items: center; justify-content: center; flex: none; }
.channel-card .cc-icon svg { width: 12px; height: 12px; fill: currentColor; display: block; }
.channel-card .cc-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.channel-card .cc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.channel-card .cc-name { font-weight: 600; font-size: 13px; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-card .cc-meta { color: var(--muted); font-size: 11px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-card .cc-action { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center;
justify-content: center; border-radius: 6px; color: var(--muted); font-size: 14px; cursor: pointer; }
.channel-card .cc-action:hover { background: rgba(7,193,96,.12); color: #07C160; }
.empty { padding: 24px; color: var(--muted); text-align: center; font-size: 13px; }
/* ───── chat ───── */

View File

@ -216,18 +216,19 @@ export async function loadChannelCards() {
</span>
</div>`;
} else if (!t) {
// 已绑定但还没首条消息(无 task):占位卡片,提示发消息后可打开,打开弹框管理
// 已绑定但还没首条消息(无 task):占位卡片,提示发消息后可打开,右侧 ⚙ 管理
html = `
<div class="channel-card cc-placeholder" data-kind="${kind}" data-action="manage"
title="在${cfg.label}发条消息后即可打开对话">
<span class="cc-icon">${WECHAT_ICON}</span>
<span class="cc-body">
<span class="cc-name">${cfg.label}对话</span>
<span class="cc-meta">发消息后可打开 · 管理</span>
<span class="cc-meta">发消息后可打开</span>
</span>
<span class="cc-action" title="管理${cfg.label}绑定"></span>
</div>`;
} else {
// 已绑定且有对话:正常卡片,点打开,打开弹框管理
// 已绑定且有对话:正常卡片,点打开,右侧 ⚙ 管理
const active = state.taskId === t.task_id ? " active" : "";
const name = t.name || cfg.label + "对话";
const meta = `${t.n_messages || 0} 条 · ${escapeHtml(fmtTimeAgo(t.updated_at))}`;
@ -237,30 +238,24 @@ export async function loadChannelCards() {
<span class="cc-icon">${WECHAT_ICON}</span>
<span class="cc-body">
<span class="cc-name">${escapeHtml(name)}</span>
<span class="cc-meta">
<span>${meta}</span>
<span class="cc-manage" title="管理${cfg.label}绑定"></span>
</span>
<span class="cc-meta">${meta}</span>
</span>
<span class="cc-action" title="管理${cfg.label}绑定"></span>
</div>`;
}
return html;
}).join("");
// 绑定事件:绑定点打开弹框;已绑定点打开对话(占位点管理);右键/点击 ⚙ 打开弹框管理
// 绑定事件:卡片整体点击 → selectTask(有 tid 时);右侧 cc-action 点击 → openWechatModal,阻止冒泡
box.querySelectorAll(".channel-card").forEach((el) => {
const action = el.dataset.action;
if (action === "bind") {
el.onclick = () => {
if (typeof openWechatModal === "function") openWechatModal();
};
} else if (action === "manage") {
if (action === "bind" || action === "manage") {
el.onclick = () => {
if (typeof openWechatModal === "function") openWechatModal();
};
} else if (action === "select") {
el.onclick = (e) => {
const manageBtn = e.target.closest(".cc-manage");
if (manageBtn) {
const actionBtn = e.target.closest(".cc-action");
if (actionBtn) {
e.stopPropagation(); // ⚙ 点开弹框,不触发 selectTask
if (typeof openWechatModal === "function") openWechatModal();
} else {