create-bubbles 0.1.26 → 0.1.27

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

@@ -1,3 +1,5 @@
+import { tr } from '@/i18n'
+
 export type ProjectStatus = 'planning' | 'active' | 'paused' | 'completed'
 export type ProjectPriority = 'high' | 'medium' | 'low'
 
@@ -23,17 +25,23 @@ export interface ProjectSearchValues {
   dueDate?: [string, string]
 }
 
-export const statusOptions = {
-  planning: { text: '待启动', status: 'Default' },
-  active: { text: '进行中', status: 'Processing' },
-  paused: { text: '已暂停', status: 'Warning' },
-  completed: { text: '已完成', status: 'Success' },
+/** 按当前应用语言生成项目状态选项。 */
+export function getStatusOptions() {
+  return {
+    planning: { text: tr('待启动'), status: 'Default' },
+    active: { text: tr('进行中'), status: 'Processing' },
+    paused: { text: tr('已暂停'), status: 'Warning' },
+    completed: { text: tr('已完成'), status: 'Success' },
+  }
 }
 
-export const priorityOptions = {
-  high: { text: '高', color: 'volcano' },
-  medium: { text: '中', color: 'gold' },
-  low: { text: '低', color: 'default' },
+/** 按当前应用语言生成项目优先级选项。 */
+export function getPriorityOptions() {
+  return {
+    high: { text: tr('高'), color: 'volcano' },
+    medium: { text: tr('中'), color: 'gold' },
+    low: { text: tr('低'), color: 'default' },
+  }
 }
 
 export const owners = ['林知夏', '陈一舟', '周予安', '许清和', '沈亦宁']
@@ -62,16 +70,18 @@ const projectNames = [
 const statuses: ProjectStatus[] = ['active', 'active', 'planning', 'active', 'completed', 'paused']
 const priorities: ProjectPriority[] = ['high', 'medium', 'low']
 
-export const initialProjects: ProjectRecord[] = projectNames.map((name, index) => {
-  const status = statuses[index % statuses.length]!
-  return {
-    id: `PRJ-${String(index + 1).padStart(3, '0')}`,
-    name,
-    owner: owners[index % owners.length]!,
-    status,
-    priority: priorities[index % priorities.length]!,
-    progress: status === 'completed' ? 100 : status === 'planning' ? 0 : 24 + ((index * 13) % 65),
-    dueDate: `2026-${index < 12 ? '09' : '10'}-${String(10 + (index % 12)).padStart(2, '0')}`,
-    description: `围绕${name}完善团队协作与交付体验。`,
-  }
-})
+export const initialProjects: ProjectRecord[] = projectNames.map(
+  /** 按固定名称、负责人和状态序列生成可重复的项目演示数据。 */ (name, index) => {
+    const status = statuses[index % statuses.length]!
+    return {
+      id: `PRJ-${String(index + 1).padStart(3, '0')}`,
+      name,
+      owner: owners[index % owners.length]!,
+      status,
+      priority: priorities[index % priorities.length]!,
+      progress: status === 'completed' ? 100 : status === 'planning' ? 0 : 24 + ((index * 13) % 65),
+      dueDate: `2026-${index < 12 ? '09' : '10'}-${String(10 + (index % 12)).padStart(2, '0')}`,
+      description: `围绕${name}完善团队协作与交付体验。`,
+    }
+  },
+)

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

@@ -7,9 +7,9 @@ import {
   ProFormTextArea,
   type ProFormInstance,
 } from '@ant-design/pro-components'
+import { useI18n } from '@bubblesjs/i18n-react'
 import { Button } from 'antd'
-import { useImperativeHandle, useRef, useState, type Ref } from 'react'
-import { owners, priorityOptions, statusOptions, type ProjectFormValues } from '../../config'
+import { getPriorityOptions, getStatusOptions, owners, type ProjectFormValues } from '../../config'
 import { currentUser, type DraftProjectRecord, type SaveProjectInput } from '../config'
 
 export interface DraftProjectFormDialogRef {
@@ -22,7 +22,9 @@ interface DraftProjectFormDialogProps {
   onSave: (input: SaveProjectInput) => boolean
 }
 
+/** 提供项目编辑弹窗，允许保存不完整草稿或校验后发布。 */
 export default function DraftProjectFormDialog({ ref, onSave }: DraftProjectFormDialogProps) {
+  const { tr } = useI18n()
   const formRef = useRef<ProFormInstance<ProjectFormValues>>(undefined)
   const [open, setOpen] = useState(false)
   const [record, setRecord] = useState<DraftProjectRecord>()
@@ -33,6 +35,7 @@ export default function DraftProjectFormDialog({ ref, onSave }: DraftProjectForm
   }
 
   useImperativeHandle(ref, () => ({
+    /** 载入待编辑记录并打开表单；未传记录时进入新增模式。 */
     show(project) {
       setRecord(project)
       setOpen(true)
@@ -44,7 +47,7 @@ export default function DraftProjectFormDialog({ ref, onSave }: DraftProjectForm
     <ModalForm<ProjectFormValues>
       name="draft-project-editor"
       formRef={formRef}
-      title={isPublished ? '编辑项目' : record ? '继续编辑草稿' : '新增项目'}
+      title={isPublished ? tr('编辑项目') : record ? tr('继续编辑草稿') : tr('新增项目')}
       open={open}
       width={600}
       grid
@@ -60,79 +63,83 @@ export default function DraftProjectFormDialog({ ref, onSave }: DraftProjectForm
       submitter={{
         render: (props) => [
           <Button key="cancel" onClick={hide}>
-            取消
+            {tr('取消')}
           </Button>,
           !isPublished && (
             <Button
               key="draft"
-              onClick={() => {
-                const values = formRef.current?.getFieldsFormatValue?.()
-                if (values && onSave({ values, original: record, stage: 'draft' })) hide()
-              }}
+              onClick={
+                /** 读取未强制校验的表单内容保存草稿，保存成功后关闭弹窗。 */ () => {
+                  const values = formRef.current?.getFieldsFormatValue?.()
+                  if (values && onSave({ values, original: record, stage: 'draft' })) hide()
+                }
+              }
             >
-              保存草稿
+              {tr('保存草稿')}
             </Button>
           ),
           <Button key="submit" type="primary" onClick={() => props.submit()}>
-            {isPublished ? '保存项目' : '提交'}
+            {isPublished ? tr('保存项目') : tr('提交')}
           </Button>,
         ],
       }}
-      onFinish={async (values) => {
-        const saved = onSave({ values, original: record, stage: 'published' })
-        if (saved) hide()
-        return saved
-      }}
+      onFinish={
+        /** 提交校验通过的项目为已发布状态，保存成功后关闭弹窗。 */ async (values) => {
+          const saved = onSave({ values, original: record, stage: 'published' })
+          if (saved) hide()
+          return saved
+        }
+      }
     >
       <ProFormText
         name="name"
-        label="项目名称"
-        placeholder="例如：客户服务工作台"
-        rules={[{ required: true, whitespace: true, message: '请输入项目名称' }]}
+        label={tr('项目名称')}
+        placeholder={tr('例如：客户服务工作台')}
+        rules={[{ required: true, whitespace: true, message: tr('请输入项目名称') }]}
         fieldProps={{ maxLength: 40, showCount: true }}
-        extra={!isPublished ? '信息未填完也可以保存草稿，提交时需补齐必填项。' : undefined}
+        extra={!isPublished ? tr('信息未填完也可以保存草稿，提交时需补齐必填项。') : undefined}
       />
       <ProFormSelect
         name="owner"
-        label="负责人"
+        label={tr('负责人')}
         options={owners}
         colProps={{ xs: 24, sm: 12 }}
-        rules={[{ required: true, message: '请选择负责人' }]}
+        rules={[{ required: true, message: tr('请选择负责人') }]}
       />
       <ProFormDatePicker
         name="dueDate"
-        label="截止日期"
+        label={tr('截止日期')}
         colProps={{ xs: 24, sm: 12 }}
-        rules={[{ required: true, message: '请选择截止日期' }]}
+        rules={[{ required: true, message: tr('请选择截止日期') }]}
         fieldProps={{ style: { width: '100%' } }}
       />
       <ProFormSelect
         name="status"
-        label="项目状态"
-        valueEnum={statusOptions}
+        label={tr('项目状态')}
+        valueEnum={getStatusOptions()}
         colProps={{ xs: 24, sm: 12 }}
-        rules={[{ required: true, message: '请选择项目状态' }]}
+        rules={[{ required: true, message: tr('请选择项目状态') }]}
       />
       <ProFormSelect
         name="priority"
-        label="优先级"
-        valueEnum={priorityOptions}
+        label={tr('优先级')}
+        valueEnum={getPriorityOptions()}
         colProps={{ xs: 24, sm: 12 }}
-        rules={[{ required: true, message: '请选择优先级' }]}
+        rules={[{ required: true, message: tr('请选择优先级') }]}
       />
       <ProFormDigit
         name="progress"
-        label="完成进度（%）"
+        label={tr('完成进度（%）')}
         min={0}
         max={100}
         fieldProps={{ precision: 0 }}
-        rules={[{ required: true, message: '请输入完成进度' }]}
-        extra="待启动项目保存为 0%，已完成项目保存为 100%。"
+        rules={[{ required: true, message: tr('请输入完成进度') }]}
+        extra={tr('待启动项目保存为 0%，已完成项目保存为 100%。')}
       />
       <ProFormTextArea
         name="description"
-        label="项目说明"
-        placeholder="补充项目目标或备注（选填）"
+        label={tr('项目说明')}
+        placeholder={tr('补充项目目标或备注（选填）')}
         fieldProps={{ maxLength: 200, showCount: true, rows: 3 }}
       />
     </ModalForm>

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

@@ -2,7 +2,8 @@ import { FolderOutlined } from '@ant-design/icons'
 import type { ProColumns } from '@ant-design/pro-components'
 import { Avatar, Badge, Button, Divider, Popconfirm, Space, Tag, Tooltip } from 'antd'
 import dayjs from 'dayjs'
-import { owners, statusOptions } from '../../config'
+import { tr } from '@/i18n'
+import { getStatusOptions, owners } from '../../config'
 import type { DraftProjectRecord } from '.'
 import styles from '../index.module.css'
 
@@ -11,16 +12,19 @@ interface ProjectColumnOptions {
   onDelete: (project: DraftProjectRecord) => void
 }
 
+/** 按项目或草稿视图生成列配置，展示缺失字段和继续编辑入口。 */
 export function createDraftProjectColumns({
   onEdit,
   onDelete,
 }: ProjectColumnOptions): ProColumns<DraftProjectRecord>[] {
+  const statusOptions = getStatusOptions()
+
   return [
     {
-      title: '项目名称',
+      title: tr('项目名称'),
       dataIndex: 'name',
       width: 360,
-      fieldProps: { placeholder: '搜索项目名称或编号', allowClear: true },
+      fieldProps: { placeholder: tr('搜索项目名称或编号'), allowClear: true },
       render: (_, project) => (
         <div className={styles.project}>
           <span className={styles.projectIcon}>
@@ -29,11 +33,11 @@ export function createDraftProjectColumns({
           <div className={styles.projectInfo}>
             <Space size={8}>
               <Button type="link" className={styles.projectName} onClick={() => onEdit(project)}>
-                {project.name || '未命名项目'}
+                {project.name || tr('未命名项目')}
               </Button>
               {project.stage === 'draft' && (
                 <Tag color="orange" variant="filled">
-                  草稿
+                  {tr('草稿')}
                 </Tag>
               )}
             </Space>
@@ -43,26 +47,26 @@ export function createDraftProjectColumns({
       ),
     },
     {
-      title: '项目状态',
+      title: tr('项目状态'),
       dataIndex: 'status',
       width: 140,
       valueType: 'select',
       valueEnum: statusOptions,
-      fieldProps: { placeholder: '全部状态' },
+      fieldProps: { placeholder: tr('全部状态') },
       render: (dom, project) =>
         project.status ? (
           dom
         ) : (
-          <Badge status="default" text={<span className={styles.muted}>未填写</span>} />
+          <Badge status="default" text={<span className={styles.muted}>{tr('未填写')}</span>} />
         ),
     },
     {
-      title: '负责人',
+      title: tr('负责人'),
       dataIndex: 'owner',
       width: 150,
       valueType: 'select',
       fieldProps: {
-        placeholder: '全部负责人',
+        placeholder: tr('全部负责人'),
         options: owners.map((owner) => ({ label: owner, value: owner })),
       },
       render: (_, project) =>
@@ -74,21 +78,22 @@ export function createDraftProjectColumns({
             {project.owner}
           </Space>
         ) : (
-          <span className={styles.muted}>未填写</span>
+          <span className={styles.muted}>{tr('未填写')}</span>
         ),
     },
     {
-      title: '最后保存时间',
+      title: tr('最后保存时间'),
       dataIndex: 'savedAt',
       width: 200,
       search: false,
       sorter: (first, second) => first.savedAt.localeCompare(second.savedAt),
+      /** 将保存时间转换为今天、昨天或具体日期，并保留完整时间提示。 */
       render: (_, project) => {
         const date = dayjs(project.savedAt)
         const prefix = date.isSame(dayjs(), 'day')
-          ? '今天'
+          ? tr('今天')
           : date.isSame(dayjs().subtract(1, 'day'), 'day')
-            ? '昨天'
+            ? tr('昨天')
             : date.format('YYYY-MM-DD')
         return (
           <Tooltip title={date.format('YYYY-MM-DD HH:mm:ss')}>
@@ -100,24 +105,26 @@ export function createDraftProjectColumns({
       },
     },
     {
-      title: '操作',
+      title: tr('操作'),
       valueType: 'option',
       width: 170,
       fixed: 'right',
       render: (_, project) => (
         <Space size={0} separator={<Divider orientation="vertical" />}>
           <Button type="link" size="small" onClick={() => onEdit(project)}>
-            {project.stage === 'draft' ? '继续编辑' : '编辑'}
+            {project.stage === 'draft' ? tr('继续编辑') : tr('编辑')}
           </Button>
           <Popconfirm
-            title={project.stage === 'draft' ? '删除草稿' : '删除项目'}
-            description={`确定删除「${project.name || '未命名项目'}」吗？`}
+            title={project.stage === 'draft' ? tr('删除草稿') : tr('删除项目')}
+            description={tr('确定删除「{name}」吗？', {
+              name: project.name || tr('未命名项目'),
+            })}
             onConfirm={() => onDelete(project)}
-            okText="删除"
+            okText={tr('删除')}
             okButtonProps={{ danger: true }}
           >
             <Button type="link" danger size="small">
-              删除
+              {tr('删除')}
             </Button>
           </Popconfirm>
         </Space>

package/template-vp-monorepo-react-nestjs/apps/web/src/pages/examples/pro-table/draft/config/projects.ts

@@ -1,7 +1,9 @@
 import type { DraftTableView } from '@/components/DraftProTable/DraftProTable'
+import { tr } from '@/i18n'
 import type { ProjectSearchValues } from '../../config'
 import { currentUser, type DraftProjectRecord, type SaveProjectInput } from '.'
 
+/** 规范化项目字段并生成新编号，以最新记录替换同编号项目或草稿。 */
 export function saveProjectRecord(records: DraftProjectRecord[], input: SaveProjectInput) {
   const { values, original, stage } = input
   const nextId =
@@ -20,6 +22,7 @@ export function saveProjectRecord(records: DraftProjectRecord[], input: SaveProj
   return [record, ...records.filter((item) => item.id !== record.id)]
 }
 
+/** 根据列表或个人草稿视图和搜索条件筛选记录，并按保存时间倒序排列。 */
 export function filterProjectRecords({
   records,
   view,
@@ -31,18 +34,23 @@ export function filterProjectRecords({
 }) {
   const keyword = search.name?.trim().toLowerCase()
   return records
-    .filter((record) => {
-      if (
-        view === 'draft'
-          ? record.stage !== 'draft' || record.createdBy !== currentUser
-          : record.stage !== 'published'
-      )
-        return false
-      if (keyword && !`${record.name ?? '未命名项目'} ${record.id}`.toLowerCase().includes(keyword))
-        return false
-      if (search.status && record.status !== search.status) return false
-      if (search.owner && record.owner !== search.owner) return false
-      return true
-    })
+    .filter(
+      /** 限制当前草稿作者或发布阶段，再校验关键字、状态和负责人。 */ (record) => {
+        if (
+          view === 'draft'
+            ? record.stage !== 'draft' || record.createdBy !== currentUser
+            : record.stage !== 'published'
+        )
+          return false
+        if (
+          keyword &&
+          !`${record.name ?? tr('未命名项目')} ${record.id}`.toLowerCase().includes(keyword)
+        )
+          return false
+        if (search.status && record.status !== search.status) return false
+        if (search.owner && record.owner !== search.owner) return false
+        return true
+      },
+    )
     .sort((first, second) => second.savedAt.localeCompare(first.savedAt))
 }

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

@@ -2,8 +2,8 @@ import DraftProTable, { type DraftTableView } from '@/components/DraftProTable/D
 import { local } from '@/utils/storage/session'
 import { PlusOutlined } from '@ant-design/icons'
 import type { ProFormInstance } from '@ant-design/pro-components'
+import { useI18n } from '@bubblesjs/i18n-react'
 import { App, Button, Empty, Popconfirm } from 'antd'
-import { useMemo, useRef, useState, type Key } from 'react'
 import type { ProjectSearchValues } from '../config'
 import DraftProjectFormDialog, {
   type DraftProjectFormDialogRef,
@@ -18,18 +18,22 @@ import {
 import { createDraftProjectColumns } from './config/columns'
 import { filterProjectRecords, saveProjectRecord } from './config/projects'
 
+/** 演示已发布项目与个人草稿的切换、编辑及本地持久化。 */
 export default function ProTableDraftExample() {
   const { message } = App.useApp()
+  const { tr } = useI18n()
   const dialogRef = useRef<DraftProjectFormDialogRef>(null)
   const searchFormRef = useRef<ProFormInstance>(undefined)
-  const [records, setRecords] = useState<DraftProjectRecord[]>(() => {
-    try {
-      const saved = local.get<DraftProjectRecord[]>(storageKey)
-      return Array.isArray(saved) ? saved : initialRecords
-    } catch {
-      return initialRecords
-    }
-  })
+  const [records, setRecords] = useState<DraftProjectRecord[]>(
+    /** 优先恢复浏览器内的草稿记录，存储不可读或数据形态错误时使用演示初始值。 */ () => {
+      try {
+        const saved = local.get<DraftProjectRecord[]>(storageKey)
+        return Array.isArray(saved) ? saved : initialRecords
+      } catch {
+        return initialRecords
+      }
+    },
+  )
   const [view, setView] = useState<DraftTableView>('list')
   const [search, setSearch] = useState<ProjectSearchValues>({})
   const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([])
@@ -43,6 +47,7 @@ export default function ProTableDraftExample() {
     (record) => record.stage === 'draft' && record.createdBy === currentUser,
   ).length
 
+  /** 重置查询表单、行选择及页码，使视图从第一页重新展示。 */
   function resetSearch() {
     searchFormRef.current?.resetFields()
     setSearch({})
@@ -50,39 +55,48 @@ export default function ProTableDraftExample() {
     setPage(1)
   }
 
+  /** 切换列表与草稿视图，同时清除旧视图的查询和选择状态。 */
   function changeView(next: DraftTableView) {
     setView(next)
     resetSearch()
   }
 
+  /** 先写入浏览器存储再更新页面数据，写入失败时保留现有记录。 */
   function persist(next: DraftProjectRecord[]) {
     try {
       local.set(storageKey, next)
       setRecords(next)
       return true
     } catch {
-      void message.error('保存失败，请检查浏览器存储空间后重试。')
+      void message.error(tr('保存失败，请检查浏览器存储空间后重试。'))
       return false
     }
   }
 
+  /** 持久化新增或编辑后的项目，按保存阶段切换视图并提示结果。 */
   function saveProject(input: SaveProjectInput) {
     if (!persist(saveProjectRecord(records, input))) return false
     changeView(input.stage === 'draft' ? 'draft' : 'list')
     void message.success(
       input.stage === 'draft'
-        ? '草稿已保存'
+        ? tr('草稿已保存')
         : input.original?.stage === 'published'
-          ? '项目已保存'
-          : '提交成功，已进入项目列表',
+          ? tr('项目已保存')
+          : tr('提交成功，已进入项目列表'),
     )
     return true
   }
 
+  /** 持久化移除所选项目或草稿，成功后清除行选择并提示结果。 */
   function deleteProjects(ids: Key[]) {
     if (!persist(records.filter((record) => !ids.includes(record.id)))) return
     setSelectedRowKeys([])
-    void message.success(`已删除 ${ids.length} 个${view === 'draft' ? '草稿' : '项目'}`)
+    void message.success(
+      tr('已删除 {count} 个{type}', {
+        count: ids.length,
+        type: view === 'draft' ? tr('草稿') : tr('项目'),
+      }),
+    )
   }
 
   return (
@@ -100,11 +114,13 @@ export default function ProTableDraftExample() {
         formRef={searchFormRef}
         form={{ name: 'draft-project-search' }}
         search={{ labelWidth: 'auto', defaultCollapsed: true }}
-        onSubmit={(values) => {
-          setSearch(values)
-          setPage(1)
-          setSelectedRowKeys([])
-        }}
+        onSubmit={
+          /** 应用新的项目查询条件，同时回到第一页并清除行选择。 */ (values) => {
+            setSearch(values)
+            setPage(1)
+            setSelectedRowKeys([])
+          }
+        }
         onReset={resetSearch}
         options={{ reload: () => resetSearch(), density: false, setting: true }}
         toolBarRender={() => [
@@ -114,19 +130,22 @@ export default function ProTableDraftExample() {
             icon={<PlusOutlined />}
             onClick={() => dialogRef.current?.show()}
           >
-            新增项目
+            {tr('新增项目')}
           </Button>,
         ]}
         rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
         tableAlertOptionRender={() => (
           <Popconfirm
-            title={`删除选中的 ${selectedRowKeys.length} 个${view === 'draft' ? '草稿' : '项目'}？`}
+            title={tr('删除选中的 {count} 个{type}？', {
+              count: selectedRowKeys.length,
+              type: view === 'draft' ? tr('草稿') : tr('项目'),
+            })}
             onConfirm={() => deleteProjects(selectedRowKeys)}
-            okText="删除"
+            okText={tr('删除')}
             okButtonProps={{ danger: true }}
           >
             <Button type="link" danger size="small">
-              批量删除
+              {tr('批量删除')}
             </Button>
           </Popconfirm>
         )}
@@ -136,7 +155,8 @@ export default function ProTableDraftExample() {
           showSizeChanger: true,
           showQuickJumper: true,
           pageSizeOptions: [10, 20, 50],
-          showTotal: (total) => `共 ${total} 条`,
+          showTotal: (total) => tr('共 {count} 条', { count: total }),
+          /** 同步分页页码与每页条数。 */
           onChange: (current, size) => {
             setPage(current)
             setPageSize(size)
@@ -149,9 +169,9 @@ export default function ProTableDraftExample() {
               description={
                 view === 'draft'
                   ? draftCount > 0
-                    ? '暂无匹配草稿，请调整筛选条件。'
-                    : '暂无草稿，可以新增项目并保存为草稿。'
-                  : '暂无匹配项目，请调整筛选条件或新增项目。'
+                    ? tr('暂无匹配草稿，请调整筛选条件。')
+                    : tr('暂无草稿，可以新增项目并保存为草稿。')
+                  : tr('暂无匹配项目，请调整筛选条件或新增项目。')
               }
             />
           ),