sanbuphy
d35211071a
- standardize border-radius from 8px to 6px for consistent styling - adjust padding values from 1rem to 0.75rem for better visual hierarchy - remove redundant overflow-y properties for cleaner code
371 lines
8.0 KiB
Vue
371 lines
8.0 KiB
Vue
<template>
|
||
<div class="language-selector-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>：想吃快餐选 Python（快速），想吃大餐选 Java（正式），想吃健康餐选 Go（平衡）。没有"最好的"选择，只有"最合适"的选择。
|
||
</div>
|
||
|
||
<div class="questions-container">
|
||
<div
|
||
v-for="(question, index) in questions"
|
||
:key="question.id"
|
||
class="question-card"
|
||
:class="{ active: currentQuestion === index }"
|
||
>
|
||
<div class="question-number">{{ index + 1 }}</div>
|
||
<div class="question-content">
|
||
<h6>{{ question.text }}</h6>
|
||
<div class="options">
|
||
<button
|
||
v-for="option in question.options"
|
||
:key="option.value"
|
||
class="option-btn"
|
||
:class="{ selected: answers[index] === option.value }"
|
||
@click="selectAnswer(index, option.value)"
|
||
>
|
||
{{ option.label }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<Transition name="fade">
|
||
<div v-if="recommendation" class="recommendation-panel">
|
||
<div class="rec-header">
|
||
<span class="rec-icon">{{ recommendation.icon }}</span>
|
||
<div class="rec-title">
|
||
<h6>推荐语言</h6>
|
||
<div class="rec-name">{{ recommendation.language }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="rec-reason">
|
||
<strong>选择理由：</strong>
|
||
<p>{{ recommendation.reason }}</p>
|
||
</div>
|
||
<button class="reset-btn" @click="reset">🔄 重新选择</button>
|
||
</div>
|
||
</Transition>
|
||
|
||
<div class="info-box">
|
||
<span class="icon">💡</span>
|
||
<strong>核心思想：</strong>不要问"哪个语言最火"，而要问"我的项目需要什么"。初创公司优先开发速度（Python/Node.js），大厂优先稳定性和性能（Java/Go），系统编程优先安全（Rust）。
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
|
||
const currentQuestion = ref(0)
|
||
const answers = ref({})
|
||
|
||
const questions = [
|
||
{
|
||
id: 'project_type',
|
||
text: '项目类型是什么？',
|
||
options: [
|
||
{ value: 'web', label: 'Web 应用' },
|
||
{ value: 'api', label: 'API 服务' },
|
||
{ value: 'ai', label: 'AI/ML' },
|
||
{ value: 'system', label: '系统编程' }
|
||
]
|
||
},
|
||
{
|
||
id: 'performance',
|
||
text: '性能要求如何？',
|
||
options: [
|
||
{ value: 'high', label: '高性能' },
|
||
{ value: 'medium', label: '中等' },
|
||
{ value: 'low', label: '不敏感' }
|
||
]
|
||
},
|
||
{
|
||
id: 'team',
|
||
text: '团队背景？',
|
||
options: [
|
||
{ value: 'frontend', label: '前端团队' },
|
||
{ value: 'python', label: 'Python 背景' },
|
||
{ value: 'java', label: 'Java 背景' },
|
||
{ value: 'new', label: '新团队' }
|
||
]
|
||
}
|
||
]
|
||
|
||
const recommendation = computed(() => {
|
||
if (Object.keys(answers.value).length < 3) return null
|
||
|
||
const { project_type, performance, team } = answers.value
|
||
|
||
if (project_type === 'ai') {
|
||
return {
|
||
icon: '🐍',
|
||
language: 'Python',
|
||
reason: 'AI/ML 的绝对统治地位，生态无与伦比。虽然性能不如 C++/Rust，但 95% 的 AI 项目都在用 Python。'
|
||
}
|
||
}
|
||
|
||
if (project_type === 'system' || performance === 'high') {
|
||
return {
|
||
icon: '🐹',
|
||
language: 'Go',
|
||
reason: '云原生时代的宠儿，简洁语法 + 原生并发 + 快速编译。单一可执行文件部署极其简单。'
|
||
}
|
||
}
|
||
|
||
if (team === 'frontend') {
|
||
return {
|
||
icon: '💚',
|
||
language: 'Node.js',
|
||
reason: '前后端统一，减少语言切换成本。NPM 生态庞大，适合快速迭代和 MVP 开发。'
|
||
}
|
||
}
|
||
|
||
if (team === 'python') {
|
||
return {
|
||
icon: '🐍',
|
||
language: 'Python',
|
||
reason: '利用团队现有技能，快速开发。Django/FastAPI 生态成熟，适合数据驱动的应用。'
|
||
}
|
||
}
|
||
|
||
if (team === 'java') {
|
||
return {
|
||
icon: '☕',
|
||
language: 'Java',
|
||
reason: '企业级开发的最佳选择。Spring Boot 生态极其成熟，团队熟悉度高，维护成本低。'
|
||
}
|
||
}
|
||
|
||
return {
|
||
icon: '🐹',
|
||
language: 'Go',
|
||
reason: '云原生时代的高性能语言。相比 Java 更简洁，相比 Node.js 性能更好，相比 Python 更稳定。'
|
||
}
|
||
})
|
||
|
||
const selectAnswer = (questionIndex, value) => {
|
||
answers.value[questionIndex] = value
|
||
if (currentQuestion.value < questions.length - 1) {
|
||
currentQuestion.value++
|
||
}
|
||
}
|
||
|
||
const reset = () => {
|
||
answers.value = {}
|
||
currentQuestion.value = 0
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.language-selector-demo {
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-radius: 6px;
|
||
background: var(--vp-c-bg-soft);
|
||
padding: 0.75rem;
|
||
margin: 0.5rem 0;
|
||
|
||
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.questions-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.question-card {
|
||
background: var(--vp-c-bg);
|
||
padding: 0.75rem;
|
||
border-radius: 6px;
|
||
border: 2px solid transparent;
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.question-card.active {
|
||
border-color: var(--vp-c-brand);
|
||
}
|
||
|
||
.question-number {
|
||
width: 28px;
|
||
height: 28px;
|
||
background: var(--vp-c-brand);
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 0.85rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.question-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.question-content h6 {
|
||
margin: 0 0 0.5rem 0;
|
||
font-size: 0.9rem;
|
||
color: var(--vp-c-text-1);
|
||
}
|
||
|
||
.options {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.option-btn {
|
||
padding: 0.35rem 0.75rem;
|
||
background: var(--vp-c-bg-soft);
|
||
border: 2px solid transparent;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.option-btn:hover {
|
||
border-color: var(--vp-c-brand);
|
||
}
|
||
|
||
.option-btn.selected {
|
||
background: var(--vp-c-brand);
|
||
color: white;
|
||
border-color: var(--vp-c-brand);
|
||
}
|
||
|
||
.recommendation-panel {
|
||
background: var(--vp-c-bg);
|
||
padding: 0.75rem;
|
||
border-radius: 6px;
|
||
margin-bottom: 1rem;
|
||
border: 2px solid var(--vp-c-brand);
|
||
}
|
||
|
||
.rec-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.rec-icon {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.rec-title h6 {
|
||
margin: 0 0 0.25rem 0;
|
||
font-size: 0.85rem;
|
||
color: var(--vp-c-text-2);
|
||
}
|
||
|
||
.rec-name {
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
color: var(--vp-c-brand-1);
|
||
}
|
||
|
||
.rec-reason {
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.rec-reason strong {
|
||
display: block;
|
||
margin-bottom: 0.25rem;
|
||
font-size: 0.85rem;
|
||
color: var(--vp-c-text-1);
|
||
}
|
||
|
||
.rec-reason p {
|
||
margin: 0;
|
||
font-size: 0.85rem;
|
||
color: var(--vp-c-text-2);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.reset-btn {
|
||
width: 100%;
|
||
padding: 0.5rem;
|
||
background: var(--vp-c-brand);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.reset-btn:hover {
|
||
background: var(--vp-c-brand-dark);
|
||
}
|
||
|
||
.fade-enter-active,
|
||
.fade-leave-active {
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.fade-enter-from,
|
||
.fade-leave-to {
|
||
opacity: 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);
|
||
}
|
||
|
||
.info-box .icon {
|
||
margin-right: 0.25rem;
|
||
}
|
||
</style>
|