feat: add docs (#122)

vitepress-docs/docs/.vitepress/config.ts

@@ -0,0 +1,40 @@
+import { defineConfig } from 'vitepress'
+import { zh } from './zh'
+import { en } from './en'
+
+export default defineConfig({
+  title: "Temp Mail Doc",
+  lang: 'zh-CN',
+  lastUpdated: true,
+  locales: {
+    root: { label: '简体中文', ...zh },
+    en: { label: 'English', ...en }
+  },
+  head: [
+    ['link', { rel: 'icon', type: 'image/png', href: '/logo.png' }],
+    ['meta', { name: 'theme-color', content: '#5f67ee' }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:locale', content: 'Temp Mail Doc' }],
+    ['meta', { property: 'og:title', content: 'Temp Mail Doc' }],
+    ['meta', { property: 'og:site_name', content: 'Temp Mail' }],
+    ['meta', { property: 'og:image', content: 'https://temp-mail-docs.awsl.uk/logo.png' }],
+    ['meta', { property: 'og:url', content: 'https://temp-mail-docs.awsl.uk' }],
+  ],
+  sitemap: {
+    hostname: 'https://temp-mail-docs.awsl.uk',
+    transformItems(items) {
+      return items.filter((item) => !item.url.includes('migration'))
+    }
+  },
+  themeConfig: {
+
+    logo: { src: '/logo.png', width: 24, height: 24 },
+
+    socialLinks: [
+      {
+        icon: 'github',
+        link: 'https://github.com/dreamhunter2333/cloudflare_temp_email'
+      }
+    ]
+  }
+})

vitepress-docs/docs/.vitepress/en.ts

@@ -0,0 +1,55 @@
+import { defineConfig, type DefaultTheme } from 'vitepress'
+
+export const en = defineConfig({
+    title: "Temp Mail Doc",
+    lang: 'zh-Hans',
+    description: 'CloudFlare Free sending and receiving of temporary domain name mailboxes',
+
+    themeConfig: {
+        nav: nav(),
+
+        editLink: {
+            pattern: 'https://github.com/dreamhunter2333/cloudflare_temp_email/edit/main/vitepress-docs/docs/:path',
+            text: 'Edit this page on GitHub'
+        },
+
+        footer: {
+            message: 'Based on MIT license',
+            copyright: `Copyright © 2023-${new Date().getFullYear()} Dream Hunter`
+        },
+    }
+})
+
+function nav(): DefaultTheme.NavItem[] {
+    return [
+        {
+            text: 'Home',
+            link: '/en/',
+        },
+        {
+            text: 'Guide',
+            link: '/en/cli',
+        },
+        {
+            text: 'Service Status',
+            link: '/status',
+        },
+        {
+            text: 'Reference',
+            link: '/reference',
+        },
+        {
+            text: process.env.TAG_NAME || 'v0.2.2',
+            items: [
+                {
+                    text: 'CHANGELOG',
+                    link: 'https://github.com/dreamhunter2333/cloudflare_temp_email/blob/main/CHANGELOG.md'
+                },
+                {
+                    text: 'Contribute',
+                    link: 'https://github.com/dreamhunter2333/cloudflare_temp_email'
+                }
+            ]
+        }
+    ]
+}

vitepress-docs/docs/.vitepress/zh.ts

@@ -0,0 +1,129 @@
+import { defineConfig, type DefaultTheme } from 'vitepress'
+
+export const zh = defineConfig({
+    title: "临时邮箱文档",
+    lang: 'zh-Hans',
+    description: 'CloudFlare 免费收发 临时域名邮箱',
+
+    themeConfig: {
+        nav: nav(),
+
+        sidebar: {
+            '/zh/guide/': { base: '/zh/guide/', items: sidebarGuide() },
+        },
+
+        editLink: {
+            pattern: 'https://github.com/dreamhunter2333/cloudflare_temp_email/edit/main/vitepress-docs/docs/:path',
+            text: '在 GitHub 上编辑此页面'
+        },
+
+        footer: {
+            message: '基于 MIT 许可发布',
+            copyright: `版权所有 © 2023-${new Date().getFullYear()} Dream Hunter`
+        },
+
+        docFooter: {
+            prev: '上一页',
+            next: '下一页'
+        },
+
+        outline: {
+            label: '页面导航'
+        },
+
+        lastUpdated: {
+            text: '最后更新于',
+            formatOptions: {
+                dateStyle: 'short',
+                timeStyle: 'medium'
+            }
+        },
+
+        langMenuLabel: '多语言',
+        returnToTopLabel: '回到顶部',
+        sidebarMenuLabel: '菜单',
+        darkModeSwitchLabel: '主题',
+        lightModeSwitchTitle: '切换到浅色模式',
+        darkModeSwitchTitle: '切换到深色模式'
+    }
+})
+
+function nav(): DefaultTheme.NavItem[] {
+    return [
+        {
+            text: '主页',
+            link: '/',
+        },
+        {
+            text: '指南',
+            link: '/zh/guide/quick-start',
+            activeMatch: '/zh/guide/'
+        },
+        {
+            text: '服务状态',
+            link: '/status',
+        },
+        {
+            text: '参考',
+            link: '/reference',
+        },
+        {
+            text: process.env.TAG_NAME || 'v0.2.2',
+            items: [
+                {
+                    text: '更新日志',
+                    link: 'https://github.com/dreamhunter2333/cloudflare_temp_email/blob/main/CHANGELOG.md'
+                },
+                {
+                    text: '参与贡献',
+                    link: 'https://github.com/dreamhunter2333/cloudflare_temp_email'
+                }
+            ]
+        }
+    ]
+}
+
+function sidebarGuide(): DefaultTheme.SidebarItem[] {
+    return [
+        {
+            text: '简介',
+            collapsed: false,
+            items: [
+                { text: '什么是临时邮箱', link: 'what-is-temp-mail' },
+                { text: 'Star History', link: 'star-history' },
+                { text: '快速开始部署', link: 'quick-start' },
+            ]
+        },
+        {
+            text: '通过命令行部署',
+            collapsed: false,
+            items: [
+                { text: '命令行部署准备', link: 'cli/pre-requisite' },
+                { text: 'D1 数据库', link: 'cli/d1' },
+                { text: 'Cloudflare workers 后端', link: 'cli/worker' },
+                { text: '配置邮件转发', link: 'email-routing.md' },
+                { text: 'Cloudflare Pages 前端', link: 'cli/pages' },
+                { text: '配置发送邮件', link: 'config-send-mail' },
+            ]
+        },
+        {
+            text: '通过用户界面部署',
+            collapsed: false,
+            items: [
+                { text: 'D1 数据库', link: 'ui/d1' },
+                { text: 'Cloudflare workers 后端', link: 'ui/worker' },
+                { text: '配置邮件转发', link: 'email-routing.md' },
+                { text: 'Cloudflare Pages 前端', link: 'ui/pages' },
+                { text: '配置发送邮件', link: 'config-send-mail' },
+            ]
+        },
+        {
+            text: '功能简介',
+            collapsed: false,
+            items: [
+                // { text: '先决条件', link: 'pre-requisite' },
+            ]
+        },
+        { text: '参考', base: "/", link: 'reference' }
+    ]
+}

vitepress-docs/docs/en/cli.md

@@ -0,0 +1,103 @@
+# cloudflare temp email
+
+## Features
+
+- [x] Cloudflare D1 as a database
+- [x] Deploy the front end with Cloudflare Pages
+- [x] Deploy the backend with Cloudflare Workers
+- [x] Email forwarding using Cloudflare Email Routing
+- [x] Use password to login to the previous mailbox again.
+- [x] Get Custom Name Email
+- [x] Support multiple languages
+- [x] Add access authorization, which can be used as a private site
+- [x] Add auto reply feature
+- [x] Add attachment viewing function
+- [x] use rust wasm to parse email
+- [x] support send email
+
+## Deploy
+
+[Install/Update Wrangler](https://developers.cloudflare.com/workers/wrangler/install-and-update/)
+
+```bash
+npm install wrangler -g
+git clone https://github.com/dreamhunter2333/cloudflare_temp_email.git
+# Switch to the latest tag or the branch you want to deploy. You can also use the main branch directly.
+# git checkout $(git describe --tags $(git rev-list --tags --max-count=1))
+```
+
+## DB - Cloudflare D1
+
+```bash
+# create a database, and copy the output to wrangler.toml in the next step
+wrangler d1 create dev
+wrangler d1 execute dev --file=db/schema.sql
+# schema update, if you have initialized the database before this date, you can execute this command to update
+# wrangler d1 execute dev --file=db/2024-01-13-patch.sql
+# wrangler d1 execute dev --file=db/2024-04-03-patch.sql
+```
+
+![d1](/readme_assets/d1.png)
+
+### Backend - Cloudflare workers
+
+The first deployment will prompt you to create a project. Please fill in `production` for the `production` branch.
+
+```bash
+cd worker
+pnpm install
+# copy wrangler.toml.template to wrangler.toml
+# and add your d1 config and these config
+# PREFIX = "tmp" - the email create will be like tmp<xxxxx>@DOMAIN
+# IF YOU WANT TO MAKE YOUR SITE PRIVATE, UNCOMMENT THE FOLLOWING LINES
+# PASSWORDS = ["123", "456"]
+# For admin panel, if not set will no allow to access the admin panel
+# ADMIN_PASSWORDS = ["123", "456"]
+# DOMAINS = ["xxx.xxx1" , "xxx.xxx2"] you domain name
+# JWT_SECRET = "xxx"
+# BLACK_LIST = ""
+cp wrangler.toml.template wrangler.toml
+# deploy
+pnpm run deploy
+```
+
+you can find and test the worker's url in the  workers dashboard
+
+![worker](/readme_assets/worker.png)
+
+## Cloudflare Email Routing
+
+Before you can bind an email address to your Worker, you need to enable Email Routing and have at least one verified email address.
+
+enable email route and config email forward catch-all to the worker
+
+![email](/readme_assets/email.png)
+
+### Frontend - Cloudflare pages
+
+The first deployment will prompt you to create a project. Please fill in `production` for the `production` branch.
+
+```bash
+cd frontend
+pnpm install
+# add .env.local and modify VITE_API_BASE to your worker's url
+# VITE_API_BASE=https://xxx.xxx.workers.dev - don't put / in the end
+cp .env.example .env.local
+pnpm build --emptyOutDir
+pnpm run deploy
+```
+
+![pages](/readme_assets/pages.png)
+
+## Configure sending emails
+
+Find the `SPF` record of `TXT` in the domain name `DNS` record, and add `include:relay.mailchannels.net`
+
+```bash
+v=spf1 include:_spf.mx.cloudflare.net include:relay.mailchannels.net ~all
+```
+
+Create a new `_mailchannels` record, the type is `TXT`, the content is `v=mc1 cfid=your worker domain name`
+
+- The worker domain name here is the domain name of the back-end api. For example, if I deploy it at `https://temp-email-api.awsl.uk/`, fill in `v=mc1 cfid=awsl.uk`
+- If your domain name is `https://temp-email-api.xxx.workers.dev`, fill in `v=mc1 cfid=xxx.workers.dev`

vitepress-docs/docs/en/index.md

@@ -0,0 +1,24 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "Temporary mailbox document"
+  tagline: "Build CloudFlare to send and receive free temporary domain name mailboxes"
+  actions:
+  - theme: brand
+    text: Try it now
+    link: https://mail.awsl.uk/
+  - theme: alt
+    text: command line deployment
+    link: /en/cli
+features:
+  - title: Free hosting on CloudFlare, no server required
+    details: Cloudflare D1 database, Cloudflare Pages frontend, Cloudflare Workers backend, Cloudflare Email Routing
+  - title: Only domain name required for private deployment
+    details: Support password login email, access authorization can be used as a private site, support attachment function
+  - title: Use rust wasm to parse emails
+    details: Use rust wasm to parse emails, support various RFC standards for emails, support attachments, extremely fast
+  - title: Support sending emails
+    details: Support sending txt or html emails through domain name mailboxes
+---

vitepress-docs/docs/index.md

@@ -0,0 +1,28 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "临时邮箱文档"
+  tagline: "搭建 CloudFlare 免费收发 临时域名邮箱"
+  actions:
+    - theme: brand
+      text: 立即试用
+      link: https://mail.awsl.uk/
+    - theme: alt
+      text: 命令行部署
+      link: /zh/guide/quick-start
+    - theme: alt
+      text: 通过用户界面部署
+      link: /zh/guide/quick-start
+
+features:
+  - title: 免费托管在 CloudFlare，无需服务器
+    details: Cloudflare D1 数据库，Cloudflare Pages 前端，Cloudflare Workers 后端， Cloudflare Email Routing
+  - title: 仅需域名即可私有部署
+    details: 支持 password 登录邮箱，访问授权可作为私人站点，支持附件功能
+  - title:  使用 rust wasm 解析邮件
+    details: 使用 rust wasm 解析邮件，支持邮件各种RFC标准，支持附件, 速度极快
+  - title: 支持发送邮件
+    details: 支持通过域名邮箱发送 txt 或者 html 邮件
+---

vitepress-docs/docs/reference.md

@@ -0,0 +1,6 @@
+# Reference
+
+- https://developers.cloudflare.com/d1/
+- https://developers.cloudflare.com/pages/
+- https://developers.cloudflare.com/workers/
+- https://developers.cloudflare.com/email-routing/

vitepress-docs/docs/status.md

@@ -0,0 +1,31 @@
+# Status Page
+
+[Status Link](https://uptime.aks.awsl.icu/status/temp-email)
+
+## [Backend](https://temp-email-api.awsl.uk/)
+
+![status](https://uptime.aks.awsl.icu/api/badge/10/status)
+
+![uptime](https://uptime.aks.awsl.icu/api/badge/10/uptime)
+
+![ping](https://uptime.aks.awsl.icu/api/badge/10/ping)
+
+![avg-response](https://uptime.aks.awsl.icu/api/badge/10/avg-response)
+
+![cert-exp](https://uptime.aks.awsl.icu/api/badge/10/cert-exp)
+
+![response](https://uptime.aks.awsl.icu/api/badge/10/response)
+
+## [Frontend](https://mail.awsl.uk/)
+
+![status](https://uptime.aks.awsl.icu/api/badge/12/status)
+
+![uptime](https://uptime.aks.awsl.icu/api/badge/12/uptime)
+
+![ping](https://uptime.aks.awsl.icu/api/badge/12/ping)
+
+![avg-response](https://uptime.aks.awsl.icu/api/badge/12/avg-response)
+
+![cert-exp](https://uptime.aks.awsl.icu/api/badge/12/cert-exp)
+
+![response](https://uptime.aks.awsl.icu/api/badge/12/response)

vitepress-docs/docs/zh/guide/cli/d1.md

@@ -0,0 +1,27 @@
+# 初始化/更新 D1 数据库
+
+第一次执行登录 wrangler 命令时，会提示登录, 按提示操作即可
+
+## 初始化数据库
+
+```bash
+# 创建 D1 并执行 schema.sql
+wrangler d1 create dev
+wrangler d1 execute dev --file=db/schema.sql
+```
+
+创建完成后，我们在 cloudflare 的控制台可以看到 D1 数据库
+
+![D1](/readme_assets/d1.png)
+
+## 更新数据库 schema
+
+`schema` 更新，请确认你之前部署的版本,
+查看 [更新日志](https://github.com/dreamhunter2333/cloudflare_temp_email/blob/main/CHANGELOG.md)
+
+找到需要执行的 `patch` 文件, 执行, 例如:
+
+```bash
+wrangler d1 execute dev --file=db/2024-01-13-patch.sql
+wrangler d1 execute dev --file=db/2024-04-03-patch.sql
+```

vitepress-docs/docs/zh/guide/cli/pages.md

@@ -0,0 +1,25 @@
+# Cloudflare Pages 前端
+
+第一次部署会提示创建项目, `production` 分支请填写 `production`
+
+```bash
+cd frontend
+pnpm install
+cp .env.example .env.prod
+```
+
+修改 `.env.prod` 文件
+
+将 `VITE_API_BASE` 修改为上一步创建的 `worker` 的 `url`, 不要在末尾加 `/`
+
+例如: `VITE_API_BASE=https://xxx.xxx.workers.dev`
+
+```bash
+pnpm build --emptyOutDir
+# 根据提示创建 pages
+pnpm run deploy
+```
+
+部署完成之后你可以在 Cloudflare 控制台看到你的项目, 可以为 `pages` 配置自定义域名
+
+![pages](/readme_assets/pages.png)

vitepress-docs/docs/zh/guide/cli/pre-requisite.md

@@ -0,0 +1,17 @@
+# 先决条件
+
+## wrangler 的安装
+
+安装 wrangler
+
+```bash
+npm install wrangler -g
+```
+
+## 克隆项目
+
+```bash
+git clone https://github.com/dreamhunter2333/cloudflare_temp_email.git
+# 切换到最新 tag 或者你想部署的分支，你也可以直接使用 main 分支
+# git checkout $(git describe --tags $(git rev-list --tags --max-count=1))
+```

vitepress-docs/docs/zh/guide/cli/worker.md

@@ -0,0 +1,50 @@
+# Cloudflare workers 后端
+
+## 初始化项目
+
+```bash
+cd worker
+pnpm install
+cp wrangler.toml.template wrangler.toml
+```
+
+## 修改 `wrangler.toml` 配置文件
+
+```bash
+name = "cloudflare_temp_email"
+main = "src/worker.js"
+compatibility_date = "2023-12-01"
+# 如果你想使用自定义域名，你需要添加 routes 配置
+# routes = [
+#  { pattern = "temp-email-api.xxxxx.xyz", custom_domain = true },
+# ]
+node_compat = true
+
+[vars]
+PREFIX = "tmp" # 要处理的邮箱名称前缀，不需要后缀可配置为空字符串
+# 如果你想要你的网站私有，取消下面的注释，并修改密码
+# PASSWORDS = ["123", "456"]
+# admin 控制台密码, 不配置则不允许访问控制台
+# ADMIN_PASSWORDS = ["123", "456"]
+DOMAINS = ["xxx.xxx1" , "xxx.xxx2"] # 你的域名, 支持多个域名
+JWT_SECRET = "xxx" # 用于生成 jwt 的密钥
+BLACK_LIST = "" # 黑名单，用于过滤发件人，逗号分隔
+
+# D1 数据库的名称和 ID 可以在 cloudflare 控制台查看
+[[d1_databases]]
+binding = "DB"
+database_name = "xxx" # D1 数据库名称
+database_id = "xxx" # D1 数据库 ID
+```
+
+## 部署
+
+第一次部署会提示创建项目, `production` 分支请填写 `production`
+
+```bash
+pnpm run deploy
+```
+
+部署成功之后再路由中可以看到 `worker` 的 `url`，控制台也会输出 `worker` 的 `url`
+
+![worker](/readme_assets/worker.png)

vitepress-docs/docs/zh/guide/config-send-mail.md

@@ -0,0 +1,12 @@
+
+# 配置发送邮件
+
+1. 找到域名 `DNS` 记录的 `TXT` 的 `SPF` 记录, 增加 `include:relay.mailchannels.net`
+
+    `v=spf1 include:_spf.mx.cloudflare.net include:relay.mailchannels.net ~all`
+
+2. 新建 `_mailchannels` 记录, 类型为 `TXT`, 内容为 `v=mc1 cfid=你的worker域名`
+
+- 此处 worker 域名为后端 api 的域名，比如我部署在 `https://temp-email-api.awsl.uk/`，则填写 `v=mc1 cfid=awsl.uk`
+
+- 如果你的域名是 `https://temp-email-api.xxx.workers.dev`，则填写 `v=mc1 cfid=xxx.workers.dev`

vitepress-docs/docs/zh/guide/email-routing.md

@@ -0,0 +1,9 @@
+# Cloudflare Email Routing
+
+1. 配置对应域名的 `电子邮件 DNS 记录`, 如果是多个域名，需要配置多个域名的 `电子邮件 DNS 记录`
+
+2. 在将电子邮件地址绑定到您的 Worker 之前，您需要启用电子邮件路由并拥有至少一个经过验证的电子邮件地址。
+
+3. 配置每个域名的 `Cloudflare Email Routing` catch-all 发送到 `worker`
+
+![email](/readme_assets/email.png)

vitepress-docs/docs/zh/guide/quick-start.md

@@ -0,0 +1,8 @@
+# 快速开始
+
+- 良好的网络环境
+- cloudflare 账号
+
+打开 [cloudflare控制台](https://dash.cloudflare.com/)
+
+请查看通过 [命令行部署](/zh/guide/cli/pre-requisite) 或者 [用户界面部署](/zh/guide/ui/d1)

vitepress-docs/docs/zh/guide/star-history.md

@@ -0,0 +1,7 @@
+# Star History
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=dreamhunter2333/cloudflare_temp_email&type=Date&theme=dark" />
+  <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=dreamhunter2333/cloudflare_temp_email&type=Date" />
+  <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=dreamhunter2333/cloudflare_temp_email&type=Date" />
+</picture>

vitepress-docs/docs/zh/guide/ui/d1.md

@@ -0,0 +1,25 @@
+# 初始化/更新 D1 数据库
+
+## 初始化数据库
+
+打开 cloudflare 控制台，选择 `Workers & Pages` -> `D1` -> `Create Database`，点击创建数据库
+
+![d1](/ui_install/d1.png)
+
+创建完成后，我们在 cloudflare 的控制台可以看到 D1 数据库
+
+打开 `Console` 标签页，输入 `db/schema.sql` 的内容，点击 `Execute` 执行
+
+![d1](/ui_install/d1-exec.png)
+
+## 更新数据库 schema
+
+`schema` 更新，请确认你之前部署的版本,
+
+查看 [更新日志](https://github.com/dreamhunter2333/cloudflare_temp_email/blob/main/CHANGELOG.md)
+
+找到需要执行的 `patch` 文件, 执行, 例如:  `db/2024-01-13-patch.sql`
+
+打开 `Console` 标签页，输入 `patch` 文件的内容，点击 `Execute` 执行
+
+![d1](/ui_install/d1-exec.png)

vitepress-docs/docs/zh/guide/ui/pages.md

@@ -0,0 +1,95 @@
+# Cloudflare Pages 前端
+
+<script setup>
+import { ref } from 'vue'
+import JSZip from 'jszip';
+
+const domain = ref("")
+const downloadUrl = ref("")
+const tip = ref("下载")
+
+const generate = async () => {
+    try {
+        const response = await fetch("/ui_install/frontend.zip");
+        const arrayBuffer = await response.arrayBuffer();
+        var zip = new JSZip();
+        await zip.loadAsync(arrayBuffer);
+        let target_content = ""
+        let target_path = ""
+        const directory = zip.folder("assets");
+        if (directory) {
+            for (const [relativePath, zipEntry] of Object.entries(directory.files)) {
+                console.log(relativePath);
+                if (relativePath.startsWith("assets/index-") && relativePath.endsWith(".js")){
+                    let content = await zipEntry.async("string");
+                    content = content.replace("https://temp-email-api.xxx.xxx", domain.value);
+                    target_path = relativePath;
+                    zip.file(relativePath, content);
+                    break;
+                }
+            }
+        }
+        if (!target_path) {
+            tip.value = "生成失败";
+            downloadUrl.value = '';
+        }
+        const blob = await zip.generateAsync({ type: "blob" });
+        const url = window.URL.createObjectURL(blob);
+        downloadUrl.value = url;
+    } catch (error) {
+        console.error("Error: ", error);
+    }
+}
+</script>
+
+1. 点击 `Workers & Pages` -> `Overview` -> `Create Application`
+
+    ![create pages](/ui_install/worker_home.png)
+
+2. 选择 `Pages`，选择 `Create using direct upload`
+
+    ![pages](/ui_install/pages.png)
+
+3. 输入部署的 worker 的地址, 地址不要带 `/`，点击生成，成功会出现下载按钮，你会得到一个 zip 包
+    - 此处 worker 域名为后端 api 的域名，比如我部署在 `https://temp-email-api.awsl.uk`，则填写 `https://temp-email-api.awsl.uk`
+    - 如果你的域名是 `https://temp-email-api.xxx.workers.dev`，则填写 `https://temp-email-api.xxx.workers.dev`
+
+    <div :class="$style.container">
+        <input :class="$style.input" type="text" v-model="domain" placeholder="请输入地址"></input>
+        <button :class="$style.button" @click="generate">生成</button>
+        <a v-if="downloadUrl" :href="downloadUrl" download="frontend.zip">{{ tip }}</a>
+    </div>
+
+4. 选择 `Pages`，点击 `Create Pages`, 修改名称，上传下载的 zip 包，然后点击 `Deploy`
+
+    ![pages1](/ui_install/pages-1.png)
+
+5. 打开 刚刚部署的 `Pages`，点击 `Custom Domain`  这里可以添加自己的域名，你也可以使用自动生成的 `*.pages.dev` 的域名。能打开域名说明部署成功。
+
+    ![pages domain](/ui_install/pages-domain.png)
+
+<style module>
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+.input {
+    border: 2px solid deepskyblue;
+    margin-right: 10px;
+    width: 75%;
+    border-radius: 5px;
+}
+
+.button {
+    background-color: deepskyblue;
+    padding: 5px 10px;
+    border-radius: 5px;
+    margin-right: 10px;
+}
+
+.button:hover {
+    background-color: green;
+}
+</style>

vitepress-docs/docs/zh/guide/ui/worker.md

@@ -0,0 +1,27 @@
+# Cloudflare workers 后端
+
+1. 点击 `Workers & Pages` -> `Overview` -> `Create Application`
+
+    ![create worker](/ui_install/worker_home.png)
+
+2. 选择 `Worker`，点击 `Create Worker`, 修改名称然后点击 `Deploy`
+
+    ![worker1](/ui_install/worker-1.png)
+
+3. 下载 [worker.js](https://github.com/dreamhunter2333/cloudflare_temp_email/releases/latest/download/worker.js)
+
+4. 回到 `Overview`，找到刚刚创建的 worker，点击 `Edit Code`, 上传 `worker.js`, 删除 `index.js`，然后重命名 `worker.js` 为 `index.js`, 点击 `Deploy`
+
+    ![worker2](/ui_install/worker-2.png)
+
+5. 点击 `Settings` -> `Trggers`, 这里可以添加自己的域名，你也可以使用自动生成的 `*.workers.dev` 的域名。能打开域名说明部署成功，记录下这个域名，后面部署前端会用到。
+
+    ![worker3](/ui_install/worker-3.png)
+
+6. 点击 `Settings` -> `Variables`, 如图所示添加变量，参考 README.md 中的 `wrangler.toml` 文件的 `vars` 部分
+
+    ![worker-var](/ui_install/worker-var.png)
+
+7. 点击 `Settings` -> `Variables`, 下拉找到 `D1 Database`, 点击 `Add Binding`, 名称如图，选择刚刚创建的 D1 数据库，点击 `Deploy`
+
+    ![worker-d1](/ui_install/worker-d1.png)

vitepress-docs/docs/zh/guide/what-is-temp-mail.md

@@ -0,0 +1,7 @@
+# 临时邮箱简介
+
+## 什么是临时邮箱
+
+临时邮箱，也被称为一次性邮箱或临时邮件地址，是一种用于临时接收邮件的虚拟邮箱。与常规邮箱不同，临时邮箱旨在提供一种匿名且临时的邮件接收解决方案。
+
+临时邮箱往往由网站或在线服务提供商提供，用户可以在需要注册或接收验证邮件时使用临时邮箱地址，而无需暴露自己的真实邮箱地址。这样做的好处是可以保护个人隐私