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

src/App.vue

@@ -7,56 +7,11 @@
       </div>
 
         <div class="toolbar">
-        <div class="tool-item">
+        <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>
-
-        <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>
-        </div>
-
-        <label
-          class="upload-area"
-          @dragover.prevent
-          @drop.prevent="onDropFile"
-          @keydown.enter.prevent="openFileDialog"
-          @click="closeThemePicker"
-        >
-          <input
-            ref="fileInputRef"
-            class="hidden-input"
-            type="file"
-            accept=".csv,.xls,.xlsx"
-            @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">
-          <img :src="iconExport" alt="export" class="export-main" />
-          <button class="icon-btn export-item" type="button" @click="exportSvg">
-            <img :src="iconExportSvg" alt="export-svg" />
-          </button>
-          <button class="icon-btn export-item" type="button" @click="exportPng">
-            <img :src="iconExportPng" alt="export-png" />
-          </button>
-        </div>
-      </div>
 
           <div v-if="showThemePicker" class="theme-popover">
             <div class="theme-header">选择配色主题</div>
@@ -80,6 +35,43 @@
               </button>
             </div>
           </div>
+        </div>
+
+        <div class="tool-item">
+          <span class="tool-label">文件上传</span>
+          <button class="icon-btn" type="button" @click="openFileDialog">
+            <img :src="iconUpload" alt="upload" />
+          </button>
+        </div>
+
+        <label
+          class="upload-area"
+          @dragover.prevent
+          @drop.prevent="onDropFile"
+          @keydown.enter.prevent="openFileDialog"
+          @click="closeThemePicker"
+        >
+          <input
+            ref="fileInputRef"
+            class="hidden-input"
+            type="file"
+            accept=".csv,.xls,.xlsx"
+            @change="onFileChange"
+          />
+          <span class="upload-text">{{ uploadMessage }}</span>
+        </label>
+
+        <div class="export-box">
+          <img :src="iconExport" alt="export" class="export-main" />
+          <button class="icon-btn export-item" type="button" @click="exportSvg">
+            <img :src="iconExportSvg" alt="export-svg" />
+          </button>
+          <button class="icon-btn export-item" type="button" @click="exportPng">
+            <img :src="iconExportPng" alt="export-png" />
+          </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);

src/styles.css

@@ -76,6 +76,10 @@ body {
   gap: 4px;
 }
 
+.theme-trigger {
+  position: relative;
+}
+
 .tool-label {
   color: #1d2129;
   font-size: 14px;
@@ -100,11 +104,6 @@ body {
   object-fit: contain;
 }
 
-.icon-btn.tiny {
-  width: 14px;
-  height: 14px;
-}
-
 .upload-area {
   min-width: 280px;
   max-width: 420px;
@@ -115,6 +114,7 @@ body {
   align-items: center;
   padding: 4px 10px;
   background: var(--fill-1);
+  border: 1px solid var(--fill-3);
   cursor: pointer;
   position: relative;
 }
@@ -128,26 +128,6 @@ body {
   font-size: 12px;
 }
 
-.upload-tip {
-  position: absolute;
-  left: 0;
-  top: 44px;
-  z-index: 5;
-  width: 100%;
-  border: 1px solid var(--primary-7);
-  background: #fff;
-  border-radius: 8px;
-  padding: 8px;
-  color: var(--text-4);
-  font-size: 12px;
-}
-
-.upload-tip a {
-  color: var(--primary-7);
-  text-decoration: none;
-  font-weight: 500;
-}
-
 .export-box {
   display: flex;
   gap: 6px;
@@ -170,8 +150,9 @@ body {
 
 .theme-popover {
   position: absolute;
-  top: 80px;
-  right: 290px;
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
   width: 280px;
   border: 1px solid var(--primary-7);
   border-radius: 24px 24px 0 0;
@@ -180,6 +161,19 @@ body {
   padding: 8px;
 }
 
+.theme-popover::before {
+  content: '';
+  position: absolute;
+  top: -8px;
+  left: 50%;
+  width: 14px;
+  height: 14px;
+  background: #fff;
+  border-top: 1px solid var(--primary-7);
+  border-left: 1px solid var(--primary-7);
+  transform: translateX(-50%) rotate(45deg);
+}
+
 .theme-header {
   text-align: center;
   color: var(--primary-6);
@@ -388,11 +382,6 @@ body {
     flex-wrap: wrap;
   }
 
-  .theme-popover {
-    right: 12px;
-    top: 120px;
-  }
-
   .content {
     grid-template-columns: 1fr;
   }