472 lines
10 KiB
Vue
472 lines
10 KiB
Vue
|
<template>
|
|||
|
|
<div class="syntax-comparison-demo">
|
|||
|
|
<div class="demo-header">
|
|||
|
|
<h4>Hello World 语法对比</h4>
|
|||
|
|
<p class="subtitle">同样的功能，不同的实现方式</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="language-selector">
|
|||
|
|
<button
|
|||
|
|
v-for="lang in languages"
|
|||
|
|
:key="lang.name"
|
|||
|
|
class="lang-btn"
|
|||
|
|
:class="{ active: selectedLang === lang.name }"
|
|||
|
|
@click="selectedLang = lang.name"
|
|||
|
|
>
|
|||
|
|
<span class="lang-icon">{{ lang.icon }}</span>
|
|||
|
|
<span class="lang-name">{{ lang.name }}</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<transition name="fade" mode="out-in">
|
|||
|
|
<div :key="selectedLang" class="code-display">
|
|||
|
|
<div class="code-header">
|
|||
|
|
<div class="window-controls">
|
|||
|
|
<span class="control red"></span>
|
|||
|
|
<span class="control yellow"></span>
|
|||
|
|
<span class="control green"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="filename">{{ getFileName(selectedLang) }}</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<pre class="code-content"><code>{{ getCode(selectedLang) }}</code></pre>
|
|||
|
|
|
|||
|
|
<div class="code-stats">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-label">代码行数：</span>
|
|||
|
|
<span class="stat-value">{{ getLineCount(selectedLang) }} 行</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-label">字符数：</span>
|
|||
|
|
<span class="stat-value">{{ getCharCount(selectedLang) }} 字符</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<span class="stat-label">复杂度：</span>
|
|||
|
|
<span class="stat-value">{{ getComplexity(selectedLang) }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</transition>
|
|||
|
|
|
|||
|
|
<div class="analysis-panel">
|
|||
|
|
<h5>💡 语法分析</h5>
|
|||
|
|
<div class="analysis-content">
|
|||
|
|
<p>{{ getAnalysis(selectedLang) }}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="complexity-chart">
|
|||
|
|
<h5>代码复杂度对比</h5>
|
|||
|
|
<div class="chart-bars">
|
|||
|
|
<div
|
|||
|
|
v-for="lang in languages"
|
|||
|
|
:key="lang.name"
|
|||
|
|
class="chart-bar-wrapper"
|
|||
|
|
>
|
|||
|
|
<div class="chart-label">{{ lang.name }}</div>
|
|||
|
|
<div class="chart-bar">
|
|||
|
|
<div
|
|||
|
|
class="chart-fill"
|
|||
|
|
:style="{ width: getComplexityWidth(lang.name) + '%' }"
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="chart-value">{{ getLineCount(lang.name) }} 行</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
|
|||
|
|
const selectedLang = ref('Python')
|
|||
|
|
|
|||
|
|
const languages = [
|
|||
|
|
{ name: 'Python', icon: '🐍' },
|
|||
|
|
{ name: 'Ruby', icon: '💎' },
|
|||
|
|
{ name: 'Go', icon: '🐹' },
|
|||
|
|
{ name: 'Node.js', icon: '💚' },
|
|||
|
|
{ name: 'Java', icon: '☕' },
|
|||
|
|
{ name: 'C#', icon: '💜' },
|
|||
|
|
{ name: 'Rust', icon: '🦀' },
|
|||
|
|
{ name: 'C++', icon: '⚡' }
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const codes = {
|
|||
|
|
Python: {
|
|||
|
|
code: `print("Hello, World!")`,
|
|||
|
|
filename: 'hello.py',
|
|||
|
|
complexity: '极简'
|
|||
|
|
},
|
|||
|
|
Ruby: {
|
|||
|
|
code: `puts "Hello, World!"`,
|
|||
|
|
filename: 'hello.rb',
|
|||
|
|
complexity: '极简'
|
|||
|
|
},
|
|||
|
|
Go: {
|
|||
|
|
code: `package main
|
|||
|
|
|
|||
|
|
import "fmt"
|
|||
|
|
|
|||
|
|
func main() {
|
|||
|
|
fmt.Println("Hello, World!")
|
|||
|
|
}`,
|
|||
|
|
filename: 'hello.go',
|
|||
|
|
complexity: '简洁'
|
|||
|
|
},
|
|||
|
|
'Node.js': {
|
|||
|
|
code: `console.log("Hello, World!");`,
|
|||
|
|
filename: 'hello.js',
|
|||
|
|
complexity: '极简'
|
|||
|
|
},
|
|||
|
|
Java: {
|
|||
|
|
code: `public class HelloWorld {
|
|||
|
|
public static void main(String[] args) {
|
|||
|
|
System.out.println("Hello, World!");
|
|||
|
|
}
|
|||
|
|
}`,
|
|||
|
|
filename: 'HelloWorld.java',
|
|||
|
|
complexity: '冗长'
|
|||
|
|
},
|
|||
|
|
"C#": {
|
|||
|
|
code: `using System;
|
|||
|
|
|
|||
|
|
class Program {
|
|||
|
|
static void Main() {
|
|||
|
|
Console.WriteLine("Hello, World!");
|
|||
|
|
}
|
|||
|
|
}`,
|
|||
|
|
filename: 'Program.cs',
|
|||
|
|
complexity: '冗长'
|
|||
|
|
},
|
|||
|
|
Rust: {
|
|||
|
|
code: `fn main() {
|
|||
|
|
println!("Hello, World!");
|
|||
|
|
}`,
|
|||
|
|
filename: 'main.rs',
|
|||
|
|
complexity: '简洁'
|
|||
|
|
},
|
|||
|
|
'C++': {
|
|||
|
|
code: `#include <iostream>
|
|||
|
|
|
|||
|
|
int main() {
|
|||
|
|
std::cout << "Hello, World!" << std::endl;
|
|||
|
|
return 0;
|
|||
|
|
}`,
|
|||
|
|
filename: 'hello.cpp',
|
|||
|
|
complexity: '中等'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const analyses = {
|
|||
|
|
Python: 'Python 的语法极其简洁，只有一行代码。这也是为什么它被称为"伪代码语言"——读起来就像英语一样自然。没有任何样板代码，直接表达意图。',
|
|||
|
|
Ruby: 'Ruby 受 Perl 影响，语法非常优雅。puts 是 "put string" 的缩写，字符串不需要括号（虽然可以加）。Ruby 哲学是"程序员快乐至上"。',
|
|||
|
|
Go: 'Go 的语法虽然比 Python 冗长，但非常清晰。package main、import、func main() 都是必要的显式声明，这让代码更容易理解和维护。',
|
|||
|
|
'Node.js': 'Node.js 使用 JavaScript，语法简单直接。console.log() 是浏览器和 Node.js 通用的输出方式。前端开发者零学习成本。',
|
|||
|
|
Java: 'Java 是典型的"仪式感"语言。class、public static void main、String[] args 都是必须的样板代码。虽然冗长，但结构清晰，适合大型项目。',
|
|||
|
|
'C#': 'C# 和 Java 非常相似，同样需要 class 和 Main 方法。using System 类似 Java 的 import，但更现代一些。.NET Core 后跨平台能力大幅提升。',
|
|||
|
|
Rust: 'Rust 的 fn main() 和 println! 宏看起来简洁，但 println! 后面的 ! 表示这是一个宏（不是函数）。Rust 的简洁来自于零成本抽象的设计哲学。',
|
|||
|
|
'C++': 'C++ 需要 #include 头文件，std::cout 使用流操作符 <<，return 0 表示程序成功退出。虽然比 C 语言简洁（printf），但依然保留了很多底层细节。'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getCode = (lang) => {
|
|||
|
|
return codes[lang].code
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getFileName = (lang) => {
|
|||
|
|
return codes[lang].filename
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getLineCount = (lang) => {
|
|||
|
|
return codes[lang].code.split('\n').length
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getCharCount = (lang) => {
|
|||
|
|
return codes[lang].code.replace(/\s/g, '').length
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getComplexity = (lang) => {
|
|||
|
|
return codes[lang].complexity
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getAnalysis = (lang) => {
|
|||
|
|
return analyses[lang]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const getComplexityWidth = (lang) => {
|
|||
|
|
const max = 10 // Java is the longest
|
|||
|
|
const lines = getLineCount(lang)
|
|||
|
|
return (lines / max) * 100
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.syntax-comparison-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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.language-selector {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lang-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
padding: 0.75rem 1.25rem;
|
|||
|
|
border: 2px solid var(--vp-c-divider);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
background: var(--vp-c-bg);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--vp-c-text-1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lang-btn:hover {
|
|||
|
|
border-color: var(--vp-c-brand);
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lang-btn.active {
|
|||
|
|
border-color: var(--vp-c-brand);
|
|||
|
|
background: var(--vp-c-brand);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lang-icon {
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lang-name {
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.code-display {
|
|||
|
|
background: #1e1e1e;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.code-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0.8rem 1rem;
|
|||
|
|
background: #2d2d2d;
|
|||
|
|
border-bottom: 1px solid #3e3e3e;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.window-controls {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control {
|
|||
|
|
width: 12px;
|
|||
|
|
height: 12px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control.red {
|
|||
|
|
background: #ff5f56;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control.yellow {
|
|||
|
|
background: #ffbd2e;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.control.green {
|
|||
|
|
background: #27c93f;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filename {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
color: #858585;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
font-family: var(--vp-font-family-mono);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.code-content {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
background: #1e1e1e;
|
|||
|
|
color: #d4d4d4;
|
|||
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.code-content code {
|
|||
|
|
color: #d4d4d4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.code-stats {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 2rem;
|
|||
|
|
padding: 1rem 1.5rem;
|
|||
|
|
background: #2d2d2d;
|
|||
|
|
border-top: 1px solid #3e3e3e;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-item {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-label {
|
|||
|
|
color: #858585;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-value {
|
|||
|
|
color: #4ec9b0;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-family: var(--vp-font-family-mono);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.analysis-panel {
|
|||
|
|
background: var(--vp-c-bg-soft);
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 1.5rem;
|
|||
|
|
margin-bottom: 2rem;
|
|||
|
|
border-left: 4px solid var(--vp-c-brand);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.analysis-panel h5 {
|
|||
|
|
margin-top: 0;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
color: var(--vp-c-brand);
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.analysis-content p {
|
|||
|
|
margin: 0;
|
|||
|
|
color: var(--vp-c-text-2);
|
|||
|
|
line-height: 1.7;
|
|||
|
|
font-size: 0.95rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.complexity-chart {
|
|||
|
|
margin-top: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.complexity-chart h5 {
|
|||
|
|
margin-bottom: 1.5rem;
|
|||
|
|
color: var(--vp-c-text-1);
|
|||
|
|
font-size: 1.1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-bars {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-bar-wrapper {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-label {
|
|||
|
|
min-width: 80px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--vp-c-text-1);
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-bar {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 30px;
|
|||
|
|
background: var(--vp-c-bg-soft);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-fill {
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, var(--vp-c-brand), #8b5cf6);
|
|||
|
|
transition: width 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-value {
|
|||
|
|
min-width: 60px;
|
|||
|
|
text-align: right;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--vp-c-text-2);
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
font-family: var(--vp-font-family-mono);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fade-enter-active,
|
|||
|
|
.fade-leave-active {
|
|||
|
|
transition: opacity 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fade-enter-from,
|
|||
|
|
.fade-leave-to {
|
|||
|
|
opacity: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.language-selector {
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.lang-btn {
|
|||
|
|
padding: 0.5rem 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.code-stats {
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-bar-wrapper {
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-label {
|
|||
|
|
min-width: 60px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-value {
|
|||
|
|
min-width: 50px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|