create-bubbles 0.1.25 → 0.1.26

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,163 @@
+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 { App, Button, Empty, Popconfirm } from 'antd'
+import { useMemo, useRef, useState, type Key } from 'react'
+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 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('保存失败，请检查浏览器存储空间后重试。')
+      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'
+        ? '草稿已保存'
+        : input.original?.stage === 'published'
+          ? '项目已保存'
+          : '提交成功，已进入项目列表',
+    )
+    return true
+  }
+
+  function deleteProjects(ids: Key[]) {
+    if (!persist(records.filter((record) => !ids.includes(record.id)))) return
+    setSelectedRowKeys([])
+    void message.success(`已删除 ${ids.length} 个${view === 'draft' ? '草稿' : '项目'}`)
+  }
+
+  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()}
+          >
+            新增项目
+          </Button>,
+        ]}
+        rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
+        tableAlertOptionRender={() => (
+          <Popconfirm
+            title={`删除选中的 ${selectedRowKeys.length} 个${view === 'draft' ? '草稿' : '项目'}？`}
+            onConfirm={() => deleteProjects(selectedRowKeys)}
+            okText="删除"
+            okButtonProps={{ danger: true }}
+          >
+            <Button type="link" danger size="small">
+              批量删除
+            </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) => `共 ${total} 条`,
+          onChange: (current, size) => {
+            setPage(current)
+            setPageSize(size)
+          },
+        }}
+        locale={{
+          emptyText: (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              description={
+                view === 'draft'
+                  ? draftCount > 0
+                    ? '暂无匹配草稿，请调整筛选条件。'
+                    : '暂无草稿，可以新增项目并保存为草稿。'
+                  : '暂无匹配项目，请调整筛选条件或新增项目。'
+              }
+            />
+          ),
+        }}
+      />
+      <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;
+  }
+}

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

@@ -0,0 +1,135 @@
+import FullHeightProTable from '@/components/FullHeightProTable/FullHeightProTable'
+import { PlusOutlined } from '@ant-design/icons'
+import { App, Button, Empty, Popconfirm } from 'antd'
+import { useMemo, useRef, useState, type Key } from 'react'
+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 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 ? '项目已保存' : '项目已新增')
+  }
+
+  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} 个项目`)
+  }
+
+  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="项目列表"
+        tooltip="支持搜索筛选、排序、分页、列设置和批量删除。"
+        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()}
+          >
+            新增项目
+          </Button>,
+        ]}
+        rowSelection={{ selectedRowKeys, onChange: setSelectedRowKeys }}
+        tableAlertOptionRender={() => (
+          <Popconfirm
+            title={`删除选中的 ${selectedRowKeys.length} 个项目？`}
+            description="删除后将从当前演示列表中移除。"
+            onConfirm={() => deleteProjects(selectedRowKeys)}
+            okText="删除"
+            okButtonProps={{ danger: true }}
+          >
+            <Button type="link" danger size="small">
+              批量删除
+            </Button>
+          </Popconfirm>
+        )}
+        pagination={{
+          current: Math.min(page, Math.max(1, Math.ceil(filteredProjects.length / pageSize))),
+          pageSize,
+          showSizeChanger: true,
+          pageSizeOptions: [6, 12, 24],
+          showTotal: (total) => `共 ${total} 个项目`,
+          onChange: (current, size) => {
+            setPage(current)
+            setPageSize(size)
+          },
+        }}
+        locale={{
+          emptyText: (
+            <Empty
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+              description="暂无匹配项目，请调整筛选条件或新增项目。"
+            />
+          ),
+        }}
+      />
+      <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,30 @@
-import { createJsonStorage, i18n } from '@bubblesjs/i18n-core'
-import I18nProvider, { useI18n } from '@bubblesjs/i18n-react'
-import { Button } from 'antd'
-
-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),
-})
-
-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()
+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 styles from './index.module.css'
 
+export default function Home() {
   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>
+    <PageContainer title="工作台" content="你的业务工作空间。">
+      <ProCard title="业务模块" variant="outlined">
+        <div className={styles.demo}>
+          <TableOutlined className={styles.icon} />
+          <div>
+            <Typography.Title level={4}>
+              项目管理 <Tag color="cyan">Demo</Tag>
+            </Typography.Title>
+            <Typography.Paragraph type="secondary">
+              使用 ProTable 管理项目，体验搜索筛选、分页、新增编辑和批量操作。
+            </Typography.Paragraph>
+            <Link to="/examples/pro-table">
+              <Button type="primary" icon={<ArrowRightOutlined />} iconPlacement="end">
+                打开 ProTable 示例
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </ProCard>
+    </PageContainer>
   )
 }
-
-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>
-  )
-}
-
-export default Home

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

@@ -0,0 +1,11 @@
+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 })