960 lines
24 KiB
Markdown
960 lines
24 KiB
Markdown
# 创高家具官网 - 前端项目架构设计
|
||
|
||
## 一、技术栈选型
|
||
|
||
| 层级 | 技术 | 版本 | 用途 |
|
||
|------|------|------|------|
|
||
| 框架 | Vue 3 | ^3.4.0 | 渐进式前端框架 |
|
||
| 构建 | Vite | ^5.0.0 | 快速构建工具 |
|
||
| 路由 | Vue Router | ^4.2.0 | 单页应用路由 |
|
||
| 状态 | Pinia | ^2.1.0 | 状态管理 |
|
||
| 国际化 | Vue I18n | ^9.0.0 | 中英文切换 |
|
||
| UI组件 | Element Plus | ^2.5.0 | 基础组件库 |
|
||
| 动画 | GSAP | ^3.12.0 | 高级动画效果 |
|
||
| 图标 | Element Plus Icons | - | 图标库 |
|
||
| CSS | SCSS | - | 预处理器 |
|
||
|
||
---
|
||
|
||
## 二、项目目录结构
|
||
|
||
```
|
||
client/
|
||
├── index.html # 入口HTML
|
||
├── package.json # 依赖配置
|
||
├── vite.config.ts # Vite配置
|
||
├── tsconfig.json # TypeScript配置
|
||
├── .env # 环境变量（开发）
|
||
├── .env.production # 环境变量（生产）
|
||
│
|
||
├── public/ # 静态资源（不处理）
|
||
│ ├── favicon.ico
|
||
│ └── logo.png
|
||
│
|
||
├── src/
|
||
│ ├── main.ts # 应用入口
|
||
│ ├── App.vue # 根组件
|
||
│ │
|
||
│ ├── api/ # API接口层
|
||
│ │ ├── request.ts # axios封装
|
||
│ │ ├── portal/ # 前台接口
|
||
│ │ │ ├── company.ts
|
||
│ │ │ ├── home.ts
|
||
│ │ │ ├── product.ts
|
||
│ │ │ ├── case.ts
|
||
│ │ │ ├── news.ts
|
||
│ │ │ └── contact.ts
|
||
│ │ └── admin/ # 后台接口
|
||
│ │ ├── auth.ts
|
||
│ │ ├── upload.ts
|
||
│ │ ├── product.ts
|
||
│ │ ├── case.ts
|
||
│ │ ├── news.ts
|
||
│ │ ├── pageBlock.ts
|
||
│ │ └── media.ts
|
||
│ │
|
||
│ ├── assets/ # 资源文件
|
||
│ │ ├── styles/ # 全局样式
|
||
│ │ │ ├── variables.scss # SCSS变量
|
||
│ │ │ ├── mixins.scss # SCSS混入
|
||
│ │ │ ├── global.scss # 全局样式
|
||
│ │ │ └── element-plus.scss # Element Plus主题覆盖
|
||
│ │ ├── images/ # 静态图片
|
||
│ │ └── fonts/ # 字体文件
|
||
│ │
|
||
│ ├── components/ # 公共组件
|
||
│ │ ├── common/ # 通用组件
|
||
│ │ │ ├── LangSwitch.vue # 语言切换
|
||
│ │ │ ├── PageLoading.vue # 页面加载
|
||
│ │ │ ├── ImageLazy.vue # 懒加载图片
|
||
│ │ │ └── Breadcrumb.vue # 面包屑
|
||
│ │ ├── layout/ # 布局组件
|
||
│ │ │ ├── AppHeader.vue # 顶部导航
|
||
│ │ │ ├── AppFooter.vue # 底部导航
|
||
│ │ │ ├── MobileMenu.vue # 移动端菜单
|
||
│ │ │ └── BackToTop.vue # 返回顶部
|
||
│ │ ├── home/ # 首页专用组件
|
||
│ │ │ ├── HeroBanner.vue # 首屏轮播
|
||
│ │ │ ├── ServiceSection.vue # 服务板块
|
||
│ │ │ ├── ProductSection.vue # 产品板块
|
||
│ │ │ ├── CaseSection.vue # 案例板块
|
||
│ │ │ └── StrengthSection.vue # 实力板块
|
||
│ │ └── product/ # 产品页组件
|
||
│ │ ├── ProductCard.vue
|
||
│ │ ├── ProductFilter.vue
|
||
│ │ └── ProductGallery.vue
|
||
│ │
|
||
│ ├── composables/ # 组合式函数
|
||
│ │ ├── useLocale.ts # 语言相关
|
||
│ │ ├── useScroll.ts # 滚动监听
|
||
│ │ ├── useDevice.ts # 设备检测
|
||
│ │ └── useSEO.ts # SEO设置
|
||
│ │
|
||
│ ├── directives/ # 自定义指令
|
||
│ │ ├── lazyLoad.ts # 图片懒加载
|
||
│ │ └── parallax.ts # 视差滚动
|
||
│ │
|
||
│ ├── locales/ # 国际化文件
|
||
│ │ ├── index.ts # 配置入口
|
||
│ │ ├── zh-CN.ts # 中文
|
||
│ │ └── en-US.ts # 英文
|
||
│ │
|
||
│ ├── router/ # 路由配置
|
||
│ │ ├── index.ts # 路由入口
|
||
│ │ ├── routes.ts # 路由定义
|
||
│ │ ├── portal.ts # 前台路由
|
||
│ │ └── admin.ts # 后台路由
|
||
│ │
|
||
│ ├── stores/ # Pinia状态管理
|
||
│ │ ├── index.ts
|
||
│ │ ├── app.ts # 应用状态
|
||
│ │ ├── user.ts # 用户状态
|
||
│ │ └── setting.ts # 设置状态
|
||
│ │
|
||
│ ├── types/ # TypeScript类型
|
||
│ │ ├── api.d.ts # API响应类型
|
||
│ │ ├── model.d.ts # 数据模型类型
|
||
│ │ └── global.d.ts # 全局类型
|
||
│ │
|
||
│ ├── utils/ # 工具函数
|
||
│ │ ├── storage.ts # 本地存储封装
|
||
│ │ ├── format.ts # 格式化
|
||
│ │ ├── validate.ts # 验证
|
||
│ │ └── constants.ts # 常量
|
||
│ │
|
||
│ └── views/ # 页面视图
|
||
│ ├── portal/ # 前台页面
|
||
│ │ ├── HomeView.vue
|
||
│ │ ├── ProductView.vue
|
||
│ │ ├── ProductDetailView.vue
|
||
│ │ ├── CaseView.vue
|
||
│ │ ├── CaseDetailView.vue
|
||
│ │ ├── AboutView.vue
|
||
│ │ ├── NewsView.vue
|
||
│ │ ├── NewsDetailView.vue
|
||
│ │ └── ContactView.vue
|
||
│ └── admin/ # 后台管理页面
|
||
│ ├── LoginView.vue
|
||
│ ├── DashboardView.vue
|
||
│ ├── Layout.vue
|
||
│ ├── company/
|
||
│ │ └── InfoManage.vue
|
||
│ ├── content/
|
||
│ │ ├── CarouselManage.vue
|
||
│ │ ├── PageBlockManage.vue
|
||
│ │ └── MediaLibrary.vue
|
||
│ ├── product/
|
||
│ │ ├── CategoryManage.vue
|
||
│ │ └── ProductManage.vue
|
||
│ ├── case/
|
||
│ │ ├── CaseCategoryManage.vue
|
||
│ │ └── CaseManage.vue
|
||
│ ├── news/
|
||
│ │ ├── NewsCategoryManage.vue
|
||
│ │ └── NewsManage.vue
|
||
│ ├── message/
|
||
│ │ └── MessageManage.vue
|
||
│ └── system/
|
||
│ ├── UserManage.vue
|
||
│ └── LogManage.vue
|
||
```
|
||
|
||
---
|
||
|
||
## 三、核心配置文件
|
||
|
||
### 3.1 vite.config.ts
|
||
|
||
```typescript
|
||
import { defineConfig } from 'vite'
|
||
import vue from '@vitejs/plugin-vue'
|
||
import { resolve } from 'path'
|
||
|
||
export default defineConfig({
|
||
plugins: [vue()],
|
||
resolve: {
|
||
alias: {
|
||
'@': resolve(__dirname, 'src'),
|
||
},
|
||
},
|
||
css: {
|
||
preprocessorOptions: {
|
||
scss: {
|
||
additionalData: `
|
||
@use "@/assets/styles/variables.scss" as *;
|
||
@use "@/assets/styles/mixins.scss" as *;
|
||
`,
|
||
},
|
||
},
|
||
},
|
||
server: {
|
||
port: 3000,
|
||
proxy: {
|
||
'/api': {
|
||
target: 'http://localhost:8080',
|
||
changeOrigin: true,
|
||
},
|
||
},
|
||
},
|
||
build: {
|
||
outDir: 'dist',
|
||
assetsDir: 'assets',
|
||
rollupOptions: {
|
||
output: {
|
||
chunkFileNames: 'js/[name]-[hash].js',
|
||
entryFileNames: 'js/[name]-[hash].js',
|
||
assetFileNames: (assetInfo) => {
|
||
const info = assetInfo.name.split('.')
|
||
const ext = info[info.length - 1]
|
||
if (/\.(png|jpe?g|gif|svg|webp|ico)$/.test(assetInfo.name)) {
|
||
return 'images/[name]-[hash][extname]'
|
||
}
|
||
if (/\.(woff2?|eot|ttf|otf)$/.test(assetInfo.name)) {
|
||
return 'fonts/[name]-[hash][extname]'
|
||
}
|
||
return '[ext]/[name]-[hash][extname]'
|
||
},
|
||
},
|
||
},
|
||
},
|
||
})
|
||
```
|
||
|
||
### 3.2 .env.production
|
||
|
||
```
|
||
# 站点代码
|
||
VITE_SITE_CODE=cg
|
||
|
||
# API地址
|
||
VITE_API_BASE_URL=/api
|
||
|
||
# 多语言默认
|
||
VITE_DEFAULT_LANG=zh-CN
|
||
|
||
# MinIO配置
|
||
VITE_MINIO_ENDPOINT=http://localhost:9000
|
||
VITE_MINIO_BUCKET=chuanggao-images
|
||
VITE_MINIO_PUBLIC_URL=http://localhost:9000/chuanggao-images
|
||
```
|
||
|
||
### 3.3 tsconfig.json
|
||
|
||
```json
|
||
{
|
||
"compilerOptions": {
|
||
"target": "ESNext",
|
||
"useDefineForClassFields": true,
|
||
"module": "ESNext",
|
||
"lib": ["ESNext", "DOM", "DOM.Iterable"],
|
||
"skipLibCheck": true,
|
||
"moduleResolution": "bundler",
|
||
"allowImportingTsExtensions": true,
|
||
"resolveJsonModule": true,
|
||
"isolatedModules": true,
|
||
"noEmit": true,
|
||
"jsx": "preserve",
|
||
"strict": true,
|
||
"noUnusedLocals": true,
|
||
"noUnusedParameters": true,
|
||
"noFallthroughCasesInSwitch": true,
|
||
"baseUrl": ".",
|
||
"paths": {
|
||
"@/*": ["src/*"]
|
||
}
|
||
},
|
||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||
"references": [{ "path": "./tsconfig.node.json" }]
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 四、国际化配置
|
||
|
||
### 4.1 locales/index.ts
|
||
|
||
```typescript
|
||
import { createI18n } from 'vue-i18n'
|
||
import zhCN from './zh-CN'
|
||
import enUS from './en-US'
|
||
|
||
const messages = {
|
||
'zh-CN': zhCN,
|
||
'en-US': enUS,
|
||
}
|
||
|
||
const i18n = createI18n({
|
||
legacy: false,
|
||
locale: localStorage.getItem('lang') || import.meta.env.VITE_DEFAULT_LANG || 'zh-CN',
|
||
fallbackLocale: 'zh-CN',
|
||
messages,
|
||
})
|
||
|
||
export default i18n
|
||
```
|
||
|
||
### 4.2 locales/zh-CN.ts（节选）
|
||
|
||
```typescript
|
||
export default {
|
||
// 通用
|
||
common: {
|
||
home: '首页',
|
||
products: '产品中心',
|
||
cases: '案例展示',
|
||
about: '关于创高',
|
||
contact: '联系我们',
|
||
franchise: '招商加盟',
|
||
more: '了解更多',
|
||
viewAll: '查看全部',
|
||
submit: '提交',
|
||
cancel: '取消',
|
||
confirm: '确认',
|
||
loading: '加载中...',
|
||
noData: '暂无数据',
|
||
search: '搜索',
|
||
hotline: '服务热线',
|
||
},
|
||
|
||
// 首页
|
||
home: {
|
||
hero: {
|
||
title: '全屋定制 匠心之作',
|
||
subtitle: '专注高端家具定制，为品质生活而生',
|
||
btnContact: '立即咨询',
|
||
btnProducts: '查看产品',
|
||
},
|
||
services: {
|
||
title: '核心业务',
|
||
subtitle: '三大业务板块，全方位满足您的需求',
|
||
custom: {
|
||
title: '全屋定制',
|
||
desc: '从客厅到卧室，从厨房到书房，一站式全屋定制解决方案',
|
||
},
|
||
furniture: {
|
||
title: '成品家具',
|
||
desc: '精选全球优质原材料，打造舒适耐用的高端家具',
|
||
},
|
||
project: {
|
||
title: '工程项目',
|
||
desc: '酒店、办公、精装房等专业工程家具配套服务',
|
||
},
|
||
},
|
||
products: {
|
||
title: '热门产品',
|
||
subtitle: '精选系列，品质之选',
|
||
},
|
||
cases: {
|
||
title: '经典案例',
|
||
subtitle: '实景呈现，见证品质',
|
||
},
|
||
strength: {
|
||
title: '品牌实力',
|
||
subtitle: '二十年匠心积淀，铸就行业标杆',
|
||
years: '年行业经验',
|
||
factory: '㎡生产基地',
|
||
clients: '家服务客户',
|
||
patents: '项国家专利',
|
||
},
|
||
},
|
||
|
||
// 产品中心
|
||
product: {
|
||
title: '产品中心',
|
||
filter: {
|
||
all: '全部',
|
||
category: '分类',
|
||
style: '风格',
|
||
scene: '场景',
|
||
},
|
||
params: '产品参数',
|
||
scene: '场景展示',
|
||
inquiry: '立即咨询',
|
||
similar: '相关产品',
|
||
},
|
||
|
||
// 案例展示
|
||
case: {
|
||
title: '案例展示',
|
||
filter: '场景筛选',
|
||
area: '项目面积',
|
||
location: '项目地点',
|
||
date: '完工时间',
|
||
products: '使用产品',
|
||
},
|
||
|
||
// 关于创高
|
||
about: {
|
||
title: '关于创高',
|
||
story: '品牌故事',
|
||
factory: '工厂实力',
|
||
honor: '荣誉资质',
|
||
news: '新闻资讯',
|
||
},
|
||
|
||
// 联系我们
|
||
contact: {
|
||
title: '联系我们',
|
||
form: {
|
||
name: '您的姓名',
|
||
phone: '联系电话',
|
||
email: '电子邮箱',
|
||
company: '公司名称',
|
||
type: '咨询类型',
|
||
message: '留言内容',
|
||
placeholder: '请输入您的咨询内容...',
|
||
},
|
||
types: {
|
||
join: '加盟咨询',
|
||
cooperate: '工程合作',
|
||
feedback: '客户反馈',
|
||
other: '其他',
|
||
},
|
||
success: '提交成功，我们会尽快联系您！',
|
||
},
|
||
|
||
// 招商加盟
|
||
franchise: {
|
||
title: '招商加盟',
|
||
subtitle: '携手创高，共创未来',
|
||
policy: '加盟政策',
|
||
process: '加盟流程',
|
||
support: '六大支持',
|
||
contact: '立即咨询',
|
||
},
|
||
|
||
// 页脚
|
||
footer: {
|
||
navigation: '快速导航',
|
||
products: '产品中心',
|
||
service: '客户服务',
|
||
contact: '联系方式',
|
||
follow: '关注我们',
|
||
copyright: '© {year} 创高家具 版权所有',
|
||
icp: '粤ICP备xxxxxxxx号',
|
||
},
|
||
}
|
||
```
|
||
|
||
### 4.3 locales/en-US.ts（结构同上，英文翻译）
|
||
|
||
---
|
||
|
||
## 五、路由设计
|
||
|
||
### 5.1 router/portal.ts（前台路由）
|
||
|
||
```typescript
|
||
import type { RouteRecordRaw } from 'vue-router'
|
||
|
||
const portalRoutes: RouteRecordRaw[] = [
|
||
{
|
||
path: '/',
|
||
name: 'Home',
|
||
component: () => import('@/views/portal/HomeView.vue'),
|
||
meta: {
|
||
title: '首页',
|
||
titleEn: 'Home',
|
||
},
|
||
},
|
||
{
|
||
path: '/products',
|
||
name: 'Products',
|
||
component: () => import('@/views/portal/ProductView.vue'),
|
||
meta: {
|
||
title: '产品中心',
|
||
titleEn: 'Products',
|
||
},
|
||
},
|
||
{
|
||
path: '/products/:id',
|
||
name: 'ProductDetail',
|
||
component: () => import('@/views/portal/ProductDetailView.vue'),
|
||
meta: {
|
||
title: '产品详情',
|
||
titleEn: 'Product Detail',
|
||
},
|
||
},
|
||
{
|
||
path: '/cases',
|
||
name: 'Cases',
|
||
component: () => import('@/views/portal/CaseView.vue'),
|
||
meta: {
|
||
title: '案例展示',
|
||
titleEn: 'Cases',
|
||
},
|
||
},
|
||
{
|
||
path: '/cases/:id',
|
||
name: 'CaseDetail',
|
||
component: () => import('@/views/portal/CaseDetailView.vue'),
|
||
meta: {
|
||
title: '案例详情',
|
||
titleEn: 'Case Detail',
|
||
},
|
||
},
|
||
{
|
||
path: '/about',
|
||
name: 'About',
|
||
component: () => import('@/views/portal/AboutView.vue'),
|
||
meta: {
|
||
title: '关于创高',
|
||
titleEn: 'About Us',
|
||
},
|
||
},
|
||
{
|
||
path: '/news',
|
||
name: 'News',
|
||
component: () => import('@/views/portal/NewsView.vue'),
|
||
meta: {
|
||
title: '新闻资讯',
|
||
titleEn: 'News',
|
||
},
|
||
},
|
||
{
|
||
path: '/news/:id',
|
||
name: 'NewsDetail',
|
||
component: () => import('@/views/portal/NewsDetailView.vue'),
|
||
meta: {
|
||
title: '新闻详情',
|
||
titleEn: 'News Detail',
|
||
},
|
||
},
|
||
{
|
||
path: '/contact',
|
||
name: 'Contact',
|
||
component: () => import('@/views/portal/ContactView.vue'),
|
||
meta: {
|
||
title: '联系我们',
|
||
titleEn: 'Contact Us',
|
||
},
|
||
},
|
||
]
|
||
|
||
export default portalRoutes
|
||
```
|
||
|
||
### 5.2 router/admin.ts（后台路由）
|
||
|
||
```typescript
|
||
import type { RouteRecordRaw } from 'vue-router'
|
||
|
||
const adminRoutes: RouteRecordRaw[] = [
|
||
{
|
||
path: '/admin/login',
|
||
name: 'AdminLogin',
|
||
component: () => import('@/views/admin/LoginView.vue'),
|
||
meta: { public: true },
|
||
},
|
||
{
|
||
path: '/admin',
|
||
name: 'AdminLayout',
|
||
component: () => import('@/views/admin/Layout.vue'),
|
||
redirect: '/admin/dashboard',
|
||
children: [
|
||
{
|
||
path: 'dashboard',
|
||
name: 'AdminDashboard',
|
||
component: () => import('@/views/admin/DashboardView.vue'),
|
||
},
|
||
{
|
||
path: 'company/info',
|
||
name: 'CompanyInfo',
|
||
component: () => import('@/views/admin/company/InfoManage.vue'),
|
||
},
|
||
{
|
||
path: 'content/carousel',
|
||
name: 'CarouselManage',
|
||
component: () => import('@/views/admin/content/CarouselManage.vue'),
|
||
},
|
||
{
|
||
path: 'content/blocks',
|
||
name: 'PageBlockManage',
|
||
component: () => import('@/views/admin/content/PageBlockManage.vue'),
|
||
},
|
||
{
|
||
path: 'content/media',
|
||
name: 'MediaLibrary',
|
||
component: () => import('@/views/admin/content/MediaLibrary.vue'),
|
||
},
|
||
{
|
||
path: 'product/category',
|
||
name: 'ProductCategory',
|
||
component: () => import('@/views/admin/product/CategoryManage.vue'),
|
||
},
|
||
{
|
||
path: 'product/list',
|
||
name: 'ProductList',
|
||
component: () => import('@/views/admin/product/ProductManage.vue'),
|
||
},
|
||
{
|
||
path: 'case/category',
|
||
name: 'CaseCategory',
|
||
component: () => import('@/views/admin/case/CaseCategoryManage.vue'),
|
||
},
|
||
{
|
||
path: 'case/list',
|
||
name: 'CaseList',
|
||
component: () => import('@/views/admin/case/CaseManage.vue'),
|
||
},
|
||
{
|
||
path: 'news/category',
|
||
name: 'NewsCategory',
|
||
component: () => import('@/views/admin/news/NewsCategoryManage.vue'),
|
||
},
|
||
{
|
||
path: 'news/list',
|
||
name: 'NewsList',
|
||
component: () => import('@/views/admin/news/NewsManage.vue'),
|
||
},
|
||
{
|
||
path: 'message/list',
|
||
name: 'MessageList',
|
||
component: () => import('@/views/admin/message/MessageManage.vue'),
|
||
},
|
||
{
|
||
path: 'system/users',
|
||
name: 'UserManage',
|
||
component: () => import('@/views/admin/system/UserManage.vue'),
|
||
},
|
||
],
|
||
},
|
||
]
|
||
|
||
export default adminRoutes
|
||
```
|
||
|
||
---
|
||
|
||
## 六、核心组件设计
|
||
|
||
### 6.1 AppHeader.vue（顶部导航）
|
||
|
||
```vue
|
||
<template>
|
||
<header :class="['app-header', { 'is-scrolled': isScrolled, 'is-mobile': isMobile }]">
|
||
<div class="header-container">
|
||
<!-- Logo -->
|
||
<router-link to="/" class="logo">
|
||
<img :src="companyInfo.logo" :alt="companyInfo.brandName">
|
||
<span class="brand-name">{{ companyInfo.brandName }}</span>
|
||
</router-link>
|
||
|
||
<!-- 桌面导航 -->
|
||
<nav v-if="!isMobile" class="main-nav">
|
||
<router-link
|
||
v-for="item in navItems"
|
||
:key="item.path"
|
||
:to="item.path"
|
||
:class="['nav-item', { active: isActive(item.path) }]"
|
||
>
|
||
{{ $t(item.labelKey) }}
|
||
</router-link>
|
||
</nav>
|
||
|
||
<!-- 右侧工具 -->
|
||
<div class="header-tools">
|
||
<!-- 语言切换 -->
|
||
<LangSwitch />
|
||
|
||
<!-- 热线 -->
|
||
<a v-if="!isMobile" :href="`tel:${companyInfo.contactPhone}`" class="hotline">
|
||
<el-icon><Phone /></el-icon>
|
||
<span>{{ companyInfo.contactPhone }}</span>
|
||
</a>
|
||
|
||
<!-- 移动端菜单按钮 -->
|
||
<button v-if="isMobile" class="menu-toggle" @click="toggleMobileMenu">
|
||
<el-icon><Menu /></el-icon>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 移动端菜单 -->
|
||
<MobileMenu v-model="mobileMenuVisible" :nav-items="navItems" />
|
||
</header>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { useScroll } from '@/composables/useScroll'
|
||
import { useDevice } from '@/composables/useDevice'
|
||
import LangSwitch from '@/components/common/LangSwitch.vue'
|
||
import MobileMenu from '@/components/layout/MobileMenu.vue'
|
||
|
||
const { t } = useI18n()
|
||
const route = useRoute()
|
||
const { isScrolled } = useScroll()
|
||
const { isMobile } = useDevice()
|
||
|
||
const mobileMenuVisible = ref(false)
|
||
|
||
const navItems = [
|
||
{ path: '/', labelKey: 'common.home' },
|
||
{ path: '/products', labelKey: 'common.products' },
|
||
{ path: '/cases', labelKey: 'common.cases' },
|
||
{ path: '/about', labelKey: 'common.about' },
|
||
{ path: '/contact', labelKey: 'common.contact' },
|
||
]
|
||
|
||
const isActive = (path: string) => {
|
||
if (path === '/') {
|
||
return route.path === '/'
|
||
}
|
||
return route.path.startsWith(path)
|
||
}
|
||
|
||
const toggleMobileMenu = () => {
|
||
mobileMenuVisible.value = !mobileMenuVisible.value
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.app-header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
height: 80px;
|
||
background: transparent;
|
||
transition: all 0.3s ease;
|
||
|
||
&.is-scrolled {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
|
||
height: 64px;
|
||
}
|
||
|
||
// 深色导航样式（首页首屏）
|
||
&:not(.is-scrolled) {
|
||
.nav-item {
|
||
color: #fff;
|
||
}
|
||
.brand-name {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.header-container {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
text-decoration: none;
|
||
|
||
img {
|
||
height: 40px;
|
||
width: auto;
|
||
}
|
||
|
||
.brand-name {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
}
|
||
}
|
||
|
||
.main-nav {
|
||
display: flex;
|
||
gap: 40px;
|
||
|
||
.nav-item {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: var(--text-primary);
|
||
text-decoration: none;
|
||
transition: color 0.3s;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -4px;
|
||
left: 0;
|
||
width: 0;
|
||
height: 2px;
|
||
background: var(--primary-color);
|
||
transition: width 0.3s;
|
||
}
|
||
|
||
&:hover,
|
||
&.active {
|
||
color: var(--primary-color);
|
||
|
||
&::after {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.header-tools {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24px;
|
||
}
|
||
|
||
.hotline {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
color: var(--text-primary);
|
||
text-decoration: none;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
|
||
.el-icon {
|
||
font-size: 16px;
|
||
color: var(--primary-color);
|
||
}
|
||
}
|
||
</style>
|
||
```
|
||
|
||
---
|
||
|
||
## 七、样式系统设计
|
||
|
||
### 7.1 variables.scss（CSS变量）
|
||
|
||
```scss
|
||
:root {
|
||
// 品牌色 - 深色底+金属质感
|
||
--primary-color: #C9A962; // 金色（金属质感）
|
||
--primary-light: #E8D5A3; // 浅金色
|
||
--primary-dark: #9A7B3D; // 深金色
|
||
|
||
// 背景色
|
||
--bg-dark: #1A1A1A; // 深色背景
|
||
--bg-dark-secondary: #242424; // 次级深色
|
||
--bg-light: #FFFFFF; // 浅色背景
|
||
--bg-gray: #F5F5F5; // 灰色背景
|
||
|
||
// 文字色
|
||
--text-primary: #1A1A1A; // 主文字（深色）
|
||
--text-secondary: #666666; // 次级文字
|
||
--text-light: #999999; // 辅助文字
|
||
--text-white: #FFFFFF; // 白色文字
|
||
|
||
// 边框
|
||
--border-color: #E8E8E8;
|
||
--border-dark: #333333;
|
||
|
||
// 阴影
|
||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
|
||
|
||
// 间距
|
||
--spacing-xs: 4px;
|
||
--spacing-sm: 8px;
|
||
--spacing-md: 16px;
|
||
--spacing-lg: 24px;
|
||
--spacing-xl: 32px;
|
||
--spacing-xxl: 48px;
|
||
|
||
// 圆角
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 16px;
|
||
|
||
// 过渡
|
||
--transition-fast: 0.2s ease;
|
||
--transition-normal: 0.3s ease;
|
||
--transition-slow: 0.5s ease;
|
||
|
||
// 布局
|
||
--header-height: 80px;
|
||
--header-height-mobile: 64px;
|
||
--container-max-width: 1400px;
|
||
--container-padding: 24px;
|
||
}
|
||
|
||
// 响应式断点
|
||
$breakpoints: (
|
||
'xs': 576px,
|
||
'sm': 768px,
|
||
'md': 992px,
|
||
'lg': 1200px,
|
||
'xl': 1400px,
|
||
);
|
||
|
||
@mixin respond-to($breakpoint) {
|
||
$value: map-get($breakpoints, $breakpoint);
|
||
@media (max-width: $value) {
|
||
@content;
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 八、响应式断点策略
|
||
|
||
| 断点 | 宽度 | 布局调整 |
|
||
|------|------|----------|
|
||
| xl | ≥1400px | 最大容器宽度，完整导航 |
|
||
| lg | 1200-1399px | 略窄容器 |
|
||
| md | 992-1199px | 平板横屏，简化导航 |
|
||
| sm | 768-991px | 平板竖屏，移动菜单 |
|
||
| xs | <768px | 手机，单列布局 |
|
||
|
||
---
|
||
|
||
## 九、性能优化策略
|
||
|
||
### 9.1 图片处理
|
||
- 使用 `loading="lazy"` 懒加载
|
||
- 多尺寸图片：pc端 / mobile端分离
|
||
- WebP 格式优先，JPEG 降级
|
||
- 响应式图片 `srcset`
|
||
|
||
### 9.2 代码分割
|
||
- 路由级别懒加载
|
||
- 组件异步加载
|
||
- vendors chunk 分离
|
||
|
||
### 9.3 缓存策略
|
||
- 静态资源长期缓存（1年）
|
||
- API 响应 Cache-Control
|
||
- 图片 CDN 加速
|
||
|
||
---
|
||
|
||
## 十、开发命令
|
||
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 开发环境
|
||
npm run dev
|
||
|
||
# 生产构建
|
||
npm run build
|
||
|
||
# 预览生产构建
|
||
npm run preview
|
||
|
||
# 类型检查
|
||
npm run type-check
|
||
|
||
# 代码检查
|
||
npm run lint
|
||
```
|