# Showcase CMS

展示网站模板集合 - 快速构建专业的静态展示网站或高交互动态网站。

## opencode 使用插件skill 

```json
{
  "plugin"
}
```
---

## 模板类型对比

| 特性 | 展示型模板(astro) | 互动型模板(TanStack Router) |
|------|-----------|-----------|
| **核心定位** | 信息展示为主 | 用户交互为主 |
| **渲染模式** | 静态生成 (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
```

---

## 互动型模板 (TanStack Router)

适用于：以用户交互为主的网站，需要登录、动态内容、在线交易等功能。

### 适用场景

- 电商平台、B2B商城
- 门户网站、内容社区
- 会员制网站、SaaS产品
- 在线教育、培训平台
- 需要后台管理的各类网站

### 核心特点

1. **企业级架构**
   - TanStack Router 路由系统（基于 React Router）
   - 全类型安全的路由系统
   - 完整的后台管理系统集成
   - 多语言 i18n 支持

2. **完整业务支持**
   - 用户注册/登录
   - 产品目录管理
   - 新闻发布系统
   - 在线询盘/表单
   - 会员中心

3. **灵活扩展**
   - 支持多种 CMS (Strapi, Contentful, Sanity)
   - API 路由自动生成
   - 组件库按需引入
   - 微前端集成能力

### 功能模块

| 模块 | 功能点 |
|------|--------|
| 首页 | Hero、核心数据、客户Logo、订阅 |
| 关于我们 | 公司历程、团队介绍、资质认证、办公环境 |
| 产品中心 | 产品分类、详情、对比、规格参数、购物车 |
| 解决方案 | 行业方案、定制服务、成功案例 |
| 新闻动态 | 新闻列表、分类、RSS订阅、媒体资源 |
| 成功案例 | 案例详情、客户评价、Logo墙 |
| 服务支持 | 知识库、FAQ、下载中心、在线客服 |
| 人才招聘 | 职位列表、简历投递、校园招聘 |
| 联系我们 | 表单、地图、客服系统、多分支机构 |
| 合作伙伴 | 合作伙伴门户、渠道政策、专属登录 |
| 会员中心 | 账户管理、订单历史、收藏、消息通知 |
| 在线商城 | 商品管理、支付集成、物流查询、退换货 |
| 投资者关系 | 公告、财报、治理结构（上市公司） |
| 用户系统 | 注册登录、权限管理、OAuth认证 |
| CMS后台 | 内容管理、产品管理、媒体管理、统计分析 |
| 双语支持 | 语言切换、翻译管理、SEO本地化 |

### 技术栈

```yaml
框架: TanStack Router + React
UI 库: React / TailwindCSS / Shadcn UI
状态管理: Zustand / TanStack Query
表单: React Hook Form + Zod
认证: Auth.js / Clerk
CMS: Strapi / Contentful / Sanity (可选)
数据库: PostgreSQL / MySQL (可选)
部署: Vercel / AWS / Docker
```

### 目录结构

```
interactive-website/
├── src/
│   ├── routes/         # TanStack Router 路由配置
│   ├── components/     # 可复用组件
│   ├── lib/            # 工具函数和配置
│   ├── hooks/          # 自定义 Hooks
│   ├── types/          # TypeScript 类型
│   ├── services/       # API 服务层
│   └── store/          # 状态管理
├── public/             # 静态资源
├── vite.config.ts      # Vite 配置文件
└── package.json
```

---

## 共享组件库 (待开发)

两个模板共享同一套组件库，保证视觉一致性：

```
packages/ui/
├── Button/             # 按钮组件
├── Card/               # 卡片组件
├── Modal/              # 弹窗组件
├── Form/               # 表单组件
├── Navigation/         # 导航组件
├── Footer/             # 页脚组件
├── Input/              # 输入框组件
├── Select/             # 选择器组件
├── Table/              # 表格组件
├── Pagination/         # 分页组件
├── Carousel/           # 轮播组件
├── Dropdown/           # 下拉菜单
├── Toast/              # 提示组件
└── Skeleton/           # 骨架屏组件
```

---

## 如何选择

```
需要选择展示型还是互动型？
├── 内容是否主要是静态信息展示？
│   ├── 是 → 选择 Astro 展示型模板
│   └── 否 → 继续
├── 是否需要用户登录注册？
│   ├── 是 → 选择 TanStack Router 互动型模板
│   └── 否 → 继续
├── 是否需要在线交易/支付？
│   ├── 是 → 选择 TanStack Router 互动型模板
│   └── 否 → 可能只需要展示型
└── 是否需要复杂的动态交互功能？
    ├── 是 → 选择 TanStack Router 互动型模板
    └── 否 → 选择 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
```

### 互动型模板 (TanStack Router)

```bash
# 克隆模板
git clone https://github.com/your-org/showcase-cms
cd showcase-cms/templates/interactive-website

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build
```

---

## 文档链接

- [展示型模板功能拆分](docs/website-features-breakdown.md)
- [互动型模板功能拆分](docs/enterprise-website-features.md)

---

## 贡献指南

欢迎贡献代码或提出建议。请先阅读贡献指南。

---

## 许可证

MIT License