From e51683fd69e8dbbd5bad914ac1cd71ed08d2f5f6 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 1 Jul 2026 11:43:38 +0000 Subject: [PATCH 1/2] =?UTF-8?q?chore:=20rename=20=E5=BC=80=E6=BA=90?= =?UTF-8?q?=E4=BA=A7=E5=93=81=20to=20=E5=BC=80=E6=BA=90=E9=A1=B9=E7=9B=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 2 +- index.html | 2 +- js/i18n.js | 2 +- js/stars.js | 2 +- project.md | 166 -------------------------------------------------- 5 files changed, 4 insertions(+), 170 deletions(-) diff --git a/css/style.css b/css/style.css index 6897e3c..f8c2c39 100644 --- a/css/style.css +++ b/css/style.css @@ -439,7 +439,7 @@ hr { } /* ===== 列表项打磨（报纸密排风格下的轻量精修） ===== */ -/* 统一作用于 新闻动态 / 开源产品 / 招聘岗位 列表，复用已有语义结构 */ +/* 统一作用于 新闻动态 / 开源项目 / 招聘岗位 列表，复用已有语义结构 */ [role="list"] > article[role="listitem"] { margin-left: calc(var(--spacing-sm) * -1); margin-right: calc(var(--spacing-sm) * -1); diff --git a/index.html b/index.html index a2ac2c3..e6ade52 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + diff --git a/js/i18n.js b/js/i18n.js index 95d4ee0..c5435ac 100644 --- a/js/i18n.js +++ b/js/i18n.js @@ -10,7 +10,7 @@ class I18nManager { zh: { title: 'AFX · 支付宝体验技术部 · 引领体验科技，驱动数字生活', description: - 'AFX · 支付宝体验技术部 - 引领体验科技，驱动数字生活。专注于前端技术、开源产品和企业级应用开发。', + 'AFX · 支付宝体验技术部 - 引领体验科技，驱动数字生活。专注于前端技术、开源项目和企业级应用开发。', ogTitle: 'AFX · 支付宝体验技术部', ogDescription: '引领体验科技，驱动数字生活', }, diff --git a/js/stars.js b/js/stars.js index 8f28714..7ce1cab 100644 --- a/js/stars.js +++ b/js/stars.js @@ -1,5 +1,5 @@ /** - * 开源产品 GitHub Star 数获取与排序 + * 开源项目 GitHub Star 数获取与排序 * * 页面加载后拉取各仓库 star 数，渲染到标题旁，并按 star 降序重排卡片。 * - ant-design 链接指向组织主页，star 取该组织所有仓库之和。 diff --git a/project.md b/project.md index ebc4a0a..e69de29 100644 --- a/project.md +++ b/project.md @@ -1,166 +0,0 @@ -# AFX Team 官方网站 - 支付宝体验技术部 - -## 项目概述 - -这是支付宝体验技术部的官方网站，采用简洁优雅的设计风格，参考报纸排版美学，强调内容优先的设计理念。网站支持中英文双语切换，具备完整的无障碍功能和响应式设计。 - -## 技术栈 - -- **前端框架**：原生 HTML5 + CSS3 + JavaScript ES6+ -- **CSS 框架**：Tailwind CSS (CDN) + 自定义设计系统 -- **构建工具**：Biome (代码格式化和检查) -- **字体**：系统默认衬线字体 (serif) -- **分析工具**：Google Analytics 4 - -## 设计系统 - -### 核心设计原则 -- **内容优先**：文字为主，注重可读性和专业性 -- **简洁优雅**：参考报纸排版风格，信息密度适中 -- **多语言支持**：完整的中英文切换功能 -- **无障碍设计**：支持键盘导航、屏幕阅读器等辅助技术 -- **响应式布局**：完美适配桌面端和移动端 - -### 设计系统架构 -- **颜色系统**：主色、次色、文本色、边框色等统一变量 -- **字体系统**：serif主字体，monospace等宽字体 -- **间距系统**：xs、sm、md、lg、xl、2xl标准化间距 -- **组件系统**：卡片、标签、引用块等可复用组件 -- **响应式断点**：移动端、平板端、桌面端适配 - -### 视觉特点 -- **字体**：全局使用 serif 衬线字体，提升专业性和可读性 -- **颜色**：黑白灰为主，高对比度，符合报纸风格 -- **布局**：三栏网格布局，响应式设计 -- **间距**：紧凑的报纸风格间距 -- **交互**：简洁的悬停效果和点击反馈 - -## 页面结构 - -### 响应式三栏布局 -1. **左栏**：最新动态 + 博客文章 - - 最新动态：4个技术新闻和更新 - - 博客文章：3篇技术分享文章 - -2. **中栏**：开源产品 - - 8个开源产品展示：Ant Design、Egg.js、qiankun、umi、dumi、cnpm、Galacean Effects、Unieo - -3. **右栏**：招聘信息 + 部门文化 + 关注我们 - - 待招聘岗位：3个职位信息 - - 部门文化：核心价值观详细阐述 - - 关注我们：社交媒体链接和语言切换 - -### 内容模块 -- **部门简介**：部门使命和技术领域（全宽显示） -- **最新动态**：技术新闻和产品更新 -- **博客文章**：技术分享和文章 -- **开源产品**：8个产品的详细介绍和GitHub链接 -- **招聘信息**：岗位链接和工作地点 -- **部门文化**：简单、自由、有爱的核心价值观 -- **社交媒体**：B站、知乎、掘金、公众号、GitHub - -## 核心功能 - -### 多语言支持 -- 完整的中英文内容翻译 -- URL参数控制语言切换 -- 动态更新页面标题和meta标签 -- SEO友好的hreflang标签 - -### 无障碍设计 -- 跳过链接（Skip to main content） -- 键盘导航支持 -- ARIA标签和语义化HTML -- 焦点管理和屏幕阅读器友好 - -### 交互体验 -- 平滑滚动到锚点 -- 悬停效果和点击反馈 -- 外部链接处理 -- 语言切换功能 - -### 数据分析 -- Google Analytics 4集成 -- 访问统计和用户行为分析 -- 多语言版本访问分析 - -## 项目文件 - -``` -afx-team.github.io/ -├── index.html # 主页面（语义化HTML结构） -├── css/ -│ └── style.css # 设计系统（CSS变量和组件） -├── js/ -│ ├── main.js # 主脚本（面向对象架构） -│ └── i18n.js # 国际化模块（独立功能） -├── package.json # 项目配置 -├── biome.json # 代码格式化配置 -├── project.md # 项目技术文档 -└── README.md # 项目说明文档 -``` - -## 部署说明 - -1. **静态文件部署**：无需构建，直接部署 -2. **GitHub Pages**：支持自动部署 -3. **CDN资源**：Tailwind CSS和Google Analytics使用CDN -4. **相对路径**：所有本地资源使用相对路径 - -## 开发指南 - -### 本地开发 -```bash -# 克隆项目 -git clone https://github.com/afx-team/afx-team.github.io.git - -# 安装依赖 -npm install - -# 代码格式化 -npm run format - -# 代码检查 -npm run lint -``` - -### 代码规范 -- 使用Biome进行代码格式化 -- 遵循语义化HTML原则 -- 保持CSS变量的一致性 -- JavaScript使用ES6+语法 - -## 设计提示词 - -### 核心要求 -- 简洁优雅的设计，参考报纸排版风格 -- 注重可读性和专业性 -- 完整的多语言支持 -- 无障碍设计和响应式布局 -- 模块化的代码架构 - -### 布局要求 -- 部门简介全宽显示在顶部 -- 三栏布局：左栏（动态+博客）、中栏（产品）、右栏（招聘+文化+关注） -- 响应式设计，移动端单栏布局 -- 标准化的间距和组件 - -### 内容要求 -- 部门名称：支付宝体验技术部 -- 部门使命：引领体验科技，驱动数字生活 -- 部门文化：简单、自由、有爱的核心价值观 -- 工作地点：杭州、上海、成都、北京 -- 开源产品：8个产品的详细介绍 -- 社交媒体：B站、知乎、掘金、公众号、GitHub - -### 技术特点 -- 原生 HTML5 + CSS3 + JavaScript ES6+ -- Tailwind CSS + 自定义设计系统 -- 模块化JavaScript架构 -- 完整的无障碍支持 -- Google Analytics集成 - ---- - -*本项目采用内容优先的设计理念，致力于为支付宝体验技术部提供一个专业、简洁、信息丰富的展示平台。* -*所有设计都严格遵循可访问性和用户体验原则，确保页面的专业性和可用性。* \ No newline at end of file From 7fef542137ccd5c849f26001a0204df2f0c9e85c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 1 Jul 2026 11:44:20 +0000 Subject: [PATCH 2/2] =?UTF-8?q?chore:=20rename=20=E5=BC=80=E6=BA=90?= =?UTF-8?q?=E4=BA=A7=E5=93=81=20to=20=E5=BC=80=E6=BA=90=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=20and=20fix=20related=20terminology?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 2 +- index.html | 6 +- project.md | 166 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 170 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index f8c2c39..8fd0369 100644 --- a/css/style.css +++ b/css/style.css @@ -482,7 +482,7 @@ hr { } } -/* ===== 开源产品 Star 徽章 ===== */ +/* ===== 开源项目 Star 徽章 ===== */ .repo-stars { margin-left: var(--spacing-sm); font-weight: 500; diff --git a/index.html b/index.html index e6ade52..bc1498d 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + @@ -310,8 +310,8 @@

-

- 开源产品 +

+ 开源项目

diff --git a/project.md b/project.md index e69de29..56dfc13 100644 --- a/project.md +++ b/project.md @@ -0,0 +1,166 @@ +# AFX Team 官方网站 - 支付宝体验技术部 + +## 项目概述 + +这是支付宝体验技术部的官方网站，采用简洁优雅的设计风格，参考报纸排版美学，强调内容优先的设计理念。网站支持中英文双语切换，具备完整的无障碍功能和响应式设计。 + +## 技术栈 + +- **前端框架**：原生 HTML5 + CSS3 + JavaScript ES6+ +- **CSS 框架**：Tailwind CSS (CDN) + 自定义设计系统 +- **构建工具**：Biome (代码格式化和检查) +- **字体**：系统默认衬线字体 (serif) +- **分析工具**：Google Analytics 4 + +## 设计系统 + +### 核心设计原则 +- **内容优先**：文字为主，注重可读性和专业性 +- **简洁优雅**：参考报纸排版风格，信息密度适中 +- **多语言支持**：完整的中英文切换功能 +- **无障碍设计**：支持键盘导航、屏幕阅读器等辅助技术 +- **响应式布局**：完美适配桌面端和移动端 + +### 设计系统架构 +- **颜色系统**：主色、次色、文本色、边框色等统一变量 +- **字体系统**：serif主字体，monospace等宽字体 +- **间距系统**：xs、sm、md、lg、xl、2xl标准化间距 +- **组件系统**：卡片、标签、引用块等可复用组件 +- **响应式断点**：移动端、平板端、桌面端适配 + +### 视觉特点 +- **字体**：全局使用 serif 衬线字体，提升专业性和可读性 +- **颜色**：黑白灰为主，高对比度，符合报纸风格 +- **布局**：三栏网格布局，响应式设计 +- **间距**：紧凑的报纸风格间距 +- **交互**：简洁的悬停效果和点击反馈 + +## 页面结构 + +### 响应式三栏布局 +1. **左栏**：最新动态 + 博客文章 + - 最新动态：4个技术新闻和更新 + - 博客文章：3篇技术分享文章 + +2. **中栏**：开源项目 + - 8个开源项目展示：Ant Design、Egg.js、qiankun、umi、dumi、cnpm、Galacean Effects、Unieo + +3. **右栏**：招聘信息 + 部门文化 + 关注我们 + - 待招聘岗位：3个职位信息 + - 部门文化：核心价值观详细阐述 + - 关注我们：社交媒体链接和语言切换 + +### 内容模块 +- **部门简介**：部门使命和技术领域（全宽显示） +- **最新动态**：技术新闻和产品更新 +- **博客文章**：技术分享和文章 +- **开源项目**：8个项目的详细介绍和GitHub链接 +- **招聘信息**：岗位链接和工作地点 +- **部门文化**：简单、自由、有爱的核心价值观 +- **社交媒体**：B站、知乎、掘金、公众号、GitHub + +## 核心功能 + +### 多语言支持 +- 完整的中英文内容翻译 +- URL参数控制语言切换 +- 动态更新页面标题和meta标签 +- SEO友好的hreflang标签 + +### 无障碍设计 +- 跳过链接（Skip to main content） +- 键盘导航支持 +- ARIA标签和语义化HTML +- 焦点管理和屏幕阅读器友好 + +### 交互体验 +- 平滑滚动到锚点 +- 悬停效果和点击反馈 +- 外部链接处理 +- 语言切换功能 + +### 数据分析 +- Google Analytics 4集成 +- 访问统计和用户行为分析 +- 多语言版本访问分析 + +## 项目文件 + +``` +afx-team.github.io/ +├── index.html # 主页面（语义化HTML结构） +├── css/ +│ └── style.css # 设计系统（CSS变量和组件） +├── js/ +│ ├── main.js # 主脚本（面向对象架构） +│ └── i18n.js # 国际化模块（独立功能） +├── package.json # 项目配置 +├── biome.json # 代码格式化配置 +├── project.md # 项目技术文档 +└── README.md # 项目说明文档 +``` + +## 部署说明 + +1. **静态文件部署**：无需构建，直接部署 +2. **GitHub Pages**：支持自动部署 +3. **CDN资源**：Tailwind CSS和Google Analytics使用CDN +4. **相对路径**：所有本地资源使用相对路径 + +## 开发指南 + +### 本地开发 +```bash +# 克隆项目 +git clone https://github.com/afx-team/afx-team.github.io.git + +# 安装依赖 +npm install + +# 代码格式化 +npm run format + +# 代码检查 +npm run lint +``` + +### 代码规范 +- 使用Biome进行代码格式化 +- 遵循语义化HTML原则 +- 保持CSS变量的一致性 +- JavaScript使用ES6+语法 + +## 设计提示词 + +### 核心要求 +- 简洁优雅的设计，参考报纸排版风格 +- 注重可读性和专业性 +- 完整的多语言支持 +- 无障碍设计和响应式布局 +- 模块化的代码架构 + +### 布局要求 +- 部门简介全宽显示在顶部 +- 三栏布局：左栏（动态+博客）、中栏（产品）、右栏（招聘+文化+关注） +- 响应式设计，移动端单栏布局 +- 标准化的间距和组件 + +### 内容要求 +- 部门名称：支付宝体验技术部 +- 部门使命：引领体验科技，驱动数字生活 +- 部门文化：简单、自由、有爱的核心价值观 +- 工作地点：杭州、上海、成都、北京 +- 开源项目：8个项目的详细介绍 +- 社交媒体：B站、知乎、掘金、公众号、GitHub + +### 技术特点 +- 原生 HTML5 + CSS3 + JavaScript ES6+ +- Tailwind CSS + 自定义设计系统 +- 模块化JavaScript架构 +- 完整的无障碍支持 +- Google Analytics集成 + +--- + +*本项目采用内容优先的设计理念，致力于为支付宝体验技术部提供一个专业、简洁、信息丰富的展示平台。* +*所有设计都严格遵循可访问性和用户体验原则，确保页面的专业性和可用性。* \ No newline at end of file