fix(input-composer): 调整AI形象与git状态栏的对齐、间距及文字定位

static/src/components/input/InputComposer.vue

@@ -89,7 +89,7 @@
             :mode="props.avatarStatus.mode"
             :tool-keys="props.avatarStatus.toolKeys || []"
             :tracking="props.avatarStatus.tracking !== false"
-            :size="40"
+            :size="45"
             hex-background
           />
           <Transition name="composer-avatar-text-fade" mode="out-in">
@@ -119,85 +119,87 @@
         </div>
       </transition>
       <transition name="floating-status-motion">
-        <div v-if="floatingStatusVisible" class="floating-project-status" @click.stop>
-          <span v-if="projectGitSummaryForRender" class="floating-project-status__left">
-            <span class="floating-project-status__menu-wrap">
-              <button
-                type="button"
-                class="floating-project-status__button floating-project-status__button--project"
-                :class="{
-                  'floating-project-status__button--active': projectGitMenuOpen === 'project'
-                }"
-                @click.stop="toggleProjectGitMenu('project')"
-              >
-                {{ projectGitSummaryForRender.projectName }}
-              </button>
-              <div
-                v-if="projectGitMenuOpen === 'project'"
-                class="floating-project-status__submenu floating-project-status__submenu--project"
-                @click.stop
-              >
-                <button type="button" @click.stop="openProjectInFileManager">
-                  在文件管理器中打开
+        <div v-if="floatingStatusVisible" class="floating-status-row" @click.stop>
+          <div class="floating-project-status" @click.stop>
+            <span v-if="projectGitSummaryForRender" class="floating-project-status__left">
+              <span class="floating-project-status__menu-wrap">
+                <button
+                  type="button"
+                  class="floating-project-status__button floating-project-status__button--project"
+                  :class="{
+                    'floating-project-status__button--active': projectGitMenuOpen === 'project'
+                  }"
+                  @click.stop="toggleProjectGitMenu('project')"
+                >
+                  {{ projectGitSummaryForRender.projectName }}
                 </button>
-                <button type="button" @click.stop="copyProjectPath">复制地址</button>
-              </div>
+                <div
+                  v-if="projectGitMenuOpen === 'project'"
+                  class="floating-project-status__submenu floating-project-status__submenu--project"
+                  @click.stop
+                >
+                  <button type="button" @click.stop="openProjectInFileManager">
+                    在文件管理器中打开
+                  </button>
+                  <button type="button" @click.stop="copyProjectPath">复制地址</button>
+                </div>
+              </span>
+              <span class="floating-project-status__menu-wrap">
+                <button
+                  type="button"
+                  class="floating-project-status__button floating-project-status__button--branch"
+                  :class="{
+                    'floating-project-status__button--active': projectGitMenuOpen === 'branch'
+                  }"
+                  @click.stop="toggleProjectGitMenu('branch')"
+                >
+                  {{ projectGitSummaryForRender.branch }}
+                </button>
+                <div
+                  v-if="projectGitMenuOpen === 'branch'"
+                  class="floating-project-status__submenu floating-project-status__submenu--branch"
+                  @click.stop
+                >
+                  <button type="button" @click.stop="copyProjectBranch">复制分支名称</button>
+                </div>
+              </span>
             </span>
-            <span class="floating-project-status__menu-wrap">
+            <span class="floating-project-status__right">
+              <span v-if="goalRunning" class="floating-project-status__notice">目标模式运行中</span>
+              <span v-else-if="goalModeArmed" class="floating-project-status__notice"
+                >目标模式就绪</span
+              >
               <button
+                v-if="userQuestionMinimized && pendingUserQuestionCount > 0"
                 type="button"
-                class="floating-project-status__button floating-project-status__button--branch"
-                :class="{
-                  'floating-project-status__button--active': projectGitMenuOpen === 'branch'
-                }"
-                @click.stop="toggleProjectGitMenu('branch')"
+                class="floating-project-status__notice floating-project-status__notice--button"
+                @click.stop="$emit('restore-user-question')"
               >
-                {{ projectGitSummaryForRender.branch }}
+                等待回答问题
               </button>
-              <div
-                v-if="projectGitMenuOpen === 'branch'"
-                class="floating-project-status__submenu floating-project-status__submenu--branch"
-                @click.stop
+              <button
+                v-if="terminalCount > 0"
+                type="button"
+                class="floating-project-status__terminal"
+                @click.stop="$emit('realtime-terminal')"
               >
-                <button type="button" @click.stop="copyProjectBranch">复制分支名称</button>
-              </div>
+                {{ terminalCount }} 个终端
+              </button>
+              <button
+                v-if="projectGitSummaryForRender"
+                type="button"
+                class="floating-project-status__stats"
+                @click.stop="$emit('open-git-changes-panel')"
+              >
+                <span class="floating-project-status__add"
+                  >+<RollingNumber :value="projectGitSummaryForRender.additions"
+                /></span>
+                <span class="floating-project-status__del"
+                  >-<RollingNumber :value="projectGitSummaryForRender.deletions"
+                /></span>
+              </button>
             </span>
-          </span>
-          <span class="floating-project-status__right">
-            <span v-if="goalRunning" class="floating-project-status__notice">目标模式运行中</span>
-            <span v-else-if="goalModeArmed" class="floating-project-status__notice"
-              >目标模式就绪</span
-            >
-            <button
-              v-if="userQuestionMinimized && pendingUserQuestionCount > 0"
-              type="button"
-              class="floating-project-status__notice floating-project-status__notice--button"
-              @click.stop="$emit('restore-user-question')"
-            >
-              等待回答问题
-            </button>
-            <button
-              v-if="terminalCount > 0"
-              type="button"
-              class="floating-project-status__terminal"
-              @click.stop="$emit('realtime-terminal')"
-            >
-              {{ terminalCount }} 个终端
-            </button>
-            <button
-              v-if="projectGitSummaryForRender"
-              type="button"
-              class="floating-project-status__stats"
-              @click.stop="$emit('open-git-changes-panel')"
-            >
-              <span class="floating-project-status__add"
-                >+<RollingNumber :value="projectGitSummaryForRender.additions"
-              /></span>
-              <span class="floating-project-status__del"
-                >-<RollingNumber :value="projectGitSummaryForRender.deletions"
-              /></span>
-            </button>
-          </span>
+          </div>
         </div>
       </transition>
       <div
@@ -2484,13 +2486,13 @@ const collectComposerVisualHeight = () => {
   // 收起态横幅是脱离流、浮在角上的小圆点，不应计入为聊天区预留的高度，
   // 否则会把消息区可滚动范围顶高。故排除 .goal-mode-banner--collapsed。
   const nodes = root.querySelectorAll(
-    '.runtime-queue-list:not(.runtime-queue-list--empty), .floating-project-status, .composer-avatar'
+    '.runtime-queue-list:not(.runtime-queue-list--empty), .floating-status-row, .composer-avatar'
   );
   nodes.forEach((node) => {
     if (!(node instanceof HTMLElement)) return;
     // 离开态：floatingStatusVisible / showComposerAvatar 已翻 false 但元素仍在 DOM 中做退场动画。
     // 此时不再计入它的高度，让输入栏立即回升、与浮层的退场动画同步。
-    if (node.classList.contains('floating-project-status') && !floatingStatusVisible.value) return;
+    if (node.classList.contains('floating-status-row') && !floatingStatusVisible.value) return;
     if (node.classList.contains('composer-avatar') && !showComposerAvatar.value) return;
     top = Math.min(top, node.offsetTop);
     bottom = Math.max(bottom, node.offsetTop + node.offsetHeight);
@@ -2956,13 +2958,43 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
-.floating-project-status {
+.composer-avatar {
   position: absolute;
-  left: 5%;
+  left: 0;
+  right: auto;
   bottom: calc(100% + 6px);
   z-index: auto;
-  width: 90%;
-  max-width: 90%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  width: 45px;
+  height: 64px;
+  pointer-events: auto;
+  color: var(--claude-text);
+}
+
+.floating-status-row {
+  position: absolute;
+  left: 49px;
+  right: 49px;
+  bottom: calc(100% + 6px);
+  z-index: auto;
+  height: 64px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.floating-project-status {
+  position: relative;
+  left: auto;
+  right: auto;
+  bottom: auto;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
   height: 34px;
   display: flex;
   align-items: center;
@@ -2976,22 +3008,10 @@ onBeforeUnmount(() => {
   pointer-events: auto;
 }
 
-.composer-avatar {
-  position: absolute;
-  left: 0;
-  bottom: calc(100% + 6px);
-  z-index: auto;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  height: 40px;
-  pointer-events: auto;
-  color: var(--claude-text);
-}
-
 .composer-avatar .status-avatar {
   display: block;
   flex-shrink: 0;
+  margin-bottom: -5px;
 }
 
 .composer-avatar__text {
@@ -2999,20 +3019,26 @@ onBeforeUnmount(() => {
   white-space: nowrap;
   font-size: 14px;
   font-weight: 500;
+  line-height: 16px;
   color: var(--claude-text-secondary);
+  background: var(--chat-surface-color);
+  padding: 2px 8px;
+  border-radius: 9999px;
   pointer-events: none;
   z-index: 1;
 }
 
 .composer-avatar__text--right {
-  left: calc(100% + 8px);
-  top: 50%;
-  transform: translateY(-50%);
+  left: calc(100% + 4px);
+  right: auto;
+  top: auto;
+  bottom: 0;
+  transform: none;
 }
 
 .composer-avatar__text--top {
-  left: 0;
-  bottom: calc(100% + 4px);
+  left: -8px;
+  bottom: 40px;
   transform: none;
 }