From 268ec4bd7fdbf3545055df190de2ce129e4b99a2 Mon Sep 17 00:00:00 2001
From: Fu Diwei <fudiwei@sina.com>
Date: Thu, 15 May 2025 02:20:09 +0800
Subject: [PATCH] feat(ui): browser happy detecting

---
 ui/src/i18n/locales/en/nls.common.json |  1 +
 ui/src/i18n/locales/zh/nls.common.json |  1 +
 ui/src/pages/AuthLayout.tsx            | 11 ++++++++++-
 ui/src/pages/ConsoleLayout.tsx         |  8 +++++++-
 ui/src/utils/browser.ts                |  3 +++
 5 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/utils/browser.ts

diff --git a/ui/src/i18n/locales/en/nls.common.json b/ui/src/i18n/locales/en/nls.common.json
index ea5ab95a..76fa8047 100644
--- a/ui/src/i18n/locales/en/nls.common.json
+++ b/ui/src/i18n/locales/en/nls.common.json
@@ -12,6 +12,7 @@
 
   "common.text.copied": "Copied",
   "common.text.import_from_file": "Import from file ...",
+  "common.text.happy_browser": "The browser version is too low, and Certimate WebUI is not working well. Recommend using modern browsers such as Google Chrome v119.0 or higher.",
   "common.text.nodata": "No data available",
   "common.text.operation_confirm": "Operation confirm",
   "common.text.operation_succeeded": "Operation succeeded",
diff --git a/ui/src/i18n/locales/zh/nls.common.json b/ui/src/i18n/locales/zh/nls.common.json
index bb683d4c..1d4b600a 100644
--- a/ui/src/i18n/locales/zh/nls.common.json
+++ b/ui/src/i18n/locales/zh/nls.common.json
@@ -12,6 +12,7 @@
 
   "common.text.copied": "已复制",
   "common.text.import_from_file": "从文件导入 ……",
+  "common.text.happy_browser": "当前浏览器版本过低，Certimate WebUI 无法正常工作。推荐使用 Google Chrome v119.0 或更高版本的现代浏览器。",
   "common.text.nodata": "暂无数据",
   "common.text.operation_confirm": "操作确认",
   "common.text.operation_succeeded": "操作成功",
diff --git a/ui/src/pages/AuthLayout.tsx b/ui/src/pages/AuthLayout.tsx
index 30c982fc..da118fb0 100644
--- a/ui/src/pages/AuthLayout.tsx
+++ b/ui/src/pages/AuthLayout.tsx
@@ -1,10 +1,15 @@
+import { useTranslation } from "react-i18next";
 import { Navigate, Outlet } from "react-router-dom";
-import { Layout } from "antd";
+import { Alert, Layout } from "antd";
 
+import Show from "@/components/Show";
 import Version from "@/components/Version";
 import { getAuthStore } from "@/repository/admin";
+import { isBrowserHappy } from "@/utils/browser";
 
 const AuthLayout = () => {
+  const { t } = useTranslation();
+
   const auth = getAuthStore();
   if (auth.isValid && auth.isSuperuser) {
     return <Navigate to="/" />;
@@ -12,6 +17,10 @@ const AuthLayout = () => {
 
   return (
     <Layout className="h-screen">
+      <Show when={!isBrowserHappy()}>
+        <Alert message={t("common.text.happy_browser")} type="warning" showIcon closable />
+      </Show>
+
       <div className="container">
         <Outlet />
 
diff --git a/ui/src/pages/ConsoleLayout.tsx b/ui/src/pages/ConsoleLayout.tsx
index e05d3f56..7cb324d8 100644
--- a/ui/src/pages/ConsoleLayout.tsx
+++ b/ui/src/pages/ConsoleLayout.tsx
@@ -13,11 +13,13 @@ import {
   SettingOutlined as SettingOutlinedIcon,
   SunOutlined as SunOutlinedIcon,
 } from "@ant-design/icons";
-import { Button, type ButtonProps, Drawer, Dropdown, Layout, Menu, type MenuProps, Tooltip, theme } from "antd";
+import { Alert, Button, type ButtonProps, Drawer, Dropdown, Layout, Menu, type MenuProps, Tooltip, theme } from "antd";
 
+import Show from "@/components/Show";
 import Version from "@/components/Version";
 import { useBrowserTheme, useTriggerElement } from "@/hooks";
 import { getAuthStore } from "@/repository/admin";
+import { isBrowserHappy } from "@/utils/browser";
 
 const ConsoleLayout = () => {
   const navigate = useNavigate();
@@ -50,6 +52,10 @@ const ConsoleLayout = () => {
       </Layout.Sider>
 
       <Layout className="flex flex-col overflow-hidden pl-[256px] max-md:pl-0">
+        <Show when={!isBrowserHappy()}>
+          <Alert message={t("common.text.happy_browser")} type="warning" showIcon closable />
+        </Show>
+
         <Layout.Header className="p-0 shadow-sm" style={{ background: themeToken.colorBgContainer }}>
           <div className="flex size-full items-center justify-between overflow-hidden px-4">
             <div className="flex items-center gap-4">
diff --git a/ui/src/utils/browser.ts b/ui/src/utils/browser.ts
new file mode 100644
index 00000000..735bb26a
--- /dev/null
+++ b/ui/src/utils/browser.ts
@@ -0,0 +1,3 @@
+export const isBrowserHappy = () => {
+  return typeof Promise.withResolvers === "function";
+};