fix: 优化样式

2026-04-13 23:54:43 +08:00 · 2026-04-13 23:54:43 +08:00 · 8a6df28920
parent 6f9bff1f1f
commit 8a6df28920
5 changed files with 286 additions and 14 deletions
--- a/dashboard/src/App.vue
+++ b/dashboard/src/App.vue
@ -16,11 +16,14 @@ const { isLoggedIn } = useAuth()

 <style scoped>
 #app { 
-  min-height: 100vh; 
+  height: 100vh; 
+  overflow-y: auto;
  background: var(--bg); 
 }
 .main-content { 
+  height: 100%;
  padding: 0; 
-  min-height: 100vh; 
+  display: flex;
+  flex-direction: column;
 }
 </style>
--- a/dashboard/src/components/MessageNav.vue
+++ b/dashboard/src/components/MessageNav.vue
@ -0,0 +1,128 @@
+<template>
+  <div v-if="messages.length > 0" class="bookmark-rail">
+    <div
+      v-for="msg in userMessages"
+      :key="msg.id"
+      class="bookmark"
+      :class="{ active: activeId === msg.id }"
+      @click="$emit('scrollTo', msg.id)"
+    >
+      <div class="bookmark-dot"></div>
+      <div class="bookmark-label">{{ preview(msg) }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  messages: { type: Array, required: true },
+  activeId: { type: String, default: null },
+})
+
+defineEmits(['scrollTo'])
+
+const userMessages = computed(() => props.messages.filter(m => m.role === 'user'))
+
+function preview(msg) {
+  if (!msg.text) return '...'
+  // Clean markdown characters
+  const clean = msg.text.replace(/[#*`~>\-\[\]()]/g, '').replace(/\s+/g, ' ').trim()
+  const MAX_LENGTH = 30
+  return clean.length > MAX_LENGTH ? clean.slice(0, MAX_LENGTH) + '...' : clean
+}
+</script>
+
+<style scoped>
+.bookmark-rail {
+  position: fixed;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 10px;
+  height: 70vh;
+  max-height: 400px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 4px 0;
+  transition: width 0.25s ease;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  margin-right: 40px;
+}
+
+.bookmark-rail::-webkit-scrollbar {
+  display: none;
+}
+
+.bookmark-rail:hover {
+  width: 10vw;
+  max-width: 160px;
+}
+
+.bookmark {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 5px 6px;
+  cursor: pointer;
+  border-radius: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  background: transparent;
+  transition: background 0.15s;
+}
+
+.bookmark:hover {
+  background: var(--bg-hover);
+  border-radius: 6px 0 0 6px;
+}
+
+.bookmark.active {
+  background: var(--bg-active);
+  border-radius: 6px 0 0 6px;
+}
+
+.bookmark-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 1.5px;
+  flex-shrink: 0;
+  background: #3b82f6;
+  opacity: 0.35;
+  transition: all 0.2s ease;
+}
+
+.bookmark.active .bookmark-dot,
+.bookmark-rail:hover .bookmark-dot {
+  opacity: 1;
+  width: 6px;
+  height: 6px;
+}
+
+.bookmark-label {
+  margin-left: 8px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--text-secondary);
+  opacity: 0;
+  transform: translateX(8px);
+  transition: all 0.2s ease;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bookmark-rail:hover .bookmark-label {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.bookmark.active .bookmark-label {
+  color: var(--text-primary);
+}
+</style>
--- a/dashboard/src/views/ConversationsView.vue
+++ b/dashboard/src/views/ConversationsView.vue
@ -25,8 +25,20 @@
            <div class="conv-item-meta">
              <span class="conv-item-model">{{ c.model || '-' }}</span>
              <div class="conv-item-actions" @click.stop>
-                <button @click="editTitle(c)" class="btn-icon" title="重命名">✏️</button>
-                <button @click="deleteConv(c)" class="btn-icon btn-delete-icon" title="删除">🗑️</button>
+                <button @click="editTitle(c)" class="btn-icon" title="重命名">
+                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+                  </svg>
+                </button>
+                <button @click="deleteConv(c)" class="btn-icon btn-delete-icon" title="删除">
+                  <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="3 6 5 6 21 6"></polyline>
+                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                    <line x1="10" y1="11" x2="10" y2="17"></line>
+                    <line x1="14" y1="11" x2="14" y2="17"></line>
+                  </svg>
+                </button>
              </div>
            </div>
          </div>
@ -53,7 +65,7 @@
            </div>
            <div v-else-if="convMessages.length || streamingMessage">
              <!-- 历史消息 -->
-              <div v-for="msg in convMessages" :key="msg.id" class="chat-message" :class="msg.role">
+              <div v-for="msg in convMessages" :key="msg.id" class="chat-message" :class="msg.role" :data-msg-id="msg.id">
                <div class="message-avatar">{{ msg.role === 'user' ? '👤' : '🤖' }}</div>
                <div class="message-content">
                  <!-- 工具调用步骤显示（包含思考和文本内容） -->
@ -133,15 +145,24 @@
        </div>
      </div>
    </div>
+
+    <!-- 消息导航栏 -->
+    <MessageNav
+      v-if="selectedConv && convMessages.length > 0"
+      :messages="convMessages"
+      :active-id="activeMessageId"
+      @scroll-to="scrollToMessageById"
+    />
  </div>
 </template>

 <script setup>
-import { ref, computed, onMounted, watch, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { conversationsAPI, providersAPI, messagesAPI, toolsAPI } from '../utils/api.js'
 import { renderMarkdown } from '../utils/markdown.js'
 import ProcessBlock from '../components/ProcessBlock.vue'
+import MessageNav from '../components/MessageNav.vue'

 const router = useRouter()
 const list = ref([])
@ -209,9 +230,60 @@ const selectConv = async (c) => {
  await fetchConvMessages(c.id)
 }

+const newMessage = ref('')
+const sending = ref(false)
+const messagesContainer = ref(null)
+const streamingMessage = ref(null)
+const activeMessageId = ref(null)
+let scrollObserver = null
+const observedElements = new Set()
+
+// 初始化 IntersectionObserver 来跟踪可见消息
+const initScrollObserver = () => {
+  if (!messagesContainer.value) return
+  scrollObserver?.disconnect()
+  scrollObserver = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          activeMessageId.value = entry.target.dataset.msgId || null
+        }
+      }
+    },
+    { root: messagesContainer.value, threshold: 0.5 }
+  )
+  // 观察已有的消息元素
+  nextTick(() => {
+    if (!messagesContainer.value) return
+    const wrappers = messagesContainer.value.querySelectorAll('[data-msg-id]')
+    wrappers.forEach(el => {
+      if (!observedElements.has(el)) {
+        scrollObserver.observe(el)
+        observedElements.add(el)
+      }
+    })
+  })
+}
+
+// 观察新添加的消息元素
+watch(() => convMessages.value.length, () => {
+  nextTick(() => {
+    if (!scrollObserver || !messagesContainer.value) return
+    const wrappers = messagesContainer.value.querySelectorAll('[data-msg-id]')
+    wrappers.forEach(el => {
+      if (!observedElements.has(el)) {
+        scrollObserver.observe(el)
+        observedElements.add(el)
+      }
+    })
+  })
+})
+
 const fetchConvMessages = async (convId) => {
  loadingMessages.value = true
  convMessages.value = []
+  // 重置观察的元素集合
+  observedElements.clear()
  try {
    const res = await messagesAPI.list(convId)
    if (res.success) {
@ -221,13 +293,32 @@ const fetchConvMessages = async (convId) => {
    console.error('获取消息失败:', e)
  } finally {
    loadingMessages.value = false
+    // 加载完成后初始化 observer
+    nextTick(() => initScrollObserver())
  }
 }

-const newMessage = ref('')
-const sending = ref(false)
-const messagesContainer = ref(null)
-const streamingMessage = ref(null)
+// 导航到指定消息
+const scrollToMessage = (index) => {
+  if (!messagesContainer.value) return
+  const items = messagesContainer.value.querySelectorAll('.chat-message')
+  if (items[index]) {
+    items[index].scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+}
+
+// 导航到指定消息（通过ID）
+const scrollToMessageById = (msgId) => {
+  nextTick(() => {
+    if (!messagesContainer.value) return
+    // 使用 data-msg-id 直接定位消息元素
+    const el = messagesContainer.value.querySelector(`[data-msg-id="${msgId}"]`)
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      activeMessageId.value = msgId
+    }
+  })
+}

 watch(convMessages, () => {
  nextTick(() => {
@ -375,6 +466,10 @@ onMounted(() => {
  fetchData()
  loadEnabledTools()
 })
+
+onUnmounted(() => {
+  scrollObserver?.disconnect()
+})
 </script>

 <style scoped>
@ -382,13 +477,22 @@ onMounted(() => {
 .page-container {
  padding: 0 !important;
  overflow: hidden;
+  height: 100% !important;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.page-container.conversations {
+  height: calc(100vh - 80px) !important;
 }

 .conv-layout {
  display: flex;
  gap: 1rem;
-  height: calc(100vh - 80px);
-  min-height: 400px;
+  height: 100%;
+  min-height: 0;
+  flex: 1;
 }

 /* 左侧边栏 */
@ -463,7 +567,6 @@ onMounted(() => {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
-  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
 }
@ -544,6 +647,7 @@ onMounted(() => {
  display: flex;
  flex-direction: column;
  overflow: hidden;
+  min-height: 0;
 }

 .empty-content {
@ -574,6 +678,27 @@ onMounted(() => {
  overflow: hidden;
 }

+.chat-header {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px;
+  border-bottom: 1px solid var(--border-light);
+}
+
+.btn-nav-toggle {
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background 0.15s;
+}
+
+.btn-nav-toggle:hover {
+  background: var(--bg-hover);
+}
+
 .chat-messages {
  flex: 1;
  overflow-y: auto;
@ -616,7 +741,13 @@ onMounted(() => {
 }

 .message-content {
-  max-width: 70%;
+  max-width: 80%;
+  width: 80%;
+}
+
+.chat-message.user .message-content {
+  max-width: 80%;
+  width: auto;
 }

 .message-text {
--- a/dashboard/src/views/SettingsView.vue
+++ b/dashboard/src/views/SettingsView.vue
@ -459,6 +459,12 @@ onMounted(() => {
 </script>

 <style scoped>
+/* 页面容器 */
+.page-container.settings {
+  padding: 0 12.5%;
+  box-sizing: border-box;
+}
+
 /* 通用设置部分 */
 .settings-section {
  margin-bottom: 1.5rem;
--- a/dashboard/src/views/ToolsView.vue
+++ b/dashboard/src/views/ToolsView.vue
@ -83,6 +83,10 @@ onMounted(fetchData)
 </script>

 <style scoped>
+.page-container.tools {
+  padding: 0 12.5%;
+  box-sizing: border-box;
+}
 .table-container { background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; }
 .tools-table { width: 100%; border-collapse: collapse; }
 .tools-table th { text-align: left; padding: 1rem; background: var(--bg-secondary); font-weight: 600; font-size: 0.85rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); }