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

1 week ago · 0665c3b218
6 changed files with 276 additions and 118 deletions
--- a/src/assets/img/AiEmotion/dbqb-button01.png
+++ b/src/assets/img/AiEmotion/dbqb-button01.png
--- a/src/assets/img/AiEmotion/dbqb-button02.png
+++ b/src/assets/img/AiEmotion/dbqb-button02.png
--- a/src/assets/img/AiEmotion/emotion-button01.png
+++ b/src/assets/img/AiEmotion/emotion-button01.png
--- a/src/assets/img/AiEmotion/emotion-button02.png
+++ b/src/assets/img/AiEmotion/emotion-button02.png
--- a/src/views/components/HistoryRecord.vue
+++ b/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;
@ -876,4 +1005,11 @@ watch(
    /* padding: 15px; */
  }
 }
+</style>
+
+<style>
+.el-popover {
+  width: auto !important;
+  padding: 0 !important;
+}
 </style>
--- a/src/views/homePage.vue
+++ b/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;