From edd1bf94f9036f24e279c0844bc1a8940da72d98 Mon Sep 17 00:00:00 2001
From: ArvinLovegood <arvinlovegood@163.com>
Date: Fri, 4 Jul 2025 17:56:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=E6=B7=BB=E5=8A=A0=E5=90=8D?=
 =?UTF-8?q?=E7=AB=99=E4=BC=98=E9=80=89=E5=8A=9F=E8=83=BD=E5=B9=B6=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E5=B5=8C=E5=85=A5=E5=A4=96=E9=83=A8URL=E7=9A=84?=
 =?UTF-8?q?=E9=80=9A=E7=94=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 Market 组件中添加名站优选选项卡- 新增 EmbeddedUrl 组件用于嵌入外部网页
- 创建 Stockhotmap 组件，整合多个财经网站的热图和排行榜
---
 frontend/src/components/EmbeddedUrl.vue | 133 ++++++++++++++++++++++++
 frontend/src/components/market.vue      |   4 +
 frontend/src/components/stockhotmap.vue |  32 ++++++
 3 files changed, 169 insertions(+)
 create mode 100644 frontend/src/components/EmbeddedUrl.vue
 create mode 100644 frontend/src/components/stockhotmap.vue

diff --git a/frontend/src/components/EmbeddedUrl.vue b/frontend/src/components/EmbeddedUrl.vue
new file mode 100644
index 0000000..4cdacca
--- /dev/null
+++ b/frontend/src/components/EmbeddedUrl.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="embed-container">
+    <h3 v-if="title">{{ title }}</h3>
+    <div class="iframe-wrapper">
+      <iframe
+          :src="url"
+          :title="iframeTitle"
+          frameborder="0"
+          scrolling="auto"
+          class="embedded-iframe"
+          @load="onLoad"
+          @error="onError"
+          :style="iframeStyle"
+      ></iframe>
+    </div>
+    <div v-if="loading" class="loading-indicator">
+      <div class="spinner"></div>
+      <p>加载中...</p>
+    </div>
+    <p v-if="error" class="error-message">{{ error }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue'
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  iframeTitle: {
+    type: String,
+    default: '外部内容'
+  },
+  width: {
+    type: String,
+    default: '100%'
+  },
+  height: {
+    type: String,
+    default: '100%'
+  }
+})
+
+const loading = ref(true)
+const error = ref(null)
+
+const onLoad = () => {
+  loading.value = false
+  error.value = null
+}
+
+const onError = (event) => {
+  loading.value = false
+  error.value = `加载失败: ${event.message || '无法加载该 URL'}`
+}
+
+// 监听 URL 变化，重新加载
+watch(() => props.url, () => {
+  loading.value = true
+  error.value = null
+})
+
+// 设置 iframe 样式
+const iframeStyle = {
+  width: props.width,
+  height: props.height
+}
+</script>
+
+<style scoped>
+.embed-container {
+  margin: 1rem 0;
+  border: 0 solid #e5e7eb;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.iframe-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.embedded-iframe {
+  display: block;
+  width: 100%;
+  min-height: 400px;
+  transition: opacity 0.3s ease;
+}
+
+.loading-indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.8);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+.spinner {
+  width: 2rem;
+  height: 2rem;
+  border: 3px solid #f3f4f6;
+  border-radius: 50%;
+  border-top-color: #3b82f6;
+  animation: spin 1s linear infinite;
+  margin-bottom: 0.5rem;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.error-message {
+  color: #ef4444;
+  padding: 1rem;
+  margin: 0;
+  background-color: #fee2e2;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/market.vue b/frontend/src/components/market.vue
index f8e98f8..6b7f66e 100644
--- a/frontend/src/components/market.vue
+++ b/frontend/src/components/market.vue
@@ -32,6 +32,7 @@ import HotTopics from "./HotTopics.vue";
 import InvestCalendarTimeLine from "./InvestCalendarTimeLine.vue";
 import ClsCalendarTimeLine from "./ClsCalendarTimeLine.vue";
 import SelectStock from "./SelectStock.vue";
+import Stockhotmap from "./stockhotmap.vue";
 
 const route = useRoute()
 const icon = ref('https://raw.githubusercontent.com/ArvinLovegood/go-stock/master/build/appicon.png');
@@ -599,6 +600,9 @@ function ReFlesh(source) {
       <n-tab-pane name="指标选股" tab="指标选股">
         <select-stock />
       </n-tab-pane>
+      <n-tab-pane name="名站优选" tab="名站优选">
+        <Stockhotmap />
+      </n-tab-pane>
     </n-tabs>
   </n-card>
   <n-modal transform-origin="center" v-model:show="summaryModal" preset="card" style="width: 800px;"
diff --git a/frontend/src/components/stockhotmap.vue b/frontend/src/components/stockhotmap.vue
new file mode 100644
index 0000000..630c00f
--- /dev/null
+++ b/frontend/src/components/stockhotmap.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+
+import EmbeddedUrl from "./EmbeddedUrl.vue";
+</script>
+
+<template>
+  <n-tabs  type="line" animated>
+    <n-tab-pane name="百度股市通" tab="百度股市通">
+      <embedded-url url="https://gushitong.baidu.com"  :height="'calc(100vh - 252px)'"/>
+    </n-tab-pane>
+    <n-tab-pane name="东财大盘星图" tab="东财大盘星图">
+      <embedded-url url="https://quote.eastmoney.com/stockhotmap/"  :height="'calc(100vh - 252px)'"/>
+    </n-tab-pane>
+    <n-tab-pane name="TopHub" tab="TopHub(今日热榜)">
+      <embedded-url url="https://tophub.today/c/finance"  :height="'calc(100vh - 252px)'"/>
+    </n-tab-pane>
+    <n-tab-pane name="摸鱼" tab="摸鱼">
+      <embedded-url url="https://996.ninja/"  :height="'calc(100vh - 252px)'"/>
+    </n-tab-pane>
+
+
+    <n-tab-pane name="欢迎推荐更多有趣的财经网页" tab="欢迎推荐更多有趣的财经网页">
+    </n-tab-pane>
+<!--    <n-tab-pane name="自在量化" tab="自在量化">-->
+<!--      <embedded-url url="https://quant.zizizaizai.com/home"/>-->
+<!--    </n-tab-pane>-->
+  </n-tabs>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file