refactor(ui): extract css

ui/src/global.css

@@ -59,3 +59,9 @@
     line-height: 1;
   }
 }
+
+@layer components {
+  .container {
+    @apply mx-auto max-w-320;
+  }
+}

ui/src/i18n/locales/zh/nls.certificate.json

@@ -3,7 +3,7 @@
   "certificate.page.subtitle": "SSL 证书含有网站的公钥和网站标识以及其他相关信息。它们来自于工作流的执行输出。",
 
   "certificate.nodata.title": "暂无证书",
-  "certificate.nodata.description": "当前未找到任何认证。请先运行一个工作流以生成证书。",
+  "certificate.nodata.description": "当前未找到任何认证。请先执行一个工作流以生成证书。",
   "certificate.nodata.button": "前往工作流",
 
   "certificate.search.placeholder": "按证书名称或序列号搜索……",

ui/src/i18n/locales/zh/nls.dashboard.json

@@ -8,7 +8,7 @@
   "dashboard.statistics.enabled_workflows": "已启用工作流",
 
   "dashboard.latest_workflow_runs": "最近执行的工作流",
-  "dashboard.latest_workflow_runs.nodata.description": "当前未找到任何工作流执行记录。请先运行一个工作流。",
+  "dashboard.latest_workflow_runs.nodata.description": "当前未找到任何工作流执行记录。请先执行一个工作流。",
   "dashboard.latest_workflow_runs.nodata.button": "前往工作流",
 
   "dashboard.quick_actions": "快捷操作",

ui/src/i18n/locales/zh/nls.workflow.runs.json

@@ -10,7 +10,7 @@
   "workflow_run.deletion.alert": "执行记录中包含工作流各节点的执行结果，删除后可能导致因找不到前次执行结果而触发重新申请或部署证书。如无必要请勿提前删除，建议保留至少 180 天。",
   "workflow_run.cancellation.alert": "如遇进程意外中止、服务器超时等原因，你可以手动取消长时间挂起的执行，避免阻塞后续执行。",
 
-  "workflow_run.nodata.description": "当前未找到任何执行记录。请先运行此工作流。",
+  "workflow_run.nodata.description": "当前未找到任何执行记录。请先执行此工作流。",
 
   "workflow_run.props.id": "ID",
   "workflow_run.props.status": "状态",

ui/src/pages/ConsoleLayout.tsx

@@ -69,7 +69,7 @@ const ConsoleLayout = () => {
             <div className="w-full px-2">
               <SiderMenu />
             </div>
-            <div className="w-full px-2">
+            <div className="w-full px-2 pb-2">
               <Menu
                 style={{ background: "transparent", borderInlineEnd: "none" }}
                 items={[

ui/src/pages/accesses/AccessList.tsx

@@ -331,10 +331,12 @@ const AccessList = () => {
 
   return (
     <div className="px-6 py-4">
-      <div className="mx-auto max-w-320">
+      <div className="container">
         <h1>{t("access.page.title")}</h1>
         <p className="text-base text-gray-500">{t("access.page.subtitle")}</p>
+      </div>
 
+      <div className="container">
         <div className="flex items-center justify-between gap-x-2 gap-y-3 not-md:flex-col-reverse not-md:items-start not-md:justify-normal">
           <div className="flex w-full flex-1 items-center gap-x-2 md:max-w-200">
             <div className="flex-1">

ui/src/pages/accesses/AccessNew.tsx

@@ -85,12 +85,12 @@ const AccessNew = () => {
 
   return (
     <div className="px-6 py-4">
-      <div className="mx-auto max-w-320">
+      <div className="container">
         <h1>{t("access.new.title")}</h1>
         <p className="text-base text-gray-500">{t("access.new.subtitle")}</p>
       </div>
 
-      <div className="mx-auto max-w-320">
+      <div className="container">
         <Show
           when={!!formModel?.provider}
           fallback={

ui/src/pages/certificates/CertificateList.tsx

@@ -355,10 +355,12 @@ const CertificateList = () => {
 
   return (
     <div className="px-6 py-4">
-      <div className="mx-auto max-w-320">
+      <div className="container">
         <h1>{t("certificate.page.title")}</h1>
         <p className="text-base text-gray-500">{t("certificate.page.subtitle")}</p>
+      </div>
 
+      <div className="container">
         <div className="flex items-center justify-between gap-x-2 gap-y-3 not-md:flex-col-reverse not-md:items-start not-md:justify-normal">
           <div className="flex w-full flex-1 items-center gap-x-2 md:max-w-200">
             <div>

ui/src/pages/dashboard/Dashboard.tsx

@@ -39,9 +39,11 @@ const Dashboard = () => {
 
   return (
     <div className="px-6 py-4">
-      <div className="mx-auto max-w-320">
+      <div className="container">
         <h1>{t("dashboard.page.title")}</h1>
+      </div>
 
+      <div className="container">
         <div className="my-[6px]">
           <StatisticCards />
         </div>

ui/src/pages/settings/Settings.tsx

@@ -34,9 +34,11 @@ const Settings = () => {
 
   return (
     <div className="px-6 py-4">
-      <div className="mx-auto max-w-320">
+      <div className="container">
         <h1>{t("settings.page.title")}</h1>
+      </div>
 
+      <div className="container">
         <div className="hidden select-none max-lg:block">
           <Menu
             style={{ background: "transparent", borderInlineEnd: "none" }}

ui/src/pages/settings/SettingsAccount.tsx

@@ -38,7 +38,7 @@ const SettingsAccountUsername = ({ className, style }: { className?: string; sty
   const { message, notification } = App.useApp();
 
   const formSchema = z.object({
-    username: z.email(t("common.errmsg.email_invalid")),
+    username: z.email(t("common.errmsg.email_invalid")).max(256, t("common.errmsg.string_max", { max: 256 })),
   });
   const formRule = createSchemaFieldRule(formSchema);
   const {
@@ -127,8 +127,14 @@ const SettingsAccountPassword = ({ className, style }: { className?: string; sty
   const { message, notification } = App.useApp();
 
   const formSchema = z.object({
-    oldPassword: z.string().min(10, t("settings.account.password.form.email.password.errmsg.invalid")),
-    newPassword: z.string().min(10, t("settings.account.password.form.email.password.errmsg.invalid")),
+    oldPassword: z
+      .string()
+      .min(10, t("settings.account.password.form.email.password.errmsg.invalid"))
+      .max(256, t("common.errmsg.string_max", { max: 256 })),
+    newPassword: z
+      .string()
+      .min(10, t("settings.account.password.form.email.password.errmsg.invalid"))
+      .max(256, t("common.errmsg.string_max", { max: 256 })),
     confirmPassword: z.string().refine((v) => v === formInst.getFieldValue("newPassword"), {
       error: t("settings.account.password.form.email.password.errmsg.not_matched"),
     }),

ui/src/pages/workflows/WorkflowDetail.tsx

@@ -93,7 +93,7 @@ const WorkflowDetail = () => {
   return (
     <div className="flex size-full flex-col">
       <div className="px-6 py-4" ref={divHeaderRef}>
-        <div className="relative z-11 mx-auto flex max-w-320 justify-between gap-4">
+        <div className="relative z-11 container flex justify-between gap-4">
           <div className="flex-1">
             <WorkflowDetailBaseName />
             <WorkflowDetailBaseDescription />
@@ -135,7 +135,7 @@ const WorkflowDetail = () => {
         <Show
           when={initialized}
           fallback={
-            <div className="mx-auto max-w-320 pt-12">
+            <div className="container pt-12">
               <Skeleton active />
             </div>
           }

ui/src/pages/workflows/WorkflowDetailRuns.tsx

@@ -274,7 +274,7 @@ const WorkflowDetailRuns = () => {
   };
 
   return (
-    <div className="mx-auto max-w-320">
+    <div className="container">
       <div className="pt-9">
         <Alert className="mb-4" message={<span dangerouslySetInnerHTML={{ __html: t("workflow_run.deletion.alert") }}></span>} showIcon type="info" />
         <Alert className="mb-4" message={<span dangerouslySetInnerHTML={{ __html: t("workflow_run.cancellation.alert") }}></span>} showIcon type="info" />

ui/src/pages/workflows/WorkflowList.tsx

@@ -415,10 +415,12 @@ const WorkflowList = () => {
 
   return (
     <div className="px-6 py-4">
-      <div className="mx-auto max-w-320">
+      <div className="container">
         <h1>{t("workflow.page.title")}</h1>
         <p className="text-base text-gray-500">{t("workflow.page.subtitle")}</p>
+      </div>
 
+      <div className="container">
         <div className="flex items-center justify-between gap-x-2 gap-y-3 not-md:flex-col-reverse not-md:items-start not-md:justify-normal">
           <div className="flex w-full flex-1 items-center gap-x-2 md:max-w-200">
             <div>

ui/src/pages/workflows/WorkflowNew.tsx

@@ -72,12 +72,12 @@ const WorkflowNew = () => {
 
   return (
     <div className="px-6 py-4">
-      <div className="mx-auto max-w-320">
+      <div className="container">
         <h1>{t("workflow.new.title")}</h1>
         <p className="text-base text-gray-500">{t("workflow.new.subtitle")}</p>
       </div>
 
-      <div className="mx-auto max-w-320">
+      <div className="container">
         <Typography.Text type="secondary">
           <div className="mb-4 text-xl">{t("workflow.new.templates.title")}</div>
         </Typography.Text>