# 项目前期设计文档

**项目代号**: A00  
**项目名称**: TJFS集团官方网站及Web服务器  
**文档类型**: 前期设计文档  
**创建日期**: 2026-03-05  
**编制人**: TBs  
**文档版本**: V1.0  
**文档状态**: 已批准

---

## 目录

1. [设计概述](#一设计概述)
2. [需求分析](#二需求分析)
3. [系统架构设计](#三系统架构设计)
4. [技术选型](#四技术选型)
5. [页面设计](#五页面设计)
6. [接口设计](#六接口设计)
7. [安全设计](#七安全设计)
8. [性能设计](#八性能设计)
9. [部署架构](#九部署架构)
10. [开发计划](#十开发计划)

---

## 一、设计概述

### 1.1 项目背景

TJFS集团官方网站是集团的对外展示窗口，需要展示集团的核心价值观、研究方向、业务领域、子公司信息等内容。网站采用单页应用设计，通过平滑滚动实现各章节的导航。

### 1.2 设计目标

| 目标编号 | 目标描述 | 优先级 |
|----------|----------|--------|
| D001 | 实现响应式设计，适配多种设备 | 高 |
| D002 | 提供流畅的动画和交互体验 | 高 |
| D003 | 确保良好的性能和加载速度 | 高 |
| D004 | 代码结构清晰，易于维护 | 中 |

### 1.3 设计原则

| 原则 | 说明 |
|------|------|
| 移动优先 | 设计从移动端开始，逐步扩展到桌面端 |
| 渐进增强 | 基础功能在无JavaScript时可用 |
| 性能优先 | 优化加载速度和运行时性能 |
| 可访问性 | 确保所有用户都能访问内容 |

### 1.4 文档范围

本文档涵盖TJFS集团官方网站的页面设计、技术架构、接口设计、安全设计、性能设计和部署方案。

---

## 二、需求分析

### 2.1 业务需求

#### 2.1.1 业务流程

```
用户访问首页
    │
    ├── 浏览集团形象展示
    │
    ├── 查看关于我们
    │
    ├── 了解核心价值观
    │
    ├── 阅读技术哲学
    │
    ├── 查看研究方向
    │
    ├── 了解业务领域
    │
    ├── 查看子公司信息
    │
    ├── 了解合作方式
    │
    ├── 查看招聘信息
    │   └── 提交职位申请（可选）
    │
    └── 发送联系消息（可选）
```

#### 2.1.2 业务规则

| 规则编号 | 规则名称 | 规则描述 |
|----------|----------|----------|
| BR001 | 导航规则 | 导航栏固定顶部，当前章节高亮 |
| BR002 | 动画规则 | 元素进入视口时触发动画 |
| BR003 | 表单规则 | 必填字段验证，提交后显示反馈 |

### 2.2 功能需求

#### 2.2.1 功能清单

| 功能编号 | 功能模块 | 功能名称 | 功能描述 | 优先级 |
|----------|----------|----------|----------|--------|
| F001 | 首页 | 响应式导航 | 固定导航栏，移动端汉堡菜单 | P0 |
| F002 | 首页 | 英雄区展示 | Logo、标语、统计数据 | P0 |
| F003 | 首页 | 粒子背景 | 动态粒子动画效果 | P1 |
| F004 | 关于我们 | 信息卡片 | 集团简介、愿景、业务、技术 | P0 |
| F005 | 关于我们 | 发展历程 | 时间线展示重要节点 | P1 |
| F006 | 核心价值观 | 价值观卡片 | 四大价值观展示 | P0 |
| F007 | 技术哲学 | 哲学卡片 | 四大技术哲学理念 | P1 |
| F008 | 研究方向 | 研究方向卡片 | 七大研究方向展示 | P0 |
| F009 | 业务领域 | 业务卡片 | 五大业务领域展示 | P0 |
| F010 | 子公司 | 子公司介绍 | SG Studio和TBs科技 | P0 |
| F011 | 合作伙伴 | 合作方式 | 四种合作类型展示 | P1 |
| F012 | 人才招聘 | 职位列表 | 热招职位展示 | P1 |
| F013 | 人才招聘 | 职位申请 | 模态框表单 | P1 |
| F014 | 联系我们 | 联系信息 | 邮箱、地址、社交媒体 | P0 |
| F015 | 联系我们 | 联系表单 | 在线留言表单 | P1 |

### 2.3 非功能需求

| 需求类型 | 需求描述 | 指标要求 |
|----------|----------|----------|
| 性能需求 | 首屏加载时间 | < 3秒 |
| 性能需求 | 动画帧率 | > 30fps |
| 兼容性需求 | 浏览器兼容 | Chrome 90+, Firefox 88+, Safari 14+ |
| 兼容性需求 | 设备兼容 | PC、平板、手机 |

### 2.4 约束条件

| 约束类型 | 约束描述 |
|----------|----------|
| 技术约束 | 使用原生HTML/CSS/JavaScript |
| 时间约束 | 项目周期1个月 |
| 资源约束 | 1名开发人员 |

---

## 三、系统架构设计

### 3.1 整体架构

```
┌─────────────────────────────────────────────────────────────┐
│                        客户端                                │
│  ┌──────────────┐ ┌──────────────┐ ┌──────────────┐        │
│  │   PC端       │ │   平板端      │ │   手机端      │        │
│  └──────────────┘ └──────────────┘ └──────────────┘        │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                        Web服务器                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │              Python HTTP Server                      │   │
│  │  ┌──────────┐  ┌──────────┐  ┌──────────┐          │   │
│  │  │ 静态文件  │  │  CORS    │  │ 日志记录  │          │   │
│  │  │ 服务     │  │  处理    │  │          │          │   │
│  │  └──────────┘  └──────────┘  └──────────┘          │   │
│  └─────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│                        静态资源                              │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐                  │
│  │ HTML文件  │  │ CSS样式  │  │ JS脚本   │                  │
│  │          │  │          │  │          │                  │
│  └──────────┘  └──────────┘  └──────────┘                  │
└─────────────────────────────────────────────────────────────┘
```

### 3.2 架构说明

| 层级 | 职责 | 技术组件 |
|------|------|----------|
| 客户端 | 用户界面展示和交互 | 浏览器 |
| Web服务器 | 静态文件服务、CORS支持 | Python HTTP Server |
| 静态资源 | 页面内容、样式、脚本 | HTML/CSS/JS文件 |

### 3.3 模块划分

| 模块编号 | 模块名称 | 模块职责 | 依赖模块 |
|----------|----------|----------|----------|
| M001 | 导航模块 | 响应式导航栏 | 无 |
| M002 | 英雄区模块 | 首页展示、粒子动画 | 无 |
| M003 | 内容模块 | 各章节内容展示 | 动画模块 |
| M004 | 动画模块 | 滚动动画、计数动画 | 无 |
| M005 | 表单模块 | 表单验证和提交 | 无 |
| M006 | 模态框模块 | 弹窗组件 | 无 |

### 3.4 模块交互图

```
用户操作
    │
    ▼
┌──────────┐
│ 导航模块  │ ── 平滑滚动 ──▶ 内容模块
└──────────┘
    │
    ▼
┌──────────┐
│ 动画模块  │ ◀── 滚动事件 ──
└──────────┘
    │
    ▼
┌──────────┐
│ 表单模块  │ ── 提交 ──▶ 显示反馈
└──────────┘
```

---

## 四、技术选型

### 4.1 技术栈总览

| 技术领域 | 技术选型 | 版本 | 选型理由 |
|----------|----------|------|----------|
| 前端技术 | HTML5 + CSS3 + JavaScript | ES6+ | 原生技术，无需构建，轻量高效 |
| 服务器 | Python HTTP Server | 3.10+ | 简单稳定，跨平台支持 |
| 版本控制 | Git | 2.x | 代码版本管理 |

### 4.2 前端技术

| 组件 | 技术 | 说明 |
|------|------|------|
| 结构 | HTML5 | 语义化标签，SEO友好 |
| 样式 | CSS3 | Flexbox/Grid布局，CSS变量 |
| 脚本 | JavaScript (ES6+) | 原生JS，无框架依赖 |
| 动画 | CSS Animation + JS | 硬件加速动画 |
| 图标 | 内联SVG | 矢量图标，可缩放 |

### 4.3 服务器技术

| 组件 | 技术 | 说明 |
|------|------|------|
| 运行环境 | Python 3.10+ | 跨平台支持 |
| HTTP服务器 | http.server | 标准库，无需额外安装 |
| 请求处理 | CustomHTTPRequestHandler | 自定义CORS和日志 |

### 4.4 开发工具

| 工具类型 | 工具名称 | 说明 |
|----------|----------|------|
| 代码编辑 | VS Code | 代码编辑和调试 |
| 浏览器 | Chrome DevTools | 调试和性能分析 |
| 版本控制 | Git | 代码版本管理 |

---

## 五、页面设计

### 5.1 页面结构

```
index.html
├── head
│   ├── meta标签（字符集、视口、描述）
│   ├── title
│   └── link（CSS、字体）
│
├── body
│   ├── nav（导航栏）
│   │   ├── logo
│   │   ├── 导航菜单
│   │   ├── 子站点入口
│   │   └── 移动端菜单按钮
│   │
│   ├── section#home（英雄区）
│   │   ├── 粒子背景
│   │   ├── 集团Logo和标语
│   │   ├── 统计数据
│   │   └── CTA按钮
│   │
│   ├── section#about（关于我们）
│   │   ├── 信息卡片网格
│   │   └── 发展历程时间线
│   │
│   ├── section#values（核心价值观）
│   │   └── 价值观卡片网格
│   │
│   ├── section#philosophy（技术哲学）
│   │   ├── 哲学卡片
│   │   └── 引言区块
│   │
│   ├── section#research（研究方向）
│   │   └── 研究方向卡片网格
│   │
│   ├── section#business（业务领域）
│   │   ├── 业务卡片
│   │   └── 发展战略时间线
│   │
│   ├── section#subsidiary（子公司）
│   │   ├── SG Studio介绍
│   │   └── TBs科技介绍
│   │
│   ├── section#partners（合作伙伴）
│   │   ├── 合作类型
│   │   └── 合作伙伴权益
│   │
│   ├── section#careers（人才招聘）
│   │   ├── 职位列表
│   │   └── 申请模态框
│   │
│   ├── section#contact（联系我们）
│   │   ├── 联系信息
│   │   └── 联系表单
│   │
│   ├── footer（页脚）
│   │   ├── 品牌信息
│   │   └── 快速链接
│   │
│   └── script（JavaScript）
│
└── 模态框（职位申请）
```

### 5.2 响应式断点

| 断点名称 | 宽度范围 | 布局调整 |
|----------|----------|----------|
| 移动端 | < 768px | 单列布局，汉堡菜单 |
| 平板端 | 768px - 1024px | 双列布局 |
| 桌面端 | > 1024px | 多列布局，完整导航 |

### 5.3 色彩方案

| 颜色名称 | 色值 | 用途 |
|----------|------|------|
| 主色调 | #1a1a2e | 背景色 |
| 次色调 | #16213e | 卡片背景 |
| 强调色 | #A8FCF3 | 按钮、高亮 |
| 文字主色 | #e2e8f0 | 主要文字 |
| 文字次色 | #94a3b8 | 次要文字 |
| 渐变开始 | #8b5cf6 | 渐变起始 |
| 渐变结束 | #06b6d4 | 渐变结束 |

### 5.4 字体规范

| 元素 | 字体 | 大小 | 字重 |
|------|------|------|------|
| 标题H1 | Noto Sans SC | 48px-72px | 700-900 |
| 标题H2 | Noto Sans SC | 32px-48px | 700 |
| 标题H3 | Noto Sans SC | 20px-28px | 600 |
| 正文 | Noto Sans SC | 14px-16px | 400 |
| 小字 | Noto Sans SC | 12px-14px | 300-400 |

---

## 六、接口设计

### 6.1 接口规范

本项目为静态网站，主要接口为页面跳转和表单提交（前端模拟）。

### 6.2 页面路由

| 路由 | 页面 | 说明 |
|------|------|------|
| / | 首页 | TJFS集团官网首页 |
| /sgstudio/ | SG Studio | 松果工作室子站点 |
| /tbs/ | TBs科技 | 创生软件子站点 |

### 6.3 外部链接

| 链接类型 | 目标 | 说明 |
|----------|------|------|
| 邮箱链接 | mailto:tjfs_gt_institute@163.com | 官方邮箱 |
| 社交媒体 | # | 预留社交媒体链接 |

---

## 七、安全设计

### 7.1 安全架构

```
┌─────────────────────────────────────┐
│           客户端安全                 │
│  - 输入验证                          │
│  - XSS防护                          │
└─────────────────────────────────────┘
              │
              ▼
┌─────────────────────────────────────┐
│           传输安全                   │
│  - HTTP/HTTPS                       │
│  - CORS配置                         │
└─────────────────────────────────────┘
              │
              ▼
┌─────────────────────────────────────┐
│           服务器安全                 │
│  - 静态文件服务                      │
│  - 访问日志                         │
└─────────────────────────────────────┘
```

### 7.2 CORS配置

```python
# CORS头配置
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
```

### 7.3 输入安全

| 安全措施 | 说明 |
|----------|------|
| 前端验证 | 表单字段格式验证 |
| 输出转义 | 用户输入内容转义显示 |

---

## 八、性能设计

### 8.1 性能目标

| 指标 | 目标值 | 说明 |
|------|--------|------|
| 首屏加载 | < 3秒 | 首屏内容可见 |
| 完全加载 | < 5秒 | 所有资源加载完成 |
| 动画帧率 | > 30fps | 动画流畅无卡顿 |
| 服务器响应 | < 100ms | 静态文件响应 |

### 8.2 性能优化策略

| 优化方向 | 优化措施 |
|----------|----------|
| 资源优化 | 内联关键CSS，减少HTTP请求 |
| 图片优化 | 使用SVG图标，减少图片大小 |
| 代码优化 | 压缩HTML/CSS/JS |
| 缓存策略 | 配置浏览器缓存 |

### 8.3 动画性能

| 优化项 | 措施 |
|--------|------|
| 使用transform | 使用transform和opacity实现动画 |
| will-change | 对动画元素添加will-change提示 |
| 减少重绘 | 避免触发layout和paint |

---

## 九、部署架构

### 9.1 部署拓扑

```
                    ┌─────────────────┐
                    │    用户请求      │
                    └────────┬────────┘
                             │
                             ▼
                    ┌─────────────────┐
                    │   Web服务器      │
                    │  (Python HTTP)   │
                    │    Port 80      │
                    └────────┬────────┘
                             │
                             ▼
                    ┌─────────────────┐
                    │   静态文件       │
                    │  HTML/CSS/JS    │
                    └─────────────────┘
```

### 9.2 环境规划

| 环境 | 用途 | 配置 | 访问地址 |
|------|------|------|----------|
| 开发环境 | 开发调试 | 本地Python | http://localhost:80 |
| 测试环境 | 测试验证 | 本地Python | http://localhost:8537 |
| 生产环境 | 正式运行 | 生产服务器 | http://tjfs.com |

### 9.3 服务器配置

**Python HTTP服务器配置**:

```python
# 服务器配置
PORT = 80  # 或 8537
DIRECTORY = Path(__file__).parent.resolve()

# CORS配置
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
```

---

## 十、开发计划

### 10.1 迭代规划

| 迭代 | 迭代目标 | 开始日期 | 结束日期 |
|------|----------|----------|----------|
| Sprint 1 | 页面结构和样式 | 2026-03-11 | 2026-03-15 |
| Sprint 2 | 交互和动画 | 2026-03-16 | 2026-03-20 |
| Sprint 3 | 服务器和部署 | 2026-03-21 | 2026-03-25 |

### 10.2 任务分解

| 任务编号 | 任务名称 | 负责人 | 预计工时 | 开始日期 | 结束日期 |
|----------|----------|--------|----------|----------|----------|
| T001 | HTML结构开发 | TBs | 16h | 2026-03-11 | 2026-03-13 |
| T002 | CSS样式开发 | TBs | 16h | 2026-03-13 | 2026-03-15 |
| T003 | JavaScript交互 | TBs | 16h | 2026-03-16 | 2026-03-18 |
| T004 | 动画效果实现 | TBs | 12h | 2026-03-18 | 2026-03-20 |
| T005 | Python服务器 | TBs | 8h | 2026-03-21 | 2026-03-22 |
| T006 | 测试和优化 | TBs | 16h | 2026-03-23 | 2026-03-25 |

### 10.3 依赖关系

```
T001 (HTML结构)
    │
    ▼
T002 (CSS样式)
    │
    ▼
T003 (JS交互) ──▶ T004 (动画效果)
    │
    ▼
T005 (服务器)
    │
    ▼
T006 (测试优化)
```

---

## 附录

### 附录A: 术语表

| 术语 | 定义 |
|------|------|
| CORS | 跨域资源共享 |
| SVG | 可缩放矢量图形 |
| DOM | 文档对象模型 |
| ES6 | ECMAScript 2015 |

### 附录B: 参考资料

- 01-A00-项目立项申请书.md
- 02-A00-需求规格说明书.md
- MDN Web Docs

### 附录C: 变更记录

| 版本 | 日期 | 变更内容 | 变更人 |
|------|------|----------|--------|
| V1.0 | 2026-03-05 | 初始版本 | TBs |

---

**文档编制日期**: 2026-03-05  
**编制单位**: SG Studio - 松果工作室  
**文档版本**: V1.0