style: 优化 CellData 扫描路径排版

frontend/src/components/SettingsPanel.vue

@@ -293,7 +293,7 @@
                 <n-form-item label="扫描路径">
                   <div class="cell-data-path-editor">
                     <div class="cell-data-path-header">
-                      <span class="form-hint">支持路径模板和多目录组合</span>
+                      <span>支持路径模板和多目录组合</span>
                       <n-button quaternary circle size="small" title="查看说明" @click="cellDataHelpVisible = true">
                         <template #icon>
                           <n-icon><InformationCircleOutline /></n-icon>
@@ -310,8 +310,8 @@
                         </n-button>
                       </div>
                     </div>
-                    <n-input-group>
-                      <n-input v-model:value="newCellDataScanPath" placeholder="扫描路径模板" @keydown.enter.prevent="addCellDataScanPath" />
+                    <n-input-group class="cell-data-path-add">
+                      <n-input v-model:value="newCellDataScanPath" placeholder="添加扫描路径模板" @keydown.enter.prevent="addCellDataScanPath" />
                       <n-button @click="addCellDataScanPath">添加</n-button>
                     </n-input-group>
                   </div>

frontend/src/styles.css

@@ -1579,9 +1579,10 @@ select {
 .cell-data-path-editor,
 .cell-data-path-list {
   display: flex;
+  width: 100%;
   min-width: 0;
   flex-direction: column;
-  gap: 8px;
+  gap: 10px;
 }
 
 .cell-data-path-header {
@@ -1589,6 +1590,9 @@ select {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
+  color: var(--td-text-color-placeholder);
+  font-size: 12px;
+  line-height: 20px;
 }
 
 .cell-data-path-row {
@@ -1597,6 +1601,15 @@ select {
   gap: 8px;
 }
 
+.cell-data-path-add {
+  width: 100%;
+}
+
+.cell-data-path-row .n-input,
+.cell-data-path-add .n-input {
+  min-width: 0;
+}
+
 .cell-data-help-scroll {
   max-height: 360px;
 }