-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+ :root{
+ --bg-deep:#06080d;
+ --bg-card:#0c1017;
+ --bg-card-hover:#111822;
+ --bg-surface:#151c28;
+ --border:#1a2332;
+ --border-bright:#2a3a52;
+ --text-primary:#e8edf5;
+ --text-secondary:#8899b0;
+ --text-muted:#556677;
+ --accent-cyan:#00d4ff;
+ --accent-green:#00ff88;
+ --accent-orange:#ff8a00;
+ --accent-pink:#ff3d8e;
+ --accent-purple:#a855f7;
+ --glow-cyan:0 0 30px rgba(0,212,255,.15);
+ --glow-green:0 0 30px rgba(0,255,136,.12);
+ --radius:12px;
+ --radius-lg:20px;
+ --font-sans:'Noto Sans SC',system-ui,sans-serif;
+ --font-mono:'JetBrains Mono',monospace;
+ }
+ html{scroll-behavior:smooth;font-size:16px}
+ body{
+ font-family:var(--font-sans);
+ background:var(--bg-deep);
+ color:var(--text-primary);
+ line-height:1.7;
+ overflow-x:hidden;
+ -webkit-font-smoothing:antialiased;
+ }
+ a{color:inherit;text-decoration:none}
+ img{max-width:100%;display:block}
+ .container{max-width:1280px;margin:0 auto;padding:0 24px}
+ section{padding:80px 0}
+
+ /* HEADER */
+ .site-header{
+ position:fixed;top:0;left:0;right:0;z-index:100;
+ background:rgba(6,8,13,.85);backdrop-filter:blur(20px);
+ border-bottom:1px solid var(--border);
+ }
+ .nav-inner{
+ display:flex;align-items:center;justify-content:space-between;
+ height:64px;
+ }
+ .logo{
+ font-family:var(--font-mono);font-weight:700;font-size:1.1rem;
+ color:var(--accent-cyan);letter-spacing:-.02em;
+ }
+ .nav-right{display:flex;gap:24px;align-items:center}
+ .nav-links{display:flex;gap:24px;align-items:center}
+ .nav-links a{
+ font-size:.875rem;color:var(--text-secondary);
+ transition:color .2s;font-weight:400;
+ }
+ .nav-links a:hover{color:var(--text-primary)}
+ .github-link{
+ display:inline-flex;align-items:center;gap:6px;
+ background:transparent;color:var(--text-secondary);
+ padding:8px 16px;border-radius:8px;font-weight:500;font-size:.8rem;
+ border:1px solid var(--border);transition:all .2s;
+ }
+ .github-link:hover{color:var(--text-primary);border-color:var(--border-bright);transform:translateY(-1px)}
-
-
-
-
-
- 首月价格区间 (元)
-
-
-
-
-
-
-
-
-
- ¥0
- ¥0
-
-
-
-
-
-
-
-
+ /* HERO */
+ .hero{
+ padding-top:140px;padding-bottom:80px;
+ text-align:center;position:relative;
+ }
+ .hero::before{
+ content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
+ width:800px;height:500px;
+ background:radial-gradient(ellipse,rgba(0,212,255,.06) 0%,transparent 70%);
+ pointer-events:none;
+ }
+ .hero-badge{
+ display:inline-flex;align-items:center;gap:8px;
+ background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);
+ padding:6px 16px;border-radius:100px;font-size:.8rem;
+ color:var(--accent-cyan);margin-bottom:28px;
+ font-family:var(--font-mono);
+ }
+ .hero-badge::before{content:'>';opacity:.5}
+ .hero h1{
+ font-weight:900;
+ font-size:clamp(2.2rem,5vw,3.8rem);
+ line-height:1.15;letter-spacing:-.03em;
+ margin-bottom:16px;
+ }
+ .hero h1 .gradient{
+ background:linear-gradient(135deg,var(--accent-cyan),var(--accent-green));
+ -webkit-background-clip:text;-webkit-text-fill-color:transparent;
+ background-clip:text;
+ }
+ .hero-sub{
+ font-size:1.1rem;color:var(--text-secondary);
+ max-width:600px;margin:0 auto 40px;line-height:1.8;font-weight:300;
+ }
+ .hero-stats{
+ display:flex;justify-content:center;gap:48px;flex-wrap:wrap;
+ }
+ .hero-stat{text-align:center}
+ .hero-stat .num{
+ font-family:var(--font-mono);font-size:2rem;font-weight:700;
+ color:var(--accent-cyan);
+ }
+ .hero-stat .label{font-size:.8rem;color:var(--text-muted);margin-top:4px}
+
+ /* QUICK COMPARE */
+ .compare-section{background:var(--bg-card);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
+ .section-header{text-align:center;margin-bottom:40px}
+ .section-header h2{
+ font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;
+ letter-spacing:-.02em;margin-bottom:10px;
+ }
+ .section-header p{color:var(--text-secondary);font-size:.95rem;font-weight:300}
+ .table-wrap{
+ overflow-x:auto;border-radius:var(--radius-lg);
+ border:1px solid var(--border);
+ scrollbar-width:thin;scrollbar-color:var(--border-bright) transparent;
+ }
+ .table-wrap::-webkit-scrollbar{height:6px}
+ .table-wrap::-webkit-scrollbar-track{background:transparent}
+ .table-wrap::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:3px}
+ .compare-table{
+ width:100%;min-width:900px;border-collapse:collapse;
+ font-size:.875rem;
+ }
+ .compare-table th,.compare-table td{
+ padding:14px 18px;text-align:left;
+ border-bottom:1px solid var(--border);
+ white-space:nowrap;
+ }
+ .compare-table thead th{
+ background:var(--bg-surface);color:var(--text-muted);
+ font-weight:500;font-size:.72rem;letter-spacing:.06em;
+ text-transform:uppercase;
+ }
+ .compare-table tbody tr{transition:background .2s}
+ .compare-table tbody tr:hover{background:rgba(0,212,255,.03)}
+ .compare-table tbody tr:last-child td{border-bottom:none}
+ .compare-table .platform-name{
+ font-weight:700;color:var(--text-primary);
+ display:flex;align-items:center;gap:10px;
+ }
+ .compare-table .dot{
+ width:8px;height:8px;border-radius:50%;flex-shrink:0;
+ }
+ .price-highlight{
+ font-family:var(--font-mono);font-weight:700;
+ color:var(--accent-green);font-size:1rem;
+ }
+ .tag{
+ display:inline-block;padding:2px 8px;border-radius:4px;
+ font-size:.7rem;font-weight:700;letter-spacing:.03em;
+ }
+ .tag-new{background:rgba(0,212,255,.12);color:var(--accent-cyan)}
+ .tag-hot{background:rgba(255,61,142,.15);color:var(--accent-pink)}
+ .tag-deal{background:rgba(255,138,0,.12);color:var(--accent-orange)}
+ .model-list{
+ font-family:var(--font-mono);font-size:.75rem;
+ color:var(--text-secondary);max-width:200px;
+ white-space:normal;line-height:1.6;word-break:break-word;
+ }
-
-
-
-
-
- 包月价格区间 (元)
-
-
-
-
-
-
-
-
-
- ¥0
- ¥0
-
-
-
-
-
-
-
-
+ /* FILTER BAR */
+ .filter-section{
+ padding:40px 0;
+ }
+ .filter-bar{
+ display:flex;flex-wrap:wrap;gap:12px;align-items:center;
+ }
+ .filter-dropdown{position:relative}
+ .filter-btn{
+ background:var(--bg-card);border:1px solid var(--border);
+ color:var(--text-secondary);padding:10px 16px;
+ border-radius:var(--radius);font-size:.85rem;cursor:pointer;
+ display:flex;align-items:center;gap:8px;transition:all .2s;
+ font-weight:500;min-height:44px;
+ }
+ .filter-btn:hover{background:var(--bg-card-hover);border-color:var(--border-bright);color:var(--text-primary)}
+ .filter-btn.active{background:rgba(0,212,255,.1);border-color:var(--accent-cyan);color:var(--accent-cyan)}
+ .filter-btn .arrow{opacity:.5;transition:transform .3s}
+ .filter-btn.active .arrow{transform:rotate(180deg);opacity:1}
+ .filter-btn .count{
+ background:var(--accent-cyan);color:var(--bg-deep);
+ font-size:.7rem;padding:2px 8px;border-radius:10px;font-weight:700;
+ }
+ .dropdown-menu{
+ position:absolute;top:calc(100%+8px);left:0;
+ background:var(--bg-card);border:1px solid var(--border);
+ border-radius:var(--radius-lg);padding:16px;min-width:240px;
+ box-shadow:0 20px 40px rgba(0,0,0,.4);z-index:1000;
+ display:none;
+ }
+ .dropdown-menu.show{display:block}
+ .dropdown-section{margin-bottom:12px}
+ .dropdown-section:last-child{margin-bottom:0}
+ .dropdown-title{
+ font-size:.7rem;color:var(--text-muted);margin-bottom:10px;
+ font-weight:600;text-transform:uppercase;letter-spacing:.05em;
+ }
+ .checkbox-group{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto}
+ .checkbox-item{
+ display:flex;align-items:center;gap:10px;cursor:pointer;
+ padding:8px 10px;border-radius:6px;transition:background .15s;
+ }
+ .checkbox-item:hover{background:var(--bg-surface)}
+ .checkbox-item input{width:16px;height:16px;accent-color:var(--accent-cyan)}
+ .checkbox-item label{font-size:.85rem;color:var(--text-primary);cursor:pointer;flex:1}
+ .price-inputs{display:flex;gap:10px;align-items:center}
+ .price-input{
+ width:100%;background:var(--bg-surface);border:1px solid var(--border);
+ color:var(--text-primary);padding:8px 12px;border-radius:6px;font-size:.85rem;
+ }
+ .price-input:focus{outline:none;border-color:var(--accent-cyan)}
+ .price-separator{color:var(--text-muted);font-size:.85rem}
+ .price-slider-container{padding:8px 0}
+ .price-slider{position:relative;height:24px;margin:10px 0}
+ .slider-track{position:absolute;top:50%;left:0;right:0;height:6px;background:var(--border);border-radius:3px;transform:translateY(-50%)}
+ .slider-range{position:absolute;top:50%;height:6px;background:var(--accent-cyan);border-radius:3px;transform:translateY(-50%)}
+ .slider-thumb{
+ position:absolute;top:50%;width:18px;height:18px;
+ background:white;border:2px solid var(--accent-cyan);border-radius:50%;
+ transform:translate(-50%,-50%);cursor:grab;transition:transform .2s;
+ }
+ .slider-thumb:hover{transform:translate(-50%,-50%) scale(1.15)}
+ .slider-values{display:flex;justify-content:space-between;margin-top:4px}
+ .slider-value{font-size:.8rem;color:var(--text-secondary)}
+ .dropdown-actions{display:flex;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
+ .dropdown-btn{
+ flex:1;padding:8px 14px;border:none;border-radius:6px;
+ font-size:.8rem;cursor:pointer;transition:all .2s;font-weight:600;
+ }
+ .dropdown-btn.primary{background:var(--accent-cyan);color:var(--bg-deep)}
+ .dropdown-btn.primary:hover{filter:brightness(1.1)}
+ .dropdown-btn.secondary{background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border)}
+ .dropdown-btn.secondary:hover{background:var(--border)}
+ .reset-btn{
+ background:transparent;border:1px solid var(--border);color:var(--text-secondary);
+ padding:10px 16px;border-radius:var(--radius);font-size:.85rem;cursor:pointer;
+ transition:all .2s;font-weight:500;min-height:44px;
+ }
+ .reset-btn:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--border-bright)}
+ .stats-bar{
+ color:var(--text-muted);font-size:.8rem;
+ margin-left:auto;
+ }
+ .stats-bar strong{color:var(--text-secondary)}
-
-
-
-
-
- 包季价格区间 (元)
-
-
-
-
-
-
-
-
-
- ¥0
- ¥0
-
-
-
-
-
-
-
-
+ /* TABLE */
+ .table-wrapper{
+ background:var(--bg-card);border-radius:var(--radius-lg);
+ overflow:hidden;border:1px solid var(--border);
+ }
+ .table-scroll{
+ overflow-x:auto;
+ scrollbar-width:thin;scrollbar-color:var(--border-bright) transparent;
+ }
+ .table-scroll::-webkit-scrollbar{height:8px}
+ .table-scroll::-webkit-scrollbar-track{background:var(--bg-surface)}
+ .table-scroll::-webkit-scrollbar-thumb{background:var(--border-bright);border-radius:4px}
+ table{width:100%;border-collapse:collapse;min-width:1100px}
+ th,td{
+ padding:14px 18px;text-align:left;font-size:.85rem;
+ border-bottom:1px solid var(--border);white-space:nowrap;
+ }
+ thead{background:var(--bg-surface)}
+ th{
+ font-weight:600;color:var(--text-muted);font-size:.75rem;
+ text-transform:uppercase;letter-spacing:.05em;cursor:pointer;
+ user-select:none;transition:background .2s;
+ }
+ th:hover{background:var(--bg-card-hover)}
+ th.sort-asc::after{content:' ↑';color:var(--accent-cyan)}
+ th.sort-desc::after{content:' ↓';color:var(--accent-cyan)}
+ tbody tr{transition:background .15s}
+ tbody tr:hover{background:rgba(0,212,255,.02)}
+ tbody tr:last-child td{border-bottom:none}
+ .table-scroll{position:relative}
+ thead th{position:sticky;top:0;z-index:20}
+ td.sticky-first,th.sticky-first{
+ position:sticky;z-index:10;background:var(--bg-card);
+ }
+ td.sticky-second,th.sticky-second{
+ position:sticky;z-index:10;background:var(--bg-card);
+ }
+ td.sticky-third,th.sticky-third{
+ position:sticky;z-index:10;background:var(--bg-card);
+ }
+ td.sticky-first,th.sticky-first{left:0;border-right:2px solid var(--border)}
+ td.sticky-second,th.sticky-second{border-right:2px solid var(--border)}
+ td.sticky-third,th.sticky-third{border-right:2px solid var(--border)}
+ .action-btn{position:relative;z-index:5}}
+ .vendor-name{font-weight:600;font-size:.9rem}
+ .plan-name{font-weight:600;font-size:.9rem}
+ .price{color:var(--accent-green);font-weight:500}
+ .price-monthly{color:var(--accent-cyan);font-weight:500}
+ .price-normal{color:var(--text-primary)}
+ .price-original{text-decoration:line-through;font-size:.75rem;color:var(--text-muted);margin-left:4px}
+ .action-btn{
+ display:inline-flex;align-items:center;gap:6px;
+ background:linear-gradient(135deg,var(--accent-cyan),#0099cc);
+ color:var(--bg-deep);padding:8px 16px;border-radius:8px;
+ font-weight:600;font-size:.8rem;transition:all .2s;
+ }
+ .action-btn:hover{transform:translateY(-1px);box-shadow:var(--glow-cyan);filter:brightness(1.1)}
+ .model-tag{
+ display:inline-block;background:var(--bg-surface);color:var(--text-secondary);
+ padding:3px 8px;border-radius:4px;font-size:.7rem;margin-right:4px;margin-bottom:4px;
+ border:1px solid var(--border);
+ }
+ .benefit{
+ display:inline-block;background:rgba(255,138,0,.1);color:var(--accent-orange);
+ padding:3px 8px;border-radius:4px;font-size:.7rem;margin-right:4px;margin-bottom:4px;
+ }
+ .note{color:var(--text-secondary);font-size:.8rem;white-space:pre-line}
+ .empty-state{text-align:center;padding:60px 24px}
+ .empty-state-icon{font-size:40px;margin-bottom:12px;opacity:.4}
+ .empty-state-text{color:var(--text-secondary);font-size:1rem;font-weight:500;margin-bottom:6px}
+ .empty-state-hint{font-size:.85rem;color:var(--text-muted)}
+ .loading{text-align:center;padding:60px 24px;color:var(--text-secondary);font-size:.9rem}
+ .loading::after{content:'...';animation:dots 1.5s steps(4,end) infinite}
+ @keyframes dots{0%,20%{content:'.'}40%{content:'..'}60%,100%{content:'...'}}
+
+ /* NOTES */
+ .notes-section{margin-top:40px;padding:24px 0}
+ .notes-section h3{
+ font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:12px;
+ display:flex;align-items:center;gap:8px;
+ }
+ .notes-section ul{list-style:none}
+ .notes-section li{
+ font-size:.85rem;color:var(--text-muted);padding:6px 0;
+ padding-left:16px;position:relative;
+ }
+ .notes-section li::before{content:'•';position:absolute;left:0;color:var(--text-muted)}
-
-
-
-
-
- 包年价格区间 (元)
-
-
-
-
-
-
-
-
-
- ¥0
- ¥0
-
-
-
-
-
-
-
-
+ /* FOOTER */
+ .site-footer{
+ border-top:1px solid var(--border);
+ padding:40px 0;text-align:center;
+ }
+ .footer-disclaimer{
+ font-size:.75rem;color:var(--text-muted);
+ max-width:600px;margin:0 auto 12px;line-height:1.8;
+ }
+ .footer-links{display:flex;justify-content:center;gap:20px;margin-bottom:12px}
+ .footer-links a{font-size:.8rem;color:var(--text-secondary);transition:color .2s}
+ .footer-links a:hover{color:var(--accent-cyan)}
+ .footer-copy{font-size:.7rem;color:var(--text-muted)}
+
+ /* RESPONSIVE */
+ @media(max-width:900px){
+ .hero-stats{gap:24px}
+ .nav-links{display:none}
+ section{padding:56px 0}
+ th,td{padding:12px 14px;font-size:.8rem}
+ }
+ @media(max-width:640px){
+ .container{padding:0 16px}
+ .hero h1{font-size:1.8rem}
+ .hero-sub{font-size:.95rem}
+ .filter-bar{gap:8px}
+ .dropdown-menu{
+ position:fixed;left:50%!important;top:50%!important;
+ transform:translate(-50%,-50%);min-width:280px;max-width:calc(100vw-48px);
+ }
+ }
+
+
+
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
+ CodingPlan
+
+
+
+
+
+ GitHub
+
+
+
+
+2026 · 持续更新中
+ 国内 Coding Plan 对比
+智谱GLM · MiniMax · Kimi · 火山引擎方舟 · 阿里云百炼 · 腾讯云
价格、模型、用量限制全面横评
+
+
+
+
+
+12
平台对比
¥29
最低月付
10+
支持模型
20+
编程工具
+
+
+
+ 快速对比
+各平台入门套餐一览,找到最适合你的起点
+
+
+
+
+
+| 平台 | +入门价 | +连续包月 | +核心模型 | +用量参考 | +亮点 | +
|---|
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
- 显示 0 / 0 个套餐
-
+
+
+
-
-
+
+
+
+
+
+
+
+
-
-
-
-
+
| 平台 | -套餐 | -跳转链接 | -首月价格 | -连续包月 | -连续包季 | -连续包年 | -支持模型 | -5小时请求数 | -每周请求数 | -每月总请求数 | -其他权益 | -备注 | -
|---|
+
+
'); + + if (h.github) { + document.getElementById('githubLink').href = h.github.url; + } + } + + if (appConfig.notes && appConfig.notes.length > 0) { + const notesList = document.getElementById('notesList'); + notesList.innerHTML = appConfig.notes.map(note => `${note} `).join('');
+ }
+}
+
+function processPrices(item, index) {
+ let firstMonthPrice = parseFloat(item.firstMonthPrice);
+ let monthlyPrice = parseFloat(item.monthlyPrice);
+ let quarterlyPrice = parseFloat(item.quarterlyPrice);
+ let yearlyPrice = parseFloat(item.yearlyPrice);
+
+ if (isNaN(firstMonthPrice) || item.firstMonthPrice === '-') {
+ firstMonthPrice = monthlyPrice;
+ }
+
+ if (isNaN(quarterlyPrice) || item.quarterlyPrice === '-') {
+ quarterlyPrice = monthlyPrice * 3;
+ }
+
+ if (isNaN(yearlyPrice) || item.yearlyPrice === '-') {
+ yearlyPrice = quarterlyPrice * 3;
+ }
+
+ const preserveString = (value) => {
+ if (value === '未公开' || value === '无限制') return value;
+ const num = parseInt(value);
+ return isNaN(num) ? 0 : num;
+ };
+
+ item.fiveHoursRequests = preserveString(item.fiveHoursRequests);
+ item.weeklyRequests = preserveString(item.weeklyRequests);
+ item.monthlyRequests = preserveString(item.monthlyRequests);
+
+ return {
+ ...item,
+ firstMonthPrice,
+ monthlyPrice,
+ quarterlyPrice,
+ yearlyPrice,
+ originalIndex: index
+ };
+}
+
+async function loadData() {
+ try {
+ tableBody.innerHTML = `
+
+
+
+
+ `;
+
+ const response = await fetch(PLANS_FILE_PATH, { cache: 'no-store' });
+ if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+ const plansData = await response.json();
+ allPlans = plansData.map((item, index) => processPrices(item, index));
+ filteredPlans = [...allPlans];
+
+ const vendorSet = new Set(allPlans.map(p => p['vendor']));
+ document.getElementById('platformCount').textContent = vendorSet.size;
+
+ initFilters();
+ initPriceSliders();
+ renderCompareTable();
+ applyFilters();
+
+ } catch (error) {
+ console.error('加载数据失败:', error);
+ tableBody.innerHTML = `
+
+
+
+
+ `;
+ }
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+ await loadConfig();
+ await loadData();
+});
+
-
+
-
+ sortData(column, direction);
+ });
+});
+
+window.addEventListener('resize', updateStickyColumns);
+tableScroll.addEventListener('scroll', () => {
+ requestAnimationFrame(updateStickyColumns);
+});
+
+async function loadConfig() {
+ try {
+ const response = await fetch(CONFIG_FILE_PATH, { cache: 'no-store' });
+ if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+ appConfig = await response.json();
+ applyConfig();
+ } catch (error) {
+ console.error('加载配置失败:', error);
+ appConfig = {
+ header: {
+ title: "AI Coding Plan 对比",
+ subtitle: "国内主流AI平台套餐全面对比",
+ models: "支持GLM、MiniMax、Kimi等多模型"
+ },
+ notes: []
+ };
+ applyConfig();
+ }
+}
+
+function applyConfig() {
+ if (appConfig.header) {
+ const h = appConfig.header;
+ document.title = `${h.title} - Coding Plan 对比`;
+ document.getElementById('heroSub').innerHTML = h.subtitle.replace(/·/g, '
+
-
-
- 包月价格区间 (元)
+
+
+
+
+
+
+
+
+ ¥0
+ ¥0
+
-
+
+
+
-
+ '); + + if (h.github) { + document.getElementById('githubLink').href = h.github.url; + } + } + + if (appConfig.notes && appConfig.notes.length > 0) { + const notesList = document.getElementById('notesList'); + notesList.innerHTML = appConfig.notes.map(note => `
加载数据中
+
+
+ ❌
+ 数据加载失败
+ 请检查 JSON 文件路径: ${PLANS_FILE_PATH}
+