create-bubbles 0.1.25 → 0.1.27

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

@@ -0,0 +1,150 @@
+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 ProjectFormDialog, { type ProjectFormDialogRef } from './components/ProjectFormDialog'
+import {
+  initialProjects,
+  type ProjectFormValues,
+  type ProjectRecord,
+  type ProjectSearchValues,
+} 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)
+  const [search, setSearch] = useState<ProjectSearchValues>({})
+  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([])
+  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])
+          )
+            return false
+          return true
+        },
+      )
+    },
+    [projects, search],
+  )
+
+  /** 新增项目或替换编辑记录，更新页面列表并提示保存成功。 */
+  function saveProject(values: ProjectFormValues, original?: ProjectRecord) {
+    if (original) {
+      setProjects((current) =>
+        current.map((project) =>
+          project.id === original.id ? { ...values, id: original.id } : project,
+        ),
+      )
+    } else {
+      const id = `PRJ-${String(nextProjectId.current++).padStart(3, '0')}`
+      setProjects((current) => [{ ...values, id }, ...current])
+      setPage(1)
+    }
+    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(tr('已删除 {count} 个项目', { count: ids.length }))
+  }
+
+  const columns = createProjectColumns({
+    onEdit: (project) => formDialogRef.current?.show(project),
+    onDelete: (project) => deleteProjects([project.id]),
+  })
+
+  return (
+    <>
+      <FullHeightProTable<ProjectRecord, ProjectSearchValues>
+        rowKey="id"
+        columns={columns}
+        dataSource={filteredProjects}
+        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([])
+          }
+        }
+        options={{ reload: false, density: true, setting: true, fullScreen: true }}
+        toolBarRender={() => [
+          <Button
+            key="create"
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => formDialogRef.current?.show()}
+          >
+            {tr('新增项目')}
+          </Button>,
+        ]}
+        rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
+        tableAlertOptionRender={() => (
+          <Popconfirm
+            title={tr('删除选中的 {count} 个项目？', { count: selectedRowKeys.length })}
+            description={tr('删除后将从当前演示列表中移除。')}
+            onConfirm={() => deleteProjects(selectedRowKeys)}
+            okText={tr('删除')}
+            okButtonProps={{ danger: true }}
+          >
+            <Button type="link" danger size="small">
+              {tr('批量删除')}
+            </Button>
+          </Popconfirm>
+        )}
+        pagination={{
+          current: Math.min(page, Math.max(1, Math.ceil(filteredProjects.length / pageSize))),
+          pageSize,
+          showSizeChanger: true,
+          pageSizeOptions: [6, 12, 24],
+          showTotal: (total) => tr('共 {count} 个项目', { count: total }),
+          /** 同步分页页码与每页条数。 */
+          onChange: (current, size) => {
+            setPage(current)
+            setPageSize(size)
+          },
+        }}
+        locale={{
+          emptyText: (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              description={tr('暂无匹配项目，请调整筛选条件或新增项目。')}
+            />
+          ),
+        }}
+      />
+      <ProjectFormDialog ref={formDialogRef} onSave={saveProject} />
+    </>
+  )
+}

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

@@ -0,0 +1,23 @@
+@layer components {
+  .demo {
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    padding: 24px 8px;
+  }
+
+  .icon {
+    padding: 18px;
+    border-radius: 12px;
+    background: var(--ant-color-primary-bg);
+    color: var(--ant-color-primary);
+    font-size: 28px;
+  }
+
+  @media (max-width: 575px) {
+    .demo {
+      flex-direction: column;
+      padding: 16px 0;
+    }
+  }
+}

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

@@ -1,47 +1,33 @@
-import { createJsonStorage, i18n } from '@bubblesjs/i18n-core'
-import I18nProvider, { useI18n } from '@bubblesjs/i18n-react'
-import { Button } from 'antd'
+import { ArrowRightOutlined, TableOutlined } from '@ant-design/icons'
+import { PageContainer, ProCard } from '@ant-design/pro-components'
+import { Button, Tag, Typography } from 'antd'
+import { useI18n } from '@bubblesjs/i18n-react'
+import styles from './index.module.css'
 
-const leftStore = await i18n.init({
-  locale: 'zh_CN',
-  loaderMessage: async (locale?: string) => (await import(`@/locales/${locale}.json`))?.default,
-  storageKey: 'i18n-home-left',
-  storage: createJsonStorage(localStorage),
-})
+/** 展示基础工作台的业务模块入口。 */
+export default function Home() {
+  const { tr } = useI18n()
 
-const rightStore = await i18n.init({
-  locale: 'en_US',
-  loaderMessage: async (locale?: string) => (await import(`@/locales/${locale}.json`))?.default,
-  storageKey: 'i18n-home-right',
-  storage: createJsonStorage(localStorage),
-})
-
-const I18nTestNode = ({ title, switchLocale }: { title: string; switchLocale: string }) => {
-  const { tr, loadLocale, locale } = useI18n()
-
-  return (
-    <section className="flex min-w-64 flex-col gap-3 rounded border border-gray-200 p-4">
-      <h2 className="text-lg font-medium">{title}</h2>
-      <div>{tr('保存')}</div>
-      <div>{tr('你好1')}</div>
-      <div>目前语言: {locale}</div>
-      <Button onClick={() => void loadLocale(switchLocale)}>切换到 {switchLocale}</Button>
-    </section>
-  )
-}
-
-const Home = () => {
   return (
-    <div className="flex min-h-screen w-full items-center justify-center gap-6 bg-white p-6">
-      <I18nProvider store={leftStore}>
-        <I18nTestNode title="节点 A" switchLocale="en_US" />
-      </I18nProvider>
-
-      <I18nProvider store={rightStore}>
-        <I18nTestNode title="节点 B" switchLocale="zh_CN" />
-      </I18nProvider>
-    </div>
+    <PageContainer title={tr('工作台')} content={tr('你的业务工作空间。')}>
+      <ProCard title={tr('业务模块')} variant="outlined">
+        <div className={styles.demo}>
+          <TableOutlined className={styles.icon} />
+          <div>
+            <Typography.Title level={4}>
+              {tr('项目管理')} <Tag color="cyan">Demo</Tag>
+            </Typography.Title>
+            <Typography.Paragraph type="secondary">
+              {tr('使用 ProTable 管理项目，体验搜索筛选、分页、新增编辑和批量操作。')}
+            </Typography.Paragraph>
+            <Link to="/examples/pro-table">
+              <Button type="primary" icon={<ArrowRightOutlined />} iconPlacement="end">
+                {tr('打开 ProTable 示例')}
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </ProCard>
+    </PageContainer>
   )
 }
-
-export default Home

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,163 @@
+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 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'
+
+/** 展示登录表单，保存会话令牌并跳转到登录后的入口。 */
+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)
+    try {
+      const result = await send({
+        account: normalizeAccount(values.account),
+        password: values.password,
+      })
+      cookie.set('token', result.accessToken, {
+        expires: new Date(result.absoluteExpiresAt),
+      })
+      void navigate(next, { replace: true })
+      return true
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : tr('登录失败，请稍后重试'))
+      return false
+    }
+  }
+
+  return (
+    <main className="login-page">
+      <title>{tr('登录 - 万物')}</title>
+      <section className="login-brand-panel" aria-label={tr('万物')}>
+        <Brand variant="auth" />
+        <div className="login-story">
+          <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>{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">{tr('账号登录')}</p>
+          <h2 id="login-title">{tr('欢迎回到万物')}</h2>
+          <p className="login-description">{tr('登录账号，进入你的工作空间。')}</p>
+          <LoginForm<LoginRequest>
+            autoFocusFirstInput={false}
+            requiredMark={false}
+            contentStyle={{ width: '100%', minWidth: 0 }}
+            containerStyle={{ padding: 0, minWidth: 0 }}
+            onFinish={handleLogin}
+            onValuesChange={() => {
+              if (error) setError(null)
+            }}
+            submitter={{
+              searchConfig: { submitText: tr('登录') },
+              submitButtonProps: {
+                size: 'large',
+                loading,
+                icon: <ArrowRightOutlined />,
+                iconPlacement: 'end',
+              },
+            }}
+          >
+            {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={tr('账号')}
+              placeholder={tr('请输入账号')}
+              fieldProps={{
+                prefix: <UserOutlined />,
+                autoComplete: 'username',
+                maxLength: 32,
+                size: 'large',
+                autoCapitalize: 'none',
+                spellCheck: false,
+              }}
+              rules={[
+                { required: true, whitespace: true, message: tr('请输入账号') },
+                {
+                  min: 4,
+                  max: 32,
+                  transform: (value: string) => value?.trim(),
+                  message: tr('账号长度为 4–32 位'),
+                },
+                {
+                  pattern: ACCOUNT_PATTERN,
+                  transform: (value: string) => value?.trim(),
+                  message: tr('账号仅支持字母、数字和下划线'),
+                },
+              ]}
+            />
+            <ProFormText.Password
+              name="password"
+              label={tr('密码')}
+              placeholder={tr('请输入密码')}
+              fieldProps={{
+                prefix: <LockOutlined />,
+                autoComplete: 'current-password',
+                maxLength: 128,
+                size: 'large',
+              }}
+              rules={[
+                { required: true, message: tr('请输入密码') },
+                { max: 128, message: tr('密码不能超过 128 位') },
+              ]}
+            />
+          </LoginForm>
+          <p className="login-account-hint">
+            {tr('还没有账号？')}
+            <Link to={buildAuthPath('/register', { next })}>{tr('注册账号')}</Link>
+          </p>
+        </div>
+        <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;
+    }
+  }
+}