项目前期设计文档

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

目录

1. 设计概述
2. 需求分析
3. 系统架构设计
4. 技术选型
5. 页面设计
6. 接口设计
7. 安全设计
8. 性能设计
9. 部署架构
10. 开发计划

一、设计概述

1.1 项目背景

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

1.2 设计目标

1.3 设计原则

1.4 文档范围

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

二、需求分析

2.1 业务需求

2.1.1 业务流程

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

2.1.2 业务规则

2.2 功能需求

2.2.1 功能清单

2.3 非功能需求

2.4 约束条件

三、系统架构设计

3.1 整体架构

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

3.2 架构说明

3.3 模块划分

3.4 模块交互图

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

四、技术选型

4.1 技术栈总览

4.2 前端技术

4.3 服务器技术

4.4 开发工具

五、页面设计

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 响应式断点

5.3 色彩方案

5.4 字体规范

六、接口设计

6.1 接口规范

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

6.2 页面路由

6.3 外部链接

七、安全设计

7.1 安全架构

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

7.2 CORS配置

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

7.3 输入安全

八、性能设计

8.1 性能目标

8.2 性能优化策略

8.3 动画性能

九、部署架构

9.1 部署拓扑

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

9.2 环境规划

9.3 服务器配置

Python HTTP服务器配置:

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

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

十、开发计划

10.1 迭代规划

10.2 任务分解

10.3 依赖关系

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

附录

附录A: 术语表

附录B: 参考资料

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

附录C: 变更记录

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