Răsfoiți Sursa

refactor(editor): 简化欢迎页,新建报告改为下拉菜单

- 删除欢迎页的三个 tip-card 卡片
- 更新欢迎词为个性化问候语(根据时间段)
- 新建报告按钮改为下拉菜单形式
- 下拉菜单包含"创建空白报告"和"上传文件创建"两个选项
何文松 3 săptămâni în urmă
părinte
comite
a90e096c47
1 a modificat fișierele cu 115 adăugiri și 105 ștergeri
  1. 115 105
      frontend/vue-demo/src/views/Editor.vue

+ 115 - 105
frontend/vue-demo/src/views/Editor.vue

@@ -40,15 +40,39 @@
 
         <!-- 我的报告面板 -->
         <div class="panel-body reports-panel" v-show="leftPanelTab === 'reports'">
-          <!-- 新建报告按钮 -->
-          <el-button 
-            class="new-report-btn" 
-            type="primary" 
-            :icon="Plus"
-            @click="handleCreateReport"
+          <!-- 新建报告按钮(带下拉菜单) -->
+          <el-popover
+            placement="bottom-start"
+            :width="240"
+            trigger="click"
+            popper-class="new-report-popover"
           >
-            新建报告
-          </el-button>
+            <template #reference>
+              <el-button 
+                class="new-report-btn" 
+                type="primary" 
+                :icon="Plus"
+              >
+                新建报告
+              </el-button>
+            </template>
+            <div class="new-report-menu">
+              <div class="menu-item" @click="handleCreateReport">
+                <div class="menu-icon">📄</div>
+                <div class="menu-content">
+                  <div class="menu-title">创建空白报告</div>
+                  <div class="menu-desc">从零开始创建新报告</div>
+                </div>
+              </div>
+              <div class="menu-item" @click="handleUploadFile">
+                <div class="menu-icon">📁</div>
+                <div class="menu-content">
+                  <div class="menu-title">上传文件创建</div>
+                  <div class="menu-desc">上传 PDF/Word 自动解析</div>
+                </div>
+              </div>
+            </div>
+          </el-popover>
 
           <!-- 报告搜索 -->
           <el-input
@@ -182,25 +206,9 @@
         <div class="welcome-page" v-if="!hasActiveDocument">
           <div class="welcome-content">
             <div class="welcome-logo">灵</div>
-            <h1 class="welcome-title">欢迎使用灵越智报</h1>
-            <p class="welcome-subtitle">智能报告生成平台,让报告写作更高效</p>
-            
-            <div class="welcome-tips">
-              <div class="tip-card" @click="handleCreateReport">
-                <div class="tip-icon">📄</div>
-                <div class="tip-title">创建报告</div>
-                <div class="tip-desc">从零开始创建新报告</div>
-              </div>
-              <div class="tip-card" @click="handleUploadFile">
-                <div class="tip-icon">📁</div>
-                <div class="tip-title">上传文件</div>
-                <div class="tip-desc">上传 PDF/Word 自动解析</div>
-              </div>
-              <div class="tip-card" @click="handleAiAssist">
-                <div class="tip-icon">🤖</div>
-                <div class="tip-title">AI 辅助</div>
-                <div class="tip-desc">智能识别实体和关系</div>
-              </div>
+            <div class="welcome">
+              <h1>{{ greetingText }},{{ userName }}!<span>智能报告,洞察未来。</span></h1>
+              <p>今天是个创作的好日子,开始您的智能报告之旅吧</p>
             </div>
           </div>
         </div>
@@ -588,6 +596,19 @@ const currentReportId = ref(null)
 // 是否有当前激活的文档
 const hasActiveDocument = computed(() => !!currentDocumentId.value)
 
+// 欢迎页问候语
+const userName = ref('用户')  // TODO: 从用户信息获取
+const greetingText = computed(() => {
+  const hour = new Date().getHours()
+  if (hour < 6) return '凌晨好'
+  if (hour < 9) return '早上好'
+  if (hour < 12) return '上午好'
+  if (hour < 14) return '中午好'
+  if (hour < 18) return '下午好'
+  if (hour < 22) return '晚上好'
+  return '夜深了'
+})
+
 const reportTitle = ref('')
 const titleMeasure = ref(null)
 const titleInputWidth = ref(120)
@@ -2741,6 +2762,49 @@ onUnmounted(() => {
     }
   }
   
+  // 新建报告下拉菜单样式
+  .new-report-menu {
+    padding: 4px 0;
+    
+    .menu-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 12px 14px;
+      cursor: pointer;
+      border-radius: var(--radius-sm);
+      transition: all 0.2s;
+      
+      &:hover {
+        background: var(--bg);
+      }
+      
+      .menu-icon {
+        font-size: 24px;
+        flex-shrink: 0;
+        line-height: 1;
+      }
+      
+      .menu-content {
+        flex: 1;
+        min-width: 0;
+      }
+      
+      .menu-title {
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--text-1);
+        margin-bottom: 4px;
+      }
+      
+      .menu-desc {
+        font-size: 12px;
+        color: var(--text-3);
+        line-height: 1.4;
+      }
+    }
+  }
+  
   .report-search {
     :deep(.el-input__wrapper) {
       border-radius: 18px;
@@ -3140,14 +3204,14 @@ onUnmounted(() => {
     
     .welcome-content {
       text-align: center;
-      max-width: 560px;
+      max-width: 600px;
       padding: 48px;
     }
     
     .welcome-logo {
       width: 80px;
       height: 80px;
-      margin: 0 auto 28px;
+      margin: 0 auto 32px;
       background: linear-gradient(135deg, var(--primary) 0%, #69c0ff 100%);
       border-radius: 16px;
       display: flex;
@@ -3159,85 +3223,31 @@ onUnmounted(() => {
       box-shadow: 0 12px 32px rgba(24, 144, 255, 0.3);
     }
     
-    .welcome-title {
-      font-size: 26px;
-      font-weight: 700;
-      color: var(--text-1);
-      margin-bottom: 10px;
-      
-      span {
-        background: var(--ai-gradient);
-        background-clip: text;
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-      }
-    }
-    
-    .welcome-subtitle {
-      font-size: 15px;
-      color: var(--text-3);
-      margin-bottom: 40px;
-      line-height: 1.6;
-    }
-    
-    .welcome-actions {
-      display: flex;
-      justify-content: center;
-      gap: 16px;
-      margin-bottom: 48px;
-      
-      .el-button {
-        min-width: 140px;
-        height: 44px;
-        font-size: 14px;
-        border-radius: var(--radius-md);
-      }
-    }
-    
-    .welcome-tips {
-      display: flex;
-      justify-content: center;
-      gap: 20px;
-      
-      .tip-card {
-        background: var(--bg);
-        border: 1px solid var(--border);
-        border-radius: var(--radius-lg);
-        padding: 24px;
-        min-width: 150px;
-        max-width: 180px;
-        transition: all 0.25s;
-        cursor: pointer;
-        
-        &:hover {
-          border-color: var(--primary);
-          background: var(--primary-light);
-          transform: translateY(-4px);
-          box-shadow: var(--shadow-md);
-        }
-        
-        &:active {
-          transform: translateY(-2px);
-        }
-        
-        .tip-icon {
-          font-size: 32px;
-          margin-bottom: 12px;
-        }
-        
-        .tip-title {
-          font-size: 14px;
-          font-weight: 600;
-          color: var(--text-1);
-          margin-bottom: 6px;
-        }
+    .welcome {
+      h1 {
+        font-size: 28px;
+        font-weight: 700;
+        color: var(--text-1);
+        margin-bottom: 12px;
+        line-height: 1.4;
         
-        .tip-desc {
-          font-size: 12px;
-          color: var(--text-3);
-          line-height: 1.5;
+        span {
+          display: block;
+          font-size: 20px;
+          font-weight: 500;
+          background: var(--ai-gradient);
+          background-clip: text;
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          margin-top: 8px;
         }
       }
+      
+      p {
+        font-size: 15px;
+        color: var(--text-3);
+        line-height: 1.6;
+      }
     }
   }