981 lines
22 KiB
Vue
981 lines
22 KiB
Vue
|
<template>
|
|||
|
|
<div class="language-ecosystem-demo">
|
|||
|
|
<div class="demo-header">
|
|||
|
|
<h4>生态系统对比</h4>
|
|||
|
|
<p class="subtitle">不同语言的包管理器、框架和社区活跃度</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="ecosystem-tabs">
|
|||
|
|
<button
|
|||
|
|
v-for="tab in tabs"
|
|||
|
|
:key="tab.id"
|
|||
|
|
class="tab-btn"
|
|||
|
|
:class="{ active: selectedTab === tab.id }"
|
|||
|
|
@click="selectedTab = tab.id"
|
|||
|
|
>
|
|||
|
|
{{ tab.label }}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<transition name="fade" mode="out-in">
|
|||
|
|
<div :key="selectedTab" class="tab-content">
|
|||
|
|
<!-- Package Managers -->
|
|||
|
|
<div v-if="selectedTab === 'packages'" class="packages-section">
|
|||
|
|
<div class="packages-grid">
|
|||
|
|
<div
|
|||
|
|
v-for="pkg in packageManagers"
|
|||
|
|
:key="pkg.name"
|
|||
|
|
class="package-card"
|
|||
|
|
>
|
|||
|
|
<div class="pkg-header">
|
|||
|
|
<span class="pkg-icon">{{ pkg.icon }}</span>
|
|||
|
|
<div class="pkg-info">
|
|||
|
|
<h5>{{ pkg.name }}</h5>
|
|||
|
|
<span class="pkg-lang">{{ pkg.language }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="pkg-stats">
|
|||
|
|
<div class="stat">
|
|||
|
|
<span class="stat-label">包数量</span>
|
|||
|
|
<span class="stat-value">{{ formatNumber(pkg.count) }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat">
|
|||
|
|
<span class="stat-label">周下载量</span>
|
|||
|
|
<span class="stat-value">{{ formatDownloads(pkg.downloads) }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="pkg-command">
|
|||
|
|
<code>{{ pkg.command }}</code>
|
|||
|
|
</div>
|
|||
|
|
<div class="pkg-features">
|
|||
|
|
<div
|
|||
|
|
v-for="feature in pkg.features"
|
|||
|
|
:key="feature"
|
|||
|
|
class="feature-tag"
|
|||
|
|
>
|
|||
|
|
{{ feature }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Web Frameworks -->
|
|||
|
|
<div v-else-if="selectedTab === 'frameworks'" class="frameworks-section">
|
|||
|
|
<div class="frameworks-table-wrapper">
|
|||
|
|
<table class="frameworks-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>框架</th>
|
|||
|
|
<th>语言</th>
|
|||
|
|
<th>性能</th>
|
|||
|
|
<th>学习曲线</th>
|
|||
|
|
<th>特点</th>
|
|||
|
|
<th>适用场景</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr v-for="fw in frameworks" :key="fw.name">
|
|||
|
|
<td class="fw-name">
|
|||
|
|
<span class="fw-icon">{{ fw.icon }}</span>
|
|||
|
|
{{ fw.name }}
|
|||
|
|
</td>
|
|||
|
|
<td>{{ fw.language }}</td>
|
|||
|
|
<td>
|
|||
|
|
<div class="rating-bar">
|
|||
|
|
<div
|
|||
|
|
class="rating-fill"
|
|||
|
|
:style="{ width: fw.performance + '%' }"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
<div class="rating-bar learning">
|
|||
|
|
<div
|
|||
|
|
class="rating-fill"
|
|||
|
|
:style="{ width: fw.learning + '%' }"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
<div class="tags">
|
|||
|
|
<span
|
|||
|
|
v-for="tag in fw.tags"
|
|||
|
|
:key="tag"
|
|||
|
|
class="tag"
|
|||
|
|
:class="`tag-${tag.type}`"
|
|||
|
|
>
|
|||
|
|
{{ tag.label }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td>{{ fw.useCase }}</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Community -->
|
|||
|
|
<div v-else-if="selectedTab === 'community'" class="community-section">
|
|||
|
|
<div class="community-metrics">
|
|||
|
|
<div class="metric-card">
|
|||
|
|
<div class="metric-header">
|
|||
|
|
<span class="metric-icon">📦</span>
|
|||
|
|
<h5>GitHub Stars</h5>
|
|||
|
|
</div>
|
|||
|
|
<div class="metric-chart">
|
|||
|
|
<div
|
|||
|
|
v-for="lang in communityStats"
|
|||
|
|
:key="lang.name"
|
|||
|
|
class="chart-bar"
|
|||
|
|
>
|
|||
|
|
<div class="bar-label">{{ lang.name }}</div>
|
|||
|
|
<div class="bar-container">
|
|||
|
|
<div
|
|||
|
|
class="bar-fill"
|
|||
|
|
:style="{ width: (lang.stars / 100) + '%' }"
|
|||
|
|
>
|
|||
|
|
<span class="bar-value">{{ lang.stars }}M</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="metric-card">
|
|||
|
|
<div class="metric-header">
|
|||
|
|
<span class="metric-icon">💬</span>
|
|||
|
|
<h5>Stack Overflow 问题</h5>
|
|||
|
|
</div>
|
|||
|
|
<div class="metric-chart">
|
|||
|
|
<div
|
|||
|
|
v-for="lang in communityStats"
|
|||
|
|
:key="lang.name"
|
|||
|
|
class="chart-bar"
|
|||
|
|
>
|
|||
|
|
<div class="bar-label">{{ lang.name }}</div>
|
|||
|
|
<div class="bar-container">
|
|||
|
|
<div
|
|||
|
|
class="bar-fill questions"
|
|||
|
|
:style="{ width: (lang.questions / 30) + '%' }"
|
|||
|
|
>
|
|||
|
|
<span class="bar-value">{{ lang.questions }}M</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="community-insights">
|
|||
|
|
<h5>社区活跃度分析</h5>
|
|||
|
|
<div class="insight-grid">
|
|||
|
|
<div class="insight-card">
|
|||
|
|
<h6>最活跃</h6>
|
|||
|
|
<p>JavaScript/Node.js 社区最活跃，NPM 每周新增数万个包，问题响应速度最快。</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="insight-card">
|
|||
|
|
<h6>最专业</h6>
|
|||
|
|
<p>Java 社区最专业，企业级问题讨论深入，Stack Overflow 质量最高。</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="insight-card">
|
|||
|
|
<h6>增长最快</h6>
|
|||
|
|
<p>Rust 和 Go 社区增长最快，新一代开发者涌入，问题讨论质量高。</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="insight-card">
|
|||
|
|
<h6>最友好</h6>
|
|||
|
|
<p>Python 和 Ruby 社区对新手最友好，问题回复耐心，文档详尽。</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Learning Resources -->
|
|||
|
|
<div v-else-if="selectedTab === 'learning'" class="learning-section">
|
|||
|
|
<div class="resources-grid">
|
|||
|
|
<div
|
|||
|
|
v-for="resource in learningResources"
|
|||
|
|
:key="resource.language"
|
|||
|
|
class="resource-card"
|
|||
|
|
>
|
|||
|
|
<div class="resource-header">
|
|||
|
|
<span class="resource-icon">{{ resource.icon }}</span>
|
|||
|
|
<h5>{{ resource.language }}</h5>
|
|||
|
|
</div>
|
|||
|
|
<div class="resource-content">
|
|||
|
|
<div class="resource-section">
|
|||
|
|
<h6>官方文档</h6>
|
|||
|
|
<div class="doc-rating">
|
|||
|
|
<span
|
|||
|
|
v-for="i in 5"
|
|||
|
|
:key="i"
|
|||
|
|
class="star"
|
|||
|
|
:class="{ filled: i <= resource.docQuality }"
|
|||
|
|
>
|
|||
|
|
★
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="doc-comment">{{ resource.docComment }}</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="resource-section">
|
|||
|
|
<h6>推荐书籍</h6>
|
|||
|
|
<ul>
|
|||
|
|
<li v-for="book in resource.books" :key="book">{{ book }}</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="resource-section">
|
|||
|
|
<h6>在线课程</h6>
|
|||
|
|
<div class="courses">
|
|||
|
|
<span
|
|||
|
|
v-for="course in resource.courses"
|
|||
|
|
:key="course"
|
|||
|
|
class="course-tag"
|
|||
|
|
>
|
|||
|
|
{{ course }}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="resource-section">
|
|||
|
|
<h6>学习曲线</h6>
|
|||
|
|
<div class="learning-curve">
|
|||
|
|
<div
|
|||
|
|
class="curve-bar"
|
|||
|
|
:style="{ width: resource.learningCurve + '%' }"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
<p class="curve-label">{{ resource.curveLabel }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</transition>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
|
|||
|
|
const selectedTab = ref('packages')
|
|||
|
|
|
|||
|
|
const tabs = [
|
|||
|
|
{ id: 'packages', label: '包管理器' },
|
|||
|
|
{ id: 'frameworks', label: 'Web 框架' },
|
|||
|
|
{ id: 'community', label: '社区活跃度' },
|
|||
|
|
{ id: 'learning', label: '学习资源' }
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const packageManagers = [
|
|||
|
|
{
|
|||
|
|
name: 'NPM',
|
|||
|
|
icon: '💚',
|
|||
|
|
language: 'Node.js',
|
|||
|
|
count: 2000000,
|
|||
|
|
downloads: '50B/week',
|
|||
|
|
command: 'npm install express',
|
|||
|
|
features: ['最大生态', '版本管理灵活', '依赖地狱风险']
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'PyPI',
|
|||
|
|
icon: '🐍',
|
|||
|
|
language: 'Python',
|
|||
|
|
count: 500000,
|
|||
|
|
downloads: '10B/week',
|
|||
|
|
command: 'pip install django',
|
|||
|
|
features: ['虚拟环境', '依赖管理清晰', '打包部署复杂']
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Maven',
|
|||
|
|
icon: '☕',
|
|||
|
|
language: 'Java',
|
|||
|
|
count: 300000,
|
|||
|
|
downloads: '5B/week',
|
|||
|
|
command: 'mvn install',
|
|||
|
|
features: ['企业级', '依赖管理严格', 'XML 配置冗长']
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Go Modules',
|
|||
|
|
icon: '🐹',
|
|||
|
|
language: 'Go',
|
|||
|
|
count: 100000,
|
|||
|
|
downloads: '500M/week',
|
|||
|
|
command: 'go get github.com/gin-gonic/gin',
|
|||
|
|
features: ['简洁', '无依赖地狱', '版本支持完善']
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Cargo',
|
|||
|
|
icon: '🦀',
|
|||
|
|
language: 'Rust',
|
|||
|
|
count: 100000,
|
|||
|
|
downloads: '200M/week',
|
|||
|
|
command: 'cargo add serde',
|
|||
|
|
features: ['现代化', '构建工具集成', '编译时间长']
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'RubyGems',
|
|||
|
|
icon: '💎',
|
|||
|
|
language: 'Ruby',
|
|||
|
|
count: 150000,
|
|||
|
|
downloads: '300M/week',
|
|||
|
|
command: 'gem install rails',
|
|||
|
|
features: ['Bundler 管理', 'Gemfile 简洁', '版本冲突问题']
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const frameworks = [
|
|||
|
|
{
|
|||
|
|
name: 'Express',
|
|||
|
|
icon: '💚',
|
|||
|
|
language: 'Node.js',
|
|||
|
|
performance: 70,
|
|||
|
|
learning: 90,
|
|||
|
|
tags: [
|
|||
|
|
{ type: 'success', label: '简洁' },
|
|||
|
|
{ type: 'info', label: '灵活' }
|
|||
|
|
],
|
|||
|
|
useCase: '快速原型、API 服务'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Django',
|
|||
|
|
icon: '🐍',
|
|||
|
|
language: 'Python',
|
|||
|
|
performance: 40,
|
|||
|
|
learning: 85,
|
|||
|
|
tags: [
|
|||
|
|
{ type: 'success', label: '大而全' },
|
|||
|
|
{ type: 'info', label: 'ORM' }
|
|||
|
|
],
|
|||
|
|
useCase: '数据驱动应用、快速开发'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Spring Boot',
|
|||
|
|
icon: '☕',
|
|||
|
|
language: 'Java',
|
|||
|
|
performance: 75,
|
|||
|
|
learning: 50,
|
|||
|
|
tags: [
|
|||
|
|
{ type: 'success', label: '企业级' },
|
|||
|
|
{ type: 'warning', label: '复杂' }
|
|||
|
|
],
|
|||
|
|
useCase: '企业级应用、微服务'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Gin',
|
|||
|
|
icon: '🐹',
|
|||
|
|
language: 'Go',
|
|||
|
|
performance: 95,
|
|||
|
|
learning: 80,
|
|||
|
|
tags: [
|
|||
|
|
{ type: 'success', label: '高性能' },
|
|||
|
|
{ type: 'info', label: '轻量' }
|
|||
|
|
],
|
|||
|
|
useCase: '高性能 API、微服务'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Rails',
|
|||
|
|
icon: '💎',
|
|||
|
|
language: 'Ruby',
|
|||
|
|
performance: 35,
|
|||
|
|
learning: 85,
|
|||
|
|
tags: [
|
|||
|
|
{ type: 'success', label: '约定优于配置' },
|
|||
|
|
{ type: 'info', label: 'MVC' }
|
|||
|
|
],
|
|||
|
|
useCase: '初创公司、快速迭代'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Flask',
|
|||
|
|
icon: '🐍',
|
|||
|
|
language: 'Python',
|
|||
|
|
performance: 45,
|
|||
|
|
learning: 95,
|
|||
|
|
tags: [
|
|||
|
|
{ type: 'success', label: '轻量' },
|
|||
|
|
{ type: 'info', label: '灵活' }
|
|||
|
|
],
|
|||
|
|
useCase: '小型项目、学习'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'FastAPI',
|
|||
|
|
icon: '🐍',
|
|||
|
|
language: 'Python',
|
|||
|
|
performance: 65,
|
|||
|
|
learning: 85,
|
|||
|
|
tags: [
|
|||
|
|
{ type: 'success', label: '异步' },
|
|||
|
|
{ type: 'info', label: '类型安全' }
|
|||
|
|
],
|
|||
|
|
useCase: '现代 API、异步任务'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Actix',
|
|||
|
|
icon: '🦀',
|
|||
|
|
language: 'Rust',
|
|||
|
|
performance: 98,
|
|||
|
|
learning: 30,
|
|||
|
|
tags: [
|
|||
|
|
{ type: 'success', label: '极致性能' },
|
|||
|
|
{ type: 'danger', label: '难学' }
|
|||
|
|
],
|
|||
|
|
useCase: '高性能服务、系统编程'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const communityStats = [
|
|||
|
|
{ name: 'JavaScript', stars: 85, questions: 28 },
|
|||
|
|
{ name: 'Python', stars: 75, questions: 25 },
|
|||
|
|
{ name: 'Java', stars: 65, questions: 22 },
|
|||
|
|
{ name: 'Go', stars: 55, questions: 8 },
|
|||
|
|
{ name: 'Rust', stars: 60, questions: 5 },
|
|||
|
|
{ name: 'Ruby', stars: 40, questions: 6 },
|
|||
|
|
{ name: 'C#', stars: 50, questions: 12 },
|
|||
|
|
{ name: 'C++', stars: 70, questions: 18 }
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const learningResources = [
|
|||
|
|
{
|
|||
|
|
language: 'Python',
|
|||
|
|
icon: '🐍',
|
|||
|
|
docQuality: 5,
|
|||
|
|
docComment: '官方文档极其详尽，教程丰富',
|
|||
|
|
books: ['Fluent Python', 'Python Cookbook'],
|
|||
|
|
courses: ['Coursera', 'edX', 'Udemy'],
|
|||
|
|
learningCurve: 95,
|
|||
|
|
curveLabel: '最简单'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
language: 'Go',
|
|||
|
|
icon: '🐹',
|
|||
|
|
docQuality: 5,
|
|||
|
|
docComment: '官方教程优秀，A Tour of Go 经典',
|
|||
|
|
books: ['The Go Programming Language', 'Go in Action'],
|
|||
|
|
courses: ['Udemy', 'Coursera', '官方文档'],
|
|||
|
|
learningCurve: 80,
|
|||
|
|
curveLabel: '简单'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
language: 'JavaScript',
|
|||
|
|
icon: '💚',
|
|||
|
|
docQuality: 4,
|
|||
|
|
docComment: 'MDN 文档权威，但碎片化',
|
|||
|
|
books: ['Eloquent JavaScript', 'You Don\'t Know JS'],
|
|||
|
|
courses: ['freeCodeCamp', 'Udemy', 'Codecademy'],
|
|||
|
|
learningCurve: 75,
|
|||
|
|
curveLabel: '中等'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
language: 'Java',
|
|||
|
|
icon: '☕',
|
|||
|
|
docQuality: 4,
|
|||
|
|
docComment: 'Oracle 官方文档完善，但冗长',
|
|||
|
|
books: ['Effective Java', 'Java Concurrency'],
|
|||
|
|
courses: ['Coursera', 'Udemy', 'Oracle 官方'],
|
|||
|
|
learningCurve: 40,
|
|||
|
|
curveLabel: '较难'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
language: 'Rust',
|
|||
|
|
icon: '🦀',
|
|||
|
|
docQuality: 5,
|
|||
|
|
docComment: 'The Rust Book 极其详细',
|
|||
|
|
books: ['The Rust Programming Language', 'Rust in Action'],
|
|||
|
|
courses: ['Udemy', 'Exercism', '官方文档'],
|
|||
|
|
learningCurve: 20,
|
|||
|
|
curveLabel: '极难'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
language: 'C#',
|
|||
|
|
icon: '💜',
|
|||
|
|
docQuality: 5,
|
|||
|
|
docComment: 'Microsoft 文档极其详细',
|
|||
|
|
books: ['C# in Depth', 'Pro C#'],
|
|||
|
|
courses: ['Microsoft Learn', 'Udemy', 'Pluralsight'],
|
|||
|
|
learningCurve: 50,
|
|||
|
|
curveLabel: '中等'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const formatNumber = (num) => {
|
|||
|
|
if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M+'
|
|||
|
|
if (num >= 1000) return (num / 1000).toFixed(0) + 'K+'
|
|||
|
|
return num.toString()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const formatDownloads = (downloads) => {
|
|||
|
|
return downloads
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.language-ecosystem-demo {
|
|||
|
|
background: var(--vp-c-bg);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 2rem;
|
|||
|
|
margin: 2rem 0;
|
|||
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
|||
|
|
border: 1px solid var(--vp-c-divider);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.demo-header {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.demo-header h4 {
|
|||
|
|
margin: 0 0 0.5rem 0;
|
|||
|
|
color: var(--vp-c-brand);
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.subtitle {
|
|||
|
|
margin: 0;
|
|||
|
|
color: var(--vp-c-text-2);
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ecosystem-tabs {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
padding-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-btn {
|
|||
|
|
padding: 0.75rem 1.5rem;
|
|||
|
|
background: var(--vp-c-bg-soft);
|
|||
|
|
border: 2px solid transparent;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
color: var(--vp-c-text-1);
|
|||
|
|
font-weight: 600;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-btn:hover {
|
|||
|
|
border-color: var(--vp-c-brand);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-btn.active {
|
|||
|
|
background: var(--vp-c-brand);
|
|||
|
|
color: white;
|
|||
|
|
border-color: var(--vp-c-brand);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-content {
|
|||
|
|
animation: fade-in 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.packages-grid,
|
|||
|
|
.resources-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|||
|
|
gap: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.package-card,
|
|||
|
|
.resource-card {
|
|||
|
|
background: var(--vp-c-bg-soft);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
border: 1px solid var(--vp-c-divider);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.package-card:hover,
|
|||
|
|
.resource-card:hover {
|
|||
|
|
transform: translateY(-3px);
|
|||
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pkg-header,
|
|||
|
|
.resource-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 1rem;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pkg-icon,
|
|||
|
|
.resource-icon {
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pkg-info h5,
|
|||
|
|
.resource-header h5 {
|
|||
|
|
margin: 0;
|
|||
|
|
color: var(--vp-c-text-1);
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pkg-lang {
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: var(--vp-c-text-2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pkg-stats {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 1rem;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.25rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-label {
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: var(--vp-c-text-2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-value {
|
|||
|
|
font-size: 1rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--vp-c-brand);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pkg-command {
|
|||
|
|
background: #1e1e1e;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pkg-command code {
|
|||
|
|
color: #4ec9b0;
|
|||
|
|
font-family: 'Monaco', 'Menlo', monospace;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pkg-features,
|
|||
|
|
.courses {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-tag,
|
|||
|
|
.course-tag {
|
|||
|
|
padding: 0.25rem 0.75rem;
|
|||
|
|
background: var(--vp-c-bg);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
color: var(--vp-c-text-2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.frameworks-table-wrapper {
|
|||
|
|
overflow-x: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.frameworks-table {
|
|||
|
|
width: 100%;
|
|||
|
|
border-collapse: collapse;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.frameworks-table th {
|
|||
|
|
background: var(--vp-c-bg-soft);
|
|||
|
|
padding: 1rem;
|
|||
|
|
text-align: left;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--vp-c-text-1);
|
|||
|
|
border-bottom: 2px solid var(--vp-c-divider);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.frameworks-table td {
|
|||
|
|
padding: 1rem;
|
|||
|
|
border-bottom: 1px solid var(--vp-c-divider);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fw-name {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--vp-c-text-1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fw-icon {
|
|||
|
|
margin-right: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rating-bar {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 8px;
|
|||
|
|
background: var(--vp-c-bg);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rating-fill {
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, var(--vp-c-brand), #8b5cf6);
|
|||
|
|
transition: width 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rating-bar.learning .rating-fill {
|
|||
|
|
background: linear-gradient(90deg, #10b981, #059669);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tags {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tag {
|
|||
|
|
padding: 0.25rem 0.75rem;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tag-success {
|
|||
|
|
background: #dcfce7;
|
|||
|
|
color: #15803d;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tag-info {
|
|||
|
|
background: #e0e7ff;
|
|||
|
|
color: #4338ca;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tag-warning {
|
|||
|
|
background: #fef3c7;
|
|||
|
|
color: #b45309;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tag-danger {
|
|||
|
|
background: #fee2e2;
|
|||
|
|
color: #b91c1c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.community-metrics {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|||
|
|
gap: 2rem;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.metric-card {
|
|||
|
|
background: var(--vp-c-bg-soft);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
border: 1px solid var(--vp-c-divider);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.metric-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.metric-icon {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.metric-header h5 {
|
|||
|
|
margin: 0;
|
|||
|
|
color: var(--vp-c-text-1);
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.metric-chart {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-bar {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bar-label {
|
|||
|
|
min-width: 80px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: var(--vp-c-text-1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bar-container {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 24px;
|
|||
|
|
background: var(--vp-c-bg);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bar-fill {
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
padding-right: 0.5rem;
|
|||
|
|
background: linear-gradient(90deg, var(--vp-c-brand), #8b5cf6);
|
|||
|
|
color: white;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
transition: width 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bar-fill.questions {
|
|||
|
|
background: linear-gradient(90deg, #f59e0b, #d97706);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.community-insights h5 {
|
|||
|
|
margin: 0 0 1.5rem 0;
|
|||
|
|
color: var(--vp-c-text-1);
|
|||
|
|
font-size: 1.2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.insight-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|||
|
|
gap: 1.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.insight-card {
|
|||
|
|
background: var(--vp-c-bg-soft);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
border-left: 4px solid var(--vp-c-brand);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.insight-card h6 {
|
|||
|
|
margin: 0 0 0.75rem 0;
|
|||
|
|
color: var(--vp-c-brand);
|
|||
|
|
font-size: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.insight-card p {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
color: var(--vp-c-text-2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.resource-content {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.resource-section h6 {
|
|||
|
|
margin: 0 0 0.75rem 0;
|
|||
|
|
color: var(--vp-c-text-1);
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.doc-rating {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0.25rem;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.star {
|
|||
|
|
color: var(--vp-c-divider);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.star.filled {
|
|||
|
|
color: #fbbf24;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.doc-comment {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: var(--vp-c-text-2);
|
|||
|
|
font-style: italic;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.resource-section ul {
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.resource-section li {
|
|||
|
|
padding: 0.25rem 0;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: var(--vp-c-text-2);
|
|||
|
|
position: relative;
|
|||
|
|
padding-left: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.resource-section li::before {
|
|||
|
|
content: '▸';
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
color: var(--vp-c-brand);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.learning-curve {
|
|||
|
|
height: 8px;
|
|||
|
|
background: var(--vp-c-bg);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.curve-bar {
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, #10b981, #059669);
|
|||
|
|
transition: width 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.curve-label {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: var(--vp-c-text-2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fade-enter-active,
|
|||
|
|
.fade-leave-active {
|
|||
|
|
transition: opacity 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fade-enter-from,
|
|||
|
|
.fade-leave-to {
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fade-in {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(10px);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.ecosystem-tabs {
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.packages-grid,
|
|||
|
|
.resources-grid {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.community-metrics {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.frameworks-table {
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.frameworks-table th,
|
|||
|
|
.frameworks-table td {
|
|||
|
|
padding: 0.5rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|