616 lines
15 KiB
Vue
616 lines
15 KiB
Vue
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
import { useI18n } from '../composables/useI18n'
|
||
import { useTheme } from '../composables/useTheme'
|
||
|
||
// 国际化
|
||
const { t } = useI18n()
|
||
|
||
// 主题系统
|
||
const { currentTheme } = useTheme()
|
||
|
||
// 数据
|
||
const technologies = ref([
|
||
{
|
||
category: '前端框架',
|
||
items: [
|
||
{ name: 'Vue 3', version: '3.4.0', description: '渐进式JavaScript框架', icon: '🏗️' },
|
||
{ name: 'Vue Router', version: '4.3.0', description: '官方路由管理器', icon: '🛣️' },
|
||
{ name: 'Pinia', version: '2.1.0', description: 'Vue生态状态管理', icon: '🗃️' }
|
||
]
|
||
},
|
||
{
|
||
category: '开发工具',
|
||
items: [
|
||
{ name: 'Vite', version: '5.0.0', description: '下一代前端构建工具', icon: '⚡' },
|
||
{ name: 'ESLint', version: '8.50.0', description: '代码质量检查工具', icon: '🔍' },
|
||
{ name: 'Prettier', version: '3.0.0', description: '代码格式化工具', icon: '✨' }
|
||
]
|
||
},
|
||
{
|
||
category: '样式方案',
|
||
items: [
|
||
{ name: 'CSS Variables', version: 'Native', description: '原生CSS变量系统', icon: '🎨' },
|
||
{ name: 'CSS Grid', version: 'Native', description: '现代网格布局系统', icon: '📐' },
|
||
{ name: 'Flexbox', version: 'Native', description: '弹性盒子布局', icon: '📏' }
|
||
]
|
||
},
|
||
{
|
||
category: '国际化',
|
||
items: [
|
||
{ name: 'Vue I18n', version: '9.5.0', description: 'Vue官方国际化方案', icon: '🌍' },
|
||
{ name: '自定义配置', version: 'v1.0', description: '个性化语言切换', icon: '🗣️' }
|
||
]
|
||
}
|
||
])
|
||
|
||
const features = ref([
|
||
{
|
||
title: '响应式设计',
|
||
description: '采用移动优先的设计理念，支持移动端(<768px)、平板(768px-1024px)和桌面端(>1024px)的完美适配。',
|
||
icon: '📱',
|
||
highlights: ['CSS Grid + Flexbox布局', '媒体查询断点设计', '响应式图片适配']
|
||
},
|
||
{
|
||
title: '主题系统',
|
||
description: '内置浅色、深色和高对比度三种主题模式，支持实时切换，满足不同使用场景和用户偏好。',
|
||
icon: '🌓',
|
||
highlights: ['CSS变量驱动', '主题状态持久化', '平滑过渡动画']
|
||
},
|
||
{
|
||
title: '国际化支持',
|
||
description: '完整的中英文双语支持，支持动态语言切换和扩展更多语言，便于项目国际化。',
|
||
icon: '🌍',
|
||
highlights: ['Vue I18n集成', '动态语言切换', '本地化存储支持']
|
||
},
|
||
{
|
||
title: '现代化开发',
|
||
description: '基于Vue 3 Composition API，使用Vite构建工具，提供热重载和优化的打包体验。',
|
||
icon: '⚡',
|
||
highlights: ['Composition API', 'Vite快速构建', '现代化工具链']
|
||
}
|
||
])
|
||
|
||
const stats = ref([
|
||
{ label: '技术栈版本', value: '最新稳定版', color: 'primary' },
|
||
{ label: '响应式断点', value: '3个主要', color: 'success' },
|
||
{ label: '主题模式', value: '3种主题', color: 'info' },
|
||
{ label: '国际化语言', value: '2种语言', color: 'warning' }
|
||
])
|
||
|
||
// 计算属性
|
||
const pageTitle = computed(() => t('about.title'))
|
||
const pageDescription = computed(() => t('about.description'))
|
||
</script>
|
||
|
||
<template>
|
||
<div class="about-page">
|
||
<!-- 页面头部 -->
|
||
<section class="page-header">
|
||
<div class="header-container">
|
||
<h1 class="page-title">{{ pageTitle }}</h1>
|
||
<p class="page-description">{{ pageDescription }}</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 功能特性 -->
|
||
<section class="features-section">
|
||
<div class="section-container">
|
||
<h2 class="section-title">核心特性</h2>
|
||
<div class="features-grid">
|
||
<div
|
||
v-for="feature in features"
|
||
:key="feature.title"
|
||
class="feature-card"
|
||
>
|
||
<div class="feature-header">
|
||
<div class="feature-icon">{{ feature.icon }}</div>
|
||
<h3 class="feature-title">{{ feature.title }}</h3>
|
||
</div>
|
||
<p class="feature-description">{{ feature.description }}</p>
|
||
<ul class="feature-highlights">
|
||
<li v-for="highlight in feature.highlights" :key="highlight">
|
||
{{ highlight }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 技术栈 -->
|
||
<section class="tech-section">
|
||
<div class="section-container">
|
||
<h2 class="section-title">技术栈详解</h2>
|
||
<div class="tech-categories">
|
||
<div
|
||
v-for="category in technologies"
|
||
:key="category.category"
|
||
class="tech-category"
|
||
>
|
||
<h3 class="category-title">{{ category.category }}</h3>
|
||
<div class="tech-items">
|
||
<div
|
||
v-for="tech in category.items"
|
||
:key="tech.name"
|
||
class="tech-item"
|
||
>
|
||
<div class="tech-header">
|
||
<div class="tech-icon">{{ tech.icon }}</div>
|
||
<div class="tech-info">
|
||
<h4 class="tech-name">{{ tech.name }}</h4>
|
||
<span class="tech-version">{{ tech.version }}</span>
|
||
</div>
|
||
</div>
|
||
<p class="tech-description">{{ tech.description }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 项目统计 -->
|
||
<section class="stats-section">
|
||
<div class="section-container">
|
||
<h2 class="section-title">项目亮点</h2>
|
||
<div class="stats-grid">
|
||
<div
|
||
v-for="stat in stats"
|
||
:key="stat.label"
|
||
class="stat-card"
|
||
:class="`stat-${stat.color}`"
|
||
>
|
||
<div class="stat-value">{{ stat.value }}</div>
|
||
<div class="stat-label">{{ stat.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 架构说明 -->
|
||
<section class="architecture-section">
|
||
<div class="section-container">
|
||
<h2 class="section-title">架构设计</h2>
|
||
<div class="architecture-content">
|
||
<div class="arch-item">
|
||
<h3 class="arch-title">🎯 组件化开发</h3>
|
||
<p class="arch-description">
|
||
遵循Vue 3最佳实践，采用Composition API和组件化开发模式，
|
||
代码结构清晰，便于维护和复用。
|
||
</p>
|
||
</div>
|
||
<div class="arch-item">
|
||
<h3 class="arch-title">🗃️ 状态管理</h3>
|
||
<p class="arch-description">
|
||
使用Pinia进行状态管理，支持响应式数据流，
|
||
提供类型安全和良好的开发体验。
|
||
</p>
|
||
</div>
|
||
<div class="arch-item">
|
||
<h3 class="arch-title">🛣️ 路由管理</h3>
|
||
<p class="arch-description">
|
||
集成Vue Router 4，支持动态路由、路由守卫、
|
||
和嵌套路由配置。
|
||
</p>
|
||
</div>
|
||
<div class="arch-item">
|
||
<h3 class="arch-title">🎨 样式系统</h3>
|
||
<p class="arch-description">
|
||
基于CSS变量和作用域样式，支持主题切换、
|
||
响应式设计和组件样式隔离。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 快速开始 -->
|
||
<section class="getting-started-section">
|
||
<div class="section-container">
|
||
<h2 class="section-title">快速开始</h2>
|
||
<div class="getting-started-content">
|
||
<div class="code-block">
|
||
<div class="code-header">
|
||
<span>安装依赖</span>
|
||
<button class="copy-btn">复制</button>
|
||
</div>
|
||
<pre><code>pnpm install</code></pre>
|
||
</div>
|
||
<div class="code-block">
|
||
<div class="code-header">
|
||
<span>启动开发服务器</span>
|
||
<button class="copy-btn">复制</button>
|
||
</div>
|
||
<pre><code>pnpm dev</code></pre>
|
||
</div>
|
||
<div class="code-block">
|
||
<div class="code-header">
|
||
<span>构建生产版本</span>
|
||
<button class="copy-btn">复制</button>
|
||
</div>
|
||
<pre><code>pnpm build</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.about-page {
|
||
min-height: 100%;
|
||
}
|
||
|
||
/* 页面头部 */
|
||
.page-header {
|
||
padding: var(--spacing-2xl) 0;
|
||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||
text-align: center;
|
||
}
|
||
|
||
.header-container {
|
||
max-width: var(--container-max-width);
|
||
margin: 0 auto;
|
||
padding: 0 var(--spacing-lg);
|
||
}
|
||
|
||
.page-title {
|
||
font-size: var(--font-size-4xl);
|
||
font-weight: 800;
|
||
color: var(--text-primary);
|
||
margin: 0 0 var(--spacing-md) 0;
|
||
}
|
||
|
||
.page-description {
|
||
font-size: var(--font-size-lg);
|
||
color: var(--text-secondary);
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 通用样式 */
|
||
.section-container {
|
||
max-width: var(--container-max-width);
|
||
margin: 0 auto;
|
||
padding: var(--spacing-2xl) var(--spacing-lg);
|
||
}
|
||
|
||
.section-title {
|
||
font-size: var(--font-size-3xl);
|
||
font-weight: 700;
|
||
text-align: center;
|
||
color: var(--text-primary);
|
||
margin: 0 0 var(--spacing-xl) 0;
|
||
}
|
||
|
||
/* 核心特性 */
|
||
.features-section {
|
||
background-color: var(--bg-primary);
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||
gap: var(--spacing-xl);
|
||
}
|
||
|
||
.feature-card {
|
||
background-color: var(--bg-secondary);
|
||
padding: var(--spacing-xl);
|
||
border-radius: var(--border-radius-xl);
|
||
border: 1px solid var(--border-color);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-xl);
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.feature-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-md);
|
||
margin-bottom: var(--spacing-md);
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.feature-title {
|
||
font-size: var(--font-size-xl);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin: 0;
|
||
}
|
||
|
||
.feature-description {
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
margin: 0 0 var(--spacing-md) 0;
|
||
}
|
||
|
||
.feature-highlights {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.feature-highlights li {
|
||
color: var(--text-muted);
|
||
font-size: var(--font-size-sm);
|
||
padding: var(--spacing-xs) 0;
|
||
position: relative;
|
||
padding-left: var(--spacing-md);
|
||
}
|
||
|
||
.feature-highlights li::before {
|
||
content: '✓';
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--primary-color);
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 技术栈 */
|
||
.tech-section {
|
||
background-color: var(--bg-secondary);
|
||
}
|
||
|
||
.tech-categories {
|
||
display: grid;
|
||
gap: var(--spacing-xl);
|
||
}
|
||
|
||
.tech-category {
|
||
background-color: var(--bg-tertiary);
|
||
padding: var(--spacing-xl);
|
||
border-radius: var(--border-radius-lg);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.category-title {
|
||
font-size: var(--font-size-xl);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin: 0 0 var(--spacing-lg) 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.tech-items {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: var(--spacing-lg);
|
||
}
|
||
|
||
.tech-item {
|
||
background-color: var(--bg-secondary);
|
||
padding: var(--spacing-lg);
|
||
border-radius: var(--border-radius-md);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.tech-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-md);
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.tech-icon {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.tech-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.tech-name {
|
||
font-size: var(--font-size-md);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin: 0;
|
||
}
|
||
|
||
.tech-version {
|
||
font-size: var(--font-size-xs);
|
||
color: var(--text-muted);
|
||
background-color: var(--bg-tertiary);
|
||
padding: 2px var(--spacing-xs);
|
||
border-radius: var(--border-radius-sm);
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.tech-description {
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-secondary);
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 项目统计 */
|
||
.stats-section {
|
||
background-color: var(--bg-primary);
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: var(--spacing-lg);
|
||
}
|
||
|
||
.stat-card {
|
||
background-color: var(--bg-secondary);
|
||
padding: var(--spacing-xl);
|
||
border-radius: var(--border-radius-lg);
|
||
text-align: center;
|
||
border: 1px solid var(--border-color);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.stat-card.stat-primary {
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.stat-card.stat-success {
|
||
border-color: var(--success-color);
|
||
}
|
||
|
||
.stat-card.stat-info {
|
||
border-color: var(--info-color);
|
||
}
|
||
|
||
.stat-card.stat-warning {
|
||
border-color: var(--warning-color);
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: var(--font-size-2xl);
|
||
font-weight: 700;
|
||
margin-bottom: var(--spacing-xs);
|
||
}
|
||
|
||
.stat-primary .stat-value {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.stat-success .stat-value {
|
||
color: var(--success-color);
|
||
}
|
||
|
||
.stat-info .stat-value {
|
||
color: var(--info-color);
|
||
}
|
||
|
||
.stat-warning .stat-value {
|
||
color: var(--warning-color);
|
||
}
|
||
|
||
.stat-label {
|
||
color: var(--text-secondary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 架构设计 */
|
||
.architecture-section {
|
||
background-color: var(--bg-secondary);
|
||
}
|
||
|
||
.architecture-content {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: var(--spacing-xl);
|
||
}
|
||
|
||
.arch-item {
|
||
background-color: var(--bg-tertiary);
|
||
padding: var(--spacing-xl);
|
||
border-radius: var(--border-radius-lg);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.arch-title {
|
||
font-size: var(--font-size-lg);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin: 0 0 var(--spacing-md) 0;
|
||
}
|
||
|
||
.arch-description {
|
||
color: var(--text-secondary);
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
}
|
||
|
||
/* 快速开始 */
|
||
.getting-started-section {
|
||
background-color: var(--bg-primary);
|
||
}
|
||
|
||
.getting-started-content {
|
||
display: grid;
|
||
gap: var(--spacing-lg);
|
||
}
|
||
|
||
.code-block {
|
||
background-color: var(--bg-secondary);
|
||
border-radius: var(--border-radius-lg);
|
||
border: 1px solid var(--border-color);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.code-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: var(--spacing-md) var(--spacing-lg);
|
||
background-color: var(--bg-tertiary);
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.code-header span {
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.copy-btn {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
padding: var(--spacing-xs) var(--spacing-sm);
|
||
border-radius: var(--border-radius-sm);
|
||
font-size: var(--font-size-xs);
|
||
cursor: pointer;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
background-color: var(--primary-color-hover);
|
||
}
|
||
|
||
pre {
|
||
margin: 0;
|
||
padding: var(--spacing-lg);
|
||
overflow-x: auto;
|
||
}
|
||
|
||
code {
|
||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||
font-size: var(--font-size-sm);
|
||
color: var(--text-primary);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 768px) {
|
||
.page-title {
|
||
font-size: var(--font-size-3xl);
|
||
}
|
||
|
||
.features-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.tech-items {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.architecture-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.stat-card {
|
||
padding: var(--spacing-lg);
|
||
}
|
||
}
|
||
</style> |