create-bubbles 0.1.24 → 0.1.26

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

@@ -0,0 +1,132 @@
+import {
+  ModalForm,
+  ProFormDatePicker,
+  ProFormDigit,
+  ProFormGroup,
+  ProFormSelect,
+  ProFormText,
+  ProFormTextArea,
+} from '@ant-design/pro-components'
+import { useImperativeHandle, useState, type Ref } from 'react'
+import {
+  owners,
+  priorityOptions,
+  statusOptions,
+  type ProjectFormValues,
+  type ProjectRecord,
+} from '../config'
+
+export interface ProjectFormDialogRef {
+  show: (project?: ProjectRecord) => void
+  hide: () => void
+}
+
+interface ProjectFormDialogProps {
+  ref: Ref<ProjectFormDialogRef>
+  onSave: (values: ProjectFormValues, project?: ProjectRecord) => void
+}
+
+export default function ProjectFormDialog({ ref, onSave }: ProjectFormDialogProps) {
+  const [open, setOpen] = useState(false)
+  const [project, setProject] = useState<ProjectRecord>()
+
+  function hide() {
+    setOpen(false)
+  }
+
+  useImperativeHandle(ref, () => ({
+    show(record) {
+      setProject(record)
+      setOpen(true)
+    },
+    hide,
+  }))
+
+  return (
+    <ModalForm<ProjectFormValues>
+      name="project-editor"
+      title={project ? '编辑项目' : '新增项目'}
+      open={open}
+      width={600}
+      grid
+      rowProps={{ gutter: 16 }}
+      initialValues={project ?? { status: 'planning', priority: 'medium', progress: 0 }}
+      modalProps={{ destroyOnHidden: true, onCancel: hide }}
+      submitter={{ searchConfig: { submitText: '保存项目', resetText: '取消' } }}
+      onOpenChange={(visible) => {
+        if (!visible) hide()
+      }}
+      onFinish={async (values) => {
+        onSave(
+          {
+            ...values,
+            name: values.name.trim(),
+            description: values.description?.trim() ?? '',
+            progress:
+              values.status === 'completed'
+                ? 100
+                : values.status === 'planning'
+                  ? 0
+                  : values.progress,
+          },
+          project,
+        )
+        hide()
+        return true
+      }}
+    >
+      <ProFormText
+        name="name"
+        label="项目名称"
+        placeholder="例如：客户服务工作台"
+        rules={[{ required: true, whitespace: true, message: '请输入项目名称' }]}
+        fieldProps={{ maxLength: 40, showCount: true }}
+      />
+      <ProFormGroup>
+        <ProFormSelect
+          name="owner"
+          label="负责人"
+          options={owners}
+          colProps={{ xs: 24, sm: 12 }}
+          rules={[{ required: true, message: '请选择负责人' }]}
+        />
+        <ProFormDatePicker
+          name="dueDate"
+          label="截止日期"
+          colProps={{ xs: 24, sm: 12 }}
+          rules={[{ required: true, message: '请选择截止日期' }]}
+          fieldProps={{ style: { width: '100%' } }}
+        />
+        <ProFormSelect
+          name="status"
+          label="项目状态"
+          valueEnum={statusOptions}
+          colProps={{ xs: 24, sm: 12 }}
+          rules={[{ required: true, message: '请选择项目状态' }]}
+        />
+        <ProFormSelect
+          name="priority"
+          label="优先级"
+          valueEnum={priorityOptions}
+          colProps={{ xs: 24, sm: 12 }}
+          rules={[{ required: true, message: '请选择优先级' }]}
+        />
+      </ProFormGroup>
+      <ProFormDigit
+        name="progress"
+        label="完成进度（%）"
+        min={0}
+        max={100}
+        fieldProps={{ precision: 0 }}
+        rules={[{ required: true, message: '请输入完成进度' }]}
+        extra="待启动项目保存为 0%，已完成项目保存为 100%。"
+      />
+      <ProFormTextArea
+        name="description"
+        label="项目说明"
+        placeholder="补充项目目标或备注（选填）"
+        fieldProps={{ maxLength: 200, showCount: true, rows: 3 }}
+      />
+    </ModalForm>
+  )
+}

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

@@ -0,0 +1,121 @@
+import { FolderOutlined } from '@ant-design/icons'
+import type { ProColumns } from '@ant-design/pro-components'
+import { Avatar, Button, Popconfirm, Progress, Space, Tag, Tooltip } from 'antd'
+import { owners, priorityOptions, statusOptions, type ProjectRecord } from '.'
+import styles from '../index.module.css'
+
+interface ProjectColumnOptions {
+  onEdit: (project: ProjectRecord) => void
+  onDelete: (project: ProjectRecord) => void
+}
+
+export function createProjectColumns({
+  onEdit,
+  onDelete,
+}: ProjectColumnOptions): ProColumns<ProjectRecord>[] {
+  return [
+    {
+      title: '项目名称',
+      dataIndex: 'name',
+      width: 260,
+      fieldProps: { placeholder: '搜索项目名称或编号', allowClear: true },
+      render: (_, project) => (
+        <div className={styles.project}>
+          <span className={styles.projectIcon}>
+            <FolderOutlined />
+          </span>
+          <div className={styles.projectInfo}>
+            <Tooltip title={project.description || project.name}>
+              <Button type="link" className={styles.projectName} onClick={() => onEdit(project)}>
+                {project.name}
+              </Button>
+            </Tooltip>
+            <span className={styles.projectId}>{project.id}</span>
+          </div>
+        </div>
+      ),
+    },
+    {
+      title: '项目状态',
+      dataIndex: 'status',
+      width: 115,
+      valueType: 'select',
+      valueEnum: statusOptions,
+    },
+    {
+      title: '负责人',
+      dataIndex: 'owner',
+      width: 125,
+      valueType: 'select',
+      fieldProps: { options: owners.map((owner) => ({ label: owner, value: owner })) },
+      render: (_, project) => (
+        <Space size={8}>
+          <Avatar size={26} className={styles.avatar}>
+            {project.owner.slice(0, 1)}
+          </Avatar>
+          {project.owner}
+        </Space>
+      ),
+    },
+    {
+      title: '优先级',
+      dataIndex: 'priority',
+      width: 90,
+      valueType: 'select',
+      valueEnum: priorityOptions,
+      render: (_, project) => (
+        <Tag color={priorityOptions[project.priority].color}>
+          {priorityOptions[project.priority].text}
+        </Tag>
+      ),
+    },
+    {
+      title: '完成进度',
+      dataIndex: 'progress',
+      width: 155,
+      search: false,
+      sorter: (first, second) => first.progress - second.progress,
+      render: (_, project) => (
+        <Progress
+          percent={project.progress}
+          size="small"
+          status={project.status === 'completed' ? 'success' : 'normal'}
+          strokeColor={project.status === 'paused' ? '#d6a348' : undefined}
+          className={styles.progress}
+        />
+      ),
+    },
+    {
+      title: '截止日期',
+      dataIndex: 'dueDate',
+      width: 130,
+      valueType: 'date',
+      search: false,
+      sorter: (first, second) => first.dueDate.localeCompare(second.dueDate),
+    },
+    { title: '截止日期', dataIndex: 'dueDate', valueType: 'dateRange', hideInTable: true },
+    {
+      title: '操作',
+      valueType: 'option',
+      width: 120,
+      fixed: 'right',
+      render: (_, project) => [
+        <Button key="edit" type="link" size="small" onClick={() => onEdit(project)}>
+          编辑
+        </Button>,
+        <Popconfirm
+          key="delete"
+          title="删除项目"
+          description={`确定删除「${project.name}」吗？`}
+          onConfirm={() => onDelete(project)}
+          okText="删除"
+          okButtonProps={{ danger: true }}
+        >
+          <Button type="link" danger size="small">
+            删除
+          </Button>
+        </Popconfirm>,
+      ],
+    },
+  ]
+}

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

@@ -0,0 +1,77 @@
+export type ProjectStatus = 'planning' | 'active' | 'paused' | 'completed'
+export type ProjectPriority = 'high' | 'medium' | 'low'
+
+// 仅用于页面演示；接入真实接口时再在 shared 中定义接口契约。
+export interface ProjectRecord {
+  id: string
+  name: string
+  owner: string
+  status: ProjectStatus
+  priority: ProjectPriority
+  progress: number
+  dueDate: string
+  description: string
+}
+
+export type ProjectFormValues = Omit<ProjectRecord, 'id'>
+
+export interface ProjectSearchValues {
+  name?: string
+  owner?: string
+  status?: ProjectStatus
+  priority?: ProjectPriority
+  dueDate?: [string, string]
+}
+
+export const statusOptions = {
+  planning: { text: '待启动', status: 'Default' },
+  active: { text: '进行中', status: 'Processing' },
+  paused: { text: '已暂停', status: 'Warning' },
+  completed: { text: '已完成', status: 'Success' },
+}
+
+export const priorityOptions = {
+  high: { text: '高', color: 'volcano' },
+  medium: { text: '中', color: 'gold' },
+  low: { text: '低', color: 'default' },
+}
+
+export const owners = ['林知夏', '陈一舟', '周予安', '许清和', '沈亦宁']
+
+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}完善团队协作与交付体验。`,
+  }
+})

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

@@ -0,0 +1,140 @@
+import {
+  ModalForm,
+  ProFormDatePicker,
+  ProFormDigit,
+  ProFormSelect,
+  ProFormText,
+  ProFormTextArea,
+  type ProFormInstance,
+} from '@ant-design/pro-components'
+import { Button } from 'antd'
+import { useImperativeHandle, useRef, useState, type Ref } from 'react'
+import { owners, priorityOptions, statusOptions, 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 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 ? '编辑项目' : record ? '继续编辑草稿' : '新增项目'}
+      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}>
+            取消
+          </Button>,
+          !isPublished && (
+            <Button
+              key="draft"
+              onClick={() => {
+                const values = formRef.current?.getFieldsFormatValue?.()
+                if (values && onSave({ values, original: record, stage: 'draft' })) hide()
+              }}
+            >
+              保存草稿
+            </Button>
+          ),
+          <Button key="submit" type="primary" onClick={() => props.submit()}>
+            {isPublished ? '保存项目' : '提交'}
+          </Button>,
+        ],
+      }}
+      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: '请输入项目名称' }]}
+        fieldProps={{ maxLength: 40, showCount: true }}
+        extra={!isPublished ? '信息未填完也可以保存草稿，提交时需补齐必填项。' : undefined}
+      />
+      <ProFormSelect
+        name="owner"
+        label="负责人"
+        options={owners}
+        colProps={{ xs: 24, sm: 12 }}
+        rules={[{ required: true, message: '请选择负责人' }]}
+      />
+      <ProFormDatePicker
+        name="dueDate"
+        label="截止日期"
+        colProps={{ xs: 24, sm: 12 }}
+        rules={[{ required: true, message: '请选择截止日期' }]}
+        fieldProps={{ style: { width: '100%' } }}
+      />
+      <ProFormSelect
+        name="status"
+        label="项目状态"
+        valueEnum={statusOptions}
+        colProps={{ xs: 24, sm: 12 }}
+        rules={[{ required: true, message: '请选择项目状态' }]}
+      />
+      <ProFormSelect
+        name="priority"
+        label="优先级"
+        valueEnum={priorityOptions}
+        colProps={{ xs: 24, sm: 12 }}
+        rules={[{ required: true, message: '请选择优先级' }]}
+      />
+      <ProFormDigit
+        name="progress"
+        label="完成进度（%）"
+        min={0}
+        max={100}
+        fieldProps={{ precision: 0 }}
+        rules={[{ required: true, message: '请输入完成进度' }]}
+        extra="待启动项目保存为 0%，已完成项目保存为 100%。"
+      />
+      <ProFormTextArea
+        name="description"
+        label="项目说明"
+        placeholder="补充项目目标或备注（选填）"
+        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,127 @@
+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 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>[] {
+  return [
+    {
+      title: '项目名称',
+      dataIndex: 'name',
+      width: 360,
+      fieldProps: { placeholder: '搜索项目名称或编号', 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 || '未命名项目'}
+              </Button>
+              {project.stage === 'draft' && (
+                <Tag color="orange" variant="filled">
+                  草稿
+                </Tag>
+              )}
+            </Space>
+            <span className={styles.projectId}>{project.id}</span>
+          </div>
+        </div>
+      ),
+    },
+    {
+      title: '项目状态',
+      dataIndex: 'status',
+      width: 140,
+      valueType: 'select',
+      valueEnum: statusOptions,
+      fieldProps: { placeholder: '全部状态' },
+      render: (dom, project) =>
+        project.status ? (
+          dom
+        ) : (
+          <Badge status="default" text={<span className={styles.muted}>未填写</span>} />
+        ),
+    },
+    {
+      title: '负责人',
+      dataIndex: 'owner',
+      width: 150,
+      valueType: 'select',
+      fieldProps: {
+        placeholder: '全部负责人',
+        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}>未填写</span>
+        ),
+    },
+    {
+      title: '最后保存时间',
+      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')
+          ? '今天'
+          : date.isSame(dayjs().subtract(1, 'day'), 'day')
+            ? '昨天'
+            : 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: '操作',
+      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' ? '继续编辑' : '编辑'}
+          </Button>
+          <Popconfirm
+            title={project.stage === 'draft' ? '删除草稿' : '删除项目'}
+            description={`确定删除「${project.name || '未命名项目'}」吗？`}
+            onConfirm={() => onDelete(project)}
+            okText="删除"
+            okButtonProps={{ danger: true }}
+          >
+            <Button type="link" danger size="small">
+              删除
+            </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,48 @@
+import type { DraftTableView } from '@/components/DraftProTable/DraftProTable'
+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 ?? '未命名项目'} ${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))
+}