Checkpoint: 完整的微信企业公众号获取与监控调研报告交互式网页,包含:深色数据实验室设计风格、7个章节导航、官方接口分析、第三方平台对比卡片、开源项目展示、五维雷达对比图、电子行业10个细分领域入库方案、饼图分布、推荐工作流程、结论建议。使用Recharts交互式图表、Framer Motion动画、响应式布局。

这个提交包含在:
Manus
2026-03-12 20:36:35 -04:00
父节点 ef41bdbe86
当前提交 2ce3bd63a6
修改 6 个文件,包含 1300 行新增108 行删除

查看文件

@@ -6,12 +6,10 @@
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1" />
<title>微信企业公众号获取与监控调研报告</title>
<!-- THIS IS THE START OF A COMMENT BLOCK, BLOCK TO BE DELETED: Google Fonts here, example:
<title>微信企业公众号获取与监控调研报告</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
THIS IS THE END OF A COMMENT BLOCK, BLOCK TO BE DELETED -->
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body>

查看文件

@@ -27,7 +27,7 @@ function App() {
return (
<ErrorBoundary>
<ThemeProvider
defaultTheme="light"
defaultTheme="dark"
// switchable
>
<TooltipProvider>

查看文件

@@ -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: <div className="container">...</div>
*
* For custom widths, use max-w-* utilities directly:
* <div className="max-w-6xl mx-auto px-4">...</div>
*/
.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;
}
}
}
.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;
}
}

文件差异内容过多而无法显示 加载差异