feat: 首页消息的界面搭建

2026-01-05 18:14:45 +08:00
parent 4b46484cfe
commit 7288b94996
4 changed files with 943 additions and 5 deletions
--- a/src/renderer/views/home/ChatGuide.vue
+++ b/src/renderer/views/home/ChatGuide.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="chat-guide">
+    <div class="hero-area">
+      <h1 class="greet">你好，<br/>我今天能帮你什么？</h1>
+
+      <div class="input-wrap">
+        <div class="tag">智能问数</div>
+        <div class="fake-input">
+          <div class="placeholder">给我发布或者布置任务</div>
+          <div class="actions">
+            <button class="link">🔗</button>
+            <button class="send">✈</button>
+          </div>
+        </div>
+      </div>
+      <div class="task-header">
+        <h3>任务中心</h3>
+        <a class="edit">编辑</a>
+      </div>
+    </div>
+
+    <div class="task-area">
+      <div class="task-list">
+        <div class="task-card" v-for="n in 14" :key="n">
+          <div class="task-icon">销</div>
+          <div class="task-body">
+            <div class="task-title">每日销售数据</div>
+            <div class="task-desc">分析用于销售渠道每日数据汇总及简要展示</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped>
+.chat-guide {
+  height: 100%;
+  overflow: visible;
+  background: #fff;
+  padding: 40px 48px;
+  box-sizing: border-box;
+}
+
+.hero-area {
+  position: sticky;
+  top: 0;
+  background: #ffffff;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  z-index: 10;
+}
+
+.greet {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0 0 28px 0;
+}
+
+.input-wrap { display:flex; flex-direction:column; align-items:stretch; gap:12px }
+.tag {
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width: 108px;
+  padding:6px 10px;
+  border-radius: 16px;
+  background: transparent;
+  color:#333;
+  font-size:13px;
+  border: 1px solid #E5E8EE;
+  box-sizing: border-box;
+}
+
+.fake-input {
+  height: 174px;
+  background: #fff;
+  border-radius: 8px;
+  padding: 18px;
+  border: 1px solid #eef2f6;
+  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
+  display:flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.placeholder { color:#bfc9d4 }
+.actions { display:flex; justify-content: space-between; align-items: center; width:100% }
+.actions .link { background:transparent; border:none; color:#9fb0c4 }
+.actions .send { background:#f1f6fb; border:none; padding:6px 10px; border-radius:6px }
+
+.task-area { margin-top: 20px }
+.task-header { display:flex; justify-content:space-between; align-items:center; margin:16px 0 }
+.task-header h3 { margin:0; font-size:16px }
+.task-header .edit { color:#3b82f6; font-size:13px }
+
+.task-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px }
+.task-card {
+  display:flex;
+  gap:12px;
+  align-items:flex-start;
+  padding: 14px;
+  border-radius: 10px;
+  border: 1px solid #dfeaf6;
+  background:#fff;
+}
+.task-icon { width:44px;height:44px;background: #EFF6FF; border-radius:8px;border:1px dashed #9fc0e8;display:flex;align-items:center;justify-content:center;color:#3b82f6; font-size: 23px; }
+.task-title { font-weight:600 }
+.task-desc { color:#9aa5b1; font-size:13px; margin-top:6px }
+
+/* make content under hero scroll while hero stays sticky */
+.chat-guide::before{ content:''; display:block; height:8px }
+
+@media (max-width: 800px){
+  .chat-guide { padding:20px }
+  .task-list { grid-template-columns: 1fr }
+}
+
+</style>