feat: add docs (#122)

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)