skillpod/frontend-starter-skill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initialize pnpm workspace and add app structure

Browse Source 
- Created pnpm workspace configuration in `pnpm-workspace.yaml`.
- Implemented basic app setup in `src/app.ts` using `@kevisual/router`.
- Generated documentation files in `src/generated/docs.ts` for showcase CMS templates.
- Added inline script to read and compile markdown files into TypeScript constants in `src/inline.ts`.
- Set up main application entry point in `src/main.ts` to integrate routing and plugins.
- Established routing structure in `src/routes/index.ts` and `src/routes/md.ts` for handling markdown-related tasks.
- Implemented a route for initializing web todo tasks with dynamic content generation based on selected template type.
This commit is contained in:
熊潇
2026-01-20 22:54:40 +08:00
commit 7a99b69887
19 changed files with 6306 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
.cnb.yml Normal file
View File

@@ -0,0 +1,44 @@
# .cnb.yml
include:
- https://cnb.cool/kevisual/cnb/-/blob/main/.cnb/template.yml
.common_env: &common_env
env:
TO_REPO: kevisual/template-docs
TO_URL: git.xiongxiao.me
imports:
- https://cnb.cool/kevisual/env/-/blob/main/.env.development
$:
vscode:
- docker:
image: docker.cnb.cool/kevisual/dev-env:latest
services:
- vscode
- docker
imports: !reference [.common_env, imports]
# 开发环境启动后会执行的任务
# stages:
# - name: pnpm install
# script: pnpm install
stages: !reference [.dev_tempalte, stages]
.common_sync_to_gitea: &common_sync_to_gitea
- <<: *common_env
services: !reference [.common_sync_to_gitea_template, services]
stages: !reference [.common_sync_to_gitea_template, stages]
.common_sync_from_gitea: &common_sync_from_gitea
- <<: *common_env
services: !reference [.common_sync_from_gitea_template, services]
stages: !reference [.common_sync_from_gitea_template, stages]
main:
web_trigger_sync_to_gitea:
- <<: *common_sync_to_gitea
web_trigger_sync_from_gitea:
- <<: *common_sync_from_gitea
api_trigger_sync_to_gitea:
- <<: *common_sync_to_gitea
api_trigger_sync_from_gitea:
- <<: *common_sync_from_gitea

7
.gitignore vendored Normal file
View File

@@ -0,0 +1,7 @@
node_modules
.pnpm-store
cache-file
dist

6
.opencode/plugin/agent.ts Normal file
View File

@@ -0,0 +1,6 @@
import { AgentPlugin } from '@kevisual/cli';
import { docsAgentPlugin } from '../../src/main.ts'
export {
AgentPlugin,
docsAgentPlugin
}

1133
.opencode/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

280
README.md Normal file
View File

@@ -0,0 +1,280 @@
# Showcase CMS
展示网站模板集合 - 快速构建专业的静态展示网站或高交互动态网站。
---
## 模板类型对比
| 特性 | 展示型模板(astro) | 互动型模板(next.js) |
|------|-----------|-----------|
| **核心定位** | 信息展示为主 | 用户交互为主 |
| **渲染模式** | 静态生成 (SSG) | 混合渲染 (SSR/SSG/ISR) |
| **内容管理** | Markdown/MDX 文件 | Headless CMS + API |
| **用户系统** | 无 | 多用户 + 权限管理 |
| **交互程度** | 低（浏览为主） | 高（登录、评论、购买） |
| **性能表现** | 极致轻量、快速加载 | 高并发、动态内容 |
| **适用场景** | 企业官网、作品集、博客、文档 | 电商、门户、社区、后台系统 |
| **学习曲线** | 简单 | 中等 |
| **部署难度** | 简单 | 中等 |
| **SEO** | 优秀 | 优秀 |
---
## 展示型模板 (Astro)
适用于：以信息展示为主的网站，强调性能、SEO和内容管理便捷性。
### 适用场景
- 企业官网（纯信息展示）
- 个人作品集、摄影集、设计展示
- 技术博客、文档站点、知识库
- 活动页面、 Landing Page
- 新闻资讯、媒体发布
### 核心特点
1. **极简架构**
- 纯静态生成，零运行时依赖
- 支持 Markdown/MDX 内容创作
- 文件即路由，目录结构清晰
2. **高性能**
- 首屏加载 < 100ms
- 自动图片优化
- 按需加载 JavaScript
- 支持边缘部署 (Vercel Edge, Cloudflare Pages)
3. **开箱即用**
- 内置语法高亮
- 主题切换 (亮色/暗色)
- 响应式图片
- SEO 元标签自动生成
### 功能模块
| 模块 | 功能点 |
|------|--------|
| 首页 | Hero区域、核心数据、客户Logo、订阅 |
| 关于我们 | 公司简介、发展历程、团队介绍、资质认证 |
| 产品/服务 | 产品分类、详情介绍、规格参数 |
| 成功案例 | 案例展示、客户评价、Logo墙 |
| 新闻动态 | 新闻列表、分类、RSS订阅 |
| 人才招聘 | 职位列表、福利介绍、简历投递 |
| 联系我们 | 联系信息、表单、地图 |
| 博客/文章 | 文章列表、标签分类、阅读时间 |
| 双语支持 | i18n路由、翻译文件管理 |
### 技术栈
```yaml
框架: Astro 4.x
UI 库: 原生 CSS / TailwindCSS (可选)
内容: Markdown / MDX
搜索: Pagefind (本地搜索)
部署: Vercel / Netlify / Cloudflare Pages
```
### 目录结构
```
astro-website/
├── src/
│ ├── components/ # 可复用组件
│ ├── layouts/ # 页面布局
│ ├── pages/ # 页面路由
│ ├── content/ # Markdown/MDX 内容
│ ├── styles/ # 全局样式
│ └── utils/ # 工具函数
├── public/ # 静态资源
├── astro.config.mjs # 配置文件
└── package.json
```
---
## 互动型模板 (Next.js)
适用于：以用户交互为主的网站，需要登录、动态内容、在线交易等功能。
### 适用场景
- 电商平台、B2B商城
- 门户网站、内容社区
- 会员制网站、SaaS产品
- 在线教育、培训平台
- 需要后台管理的各类网站
### 核心特点
1. **企业级架构**
- App Router 路由系统
- Server Components
- 完整的后台管理系统集成
- 多语言 i18n 支持
2. **完整业务支持**
- 用户注册/登录
- 产品目录管理
- 新闻发布系统
- 在线询盘/表单
- 会员中心
3. **灵活扩展**
- 支持多种 CMS (Strapi, Contentful, Sanity)
- API 路由自动生成
- 组件库按需引入
- 微前端集成能力
### 功能模块
| 模块 | 功能点 |
|------|--------|
| 首页 | Hero、核心数据、客户Logo、订阅 |
| 关于我们 | 公司历程、团队介绍、资质认证、办公环境 |
| 产品中心 | 产品分类、详情、对比、规格参数、购物车 |
| 解决方案 | 行业方案、定制服务、成功案例 |
| 新闻动态 | 新闻列表、分类、RSS订阅、媒体资源 |
| 成功案例 | 案例详情、客户评价、Logo墙 |
| 服务支持 | 知识库、FAQ、下载中心、在线客服 |
| 人才招聘 | 职位列表、简历投递、校园招聘 |
| 联系我们 | 表单、地图、客服系统、多分支机构 |
| 合作伙伴 | 合作伙伴门户、渠道政策、专属登录 |
| 会员中心 | 账户管理、订单历史、收藏、消息通知 |
| 在线商城 | 商品管理、支付集成、物流查询、退换货 |
| 投资者关系 | 公告、财报、治理结构（上市公司） |
| 用户系统 | 注册登录、权限管理、OAuth认证 |
| CMS后台 | 内容管理、产品管理、媒体管理、统计分析 |
| 双语支持 | 语言切换、翻译管理、SEO本地化 |
### 技术栈
```yaml
框架: Next.js 14+ (App Router)
UI 库: React / TailwindCSS / Shadcn UI
状态管理: Zustand / React Query
表单: React Hook Form + Zod
认证: NextAuth.js / Clerk
CMS: Strapi / Contentful / Sanity (可选)
数据库: PostgreSQL / MySQL (可选)
部署: Vercel / AWS / Docker
```
### 目录结构
```
nextjs-website/
├── src/
│ ├── app/ # App Router 页面
│ ├── components/ # 可复用组件
│ ├── lib/ # 工具函数和配置
│ ├── hooks/ # 自定义 Hooks
│ ├── types/ # TypeScript 类型
│ ├── services/ # API 服务层
│ └── store/ # 状态管理
├── public/ # 静态资源
├── next.config.js # 配置文件
└── package.json
```
---
## 共享组件库 (待开发)
两个模板共享同一套组件库，保证视觉一致性：
```
packages/ui/
├── Button/ # 按钮组件
├── Card/ # 卡片组件
├── Modal/ # 弹窗组件
├── Form/ # 表单组件
├── Navigation/ # 导航组件
├── Footer/ # 页脚组件
├── Input/ # 输入框组件
├── Select/ # 选择器组件
├── Table/ # 表格组件
├── Pagination/ # 分页组件
├── Carousel/ # 轮播组件
├── Dropdown/ # 下拉菜单
├── Toast/ # 提示组件
└── Skeleton/ # 骨架屏组件
```
---
## 如何选择
```
需要选择展示型还是互动型？
├── 内容是否主要是静态信息展示？
│ ├── 是 → 选择 Astro 展示型模板
│ └── 否 → 继续
├── 是否需要用户登录注册？
│ ├── 是 → 选择 Next.js 互动型模板
│ └── 否 → 继续
├── 是否需要在线交易/支付？
│ ├── 是 → 选择 Next.js 互动型模板
│ └── 否 → 可能只需要展示型
└── 是否需要复杂的动态交互功能？
├── 是 → 选择 Next.js 互动型模板
└── 否 → 选择 Astro 展示型模板
```
---
## 快速开始
### 展示型模板 (Astro)
```bash
# 克隆模板
git clone https://github.com/your-org/showcase-cms
cd showcase-cms/templates/astro-website
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
```
### 互动型模板 (Next.js)
```bash
# 克隆模板
git clone https://github.com/your-org/showcase-cms
cd showcase-cms/templates/nextjs-website
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建生产版本
npm run build
```
---
## 文档链接
- [展示型模板功能拆分](docs/website-features-breakdown.md)
- [互动型模板功能拆分](docs/enterprise-website-features.md)
---
## 贡献指南
欢迎贡献代码或提出建议。请先阅读贡献指南。
---
## 许可证
MIT License

175
TODO.md Normal file
View File

@@ -0,0 +1,175 @@
# 个人展示网站开发任务清单 (Astro)
## 技术栈
- **框架**: Astro
- **样式**: Tailwind CSS
- **语言**: TypeScript
---
## 第一章：首页 (Home)
- [ ] 1.1 创建 Hero 区域组件
- [ ] 大标题（姓名/品牌）
- [ ] 副标题（职业定位）
- [ ] 简介文字
- [ ] CTA 按钮（查看作品、联系我）
- [ ] 背景视觉元素
- [ ] 1.2 创建快速概览区域
- [ ] 个人头像组件
- [ ] 核心技能标签
- [ ] 社交媒体链接
---
## 第二章：关于我 (About Me)
- [ ] 2.1 创建个人介绍页面
- [ ] 详细个人简介
- [ ] 教育背景
- [ ] 工作经历
- [ ] 个人故事/理念
- [ ] 2.2 技能展示组件
- [ ] 技术栈列表
- [ ] 熟练程度可视化
- [ ] 工具使用展示
- [ ] 2.3 兴趣爱好区域
- [ ] 个人爱好展示
- [ ] 其他技能
---
## 第三章：项目展示 (Portfolio/Projects)
- [ ] 3.1 项目列表页面
- [ ] 项目卡片组件（缩略图、标题、描述）
- [ ] 技术栈标签
- [ ] 链接按钮（详情、演示、源码）
- [ ] 3.2 项目分类功能
- [ ] 按类型分类
- [ ] 按技术栈筛选
- [ ] 按时间排序
- [ ] 3.3 项目详情页
- [ ] 项目背景
- [ ] 功能特性
- [ ] 技术实现
- [ ] 截图/视频展示
- [ ] 挑战与解决方案
- [ ] 项目链接
---
## 第四章：博客/文章 (Blog)
- [ ] 4.1 文章列表页面
- [ ] 文章卡片组件
- [ ] 发表日期、阅读时间
- [ ] 摘要、分类标签
- [ ] 4.2 文章详情页
- [ ] Markdown 渲染
- [ ] 目录导航
- [ ] 代码高亮
- [ ] 相关文章推荐
- [ ] 4.3 分类系统
- [ ] 按主题分类
- [ ] 按技术分类
---
## 第五章：联系信息 (Contact)
- [ ] 5.1 联系表单组件
- [ ] 姓名、邮箱输入
- [ ] 主题选择
- [ ] 消息内容
- [ ] 提交按钮
- [ ] 5.2 联系信息展示
- [ ] 邮箱地址
- [ ] 社交媒体链接
- [ ] 地理位置
- [ ] 可用时间
---
## 第六章：导航系统
- [ ] 6.1 主导航组件
- [ ] 导航栏（首页、关于我、项目、博客、联系）
- [ ] 移动端汉堡菜单
- [ ] 6.2 辅助导航
- [ ] 返回顶部按钮
- [ ] 面包屑导航
- [ ] 页脚导航
---
## 第七章：页脚 (Footer)
- [ ] 7.1 版权信息
- [ ] 7.2 社交链接（GitHub、LinkedIn、Twitter）
- [ ] 7.3 快速链接（隐私政策、网站地图）
---
## 第八章：通用组件
- [ ] 8.1 按钮组件（主要、次要、图标）
- [ ] 8.2 卡片组件（项目、技能、文章）
- [ ] 8.3 模态框组件（图片预览、视频播放）
---
## 第九章：响应式设计
- [ ] 9.1 桌面端适配（1280px+）
- [ ] 9.2 平板端适配（768px - 1024px）
- [ ] 9.3 移动端适配（375px - 480px）
---
## 第十章：交互效果
- [ ] 10.1 页面过渡动画
- [ ] 10.2 悬停效果（按钮、卡片、图片）
- [ ] 10.3 滚动效果（触发动画、视差、固定导航）
---
## 第十一章：SEO与性能
- [ ] 11.1 SEO 优化
- [ ] Meta 标签
- [ ] Open Graph
- [ ] Sitemap
- [ ] Robots.txt
- [ ] 11.2 性能优化
- [ ] 图片懒加载
- [ ] 代码分割
- [ ] 缓存策略
---
## 第十二章：无障碍访问
- [ ] 12.1 键盘导航支持
- [ ] 12.2 屏幕阅读器支持（ARIA 标签、替代文本）
---
## 第十三章：主题与定制
- [ ] 13.1 亮色主题配置
- [ ] 13.2 暗色主题配置
- [ ] 13.3 主题切换功能
---
## 第十四章：双语支持
- [ ] 14.1 语言切换组件
- [ ] 14.2 国际化架构（i18n 配置）
- [ ] 14.3 翻译内容管理
- [ ] 14.4 路由配置（/en/, /zh/）
- [ ] 14.5 浏览器语言检测
- [ ] 14.6 内容管理双语支持
- [ ] 14.7 中英文字体配置

24
bun.config.ts Normal file
View File

@@ -0,0 +1,24 @@
import path from 'node:path';
import pkg from './package.json';
import fs from 'node:fs';
import { execSync } from 'node:child_process';
const w = (p: string) => path.resolve(import.meta.dir, p);
const external: string[] = ["bun"];
await Bun.build({
target: 'node',
format: 'esm',
entrypoints: [w('./src/main.ts')],
outdir: w('./dist'),
naming: {
entry: 'app.js',
},
define: {},
external
});
const cmd = 'dts -i ./src/main.ts -o /app.d.ts';
execSync(cmd, { stdio: 'inherit' });
// Copy package.json to dist

743
docs/enterprise-website-features.md Normal file
View File

@@ -0,0 +1,743 @@
# 企业展示网站功能拆分文档
## 概述
本文档梳理建立企业展示网站的具体功能需求，按章节进行拆分和记录。
---
## 第一章：首页 (Home)
### 1.1 头部区域
- 企业Logo
- 主导航菜单
- 搜索功能
- 语言切换
- 登录/注册入口
### 1.2 Hero 区域
- 核心价值主张 (Value Proposition)
- 企业标语 (Tagline)
- 主要行动按钮 (CTA)
- 背景视频/轮播图
- 客户信任标识（Logo展示）
### 1.3 核心数据展示
- 公司成立年份
- 服务客户数量
- 成功案例数
- 团队规模
### 1.4 服务概览
- 核心业务展示
- 服务特点
- 快速链接卡片
### 1.5 客户评价
- 客户Logo
- 简短评价
- 客户姓名/职位
### 1.6 最新动态
- 最新新闻
- 公司动态
- 行业资讯
### 1.7 订阅区域
- 邮件订阅表单
- 社交媒体链接
---
## 第二章：关于我们 (About Us)
### 2.1 公司简介
- 公司发展历程
- 使命与愿景
- 核心价值观
- 发展里程碑
### 2.2 企业文化
- 企业精神
- 工作氛围
- 团队活动展示
### 2.3 发展历程
- 时间线展示
- 重大事件
- 成长数据
### 2.4 团队介绍
- 管理团队
- 核心成员
- 团队照片墙
- 招聘入口
### 2.5 资质认证
- 营业执照
- 行业资质
- 荣誉证书
- 专利技术
### 2.6 办公环境
- 办公环境照片
- 视频展示
- 360度全景
---
## 第三章：产品与解决方案 (Products & Solutions)
### 3.1 产品分类
- 产品类别导航
- 产品列表
- 产品对比功能
### 3.2 产品详情页
- 产品介绍
- 功能特性
- 规格参数
- 价格信息
- 购买/咨询按钮
### 3.3 解决方案
- 行业解决方案
- 定制化方案
- 成功案例展示
- 方案优势
### 3.4 产品演示
- 视频演示
- 在线试用
- 下载中心（手册、白皮书）
### 3.5 定价方案
- 套餐对比
- 价格表
- FAQ
- 咨询销售
---
## 第四章：成功案例 (Case Studies)
### 4.1 案例列表
- 案例分类筛选
- 案例卡片展示
- 搜索功能
### 4.2 案例详情
- 客户背景
- 面临挑战
- 解决方案
- 实施过程
- 项目成果
- 客户评价
- 相关截图/视频
### 4.3 客户Logo墙
- 行业分类
- Logo展示
- 客户评价引用
### 4.4 客户评价
- 视频评价
- 文字评价
- 评价管理后台
---
## 第五章：服务支持 (Service & Support)
### 5.1 服务类型
- 咨询服务
- 实施服务
- 培训服务
- 运维服务
- 定制开发
### 5.2 售后服务
- 保修政策
- 退换货政策
- 维修服务
- 技术支持
### 5.3 知识库
- 使用手册
- 常见问题 (FAQ)
- 操作视频
- 技术文档
### 5.4 下载中心
- 产品手册
- 软件更新
- 驱动程序
- 技术白皮书
---
## 第六章：新闻与动态 (News & Press)
### 6.1 新闻列表
- 新闻分类（公司动态、行业新闻、产品更新）
- 时间线展示
- 搜索功能
### 6.2 新闻详情
- 正文内容
- 配图/视频
- 分享功能
- 相关文章推荐
### 6.3 新闻订阅
- RSS订阅
- 邮件订阅
- 通知设置
### 6.4 媒体资源
- 新闻稿下载
- 媒体联系
- Logo/素材下载
---
## 第七章：人才招聘 (Careers)
### 7.1 招聘职位
- 职位列表
- 部门分类
- 地点筛选
- 搜索功能
### 7.2 职位详情
- 职位描述
- 任职要求
- 薪资范围
- 工作地点
- 申请按钮
### 7.3 福利待遇
- 薪酬体系
- 员工福利
- 培训发展
- 团建活动
### 7.4 申请流程
- 在线投递
- 简历上传
- 状态追踪
### 7.5 校园招聘
- 招聘行程
- 宣讲会信息
- 实习生项目
---
## 第八章：联系我们 (Contact Us)
### 8.1 联系信息
- 公司地址
- 联系电话
- 客服热线
- 邮箱地址
- 传真号码
### 8.2 在线表单
- 咨询类型选择
- 姓名/公司
- 邮箱/电话
- 消息内容
- 文件上传
- 验证码
### 8.3 地图集成
- 公司位置地图
- 分支机构地图
- 路线规划
### 8.4 分支机构
- 各地办公室列表
- 联系方式
- 地图展示
### 8.5 客服系统
- 在线客服聊天
- 智能客服机器人
- 服务时间显示
### 8.6 社交媒体
- 微信公众号
- 微博
- 抖音
- LinkedIn
---
## 第九章：合作伙伴 (Partners)
### 9.1 合作伙伴类型
- 技术合作伙伴
- 渠道合作伙伴
- 战略合作伙伴
- 供应商
### 9.2 合作计划
- 合作伙伴等级
- 权益说明
- 申请流程
### 9.3 合作伙伴登录
- 专属门户
- 资源下载
- 培训资料
- 业绩查询
### 9.4 渠道政策
- 代理政策
- 分成比例
- 激励计划
---
## 第十章：投资者关系 (Investor Relations)
### 10.1 公司公告
- 重大事项
- 公告发布
- 归档查询
### 10.2 财务信息
- 季度财报
- 年度报告
- 财务数据
### 10.3 投资者服务
- 股票信息
- 投资者日历
- 股东大会
### 10.4 公司治理
- 董事会
- 管理团队
- 规章制度
---
## 第十一章：在线商城/电子商务 (E-commerce)
### 11.1 产品展示
- 商品分类
- 商品列表
- 商品详情
- 库存状态
### 11.2 购物功能
- 购物车
- 订单管理
- 支付集成
- 物流查询
### 11.3 会员系统
- 用户注册/登录
- 会员等级
- 积分系统
- 优惠券
### 11.4 订单管理
- 订单历史
- 订单跟踪
- 退换货
---
## 第十二章：会员中心 (User Center)
### 12.1 账户管理
- 个人资料
- 密码修改
- 账号绑定
### 12.2 消息中心
- 系统通知
- 订单通知
- 消息设置
### 12.3 收藏管理
- 收藏商品
- 收藏文章
### 12.4 订单历史
- 全部订单
- 订单状态
- 订单详情
### 12.5 发票管理
- 发票申请
- 发票历史
---
## 第十三章：导航系统
### 13.1 主导航
- 一级菜单
- 二级下拉菜单
- Mega Menu（大导航菜单）
### 13.2 面包屑导航
- 层级显示
- 返回功能
### 13.3 页内导航
- 锚点导航
- 目录跳转
### 13.4 搜索功能
- 全站搜索
- 智能提示
- 搜索结果页
### 13.5 快捷入口
- 收藏夹
- 历史记录
- 快速链接
---
## 第十四章：页脚 (Footer)
### 14.1 链接区域
- 产品服务
- 解决方案
- 关于我们
- 支持中心
### 14.2 联系信息
- 地址电话
- 服务时间
- 在线客服入口
### 14.3 社交媒体
- 图标链接
- 二维码展示
- 公众号
### 14.4 订阅区域
- 邮件订阅
- 隐私政策
- 使用条款
### 14.5 版权信息
- 版权声明
- ICP备案
- 公安备案
---
## 第十五章：通用组件
### 15.1 按钮
- 主要按钮
- 次要按钮
- 危险按钮
- 禁用状态
- 加载状态
### 15.2 卡片
- 信息卡片
- 产品卡片
- 新闻卡片
- 团队卡片
### 15.3 表单
- 输入框
- 下拉选择
- 复选框
- 文件上传
- 表单验证
### 15.4 弹窗
- 提示弹窗
- 确认弹窗
- 模态框
- 侧边栏
### 15.5 分页
- 页码导航
- 加载更多
- 无限滚动
### 15.6 轮播
- 图片轮播
- 文字轮播
- 卡片轮播
---
## 第十六章：内容管理系统 (CMS)
### 16.1 文章管理
- 新增/编辑/删除
- 分类管理
- 标签管理
- 草稿/发布
- 定时发布
### 16.2 产品管理
- 产品CRUD
- 分类管理
- 属性管理
- 库存管理
- SKU管理
### 16.3 页面管理
- 首页管理
- 自定义页面
- 模板管理
### 16.4 媒体管理
- 图片上传
- 视频管理
- 文件管理
- 图库
### 16.5 用户管理
- 用户列表
- 角色管理
- 权限管理
- 操作日志
### 16.6 数据统计
- 访问统计
- 用户统计
- 内容统计
- 报表导出
---
## 第十七章：响应式设计
### 17.1 断点定义
- 超大屏 (≥1920px)
- 大屏 (≥1440px)
- 中屏 (≥1024px)
- 小屏 (≥768px)
- 超小屏 (<768px)
### 17.2 布局适配
- 栅格系统
- Flex布局
- 百分比布局
### 17.3 组件适配
- 导航菜单（汉堡菜单）
- 表格（横向滚动/折叠）
- 图片（响应式图片）
- 视频（自适应）
---
## 第十八章：交互效果
### 18.1 页面过渡
- 加载动画
- 页面切换
- 骨架屏
### 18.2 悬停效果
- 按钮状态
- 卡片浮起
- 图片缩放
- 颜色变化
### 18.3 滚动效果
- 视差滚动
- 滚动动画
- 导航栏固定
- 返回顶部
### 18.4 交互动效
- 弹跳效果
- 渐变效果
- 旋转效果
- 过渡动画
---
## 第十九章：SEO与性能
### 19.1 SEO优化
- Meta标签
- Open Graph
- JSON-LD结构化数据
- Sitemap
- Robots.txt
- Canonical标签
### 19.2 性能优化
- 图片压缩
- 懒加载
- 代码分割
- Tree Shaking
- Gzip/Brotli压缩
- CDN加速
### 19.3 缓存策略
- 浏览器缓存
- Service Worker
- 缓存策略配置
---
## 第二十章：双语支持 (Bilingual Support)
### 20.1 语言切换
- 语言切换器
- 状态持久化
- 当前语言指示
### 20.2 国际化架构
- 翻译文件管理
- 日期/时间格式化
- 数字/货币格式化
### 20.3 路由配置
- 语言前缀URL
- 默认语言设置
- 域名绑定（可选）
### 20.4 内容管理
- CMS多语言
- 翻译工作流
- 翻译审核
### 20.5 SEO本地化
- 多语言meta
- hreflang标签
- 站点地图多语言
---
## 第二十一章：无障碍访问
### 21.1 键盘导航
- Tab顺序
- 快捷键
- 焦点指示
### 21.2 屏幕阅读器
- ARIA标签
- 替代文本
- 语义化HTML
### 21.3 视觉无障碍
- 颜色对比度
- 可调节字体
- 不依赖颜色传递信息
### 21.4 认知无障碍
- 清晰导航
- 简单语言
- 错误提示
---
## 第二十二章：安全特性
### 22.1 身份认证
- 登录/注册
- 忘记密码
- 双重验证
- OAuth登录
### 22.2 数据安全
- HTTPS
- 数据加密
- CSRF防护
- XSS防护
- SQL注入防护
### 22.3 访问控制
- 角色权限
- 访问日志
- IP限制
### 22.4 业务安全
- 验证码
- 频率限制
- 敏感操作确认
---
## 第二十三章：第三方集成
### 23.1 分析统计
- Google Analytics
- 百度统计
- 其他分析工具
### 23.2 客服系统
- 智齿客服
- Udesk
### 23.3 社交分享
- 分享组件
- 登录组件
- 点赞组件
### 23.4 支付集成
- 支付宝
- 微信支付
- 银联支付
- PayPal
- Stripe
### 23.5 地图服务
- 高德地图
- 百度地图
- Google Maps
### 23.6 邮件服务
- SendCloud
- 阿里云邮件
- 邮件模板
---
## 第二十四章：监控与运维
### 24.1 监控告警
- 服务器监控
- 应用监控
- 日志收集
- 告警通知
### 24.2 日志管理
- 访问日志
- 错误日志
- 操作日志
### 24.3 备份恢复
- 数据库备份
- 文件备份
- 灾难恢复
### 24.4 部署发布
- CI/CD流程
- 版本管理
- 回滚机制
---
## 总结
本文档涵盖了建立企业展示网站的所有核心功能模块。企业网站相比个人网站，更强调：
- 品牌专业性展示
- 多层级产品/服务展示
- 客户信任背书
- 商业转化（询盘、订单）
- 多用户系统
- 内容管理便捷性
- SEO与营销支持
后续可根据具体行业和企业规模进行调整和扩展。

280
docs/website-features-breakdown.md Normal file
View File

@@ -0,0 +1,280 @@
# 个人展示网站功能拆分文档
## 概述
本文档梳理建立个人展示网站或者作品集的具体功能需求，按章节进行拆分和记录。
---
## 第一章：首页 (Home)
### 1.1 Hero 区域
- 大标题（个人姓名/品牌标识）
- 副标题（职业/角色定位）
- 简介文字（一句话概括）
- CTA按钮（查看作品、联系我）
- 背景视觉元素（图片/渐变/动画）
### 1.2 快速概览
- 个人照片/头像
- 核心技能标签
- 社交媒体链接
---
## 第二章：关于我 (About Me)
### 2.1 个人介绍
- 详细个人简介
- 教育背景
- 工作经历
- 个人故事/理念
### 2.2 技能展示
- 技术栈列表
- 熟练程度可视化
- 工具使用
### 2.3 兴趣爱好
- 个人爱好展示
- 其他技能
---
## 第三章：项目展示 (Portfolio/Projects)
### 3.1 项目列表
- 项目缩略图
- 项目标题
- 项目描述
- 技术栈标签
- 链接按钮（查看详情、演示、源码）
### 3.2 项目分类
- 按类型分类
- 按技术栈筛选
- 按时间排序
### 3.3 项目详情页
- 项目背景
- 功能特性
- 技术实现
- 截图/视频
- 面临的挑战与解决方案
- 项目链接
---
## 第四章：博客/文章 (Blog)
### 4.1 文章列表
- 文章标题
- 发表日期
- 阅读时间
- 摘要
- 分类标签
### 4.2 文章详情
- 文章正文
- 目录导航
- 代码高亮
- 相关文章推荐
### 4.3 分类系统
- 按主题分类
- 按技术分类
---
## 第五章：联系信息 (Contact)
### 5.1 联系表单
- 姓名输入
- 邮箱输入
- 主题选择
- 消息内容
- 提交按钮
### 5.2 联系信息
- 邮箱地址
- 社交媒体链接
- 地理位置
- 可用时间
---
## 第六章：导航系统
### 6.1 主导航
- 首页
- 关于我
- 项目展示
- 博客
- 联系
### 6.2 辅助导航
- 返回顶部按钮
- 面包屑导航
- 页脚导航
---
## 第七章：页脚 (Footer)
### 7.1 版权信息
- 年份
- 姓名/品牌
### 7.2 社交链接
- GitHub
- LinkedIn
- Twitter
- 其他平台
### 7.3 快速链接
- 隐私政策
- 网站地图
---
## 第八章：通用组件
### 8.1 按钮
- 主要按钮
- 次要按钮
- 图标按钮
### 8.2 卡片
- 项目卡片
- 技能卡片
- 文章卡片
### 8.3 模态框
- 图片预览
- 视频播放
- 联系表单
---
## 第九章：响应式设计
### 9.1 桌面端 (Desktop)
- 1920px+
- 1440px
- 1280px
### 9.2 平板端 (Tablet)
- 1024px
- 768px
### 9.3 移动端 (Mobile)
- 480px
- 375px
---
## 第十章：交互效果
### 10.1 页面过渡
- 加载动画
- 页面切换效果
### 10.2 悬停效果
- 按钮悬停
- 卡片悬停
- 图片缩放
### 10.3 滚动效果
- 滚动触发动画
- 视差效果
- 固定导航
---
## 第十一章：SEO与性能
### 11.1 SEO优化
- Meta标签
- Open Graph
- Sitemap
- Robots.txt
### 11.2 性能优化
- 图片懒加载
- 代码分割
- 缓存策略
---
## 第十二章：无障碍访问
### 12.1 键盘导航
- Tab键导航
- 快捷键支持
### 12.2 屏幕阅读器
- ARIA标签
- 替代文本
---
## 第十三章：主题与定制
### 13.1 亮色主题
- 配色方案
- 字体选择
### 13.2 暗色主题
- 配色方案
- 字体选择
### 13.3 主题切换
- 自动切换
- 手动切换
---
## 第十四章：双语支持 (Bilingual Support)
### 14.1 语言切换
- 语言切换按钮/开关
- 语言状态持久化（保存用户选择）
- 当前语言指示器
### 14.2 国际化架构
- 国际化配置文件（JSON/YAML）
- 文本内容管理
- 日期/时间格式化
- 数字格式化
- 复数形式处理
### 14.3 翻译内容
- 静态文本翻译
- 动态内容翻译
- SEO翻译（meta、og:title、og:description）
- 图片ALT文本翻译
### 14.4 路由配置
- 语言前缀URL（如 /en/, /zh/）
- 默认语言设置
- 语言切换时URL更新
### 14.5 语言检测
- 浏览器语言偏好检测
- 首次访问自动跳转
- 手动覆盖选项
### 14.6 内容管理
- CMS多语言支持
- 文章/博客双语版本管理
- 项目描述双语支持
### 14.7 字体与排版
- 中文字体配置
- 英文字体配置
- 多语言混排优化
---
## 总结
本文档涵盖了建立个人展示网站的所有核心功能模块。后续可根据实际需求进行调整和扩展。

5
opencode.json Normal file
View File

@@ -0,0 +1,5 @@
{
"$schema": "https://opencode.ai/config.json",
"plugin": [
]
}

29
package.json Normal file
View File

@@ -0,0 +1,29 @@
{
"name": "@kevisual/frontend-starter-skill",
"version": "0.0.1",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "abearxiong <xiongxiao@xiongxiao.me> (https://www.xiongxiao.me)",
"license": "MIT",
"packageManager": "pnpm@10.28.1",
"type": "module",
"devDependencies": {
"@kevisual/context": "^0.0.4",
"@kevisual/js-filter": "^0.0.5",
"@kevisual/router": "^0.0.58",
"@kevisual/types": "^0.0.11",
"@opencode-ai/plugin": "1.1.26",
"@types/bun": "^1.3.6",
"@types/node": "^25.0.9"
},
"publishConfig": {
"access": "public"
},
"exports": {
".": "./dist/app.js"
}
}

2171
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
pnpm-workspace.yaml Normal file
View File

@@ -0,0 +1,2 @@
packages:
- '.opencode'

3
src/app.ts Normal file
View File

@@ -0,0 +1,3 @@
import { App } from '@kevisual/router'
import { useContextKey } from '@kevisual/context'
export const app = useContextKey('app', () => new App());

1307
src/generated/docs.ts Normal file
View File

File diff suppressed because it is too large Load Diff

46
src/inline.ts Normal file
View File

@@ -0,0 +1,46 @@
import { BunFile } from 'bun';
import path from 'path';
import fs from 'fs';
async function inlineMarkdownFiles() {
// 读取所有 MD 文件
const files = [
// { path: '../README.md', name: 'readme' },
// { path: '../docs/api.md', name: 'apiDoc' },
];
const readme = path.join(import.meta.dir, '..', 'README.md');
files.push({ path: readme, name: 'readme' });
// list docs files dynamically if needed
const rootDir = path.join(import.meta.dir, '..', 'docs');
const dirEntries = fs.readdirSync(rootDir, { withFileTypes: true });
for (const entry of dirEntries) {
const filename = 'name' in entry ? entry.name : entry;
if (filename.endsWith('.md')) {
const name = path.basename(filename, '.md').replace(/[^a-zA-Z0-9_]/g, '_');
files.push({ path: path.join(rootDir, filename), name });
}
}
let generatedCode = '// Generated by build script\n';
for (const file of files) {
try {
const content = await Bun.file(file.path).text();
// 转义模板字符串中的特殊字符
const escapedContent = content
.replace(/\\/g, '\\\\')
.replace(/`/g, '\\`')
.replace(/\${/g, '\\${');
generatedCode += `export const ${file.name} = \`${escapedContent}\`;\n`;
} catch (error) {
console.warn(`Failed to read ${file.path}:`, error);
generatedCode += `export const ${file.name} = '';\n`;
}
}
// 写入生成的文件
await Bun.write('./src/generated/docs.ts', generatedCode);
}
await inlineMarkdownFiles();

9
src/main.ts Normal file
View File

@@ -0,0 +1,9 @@
import { app } from './app.ts';
import { createRouterAgentPluginFn } from '@kevisual/router/src/opencode.ts'
import { Plugin } from '@opencode-ai/plugin'
import './routes/index.ts';
export const docsAgentPlugin: Plugin = createRouterAgentPluginFn({
// @ts-ignore
router: app.router,
});

1
src/routes/index.ts Normal file
View File

@@ -0,0 +1 @@
import './md.ts';

41
src/routes/md.ts Normal file
View File

@@ -0,0 +1,41 @@
import * as docs from '../generated/docs.ts';
import { app } from '../app.ts'
import path from 'path';
import fs from 'fs';
import { createSkill, tool } from '@kevisual/router';
// 初始化init-web-todo 任务, 使用astro
app.route({
path: 'web-todo',
key: 'init',
description: '初始化需要做的任务',
metadata: {
tags: ['opencode'],
...createSkill({
skill: 'init-web-todo',
title: '初始化 Web Todo 项目',
summary: '初始化需要做的任务',
args: {
type: tool.schema.string().describe('初始化类型, astro 或者 nextjs'),
force: tool.schema.boolean().optional().describe('是否强制覆盖已存在的 TODO.md 文件'),
}
})
}
}).define(async (ctx) => {
const type = ctx.query?.type || 'astro';
const force = ctx.query?.force ?? false;
const todo = path.join(process.cwd(), 'TODO.md');
if (fs.existsSync(todo)) {
if (!force) {
ctx.body = {
content: 'TODO.md 文件已经存在。如需覆盖，请使用 --force 参数。',
}
return;
}
}
const template = type === 'nextjs' ? docs.enterprise_website_features : docs.website_features_breakdown;
ctx.body = {
content: `根据下面的文档，生成一个任务清单，写入到TODO.md 文件中, 使用技术:${type}:\n\n${template}`,
}
}).addTo(app);