feat: announcement support html (#566)

* feat: announcement support html

* feat: update dependencies

CHANGELOG.md

@@ -1,7 +1,11 @@
 <!-- markdownlint-disable-file MD004 MD024 MD034 MD036 -->
 # CHANGE LOG
 
-## main(v0.8.5)
+## main(v0.8.6)
+
+- feat: |UI| 公告支持 html 格式
+
+## v0.8.5
 
 - feat: |mail-parser-wasm-worker| 修复 `initSync` 函数调用时的 `deprecated` 参数警告
 - feat: rpc headers covert & typo (#559)

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudflare_temp_email",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "private": true,
   "type": "module",
   "scripts": {
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@simplewebauthn/browser": "10.0.0",
-    "@unhead/vue": "^1.11.15",
+    "@unhead/vue": "^1.11.18",
     "@vueuse/core": "^12.4.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
@@ -47,6 +47,6 @@
     "vite-plugin-wasm": "^3.4.1",
     "workbox-build": "^7.3.0",
     "workbox-window": "^7.3.0",
-    "wrangler": "^3.101.0"
+    "wrangler": "^3.103.2"
   }
 }

frontend/src/App.vue

@@ -61,24 +61,26 @@ onMounted(async () => {
   <n-config-provider :locale="localeConfig" :theme="theme">
     <n-global-style />
     <n-spin description="loading..." :show="loading">
-      <n-message-provider container-style="margin-top: 20px;">
+      <n-notification-provider container-style="margin-top: 60px;">
-        <n-grid x-gap="12" :cols="12">
+        <n-message-provider container-style="margin-top: 20px;">
-          <n-gi v-if="showSideMargin" span="1"></n-gi>
+          <n-grid x-gap="12" :cols="12">
-          <n-gi :span="!showSideMargin ? 12 : 10">
+            <n-gi v-if="showSideMargin" span="1"></n-gi>
-            <div class="main">
+            <n-gi :span="!showSideMargin ? 12 : 10">
-              <n-space vertical>
+              <div class="main">
-                <n-layout style="min-height: 80vh;">
+                <n-space vertical>
-                  <Header />
+                  <n-layout style="min-height: 80vh;">
-                  <router-view></router-view>
+                    <Header />
-                </n-layout>
+                    <router-view></router-view>
-                <Footer />
+                  </n-layout>
-              </n-space>
+                  <Footer />
-            </div>
+                </n-space>
-          </n-gi>
+              </div>
-          <n-gi v-if="showSideMargin" span="1"></n-gi>
+            </n-gi>
-        </n-grid>
+            <n-gi v-if="showSideMargin" span="1"></n-gi>
-        <n-back-top />
+          </n-grid>
-      </n-message-provider>
+          <n-back-top />
+        </n-message-provider>
+      </n-notification-provider>
     </n-spin>
   </n-config-provider>
 </template>

frontend/src/api/index.js

@@ -1,4 +1,5 @@
 import { useGlobalState } from '../store'
+import { h } from 'vue'
 import axios from 'axios'
 
 const API_BASE = import.meta.env.VITE_API_BASE || "";
@@ -52,7 +53,7 @@ const apiFetch = async (path, options = {}) => {
     }
 }
 
-const getOpenSettings = async (message) => {
+const getOpenSettings = async (message, notification) => {
     try {
         const res = await api.fetch("/open_api/settings");
         const domainLabels = res["domainLabels"] || [];
@@ -89,10 +90,12 @@ const getOpenSettings = async (message) => {
         }
         if (openSettings.value.announcement && openSettings.value.announcement != announcement.value) {
             announcement.value = openSettings.value.announcement;
-            message.info(announcement.value, {
+            notification.info({
-                showIcon: false,
+                content: () => {
-                duration: 0,
+                    return h("div", {
-                closable: true
+                        innerHTML: announcement.value
+                    });
+                }
             });
         }
     } catch (error) {

frontend/src/views/Header.vue

@@ -15,6 +15,7 @@ import { api } from '../api'
 import { getRouterPathWithLang } from '../utils'
 
 const message = useMessage()
+const notification = useNotification()
 
 const {
     toggleDark, isDark, isTelegram, showAdminPage,
@@ -223,7 +224,7 @@ const logoClick = async () => {
 }
 
 onMounted(async () => {
-    await api.getOpenSettings(message);
+    await api.getOpenSettings(message, notification);
     // make sure user_id is fetched
     if (!userSettings.value.user_id) await api.getUserSettings(message);
 });

frontend/src/views/common/About.vue

@@ -1,10 +1,13 @@
 <script setup>
 import { GithubAlt, Discord, Telegram } from '@vicons/fa'
+import { useGlobalState } from '../../store'
+const { announcement } = useGlobalState()
 </script>
 
 <template>
     <div class="center">
         <n-card :bordered="false" embedded>
+            <div v-html="announcement"></div>
             <n-button tag="a" target="_blank" href="https://github.com/dreamhunter2333/cloudflare_temp_email">
                 <template #icon>
                     <n-icon :component="GithubAlt" />

frontend/src/views/common/Login.vue

@@ -34,6 +34,7 @@ const props = defineProps({
 })
 
 const message = useMessage()
+const notification = useNotification()
 const router = useRouter()
 
 const {
@@ -195,7 +196,7 @@ const showNewAddressTab = computed(() => {
 
 onMounted(async () => {
     if (!openSettings.value.domains || openSettings.value.domains.length === 0) {
-        await api.getOpenSettings();
+        await api.getOpenSettings(message, notification);
     }
     emailDomain.value = domainsOptions.value ? domainsOptions.value[0]?.value : "";
 });

frontend/vite.config.js

@@ -24,6 +24,7 @@ export default defineConfig({
         {
           'naive-ui': [
             'useMessage',
+            'useNotification',
             'NButton',
             'NPopconfirm',
             'NIcon',

pages/package.json

@@ -1,6 +1,6 @@
 {
   "name": "temp-email-pages",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,6 +11,6 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "wrangler": "^3.101.0"
+    "wrangler": "^3.103.2"
   }
 }

scripts/update-dependencies.sh

@@ -0,0 +1,15 @@
+cd frontend/
+pnpm up
+cd ..
+
+cd worker/
+pnpm up
+cd ..
+
+cd pages/
+pnpm up
+cd ..
+
+cd vitepress-docs/
+pnpm up
+cd ..

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

@@ -124,6 +124,13 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
                 { text: '通过 Github Actions 部署', link: 'github-action' },
             ]
         },
+        {
+            text: '常见问题',
+            collapsed: false,
+            items: [
+                { text: '常见问题', link: 'common-issues' },
+            ]
+        },
         {
             text: '附加功能',
             collapsed: false,

vitepress-docs/docs/zh/guide/common-issues.md

@@ -0,0 +1,41 @@
+# 常见问题
+
+> [!NOTE] 注意
+> 如果你的问题没有在这里找到解决方案，请到 `Github Issues` 中搜索或者提问, 或者到 Telegram 群组中提问。
+
+## 通用
+
+| 问题                                           | 解决方案                                                                        |
+| ---------------------------------------------- | ------------------------------------------------------------------------------- |
+| 使用 Cloudflare Workers 给已认证的邮箱发送邮件 | 使用 cf 的 API 进行发送，只支持绑定到 CF 上的收件地址，即 CF EMAIL 转发目的地址 |
+| 绑定多个域名                                   | 每个域名都需要设置 email 转发到 worker                                          |
+
+## worker 相关
+
+| 问题                                                               | 解决方案                                                                    |
+| ------------------------------------------------------------------ | --------------------------------------------------------------------------- |
+| `Uncaught Error: No such module "path". imported from "worker.js"` | [参考](/zh/guide/ui/worker)                                                 |
+| `No such module "node:stream". imported from "worker.js"`          | [参考](/zh/guide/ui/worker)                                                 |
+| `二级域名无法发送邮件`                                             | [参考](https://github.com/dreamhunter2333/cloudflare_temp_email/issues/515) |
+| `Failed to send verify code: No balance`                           | admin 后台设置无限制邮件或者发件权限页面增加额度                            |
+| `Github OAuth无法获取到邮箱 400 Failed to get user email`          | 需要 github 用户设置公开邮箱                                                |
+| `Cannot read properties of undefined (reading 'map')`              | worker 变量没有设置成功                                                     |
+
+## pages 相关
+
+| 问题            | 解决方案                                 |
+| --------------- | ---------------------------------------- |
+| `network error` | 使用无痕模式或者清空浏览器缓存，DNS 缓存 |
+
+## telegram bot
+
+| 问题                                                           | 解决方案                                           |
+| -------------------------------------------------------------- | -------------------------------------------------- |
+| `Telgram Bot获取邮件失败：400：Bad Request:BUTTON_URL_INVALID` | tg mini app 的 URL 填写错误，需要填写 pages 的 URL |
+| `Telegram bot bind error: bind adress count reach the limit`   | 需要设置 worker 变量 `TG_MAX_ADDRESS`              |
+
+## Github Actions
+
+| 问题                                       | 解决方案                                                                          |
+| ------------------------------------------ | --------------------------------------------------------------------------------- |
+| Github Action部署后，cf里始终是preview分支 | 到 cf pages 页面的设置中确认 前端的分支 和 Github Action 的 前端部署分支 是否相同 |

vitepress-docs/package.json

@@ -1,12 +1,12 @@
 {
   "name": "temp-mail-docs",
   "private": true,
-  "version": "0.8.5",
+  "version": "0.8.6",
   "type": "module",
   "devDependencies": {
-    "@types/node": "^22.10.5",
+    "@types/node": "^22.10.7",
     "vitepress": "^1.5.0",
-    "wrangler": "^3.101.0"
+    "wrangler": "^3.103.2"
   },
   "scripts": {
     "dev": "vitepress dev docs",

worker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudflare_temp_email",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "private": true,
   "type": "module",
   "scripts": {
@@ -16,17 +16,17 @@
     "@simplewebauthn/types": "10.0.0",
     "eslint": "9.18.0",
     "globals": "^15.14.0",
-    "typescript-eslint": "^8.19.1",
+    "typescript-eslint": "^8.20.0",
-    "wrangler": "^3.101.0"
+    "wrangler": "^3.103.2"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.726.1",
+    "@aws-sdk/client-s3": "^3.731.1",
-    "@aws-sdk/s3-request-presigner": "^3.726.1",
+    "@aws-sdk/s3-request-presigner": "^3.731.1",
     "@simplewebauthn/server": "10.0.1",
-    "hono": "^4.6.16",
+    "hono": "^4.6.17",
     "mimetext": "^3.0.27",
     "postal-mime": "^2.4.1",
-    "resend": "^4.0.1",
+    "resend": "^4.1.1",
     "telegraf": "4.16.3"
   },
   "pnpm": {

worker/src/constants.ts

@@ -1,5 +1,5 @@
 export const CONSTANTS = {
-    VERSION: 'v0.8.5',
+    VERSION: 'v0.8.6',
 
     // DB settings
     ADDRESS_BLOCK_LIST_KEY: 'address_block_list',