fix: 优化订阅主题列表的样式

app/src/renderer/src/views/Subscribe.vue

@@ -260,15 +260,6 @@ async function handleEditSave(t) {
             @keydown.enter="handleAddTopic"
           />
         </n-form-item>
-        <n-form-item
-          class="qos-field"
-          label="QoS"
-        >
-          <n-select
-            v-model:value="qos"
-            :options="qosOptions"
-          />
-        </n-form-item>
         <n-form-item
           class="comment-field"
           label="备注"
@@ -279,13 +270,20 @@ async function handleEditSave(t) {
             @keydown.enter="handleAddTopic"
           />
         </n-form-item>
+        <n-form-item
+          class="qos-field"
+          label="QoS"
+        >
+          <n-select
+            v-model:value="qos"
+            :options="qosOptions"
+          />
+        </n-form-item>
         <n-button
           class="topic-submit"
           type="primary"
           @click="handleAddTopic"
-        >
+        >+ 添加订阅</n-button>
-          + 添加订阅
-        </n-button>
       </div>
     </n-card>
 
@@ -305,9 +303,7 @@ async function handleEditSave(t) {
         <n-button
           size="small"
           @click="handleSubscribeAll"
-        >
+        >全部订阅</n-button>
-          全部订阅
-        </n-button>
       </template>
       <n-empty
         v-if="!store.activeServer.value.topics || store.activeServer.value.topics.length === 0"
@@ -323,104 +319,96 @@ async function handleEditSave(t) {
             :key="t.id || t.topic"
             class="topic-item"
           >
-            <template
+            <template #prefix>
-              v-if="editingTopicId !== (t.id || t.topic)"
-              #prefix
-            >
               <n-tag
+                class="topic-qos-tag"
                 :type="t.subscribed ? 'success' : 'default'"
                 size="small"
-              >
+              >QoS {{ t.qos }}</n-tag>
-                QoS {{ t.qos }}
-              </n-tag>
             </template>
-            <div
+            <div class="topic-content">
-              v-if="editingTopicId === (t.id || t.topic)"
-              class="topic-edit-row"
-            >
-              <n-input
-                v-model:value="editingTopic"
-                size="small"
-                placeholder="主题名称"
-                @keydown.enter="handleEditSave(t)"
-              />
-              <n-select
-                v-model:value="editingQos"
-                size="small"
-                :options="qosOptions"
-                style="width: 160px; flex-shrink: 0"
-              />
-              <n-input
-                v-model:value="editingComment"
-                size="small"
-                placeholder="备注"
-              />
-              <n-space
-                :size="4"
-                :wrap="false"
-              >
-                <n-button
-                  size="tiny"
-                  type="primary"
-                  @click="handleEditSave(t)"
-                >
-                  保存
-                </n-button>
-                <n-button
-                  size="tiny"
-                  @click="cancelEdit"
-                >
-                  取消
-                </n-button>
-              </n-space>
-            </div>
-            <div
-              v-else
-              class="topic-name"
-            >
-              <span
-                class="topic-label"
-                :title="t.topic"
-              >{{ t.topic }}</span>
               <div
-                v-if="t.comment"
+                class="topic-name"
-                class="topic-comment"
+                :class="{ 'is-hidden': editingTopicId === (t.id || t.topic) }"
               >
-                <span class="topic-comment-prefix">备注</span>
                 <span
-                  class="topic-comment-text"
+                  class="topic-label"
-                  :title="t.comment"
+                  :title="t.topic"
-                >{{ t.comment }}</span>
+                >{{ t.topic }}</span>
+                <div class="topic-comment">
+                  <span class="topic-comment-prefix">备注</span>
+                  <span
+                    class="topic-comment-text"
+                    :title="t.comment"
+                  >{{ t.comment }}</span>
+                </div>
+              </div>
+              <div
+                class="topic-edit-row"
+                :class="{ 'is-visible': editingTopicId === (t.id || t.topic) }"
+              >
+                <n-input
+                  v-model:value="editingTopic"
+                  class="topic-edit-topic"
+                  size="small"
+                  placeholder="主题名称"
+                  @keydown.enter="handleEditSave(t)"
+                />
+                <n-input
+                  v-model:value="editingComment"
+                  class="topic-edit-comment"
+                  size="small"
+                  placeholder="备注"
+                />
+                <n-select
+                  v-model:value="editingQos"
+                  class="topic-edit-qos"
+                  size="small"
+                  :options="qosOptions"
+                />
+                <n-space
+                  class="topic-edit-actions"
+                  :size="4"
+                  :wrap="false"
+                >
+                  <n-button
+                    size="tiny"
+                    type="primary"
+                    @click="handleEditSave(t)"
+                  >保存</n-button>
+                  <n-button
+                    size="tiny"
+                    @click="cancelEdit"
+                  >取消</n-button>
+                </n-space>
               </div>
             </div>
             <template #suffix>
               <n-space
-                v-if="editingTopicId !== (t.id || t.topic)"
                 class="topic-actions"
+                :class="{ 'is-hidden': editingTopicId === (t.id || t.topic) }"
                 :size="4"
                 :wrap="false"
               >
                 <n-button
                   size="tiny"
                   @click="startEdit(t)"
-                >
+                >编辑</n-button>
-                  编辑
-                </n-button>
                 <n-button
+                  class="topic-action-sub"
                   size="tiny"
-                  :type="t.subscribed ? 'error' : 'success'"
+                  :type="t.subscribed ? 'success' : 'primary'"
                   @click="handleToggleSub(t.topic)"
                 >
-                  {{ t.subscribed ? '取消订阅' : '订阅' }}
+                  {{ t.subscribed ? '已订阅' : '未订阅' }}
                 </n-button>
                 <n-button
+                  class="topic-action-remove"
                   size="tiny"
                   type="error"
                   text
                   @click.stop="handleRemoveTopic(t.topic)"
-                >
+                >&#10005;</n-button>
-                  &#10005;
-                </n-button>
               </n-space>
             </template>
           </n-list-item>
@@ -497,27 +485,58 @@ async function handleEditSave(t) {
   width: 100%;
 }
 
+.topic-item {
+  box-sizing: border-box;
+  height: 56px;
+  min-height: 56px;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
 .topic-item :deep(.n-list-item__main) {
   display: flex;
   align-items: center;
+  height: 100%;
   min-width: 0;
   gap: 12px;
 }
 
+.topic-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
 .topic-name {
   display: flex;
   flex: 1;
   flex-direction: column;
+  justify-content: center;
   align-items: stretch;
+  width: 100%;
+  height: 40px;
   min-width: 0;
-  gap: 5px;
+  min-height: 0;
+  gap: 2px;
   font-size: 13px;
+  overflow: hidden;
+  visibility: visible;
+}
+
+.topic-name.is-hidden {
+  visibility: hidden;
 }
 
 .topic-label {
   min-width: 0;
   overflow: hidden;
   font-family: monospace;
+  line-height: 18px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -527,14 +546,14 @@ async function handleEditSave(t) {
   align-items: center;
   min-width: 0;
   max-width: 100%;
-  padding: 2px 6px;
+  padding: 1px 4px;
-  gap: 5px;
+  gap: 4px;
   border: 1px solid rgba(14, 165, 160, 0.16);
   border-radius: 4px;
   background: rgba(20, 184, 166, 0.06);
   color: var(--n-text-color-3);
-  font-size: 12px;
+  font-size: 11px;
-  line-height: 18px;
+  line-height: 16px;
 }
 
 .topic-comment-prefix {
@@ -550,22 +569,67 @@ async function handleEditSave(t) {
   white-space: nowrap;
 }
 
+.topic-qos-tag {
+  min-width: 56px;
+  justify-content: center;
+}
+
 .topic-actions {
   flex-shrink: 0;
+  visibility: visible;
+}
+
+.topic-actions.is-hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.topic-actions .n-button {
+  min-width: 40px;
+}
+
+.topic-actions .topic-action-sub {
+  min-width: auto;
+}
+
+.topic-actions .topic-action-remove {
+  min-width: 24px;
 }
 
 .topic-edit-row {
+  position: absolute;
+  inset: 0;
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 8px;
-  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.topic-edit-row.is-visible {
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.topic-edit-topic {
+  flex: 1 1 auto;
   min-width: 0;
 }
 
-.topic-edit-row .n-input {
+.topic-edit-comment {
-  flex: 1;
+  flex: 1 1 auto;
-  min-width: 180px;
+  min-width: 0;
+}
+
+.topic-edit-qos {
+  flex: 0 0 auto;
+  width: 160px;
+  min-width: 80px;
 }
 
 @media (max-width: 720px) {