优化：图片选择组件ImageSourcePicker.vue

frontend/src/core/components/ImageSourcePicker.vue

@@ -50,32 +50,32 @@
 
       <!-- 文件库面板（树形文件夹浏览） -->
       <div v-if="activePanel === 'library'" class="library-panel">
-        <div class="panel-header">
-          <n-button text @click="activePanel = ''">
-            <Icon icon="tabler:arrow-left" :size="18" />
-            {{ t('Back') }}
-          </n-button>
+        <!-- 导航栏：返回 + 面包屑 -->
+        <div class="library-navbar">
+          <button class="back-btn" @click="activePanel = ''" :title="t('Back')">
+            <Icon icon="tabler:arrow-left" :size="16" />
+          </button>
+          <div class="navbar-breadcrumb">
+            <span
+              v-for="(crumb, i) in breadcrumbs"
+              :key="crumb.value"
+              class="crumb"
+              :class="{ active: i === breadcrumbs.length - 1 }"
+              @click="navigateTo(crumb.value, i)"
+            >{{ crumb.label }}</span>
+          </div>
         </div>
-        <!-- 面包屑导航 -->
-        <div class="library-breadcrumb">
-          <span
-            v-for="(crumb, i) in breadcrumbs"
-            :key="crumb.value"
-            class="breadcrumb-item"
-            :class="{ active: i === breadcrumbs.length - 1 }"
-            @click="navigateTo(crumb.value, i)"
-          >{{ crumb.label }}</span>
-        </div>
-        <!-- 搜索 -->
+        <!-- 搜索框（居中，独占一行） -->
         <div class="library-search">
           <n-input
             v-model:value="librarySearch"
-            :placeholder="t('Search files...')"
+            :placeholder="t('Search')"
+            size="small"
             clearable
             @input="searchLibrary"
           >
             <template #prefix>
-              <Icon icon="tabler:search" :size="16" />
+              <Icon icon="tabler:search" :size="14" />
             </template>
           </n-input>
         </div>
@@ -273,7 +273,7 @@ function navigateTo(folder: string, index: number) {
   loadFolder(folder)
 }
 
-async function searchLibrary() {
+function searchLibrary() {
   if (searchTimer) clearTimeout(searchTimer)
   const query = librarySearch.value.trim()
   if (!query) {
@@ -410,41 +410,69 @@ function insertFromUrl() {
   flex-direction: column;
 }
 
-/* 面包屑 */
-.library-breadcrumb {
+/* 导航栏 */
+.library-navbar {
   display: flex;
   align-items: center;
-  gap: 4px;
-  margin-bottom: 10px;
-  font-size: 13px;
-  color: #94a3b8;
-  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 6px;
 }
 
-.breadcrumb-item {
+.back-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
   cursor: pointer;
   color: #64748b;
+  flex-shrink: 0;
+  transition: all 0.15s;
+}
+
+.back-btn:hover {
+  background: #f1f5f9;
+  color: #334155;
+}
+
+.navbar-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  font-size: 13px;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.crumb {
+  cursor: pointer;
+  color: #64748b;
+  white-space: nowrap;
   transition: color 0.15s;
 }
 
-.breadcrumb-item:hover {
+.crumb:hover {
   color: #1fc76f;
 }
 
-.breadcrumb-item.active {
+.crumb.active {
   color: #334155;
   font-weight: 500;
   cursor: default;
 }
 
-.breadcrumb-item + .breadcrumb-item::before {
+.crumb + .crumb::before {
   content: '/';
-  margin-right: 4px;
+  margin: 0 4px;
   color: #cbd5e1;
 }
 
 .library-search {
-  margin-bottom: 12px;
+  margin-bottom: 10px;
 }
 
 .library-list {