OpenStock 如何使用 Cmd/CtrlK 命令面板搜索股票【免费下载链接】OpenStockOpenStock is an open-source alternative to expensive market platforms. Track real-time prices, set personalized alerts, and explore detailed company insights — built openly, for everyone, forever free.项目地址: https://gitcode.com/GitHub_Trending/ope/OpenStockOpenStock 是一个基于 Next.js、Finnhub 和 TradingView 的开源股票行情应用。它的股票搜索集中在一个全局命令面板里在应用内按Cmd/Ctrl K即可唤出搜索框输入关键词后调用 Finnhub 的/search接口查找股票点击结果进入/stocks/[symbol]详情页。本文按“把应用跑起来 → 登录 → 使用命令面板搜索 → 判断结果是否正常”的顺序说明这条完整路径。适用环境是本地开发Node.js 20pnpm 或 npm或 Docker Compose 部署搜索功能依赖已配置的 Finnhub API Key。准备条件与本地运行按 README.md 的 Quick Start搜索功能可用的最小前置条件是MongoDB 连接串、NEXT_PUBLIC_FINNHUB_API_KEY以及一个能登录的账号应用的路由受 Better Auth Next.js middleware 保护仅sign-in、sign-up、静态资源和 Next 内部路径为公开例外。克隆并安装依赖clone 地址按你的仓库镜像替换README 原文使用的是项目仓库地址git clone https://gitcode.com/GitHub_Trending/ope/OpenStock.git cd OpenStock # choose one: pnpm install # or npm install在项目根目录创建.env。与搜索直接相关的最小配置如下其余可选变量按 README 的 Environment Variables 章节补充NODE_ENVdevelopment MONGODB_URImongodbsrv://user:passcluster/db?retryWritestruewmajority BETTER_AUTH_SECRETyour_better_auth_secret BETTER_AUTH_URLhttp://localhost:3000 NEXT_PUBLIC_FINNHUB_API_KEYyour_finnhub_key FINNHUB_BASE_URLhttps://finnhub.io/api/v1user/pass/cluster/db替换为你自己的 MongoDB Atlas 凭据your_finnhub_key替换为你的 Finnhub 密钥README 说明免费额度即可支持实时行情可能需要付费档。验证数据库连通性并启动pnpm test:db # or npm run test:db pnpm dev # or npm run dev然后打开 http://localhost:3000 通过/sign-up注册或/sign-in登录。可选分支用 Docker Compose 替代本地 MongoDB。docker-compose.yml包含 openstock 与 mongodb 两个服务先启动 MongoDB再构建应用docker compose up -d mongodb docker compose up -d --build此时.env中的连接串改用 README 给出的本地形式MONGODB_URImongodb://root:examplemongodb:27017/openstock?authSourceadminroot 用户必须带authSourceadmin。应用同样在 http://localhost:3000 访问。如何打开命令面板面板由 components/SearchCommand.tsx 实现基于 cmdk 的CommandDialog。组件在window上注册了keydown监听当(e.metaKey || e.ctrlKey) e.key.toLowerCase() k时调用e.preventDefault()并切换面板开关——在 macOS 上按Cmd K在 Windows/Linux 上按Ctrl K再次按键可关闭。除了快捷键界面里还有两个入口打开的是同一个SearchCommand顶部导航的 “Search” 文本触发器components/NavItems.tsx 中NAV_ITEMS的/search项以renderAstext、labelSearch渲染Watchlist 页面右上角的 “Add Stock” 按钮app/(root)/watchlist/page.tsx/watchlist/page.tsx) 中以renderAsbutton渲染且传入initialStocks{[]}。搜索操作与结果解读面板输入框的 placeholder 是 “Search stocks...”两种状态下的行为不同空闲状态未输入内容。显示头部预取的 “Popular stocks” 列表最多 10 条。头部components/Header.tsx在服务端调用searchStocks()取热门股票来源是 lib/constants.ts 中POPULAR_STOCK_SYMBOLS的前 10 个AAPL、MSFT、GOOGL、AMZN、TSLA、META、NVDA、NFLX、ORCL、CRM。注意 Watchlist 页的 “Add Stock” 实例传的是空数组该面板空闲时会显示 “No stocks available”输入关键词后才出现结果。输入状态debounced querying。输入经 hooks/useDebounce.ts 的useDebounce(handleSearch, 300)做 300ms 防抖后触发 server actionsearchStocks(query)lib/actions/finnhub.actions.ts该 action 请求${FINNHUB_BASE_URL}/search?q关键词tokenkey列表标题变为 “Search results (N)”最多展示 15 条。每条结果显示公司名称以及symbol | exchange | type三列信息若 API 未返回交易所getExchangeLabel会从 symbol 的点分后缀推断无法识别时回退为US。加载与空结果。请求期间显示 “Loading stocks...”有查询词但无匹配时显示 “No results found”请求抛错时列表被置为空数组。选择结果。点击任一结果会关闭面板、清空搜索词并导航到/stocks/{symbol}详情页如/stocks/AAPL。验证方式与结果异常判断一条可核对的正常路径是打开应用 →Cmd/Ctrl K弹出对话框 → 未输入时看到 “Popular stocks (10)” → 输入关键词如AAPL后出现 “Search results (N)” 且 N ≤ 15 → 点击条目进入/stocks/{SYMBOL}页面。若列表始终为空按源码给出的现象逐条排查未配置 Finnhub KeysearchStocks在NEXT_PUBLIC_FINNHUB_API_KEY缺失时直接返回空数组服务端日志中会有FINNHUB API key is not configured。检查.env并在改完后重启 dev server。交易所列显示为US这是符号后缀推断的回退行为getExchangeLabel并非数据错误但非美股票的真实交易所取决于 Finnhub 返回。结果更新不及时源码中对/search响应设置了 1800 秒、热门股票profile2设置了 3600 秒的 Next.js revalidate 缓存新上市公司或数据变更可能要等缓存过期后才出现在结果中。行情延迟README 的 Market Support 说明Finnhub 免费档可能返回延迟报价非美股票的实时数据在免费档延迟 15 分钟以上详见 MARKET_SUPPORT.md。下一步搜索到目标股票并进入详情页后app/(root)/help/page.tsx/help/page.tsx) 的 FAQ 给出的后续操作是在股票详情页点击 “Heart” 或 “Star” 图标即可把它加入你的 Watchlist。【免费下载链接】OpenStockOpenStock is an open-source alternative to expensive market platforms. Track real-time prices, set personalized alerts, and explore detailed company insights — built openly, for everyone, forever free.项目地址: https://gitcode.com/GitHub_Trending/ope/OpenStock创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考