历史记录列表，和下方按钮替换

src/views/components/HistoryRecord.vue

@@ -61,47 +61,78 @@
       <!-- 历史记录列表 -->
       <div class="history-list">
         <div
-          v-for="record in filteredHistory"
+          v-for="record in historyRecords"
           :key="record.id"
           class="history-item"
           @click="selectRecord(record)"
           :class="{ active: selectedRecordId === record.id }"
         >
           <div class="record-content">
-            <div class="record-type">
-              <span class="type-badge" :class="record.type">
-                {{ record.type === "AIchat" ? "夺宝奇兵" : "AI情绪" }}
-              </span>
+            <div class="record-img">
+              <img :src="marketList[record.market]" :alt="record.market" />
+            </div>
+            <div class="record-msg">
+              <div class="record-text">{{ record.code }}</div>
+              <div class="record-time">
+                {{ moment(record.date).format("D/M/YYYY") }}
+              </div>
             </div>
-            <div class="record-text">{{ record.question }}</div>
-            <div class="record-time">{{ formatTime(record.timestamp) }}</div>
           </div>
           <div class="record-actions">
-            <button
-              class="delete-btn"
-              @click.stop="deleteRecord(record.id)"
-              title="删除"
+            <el-popover
+              class="box-item"
+              placement="right-start"
+              trigger="click"
             >
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M18 6L6 18M6 6L18 18"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            </button>
+              <template #reference>
+                <el-icon class="more-btn"><MoreFilled /></el-icon>
+              </template>
+              <div class="popover-content">
+                <div class="popover-item">
+                  <img
+                    class="popover-icon"
+                    src="https://d31zlh4on95l9h.cloudfront.net/images/9ad3617c94955bcb76e1b11db70bb80b.png"
+                    alt=""
+                  />
+                  数据更新时间：{{
+                    moment(record.updateTime).format("D/M/YYYY")
+                  }}
+                </div>
+                <div v-if="record.isTop" class="popover-item popover-btn">
+                  <img
+                    class="popover-icon"
+                    src="https://d31zlh4on95l9h.cloudfront.net/images/a458305d8275734cc96bf6cad29864bf.png"
+                    alt=""
+                  />
+                  取消置顶
+                </div>
+                <div v-else class="popover-item popover-btn">
+                  <img
+                    class="popover-icon"
+                    src="https://d31zlh4on95l9h.cloudfront.net/images/a458305d8275734cc96bf6cad29864bf.png"
+                    alt=""
+                  />
+                  置顶
+                </div>
+                <div class="popover-item popover-btn">
+                  <img
+                    class="popover-icon"
+                    src="https://d31zlh4on95l9h.cloudfront.net/images/027718d41523375a69e9cac927601cf8.png"
+                    alt=""
+                  />
+                  删除
+                </div>
+              </div>
+            </el-popover>
+            <!-- <button
+              
+              @click="openDetail(record)"
+              title="更多"
+            ></button> -->
           </div>
         </div>
         <!-- 空状态 -->
-        <div v-if="filteredHistory.length === 0" class="empty-state">
+        <div v-if="historyRecords.length === 0" class="empty-state">
           <div class="empty-icon">
             <el-icon class="documentDelete"><DocumentDelete /></el-icon>
             <!-- <svg
@@ -173,14 +204,13 @@
       <!-- 历史记录列表 -->
       <div class="history-list">
         <div
-          v-for="record in filteredHistory"
+          v-for="record in historyRecords"
           :key="record.id"
           class="history-item"
           @click="selectRecord(record)"
-          :class="{ active: selectedRecordId === record.id }"
         >
           <div class="record-content">
-            <div class="record-type">
+            <div class="record-img">
               <span class="type-badge" :class="record.type">
                 {{ record.type === "AIchat" ? "夺宝奇兵" : "AI情绪" }}
               </span>
@@ -190,7 +220,7 @@
           </div>
           <div class="record-actions">
             <button
-              class="delete-btn"
+              class="more-btn"
               @click.stop="deleteRecord(record.id)"
               title="删除"
             >
@@ -213,7 +243,7 @@
           </div>
         </div>
         <!-- 空状态 -->
-        <div v-if="filteredHistory.length === 0" class="empty-state">
+        <div v-if="historyRecords.length === 0" class="empty-state">
           <div class="empty-icon">
             <el-icon class="documentDelete"><DocumentDelete /></el-icon>
             <!-- <svg
@@ -261,7 +291,7 @@
 
 <script setup>
 import { ref, computed, onMounted, watch } from "vue";
-
+import moment from "moment";
 // Props
 const props = defineProps({
   currentType: {
@@ -284,14 +314,134 @@ const emit = defineEmits([
 ]);
 
 // 响应式数据
+const marketList = ref({
+  cn: "https://d31zlh4on95l9h.cloudfront.net/images/c685daa929d80a03c26841dfa783cc3c.png",
+  usa: "https://d31zlh4on95l9h.cloudfront.net/images/bccbc3058f327f72aa158fa0852dce19.png",
+  hk: "https://d31zlh4on95l9h.cloudfront.net/images/ab050afe6867e9f961561f665ed12d10.png",
+  sg: "https://d31zlh4on95l9h.cloudfront.net/images/90c5ce1edef2235a100e3ee0ad3cac92.png",
+  vi: "https://d31zlh4on95l9h.cloudfront.net/images/59404c85889abd57dfd15040099edc1a.png",
+  th: "https://d31zlh4on95l9h.cloudfront.net/images/31f5433264cf1f84cf550995fa16d86e.png",
+  can: "https://d31zlh4on95l9h.cloudfront.net/images/26382451bfa08e6a419a2190b799dae5.png",
+  my: "https://d31zlh4on95l9h.cloudfront.net/images/7efa8487a1317ed17eacc77b58e0a26d.png",
+});
 const isCollapsed = ref(false);
 const selectedRecordId = ref(null);
-const historyRecords = ref([]);
+const historyRecords = ref([
+  // 原有数据
+  {
+    market: "cn",
+    code: "1A0001",
+    date: "2023-01-01",
+    isTop: "1",
+    updateTime: "2025-01-01",
+  },
 
-// 计算属性
-const filteredHistory = computed(() => {
-  return historyRecords.value;
-});
+  // 今日数据
+  {
+    market: "usa",
+    code: "AAPL",
+    date: "2025-01-15",
+    isTop: "1",
+    updateTime: "2025-01-15",
+  },
+  {
+    market: "hk",
+    code: "00700",
+    date: "2025-01-15",
+    isTop: "0",
+    updateTime: "2025-01-15",
+  },
+
+  // 前三日数据
+  {
+    market: "cn",
+    code: "000001",
+    date: "2025-01-14",
+    isTop: "0",
+    updateTime: "2025-01-14",
+  },
+  {
+    market: "usa",
+    code: "TSLA",
+    date: "2025-01-13",
+    isTop: "1",
+    updateTime: "2025-01-13",
+  },
+  {
+    market: "hk",
+    code: "09988",
+    date: "2025-01-12",
+    isTop: "0",
+    updateTime: "2025-01-12",
+  },
+
+  // 本周数据
+  {
+    market: "sg",
+    code: "D05",
+    date: "2025-01-13",
+    isTop: "0",
+    updateTime: "2025-01-13",
+  },
+  {
+    market: "cn",
+    code: "600519",
+    date: "2025-01-14",
+    isTop: "1",
+    updateTime: "2025-01-14",
+  },
+  {
+    market: "usa",
+    code: "NVDA",
+    date: "2025-01-10",
+    isTop: "0",
+    updateTime: "2025-01-10",
+  },
+
+  // 本月数据
+  {
+    market: "my",
+    code: "MAYBANK",
+    date: "2025-01-08",
+    isTop: "0",
+    updateTime: "2025-01-08",
+  },
+  {
+    market: "th",
+    code: "PTT",
+    date: "2025-01-05",
+    isTop: "1",
+    updateTime: "2025-01-05",
+  },
+  {
+    market: "vi",
+    code: "VIC",
+    date: "2025-01-03",
+    isTop: "0",
+    updateTime: "2025-01-03",
+  },
+  {
+    market: "can",
+    code: "SHOP",
+    date: "2025-01-02",
+    isTop: "0",
+    updateTime: "2025-01-02",
+  },
+  {
+    market: "hk",
+    code: "01299",
+    date: "2025-01-01",
+    isTop: "1",
+    updateTime: "2025-01-01",
+  },
+  {
+    market: "cn",
+    code: "000858",
+    date: "2025-01-06",
+    isTop: "0",
+    updateTime: "2025-01-06",
+  },
+]);
 
 // 方法
 const toggleCollapse = () => {
@@ -308,9 +458,13 @@ const closeHistory = () => {
   isCollapsed.value = true;
 };
 
+const openDetail = (record) => {
+  console.log("record", record);
+};
+
 const selectRecord = (record) => {
-  selectedRecordId.value = record.id;
-  emit("selectRecord", record);
+  // selectedRecordId.value = record.id;
+  // emit("selectRecord", record);
 };
 
 const deleteRecord = (recordId) => {
@@ -582,6 +736,7 @@ watch(
 
 .head-container {
   margin-top: 20%;
+  margin-bottom: 10px;
   width: 100%;
   display: flex;
   align-items: center;
@@ -626,31 +781,6 @@ watch(
   object-fit: contain;
 }
 
-.new-chat-btn {
-  width: 100%;
-  padding: 12px 16px;
-  border: none;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.new-chat-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-  transform: translateY(-1px);
-}
-
-.new-chat-btn:active {
-  transform: translateY(0);
-}
-
 .history-list {
   flex: 1;
   overflow-y: auto;
@@ -684,48 +814,28 @@ watch(
   transition: all 0.2s ease;
   border: 1px solid transparent;
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  justify-content: center;
+  align-items: center;
 }
 
 .history-item:hover {
   background: rgba(255, 255, 255, 0.1);
-  transform: translateX(4px);
-}
-
-.history-item.active {
-  background: rgba(255, 255, 255, 0.15);
-  border-color: rgba(255, 255, 255, 0.3);
 }
 
 .record-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.record-type {
-  margin-bottom: 6px;
-}
-
-.type-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 10px;
-  font-weight: 500;
-  text-transform: uppercase;
+  display: flex;
+  width: 100%;
 }
 
-.type-badge.AIchat {
-  background: rgba(52, 152, 219, 0.2);
-  color: #3498db;
-  border: 1px solid rgba(52, 152, 219, 0.3);
+.record-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20%;
 }
 
-.type-badge.AiEmotion {
-  background: rgba(155, 89, 182, 0.2);
-  color: #9b59b6;
-  border: 1px solid rgba(155, 89, 182, 0.3);
+.record-msg {
+  width: 80%;
 }
 
 .record-text {
@@ -746,20 +856,16 @@ watch(
 }
 
 .record-actions {
-  margin-left: 8px;
-  opacity: 0;
+  height: 100%;
+  /* margin-left: 8px; */
   transition: opacity 0.2s ease;
 }
 
-.history-item:hover .record-actions {
-  opacity: 1;
-}
-
-.delete-btn {
-  background: rgba(231, 76, 60, 0.2);
+.more-btn {
+  background: rgba(231, 76, 60, 0);
   border: none;
   border-radius: 4px;
-  color: #e74c3c;
+  color: white;
   padding: 4px;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -768,10 +874,33 @@ watch(
   justify-content: center;
 }
 
-.delete-btn:hover {
-  background: rgba(231, 76, 60, 0.3);
+.more-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
   transform: scale(1.1);
 }
+.popover-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.popover-item {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  /* justify-content: center; */
+}
+
+.popover-btn {
+  cursor: pointer;
+}
+
+.popover-btn:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.popover-icon {
+  margin-right: 5px;
+}
 
 .empty-state {
   display: flex;
@@ -877,3 +1006,10 @@ watch(
   }
 }
 </style>
+
+<style>
+.el-popover {
+  width: auto !important;
+  padding: 0 !important;
+}
+</style>

src/views/homePage.vue

@@ -688,7 +688,13 @@ onUnmounted(() => {
               </div>
             </div>
           </section>
-          <div class="tab-content" ref="tabContent">
+          <div
+            class="tab-content"
+            :class="{
+              pcTabContent: !isMobile,
+            }"
+            ref="tabContent"
+          >
             <component
               :is="activeComponent"
               :messages="messages"
@@ -702,7 +708,13 @@ onUnmounted(() => {
         </div>
       </el-main>
       <!-- 尾部： 问题输入框 深度思考 多语言 语音播报 -->
-      <el-footer class="homepage-footer" id="input">
+      <el-footer
+        class="homepage-footer"
+        :class="{
+          pcFooter: !isMobile,
+        }"
+        id="input"
+      >
         <!-- 第一行按钮 -->
         <div class="footer-first-line">
           <div class="left-group">
@@ -772,7 +784,11 @@ onUnmounted(() => {
           >
           </el-input>
           <img
-            :src="sendBtn"
+            :src="
+              isInputDisabled
+                ? 'https://d31zlh4on95l9h.cloudfront.net/images/aa192bcbc1682c97e1bc6fb422f2afff.png'
+                : 'https://d31zlh4on95l9h.cloudfront.net/images/e6ec2ae238ced85b74e0912e988f243e.png'
+            "
             @click="sendMessage"
             class="action-btn send-btn"
             :style="{
@@ -856,19 +872,16 @@ onUnmounted(() => {
 /* 标签栏 */
 .tab-container {
   display: flex;
-  gap: 30px;
-
   margin-bottom: 10px;
   height: 100%;
   position: relative;
+  justify-content: center;
+  align-items: center;
+  gap: 25vw;
   /* 新增右对齐 */
 }
 
 .pcTabContainer {
-  margin-left: 40px;
-  justify-content: center;
-  align-items: center;
-  gap: 25vw;
 }
 
 .tab-item {
@@ -905,6 +918,10 @@ onUnmounted(() => {
   /* 添加平滑滚动效果 */
 }
 
+.pcTabContent {
+  margin: 0 6%;
+}
+
 @media (max-width: 768px) {
   .tab-container {
     gap: 15px;
@@ -973,6 +990,7 @@ body {
   flex-direction: column;
   overflow: hidden;
 }
+
 .main-container.unCollapsed {
   margin-left: 300px; /* 为历史记录组件留出空间 */
 }
@@ -1217,10 +1235,14 @@ body {
   flex-direction: column;
   gap: 5px;
   flex-shrink: 0;
-  width: 100%;
+  /* width: 100%; */
   background-color: #fff;
 }
 
+.pcFooter {
+  margin: 0 6% 4%;
+}
+
 .footer-first-line {
   display: flex;
   justify-content: space-between;