From 2ce3bd63a65303dd722612b01f23c728a0380772 Mon Sep 17 00:00:00 2001 From: Manus Date: Thu, 12 Mar 2026 20:36:35 -0400 Subject: [PATCH] =?UTF-8?q?Checkpoint:=20=E5=AE=8C=E6=95=B4=E7=9A=84?= =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E4=BC=81=E4=B8=9A=E5=85=AC=E4=BC=97=E5=8F=B7?= =?UTF-8?q?=E8=8E=B7=E5=8F=96=E4=B8=8E=E7=9B=91=E6=8E=A7=E8=B0=83=E7=A0=94?= =?UTF-8?q?=E6=8A=A5=E5=91=8A=E4=BA=A4=E4=BA=92=E5=BC=8F=E7=BD=91=E9=A1=B5?= =?UTF-8?q?=EF=BC=8C=E5=8C=85=E5=90=AB=EF=BC=9A=E6=B7=B1=E8=89=B2=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E5=AE=9E=E9=AA=8C=E5=AE=A4=E8=AE=BE=E8=AE=A1=E9=A3=8E?= =?UTF-8?q?=E6=A0=BC=E3=80=817=E4=B8=AA=E7=AB=A0=E8=8A=82=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E3=80=81=E5=AE=98=E6=96=B9=E6=8E=A5=E5=8F=A3=E5=88=86?= =?UTF-8?q?=E6=9E=90=E3=80=81=E7=AC=AC=E4=B8=89=E6=96=B9=E5=B9=B3=E5=8F=B0?= =?UTF-8?q?=E5=AF=B9=E6=AF=94=E5=8D=A1=E7=89=87=E3=80=81=E5=BC=80=E6=BA=90?= =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=B1=95=E7=A4=BA=E3=80=81=E4=BA=94=E7=BB=B4?= =?UTF-8?q?=E9=9B=B7=E8=BE=BE=E5=AF=B9=E6=AF=94=E5=9B=BE=E3=80=81=E7=94=B5?= =?UTF-8?q?=E5=AD=90=E8=A1=8C=E4=B8=9A10=E4=B8=AA=E7=BB=86=E5=88=86?= =?UTF-8?q?=E9=A2=86=E5=9F=9F=E5=85=A5=E5=BA=93=E6=96=B9=E6=A1=88=E3=80=81?= =?UTF-8?q?=E9=A5=BC=E5=9B=BE=E5=88=86=E5=B8=83=E3=80=81=E6=8E=A8=E8=8D=90?= =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E7=A8=8B=E3=80=81=E7=BB=93=E8=AE=BA?= =?UTF-8?q?=E5=BB=BA=E8=AE=AE=E3=80=82=E4=BD=BF=E7=94=A8Recharts=E4=BA=A4?= =?UTF-8?q?=E4=BA=92=E5=BC=8F=E5=9B=BE=E8=A1=A8=E3=80=81Framer=20Motion?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E3=80=81=E5=93=8D=E5=BA=94=E5=BC=8F=E5=B8=83?= =?UTF-8?q?=E5=B1=80=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitkeep | 0 client/index.html | 6 +- client/src/App.tsx | 2 +- client/src/index.css | 160 +++--- client/src/pages/Home.tsx | 1146 ++++++++++++++++++++++++++++++++++++- ideas.md | 94 +++ 6 files changed, 1300 insertions(+), 108 deletions(-) create mode 100644 .gitkeep create mode 100644 ideas.md diff --git a/.gitkeep b/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/client/index.html b/client/index.html index 49d712a..5857222 100644 --- a/client/index.html +++ b/client/index.html @@ -6,12 +6,10 @@ - 微信企业公众号获取与监控调研报告 - + diff --git a/client/src/App.tsx b/client/src/App.tsx index 0828668..664caf4 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -27,7 +27,7 @@ function App() { return ( diff --git a/client/src/index.css b/client/src/index.css index 72b423d..7e23648 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -40,77 +40,48 @@ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); + --font-sans: 'DM Sans', 'Noto Sans SC', system-ui, sans-serif; + --font-mono: 'JetBrains Mono', monospace; + --color-cyan: oklch(0.82 0.17 192); + --color-amber: oklch(0.82 0.17 80); + --color-neon-green: oklch(0.78 0.2 145); + --color-soft-red: oklch(0.7 0.19 25); } :root { - --primary: var(--color-blue-700); - --primary-foreground: var(--color-blue-50); - --sidebar-primary: var(--color-blue-600); - --sidebar-primary-foreground: var(--color-blue-50); - --chart-1: var(--color-blue-300); - --chart-2: var(--color-blue-500); - --chart-3: var(--color-blue-600); - --chart-4: var(--color-blue-700); - --chart-5: var(--color-blue-800); - --radius: 0.65rem; - --background: oklch(1 0 0); - --foreground: oklch(0.235 0.015 65); - --card: oklch(1 0 0); - --card-foreground: oklch(0.235 0.015 65); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.235 0.015 65); - --secondary: oklch(0.98 0.001 286.375); - --secondary-foreground: oklch(0.4 0.015 65); - --muted: oklch(0.967 0.001 286.375); - --muted-foreground: oklch(0.552 0.016 285.938); - --accent: oklch(0.967 0.001 286.375); - --accent-foreground: oklch(0.141 0.005 285.823); - --destructive: oklch(0.577 0.245 27.325); - --destructive-foreground: oklch(0.985 0 0); - --border: oklch(0.92 0.004 286.32); - --input: oklch(0.92 0.004 286.32); - --ring: oklch(0.623 0.214 259.815); - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.235 0.015 65); - --sidebar-accent: oklch(0.967 0.001 286.375); - --sidebar-accent-foreground: oklch(0.141 0.005 285.823); - --sidebar-border: oklch(0.92 0.004 286.32); - --sidebar-ring: oklch(0.623 0.214 259.815); -} - -.dark { - --primary: var(--color-blue-700); - --primary-foreground: var(--color-blue-50); - --sidebar-primary: var(--color-blue-500); - --sidebar-primary-foreground: var(--color-blue-50); - --background: oklch(0.141 0.005 285.823); - --foreground: oklch(0.85 0.005 65); - --card: oklch(0.21 0.006 285.885); - --card-foreground: oklch(0.85 0.005 65); - --popover: oklch(0.21 0.006 285.885); - --popover-foreground: oklch(0.85 0.005 65); - --secondary: oklch(0.24 0.006 286.033); - --secondary-foreground: oklch(0.7 0.005 65); - --muted: oklch(0.274 0.006 286.033); - --muted-foreground: oklch(0.705 0.015 286.067); - --accent: oklch(0.274 0.006 286.033); - --accent-foreground: oklch(0.92 0.005 65); - --destructive: oklch(0.704 0.191 22.216); - --destructive-foreground: oklch(0.985 0 0); - --border: oklch(1 0 0 / 10%); - --input: oklch(1 0 0 / 15%); - --ring: oklch(0.488 0.243 264.376); - --chart-1: var(--color-blue-300); - --chart-2: var(--color-blue-500); - --chart-3: var(--color-blue-600); - --chart-4: var(--color-blue-700); - --chart-5: var(--color-blue-800); - --sidebar: oklch(0.21 0.006 285.885); - --sidebar-foreground: oklch(0.85 0.005 65); - --sidebar-accent: oklch(0.274 0.006 286.033); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(1 0 0 / 10%); - --sidebar-ring: oklch(0.488 0.243 264.376); + --radius: 0.5rem; + --background: oklch(0.13 0.02 260); + --foreground: oklch(0.93 0.01 260); + --card: oklch(0.17 0.02 260); + --card-foreground: oklch(0.93 0.01 260); + --popover: oklch(0.17 0.02 260); + --popover-foreground: oklch(0.93 0.01 260); + --primary: oklch(0.82 0.17 192); + --primary-foreground: oklch(0.13 0.02 260); + --secondary: oklch(0.22 0.02 260); + --secondary-foreground: oklch(0.85 0.01 260); + --muted: oklch(0.22 0.02 260); + --muted-foreground: oklch(0.6 0.02 260); + --accent: oklch(0.22 0.03 260); + --accent-foreground: oklch(0.93 0.01 260); + --destructive: oklch(0.7 0.19 25); + --destructive-foreground: oklch(0.98 0 0); + --border: oklch(0.28 0.03 260); + --input: oklch(0.22 0.02 260); + --ring: oklch(0.82 0.17 192); + --chart-1: oklch(0.82 0.17 192); + --chart-2: oklch(0.82 0.17 80); + --chart-3: oklch(0.78 0.2 145); + --chart-4: oklch(0.65 0.2 280); + --chart-5: oklch(0.7 0.19 25); + --sidebar: oklch(0.15 0.02 260); + --sidebar-foreground: oklch(0.93 0.01 260); + --sidebar-primary: oklch(0.82 0.17 192); + --sidebar-primary-foreground: oklch(0.13 0.02 260); + --sidebar-accent: oklch(0.22 0.03 260); + --sidebar-accent-foreground: oklch(0.93 0.01 260); + --sidebar-border: oklch(0.28 0.03 260); + --sidebar-ring: oklch(0.82 0.17 192); } @layer base { @@ -119,6 +90,7 @@ } body { @apply bg-background text-foreground; + font-family: 'DM Sans', 'Noto Sans SC', system-ui, sans-serif; } button:not(:disabled), [role="button"]:not([aria-disabled="true"]), @@ -134,24 +106,11 @@ } @layer components { - /** - * Custom container utility that centers content and adds responsive padding. - * - * This overrides Tailwind's default container behavior to: - * - Auto-center content (mx-auto) - * - Add responsive horizontal padding - * - Set max-width for large screens - * - * Usage:
...
- * - * For custom widths, use max-w-* utilities directly: - *
...
- */ .container { width: 100%; margin-left: auto; margin-right: auto; - padding-left: 1rem; /* 16px - mobile padding */ + padding-left: 1rem; padding-right: 1rem; } @@ -162,16 +121,45 @@ @media (min-width: 640px) { .container { - padding-left: 1.5rem; /* 24px - tablet padding */ + padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .container { - padding-left: 2rem; /* 32px - desktop padding */ + padding-left: 2rem; padding-right: 2rem; - max-width: 1280px; /* Standard content width */ + max-width: 1280px; } } -} \ No newline at end of file + + .glow-card { + background: oklch(0.17 0.02 260); + border: 1px solid oklch(0.28 0.03 260); + transition: all 0.3s ease; + } + + .glow-card:hover { + border-color: oklch(0.82 0.17 192 / 0.5); + box-shadow: 0 0 20px oklch(0.82 0.17 192 / 0.1), 0 4px 20px oklch(0 0 0 / 0.3); + transform: translateY(-2px); + } + + .glow-text { + color: oklch(0.82 0.17 192); + text-shadow: 0 0 10px oklch(0.82 0.17 192 / 0.3); + } + + .amber-glow { + color: oklch(0.82 0.17 80); + text-shadow: 0 0 10px oklch(0.82 0.17 80 / 0.3); + } + + .grid-bg { + background-image: + linear-gradient(oklch(0.28 0.03 260 / 0.3) 1px, transparent 1px), + linear-gradient(90deg, oklch(0.28 0.03 260 / 0.3) 1px, transparent 1px); + background-size: 40px 40px; + } +} diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx index 0b184dd..1901fa3 100644 --- a/client/src/pages/Home.tsx +++ b/client/src/pages/Home.tsx @@ -1,25 +1,1137 @@ -import { Button } from "@/components/ui/button"; -import { Loader2 } from "lucide-react"; -import { Streamdown } from 'streamdown'; - /** - * All content in this page are only for example, replace with your own feature implementation - * When building pages, remember your instructions in Frontend Best Practices, Design Guide and Common Pitfalls + * Design: Data Lab (数据实验室) Style + * - Dark background with cyan (#00D4FF) and amber (#FFB800) accents + * - Dashboard-style card grid layout + * - Interactive charts and data visualizations + * - Glowing borders and hover effects */ + +import { useState, useEffect, useRef } from "react"; +import { motion, useInView } from "framer-motion"; +import { + Database, + Globe, + Github, + Cpu, + ArrowRight, + ExternalLink, + CheckCircle, + XCircle, + AlertTriangle, + ChevronDown, + ChevronUp, + Layers, + Zap, + Shield, + Clock, + DollarSign, + Code, + BookOpen, + Server, + Smartphone, + Monitor, + Radio, + Lightbulb, + CircuitBoard, + Wifi, + Bot, + BarChart3, + TrendingUp, + Search, + FileText, +} from "lucide-react"; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + ResponsiveContainer, + RadarChart, + PolarGrid, + PolarAngleAxis, + PolarRadiusAxis, + Radar, + PieChart, + Pie, + Cell, + Legend, +} from "recharts"; + +// ============ DATA ============ + +const HERO_BG = "https://d2xsxph8kpxj0f.cloudfront.net/310519663431958614/nCfhAUUB772qJXrsqNvw4r/hero-bg-mJGqmWqkvcspuW7UCAdUSs.webp"; +const DATA_FLOW_IMG = "https://d2xsxph8kpxj0f.cloudfront.net/310519663431958614/nCfhAUUB772qJXrsqNvw4r/data-flow-EAdNSsTWNG7H74jFMUF322.webp"; +const ELECTRONICS_IMG = "https://d2xsxph8kpxj0f.cloudfront.net/310519663431958614/nCfhAUUB772qJXrsqNvw4r/electronics-industry-7AiXLkxEUabkxWeyHdkeEP.webp"; + +const navItems = [ + { id: "overview", label: "概览" }, + { id: "official", label: "官方接口" }, + { id: "platforms", label: "第三方平台" }, + { id: "opensource", label: "开源项目" }, + { id: "tech-compare", label: "技术对比" }, + { id: "electronics", label: "电子行业入库" }, + { id: "conclusion", label: "结论" }, +]; + +const platformData = [ + { + name: "新榜", + nameEn: "NewRank", + url: "https://www.newrank.cn/", + scale: "1000万+公众号", + monitor: "55万+重点监测", + updateFreq: "分钟级~小时级", + pricing: "API按U点计费", + features: ["分类榜单TOP50/2000", "关键词搜索公众号", "文章列表与正文获取", "多维度数据分析"], + pros: ["数据规模最大", "行业分类完善", "API文档完整"], + cons: ["价格较高", "需要企业认证"], + rating: 4.5, + }, + { + name: "清博大数据", + nameEn: "GSData", + url: "https://github.com/gsdata-qingbo/wechatAPI", + scale: "62万+公众号", + monitor: "每日全量采集", + updateFreq: "实时/准实时", + pricing: "API按套餐计费", + features: ["关键字搜索公众号", "文章内容实时获取", "公众号排名查询", "多语言SDK支持"], + pros: ["提供10个月历史数据", "SDK覆盖广", "GitHub开源文档"], + cons: ["数据规模相对较小", "部分接口需申请"], + rating: 4.0, + }, + { + name: "极致了数据", + nameEn: "JZL Data", + url: "https://www.jzl.com/", + scale: "未明确", + monitor: "分钟级监测", + updateFreq: "最快10分钟", + pricing: "按次/套餐，有免费额度", + features: ["文章内容与互动数据", "账号粉丝增长分析", "历史发文记录", "舆情监控"], + pros: ["更新速度最快", "有免费试用", "技术支持响应快"], + cons: ["数据规模未公开", "品牌知名度较低"], + rating: 3.8, + }, + { + name: "302.AI", + nameEn: "302.AI", + url: "https://doc.302.ai/", + scale: "未明确", + monitor: "按需调用", + updateFreq: "未明确", + pricing: "API按次计费", + features: ["公众号文章列表获取", "文章正文内容获取", "集成1400+ AI API"], + pros: ["AI能力集成", "接口简洁", "多功能平台"], + cons: ["公众号数据非核心业务", "文档较少"], + rating: 3.5, + }, +]; + +const opensourceProjects = [ + { + name: "WeWe RSS", + stars: "8.9k", + url: "https://github.com/cooderl/wewe-rss", + tech: "NestJS + Prisma + MySQL", + method: "微信读书接口", + status: "archived", + statusLabel: "已归档", + desc: "将公众号文章转换为RSS订阅源，基于微信读书获取文章，支持Docker一键部署。", + features: ["RSS订阅源生成", "自动定时更新", "Docker部署", "历史文章获取"], + }, + { + name: "wechat_articles_spider", + stars: "3.4k", + url: "https://github.com/wnma3mz/wechat_articles_spider", + tech: "Python (pip安装)", + method: "公众号后台 + PC端微信", + status: "active", + statusLabel: "持续更新", + desc: "经典的公众号爬虫库，支持从公众号网页版获取文章URL，通过PC端微信获取阅读数据。", + features: ["文章URL批量获取", "阅读/点赞/评论数据", "文章下载为HTML", "pip包安装"], + }, + { + name: "wechat-spider", + stars: "N/A", + url: "https://github.com/striver-ing/wechat-spider", + tech: "跨平台可执行文件", + method: "自动化抓取", + status: "active", + statusLabel: "持续维护", + desc: "免安装的自动化爬虫，配置公众号列表后每日自动抓取文章和互动数据，存储到MySQL。", + features: ["免安装运行", "每日自动抓取", "MySQL存储", "支持Mac/Windows"], + }, + { + name: "we-mp-rss", + stars: "N/A", + url: "https://github.com/rachelos/we-mp-rss", + tech: "Web应用", + method: "多种方式", + status: "active", + statusLabel: "活跃", + desc: "微信公众号助手，支持文章转MarkDown/PDF，定时更新订阅，生成RSS订阅源。", + features: ["转MarkDown/PDF", "定时更新订阅", "RSS源生成", "导出订阅源"], + }, + { + name: "weixin_crawler", + stars: "471", + url: "https://github.com/wonderfulsuccess/weixin_crawler", + tech: "Python + Vue + Tornado", + method: "综合方案", + status: "paid", + statusLabel: "已转付费", + desc: "稳定工作4年的完整爬虫系统，提供分析报告和全文检索，已转为付费产品wcplusPro。", + features: ["全部历史文章", "分析报告", "全文检索", "Web UI"], + }, + { + name: "RSSHub", + stars: "35k+", + url: "https://github.com/DIYgod/RSSHub", + tech: "Node.js", + method: "多种路由", + status: "active", + statusLabel: "非常活跃", + desc: "万物皆可RSS的开源项目，包含微信公众号路由，但公众号路由稳定性较差。", + features: ["万物RSS化", "社区维护", "Docker部署", "丰富的路由"], + }, +]; + +const techCompareData = [ + { + name: "中间人代理", + fullName: "MITM (AnyProxy/MitmProxy)", + principle: "在微信客户端和服务器间架设代理，解密截获HTTPS请求", + dataCompleteness: 95, + stability: 50, + difficulty: 80, + risk: 60, + cost: 20, + pros: ["数据最完整", "包含阅读量等实时数据", "可获取所有字段"], + cons: ["配置复杂", "需手动操作", "微信更新可能失效"], + }, + { + name: "微信读书", + fullName: "微信读书接口方案", + principle: "利用微信读书可阅读公众号文章的特性，通过其API获取文章", + dataCompleteness: 70, + stability: 75, + difficulty: 40, + risk: 30, + cost: 10, + pros: ["接口相对稳定", "可批量订阅", "部署简单"], + cons: ["需微信读书账号", "频率受限", "无阅读量数据"], + }, + { + name: "搜狗搜索", + fullName: "搜狗微信搜索方案", + principle: "模拟请求搜狗微信搜索入口，解析搜索结果页面", + dataCompleteness: 40, + stability: 55, + difficulty: 30, + risk: 40, + cost: 5, + pros: ["无需微信账号", "相对独立", "入门简单"], + cons: ["只能获取最近10篇", "有验证码", "数据字段不全"], + }, + { + name: "PC端Hook", + fullName: "PC/移动端微信Hook方案", + principle: "Hook微信客户端进程，从内存或本地数据库提取数据", + dataCompleteness: 90, + stability: 30, + difficulty: 95, + risk: 95, + cost: 15, + pros: ["可获取实时数据", "数据完整度高"], + cons: ["技术门槛极高", "依赖特定版本", "封号风险极高"], + }, + { + name: "公众号后台", + fullName: "微信公众号后台方案", + principle: "登录公众号后台，通过官方接口获取文章列表", + dataCompleteness: 60, + stability: 90, + difficulty: 20, + risk: 10, + cost: 0, + pros: ["官方接口最稳定", "无封号风险", "数据准确"], + cons: ["只能获取自己的数据", "无法监控竞品", "需要认证"], + }, +]; + +const radarData = techCompareData.map((t) => ({ + name: t.name, + 数据完整度: t.dataCompleteness, + 稳定性: t.stability, + 易用性: 100 - t.difficulty, + 安全性: 100 - t.risk, + 成本效益: 100 - t.cost, +})); + +const industryCategories = [ + { name: "消费电子", icon: Smartphone, examples: "手机、平板、笔记本、智能穿戴、智能家居", accounts: "华为、小米、OPPO、vivo、荣耀、一加", count: 200 }, + { name: "半导体", icon: Cpu, examples: "芯片设计、制造、封测、设备材料", accounts: "中芯国际、长江存储、紫光展锐、寒武纪", count: 150 }, + { name: "显示面板", icon: Monitor, examples: "LCD、OLED、Mini LED、Micro LED", accounts: "京东方、TCL华星、维信诺、天马微电子", count: 80 }, + { name: "PCB/电路板", icon: CircuitBoard, examples: "多层板、HDI板、FPC、IC载板", accounts: "鹏鼎控股、东山精密、深南电路", count: 60 }, + { name: "LED", icon: Lightbulb, examples: "照明、显示、背光", accounts: "三安光电、木林森、国星光电", count: 50 }, + { name: "通信设备", icon: Wifi, examples: "5G基站、光通信、网络设备", accounts: "华为、中兴通讯、烽火通信", count: 100 }, + { name: "汽车电子", icon: Radio, examples: "智能驾驶、车载系统、新能源", accounts: "比亚迪、宁德时代、地平线", count: 120 }, + { name: "智能硬件", icon: Bot, examples: "IoT设备、机器人、无人机", accounts: "大疆、科沃斯、石头科技", count: 90 }, + { name: "家电巨头", icon: Server, examples: "白电、黑电、小家电", accounts: "海尔、美的、格力、TCL、海信", count: 130 }, + { name: "科技媒体", icon: BookOpen, examples: "行业媒体、分析师、KOL", accounts: "36氪、虎嗅、极客公园、电子工程专辑", count: 180 }, +]; + +const pieData = industryCategories.map((c) => ({ name: c.name, value: c.count })); +const PIE_COLORS = ["#00D4FF", "#FFB800", "#4ADE80", "#A78BFA", "#F87171", "#38BDF8", "#FBBF24", "#34D399", "#818CF8", "#FB923C"]; + +const overviewStats = [ + { label: "调研数据源", value: "15+", icon: Database }, + { label: "开源项目", value: "9", icon: Github }, + { label: "第三方平台", value: "6", icon: Globe }, + { label: "行业分类", value: "10", icon: Layers }, +]; + +// ============ COMPONENTS ============ + +function AnimatedCounter({ target, duration = 2000 }: { target: number; duration?: number }) { + const [count, setCount] = useState(0); + const ref = useRef(null); + const isInView = useInView(ref, { once: true }); + + useEffect(() => { + if (!isInView) return; + let start = 0; + const increment = target / (duration / 16); + const timer = setInterval(() => { + start += increment; + if (start >= target) { + setCount(target); + clearInterval(timer); + } else { + setCount(Math.floor(start)); + } + }, 16); + return () => clearInterval(timer); + }, [isInView, target, duration]); + + return {count}; +} + +function SectionTitle({ children, id }: { children: React.ReactNode; id: string }) { + return ( + + + {children} + + ); +} + +function StatusBadge({ status }: { status: string }) { + const config: Record = { + active: { color: "text-emerald-400 bg-emerald-400/10 border-emerald-400/30", icon: CheckCircle }, + archived: { color: "text-red-400 bg-red-400/10 border-red-400/30", icon: XCircle }, + paid: { color: "text-amber-400 bg-amber-400/10 border-amber-400/30", icon: AlertTriangle }, + }; + const c = config[status] || config.active; + const Icon = c.icon; + const labels: Record = { active: "活跃", archived: "已归档", paid: "已转付费" }; + return ( + + + {labels[status] || status} + + ); +} + +// ============ MAIN PAGE ============ + export default function Home() { - // If theme is switchable in App.tsx, we can implement theme toggling like this: - // const { theme, toggleTheme } = useTheme(); + const [activeSection, setActiveSection] = useState("overview"); + const [expandedTech, setExpandedTech] = useState(null); + const [mobileNavOpen, setMobileNavOpen] = useState(false); + + useEffect(() => { + const handleScroll = () => { + const sections = navItems.map((item) => document.getElementById(item.id)); + const scrollPos = window.scrollY + 150; + for (let i = sections.length - 1; i >= 0; i--) { + const section = sections[i]; + if (section && section.offsetTop <= scrollPos) { + setActiveSection(navItems[i].id); + break; + } + } + }; + window.addEventListener("scroll", handleScroll); + return () => window.removeEventListener("scroll", handleScroll); + }, []); + + const scrollTo = (id: string) => { + const el = document.getElementById(id); + if (el) { + el.scrollIntoView({ behavior: "smooth" }); + setMobileNavOpen(false); + } + }; return ( -
-
- {/* Example: lucide-react for icons */} - - Example Page - {/* Example: Streamdown for markdown rendering */} - Any **markdown** content - -
+
+ {/* ===== STICKY NAV ===== */} + + + {/* ===== HERO ===== */} +
+
+ +
+
+
+ +
+ + 系统性调研报告 · 2026年3月 +
+

+ 获取国内活跃 + 企业公众号 +
+ 及其更新的 + 完整方案 +

+

+ 深入调研官方接口、第三方商业平台、开源解决方案与多种技术实现路径， + 并以电子产品行业为例，提供具体的行业公众号入库策略和流程建议。 +

+
+ + +
+ +
+
+ + {/* ===== OVERVIEW STATS ===== */} +
+ 调研概览 +
+ {overviewStats.map((stat, i) => ( + + +
{stat.value}
+
{stat.label}
+ + ))} +
+ +

+ 微信公众号作为企业在中国市场进行内容营销、客户沟通和品牌建设的核心渠道，其动态和内容具有极高的商业价值。 + 本报告系统性地调研和分析了如何高效、规模化地获取国内活跃的企业公众号，并实时追踪其内容更新。 +

+

+ 报告深入探讨了官方接口、 + 第三方商业服务、 + 开源解决方案以及多种技术实现路径， + 并以电子产品行业为例， + 提供具体的行业公众号入库策略和流程建议。 +

+ +
+ + {/* ===== OFFICIAL API ===== */} +
+ 官方渠道：微信公众平台接口 +
+ +

+ + 官方接口能力 +

+
+ {[ + { api: "freepublish/batchget", desc: "获取自身已发布的图文消息列表和内容", status: "limited" }, + { api: "user/get", desc: "获取关注者列表（OpenID）", status: "limited" }, + { api: "getarticletotal", desc: "获取图文分析数据（阅读、分享等）", status: "limited" }, + { api: "第三方平台代调用", desc: "需获得公众号运营者的明确授权", status: "limited" }, + ].map((item) => ( +
+ +
+ {item.api} +

{item.desc}

+
+
+ ))} +
+ + +

+ + 核心限制 +

+
+ {[ + { title: "封闭生态", desc: "只能管理自己的公众号，无法批量获取其他公众号信息" }, + { title: "认证门槛", desc: "需要企业/组织认证，个人开发者受限" }, + { title: "频率限制", desc: "接口调用有严格的频率限制，无法大规模采集" }, + { title: "无发现能力", desc: "无法搜索或发现新的公众号，缺乏市场研究功能" }, + ].map((item) => ( +
+ +
+ {item.title} +

{item.desc}

+
+
+ ))} +
+
+

+ 结论：官方接口是企业进行自我数据管理的基础，但其封闭生态使其无法直接用于发现和获取海量其他企业公众号的数据。 +

+
+ +
+
+ + {/* ===== THIRD-PARTY PLATFORMS ===== */} +
+ 第三方商业数据平台 +

+ 为满足市场对公众号数据的巨大需求，涌现了多家专业的第三方数据服务平台。这些平台通过自有的爬虫技术和数据分析能力， + 构建了庞大的公众号数据库，并以API或SaaS产品的形式提供服务。 +

+
+ {platformData.map((platform, i) => ( + +
+
+

{platform.name}

+ {platform.nameEn} +
+ + + +
+
+
+
数据规模
+
{platform.scale}
+
+
+
更新频率
+
{platform.updateFreq}
+
+
+
监测能力
+
{platform.monitor}
+
+
+
定价
+
{platform.pricing}
+
+
+
+
核心功能
+
+ {platform.features.map((f) => ( + + {f} + + ))} +
+
+
+
+
优势
+ {platform.pros.map((p) => ( +
+ + {p} +
+ ))} +
+
+
不足
+ {platform.cons.map((c) => ( +
+ + {c} +
+ ))} +
+
+ {/* Rating bar */} +
+
+ 综合评分 + {platform.rating}/5.0 +
+
+ +
+
+ + ))} +
+
+ + {/* ===== OPEN SOURCE ===== */} +
+ 开源解决方案与GitHub项目 +
+ Data flow +
+
+

+ 对于有技术能力且希望降低成本的团队，可以利用GitHub上的开源项目构建自有的公众号数据采集系统。 + 这些项目提供了不同的技术思路和实现路径，但需要持续的维护投入。 +

+
+
+
+ {opensourceProjects.map((project, i) => ( + +
+
+ +

{project.name}

+
+ +
+
+ ★ {project.stars} + {project.tech} +
+

{project.desc}

+
+ {project.features.map((f) => ( + + {f} + + ))} +
+
+
采集方案
+ {project.method} +
+ + 查看项目 + + + ))} +
+
+ + {/* ===== TECH COMPARISON ===== */} +
+ 核心技术实现路径对比 +

+ 无论是第三方平台还是开源项目，其底层都依赖于几种核心技术来绕过官方限制获取公众号数据。 + 了解这些技术路径有助于评估不同方案的稳定性和风险。 +

+ + {/* Radar Chart */} + +

+ + 五维度雷达对比图 +

+ + + + + + + + + + + + + + + + + {/* Tech detail cards */} +
+ {techCompareData.map((tech, i) => ( + + + {expandedTech === tech.name && ( + +
+
+
优势
+ {tech.pros.map((p) => ( +
+ + {p} +
+ ))} +
+
+
劣势
+ {tech.cons.map((c) => ( +
+ + {c} +
+ ))} +
+
+ {/* Metric bars */} +
+ {[ + { label: "数据完整度", value: tech.dataCompleteness, color: "bg-cyan" }, + { label: "稳定性", value: tech.stability, color: "bg-amber" }, + { label: "技术难度", value: tech.difficulty, color: "bg-purple-400" }, + { label: "风险等级", value: tech.risk, color: "bg-red-400" }, + { label: "成本", value: tech.cost, color: "bg-emerald-400" }, + ].map((m) => ( +
+
+ {m.label} + {m.value}% +
+
+
+
+
+ ))} +
+ + )} + + ))} +
+
+ + {/* ===== ELECTRONICS INDUSTRY ===== */} +
+ 电子产品行业公众号入库方案 +
+ Electronics industry +
+
+

+ 基于以上调研，以下是针对电子产品行业的公众号入库方案，涵盖10个细分领域， + 预计可覆盖1,160+个相关公众号。 +

+
+
+ + {/* Pie Chart */} + +

+ + 行业分类分布图 +

+ + + `${name} ${(percent * 100).toFixed(0)}%`} + > + {pieData.map((_, index) => ( + + ))} + + + + + + + {/* Industry category cards */} +
+ {industryCategories.map((cat, i) => ( + +
+
+ +
+
+

{cat.name}

+ + ~ 个公众号 + +
+
+

+ 涵盖：{cat.examples} +

+

+ 头部账号：{cat.accounts} +

+ + ))} +
+ + {/* Workflow */} + +

+ + 推荐入库工作流程 +

+
+ {[ + { + step: 1, + title: "种子账号发现与冷启动", + desc: "调用新榜API获取科技分类下的日榜/周榜/月榜TOP 2000公众号列表，结合关键词通过清博大数据或搜狗搜索补充搜索垂直领域公众号。", + icon: Search, + color: "#00D4FF", + }, + { + step: 2, + title: "分类与入库", + desc: "对获取到的公众号列表进行人工或AI辅助分类，按照10个细分行业打上标签，存入数据库的公众号信息表。", + icon: Database, + color: "#FFB800", + }, + { + step: 3, + title: "实时内容更新与监控", + desc: "对已入库的核心公众号，使用极致了数据API或自建爬虫进行高频监控（每15-30分钟），实时获取新发布文章并存入文章表。", + icon: Clock, + color: "#4ADE80", + }, + { + step: 4, + title: "数据维护与扩展", + desc: "定期（每周）重复步骤一和二，发现新的活跃公众号，评估现有账号活跃度，剔除长期不更新的僵尸号。", + icon: TrendingUp, + color: "#A78BFA", + }, + ].map((item, i) => ( +
+
+
+ +
+ {i < 3 &&
} +
+
+
+ + Step {item.step} + +

{item.title}

+
+

{item.desc}

+
+
+ ))} +
+ + + {/* Tech Stack Bar Chart */} + +

+ + 推荐技术栈 +

+
+ {[ + { category: "后端语言", items: ["Python (Scrapy, FastAPI)"], icon: Code }, + { category: "数据库", items: ["MySQL/PostgreSQL", "MongoDB", "Redis"], icon: Database }, + { category: "任务调度", items: ["Celery", "APScheduler"], icon: Clock }, + { category: "部署方案", items: ["Docker", "Kubernetes"], icon: Server }, + ].map((stack) => ( +
+
+ + {stack.category} +
+ {stack.items.map((item) => ( +
{item}
+ ))} +
+ ))} +
+ +
+ + {/* ===== CONCLUSION ===== */} +
+ 结论与建议 +
+ {[ + { + title: "商业应用首选", + desc: "对于追求效率和数据稳定性的商业应用，直接采购成熟的第三方数据平台API（如新榜、清博）是最佳选择。虽然需要付费，但考虑到自建系统的开发和维护成本，其性价比通常很高。", + icon: DollarSign, + color: "#FFB800", + }, + { + title: "技术团队自建", + desc: "对于有技术研发能力且希望控制成本的团队，可以基于开源项目（如wechat_articles_spider）构建自有采集系统，但必须为持续的技术对抗和维护投入资源。", + icon: Code, + color: "#00D4FF", + }, + { + title: "混合策略最优", + desc: "推荐采用'商业API为主，开源方案为辅'的混合策略。用新榜API获取行业榜单和基础数据，用自建爬虫补充特定需求，以平衡成本、效率和稳定性。", + icon: Layers, + color: "#4ADE80", + }, + ].map((item, i) => ( + +
+ +
+

{item.title}

+

{item.desc}

+ + ))} +
+ + {/* Key insight */} + +
+ +
+

核心洞察

+

+ 系统性地获取国内活跃企业公众号及其更新是一个涉及多重技术、策略和成本考量的复杂任务。 + 目前不存在单一完美的解决方案。纯免费且长期稳定的"一劳永逸"方案基本不存在—— + 微信官方持续升级反爬策略，所有非官方方案都需要持续的技术投入和维护。 + 本报告提出的混合策略和针对电子行业的具体工作流程，旨在为相关实践提供一个兼具成本效益和可扩展性的参考框架。 +

+
+
+ +
+ + {/* ===== FOOTER ===== */} +
+
+

+ 微信企业公众号获取与监控调研报告 · Manus AI · 2026年3月 +

+
+
); } diff --git a/ideas.md b/ideas.md new file mode 100644 index 0000000..c5d2427 --- /dev/null +++ b/ideas.md @@ -0,0 +1,94 @@ +# 微信企业公众号调研报告 - 网页设计方案 + +## 项目背景 +展示关于获取国内活跃企业公众号及其更新的系统性调研结果，包含官方接口、第三方平台、开源项目、技术方案对比和电子产品行业入库方案。 + +--- + + + +## 方案一：数据实验室 (Data Lab) 风格 + +**设计运动**: 受Swiss Design与现代数据可视化仪表盘启发的"科技研究所"风格 + +**核心原则**: +1. 信息密度优先 — 在保持可读性的前提下最大化信息展示 +2. 网格与秩序 — 严格的模块化网格系统，信息层次分明 +3. 数据即美学 — 图表和数据可视化本身就是装饰元素 + +**色彩哲学**: 深色背景（#0A0E1A）配合荧光蓝(#00D4FF)和琥珀色(#FFB800)的高对比度数据色彩，营造科技感和专业感。 + +**布局范式**: 仪表盘式多面板布局，左侧导航栏固定，右侧内容区域采用卡片网格。 + +**标志性元素**: 发光边框卡片、动态数据计数器、微型图表装饰 + +**交互哲学**: 悬停时卡片微微上浮并发光，数据数字滚动进入 + +**动画**: 数字递增动画、卡片渐入、图表绘制动画 + +**字体系统**: JetBrains Mono（数据/代码） + DM Sans（正文） + +0.08 + + + + +## 方案二：学术期刊 (Academic Journal) 风格 + +**设计运动**: 受Edward Tufte信息设计理论和学术出版物启发的"研究论文"风格 + +**核心原则**: +1. 内容至上 — 设计服务于内容的清晰传达 +2. 留白即呼吸 — 大量留白让读者专注于信息本身 +3. 层次分明 — 通过字体大小和粗细建立清晰的信息层级 + +**色彩哲学**: 温暖的米白底色(#FAFAF5)配合深墨色文字(#1A1A2E)，用克莱因蓝(#002FA7)作为强调色，传达学术严谨感。 + +**布局范式**: 单栏长滚动布局，宽窄交替的内容区块，类似学术论文的阅读体验。侧边有浮动目录导航。 + +**标志性元素**: 手绘风格的分隔线、边注标注、引用块装饰 + +**交互哲学**: 滚动触发的章节过渡，目录高亮跟随 + +**动画**: 平滑的滚动锚点跳转、段落淡入、图表从左到右绘制 + +**字体系统**: Noto Serif SC（标题/引用） + Noto Sans SC（正文）+ Source Code Pro（代码/API） + +0.06 + + + + +## 方案三：蓝图工程 (Blueprint Engineering) 风格 + +**设计运动**: 受工程蓝图和技术文档启发的"系统架构图"风格 + +**核心原则**: +1. 结构可视化 — 用流程图和连接线展示系统关系 +2. 精确与可靠 — 每个元素都有明确的功能和位置 +3. 模块化思维 — 信息以可组合的模块呈现 + +**色彩哲学**: 深蓝底色(#0D1B2A)配合白色线条和青色(#00F5D4)高亮，模拟工程蓝图的视觉效果。绿色(#4ADE80)表示可用/推荐，红色(#F87171)表示风险/限制。 + +**布局范式**: 全宽横向滚动的时间线/流程图布局，纵向滚动的详细内容区，左侧有固定的"系统导航面板"。 + +**标志性元素**: 虚线连接线、节点标记、网格背景纹理、状态指示灯 + +**交互哲学**: 点击节点展开详情面板，连接线动画展示数据流向 + +**动画**: 线条绘制动画、节点脉冲效果、面板滑入 + +**字体系统**: Space Grotesk（标题） + Inter（正文） + Fira Code（代码） + +0.05 + + +--- + +## 选定方案：方案一 — 数据实验室 (Data Lab) 风格 + +选择理由： +1. 调研报告涉及大量数据对比（平台、项目、方案），仪表盘风格最适合展示这类结构化信息 +2. 深色背景配合荧光色的科技感与微信公众号/技术调研的主题高度契合 +3. 卡片网格布局可以灵活承载不同类型的内容（表格、图表、流程图） +4. 交互式图表和数据可视化能让用户更直观地探索调研结果