create-bubbles 0.1.26 → 0.1.28

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/examples/pro-table/index.tsx

@@ -1,7 +1,7 @@
 import FullHeightProTable from '@/components/FullHeightProTable/FullHeightProTable'
 import { PlusOutlined } from '@ant-design/icons'
+import { useI18n } from '@bubblesjs/i18n-react'
 import { App, Button, Empty, Popconfirm } from 'antd'
-import { useMemo, useRef, useState, type Key } from 'react'
 import ProjectFormDialog, { type ProjectFormDialogRef } from './components/ProjectFormDialog'
 import {
   initialProjects,
@@ -11,8 +11,10 @@ import {
 } from './config'
 import { createProjectColumns } from './config/columns'
 
+/** 演示项目列表的筛选、分页、行选择及新增编辑删除。 */
 export default function ProTableExample() {
   const { message } = App.useApp()
+  const { tr } = useI18n()
   const formDialogRef = useRef<ProjectFormDialogRef>(null)
   const nextProjectId = useRef(initialProjects.length + 1)
   const [projects, setProjects] = useState(initialProjects)
@@ -21,22 +23,29 @@ export default function ProTableExample() {
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(6)
 
-  const filteredProjects = useMemo(() => {
-    const keyword = search.name?.trim().toLowerCase()
-    return projects.filter((project) => {
-      if (keyword && !`${project.name} ${project.id}`.toLowerCase().includes(keyword)) return false
-      if (search.status && project.status !== search.status) return false
-      if (search.owner && project.owner !== search.owner) return false
-      if (search.priority && project.priority !== search.priority) return false
-      if (
-        search.dueDate &&
-        (project.dueDate < search.dueDate[0] || project.dueDate > search.dueDate[1])
+  const filteredProjects = useMemo(
+    /** 根据项目搜索条件计算当前列表，避免无关状态更新时重复筛选。 */ () => {
+      const keyword = search.name?.trim().toLowerCase()
+      return projects.filter(
+        /** 依次校验关键字、状态、负责人、优先级及截止日期范围。 */ (project) => {
+          if (keyword && !`${project.name} ${project.id}`.toLowerCase().includes(keyword))
+            return false
+          if (search.status && project.status !== search.status) return false
+          if (search.owner && project.owner !== search.owner) return false
+          if (search.priority && project.priority !== search.priority) return false
+          if (
+            search.dueDate &&
+            (project.dueDate < search.dueDate[0] || project.dueDate > search.dueDate[1])
+          )
+            return false
+          return true
+        },
       )
-        return false
-      return true
-    })
-  }, [projects, search])
+    },
+    [projects, search],
+  )
 
+  /** 新增项目或替换编辑记录，更新页面列表并提示保存成功。 */
   function saveProject(values: ProjectFormValues, original?: ProjectRecord) {
     if (original) {
       setProjects((current) =>
@@ -49,13 +58,14 @@ export default function ProTableExample() {
       setProjects((current) => [{ ...values, id }, ...current])
       setPage(1)
     }
-    void message.success(original ? '项目已保存' : '项目已新增')
+    void message.success(original ? tr('项目已保存') : tr('项目已新增'))
   }
 
+  /** 从项目列表及行选择中移除指定项目，并提示删除数量。 */
   function deleteProjects(ids: Key[]) {
     setProjects((current) => current.filter((project) => !ids.includes(project.id)))
     setSelectedRowKeys((current) => current.filter((id) => !ids.includes(id)))
-    void message.success(`已删除 ${ids.length} 个项目`)
+    void message.success(tr('已删除 {count} 个项目', { count: ids.length }))
   }
 
   const columns = createProjectColumns({
@@ -69,21 +79,25 @@ export default function ProTableExample() {
         rowKey="id"
         columns={columns}
         dataSource={filteredProjects}
-        headerTitle="项目列表"
-        tooltip="支持搜索筛选、排序、分页、列设置和批量删除。"
+        headerTitle={tr('项目列表')}
+        tooltip={tr('支持搜索筛选、排序、分页、列设置和批量删除。')}
         search={{ labelWidth: 'auto', defaultCollapsed: true }}
         form={{ name: 'project-search' }}
         dateFormatter="string"
-        onSubmit={(values) => {
-          setSearch(values)
-          setPage(1)
-          setSelectedRowKeys([])
-        }}
-        onReset={() => {
-          setSearch({})
-          setPage(1)
-          setSelectedRowKeys([])
-        }}
+        onSubmit={
+          /** 应用新的项目查询条件，同时回到第一页并清除行选择。 */ (values) => {
+            setSearch(values)
+            setPage(1)
+            setSelectedRowKeys([])
+          }
+        }
+        onReset={
+          /** 清空项目查询条件，同时回到第一页并清除行选择。 */ () => {
+            setSearch({})
+            setPage(1)
+            setSelectedRowKeys([])
+          }
+        }
         options={{ reload: false, density: true, setting: true, fullScreen: true }}
         toolBarRender={() => [
           <Button
@@ -92,20 +106,20 @@ export default function ProTableExample() {
             icon={<PlusOutlined />}
             onClick={() => formDialogRef.current?.show()}
           >
-            新增项目
+            {tr('新增项目')}
           </Button>,
         ]}
         rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
         tableAlertOptionRender={() => (
           <Popconfirm
-            title={`删除选中的 ${selectedRowKeys.length} 个项目？`}
-            description="删除后将从当前演示列表中移除。"
+            title={tr('删除选中的 {count} 个项目？', { count: selectedRowKeys.length })}
+            description={tr('删除后将从当前演示列表中移除。')}
             onConfirm={() => deleteProjects(selectedRowKeys)}
-            okText="删除"
+            okText={tr('删除')}
             okButtonProps={{ danger: true }}
           >
             <Button type="link" danger size="small">
-              批量删除
+              {tr('批量删除')}
             </Button>
           </Popconfirm>
         )}
@@ -114,7 +128,8 @@ export default function ProTableExample() {
           pageSize,
           showSizeChanger: true,
           pageSizeOptions: [6, 12, 24],
-          showTotal: (total) => `共 ${total} 个项目`,
+          showTotal: (total) => tr('共 {count} 个项目', { count: total }),
+          /** 同步分页页码与每页条数。 */
           onChange: (current, size) => {
             setPage(current)
             setPageSize(size)
@@ -124,7 +139,7 @@ export default function ProTableExample() {
           emptyText: (
             <Empty
               image={Empty.PRESENTED_IMAGE_SIMPLE}
-              description="暂无匹配项目，请调整筛选条件或新增项目。"
+              description={tr('暂无匹配项目，请调整筛选条件或新增项目。')}
             />
           ),
         }}

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/home/index.tsx

@@ -1,25 +1,28 @@
 import { ArrowRightOutlined, TableOutlined } from '@ant-design/icons'
 import { PageContainer, ProCard } from '@ant-design/pro-components'
 import { Button, Tag, Typography } from 'antd'
-import { Link } from 'react-router'
+import { useI18n } from '@bubblesjs/i18n-react'
 import styles from './index.module.css'
 
+/** 展示基础工作台的业务模块入口。 */
 export default function Home() {
+  const { tr } = useI18n()
+
   return (
-    <PageContainer title="工作台" content="你的业务工作空间。">
-      <ProCard title="业务模块" variant="outlined">
+    <PageContainer title={tr('工作台')} content={tr('你的业务工作空间。')}>
+      <ProCard title={tr('业务模块')} variant="outlined">
         <div className={styles.demo}>
           <TableOutlined className={styles.icon} />
           <div>
             <Typography.Title level={4}>
-              项目管理 <Tag color="cyan">Demo</Tag>
+              {tr('项目管理')} <Tag color="cyan">Demo</Tag>
             </Typography.Title>
             <Typography.Paragraph type="secondary">
-              使用 ProTable 管理项目，体验搜索筛选、分页、新增编辑和批量操作。
+              {tr('使用 ProTable 管理项目，体验搜索筛选、分页、新增编辑和批量操作。')}
             </Typography.Paragraph>
             <Link to="/examples/pro-table">
               <Button type="primary" icon={<ArrowRightOutlined />} iconPlacement="end">
-                打开 ProTable 示例
+                {tr('打开 ProTable 示例')}
               </Button>
             </Link>
           </div>

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/login/api.ts

@@ -2,10 +2,13 @@ import type { LoginRequest, LoginResult } from 'shared/types'
 import request from '@/utils/request'
 
 const publicRequest = request({
+  /** 登录请求不附带现有会话令牌。 */
   commonHeaders: () => ({}),
+  /** 登录失败交由表单提示，避免重复触发未登录跳转。 */
   unAuthorizedResponseFunc: () => {},
   isShowErrorMessage: false,
 })
 
+/** 通过不附带会话凭据的请求提交登录信息。 */
 export const login = (input: LoginRequest) =>
   publicRequest.Post<LoginResult>('/auth/login', input, { cacheFor: 0, shareRequest: false })

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/login/index.tsx

@@ -1,67 +1,28 @@
-import { AppstoreOutlined, ArrowRightOutlined, LockOutlined, UserOutlined } from '@ant-design/icons'
+import { ArrowRightOutlined, LockOutlined, UserOutlined } from '@ant-design/icons'
 import { LoginForm, ProFormText } from '@ant-design/pro-components'
 import { useRequest } from 'alova/client'
 import { Alert } from 'antd'
-import { useState } from 'react'
-import { useNavigate } from 'react-router'
 import type { LoginRequest } from 'shared/types'
 import { ACCOUNT_PATTERN, normalizeAccount } from 'shared/utils'
+import { useI18n } from '@bubblesjs/i18n-react'
+import Brand from '@/components/Brand/Brand'
+import LocaleSwitch from '@/components/LocaleSwitch/LocaleSwitch'
 import { cookie } from '@/utils/storage/cookie'
+import { buildAuthPath, safeNextPath } from '@/utils/safe-next'
 import { login } from './api'
 import './login.css'
 
-function ModuleDrawing() {
-  return (
-    <svg className="login-drawing" viewBox="0 0 540 360" fill="none" aria-hidden="true">
-      <g stroke="currentColor" strokeWidth="1.5">
-        <path d="M156 88h38a24 24 0 0 1 24 24v30M322 180h52a24 24 0 0 0 24-24v-28M218 218v38a24 24 0 0 1-24 24h-54M322 218v50a24 24 0 0 0 24 24h54" />
-        <path
-          d="M100 130v58a24 24 0 0 0 24 24h42M444 240v-28a24 24 0 0 0-24-24h-46"
-          strokeDasharray="4 7"
-          opacity=".35"
-        />
-        <g fill="var(--login-panel-bg)">
-          <rect x="52" y="46" width="104" height="84" rx="12" />
-          <rect x="354" y="48" width="104" height="80" rx="12" />
-          <rect x="60" y="244" width="80" height="72" rx="12" />
-          <rect x="396" y="248" width="88" height="68" rx="12" />
-        </g>
-        <path
-          d="M76 72h24v24H76zM112 72h20M112 84h12M112 96h20M378 74h56M378 88h36M378 102h46M80 264h40M80 278h24M80 292h32"
-          opacity=".7"
-        />
-        <circle cx="440" cy="282" r="14" />
-        <path d="m434 282 4 4 8-9" stroke="var(--login-accent)" />
-        <rect
-          x="218"
-          y="128"
-          width="104"
-          height="104"
-          rx="20"
-          fill="var(--login-panel-bg)"
-          stroke="var(--login-accent)"
-        />
-        <g stroke="var(--login-accent)" strokeWidth="2">
-          <rect x="244" y="154" width="20" height="20" rx="3" />
-          <rect x="276" y="154" width="20" height="20" rx="3" />
-          <rect x="244" y="186" width="20" height="20" rx="3" />
-          <rect x="276" y="186" width="20" height="20" rx="3" />
-        </g>
-        <g fill="var(--login-accent)" stroke="none">
-          <circle cx="194" cy="88" r="3" />
-          <circle cx="374" cy="180" r="3" />
-          <circle cx="218" cy="256" r="3" />
-        </g>
-      </g>
-    </svg>
-  )
-}
-
+/** 展示登录表单，保存会话令牌并跳转到登录后的入口。 */
 export default function LoginPage() {
   const navigate = useNavigate()
+  const location = useLocation()
+  const [searchParams] = useSearchParams()
   const { send, loading } = useRequest(login, { immediate: false })
   const [error, setError] = useState<string | null>(null)
+  const { tr } = useI18n()
+  const next = safeNextPath(searchParams.get('next'))
 
+  /** 规范化账号并提交登录，将令牌按服务端绝对过期时间保存。 */
   async function handleLogin(values: LoginRequest) {
     if (loading) return false
     setError(null)
@@ -73,42 +34,42 @@ export default function LoginPage() {
       cookie.set('token', result.accessToken, {
         expires: new Date(result.absoluteExpiresAt),
       })
-      void navigate('/home', { replace: true })
+      void navigate(next, { replace: true })
       return true
     } catch (cause) {
-      setError(cause instanceof Error ? cause.message : '登录失败，请稍后重试')
+      setError(cause instanceof Error ? cause.message : tr('登录失败，请稍后重试'))
       return false
     }
   }
 
   return (
     <main className="login-page">
-      <title>登录 - 通用平台</title>
-      <section className="login-brand-panel" aria-label="通用平台">
-        <div className="login-brand">
-          <AppstoreOutlined />
-          <span>通用平台</span>
-        </div>
+      <title>{tr('登录 - 万物')}</title>
+      <section className="login-brand-panel" aria-label={tr('万物')}>
+        <Brand variant="auth" />
         <div className="login-story">
-          <p className="login-eyebrow">UNIVERSAL PLATFORM</p>
-          <h1>
-            连接业务，
-            <br />
-            从这里开始。
-          </h1>
-          <ModuleDrawing />
+          <div className="login-orbit" aria-hidden="true">
+            <span className="login-pearl" />
+            <span className="login-orbit-ring" />
+            <span className="login-orbit-satellite" />
+          </div>
+          <p className="login-eyebrow">WANWU</p>
+          <h1>{tr('万物')}</h1>
+          <p className="login-story-caption">{tr('企业与项目工作空间')}</p>
         </div>
         <div className="login-brand-footer">
-          <span>一个平台，多种可能</span>
-          <span>UNIVERSAL PLATFORM</span>
+          <span>{tr('登录后，选择你的工作空间。')}</span>
         </div>
       </section>
 
       <section className="login-form-panel" aria-labelledby="login-title">
+        <div className="login-locale-switch">
+          <LocaleSwitch />
+        </div>
         <div className="login-form-content">
-          <p className="login-form-eyebrow">WORKSPACE</p>
-          <h2 id="login-title">登录工作台</h2>
-          <p className="login-description">欢迎回来，请使用平台账号登录。</p>
+          <p className="login-form-eyebrow">{tr('账号登录')}</p>
+          <h2 id="login-title">{tr('欢迎回到万物')}</h2>
+          <p className="login-description">{tr('登录账号，进入你的工作空间。')}</p>
           <LoginForm<LoginRequest>
             autoFocusFirstInput={false}
             requiredMark={false}
@@ -119,7 +80,7 @@ export default function LoginPage() {
               if (error) setError(null)
             }}
             submitter={{
-              searchConfig: { submitText: '登录' },
+              searchConfig: { submitText: tr('登录') },
               submitButtonProps: {
                 size: 'large',
                 loading,
@@ -128,13 +89,29 @@ export default function LoginPage() {
               },
             }}
           >
+            {searchParams.has('registered') && (
+              <Alert
+                className="login-error"
+                type="success"
+                showIcon
+                title={tr('账号已创建，请登录后继续。')}
+              />
+            )}
+            {(location.state as { passwordChanged?: boolean } | null)?.passwordChanged === true && (
+              <Alert
+                className="login-error"
+                type="success"
+                showIcon
+                title={tr('密码已修改，请使用新密码重新登录。')}
+              />
+            )}
             {error && (
               <Alert className="login-error" type="error" showIcon title={error} role="alert" />
             )}
             <ProFormText
               name="account"
-              label="账号"
-              placeholder="请输入账号"
+              label={tr('账号')}
+              placeholder={tr('请输入账号')}
               fieldProps={{
                 prefix: <UserOutlined />,
                 autoComplete: 'username',
@@ -144,24 +121,24 @@ export default function LoginPage() {
                 spellCheck: false,
               }}
               rules={[
-                { required: true, whitespace: true, message: '请输入账号' },
+                { required: true, whitespace: true, message: tr('请输入账号') },
                 {
                   min: 4,
                   max: 32,
                   transform: (value: string) => value?.trim(),
-                  message: '账号长度为 4–32 位',
+                  message: tr('账号长度为 4–32 位'),
                 },
                 {
                   pattern: ACCOUNT_PATTERN,
                   transform: (value: string) => value?.trim(),
-                  message: '账号仅支持字母、数字和下划线',
+                  message: tr('账号仅支持字母、数字和下划线'),
                 },
               ]}
             />
             <ProFormText.Password
               name="password"
-              label="密码"
-              placeholder="请输入密码"
+              label={tr('密码')}
+              placeholder={tr('请输入密码')}
               fieldProps={{
                 prefix: <LockOutlined />,
                 autoComplete: 'current-password',
@@ -169,14 +146,17 @@ export default function LoginPage() {
                 size: 'large',
               }}
               rules={[
-                { required: true, message: '请输入密码' },
-                { max: 128, message: '密码不能超过 128 位' },
+                { required: true, message: tr('请输入密码') },
+                { max: 128, message: tr('密码不能超过 128 位') },
               ]}
             />
           </LoginForm>
-          <p className="login-account-hint">请使用已开通的账号，账号区分于显示名称。</p>
+          <p className="login-account-hint">
+            {tr('还没有账号？')}
+            <Link to={buildAuthPath('/register', { next })}>{tr('注册账号')}</Link>
+          </p>
         </div>
-        <footer className="login-footer">通用平台 · 业务工作空间</footer>
+        <footer className="login-footer">{tr('万物 · 工作空间')}</footer>
       </section>
     </main>
   )

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/login/login-form.css

@@ -0,0 +1,199 @@
+@layer components {
+  .login-form-panel {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 54px 0 74px 24px;
+  }
+
+  .login-locale-switch {
+    position: absolute;
+    top: 8px;
+    right: 0;
+  }
+
+  .login-form-content {
+    width: 100%;
+    max-width: 456px;
+    padding: 44px;
+    border: 1px solid #fffffff2;
+    border-radius: 28px;
+    background: #ffffffb8;
+    box-shadow:
+      0 22px 70px #857aaf12,
+      inset 0 1px 0 #fff;
+    backdrop-filter: blur(24px);
+  }
+
+  .login-form-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0 0 18px;
+    color: #7360bc;
+    font-size: 12px;
+    letter-spacing: 0.08em;
+  }
+
+  .login-form-eyebrow::before {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #a18bdc;
+    box-shadow: 0 0 0 4px #ece6fc;
+    content: '';
+  }
+
+  .login-form-content h2 {
+    margin: 0 0 12px;
+    color: var(--login-text);
+    font-size: 28px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+
+  .login-description {
+    margin: 0 0 32px;
+    color: var(--login-muted);
+    font-size: 13px;
+    line-height: 1.8;
+  }
+
+  .login-error {
+    margin-bottom: 24px;
+  }
+
+  .login-form-content .ant-form-item {
+    margin-bottom: 22px;
+  }
+
+  .login-form-content .ant-form-item-label > label {
+    color: #5c526f;
+    font-size: 13px;
+  }
+
+  .login-form-content .ant-input-prefix {
+    margin-inline-end: 10px;
+    color: #a298b4;
+  }
+
+  .login-form-content .ant-input-affix-wrapper,
+  .login-form-content .ant-input-lg {
+    min-height: 46px;
+    border-color: #e5dfef;
+    /* 直角：圆角弧线会在输入起始位与光标重叠，让 1px 光标看起来被切掉一截 */
+    border-radius: 0;
+    background: #ffffffb3;
+  }
+
+  .login-form-content .ant-input-affix-wrapper .ant-input {
+    min-height: auto;
+    background: transparent;
+    caret-color: var(--login-accent);
+  }
+
+  .login-form-content .ant-input-affix-wrapper-focused,
+  .login-form-content .ant-input:focus {
+    border-color: var(--login-accent);
+    box-shadow: 0 0 0 3px #8270db14;
+  }
+
+  /* 浏览器自动填充会强制注入浅蓝底色和黑色文字（UA 样式且带 !important）：
+     用超长 background-color 过渡把底色冻结在透明态，保持输入框自身底色；
+     文字色只能通过 -webkit-text-fill-color 覆盖，caret-color 保证光标仍醒目 */
+  .login-form-content .ant-input:-webkit-autofill,
+  .login-form-content .ant-input:-webkit-autofill:hover,
+  .login-form-content .ant-input:-webkit-autofill:focus,
+  .login-form-content .ant-input:-webkit-autofill:active {
+    -webkit-text-fill-color: var(--login-text);
+    caret-color: var(--login-accent);
+    transition: background-color 900000000s ease-in-out 0s;
+  }
+
+  .login-form-content .ant-btn-primary {
+    height: 46px;
+    margin-top: 8px;
+    border: 0;
+    border-radius: 12px;
+    background: linear-gradient(110deg, #8c7ade, #7a6ac8);
+    box-shadow: 0 7px 18px #8270db29;
+  }
+
+  .login-form-content .ant-btn-primary:not(:disabled):hover {
+    background: linear-gradient(110deg, #9583e4, #8272d1);
+  }
+
+  .login-account-hint {
+    margin: 24px 0 0;
+    color: var(--login-muted);
+    font-size: 12px;
+    text-align: center;
+  }
+
+  .login-account-hint a {
+    margin-left: 4px;
+    color: #7660be;
+  }
+
+  .login-account-hint a:focus-visible {
+    border-radius: 3px;
+    outline: 2px solid var(--login-accent);
+    outline-offset: 4px;
+  }
+
+  .login-footer {
+    position: absolute;
+    inset: auto 0 14px 24px;
+    color: var(--login-muted);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-align: center;
+  }
+
+  .login-page-register .login-form-panel {
+    padding-top: 8px;
+    padding-bottom: 48px;
+  }
+
+  .login-page-register .login-form-content {
+    padding-block: 32px;
+  }
+
+  .login-page-register .login-description {
+    margin-bottom: 24px;
+  }
+
+  @media (max-width: 1023px) {
+    .login-form-panel {
+      padding-left: 8px;
+    }
+
+    .login-form-content {
+      padding-inline: 30px;
+    }
+  }
+
+  @media (max-width: 767px) {
+    .login-form-panel,
+    .login-page-register .login-form-panel {
+      padding: 40px 0 48px;
+    }
+
+    .login-form-content,
+    .login-page-register .login-form-content {
+      max-width: 440px;
+      padding: 32px 24px;
+      border-radius: 24px;
+    }
+
+    .login-form-content h2 {
+      font-size: 26px;
+    }
+
+    .login-footer {
+      left: 0;
+      bottom: 0;
+    }
+  }
+}