| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>知识获取工作流可视化</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
-
- body {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- color: #333;
- line-height: 1.6;
- min-height: 100vh;
- }
-
- .container {
- max-width: 1400px;
- margin: 0 auto;
- padding: 30px 20px;
- }
-
- h1 {
- text-align: center;
- color: white;
- margin-bottom: 40px;
- font-size: 32px;
- font-weight: 600;
- text-shadow: 0 2px 10px rgba(0,0,0,0.2);
- letter-spacing: 1px;
- }
-
- .tabs {
- display: flex;
- background: white;
- border-radius: 12px 12px 0 0;
- box-shadow: 0 4px 20px rgba(0,0,0,0.15);
- overflow-x: auto;
- padding: 5px;
- }
-
- .tab {
- padding: 16px 28px;
- cursor: pointer;
- border: none;
- background: transparent;
- color: #666;
- font-size: 14px;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- white-space: nowrap;
- border-radius: 8px;
- margin: 0 4px;
- position: relative;
- font-weight: 500;
- }
-
- .tab:hover {
- background: #f0f0f0;
- color: #333;
- }
-
- .tab.active {
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- color: white;
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
- }
-
- .tab-content {
- display: none;
- background: white;
- padding: 40px;
- border-radius: 0 0 12px 12px;
- box-shadow: 0 4px 20px rgba(0,0,0,0.15);
- margin-bottom: 20px;
- animation: fadeIn 0.3s ease-in;
- }
-
- @keyframes fadeIn {
- from { opacity: 0; transform: translateY(10px); }
- to { opacity: 1; transform: translateY(0); }
- }
-
- .tab-content.active {
- display: block;
- }
-
- .input-section {
- background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
- padding: 28px;
- border-radius: 12px;
- margin-bottom: 35px;
- box-shadow: 0 4px 15px rgba(0,0,0,0.1);
- border: 1px solid rgba(255,255,255,0.5);
- }
-
- .input-section h3 {
- color: #2c3e50;
- margin-bottom: 20px;
- font-size: 20px;
- font-weight: 600;
- display: flex;
- align-items: center;
- gap: 10px;
- }
-
- .input-section h3::before {
- content: '📋';
- font-size: 24px;
- }
-
- .input-item {
- margin-bottom: 16px;
- padding: 12px;
- background: rgba(255,255,255,0.7);
- border-radius: 8px;
- transition: all 0.3s;
- }
-
- .input-item:hover {
- background: rgba(255,255,255,0.9);
- transform: translateX(5px);
- }
-
- .input-item strong {
- color: #495057;
- display: inline-block;
- width: 110px;
- font-weight: 600;
- }
-
- .input-item .placeholder {
- color: #999;
- font-style: italic;
- }
-
- .workflow {
- position: relative;
- }
-
- .workflow-step {
- background: white;
- border: 2px solid #e0e0e0;
- border-radius: 12px;
- margin-bottom: 25px;
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- overflow: hidden;
- box-shadow: 0 2px 8px rgba(0,0,0,0.08);
- }
-
- .workflow-step.active {
- border-color: #667eea;
- box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);
- transform: translateY(-2px);
- }
-
- .step-header {
- padding: 20px 24px;
- background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
- cursor: pointer;
- display: flex;
- justify-content: space-between;
- align-items: center;
- user-select: none;
- transition: all 0.3s;
- }
-
- .step-header:hover {
- background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
- }
-
- .workflow-step.active .step-header {
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- color: white;
- }
-
- .workflow-step.active .step-name {
- color: white;
- }
-
- .workflow-step.active .step-toggle {
- color: white;
- }
-
- .step-title {
- display: flex;
- align-items: center;
- gap: 15px;
- }
-
- .step-number {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 36px;
- height: 36px;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- color: white;
- border-radius: 50%;
- font-size: 16px;
- font-weight: bold;
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
- }
-
- .workflow-step.active .step-number {
- background: white;
- color: #667eea;
- box-shadow: 0 4px 12px rgba(255,255,255,0.3);
- }
-
- .step-name {
- font-size: 18px;
- font-weight: 600;
- color: #2c3e50;
- }
-
- .step-toggle {
- color: #6c757d;
- font-size: 20px;
- transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- }
-
- .step-toggle.expanded {
- transform: rotate(180deg);
- }
-
- .step-content {
- padding: 0 20px;
- max-height: 0;
- overflow: hidden;
- transition: max-height 0.3s ease-out, padding 0.3s;
- }
-
- .step-content.expanded {
- max-height: 5000px;
- padding: 20px;
- }
-
- .step-detail {
- margin-bottom: 20px;
- }
-
- .step-detail-label {
- font-weight: 600;
- color: #495057;
- margin-bottom: 10px;
- display: block;
- font-size: 14px;
- text-transform: uppercase;
- letter-spacing: 0.5px;
- }
-
- .step-detail-content {
- background: #f8f9fa;
- padding: 16px;
- border-radius: 8px;
- border-left: 4px solid #667eea;
- font-size: 14px;
- line-height: 1.8;
- white-space: pre-wrap;
- word-wrap: break-word;
- max-height: 400px;
- overflow-y: auto;
- box-shadow: 0 2px 8px rgba(0,0,0,0.05);
- }
-
- .json-content {
- font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
- background: #1e1e1e;
- color: #d4d4d4;
- padding: 20px;
- border-radius: 8px;
- overflow-x: auto;
- border-left: 4px solid #667eea;
- box-shadow: 0 4px 12px rgba(0,0,0,0.15);
- }
-
- .prompt-toggle-btn {
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- color: white;
- border: none;
- padding: 10px 20px;
- border-radius: 6px;
- cursor: pointer;
- font-size: 13px;
- font-weight: 500;
- margin-top: 15px;
- transition: all 0.3s;
- box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
- }
-
- .prompt-toggle-btn:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
- }
-
- .prompt-content {
- display: none;
- margin-top: 15px;
- padding: 16px;
- background: #fff3cd;
- border-radius: 8px;
- border-left: 4px solid #ffc107;
- font-size: 13px;
- line-height: 1.8;
- white-space: pre-wrap;
- word-wrap: break-word;
- max-height: 500px;
- overflow-y: auto;
- }
-
- .prompt-content.show {
- display: block;
- animation: slideDown 0.3s ease-out;
- }
-
- @keyframes slideDown {
- from {
- opacity: 0;
- max-height: 0;
- }
- to {
- opacity: 1;
- max-height: 500px;
- }
- }
-
- .output-section {
- background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
- padding: 28px;
- border-radius: 12px;
- margin-top: 35px;
- border-left: 4px solid #0ea5e9;
- box-shadow: 0 4px 15px rgba(14, 165, 233, 0.2);
- }
-
- .output-section h3 {
- color: #0369a1;
- margin-bottom: 20px;
- font-size: 20px;
- font-weight: 600;
- display: flex;
- align-items: center;
- gap: 10px;
- }
-
- .output-section h3::before {
- content: '✨';
- font-size: 24px;
- }
-
- .arrow {
- text-align: center;
- color: #667eea;
- font-size: 32px;
- margin: -15px 0;
- position: relative;
- z-index: 1;
- filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3));
- }
-
- .arrow::before {
- content: '↓';
- }
-
- @media (max-width: 768px) {
- .container {
- padding: 10px;
- }
-
- .tab {
- padding: 12px 15px;
- font-size: 13px;
- }
-
- .tab-content {
- padding: 20px;
- }
- }
- </style>
- </head>
- <body>
- <div class="container">
- <h1>知识获取工作流可视化</h1>
- <div class="tabs" id="tabs">
- <button class="tab active" onclick="switchTab(0)">教资查分这个信息怎么来的</button>
- </div>
- <div class="tab-content active" id="tab-0">
- <div class="input-section">
- <h3>输入信息</h3>
- <div class="input-item"><strong>问题:</strong> 教资查分这个信息怎么来的</div>
- <div class="input-item"><strong>帖子信息:</strong> 发帖时间:2025.11.07</div>
- <div class="input-item"><strong>人设信息:</strong> <span class="placeholder">(无)</span></div>
- </div>
- <div class="workflow">
- <div class="workflow-step" id="step-0-0">
- <div class="step-header" onclick="toggleStep('step-0-0')">
- <div class="step-title">
- <span class="step-number">1</span>
- <span class="step-name">生成查询</span>
- </div>
- <span class="step-toggle">▼</span>
- </div>
- <div class="step-content" id="content-step-0-0">
- <div class="step-detail">
- <span class="step-detail-label">生成的Query:</span>
- <div class="step-detail-content">用什么工具获取教资查分这个信息</div>
- </div>
- </div>
- </div>
- <div class="arrow"></div>
- <div class="workflow-step" id="step-0-1">
- <div class="step-header" onclick="toggleStep('step-0-1')">
- <div class="step-title">
- <span class="step-number">2</span>
- <span class="step-name">选择工具</span>
- </div>
- <span class="step-toggle">▼</span>
- </div>
- <div class="step-content" id="content-step-0-1">
- <div class="step-detail">
- <span class="step-detail-label">工具名称:</span>
- <div class="step-detail-content">新红热搜词搜索</div>
- </div>
- <div class="step-detail">
- <span class="step-detail-label">工具调用ID:</span>
- <div class="step-detail-content">new_red_hot_search_words_search</div>
- </div>
- <div class="step-detail">
- <span class="step-detail-label">使用方法:</span>
- <div class="step-detail-content">输入关键词"教资查分",获取该词在小红书的热度值、近90天热度趋势曲线、声量概览及相关搜索结果,全面了解该信息的关注度和趋势。</div>
- </div>
- <button class="prompt-toggle-btn" onclick="togglePrompt('prompt-step-0-1')">显示 Prompt</button>
- <div class="prompt-content" id="prompt-step-0-1"># 角色定位
- 你是一个工具匹配专家,负责根据用户需求从MCP工具库中找到最合适的工具。
- # 核心任务
- 1. 接收上游输入的需求用什么工具获取教资查分这个信息
- 2. 理解需求的核心意图(用户想找什么、解决什么问题)
- 3. 查询MCP工具库,匹配最相关的工具
- 4. 返回工具信息或"无工具"
- # MCP工具库信息
- 工具名:新红话题榜单
- 工具调用ID:xh_newrank_hottopics
- 工具介绍:提供小红书平台热门话题全景榜单数据,覆盖排名、话题名称及核心简介、参与人数增量、浏览量增量、笔记增量、互动增量(点赞 / 收藏 / 评论综合统计)等核心维度。支持精准筛选与高效应用。话题类型涵盖美妆,美容个护,鞋包潮玩,穿搭打扮,美食,母婴育儿,旅游出行,家居家装,教育,生活,运动健身,兴趣爱好,影视综,婚嫁,摄影摄像,萌宠,情感星座,科技互联网,资讯,健康养生,科学科普,职场,交通工具,其他 24 个垂直领域,统计时间可选择日榜(近 7 天)、周榜(近 4 周)、月榜(近 5 个月),满足不同周期的热点追踪需求。榜单数据实时更新,同步呈现官方流量扶持话题标识,助力品牌、达人快速锁定高曝光赛道;便于拆解爆款逻辑、制定内容选题策略,提升运营效率。
- 工具名:新红话题搜索
- 工具调用ID:new_red_TopicSearch
- 工具介绍:提供小红书平台话题精准检索服务,输入关键词即可匹配相关话题完整列表,核心数据包含话题名称及简介、总浏览量、总参与人数、近 30 天笔记增量、近 30 天互动增量。支持按参与人数、浏览量等指标排序筛选,可精准定位品牌发起话题或官方扶持话题,清晰展示话题流量趋势与内容创作方向。无论是达人寻找高适配性话题蹭流,还是品牌监测竞品话题布局,均能通过数据支撑快速决策,降低内容试错成本。
- 工具名:新红热搜词榜单
- 工具调用ID:xh_newrank_hotwords
- 工具介绍:提供小红书平台热搜词权威榜单数据,核心维度包括实时排名、热搜词、主要覆盖内容领域、相关笔记总量、爆文数(高互动笔记占比)、热度值(综合搜索量与互动率计算)。支持按统计时间(日榜 / 周榜 / 月榜)及 美妆,美容个护,鞋包潮玩,穿搭打扮,美食,母婴育儿,旅游出行,家居家装,教育,生活,运动健身,兴趣爱好,影视综,婚嫁,摄影摄像,萌宠,情感星座,科技互联网,资讯,健康养生,科学科普,职场,交通工具,其他 24 个垂直内容领域筛选。榜单每日更新,助力用户第一时间捕捉流量风口。可直接应用于选题规划、竞品投放策略分析。
- 工具名:新红热搜词搜索
- 工具调用ID:new_red_hot_search_words_search
- 工具介绍:提供小红书热搜词深度检索与趋势分析服务,输入关键词即可获取全维度数据表现:核心包含热度值(实时动态更新)、声量概览(笔记数、总热度、热门天数、热门内容领域、高频搭配词)、近 90 天热度值趋势曲线(支持自定义时间区间)、相关搜索结果。可直观呈现关键词种草趋势、流量峰值时段、高转化内容特征,帮助用户优化笔记标题关键词布局、预判话题生命周期。
- # 匹配规则
- ## 匹配逻辑
- 1. **需求本质识别**:理解需求背后的真实意图
- - 示例:"谐音梗这个选题灵感怎么来的" → 真实意图是"寻找热门选题的来源/依据"
- - 不关注具体关键词(如"谐音梗"),而关注用户想解决什么问题
- 2. **需求类型分类**:判断需求属于哪种类型
- - 寻找灵感/选题来源 → 需要热搜词/榜单类工具
- - 分析特定词的热度/趋势 → 需要趋势分析类工具
- - 寻找内容案例/参考 → 需要内容搜索/爬取类工具
- - 生成创意内容 → 需要大模型/AI生成类工具
- 3. **工具能力匹配**:根据需求类型,对比工具的核心能力
- - 看工具能否解决该类型的问题(如"提供热门选题")
- 4. **选择最优工具**:返回能力最匹配的1个工具,无匹配则返回"无工具"
- ## 匹配标准
- - 关键词匹配:需求核心词是否在工具介绍中出现或相关
- - 功能匹配:工具能力是否覆盖需求要解决的问题
- ### 需求意图映射表
- | 需求意图关键信号 | 需求类型 | 对应工具类型 |
- |----------------|---------|------------|
- | "灵感怎么来的"、"选题来源"、"找选题" | 寻找选题灵感 | 热搜词榜单工具 |
- | "这个词热不热"、"趋势如何"、"热度分析" | 关键词趋势分析 | 热搜词搜索工具 |
- | "找案例"、"参考内容"、"爆款笔记" | 内容案例搜索 | 内容爬取工具 |
- ## 无匹配判定
- 当MCP工具库中没有任何工具能解决该需求时,直接返回空json对象。
- # 输出格式
- json格式,字段定义如下:
- '''json
- {
- "工具名": "工具名称",
- "工具调用ID": "调用ID",
- "使用方法": "简要说明如何使用该工具解决用户需求"
- }
- '''
- ## 无匹配时
- '''json
- {
- }
- '''
- # 执行要求
- 1. 只返回1个最优工具,不返回多个备选
- 2. 严格按照输出格式返回结果
- 3. 使用方法要具体,说明如何用该工具解决当前需求
- # 示例
- ## 示例1:成功匹配
- 需求输入:什么工具能找到教资查分这个灵感点?
- 输出:
- 工具名:新红热搜词搜索
- 工具调用ID:new_red_hot_search_words_search
- 使用方法:输入关键词"教资查分",获取该词在小红书的热度值、近90天趋势曲线、相关笔记数据,判断是否为热门选题点。
- {
- "工具名": "新红热搜词搜索",
- "工具调用ID": "工具调用ID:new_red_hot_search_words_search",
- "使用方法": "输入关键词"教资查分",获取该词在小红书的热度值、近90天趋势曲线、相关笔记数据,判断是否为热门选题点。"
- }
- ## 示例2:无匹配
- 需求输入:哪里可以找到股票实时行情数据?
- 输出:
- {
- }
- # 上游输入的需求用什么工具获取教资查分这个信息
- {用什么工具获取教资查分这个信息}</div>
- </div>
- </div>
- <div class="arrow"></div>
- <div class="workflow-step" id="step-0-2">
- <div class="step-header" onclick="toggleStep('step-0-2')">
- <div class="step-title">
- <span class="step-number">3</span>
- <span class="step-name">提取参数</span>
- </div>
- <span class="step-toggle">▼</span>
- </div>
- <div class="step-content" id="content-step-0-2">
- <div class="step-detail">
- <span class="step-detail-label">提取的参数:</span>
- <div class="step-detail-content json-content">{
- "prompt": "教资查分"
- }</div>
- </div>
- <button class="prompt-toggle-btn" onclick="togglePrompt('prompt-step-0-2')">显示 Prompt</button>
- <div class="prompt-content" id="prompt-step-0-2">你是一个API调用专家。你的任务是根据工具的信息和用户的查询,生成正确的调用参数。
- 查询内容:
- 用什么工具获取教资查分这个信息
- 工具信息:
- {
- "name": "新红热搜词搜索",
- "description": "提供小红书热搜词深度检索与趋势分析服务,输入关键词即可获取全维度数据表现:核心包含热度值(实时动态更新)、声量概览(笔记数、总热度、热门天数、热门内容领域、高频搭配词)、近 90 天热度值趋势曲线(支持自定义时间区间)、相关搜索结果。可直观呈现关键词种草趋势、流量峰值时段、高转化内容特征,帮助用户优化笔记标题关键词布局、预判话题生命周期。",
- "inputSchema": {
- "type": "object",
- "properties": {
- "prompt": {
- "type": "string",
- "description": "提示词prompt,包含完整的输入信息,图片、音频等多媒体需要url表示"
- }
- },
- "required": [
- "prompt"
- ]
- }
- }
- 请分析工具的参数要求,根据查询内容提取或推断出合适的参数值。
- 输出格式:请以 JSON 格式输出参数字典,例如:
- {
- "param1": "value1",
- "param2": "value2"
- }
- 注意事项:
- 1. 只输出参数的JSON字典,不要包含任何解释
- 2. 参数名必须与工具定义中的参数名完全一致
- 3. 参数值要从查询中提取或合理推断
- 4. 不要添加工具定义中没有的参数
- 5. 如果某个参数无法从查询中获取,使用合理的默认值或省略该参数
- 只输出JSON,不要包含markdown标记。</div>
- </div>
- </div>
- <div class="arrow"></div>
- <div class="workflow-step" id="step-0-3">
- <div class="step-header" onclick="toggleStep('step-0-3')">
- <div class="step-title">
- <span class="step-number">4</span>
- <span class="step-name">执行工具</span>
- </div>
- <span class="step-toggle">▼</span>
- </div>
- <div class="step-content" id="content-step-0-3">
- <div class="step-detail">
- <span class="step-detail-label">执行结果:</span>
- <div class="step-detail-content json-content">{
- "result": {
- "image_url": [],
- "content": "## \"教资查分\"关键词数据表现和趋势分析\n\n### 热度值\n- 近30天热度值超过96.14%全站其他词\n- 近30天热度值超过95.86%教育领域其他词\n\n### 声量概览\n- **笔记数**: 16篇(环比增长700.00%)\n- **总热度**: 4082(环比增长408100.00%)\n- **热门天数**: 4/30天\n- **近30天热门内容领域**:\n - 教育: 56.25%\n - 职场: 31.25%\n - 运动健身: 6.25%\n- **高频搭配词**: 暂无相关数据\n\n### 热度值趋势\n- **整体趋势**: 下降趋势\n- **效果分析**:\n - TOP1下降趋势: 2025-11-07 至 2025-11-08\n - TOP2下降趋势: 2025-11-04 至 2025-11-05\n\n### 相关搜索结果\n- 共1条搜索结果\n- 内容领域分布: 教育、职场等领域为主\n\n从数据可以看出,\"教资查分\"这个关键词在近期有显著的热度增长,但目前呈现下降趋势。该关键词主要与教育和职场领域相关,这符合教师资格证查询分数的实际应用场景。虽然笔记数量不多(16篇),但环比增长非常高,表明这是一个短期内突然受到关注的话题。",
- "video_url": []
- },
- "success": true,
- "error": ""
- }</div>
- </div>
- </div>
- </div>
- </div>
- <div class="output-section">
- <h3>最终输出</h3>
- <div class="step-detail-content json-content">{
- "result": {
- "image_url": [],
- "content": "## \"教资查分\"关键词数据表现和趋势分析\n\n### 热度值\n- 近30天热度值超过96.14%全站其他词\n- 近30天热度值超过95.86%教育领域其他词\n\n### 声量概览\n- **笔记数**: 16篇(环比增长700.00%)\n- **总热度**: 4082(环比增长408100.00%)\n- **热门天数**: 4/30天\n- **近30天热门内容领域**:\n - 教育: 56.25%\n - 职场: 31.25%\n - 运动健身: 6.25%\n- **高频搭配词**: 暂无相关数据\n\n### 热度值趋势\n- **整体趋势**: 下降趋势\n- **效果分析**:\n - TOP1下降趋势: 2025-11-07 至 2025-11-08\n - TOP2下降趋势: 2025-11-04 至 2025-11-05\n\n### 相关搜索结果\n- 共1条搜索结果\n- 内容领域分布: 教育、职场等领域为主\n\n从数据可以看出,\"教资查分\"这个关键词在近期有显著的热度增长,但目前呈现下降趋势。该关键词主要与教育和职场领域相关,这符合教师资格证查询分数的实际应用场景。虽然笔记数量不多(16篇),但环比增长非常高,表明这是一个短期内突然受到关注的话题。",
- "video_url": []
- },
- "success": true,
- "error": ""
- }</div>
- </div>
- </div>
- </div>
-
- <script>
- function switchTab(index) {
- // 隐藏所有tab内容
- const contents = document.querySelectorAll('.tab-content');
- contents.forEach(content => content.classList.remove('active'));
-
- // 移除所有tab的active状态
- const tabs = document.querySelectorAll('.tab');
- tabs.forEach(tab => tab.classList.remove('active'));
-
- // 显示选中的tab内容
- document.getElementById('tab-' + index).classList.add('active');
- tabs[index].classList.add('active');
- }
-
- function toggleStep(stepId) {
- const step = document.getElementById(stepId);
- const content = document.getElementById('content-' + stepId);
- const toggle = step.querySelector('.step-toggle');
-
- if (content.classList.contains('expanded')) {
- content.classList.remove('expanded');
- toggle.classList.remove('expanded');
- step.classList.remove('active');
- } else {
- content.classList.add('expanded');
- toggle.classList.add('expanded');
- step.classList.add('active');
- }
- }
-
- function togglePrompt(promptId) {
- const promptContent = document.getElementById(promptId);
- const btn = promptContent.previousElementSibling;
-
- if (promptContent.classList.contains('show')) {
- promptContent.classList.remove('show');
- btn.textContent = '显示 Prompt';
- } else {
- promptContent.classList.add('show');
- btn.textContent = '隐藏 Prompt';
- }
- }
-
- // 页面加载时高亮第一个步骤
- window.addEventListener('load', function() {
- const firstSteps = document.querySelectorAll('.workflow-step');
- firstSteps.forEach((step, index) => {
- if (index === 0 || index % (firstSteps.length / document.querySelectorAll('.tab-content').length) === 0) {
- step.classList.add('active');
- const content = step.querySelector('.step-content');
- const toggle = step.querySelector('.step-toggle');
- if (content) {
- content.classList.add('expanded');
- toggle.classList.add('expanded');
- }
- }
- });
- });
- </script>
- </body>
- </html>
|