新闻和持仓数据弹窗显示

src/App.vue

@@ -21,14 +21,35 @@
       </div>
     </section>
 
-    <NewsList
-      v-if="news"
-      :items="news"
-      :loading="newsLoading"
-      :error="newsError"
-      @refresh="refreshNews"
-    />
-    <PositionPanel v-if="positions" :data="positions" />
+    <QuickAccessFab @open-news="newsOpen = true" @open-position="positionOpen = true" />
+
+    <el-dialog
+      v-model="newsOpen"
+      title="相关新闻"
+      width="720px"
+      top="8vh"
+      class="panel-dialog"
+      destroy-on-close
+    >
+      <NewsList
+        v-if="news"
+        :items="news"
+        :loading="newsLoading"
+        :error="newsError"
+        @refresh="refreshNews"
+      />
+    </el-dialog>
+
+    <el-dialog
+      v-model="positionOpen"
+      title="机构持仓"
+      width="1100px"
+      top="5vh"
+      class="panel-dialog position-dialog"
+      destroy-on-close
+    >
+      <PositionPanel v-if="positions" :data="positions" />
+    </el-dialog>
 
     <template #ai>
       <AiAdviceDrawer
@@ -42,6 +63,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import AppLayout from './layout/AppLayout.vue'
 import AppHeader from './components/header/AppHeader.vue'
 import QuoteStats from './components/quote/QuoteStats.vue'
@@ -49,6 +71,7 @@ import ChartPanel from './components/quote/ChartPanel.vue'
 import OrderBook from './components/quote/OrderBook.vue'
 import TradeTape from './components/quote/TradeTape.vue'
 import LargeOrderAnalysis from './components/quote/LargeOrderAnalysis.vue'
+import QuickAccessFab from './components/common/QuickAccessFab.vue'
 import NewsList from './components/news/NewsList.vue'
 import PositionPanel from './components/position/PositionPanel.vue'
 import AiAdviceDrawer from './components/ai/AiAdviceDrawer.vue'
@@ -61,6 +84,9 @@ const { data: quote, klineLoading, loadKline } = useQuote()
 const { data: news, loading: newsLoading, error: newsError, refresh: refreshNews } = useNews()
 const { data: positions } = usePositions()
 const { data: advice, loading: adviceLoading, refresh: refreshAdvice } = useAiAdvice()
+
+const newsOpen = ref(false)
+const positionOpen = ref(false)
 </script>
 
 <style scoped>
@@ -77,3 +103,27 @@ const { data: advice, loading: adviceLoading, refresh: refreshAdvice } = useAiAd
   }
 }
 </style>
+
+<style>
+.panel-dialog .el-dialog__body {
+  max-height: min(72vh, 780px);
+  overflow: auto;
+  padding-top: 8px;
+}
+
+.panel-dialog .news-list,
+.panel-dialog .position-panel {
+  margin-top: 0;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+}
+
+.panel-dialog .news-list .head .section-title {
+  display: none;
+}
+
+.position-dialog {
+  --el-dialog-width: min(1100px, 96vw);
+}
+</style>

src/components/common/QuickAccessFab.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="fab-stack">
+    <button type="button" class="fab" @click="emit('open-news')">新闻</button>
+    <button type="button" class="fab" @click="emit('open-position')">持仓</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits<{
+  'open-news': []
+  'open-position': []
+}>()
+</script>
+
+<style scoped>
+.fab-stack {
+  position: fixed;
+  right: 20px;
+  bottom: calc(var(--ai-bar-height) + 20px);
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.fab {
+  min-width: 56px;
+  height: 40px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 20px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(22, 119, 255, 0.35);
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+
+.fab:hover {
+  background: #4096ff;
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(22, 119, 255, 0.4);
+}
+
+.fab:active {
+  transform: translateY(0);
+}
+</style>

src/components/quote/LargeOrderAnalysis.vue

@@ -22,7 +22,6 @@
         </div>
       </div>
     </div>
-    <div class="hint">大单阈值 &gt; {{ threshold }} 手</div>
   </div>
 </template>