create-bubbles 0.1.25 → 0.1.27

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

@@ -0,0 +1,147 @@
+import {
+  ModalForm,
+  ProFormDatePicker,
+  ProFormDigit,
+  ProFormSelect,
+  ProFormText,
+  ProFormTextArea,
+  type ProFormInstance,
+} from '@ant-design/pro-components'
+import { useI18n } from '@bubblesjs/i18n-react'
+import { Button } from 'antd'
+import { getPriorityOptions, getStatusOptions, owners, type ProjectFormValues } from '../../config'
+import { currentUser, type DraftProjectRecord, type SaveProjectInput } from '../config'
+
+export interface DraftProjectFormDialogRef {
+  show: (record?: DraftProjectRecord) => void
+  hide: () => void
+}
+
+interface DraftProjectFormDialogProps {
+  ref: Ref<DraftProjectFormDialogRef>
+  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>()
+  const isPublished = record?.stage === 'published'
+
+  function hide() {
+    setOpen(false)
+  }
+
+  useImperativeHandle(ref, () => ({
+    /** 载入待编辑记录并打开表单；未传记录时进入新增模式。 */
+    show(project) {
+      setRecord(project)
+      setOpen(true)
+    },
+    hide,
+  }))
+
+  return (
+    <ModalForm<ProjectFormValues>
+      name="draft-project-editor"
+      formRef={formRef}
+      title={isPublished ? tr('编辑项目') : record ? tr('继续编辑草稿') : tr('新增项目')}
+      open={open}
+      width={600}
+      grid
+      rowProps={{ gutter: 16 }}
+      dateFormatter="string"
+      initialValues={
+        record ?? { owner: currentUser, status: 'planning', priority: 'medium', progress: 0 }
+      }
+      modalProps={{ destroyOnHidden: true, onCancel: hide }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      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()
+                }
+              }
+            >
+              {tr('保存草稿')}
+            </Button>
+          ),
+          <Button key="submit" type="primary" onClick={() => props.submit()}>
+            {isPublished ? tr('保存项目') : tr('提交')}
+          </Button>,
+        ],
+      }}
+      onFinish={
+        /** 提交校验通过的项目为已发布状态，保存成功后关闭弹窗。 */ async (values) => {
+          const saved = onSave({ values, original: record, stage: 'published' })
+          if (saved) hide()
+          return saved
+        }
+      }
+    >
+      <ProFormText
+        name="name"
+        label={tr('项目名称')}
+        placeholder={tr('例如：客户服务工作台')}
+        rules={[{ required: true, whitespace: true, message: tr('请输入项目名称') }]}
+        fieldProps={{ maxLength: 40, showCount: true }}
+        extra={!isPublished ? tr('信息未填完也可以保存草稿，提交时需补齐必填项。') : undefined}
+      />
+      <ProFormSelect
+        name="owner"
+        label={tr('负责人')}
+        options={owners}
+        colProps={{ xs: 24, sm: 12 }}
+        rules={[{ required: true, message: tr('请选择负责人') }]}
+      />
+      <ProFormDatePicker
+        name="dueDate"
+        label={tr('截止日期')}
+        colProps={{ xs: 24, sm: 12 }}
+        rules={[{ required: true, message: tr('请选择截止日期') }]}
+        fieldProps={{ style: { width: '100%' } }}
+      />
+      <ProFormSelect
+        name="status"
+        label={tr('项目状态')}
+        valueEnum={getStatusOptions()}
+        colProps={{ xs: 24, sm: 12 }}
+        rules={[{ required: true, message: tr('请选择项目状态') }]}
+      />
+      <ProFormSelect
+        name="priority"
+        label={tr('优先级')}
+        valueEnum={getPriorityOptions()}
+        colProps={{ xs: 24, sm: 12 }}
+        rules={[{ required: true, message: tr('请选择优先级') }]}
+      />
+      <ProFormDigit
+        name="progress"
+        label={tr('完成进度（%）')}
+        min={0}
+        max={100}
+        fieldProps={{ precision: 0 }}
+        rules={[{ required: true, message: tr('请输入完成进度') }]}
+        extra={tr('待启动项目保存为 0%，已完成项目保存为 100%。')}
+      />
+      <ProFormTextArea
+        name="description"
+        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

@@ -0,0 +1,134 @@
+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 { tr } from '@/i18n'
+import { getStatusOptions, owners } from '../../config'
+import type { DraftProjectRecord } from '.'
+import styles from '../index.module.css'
+
+interface ProjectColumnOptions {
+  onEdit: (project: DraftProjectRecord) => void
+  onDelete: (project: DraftProjectRecord) => void
+}
+
+/** 按项目或草稿视图生成列配置，展示缺失字段和继续编辑入口。 */
+export function createDraftProjectColumns({
+  onEdit,
+  onDelete,
+}: ProjectColumnOptions): ProColumns<DraftProjectRecord>[] {
+  const statusOptions = getStatusOptions()
+
+  return [
+    {
+      title: tr('项目名称'),
+      dataIndex: 'name',
+      width: 360,
+      fieldProps: { placeholder: tr('搜索项目名称或编号'), allowClear: true },
+      render: (_, project) => (
+        <div className={styles.project}>
+          <span className={styles.projectIcon}>
+            <FolderOutlined />
+          </span>
+          <div className={styles.projectInfo}>
+            <Space size={8}>
+              <Button type="link" className={styles.projectName} onClick={() => onEdit(project)}>
+                {project.name || tr('未命名项目')}
+              </Button>
+              {project.stage === 'draft' && (
+                <Tag color="orange" variant="filled">
+                  {tr('草稿')}
+                </Tag>
+              )}
+            </Space>
+            <span className={styles.projectId}>{project.id}</span>
+          </div>
+        </div>
+      ),
+    },
+    {
+      title: tr('项目状态'),
+      dataIndex: 'status',
+      width: 140,
+      valueType: 'select',
+      valueEnum: statusOptions,
+      fieldProps: { placeholder: tr('全部状态') },
+      render: (dom, project) =>
+        project.status ? (
+          dom
+        ) : (
+          <Badge status="default" text={<span className={styles.muted}>{tr('未填写')}</span>} />
+        ),
+    },
+    {
+      title: tr('负责人'),
+      dataIndex: 'owner',
+      width: 150,
+      valueType: 'select',
+      fieldProps: {
+        placeholder: tr('全部负责人'),
+        options: owners.map((owner) => ({ label: owner, value: owner })),
+      },
+      render: (_, project) =>
+        project.owner ? (
+          <Space size={8}>
+            <Avatar size={28} className={styles.avatar}>
+              {project.owner.slice(0, 1)}
+            </Avatar>
+            {project.owner}
+          </Space>
+        ) : (
+          <span className={styles.muted}>{tr('未填写')}</span>
+        ),
+    },
+    {
+      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')}>
+            <span className={styles.muted}>
+              {prefix} {date.format('HH:mm')}
+            </span>
+          </Tooltip>
+        )
+      },
+    },
+    {
+      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' ? tr('继续编辑') : tr('编辑')}
+          </Button>
+          <Popconfirm
+            title={project.stage === 'draft' ? tr('删除草稿') : tr('删除项目')}
+            description={tr('确定删除「{name}」吗？', {
+              name: project.name || tr('未命名项目'),
+            })}
+            onConfirm={() => onDelete(project)}
+            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/index.ts

@@ -0,0 +1,39 @@
+import dayjs from 'dayjs'
+import { initialProjects, owners, type ProjectFormValues } from '../../config'
+
+export const currentUser = owners[0]!
+export const storageKey = 'pro-table-draft-demo:v1'
+
+// 本地演示数据，草稿允许字段不完整；stage 与项目业务 status 分开。
+export type DraftProjectRecord = Partial<ProjectFormValues> & {
+  id: string
+  stage: 'draft' | 'published'
+  createdBy: string
+  savedAt: string
+}
+
+export interface SaveProjectInput {
+  values: Partial<ProjectFormValues>
+  original?: DraftProjectRecord
+  stage: DraftProjectRecord['stage']
+}
+
+export const initialRecords: DraftProjectRecord[] = [
+  ...initialProjects.map((project) => ({
+    ...project,
+    stage: 'published' as const,
+    createdBy: project.owner,
+    savedAt: dayjs().subtract(2, 'day').hour(9).minute(0).toISOString(),
+  })),
+  ...['移动端设计系统', '数据报表导出', '开放接口文档'].map((name, index) => ({
+    id: `PRJ-${String(19 + index).padStart(3, '0')}`,
+    name,
+    stage: 'draft' as const,
+    createdBy: currentUser,
+    owner: currentUser,
+    status: index === 1 ? undefined : ('planning' as const),
+    priority: 'medium' as const,
+    progress: 0,
+    savedAt: dayjs().subtract([1, 3, 20][index]!, 'hour').toISOString(),
+  })),
+]

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

@@ -0,0 +1,56 @@
+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 =
+    Math.max(0, ...records.map((record) => Number(record.id.replace('PRJ-', '')) || 0)) + 1
+  const record: DraftProjectRecord = {
+    ...values,
+    name: values.name?.trim(),
+    description: values.description?.trim(),
+    progress:
+      values.status === 'completed' ? 100 : values.status === 'planning' ? 0 : values.progress,
+    id: original?.id ?? `PRJ-${String(nextId).padStart(3, '0')}`,
+    stage,
+    createdBy: original?.createdBy ?? currentUser,
+    savedAt: new Date().toISOString(),
+  }
+  return [record, ...records.filter((item) => item.id !== record.id)]
+}
+
+/** 根据列表或个人草稿视图和搜索条件筛选记录，并按保存时间倒序排列。 */
+export function filterProjectRecords({
+  records,
+  view,
+  search,
+}: {
+  records: DraftProjectRecord[]
+  view: DraftTableView
+  search: ProjectSearchValues
+}) {
+  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 ?? 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.module.css

@@ -0,0 +1,49 @@
+@layer components {
+  .project {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding-block: 6px;
+  }
+
+  .projectIcon {
+    display: grid;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    place-items: center;
+    border-radius: 8px;
+    background: var(--ant-color-primary-bg);
+    color: var(--ant-color-primary);
+    font-size: 22px;
+  }
+
+  .projectInfo {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .projectName {
+    height: auto;
+    padding: 0;
+    color: var(--ant-color-text);
+    font-weight: 600;
+  }
+
+  .projectId {
+    color: var(--ant-color-text-tertiary);
+    font-size: 12px;
+  }
+
+  .avatar {
+    background: var(--ant-color-fill-tertiary);
+    color: var(--ant-color-text-secondary);
+    font-size: 13px;
+  }
+
+  .muted {
+    color: var(--ant-color-text-tertiary);
+  }
+}

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

@@ -0,0 +1,183 @@
+import DraftProTable, { type DraftTableView } from '@/components/DraftProTable/DraftProTable'
+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 type { ProjectSearchValues } from '../config'
+import DraftProjectFormDialog, {
+  type DraftProjectFormDialogRef,
+} from './components/DraftProjectFormDialog'
+import {
+  currentUser,
+  initialRecords,
+  storageKey,
+  type DraftProjectRecord,
+  type SaveProjectInput,
+} from './config'
+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 [view, setView] = useState<DraftTableView>('list')
+  const [search, setSearch] = useState<ProjectSearchValues>({})
+  const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>([])
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
+  const filteredRecords = useMemo(
+    () => filterProjectRecords({ records, view, search }),
+    [records, view, search],
+  )
+  const draftCount = records.filter(
+    (record) => record.stage === 'draft' && record.createdBy === currentUser,
+  ).length
+
+  /** 重置查询表单、行选择及页码，使视图从第一页重新展示。 */
+  function resetSearch() {
+    searchFormRef.current?.resetFields()
+    setSearch({})
+    setSelectedRowKeys([])
+    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(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(
+      tr('已删除 {count} 个{type}', {
+        count: ids.length,
+        type: view === 'draft' ? tr('草稿') : tr('项目'),
+      }),
+    )
+  }
+
+  return (
+    <>
+      <DraftProTable<DraftProjectRecord, ProjectSearchValues>
+        rowKey="id"
+        view={view}
+        onViewChange={changeView}
+        draftCount={draftCount}
+        columns={createDraftProjectColumns({
+          onEdit: (record) => dialogRef.current?.show(record),
+          onDelete: (record) => deleteProjects([record.id]),
+        })}
+        dataSource={filteredRecords}
+        formRef={searchFormRef}
+        form={{ name: 'draft-project-search' }}
+        search={{ labelWidth: 'auto', defaultCollapsed: true }}
+        onSubmit={
+          /** 应用新的项目查询条件，同时回到第一页并清除行选择。 */ (values) => {
+            setSearch(values)
+            setPage(1)
+            setSelectedRowKeys([])
+          }
+        }
+        onReset={resetSearch}
+        options={{ reload: () => resetSearch(), density: false, setting: true }}
+        toolBarRender={() => [
+          <Button
+            key="create"
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => dialogRef.current?.show()}
+          >
+            {tr('新增项目')}
+          </Button>,
+        ]}
+        rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
+        tableAlertOptionRender={() => (
+          <Popconfirm
+            title={tr('删除选中的 {count} 个{type}？', {
+              count: selectedRowKeys.length,
+              type: view === 'draft' ? tr('草稿') : 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(filteredRecords.length / pageSize))),
+          pageSize,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          pageSizeOptions: [10, 20, 50],
+          showTotal: (total) => tr('共 {count} 条', { count: total }),
+          /** 同步分页页码与每页条数。 */
+          onChange: (current, size) => {
+            setPage(current)
+            setPageSize(size)
+          },
+        }}
+        locale={{
+          emptyText: (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              description={
+                view === 'draft'
+                  ? draftCount > 0
+                    ? tr('暂无匹配草稿，请调整筛选条件。')
+                    : tr('暂无草稿，可以新增项目并保存为草稿。')
+                  : tr('暂无匹配项目，请调整筛选条件或新增项目。')
+              }
+            />
+          ),
+        }}
+      />
+      <DraftProjectFormDialog ref={dialogRef} onSave={saveProject} />
+    </>
+  )
+}

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

@@ -0,0 +1,53 @@
+@layer components {
+  .project {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding-block: 3px;
+  }
+
+  .projectIcon {
+    display: grid;
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    place-items: center;
+    border: 1px solid var(--ant-color-primary-border);
+    border-radius: 8px;
+    background: var(--ant-color-primary-bg);
+    color: var(--ant-color-primary);
+    font-size: 18px;
+  }
+
+  .projectInfo {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .projectName {
+    height: auto;
+    justify-content: flex-start;
+    padding: 0;
+    color: var(--ant-color-text);
+    font-weight: 500;
+  }
+
+  .projectId {
+    color: var(--ant-color-text-tertiary);
+    font-family: Consolas, monospace;
+    font-size: 11px;
+    letter-spacing: 0.04em;
+  }
+
+  .avatar {
+    background: var(--ant-color-fill-secondary);
+    color: var(--ant-color-text-secondary);
+    font-size: 12px;
+  }
+
+  .progress {
+    max-width: 125px;
+  }
+}