feat(web): add custom logo and improve docker config

timj3ly · timj3ly · commit 565a647c4f85 · 2026-02-05T16:33:44.000+08:00
- add Logo component with theme support
- add favicon.svg for browser tab icon
- update page title to MarketPulse
- add chromadb healthcheck in docker-compose
- add NO_PROXY config for internal docker network
- simplify stock-fetcher proxy handling
- fix chromadb client url parsing for new API
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -14,6 +14,12 @@ services:
     environment:
       - IS_PERSISTENT=TRUE
       - ANONYMIZED_TELEMETRY=FALSE
+    healthcheck:
+      test: ["CMD-SHELL", "bash -c 'echo > /dev/tcp/localhost/8000'"]
+      interval: 10s
+      timeout: 5s
+      start_period: 10s
+      retries: 3
 
   # MarketPulse Server
   server:
@@ -23,7 +29,8 @@ services:
     container_name: marketpulse-server
     restart: unless-stopped
     depends_on:
-      - chromadb
+      chromadb:
+        condition: service_healthy
     volumes:
       # SQLite database persistence
       - ./data/core:/app/packages/core/data
@@ -56,9 +63,11 @@ services:
       # Server config
       - PORT=3000
       - HOST=0.0.0.0
-      # Proxy for Twitter scraper (Clash on host)
+      # Proxy for external requests (Binance, Twitter, etc.)
       - HTTP_PROXY=http://host.docker.internal:7890
       - HTTPS_PROXY=http://host.docker.internal:7890
+      # Exclude internal Docker network from proxy
+      - NO_PROXY=localhost,127.0.0.1,chromadb,host.docker.internal
     healthcheck:
       test: ["CMD", "curl", "-f", "http://localhost:3000/health"]
       interval: 30s
diff --git a/packages/core/src/rag.ts b/packages/core/src/rag.ts
@@ -9,7 +9,17 @@ import * as fs from 'fs'
 import * as path from 'path'
 
 const COLLECTION_NAME = 'financial_knowledge'
-const CHROMA_HOST = process.env.CHROMA_HOST || 'http://localhost:8000'
+const CHROMA_URL = process.env.CHROMA_HOST || 'http://localhost:8000'
+
+// Parse CHROMA_URL into components for new API
+function parseChromaUrl(urlStr: string): { host: string; port: number; ssl: boolean } {
+  const url = new URL(urlStr)
+  return {
+    host: url.hostname,
+    port: parseInt(url.port) || (url.protocol === 'https:' ? 443 : 8000),
+    ssl: url.protocol === 'https:',
+  }
+}
 
 let client: ChromaClient | null = null
 let collection: Collection | null = null
@@ -33,7 +43,8 @@ export async function initRAG(): Promise<void> {
     throw new Error('No embedding provider available. Set OLLAMA_BASE_URL or OPENAI_API_KEY.')
   }
 
-  client = new ChromaClient({ path: CHROMA_HOST })
+  const chromaConfig = parseChromaUrl(CHROMA_URL)
+  client = new ChromaClient(chromaConfig)
 
   // 使用自定义 embedding function
   const embeddingFunction = new CustomEmbeddingFunction()
diff --git a/packages/core/src/stock-fetcher.ts b/packages/core/src/stock-fetcher.ts
@@ -5,17 +5,11 @@
 
 import YahooFinance from 'yahoo-finance2'
 import { insertStockPrices, cleanupOldStocks, type StockRecord } from './stock-store'
-import { getProxyUrl } from './proxy-fetch'
 
-// Initialize Yahoo Finance client with proxy support
-const proxyUrl = getProxyUrl()
+// Initialize Yahoo Finance client
+// Note: yahoo-finance2 uses native fetch, proxy is handled via HTTP_PROXY env var
 const yahooFinance = new YahooFinance({
   suppressNotices: ['yahooSurvey'],
-  ...(proxyUrl && {
-    fetchOptions: {
-      agent: proxyUrl,
-    },
-  }),
 })
 
 /**
diff --git a/packages/web/index.html b/packages/web/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
+    <title>MarketPulse</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/packages/web/public/favicon.svg b/packages/web/public/favicon.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#0f0f0f"/>
+  <path d="M4 18 L8 18 L10 12 L13 22 L16 8 L19 24 L22 14 L24 18 L28 18"
+        fill="none"
+        stroke="#ffffff"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"/>
+</svg>
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
@@ -1,11 +1,12 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
-import { TrendingUp, Menu } from 'lucide-react'
+import { Menu } from 'lucide-react'
 import { TooltipProvider } from '@/components/ui/tooltip'
 import { Sidebar } from '@/components/Sidebar'
 import { ChatMessage } from '@/components/ChatMessage'
 import { ChatInput } from '@/components/ChatInput'
 import { ScrapeNotification } from '@/components/ScrapeNotification'
 import { SearchHistoryDropdown } from '@/components/SearchHistoryDropdown'
+import { Logo } from '@/components/Logo'
 import { useConversations } from '@/hooks/useConversations'
 import { useTheme } from '@/hooks/useTheme'
 import { useSSEEvents } from '@/hooks/useSSEEvents'
@@ -573,7 +574,7 @@ function App() {
                 {messages.length === 0 ? (
                   <div className="welcome">
                     <div className="welcome-icon">
-                      <TrendingUp strokeWidth={1.5} />
+                      <Logo size={64} theme={theme} />
                     </div>
                     <h1>MarketPulse</h1>
                     <p>智能金融助手</p>
diff --git a/packages/web/src/components/Logo.tsx b/packages/web/src/components/Logo.tsx
@@ -0,0 +1,34 @@
+interface LogoProps {
+  size?: number
+  className?: string
+  theme?: 'light' | 'dark'
+}
+
+export function Logo({ size = 24, className = '', theme }: LogoProps) {
+  // 浅色模式：深色背景 + 白色折线
+  // 深色模式：浅色背景 + 深色折线（背景比页面背景稍暗一点形成色差）
+  const isDark = theme === 'dark'
+
+  const bgColor = isDark ? '#e5e5e5' : '#1a1a1a'
+  const lineColor = isDark ? '#1a1a1a' : '#ffffff'
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      width={size}
+      height={size}
+      className={className}
+    >
+      <rect width="32" height="32" rx="6" fill={bgColor} />
+      <path
+        d="M4 18 L8 18 L10 12 L13 22 L16 8 L19 24 L22 14 L24 18 L28 18"
+        fill="none"
+        stroke={lineColor}
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/packages/web/src/components/Sidebar.tsx b/packages/web/src/components/Sidebar.tsx
@@ -1,4 +1,5 @@
-import { Plus, Trash2, MessageSquare, PanelLeftClose, PanelLeft, TrendingUp, Sun, Moon } from 'lucide-react'
+import { Plus, Trash2, MessageSquare, PanelLeftClose, PanelLeft, Sun, Moon } from 'lucide-react'
+import { Logo } from '@/components/Logo'
 import {
   Tooltip,
   TooltipContent,
@@ -45,7 +46,7 @@ export function Sidebar({
       {/* Logo Area */}
       <div className="manus-sidebar-logo">
         <div className="manus-sidebar-brand">
-          <TrendingUp className="manus-sidebar-brand-icon" />
+          <Logo size={24} theme={theme} />
           {isOpen && <span className="manus-sidebar-brand-text">MarketPulse</span>}
         </div>
         <Tooltip>
