Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

用户消息复制按钮导致气泡底部出现多余留白

オープン 初心者向け
#879 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
82/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
静か
技術スタック
tailwindcss, typescript
領域
frontend

調査の方向性

frontend/src/components/console/task/message-userinput.tsx から始めて、ユーザーメッセージのラッパー、その pb-7 クラス、絶対配置されたコピー・ボタンを調べてください。テキストのみのメッセージと添付ファイル付きメッセージの両方について、マウスホバー時とキーボードフォーカス時の状態を含めてレイアウトを確認してください。コピー中に固定された空の行がなくなり、ツールチップ、ステータスフィードバック、添付ファイルのレイアウトが変わらなければ完了です。

索引モデルが issue の本文から書いたものです。

説明

问题描述

用户消息增加复制按钮后,消息气泡下方固定出现一整行空白,使每条对话消息整体高度增加,视觉上略显臃肿。

截图中留白位于用户消息区域内部、正文气泡下方。复制按钮默认隐藏时,这块空间仍然存在。

根因定位

frontend/src/components/console/task/message-userinput.tsx 的用户消息外层使用了 pb-7,为绝对定位在 bottom-0 的复制按钮固定预留 28px 高度。按钮处于 opacity-0 时,预留空间依然参与布局。

期望行为

  • 用户消息气泡下方不再固定占用一整行空间
  • 复制按钮仍可通过鼠标悬停和键盘聚焦访问
  • 复制、Tooltip 和成功/失败提示行为保持不变
  • 包含附件的用户消息保持正常布局

复现步骤

  1. 打开任意任务对话
  2. 查看带文本的用户消息气泡
  3. 观察正文气泡下方始终存在一整行留白
  4. 鼠标悬停后可看到该区域右侧的复制按钮

关联信息

  • 相关 PR:#861
  • 用户 UID:019d5da5-27a2-7679-b28e-f6fb5d1e78b5
主要言語
TypeScript
スター
4.8k
フォーク
728
平均マージ
3時間 48分
マージ済み PR(30日)
101

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

chaitin/MonkeyCode のほかの issue

chaitin/MonkeyCode の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。