feat: add getting-started docs — create-account, plans-and-credits, welcome sections

wang1212 · claude · wang1212 · commit 02f4358de268 · 2026-05-13T14:18:14.000+08:00
Add create-account.mdx and plans-and-credits.mdx to getting-started.
Expand welcome.mdx with "适合谁使用", "你可以构建什么", and
"WeaveFox 如何融入你的工作流" sections.

Co-Authored-By: Claude Opus 4.7 &lt;noreply@anthropic.com&gt;
diff --git a/AGENTS.md b/AGENTS.md
@@ -2,7 +2,7 @@
 
 ## 项目概览
 
-WeaveFox 文档站点，基于 Docusaurus 3 构建。独立于主仓库 pnpm workspace，拥有自己的依赖管理。
+WeaveFox 文档站点，基于 Docusaurus 3 构建。
 
 ## 项目结构
 
@@ -21,12 +21,6 @@ docs/
 └── .npmrc                 # 使用 npm 官方 registry
 ```
 
-## 注意事项
-
-- 本项目**不在**主仓库 pnpm workspace 内，依赖需在 `docs/` 目录下单独安装
-- `.npmrc` 使用官方 registry（`https://registry.npmjs.org/`），与主仓库内网 registry 不同
-- `pnpm-workspace.yaml` 设为 `packages: []`，防止 pnpm 向上查找主仓库 workspace
-
 ## 常用命令
 
 ```bash
@@ -41,4 +35,40 @@ pnpm build
 
 # 本地预览构建产物
 pnpm serve
-```
+```
+
+## 自定义样式
+
+样式覆写集中在 `src/css/custom.css`，遵循 **CSS 优先、Swizzle 最后** 的原则。
+
+### 第一步：找到正确的类名和变量
+
+去 node_modules 中查看 `@docusaurus/theme-classic` 源码：
+
+1. **定位组件源码目录** — pnpm 项目下路径为 `node_modules/.pnpm/@docusaurus+theme-classic@版本号_*/node_modules/@docusaurus/theme-classic/src/theme/`
+2. **阅读组件 TSX** — 找到 `clsx()`、`className` 中使用的稳定类名（如 `theme-doc-sidebar-container`、`hash-link`、`menu__link--active`），这些是跨版本稳定的
+3. **阅读组件 CSS Module** — 同目录下的 `styles.module.css`，查看组件用了哪些 CSS 属性和变量（如 `border-right`、`box-shadow`、`content`），确认覆写目标
+4. **查找 Infima 变量** — 如果是全局样式（颜色、阴影、间距），优先找 `--ifm-*` 变量覆写，避免硬编码
+5. **避免使用 CSS Module 哈希类名** — 形如 `styles_xxx_yyy` 的类名是构建时生成的，升级后会变
+
+### 第二步：确定覆写方式
+
+按优先级从高到低尝试：
+
+| 优先级 | 方式 | 适用场景 |
+|--------|------|---------|
+| 1 | Infima CSS 变量 | 全局颜色、间距、阴影等（`--ifm-*` 变量） |
+| 2 | 稳定类名 + CSS 属性 | 组件级别样式（边框、间距、隐藏等） |
+| 3 | mask-image + CSS 变量 | 自定义图标且需要跟随主题切换颜色 |
+| 4 | clientModule + CSS | 需要 JS 交互的样式（如滚动检测） |
+| 5 | Swizzle Wrap/Eject | 需要修改组件 DOM 结构时才使用 |
+
+### 第三步：处理暗色模式
+
+- 亮色模式变量在 `:root` 中定义，暗色模式在 `[data-theme='dark']` 中覆写
+- 使用 `var(--ifm-font-color-base)` 等变量时，暗色模式会自动切换，无需额外处理
+- 硬编码颜色值（如 `rgba(0,0,0,0.12)`）需要在 `[data-theme='dark']` 中单独调整
+
+### 常见陷阱
+
+- **data URI SVG 中 `currentColor` 不生效** — SVG 在 data URI 中是独立文档，不继承父元素颜色。用 `mask-image` 方案：SVG 只定义形状（`stroke='black'`），颜色由 `background-color: var(--ifm-font-color-base)` 控制
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -0,0 +1,3 @@
+# Instructions
+
+Follow all rules and project architecture guidelines defined in [AGENTS.md](./AGENTS.md).
diff --git a/blog/2026-03-21-welcome.mdx b/blog/2026-03-21-welcome.mdx
@@ -0,0 +1,47 @@
+---
+slug: welcome
+title: 焕新上线！WeaveFox 让创意灵感轻松落地
+authors: weavefox
+tags:
+  - 公告
+---
+
+**春日启新程，视觉焕新生✨**
+
+从严肃黑到清新蓝，WeaveFox 全新版，即将正式上线。
+
+![WeaveFox 全新界面](https://mdn.alipayobjects.com/huamei_4qpv3u/afts/img/9kLSTYyOOyYAAAAAgBAAAAgAeocTAQFr/fmt.webp)
+
+{/* truncate */}
+
+这一次，我们不仅换了清新的模样，更想把「让创意被看到」这件事，变得更轻松、更丝滑。陪你把每一个一闪而过的小灵感，都变成触手可及的现实。
+
+## 体验上新：GET 你的新思路
+
+如果没思路也不用愁，吐吐槽，让我们帮你扩展灵感 ✨✨✨
+
+<div style={{ display: 'flex', gap: '12px', justifyContent: 'center', marginTop: '16px' }}>
+  <img
+    src="https://mdn.alipayobjects.com/huamei_4qpv3u/afts/img/5JTrRqeOV6wAAAAATmAAAAgAeocTAQFr/fmt.webp"
+    alt="功能展示1"
+    style={{ width: '30%', borderRadius: '8px' }}
+  />
+  <img
+    src="https://mdn.alipayobjects.com/huamei_4qpv3u/afts/img/dj8PTaBQ_08AAAAAT5AAAAgAeocTAQFr/fmt.webp"
+    alt="功能展示2"
+    style={{ width: '30%', borderRadius: '8px' }}
+  />
+  <img
+    src="https://mdn.alipayobjects.com/huamei_4qpv3u/afts/img/PRCYQJSuiU8AAAAATjAAAAgAeocTAQFr/fmt.webp"
+    alt="功能展示3"
+    style={{ width: '30%', borderRadius: '8px' }}
+  />
+</div>
+
+别再让想法烂在心里，👉 即刻体验WeaveFox，让你的灵感落地发芽 🌱 。输入一个想法，或者吐槽一件烦心事，看看你的创意能变成什么样的网页应用吧～
+
+:::tip[官网地址]
+
+👉 https://www.weavefox.cn/
+
+:::
diff --git a/blog/authors.yml b/blog/authors.yml
@@ -0,0 +1,5 @@
+weavefox:
+  name: WeaveFox
+  title: WeaveFox 团队
+  url: https://www.weavefox.cn
+  image_url: https://mdn.alipayobjects.com/huamei_4qpv3u/afts/img/AW2fQKp5vEIAAAAAQMAAAAgAeocTAQFr/original
diff --git a/docs/best-practices/_category_.json b/docs/best-practices/_category_.json
@@ -0,0 +1,6 @@
+{
+  "label": "最佳实践",
+  "position": 1,
+  "collapsible": false,
+  "className": "sidebar-section-header"
+}
diff --git a/docs/best-practices/overview.mdx b/docs/best-practices/overview.mdx
@@ -0,0 +1,7 @@
+---
+sidebar_position: 1
+---
+
+# 最佳实践概览
+
+总结 WeaveFox 使用中的技巧与经验，帮助你更高效地完成创作。
diff --git a/docs/features/core/_category_.json b/docs/features/core/_category_.json
@@ -0,0 +1,6 @@
+{
+  "label": "核心功能",
+  "position": 1,
+  "collapsible": false,
+  "className": "sidebar-section-header"
+}
diff --git a/docs/features/core/overview.mdx b/docs/features/core/overview.mdx
@@ -0,0 +1,15 @@
+---
+sidebar_position: 1
+---
+
+# 产品功能概览
+
+WeaveFox 提供两大核心功能，帮助你快速将创意变为现实。
+
+## 应用生成
+
+通过自然语言描述，快速生成完整的 AI 应用。
+
+## 场景创作
+
+提供垂类场景工具，满足专业创作需求。
diff --git a/docs/integrations/_category_.json b/docs/integrations/_category_.json
@@ -0,0 +1,6 @@
+{
+  "label": "集成服务",
+  "position": 1,
+  "collapsible": false,
+  "className": "sidebar-section-header"
+}
diff --git a/docs/integrations/apps/_category_.json b/docs/integrations/apps/_category_.json
@@ -0,0 +1,6 @@
+{
+  "label": "应用服务",
+  "position": 2,
+  "collapsible": false,
+  "className": "sidebar-section-header"
+}
diff --git a/docs/integrations/apps/appwrite.mdx b/docs/integrations/apps/appwrite.mdx
@@ -0,0 +1,37 @@
+---
+title: Appwrite
+description: 使用 Appwrite 作为后端服务
+---
+
+# Appwrite
+
+Appwrite 是一个开源的后端即服务（BaaS）平台，提供数据库、认证、存储等功能。
+
+## 快速开始
+
+```bash
+npm install appwrite
+```
+
+## 配置
+
+在 WeaveFox 中配置 Appwrite：
+
+```typescript
+import { Client, Databases, Account } from 'appwrite'
+
+const client = new Client()
+  .setEndpoint('https://cloud.appwrite.io/v1')
+  .setProject('YOUR_PROJECT_ID')
+
+const account = new Account(client)
+const databases = new Databases(client)
+```
+
+## 功能
+
+- **数据库**: 文档数据库
+- **认证**: 用户认证和 OAuth
+- **存储**: 文件存储和预览
+- **云函数**: 自定义后端逻辑
+- **实时订阅**: 实时事件推送
diff --git a/docs/integrations/apps/supabase.mdx b/docs/integrations/apps/supabase.mdx
@@ -0,0 +1,34 @@
+---
+title: Supabase
+description: 使用 Supabase 作为后端服务
+---
+
+# Supabase
+
+Supabase 是一个开源的 Firebase 替代方案，提供数据库、认证、存储等功能。
+
+## 快速开始
+
+```bash
+npm install @supabase/supabase-js
+```
+
+## 配置
+
+在 WeaveFox 中配置 Supabase：
+
+```typescript
+import { createClient } from '@supabase/supabase-js'
+
+const supabase = createClient(
+  'YOUR_SUPABASE_URL',
+  'YOUR_SUPABASE_ANON_KEY'
+)
+```
+
+## 功能
+
+- **数据库**: PostgreSQL 实时数据库
+- **认证**: 用户认证和授权
+- **存储**: 文件存储
+- **实时订阅**: 实时数据同步
diff --git a/docs/integrations/overview.mdx b/docs/integrations/overview.mdx
@@ -0,0 +1,7 @@
+---
+sidebar_position: 1
+---
+
+# 介绍
+
+WeaveFox 提供多种集成服务，帮助你高效完成创作与部署。
diff --git a/docs/intro.mdx b/docs/intro.mdx
diff --git a/docs/intro/advanced/_category_.json b/docs/intro/advanced/_category_.json
@@ -0,0 +1,6 @@
+{
+  "label": "高级",
+  "position": 2,
+  "collapsible": false,
+  "className": "sidebar-section-header"
+}
diff --git a/docs/intro/getting-started/_category_.json b/docs/intro/getting-started/_category_.json
@@ -0,0 +1,6 @@
+{
+  "label": "入门",
+  "position": 1,
+  "collapsible": false,
+  "className": "sidebar-section-header"
+}
diff --git a/docs/intro/getting-started/create-account.mdx b/docs/intro/getting-started/create-account.mdx
@@ -0,0 +1,51 @@
+---
+sidebar_position: 2
+---
+
+# 创建账户
+
+创建你的 WeaveFox 账户，即可开始**使用自然语言构建和迭代全栈 Web 应用程序**。
+
+WeaveFox 账户是你在平台上的个人身份，用于登录、管理个人资料与偏好、以及访问工作台中的创作应用。无论你参与多少应用创作，只需要一个账户。
+
+任何人都可以**免费注册**。注册后，WeaveFox 会自动为你创建个人工作台，你可以立即开始创作。
+
+## 在 weavefox.cn 注册
+
+访问 [weavefox.cn](https://www.weavefox.cn)，点击**开始创作**，选择以下任一方式注册：
+
+- **手机号** — 输入手机号并通过短信验证码完成注册
+- **支付宝** — 使用支付宝账号授权登录，并完成首次手机号绑定即可注册成功
+
+:::tip
+
+注册完成后，点击**开始创作**或者你的**个人头像**即可进入工作台。
+
+:::
+
+## 工作台
+
+**工作台**是你的创作空间，保存你的应用和资源，你使用一个账户登录，在该账户下管理你的所有创作内容。你可以：
+
+- **应用** — 查看你创建的应用以及你参与协作的应用
+- **个人主页** — 管理你的个人资料，查看你的粉丝列表、关注列表，以及创作足迹日历与公开的应用列表
+- **点赞收藏** — 查看你点赞过的他人公开应用的列表
+- **技能** — 创建你的技能，为创作的应用提供更丰富的能力
+- **服务** — 查看 WeaveFox 支持的集成服务，并授权管理三方服务
+
+## 常见问题
+
+### 收不到验证码怎么办？
+
+- 检查手机短信是否被拦截或归入垃圾短信
+- 确认输入的手机号格式正确
+- 等待 60 秒后重新获取验证码
+- 如持续无法收到，请加入用户群进行反馈
+
+## 接下来
+
+账户创建完成后，你可以：
+
+- 创建你的第一个应用，体验应用生成能力
+- 完善个人资料，在**工作台-个人主页**页面设置头像、昵称、社交媒体 ID 和个人简介
+- 了解更多创作方式：浏览[产品功能](/features/core/overview)与[最佳实践](/best-practices/overview)
diff --git a/docs/intro/getting-started/plans-and-credits.mdx b/docs/intro/getting-started/plans-and-credits.mdx
@@ -0,0 +1,25 @@
+---
+sidebar_position: 3
+---
+
+# 套餐与额度
+
+WeaveFox 目前**没有付费计划**，应用创作完全免费。你可以自由使用平台的所有创作能力，无需担心额度限制。
+
+## 集成服务额度
+
+WeaveFox 提供的部分集成服务设有**月度免费额度**，帮助创作者实现更多创意创作，而无需额外付费。
+
+月度额度在每月初自动重置，未使用的额度不会累积到下月。
+
+:::info
+
+关于集成服务的具体额度与用量，请参阅[集成服务](/integrations/overview)。
+
+:::
+
+## 常见问题
+
+- **创作应用有数量限制吗？**
+
+  当前用户创作的应用数量没有任何限制，但我们禁止对产品功能的滥用行为。
diff --git a/docs/intro/getting-started/welcome.mdx b/docs/intro/getting-started/welcome.mdx
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
diff --git a/sidebars.ts b/sidebars.ts
diff --git a/src/clientModules/navbar-scroll-shadow.js b/src/clientModules/navbar-scroll-shadow.js
diff --git a/src/css/custom.css b/src/css/custom.css

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# Instructions`
	`2`	`+`
	`3`	`+Follow all rules and project architecture guidelines defined in [AGENTS.md](./AGENTS.md).`