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);

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;
   }