feat(ui): browser happy detecting

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",

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": "操作成功",

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 />
 

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">

ui/src/utils/browser.ts

@@ -0,0 +1,3 @@
+export const isBrowserHappy = () => {
+  return typeof Promise.withResolvers === "function";
+};