Procházet zdrojové kódy

style: 将快捷操作按钮移至欢迎区右侧更显眼位置

何文松 před 4 týdny
rodič
revize
cd67c34183
1 změnil soubory, kde provedl 66 přidání a 78 odebrání
  1. 66 78
      frontend/vue-demo/src/views/Home.vue

+ 66 - 78
frontend/vue-demo/src/views/Home.vue

@@ -1,9 +1,21 @@
 <template>
   <div class="home-page">
-    <!-- 欢迎区 -->
+    <!-- 欢迎区 + 快捷操作 -->
     <div class="welcome-section">
-      <h1>{{ greeting }},{{ username }}!<span class="gradient-text">智能报告,洞察未来。</span></h1>
-      <p>今天是个创作的好日子,开始您的智能报告之旅吧</p>
+      <div class="welcome-left">
+        <h1>{{ greeting }},{{ username }}!<span class="gradient-text">智能报告,洞察未来。</span></h1>
+        <p>今天是个创作的好日子,开始您的智能报告之旅吧</p>
+      </div>
+      <div class="welcome-actions">
+        <el-button type="primary" size="large" @click="showUploadDialog = true">
+          <span class="action-icon">📤</span>
+          上传模板
+        </el-button>
+        <el-button size="large" @click="showCreateDialog = true">
+          <span class="action-icon">🛠️</span>
+          创建模板
+        </el-button>
+      </div>
     </div>
 
     <!-- 统计卡片 -->
@@ -113,28 +125,6 @@
       </el-row>
     </div>
 
-    <!-- 快捷操作 -->
-    <el-row :gutter="16" class="quick-actions">
-      <el-col :span="12">
-        <div class="quick-action" @click="showUploadDialog = true">
-          <div class="quick-action-icon">📤</div>
-          <div>
-            <div class="quick-action-title">上传新模板</div>
-            <div class="quick-action-desc">从 Word 文档创建模板</div>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="12">
-        <div class="quick-action" @click="showCreateDialog = true">
-          <div class="quick-action-icon">🛠️</div>
-          <div>
-            <div class="quick-action-title">创建新模板</div>
-            <div class="quick-action-desc">从空白开始创建</div>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-
     <!-- 创建模板对话框 -->
     <el-dialog v-model="showCreateDialog" title="创建新模板" width="500">
       <el-form :model="newTemplate" label-width="80px">
@@ -454,22 +444,61 @@ async function handleUploadTemplate() {
 
 // 欢迎区
 .welcome-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 20px;
+  padding: 24px;
+  background: var(--white);
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  
+  .welcome-left {
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
 
-  h1 {
-    font-size: 24px;
-    font-weight: 600;
-    margin-bottom: 4px;
-  }
+    .gradient-text {
+      background: var(--ai-gradient);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
 
-  .gradient-text {
-    background: var(--ai-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    p {
+      color: var(--text-2);
+      margin: 0;
+    }
   }
-
-  p {
-    color: var(--text-2);
+  
+  .welcome-actions {
+    display: flex;
+    gap: 12px;
+    
+    .el-button {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      height: 44px;
+      padding: 0 20px;
+      font-size: 14px;
+      font-weight: 500;
+      border-radius: 8px;
+      
+      .action-icon {
+        font-size: 16px;
+      }
+    }
+    
+    .el-button--primary {
+      background: var(--primary-gradient);
+      border: none;
+      
+      &:hover {
+        box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
+      }
+    }
   }
 }
 
@@ -555,47 +584,6 @@ async function handleUploadTemplate() {
   }
 }
 
-// 快捷操作
-.quick-actions {
-  .quick-action {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 16px;
-    background: var(--white);
-    border: 2px dashed var(--border);
-    border-radius: 10px;
-    cursor: pointer;
-    transition: all 0.2s;
-
-    &:hover {
-      border-color: var(--primary);
-      background: var(--primary-light);
-    }
-
-    .quick-action-icon {
-      width: 40px;
-      height: 40px;
-      background: var(--bg);
-      border-radius: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 20px;
-    }
-
-    .quick-action-title {
-      font-weight: 600;
-      margin-bottom: 2px;
-    }
-
-    .quick-action-desc {
-      font-size: 12px;
-      color: var(--text-3);
-    }
-  }
-}
-
 // 上传区域
 .upload-area {
   width: 100%;