feat(docs): enhance interactive demos and improve documentation
- Add new interactive components for frontend routing, browser rendering pipeline, and database transactions - Improve existing demos with better visuals, explanations, and examples - Update documentation structure and content for better clarity - Add new utility scripts and update package.json with new commands - Fix formatting and alignment in documentation tables
This commit is contained in:
sanbuphy
+267
-535
@@ -1,5 +1,15 @@
|
||||
<template>
|
||||
<div class="backend-languages-demo">
|
||||
<div class="demo-header">
|
||||
<span class="icon">🛠️</span>
|
||||
<span class="title">后端语言工具箱</span>
|
||||
<span class="subtitle">选择合适的工具完成工作</span>
|
||||
</div>
|
||||
|
||||
<div class="intro-text">
|
||||
想象你是一名<span class="highlight">建筑工人</span>：搬砖用铁铲，砌墙用瓦刀，装修用刷子。后端语言也一样，不同场景适合不同的"工具"。没有最好的语言，只有最合适的选择。
|
||||
</div>
|
||||
|
||||
<div class="language-grid">
|
||||
<div
|
||||
v-for="lang in languages"
|
||||
@@ -8,470 +18,286 @@
|
||||
:class="{ active: selectedLang === lang.name }"
|
||||
@click="selectedLang = lang.name"
|
||||
>
|
||||
<div class="lang-header">
|
||||
<div class="lang-icon">{{ lang.icon }}</div>
|
||||
<h4>{{ lang.name }}</h4>
|
||||
<div class="lang-year">{{ lang.year }}</div>
|
||||
</div>
|
||||
<div class="lang-tags">
|
||||
<span
|
||||
v-for="tag in lang.tags"
|
||||
:key="tag"
|
||||
class="tag"
|
||||
:class="`tag-${tag.type}`"
|
||||
>
|
||||
{{ tag.label }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="lang-icon">{{ lang.icon }}</div>
|
||||
<div class="lang-name">{{ lang.name }}</div>
|
||||
<div class="lang-metaphor">{{ lang.metaphor }}</div>
|
||||
<div class="lang-description">{{ lang.description }}</div>
|
||||
<div class="lang-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-label">性能</span>
|
||||
<div class="stat-bar">
|
||||
<div
|
||||
class="stat-fill performance"
|
||||
:style="{ width: lang.stats.performance + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">开发效率</span>
|
||||
<div class="stat-bar">
|
||||
<div
|
||||
class="stat-fill efficiency"
|
||||
:style="{ width: lang.stats.efficiency + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">生态</span>
|
||||
<div class="stat-bar">
|
||||
<div
|
||||
class="stat-fill ecosystem"
|
||||
:style="{ width: lang.stats.ecosystem + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">学习曲线</span>
|
||||
<div class="stat-bar">
|
||||
<div
|
||||
class="stat-fill learning"
|
||||
:style="{ width: lang.stats.learning + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition name="fade">
|
||||
<Transition name="fade">
|
||||
<div v-if="selectedLang" class="lang-detail">
|
||||
<h3>{{ getLangDetail(selectedLang).title }}</h3>
|
||||
<div class="detail-grid">
|
||||
<div class="detail-header">
|
||||
<span class="detail-icon">{{ getCurrentLang().icon }}</span>
|
||||
<span class="detail-title">{{ getCurrentLang().name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-sections">
|
||||
<div class="detail-section">
|
||||
<h4>核心特点</h4>
|
||||
<h6>🎯 适用场景</h6>
|
||||
<ul>
|
||||
<li
|
||||
v-for="feature in getLangDetail(selectedLang).features"
|
||||
:key="feature"
|
||||
>
|
||||
{{ feature }}
|
||||
<li v-for="scenario in getCurrentLang().scenarios" :key="scenario">
|
||||
{{ scenario }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4>典型应用</h4>
|
||||
<h6>✅ 优势</h6>
|
||||
<ul>
|
||||
<li
|
||||
v-for="app in getLangDetail(selectedLang).applications"
|
||||
:key="app"
|
||||
>
|
||||
{{ app }}
|
||||
</li>
|
||||
<li v-for="pro in getCurrentLang().pros" :key="pro">{{ pro }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h4>优劣势</h4>
|
||||
<div class="pros-cons">
|
||||
<div class="pros">
|
||||
<strong>优势：</strong>
|
||||
<ul>
|
||||
<li
|
||||
v-for="pro in getLangDetail(selectedLang).pros"
|
||||
:key="pro"
|
||||
>
|
||||
{{ pro }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cons">
|
||||
<strong>劣势：</strong>
|
||||
<ul>
|
||||
<li
|
||||
v-for="con in getLangDetail(selectedLang).cons"
|
||||
:key="con"
|
||||
>
|
||||
{{ con }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<h6>❌ 劣势</h6>
|
||||
<ul>
|
||||
<li v-for="con in getCurrentLang().cons" :key="con">{{ con }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</Transition>
|
||||
|
||||
<div v-if="!selectedLang" class="hint-text">
|
||||
👆 点击上方任意语言，查看详细说明
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<span class="icon">💡</span>
|
||||
<strong>核心思想：</strong>选择语言时，先想清楚"我要解决什么问题"，而不是"哪个语言最火"。初创公司选 Python/Node.js 快速验证，大厂选 Java/Go 保证稳定，游戏开发选 C++ 追求极致性能。
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const selectedLang = ref('Java')
|
||||
const selectedLang = ref('Go')
|
||||
|
||||
const languages = [
|
||||
{
|
||||
name: 'Java',
|
||||
icon: '☕',
|
||||
year: '1995',
|
||||
tags: [
|
||||
{ type: 'primary', label: '企业级' },
|
||||
{ type: 'success', label: '跨平台' },
|
||||
{ type: 'info', label: '强类型' }
|
||||
name: 'Go',
|
||||
icon: '🐹',
|
||||
metaphor: '电动螺丝刀',
|
||||
description: '云原生时代的高效工具',
|
||||
scenarios: [
|
||||
'微服务架构（Docker、K8s 都是 Go 写的）',
|
||||
'高并发 API 服务',
|
||||
'DevOps 工具开发',
|
||||
'区块链基础设施'
|
||||
],
|
||||
description: '企业级开发的霸主，Spring Boot 生态成熟',
|
||||
stats: { performance: 75, efficiency: 60, ecosystem: 95, learning: 40 }
|
||||
pros: [
|
||||
'并发性能优秀（Goroutine 轻量级协程）',
|
||||
'编译快，部署简单（单一可执行文件）',
|
||||
'语法简洁，学习曲线平缓',
|
||||
'内存占用低，性能接近 C++'
|
||||
],
|
||||
cons: [
|
||||
'生态不如 Java/Python 成熟',
|
||||
'错误处理繁琐（if err != nil）',
|
||||
'泛型支持较弱（Go 1.18+ 引入）',
|
||||
'不适合 CPU 密集型任务'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Python',
|
||||
icon: '🐍',
|
||||
year: '1991',
|
||||
tags: [
|
||||
{ type: 'primary', label: 'AI/ML' },
|
||||
{ type: 'success', label: '简洁' },
|
||||
{ type: 'warning', label: '动态类型' }
|
||||
metaphor: '瑞士军刀',
|
||||
description: '什么都能干的全能工具',
|
||||
scenarios: [
|
||||
'AI/机器学习（PyTorch、TensorFlow）',
|
||||
'数据分析和处理',
|
||||
'快速原型开发',
|
||||
'自动化脚本'
|
||||
],
|
||||
description: 'AI 与数据分析的首选语言',
|
||||
stats: { performance: 30, efficiency: 95, ecosystem: 95, learning: 95 }
|
||||
pros: [
|
||||
'语法极简，学习曲线平缓',
|
||||
'AI 生态无与伦比',
|
||||
'开发速度快，代码量少',
|
||||
'库丰富，几乎任何功能都有现成方案'
|
||||
],
|
||||
cons: [
|
||||
'运行速度慢（比 Go/Java 慢 10-100 倍）',
|
||||
'GIL 限制多线程性能',
|
||||
'打包部署复杂（依赖地狱）',
|
||||
'动态类型，运行时错误多'
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Go',
|
||||
icon: '🐹',
|
||||
year: '2009',
|
||||
tags: [
|
||||
{ type: 'primary', label: '云原生' },
|
||||
{ type: 'success', label: '高性能' },
|
||||
{ type: 'info', label: '并发' }
|
||||
],
|
||||
description: 'Google 出品，云原生时代的宠儿',
|
||||
stats: { performance: 90, efficiency: 85, ecosystem: 75, learning: 80 }
|
||||
},
|
||||
{
|
||||
name: 'Node.js',
|
||||
icon: '💚',
|
||||
year: '2009',
|
||||
tags: [
|
||||
{ type: 'primary', label: '全栈' },
|
||||
{ type: 'success', label: 'NPM' },
|
||||
{ type: 'info', label: '异步' }
|
||||
],
|
||||
description: 'JavaScript 运行时，前后端统一',
|
||||
stats: { performance: 70, efficiency: 85, ecosystem: 95, learning: 75 }
|
||||
},
|
||||
{
|
||||
name: 'C#',
|
||||
icon: '💜',
|
||||
year: '2000',
|
||||
tags: [
|
||||
{ type: 'primary', label: '.NET' },
|
||||
{ type: 'success', label: '跨平台' },
|
||||
{ type: 'info', label: 'Unity' }
|
||||
],
|
||||
description: '微软出品，Windows 生态王者',
|
||||
stats: { performance: 80, efficiency: 70, ecosystem: 85, learning: 50 }
|
||||
},
|
||||
{
|
||||
name: 'Rust',
|
||||
icon: '🦀',
|
||||
year: '2010',
|
||||
tags: [
|
||||
{ type: 'primary', label: '系统级' },
|
||||
{ type: 'success', label: '内存安全' },
|
||||
{ type: 'danger', label: '难学' }
|
||||
],
|
||||
description: 'Mozilla 出品，内存安全的系统语言',
|
||||
stats: { performance: 95, efficiency: 40, ecosystem: 70, learning: 20 }
|
||||
},
|
||||
{
|
||||
name: 'C++',
|
||||
icon: '⚡',
|
||||
year: '1985',
|
||||
tags: [
|
||||
{ type: 'primary', label: '高性能' },
|
||||
{ type: 'success', label: '游戏' },
|
||||
{ type: 'danger', label: '复杂' }
|
||||
],
|
||||
description: '高性能计算的基石',
|
||||
stats: { performance: 98, efficiency: 35, ecosystem: 90, learning: 25 }
|
||||
},
|
||||
{
|
||||
name: 'Ruby',
|
||||
icon: '💎',
|
||||
year: '1995',
|
||||
tags: [
|
||||
{ type: 'primary', label: 'Rails' },
|
||||
{ type: 'success', label: '优雅' },
|
||||
{ type: 'warning', label: '慢' }
|
||||
],
|
||||
description: 'Ruby on Rails，快速开发典范',
|
||||
stats: { performance: 25, efficiency: 90, ecosystem: 70, learning: 85 }
|
||||
}
|
||||
]
|
||||
|
||||
const langDetails = {
|
||||
Java: {
|
||||
title: 'Java - 企业级开发的霸主',
|
||||
features: [
|
||||
'JVM (Java Virtual Machine) 实现跨平台',
|
||||
'强类型系统，编译时检查',
|
||||
'Spring 全家桶生态成熟',
|
||||
'JIT 编译器提供接近 C++ 的性能'
|
||||
],
|
||||
applications: [
|
||||
name: 'Java',
|
||||
icon: '☕',
|
||||
metaphor: '重型挖掘机',
|
||||
description: '企业级开发的稳定选择',
|
||||
scenarios: [
|
||||
'大型企业系统（银行、保险、电商）',
|
||||
'Android 应用开发',
|
||||
'大数据处理（Hadoop、Spark）',
|
||||
'微服务架构（Spring Cloud）'
|
||||
],
|
||||
pros: [
|
||||
'✅ 生态极其成熟，框架完备',
|
||||
'✅ 强类型，编译时检查',
|
||||
'✅ 多线程模型成熟',
|
||||
'✅ 跨平台，JVM 优化强大'
|
||||
'生态极其成熟，框架完备',
|
||||
'强类型，编译时检查',
|
||||
'多线程模型成熟',
|
||||
'跨平台，JVM 优化强大'
|
||||
],
|
||||
cons: [
|
||||
'❌ 代码冗长，样板代码多',
|
||||
'❌ 启动慢，内存占用高',
|
||||
'❌ 学习曲线陡峭（Spring 全家桶）',
|
||||
'❌ 版本更新快，兼容性问题'
|
||||
'代码冗长，样板代码多',
|
||||
'启动慢，内存占用高',
|
||||
'学习曲线陡峭（Spring 全家桶）',
|
||||
'版本更新快，兼容性问题'
|
||||
]
|
||||
},
|
||||
Python: {
|
||||
title: 'Python - AI 与脚本之王',
|
||||
features: [
|
||||
'极简语法，像读英语一样',
|
||||
'AI 生态无与伦比（NumPy、PyTorch）',
|
||||
'快速开发，代码量少',
|
||||
'丰富的科学计算库'
|
||||
],
|
||||
applications: [
|
||||
'AI/机器学习（所有主流框架）',
|
||||
'数据分析（Pandas、Jupyter）',
|
||||
'脚本自动化（运维、数据处理）',
|
||||
'Web 开发（Django、Flask）'
|
||||
],
|
||||
pros: [
|
||||
'✅ 语法简单，学习曲线平缓',
|
||||
'✅ AI 生态无与伦比',
|
||||
'✅ 快速开发，代码量少',
|
||||
'✅ 社区活跃，库丰富'
|
||||
],
|
||||
cons: [
|
||||
'❌ 运行速度慢（比 Java/Go 慢 10-100 倍）',
|
||||
'❌ 动态类型，运行时错误多',
|
||||
'❌ GIL 限制，多线程性能差',
|
||||
'❌ 打包部署复杂（依赖地狱）'
|
||||
]
|
||||
},
|
||||
Go: {
|
||||
title: 'Go - 云原生时代的宠儿',
|
||||
features: [
|
||||
'Goroutine (协程) 轻量级并发',
|
||||
'简洁语法，25 个关键字',
|
||||
'快速编译，比 Java 快 10 倍',
|
||||
'单一可执行文件，无依赖'
|
||||
],
|
||||
applications: [
|
||||
'云原生基础设施（Docker、K8s）',
|
||||
'微服务架构',
|
||||
'DevOps 工具（Terraform、Prometheus）',
|
||||
'区块链（Hyperledger Fabric）'
|
||||
],
|
||||
pros: [
|
||||
'✅ 原生并发，性能接近 C++',
|
||||
'✅ 简洁语法，学习曲线平缓',
|
||||
'✅ 编译快，部署简单',
|
||||
'✅ 单一可执行文件，无依赖'
|
||||
],
|
||||
cons: [
|
||||
'❌ 生态不如 Java/Python 成熟',
|
||||
'❌ 错误处理繁琐（if err != nil）',
|
||||
'❌ 泛型支持较弱（Go 1.18+ 才引入）',
|
||||
'❌ 不如 Java/Python 灵活'
|
||||
]
|
||||
},
|
||||
'Node.js': {
|
||||
title: 'Node.js - 全栈工程师的利器',
|
||||
features: [
|
||||
'事件驱动，非阻塞 I/O',
|
||||
'前后端统一语言',
|
||||
'NPM 世界最大的包仓库',
|
||||
'适合实时应用'
|
||||
],
|
||||
applications: [
|
||||
{
|
||||
name: 'Node.js',
|
||||
icon: '💚',
|
||||
metaphor: '万能扳手',
|
||||
description: '前后端统一的利器',
|
||||
scenarios: [
|
||||
'全栈 Web 应用（React + Node.js）',
|
||||
'实时系统（聊天应用、协作工具）',
|
||||
'Serverless（AWS Lambda、Vercel）',
|
||||
'CLI 工具（VS Code、Webpack）'
|
||||
'I/O 密集型 API'
|
||||
],
|
||||
pros: [
|
||||
'✅ 前后端统一，减少语言切换成本',
|
||||
'✅ NPM 生态庞大，库丰富',
|
||||
'✅ 适合 I/O 密集型应用',
|
||||
'✅ 社区活跃，更新快'
|
||||
'前后端统一语言，减少切换成本',
|
||||
'NPM 生态庞大，世界最大包仓库',
|
||||
'适合 I/O 密集型应用',
|
||||
'事件驱动，非阻塞 I/O'
|
||||
],
|
||||
cons: [
|
||||
'❌ 单线程，CPU 密集型任务性能差',
|
||||
'❌ 回调地狱（async/await 有改善）',
|
||||
'❌ 动态类型，运行时错误多',
|
||||
'❌ 版本兼容性问题多'
|
||||
'单线程，CPU 密集型性能差',
|
||||
'回调地狱（虽然 async/await 有改善）',
|
||||
'动态类型，运行时错误多',
|
||||
'版本兼容性问题多'
|
||||
]
|
||||
},
|
||||
'C#': {
|
||||
title: 'C# - Windows 生态的王者',
|
||||
features: [
|
||||
'微软 Visual Studio 极其强大',
|
||||
'.NET Core 实现跨平台',
|
||||
'高性能，CoreFX 优化',
|
||||
'Unity 游戏开发官方语言'
|
||||
],
|
||||
applications: [
|
||||
'Windows 应用开发',
|
||||
'游戏开发（Unity 引擎）',
|
||||
'Web 开发（ASP.NET Core）',
|
||||
'Azure 云服务'
|
||||
],
|
||||
pros: [
|
||||
'✅ Visual Studio 极其强大',
|
||||
'✅ ASP.NET Core 性能优秀',
|
||||
'✅ 跨平台（.NET Core）',
|
||||
'✅ 游戏开发（Unity）'
|
||||
],
|
||||
cons: [
|
||||
'❌ Windows 历史包袱重',
|
||||
'❌ 社区不如 Java/Python 活跃',
|
||||
'❌ 学习曲线陡峭',
|
||||
'❌ 开源生态相对较弱'
|
||||
]
|
||||
},
|
||||
Rust: {
|
||||
title: 'Rust - 系统级编程的未来',
|
||||
features: [
|
||||
'所有权系统保证内存安全',
|
||||
'零成本抽象',
|
||||
'编译时保证无内存泄漏',
|
||||
'WebAssembly 支持'
|
||||
],
|
||||
applications: [
|
||||
{
|
||||
name: 'Rust',
|
||||
icon: '🦀',
|
||||
metaphor: '激光切割机',
|
||||
description: '内存安全的系统级工具',
|
||||
scenarios: [
|
||||
'系统编程（操作系统、数据库）',
|
||||
'区块链（Solana、Polkadot）',
|
||||
'WebAssembly（前端高性能计算）',
|
||||
'基础设施（AWS Firecracker）'
|
||||
],
|
||||
pros: [
|
||||
'✅ 内存安全，无 GC',
|
||||
'✅ 性能接近 C++',
|
||||
'✅ 现代化语法',
|
||||
'✅ WebAssembly 支持'
|
||||
'内存安全，编译时保证无泄漏',
|
||||
'性能接近 C++',
|
||||
'现代化语法，零成本抽象',
|
||||
'无 GC，运行时开销低'
|
||||
],
|
||||
cons: [
|
||||
'❌ 学习曲线极其陡峭',
|
||||
'❌ 编译时间长',
|
||||
'❌ 生态不如 Go/Rust 成熟',
|
||||
'❌ 开发速度慢'
|
||||
'学习曲线极其陡峭',
|
||||
'编译时间长',
|
||||
'生态不如 Go/Java 成熟',
|
||||
'开发速度慢'
|
||||
]
|
||||
},
|
||||
'C++': {
|
||||
title: 'C++ - 高性能计算的基石',
|
||||
features: [
|
||||
'极致性能，无语言能超越',
|
||||
'底层控制，直接操作内存',
|
||||
'游戏引擎标准',
|
||||
'现代 C++ (11/14/17/20)'
|
||||
],
|
||||
applications: [
|
||||
{
|
||||
name: 'C++',
|
||||
icon: '⚡',
|
||||
metaphor: '工业电钻',
|
||||
description: '高性能计算的基石',
|
||||
scenarios: [
|
||||
'游戏开发（Unreal Engine）',
|
||||
'高频交易（金融系统）',
|
||||
'浏览器引擎（Chrome V8）',
|
||||
'AI 框架底层（PyTorch、TF）'
|
||||
],
|
||||
pros: ['✅ 性能极致', '✅ 底层控制力强', '✅ 游戏开发标准', '✅ 生态成熟'],
|
||||
cons: [
|
||||
'❌ 学习曲线极其陡峭',
|
||||
'❌ 内存管理复杂（易泄漏）',
|
||||
'❌ 开发效率低',
|
||||
'❌ 不适合 Web 开发'
|
||||
]
|
||||
},
|
||||
Ruby: {
|
||||
title: 'Ruby - 快速开发的典范',
|
||||
features: ['Ruby on Rails 框架', '约定优于配置', '代码优雅', '快速开发'],
|
||||
applications: [
|
||||
'初创公司（GitHub、Airbnb）',
|
||||
'快速原型（MVP、黑客松）',
|
||||
'Web 开发（Rails、Sinatra）',
|
||||
'CI/CD 脚本'
|
||||
],
|
||||
pros: [
|
||||
'✅ Rails 框架极其成熟',
|
||||
'✅ 快速开发，代码优雅',
|
||||
'✅ 约定优于配置',
|
||||
'✅ 社区活跃'
|
||||
'性能极致，无语言能超越',
|
||||
'底层控制力强，直接操作内存',
|
||||
'游戏开发标准',
|
||||
'生态成熟'
|
||||
],
|
||||
cons: [
|
||||
'❌ 性能较差',
|
||||
'❌ 动态类型，运行时错误多',
|
||||
'❌ 多线程性能差',
|
||||
'❌ 生态不如 Java/Python 广泛'
|
||||
'学习曲线极其陡峭',
|
||||
'内存管理复杂（易泄漏）',
|
||||
'开发效率低',
|
||||
'不适合 Web 开发'
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const getLangDetail = (name) => {
|
||||
return langDetails[name] || {}
|
||||
const getCurrentLang = () => {
|
||||
return languages.find(l => l.name === selectedLang.value) || languages[0]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.backend-languages-demo {
|
||||
border-radius: 16px;
|
||||
background: var(--vp-c-bg);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
overflow: hidden;
|
||||
margin: 2rem 0;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.demo-header .icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.demo-header .title {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.intro-text .highlight {
|
||||
color: var(--vp-c-brand-1);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.language-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.language-card {
|
||||
padding: 1rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transition: all 0.2s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.language-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.language-card.active {
|
||||
@@ -479,150 +305,72 @@ const getLangDetail = (name) => {
|
||||
background: var(--vp-c-bg);
|
||||
}
|
||||
|
||||
.lang-header {
|
||||
.lang-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.lang-name {
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.lang-metaphor {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-brand-1);
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.lang-description {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
text-align: center;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.lang-detail {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.lang-icon {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lang-header h4 {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-size: 1.2rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.lang-year {
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-3);
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.lang-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tag-primary {
|
||||
background: #e0f2fe;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.tag-success {
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.tag-info {
|
||||
background: #e0e7ff;
|
||||
color: #4338ca;
|
||||
}
|
||||
|
||||
.tag-warning {
|
||||
background: #fef3c7;
|
||||
color: #b45309;
|
||||
}
|
||||
|
||||
.tag-danger {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.lang-description {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.lang-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
min-width: 60px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-bar {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-fill {
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.stat-fill.performance {
|
||||
background: linear-gradient(90deg, #fbbf24, #f59e0b);
|
||||
}
|
||||
|
||||
.stat-fill.efficiency {
|
||||
background: linear-gradient(90deg, #34d399, #10b981);
|
||||
}
|
||||
|
||||
.stat-fill.ecosystem {
|
||||
background: linear-gradient(90deg, #60a5fa, #3b82f6);
|
||||
}
|
||||
|
||||
.stat-fill.learning {
|
||||
background: linear-gradient(90deg, #f472b6, #ec4899);
|
||||
}
|
||||
|
||||
.lang-detail {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
animation: fade-in 0.3s ease;
|
||||
}
|
||||
|
||||
.lang-detail h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--vp-c-brand);
|
||||
.detail-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 2rem;
|
||||
.detail-title {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.detail-section h4 {
|
||||
.detail-sections {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.detail-section h6 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.detail-section ul {
|
||||
@@ -632,12 +380,12 @@ const getLangDetail = (name) => {
|
||||
}
|
||||
|
||||
.detail-section li {
|
||||
padding: 0.5rem 0;
|
||||
padding: 0.25rem 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
line-height: 1.4;
|
||||
position: relative;
|
||||
padding-left: 1.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.detail-section li::before {
|
||||
@@ -648,43 +396,27 @@ const getLangDetail = (name) => {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.pros-cons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.pros,
|
||||
.cons {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.pros strong {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.cons strong {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user