update at 2026-02-12 17:42:11

src/App.vue

@@ -6,19 +6,39 @@
         <img :src="iconTitle" alt="星程桑基图" class="title-logo" />
       </div>
 
-      <div class="toolbar">
-        <div class="tool-item">
+        <div class="toolbar">
+        <div class="tool-item theme-trigger">
           <span class="tool-label">选择主题</span>
           <button class="icon-btn" type="button" @click="toggleThemePicker">
             <img :src="iconChooseColor" alt="choose-color" />
           </button>
+
+          <div v-if="showThemePicker" class="theme-popover">
+            <div class="theme-header">选择配色主题</div>
+            <div class="theme-list">
+              <button
+                v-for="theme in themes"
+                :key="theme.id"
+                class="theme-row"
+                type="button"
+                @click="pickTheme(theme.id)"
+              >
+                <img :src="selectedThemeId === theme.id ? iconRadioOn : iconRadioOff" alt="主题选择" />
+                <div class="palette">
+                  <span
+                    v-for="color in theme.colors"
+                    :key="`${theme.id}-${color}`"
+                    class="palette-cell"
+                    :style="{ backgroundColor: color }"
+                  />
+                </div>
+              </button>
+            </div>
+          </div>
         </div>
 
         <div class="tool-item">
           <span class="tool-label">文件上传</span>
-          <button class="icon-btn tiny" type="button" @click="toggleUploadTip">
-            <img :src="iconContent" alt="内容说明" />
-          </button>
           <button class="icon-btn" type="button" @click="openFileDialog">
             <img :src="iconUpload" alt="upload" />
           </button>
@@ -39,12 +59,6 @@
             @change="onFileChange"
           />
           <span class="upload-text">{{ uploadMessage }}</span>
-          <span v-if="showUploadTip" class="upload-tip">
-            支持点击上传或拖拽 CSV/XLS/XLSX。模板：
-            <a href="/data/example.xlsx" download>xlsx</a>
-            /
-            <a href="/data/拉流切图节点与算法池信息.csv" download>csv</a>
-          </span>
         </label>
 
         <div class="export-box">
@@ -58,28 +72,6 @@
         </div>
       </div>
 
-      <div v-if="showThemePicker" class="theme-popover">
-        <div class="theme-header">选择配色主题</div>
-        <div class="theme-list">
-          <button
-            v-for="theme in themes"
-            :key="theme.id"
-            class="theme-row"
-            type="button"
-            @click="pickTheme(theme.id)"
-          >
-            <img :src="selectedThemeId === theme.id ? iconRadioOn : iconRadioOff" alt="主题选择" />
-            <div class="palette">
-              <span
-                v-for="color in theme.colors"
-                :key="`${theme.id}-${color}`"
-                class="palette-cell"
-                :style="{ backgroundColor: color }"
-              />
-            </div>
-          </button>
-        </div>
-      </div>
     </header>
 
     <main class="content">
@@ -224,7 +216,6 @@ import iconWebLogo from '../assets/icons/webicon.png';
 import iconTitle from '../assets/icons/星程字体转换.svg';
 import iconChooseColor from '../assets/icons/choose-color.svg';
 import iconUpload from '../assets/icons/upload.svg';
-import iconContent from '../assets/icons/content.svg';
 import iconExport from '../assets/icons/export.svg';
 import iconExportSvg from '../assets/icons/export-svg.svg';
 import iconExportPng from '../assets/icons/export-png.svg';
@@ -263,7 +254,6 @@ const themes = [
 
 const selectedThemeId = ref<(typeof themes)[number]['id']>('purple');
 const showThemePicker = ref(false);
-const showUploadTip = ref(false);
 const uploadMessage = ref('点击上传或将csv/xls文件拖到这里上传');
 const parseError = ref('');
 const buildError = ref('');
@@ -441,10 +431,6 @@ function pickTheme(themeId: (typeof themes)[number]['id']): void {
   showThemePicker.value = false;
 }
 
-function toggleUploadTip(): void {
-  showUploadTip.value = !showUploadTip.value;
-}
-
 function toggleSourceDescription(column: number): void {
   if (mapping.sourceDescriptionColumns.includes(column)) {
     mapping.sourceDescriptionColumns = mapping.sourceDescriptionColumns.filter((item) => item !== column);