novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新项目配置和文档，优化UI样式和CI配置

Browse Source 
- 从tsconfig.json中移除测试文件排除规则
- 优化错误边界组件的min-h样式
- 修正about-section中的引号转义和背景样式
- 更新woodpecker.yml中的release分支匹配模式
- 新增monorepo多站点架构设计方案文档
This commit was merged in pull request #1.
This commit is contained in:
张翔
2026-03-28 14:39:28 +08:00
parent a003f1192e
commit e6e3f79a2b
5 changed files with 266 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.woodpecker.yml
+8 -8
View File
@@ -117,7 +117,7 @@ steps:
- push
branch:
- release
- release/*
- release/**
# 3.3 深度测试 (release分支)
e2e-deep:
@@ -135,7 +135,7 @@ steps:
- push
branch:
- release
- release/*
- release/**
# 3.4 性能测试 (release分支)
e2e-performance:
@@ -153,7 +153,7 @@ steps:
- push
branch:
- release
- release/*
- release/**
# 3.5 可访问性测试 (release分支)
e2e-accessibility:
@@ -171,7 +171,7 @@ steps:
- push
branch:
- release
- release/*
- release/**
# 3.6 视觉回归测试 (release分支)
e2e-visual:
@@ -189,7 +189,7 @@ steps:
- push
branch:
- release
- release/*
- release/**
# ============================================
# 阶段4: 构建Docker镜像 (release分支)
@@ -216,7 +216,7 @@ steps:
- event: push
branch:
- release
- release/*
- release/**
# ============================================
# 阶段5: 部署到生产环境 (release分支)
@@ -314,7 +314,7 @@ steps:
- push
branch:
- release
- release/*
- release/**
# ============================================
# 阶段6: 归档到main分支 (release分支)
@@ -369,7 +369,7 @@ steps:
- push
branch:
- release
- release/*
- release/**
status:
- success
docs/plans/2026-03-28-monorepo-multi-site-architecture.md
+255
View File
@@ -0,0 +1,255 @@
# Monorepo 多站点架构设计方案
## 背景
当企业需要为多个产品/项目创建独立展示时，面临架构选择：**单独页面** vs **独立网站**。
经过需求分析，确定以下约束条件：
| 维度 | 需求 | 架构影响 |
|------|------|----------|
| 产品数量 | 动态增长，未来持续增加 | 需要高可扩展性 |
| 品牌关系 | 独立子品牌 | 需要视觉独立性 |
| 团队规模 | 1-2人精简团队 | 需要低维护成本 |
| SEO要求 | 高要求，独立域名 | 需要独立部署能力 |
## 方案对比
### 方案A：独立网站（多仓库）
```
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ 产品A (独立仓库) │ │ 产品B (独立仓库) │ │ 产品C (独立仓库) │
│ product-a.com │ │ product-b.com │ │ product-c.com │
└─────────────────┘ └─────────────────┘ └─────────────────┘
```
**优点**：完全独立、SEO最优、互不影响
**缺点**：❌ 维护成本极高、代码重复严重、安全更新繁琐
### 方案B：单站内嵌页面
```
┌──────────────────────────────────────────────────────┐
│ novalon.cn (主站) │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ /product-a │ │ /product-b │ │ /product-c │ │
│ └────────────┘ └────────────┘ └────────────┘ │
└──────────────────────────────────────────────────────┘
```
**优点**：维护成本最低、部署简单
**缺点**：❌ 无法独立域名、SEO受限、品牌独立性差
### 方案C：Monorepo多站点架构 ⭐ 推荐
```
┌─────────────────────────────────────────────────────────┐
│ Monorepo (统一仓库) │
├─────────────────────────────────────────────────────────┤
│ apps/ │
│ ├── main-site/ → novalon.cn │
│ ├── product-a/ → product-a.com (独立域名) │
│ ├── product-b/ → product-b.com (独立域名) │
│ └── product-c/ → product-c.com (独立域名) │
│ │
│ packages/ (共享代码) │
│ ├── ui/ → 共享组件库 │
│ ├── config/ → 共享配置 │
│ └── utils/ → 共享工具函数 │
└─────────────────────────────────────────────────────────┘
```
## 技术设计
### 目录结构
```
novalon-website/
├── apps/ # 应用层（独立部署）
│ ├── main-site/ # 主站 → novalon.cn
│ │ ├── src/
│ │ ├── next.config.ts
│ │ └── package.json
│ │
│ └── products/ # 产品站点集合
│ ├── [product-slug]/ # 产品模板（可复制）
│ │ ├── src/
│ │ ├── public/
│ │ ├── next.config.ts
│ │ └── package.json
│ └── ...
│
├── packages/ # 共享层（不独立部署）
│ ├── ui/ # 共享组件库
│ │ ├── components/
│ │ │ ├── base/ # 基础组件（Button、Card等）
│ │ │ └── layout/ # 布局组件（Header、Footer等）
│ │ └── package.json
│ │
│ ├── config/ # 共享配置
│ │ ├── tailwind/ # Tailwind预设
│ │ ├── eslint/ # ESLint规则
│ │ └── typescript/ # TS配置
│ │
│ └── utils/ # 共享工具
│ ├── lib/
│ └── package.json
│
├── turbo.json # Turborepo配置
├── pnpm-workspace.yaml # pnpm工作区配置
└── package.json # 根package.json
```
### 共享组件库设计
```
packages/ui/
├── components/
│ ├── base/ # 基础组件（完全共享）
│ │ ├── button/
│ │ ├── card/
│ │ ├── input/
│ │ └── ...
│ │
│ └── themed/ # 主题化组件（可覆盖）
│ ├── header/
│ └── footer/
│
├── themes/ # 主题配置
│ ├── default.ts # 默认主题
│ ├── product-a.ts # 产品A主题
│ └── product-b.ts # 产品B主题
│
└── lib/
└── theme-context.tsx # 主题上下文
```
**组件分层策略**：
| 组件类型 | 共享程度 | 定制方式 |
|----------|----------|----------|
| 基础组件 | 100%共享 | 通过 props 和 CSS 变量覆盖样式 |
| 布局组件 | 接口共享 | 各应用可提供自己的实现 |
| 业务组件 | 不共享 | 各应用独立开发 |
### CI/CD 流水线
```
[代码推送] → [变更检测] → [增量构建] → [并行测试] → [智能部署]
↓ ↓ ↓
哪些应用变了? 只构建变的应用 只部署变的应用
```
**部署策略**：
| 场景 | 构建范围 | 部署范围 |
|------|----------|----------|
| 只改了 `apps/product-a` | 只构建 product-a | 只部署 product-a |
| 改了 `packages/ui` | 构建所有应用 | 部署所有应用 |
| 改了 `packages/config` | 构建所有应用 | 部署所有应用 |
### SEO优化策略
**独立域名架构**：
```
┌─────────────────────────────────────────────────────────────┐
│ Nginx 反向代理 │
├─────────────────────────────────────────────────────────────┤
│ novalon.cn → 主站容器 (localhost:3000) │
│ product-a.com → 产品A容器 (localhost:3001) │
│ product-b.com → 产品B容器 (localhost:3002) │
└─────────────────────────────────────────────────────────────┘
```
**SEO关键优势**：
| SEO 要素 | 独立站点优势 |
|----------|-------------|
| 独立域名 | 搜索引擎视为独立实体，权重互不影响 |
| 独立 sitemap | 精准控制索引范围，提升爬取效率 |
| 独立 metadata | 针对产品特性优化关键词，避免稀释 |
| 独立 robots.txt | 灵活控制爬虫访问策略 |
## 迁移路径
```
阶段1: 基础设施搭建 (1-2天)
↓
阶段2: 代码迁移与重构 (3-5天)
↓
阶段3: 共享组件抽取 (2-3天)
↓
阶段4: CI/CD 配置 (1-2天)
↓
阶段5: 第一个产品站点 (2-3天)
```
### 阶段1：基础设施搭建
```bash
# 1. 创建 Monorepo 根目录结构
mkdir -p apps packages
# 2. 初始化 pnpm 工作区
cat > pnpm-workspace.yaml << EOF
packages:
- 'apps/*'
- 'apps/products/*'
- 'packages/*'
EOF
# 3. 安装 Turborepo
pnpm add -Dw turbo
```
### 阶段2：代码迁移
```bash
# 将现有代码移动到 apps/main-site
mv src apps/main-site/src
mv public apps/main-site/public
mv next.config.ts apps/main-site/
```
### 阶段3：共享组件抽取
```bash
# 创建共享 UI 包
mkdir -p packages/ui/components
# 抽取通用组件
mv apps/main-site/src/components/ui packages/ui/components/base
```
### 阶段4：创建产品站点
```bash
# 复制主站作为模板
cp -r apps/main-site apps/products/product-template
# 创建新产品站点
cp -r apps/products/product-template apps/products/product-a
```
## 决策总结
| 评估维度 | 独立网站 | 单站内嵌页面 | Monorepo多站点 |
|----------|----------|--------------|----------------|
| 独立品牌支持 | ✅ 完美 | ❌ 差 | ✅ 完美 |
| SEO独立性 | ✅ 最优 | ❌ 受限 | ✅ 最优 |
| 维护成本 | ❌ 极高 | ✅ 最低 | ✅ 低 |
| 代码复用 | ❌ 无 | ✅ 完全 | ✅ 高度复用 |
| 扩展性 | ⚠️ 中等 | ❌ 差 | ✅ 优秀 |
| 团队适配 | ❌ 不适合精简团队 | ⚠️ 不满足需求 | ✅ 完美适配 |
## 结论
针对**动态增长 + 独立子品牌 + 精简团队 + 高SEO要求**的场景，**Monorepo多站点架构**是最佳选择：
- ✅ 品牌独立：每个产品独立应用、独立域名、独立视觉
- ✅ SEO最优：独立sitemap、独立metadata、独立域名权重
- ✅ 维护高效：共享代码库、统一依赖、一次更新全局生效
- ✅ 扩展简单：新增产品只需复制模板目录
- ✅ 智能CI/CD：增量构建、按需部署、自动化流水线
src/components/sections/about-section.tsx
+2 -2
View File
@@ -17,7 +17,7 @@ export function AboutSection() {
return (
<section id="about" role="region" aria-labelledby="about-heading" className="py-24 bg-[#FAFAFA] relative" ref={ref}>
<div className="absolute inset-0 bg-[linear-gradient(rgba(28,28,28,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(28,28,28,0.02)_1px,transparent_1px)] bg-[size:40px_40px]" />
<div className="absolute inset-0 bg-[linear-gradient(rgba(28,28,28,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(28,28,28,0.02)_1px,transparent_1px)] bg-size-[40px_40px]" />
<div className="container-wide relative z-10">
<motion.div
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
@@ -36,7 +36,7 @@ export function AboutSection() {
<div className="bg-white rounded-2xl p-8 mb-12 border border-[#E5E5E5]">
<p className="text-lg text-[#5C5C5C] leading-relaxed text-center mb-6">
"企业需要的，不是一个高高在上的'专家'，也不是一个做完就跑的'卖家'，而是一个能坐下来、一起想办法的同行者。"
&ldquo;企业需要的，不是一个高高在上的&lsquo;专家&rsquo;，也不是一个做完就跑的&lsquo;卖家&rsquo;，而是一个能坐下来、一起想办法的同行者。&rdquo;
</p>
<p className="text-[#1C1C1C] font-medium text-center">
我们只做一件事：成为您数字化转型路上，信得过的成长伙伴。
src/components/ui/error-boundary.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export class ErrorBoundary extends Component<Props, State> {
render() {
if (this.state.hasError) {
return this.props.fallback || (
<div className="flex items-center justify-center min-h-[400px] p-8" role="alert" aria-live="assertive">
<div className="flex items-center justify-center min-h-100 p-8" role="alert" aria-live="assertive">
<div className="text-center max-w-md">
<div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4" aria-hidden="true">
<svg
tsconfig.json
-2
View File
@@ -46,8 +46,6 @@
"exclude": [
"node_modules",
"tests",
"src/**/*.test.ts",
"src/**/*.spec.ts",
"e2e"
]
}