yueqian-ai
529 lines
15 KiB
HTML
529 lines
15 KiB
HTML
<!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>
|
|
/* ===== Ant Design 阿里云风格 Design Tokens ===== */
|
|
:root {
|
|
/* 品牌色 */
|
|
--color-primary: #1677FF;
|
|
--color-primary-hover: #4096FF;
|
|
--color-primary-active: #0958D9;
|
|
--color-primary-bg: #E6F4FF;
|
|
|
|
/* 功能色 */
|
|
--color-success: #52C41A;
|
|
--color-warning: #FAAD14;
|
|
--color-error: #FF4D4F;
|
|
|
|
/* 中性色 - 亮色主题 */
|
|
--bg: #F5F5F5;
|
|
--bg-container: #FFFFFF;
|
|
--bg-elevated: #FAFAFA;
|
|
--border: #D9D9D9;
|
|
--border-light: #F0F0F0;
|
|
--text-primary: #141414;
|
|
--text-secondary: #595959;
|
|
--text-tertiary: #8C8C8C;
|
|
|
|
/* 圆角 */
|
|
--radius-sm: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 12px;
|
|
|
|
/* 阴影 */
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02);
|
|
--shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px -2px rgba(0,0,0,0.04);
|
|
|
|
/* 布局 */
|
|
--header-h: 64px;
|
|
--content-max: 1200px;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
|
'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text-primary);
|
|
line-height: 1.57;
|
|
font-size: 14px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ===== Header ===== */
|
|
.header-bar {
|
|
position: sticky;
|
|
top: 0;
|
|
height: var(--header-h);
|
|
background: rgba(255,255,255,0.85);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--border-light);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 40px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header-bar .brand {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 12px;
|
|
}
|
|
|
|
.header-bar h1 {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, var(--color-primary) 0%, #722ED1 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.header-bar .tagline {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
/* ===== Content ===== */
|
|
.container {
|
|
max-width: var(--content-max);
|
|
margin: 0 auto;
|
|
padding: 32px 40px 64px;
|
|
}
|
|
|
|
/* ===== Filter Bar ===== */
|
|
.filter-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 24px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-label {
|
|
font-size: 13px;
|
|
color: var(--text-tertiary);
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.filter-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 14px;
|
|
border-radius: 16px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-container);
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
user-select: none;
|
|
}
|
|
|
|
.filter-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
|
|
.filter-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
|
|
|
|
.filter-chip .chip-count {
|
|
font-size: 11px;
|
|
background: rgba(0,0,0,0.08);
|
|
border-radius: 10px;
|
|
padding: 0 6px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.filter-chip.active .chip-count { background: rgba(255,255,255,0.25); }
|
|
|
|
/* ===== Group ===== */
|
|
.group { margin-bottom: 32px; }
|
|
|
|
.group-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 12px;
|
|
padding-left: 12px;
|
|
border-left: 3px solid var(--color-primary);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ===== Card ===== */
|
|
.card {
|
|
background: var(--bg-container);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: 20px 24px;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
transition: all 0.2s ease;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-1px);
|
|
border-color: var(--color-primary);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.card-accent {
|
|
width: 4px;
|
|
height: 36px;
|
|
border-radius: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.card-accent--blue { background: var(--color-primary); }
|
|
.card-accent--pink { background: #EB2F96; }
|
|
.card-accent--mint { background: var(--color-success); }
|
|
.card-accent--lavender { background: #722ED1; }
|
|
|
|
.card-body { flex: 1; min-width: 0; }
|
|
|
|
.card-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.card-name a {
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.card-name a:hover { color: var(--color-primary); }
|
|
|
|
.card-desc {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
line-height: 1.5;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.card-meta {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 4px;
|
|
}
|
|
|
|
.card-date {
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
font-family: 'SF Mono', 'Menlo', 'Courier New', monospace;
|
|
}
|
|
|
|
.card-badge {
|
|
display: inline-block;
|
|
padding: 2px 10px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card-badge--blue { background: #E6F4FF; color: #1677FF; border: 1px solid #91CAFF; }
|
|
.card-badge--pink { background: #FFF0F6; color: #EB2F96; border: 1px solid #FFADD2; }
|
|
.card-badge--mint { background: #F6FFED; color: #52C41A; border: 1px solid #B7EB8F; }
|
|
.card-badge--lavender { background: #F9F0FF; color: #722ED1; border: 1px solid #D3ADF7; }
|
|
|
|
/* ===== Footer ===== */
|
|
.footer {
|
|
margin-top: 48px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--border-light);
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
text-align: center;
|
|
}
|
|
|
|
/* ===== Responsive ===== */
|
|
@media (max-width: 768px) {
|
|
.header-bar { padding: 0 16px; }
|
|
.header-bar h1 { font-size: 16px; }
|
|
.container { padding: 24px 16px 48px; }
|
|
.card { flex-wrap: wrap; gap: 8px; padding: 16px; }
|
|
.card-accent { display: none; }
|
|
.card-name { min-width: 0; width: 100%; }
|
|
.card-meta { flex-direction: row; gap: 8px; margin-left: auto; }
|
|
.card-desc { white-space: normal; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="header-bar">
|
|
<div class="brand">
|
|
<h1>一人公司开发团队知识库</h1>
|
|
<span class="tagline">独立开发者的技术沉淀与参考资源</span>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div class="filter-bar" id="filterBar"></div>
|
|
<div id="content"></div>
|
|
<div class="footer" id="footer"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const entries = [
|
|
[
|
|
"Claude Code 工程师使用指南/报告/claude-code-engineering-guide.html",
|
|
"Claude Code 最佳实践",
|
|
"Claude Code 在软件工程场景下的最佳实践与工作流指南",
|
|
"2026-04-29",
|
|
"blue"
|
|
],
|
|
[
|
|
"Graphify 深度分析报告/代码/graphify-analysis.html",
|
|
"Graphify 代码分析",
|
|
"Graphify 项目的代码结构、质量指标与重构建议",
|
|
"2026-04-29",
|
|
"pink"
|
|
],
|
|
[
|
|
"代码图谱工具调研/报告/code-structure-tools-analysis.html",
|
|
"代码图谱工具调研",
|
|
"主流代码结构与可视化工具的横向对比分析",
|
|
"2026-04-29",
|
|
"mint"
|
|
],
|
|
[
|
|
"MySQL转PostgreSQL迁移工具/报告/mysql-to-pg-migration-tools.html",
|
|
"MySQL 转 PostgreSQL 迁移工具",
|
|
"主流 MySQL → PostgreSQL 迁移工具对比分析，含云厂商方案与开源方案",
|
|
"2026-05-04",
|
|
"mint"
|
|
],
|
|
[
|
|
"mcp-services-guide/index.html",
|
|
"MCP 服务大全",
|
|
"适合开发者使用的 MCP 服务大全，含功能对比与快速开始指南",
|
|
"2026-04-29",
|
|
"lavender"
|
|
],
|
|
[
|
|
"国内商业业态分类到家/报告/到家业态分类全景.html",
|
|
"国内商业业态分类（到家服务）",
|
|
"国内完整业态分类全景，按服务本质分为 5 大板块 92 业态，含楼层收费参考与商业模式对比",
|
|
"2026-05-05",
|
|
"mint"
|
|
],
|
|
[
|
|
"在线下单配送抢单小程序调研/报告/delivery-order-grabbing-mini-program-research.html",
|
|
"在线下单配送抢单小程序调研",
|
|
"Top 5 开源外卖/跑腿/抢单小程序横向对比，含前后端功能完成度矩阵与技术方案分析",
|
|
"2026-05-05",
|
|
"mint"
|
|
],
|
|
[
|
|
"crmeb-mer-graph-report.html",
|
|
"CRMEB-MER 项目图谱报告",
|
|
"CRMEB-MER 多商户电商系统的代码结构、依赖图谱与架构深度分析",
|
|
"2026-05-06",
|
|
"pink"
|
|
],
|
|
[
|
|
"分销商城推广模式调研/报告/分销商城推广模式全景调研.html",
|
|
"分销商城推广模式全景调研",
|
|
"18 种推广模式系统梳理（传统分销+微三云特色），含核心机制、收益分析、分润计算、合规框架与选型建议",
|
|
"2026-05-06",
|
|
"mint"
|
|
],
|
|
[
|
|
"交互式演示/tetrahedron-interactive.html",
|
|
"正四面体旋转与展开动画",
|
|
"鼠标拖拽旋转四面体，点击按钮铰链展开为平面展开图，四个面均为等大正三角形",
|
|
"2026-05-06",
|
|
"lavender"
|
|
],
|
|
[
|
|
"全域智能认证与门户平台/报告/unified-auth-portal-requirements.html",
|
|
"全域智能认证与门户平台需求分析",
|
|
"企业级统一身份认证与门户平台完整需求拆解，含 13 套系统对接清单、架构设计、实施路线图与风险分析",
|
|
"2026-05-08",
|
|
"pink"
|
|
],
|
|
[
|
|
"全域智能认证与门户平台/报告/identity-auth-center-tech-analysis.html",
|
|
"身份认证中心技术解析与开源匹配",
|
|
"多元化认证、零信任登录、密码代填、CAS 对接深度解析，Keycloak/Casdoor/MaxKey/Apereo CAS 匹配度对比与选型建议",
|
|
"2026-05-08",
|
|
"blue"
|
|
],
|
|
[
|
|
"全域智能认证与门户平台/报告/opensource-iam-selection-report.html",
|
|
"开源 IAM 项目选型报告",
|
|
"5 大开源 IAM 项目（Keycloak/Casdoor/MaxKey/Apereo CAS/Syncope）匹配度深度对比，含需求矩阵、综合评分与推荐架构蓝图",
|
|
"2026-05-08",
|
|
"blue"
|
|
],
|
|
[
|
|
"graphify-rs使用手册/报告/graphify-rs-usage-guide.html",
|
|
"graphify-rs 使用手册",
|
|
"graphify-rs 代码知识图谱工具的完整使用指南，含安装、构建、查询、输出格式、集成与工作流最佳实践",
|
|
"2026-05-08",
|
|
"blue"
|
|
],
|
|
[
|
|
"金鹿商城电商小程序需求分析/报告/jinlu-deer-mall-requirements-analysis.html",
|
|
"金鹿商城电商小程序需求分析",
|
|
"金鹿商城小程序需求解读与 CRMEB 现有功能差异对比，含限时抢签/活动币/积分商城组合支付模块的完整拆解与 26 人天实施计划",
|
|
"2026-05-09",
|
|
"pink"
|
|
],
|
|
[
|
|
"招标投标AI推广应用政策解读/报告/ai-bidding-tendering-policy-analysis.html",
|
|
"招标投标领域AI推广应用政策解读",
|
|
"国家发改委等八部门联合发文（发改法规〔2026〕195号），6 大领域 20 个 AI 场景全景拆解，含分阶段目标与市场机遇分析",
|
|
"2026-05-09",
|
|
"mint"
|
|
],
|
|
[
|
|
"招标投标AI推广应用政策解读/报告/provincial-bidding-smart-supervision-platform.html",
|
|
"省级招投标智慧监管平台建设方案",
|
|
"省级招投标主管部门业务痛点分析、8大业务场景设计、功能模块规划、系统架构与技术实现路径完整方案",
|
|
"2026-05-09",
|
|
"pink"
|
|
],
|
|
[
|
|
"沈阳顺义-数据-项目建设方案/报告/沈阳顺义数据项目建设方案解读.html",
|
|
"沈阳顺义数据项目建设方案解读",
|
|
"系统故障预测与健康管理数据应用平台完整解读：12+3功能模块拆解、17项功能要求覆盖分析、13项技术指标对照、20+审查意见分类、交叉点与新增点识别",
|
|
"2026-05-12",
|
|
"pink"
|
|
],
|
|
[
|
|
"沈阳顺义-数据-项目建设方案/报告/开源项目匹配度分析.html",
|
|
"沈阳顺义项目开源方案匹配度分析",
|
|
"10 个开源项目（ThingsBoard/DataHub/ThingLinks/IoT DC3/qData 等）在 IoT 层、数据治理层、算法层的匹配度矩阵分析，含推荐组合方案与自研边界划分",
|
|
"2026-05-12",
|
|
"mint"
|
|
],
|
|
[
|
|
"沈阳顺义-数据-项目建设方案/报告/开源版专业版功能对比.html",
|
|
"开源版 vs 专业版功能对比",
|
|
"沈阳顺义数据项目 13 大模块逐项对比，清晰标注开源版已包含/部分包含/缺失功能项，含差异说明与统计汇总",
|
|
"2026-05-12",
|
|
"pink"
|
|
]
|
|
];
|
|
|
|
const groups = [
|
|
{ title: "工程指南", filter: (e) => e[4] === "blue" },
|
|
{ title: "深度分析", filter: (e) => e[4] === "pink" },
|
|
{ title: "调研研究", filter: (e) => e[4] === "mint" },
|
|
{ title: "参考资源", filter: (e) => e[4] === "lavender" }
|
|
];
|
|
|
|
const badgeLabels = { blue: "工程指南", pink: "深度分析", mint: "调研研究", lavender: "参考资源" };
|
|
|
|
let activeFilters = new Set(); // empty = show all
|
|
|
|
function buildFilterBar() {
|
|
const bar = document.getElementById('filterBar');
|
|
bar.innerHTML = '';
|
|
|
|
const allChip = document.createElement('span');
|
|
allChip.className = 'filter-chip active';
|
|
allChip.dataset.group = '__all__';
|
|
allChip.innerHTML = `全部<span class="chip-count">${entries.length}</span>`;
|
|
allChip.addEventListener('click', () => {
|
|
activeFilters.clear();
|
|
render();
|
|
});
|
|
bar.appendChild(allChip);
|
|
|
|
for (const group of groups) {
|
|
const count = entries.filter(group.filter).length;
|
|
if (!count) continue;
|
|
const chip = document.createElement('span');
|
|
chip.className = 'filter-chip';
|
|
chip.dataset.group = group.title;
|
|
chip.innerHTML = `${group.title}<span class="chip-count">${count}</span>`;
|
|
chip.addEventListener('click', () => {
|
|
if (activeFilters.has(group.title)) {
|
|
activeFilters.delete(group.title);
|
|
} else {
|
|
activeFilters.add(group.title);
|
|
}
|
|
render();
|
|
});
|
|
bar.appendChild(chip);
|
|
}
|
|
}
|
|
|
|
function render() {
|
|
const content = document.getElementById('content');
|
|
const footer = document.getElementById('footer');
|
|
content.innerHTML = '';
|
|
|
|
// Update filter bar active states
|
|
document.querySelectorAll('.filter-chip').forEach(chip => {
|
|
const g = chip.dataset.group;
|
|
chip.classList.toggle('active', g === '__all__' ? activeFilters.size === 0 : activeFilters.has(g));
|
|
});
|
|
|
|
// Sort by date descending
|
|
const sorted = [...entries].sort((a, b) => b[3].localeCompare(a[3]));
|
|
|
|
// Determine which groups to show
|
|
const activeGroups = activeFilters.size === 0
|
|
? groups
|
|
: groups.filter(g => activeFilters.has(g.title));
|
|
|
|
for (const group of activeGroups) {
|
|
const items = sorted.filter(group.filter);
|
|
if (!items.length) continue;
|
|
|
|
const section = document.createElement('div');
|
|
section.className = 'group';
|
|
section.dataset.group = group.title;
|
|
|
|
const title = document.createElement('div');
|
|
title.className = 'group-title';
|
|
title.textContent = group.title;
|
|
section.appendChild(title);
|
|
|
|
for (const [path, name, desc, date, color] of items) {
|
|
const card = document.createElement('div');
|
|
card.className = 'card';
|
|
card.innerHTML = `
|
|
<div class="card-accent card-accent--${color}"></div>
|
|
<div class="card-body">
|
|
<div class="card-name"><a href="${path}" target="_blank">${name}</a></div>
|
|
<div class="card-desc">${desc}</div>
|
|
</div>
|
|
<div class="card-meta">
|
|
<span class="card-badge card-badge--${color}">${badgeLabels[color]}</span>
|
|
<span class="card-date">${date}</span>
|
|
</div>
|
|
`;
|
|
section.appendChild(card);
|
|
}
|
|
|
|
content.appendChild(section);
|
|
}
|
|
|
|
// Count visible items
|
|
const visibleCount = content.querySelectorAll('.card').length;
|
|
footer.textContent = `显示 ${visibleCount} / 共 ${entries.length} 篇文档`;
|
|
}
|
|
|
|
buildFilterBar();
|
|
render();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|