create-bubbles 0.1.24 → 0.1.26

package/template-vp-monorepo-react-nestjs/apps/web/src/assets/svg/draft.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M6.5 3.5h11L21 12v7a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 19v-7Z" />
+  <path d="M3 12h5.25a3.75 3.75 0 0 0 7.5 0H21" />
+</svg>

package/template-vp-monorepo-react-nestjs/apps/web/src/components/DraftProTable/DraftProTable.module.css

@@ -0,0 +1,78 @@
+@layer components {
+  .toolbar :global(.ant-pro-table-list-toolbar-setting-items) {
+    gap: 4px;
+    line-height: 1;
+  }
+
+  .toolbar :global(.ant-pro-table-list-toolbar-setting-item) {
+    display: flex;
+    width: 32px;
+    height: 32px;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    border-radius: var(--ant-border-radius-sm);
+    font-size: 18px;
+  }
+
+  .toolbar :global(.ant-pro-table-list-toolbar-setting-item) > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .toolbar :global(.ant-pro-table-list-toolbar-setting-item):hover {
+    background: var(--ant-color-fill-tertiary);
+    color: var(--ant-color-primary);
+  }
+
+  .draftBadge {
+    color: inherit;
+    font-size: inherit;
+  }
+
+  .draftToggle {
+    display: flex;
+    width: 32px;
+    height: 32px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: var(--ant-border-radius-sm);
+    background: transparent;
+    color: inherit;
+    font-size: inherit;
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  .draftToggle:hover {
+    background: var(--ant-color-fill-tertiary);
+    color: var(--ant-color-primary);
+  }
+
+  .draftToggle[aria-pressed='true'] {
+    background: var(--ant-color-primary-bg);
+    color: var(--ant-color-primary);
+  }
+
+  .draftToggle[aria-pressed='true']:hover {
+    background: var(--ant-color-primary-bg-hover);
+  }
+
+  .draftToggle:focus-visible {
+    outline: 2px solid var(--ant-color-primary);
+    outline-offset: 2px;
+  }
+
+  .hint {
+    display: flex;
+    flex-shrink: 0;
+    align-items: baseline;
+    gap: 8px;
+    padding-bottom: 16px;
+    color: var(--ant-color-text-tertiary);
+    font-size: 13px;
+  }
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/DraftProTable/DraftProTable.tsx

@@ -0,0 +1,99 @@
+import DraftIcon from '@/assets/svg/draft.svg?react'
+import { InfoCircleOutlined } from '@ant-design/icons'
+import type { ParamsType } from '@ant-design/pro-components'
+import { Badge } from 'antd'
+import classNames from 'classnames'
+import type { ReactNode } from 'react'
+import FullHeightProTable, {
+  type FullHeightProTableProps,
+} from '../FullHeightProTable/FullHeightProTable'
+import SvgIcon from '../Icon/svg-icon/SvgIcon'
+import styles from './DraftProTable.module.css'
+
+export type DraftTableView = 'list' | 'draft'
+
+export type DraftProTableProps<
+  DataType extends object,
+  Params extends ParamsType = ParamsType,
+  ValueType = 'text',
+> = FullHeightProTableProps<DataType, Params, ValueType> & {
+  view: DraftTableView
+  onViewChange: (view: DraftTableView) => void
+  draftCount?: number
+  draftHint?: ReactNode
+}
+
+/** 只封装草稿箱入口和布局，数据、请求、表单和提交规则由业务页面提供。 */
+export default function DraftProTable<
+  DataType extends object,
+  Params extends ParamsType = ParamsType,
+  ValueType = 'text',
+>({
+  view,
+  onViewChange,
+  draftCount,
+  draftHint = '草稿提交后进入列表',
+  toolbar,
+  toolBarRender,
+  optionsRender,
+  tableViewRender,
+  ...props
+}: DraftProTableProps<DataType, Params, ValueType>) {
+  const isDraft = view === 'draft'
+  const { actions, settings, className: toolbarClassName, ...toolbarProps } = toolbar ?? {}
+  const draftToggle = (
+    <Badge
+      key="draft-toggle"
+      className={styles.draftBadge}
+      count={draftCount}
+      size="small"
+      overflowCount={99}
+      offset={[-4, 2]}
+      title=""
+    >
+      <button
+        type="button"
+        className={styles.draftToggle}
+        aria-label={draftCount === undefined ? '草稿箱' : `草稿箱，${draftCount} 条草稿`}
+        aria-pressed={isDraft}
+        onClick={() => onViewChange(isDraft ? 'list' : 'draft')}
+      >
+        <SvgIcon icon={DraftIcon} />
+      </button>
+    </Badge>
+  )
+
+  return (
+    <FullHeightProTable<DataType, Params, ValueType>
+      {...props}
+      toolbar={{
+        ...toolbarProps,
+        className: classNames(styles.toolbar, toolbarClassName),
+        ...(settings ? { settings: [draftToggle, ...settings] } : {}),
+      }}
+      // ProTable 的工具栏 memo 未比较 optionsRender，保留渲染回调以同步草稿选中状态。
+      toolBarRender={(action, config) =>
+        actions ?? (typeof toolBarRender === 'function' ? toolBarRender(action, config) : [])
+      }
+      optionsRender={(toolbarOptions, defaultOptions) => [
+        draftToggle,
+        ...(optionsRender?.(toolbarOptions, defaultOptions) ?? defaultOptions),
+      ]}
+      tableViewRender={(tableProps, defaultDom) => (
+        <>
+          {isDraft && draftHint && (
+            <div className={styles.hint}>
+              <InfoCircleOutlined />
+              {draftHint}
+            </div>
+          )}
+          {tableViewRender
+            ? tableViewRender(tableProps, defaultDom)
+            : typeof defaultDom === 'function'
+              ? defaultDom()
+              : defaultDom}
+        </>
+      )}
+    />
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/DraftProTable/README.md

@@ -0,0 +1,34 @@
+# DraftProTable
+
+基于 `FullHeightProTable`，在工具栏右侧的刷新、列设置图标旁加入“草稿箱”图标，使用带弧形开口的收纳盒轮廓。图标右上角通过小号角标显示草稿数量，数量为 0 或未提供时隐藏，超过 99 显示 `99+`，不显示 Tooltip。默认显示列表，点击图标后以主题色图标和浅色背景高亮选中并显示草稿，再次点击取消选中、回到列表。沿用 ProTable 原生表头和表体滚动，分页位于底部。
+
+新增参数：
+
+| 参数           | 说明                                                         |
+| -------------- | ------------------------------------------------------------ |
+| `view`         | 当前视图：`list` 或 `draft`，页面初始设为 `list`             |
+| `onViewChange` | 切换视图，由业务页面更新数据、重置分页和选择项               |
+| `draftCount`   | 草稿总数，可选；右上角角标显示，0 时隐藏，超过 99 显示 `99+` |
+| `draftHint`    | 草稿提示，默认“草稿提交后进入列表”，传 `false` 可隐藏        |
+
+其他参数沿用 `ProTableProps`，包括泛型、`request`、`params`、`actionRef`、`columns`、`pagination`、`scroll`、`headerTitle`、`toolBarRender` 等。组件通过 `optionsRender` 将草稿图标加入原生设置区，业务操作沿用 ProTable 的优先级，`toolbar.actions` 优先于 `toolBarRender`。
+
+调用方提供 `optionsRender` 时保留其返回的工具项；提供 `toolbar.settings` 时，草稿图标放在自定义工具项之前。`options={false}` 会随原生设置区隐藏草稿入口，但显式提供 `toolbar.settings` 时仍按该配置显示。
+
+```tsx
+const [view, setView] = useState<DraftTableView>('list')
+
+<DraftProTable<Project, ProjectQuery>
+  view={view}
+  onViewChange={changeView}
+  draftCount={draftCount}
+  columns={columns}
+  actionRef={actionRef}
+  params={{ view }}
+  request={requestProjects}
+/>
+```
+
+组件只负责 UI，不会自动添加请求参数、过滤数据、保存草稿或判断权限。使用 `request` 时，通过 `params` 带上当前视图；业务页面负责在切换时重置分页、选择项和搜索条件。
+
+示例路由：`/examples/pro-table/draft`。示例使用当前浏览器的本地存储和固定演示用户；真实系统的草稿持久化及可见权限应由后端处理。示例中草稿允许字段不完整，提交时校验必填项，并沿用草稿编号转为正式项目。已提交项目编辑后直接保存。

package/template-vp-monorepo-react-nestjs/apps/web/src/components/FullHeightProTable/FullHeightProTable.module.css

@@ -0,0 +1,54 @@
+@layer components {
+  .proTable {
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    flex-direction: column;
+  }
+
+  /* 窄屏展开全部搜索项时，仍为表体保留可见空间。 */
+  .proTable > :global(.ant-pro-table-search) {
+    max-height: 50%;
+    overflow: auto;
+  }
+
+  /* ProTable 会将根 className 同时附加到 tableExtraRender 容器。 */
+  .proTable:global(.ant-pro-table-extra) {
+    height: auto;
+    flex-shrink: 0;
+  }
+
+  .tableCard {
+    min-height: 0;
+    flex: 1;
+  }
+
+  /* 将搜索区、工具栏和分页之外的剩余高度逐层传给表体。 */
+  .tableCard > :global(.ant-pro-card-body),
+  .table,
+  .table > :global(.ant-spin),
+  .table :global(.ant-spin-container),
+  .table :global(.ant-table),
+  .table :global(.ant-table-container) {
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .proTable > :global(.ant-pro-table-search),
+  .proTable :global(.ant-pro-table-list-toolbar),
+  .proTable :global(.ant-pro-table-alert),
+  .table :global(.ant-table-header),
+  .table :global(.ant-table-pagination) {
+    flex-shrink: 0;
+  }
+
+  .table :global(.ant-table-body) {
+    min-height: 0;
+    flex: 1;
+    overflow-y: auto !important;
+    /* 滚动到底部了如果再滚动看页面要不要滚动 */
+    overscroll-behavior: contain;
+  }
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/FullHeightProTable/FullHeightProTable.tsx

@@ -0,0 +1,41 @@
+import { ProTable, type ParamsType, type ProTableProps } from '@ant-design/pro-components'
+import classNames from 'classnames'
+import styles from './FullHeightProTable.module.css'
+
+export type FullHeightProTableProps<
+  DataType extends object,
+  Params extends ParamsType = ParamsType,
+  ValueType = 'text',
+> = ProTableProps<DataType, Params, ValueType>
+
+/**
+ * 父容器需有明确高度，例如 h-full；位于 flex 布局时还需 min-h-0。
+ * 默认使用 ProTable 原生 scroll.y 固定表头，表体占据剩余高度并独立滚动。
+ */
+export default function FullHeightProTable<
+  DataType extends object,
+  Params extends ParamsType = ParamsType,
+  ValueType = 'text',
+>({
+  className,
+  cardProps,
+  tableClassName,
+  scroll,
+  ...props
+}: FullHeightProTableProps<DataType, Params, ValueType>) {
+  return (
+    <div className="w-full h-full p-[16px]">
+      <ProTable<DataType, Params, ValueType>
+        {...props}
+        className={classNames(styles.proTable, className)}
+        cardProps={
+          cardProps === false
+            ? false
+            : { ...cardProps, className: classNames(styles.tableCard, cardProps?.className) }
+        }
+        tableClassName={classNames(styles.table, tableClassName)}
+        scroll={{ x: 'max-content', y: 'auto', ...scroll }}
+      />
+    </div>
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Icon/svg-icon/README.md

@@ -0,0 +1,37 @@
+# SvgIcon
+
+使用 `vite-plugin-svgr` 将本地 SVG 导入为 React 组件，再由 `SvgIcon` 统一控制大小与颜色。
+
+```tsx
+import DraftIcon from '@/assets/svg/draft.svg?react'
+import SvgIcon from '@/components/Icon/svg-icon/SvgIcon'
+;<SvgIcon icon={DraftIcon} size={24} color="#1677ff" />
+```
+
+| 参数                 | 说明                                                              |
+| -------------------- | ----------------------------------------------------------------- |
+| `icon`               | 通过 `?react` 导入的 SVG 组件，必填                               |
+| `size`               | 字号，数字按 px 处理，也支持 `1.5rem` 等 CSS 长度；不传时继承父级 |
+| `color`              | 图标颜色；不传时继承父级                                          |
+| `className`、`style` | 原生 SVG 样式；`style` 中的同名设置优先                           |
+
+SVG 的宽高统一为 `1em`，因此 `font-size` 决定图标大小。`ref`、事件和其他 SVG 属性继续透传。默认作为装饰图标隐藏于辅助技术；需要独立表达含义时传 `role="img"` 和 `aria-label`。
+
+```tsx
+<span style={{ fontSize: 20, color: '#1677ff' }}>
+  <SvgIcon icon={DraftIcon} />
+  草稿
+</span>
+
+<SvgIcon icon={DraftIcon} size={24} role="img" aria-label="草稿" />
+```
+
+源文件规范：
+
+- 保留 `viewBox`，保证缩放正确。
+- 单色填充图标使用 `fill="currentColor"`；线条图标使用 `stroke="currentColor"`。
+- 保留 `fill="none"`、`stroke="none"`，避免填实空心图形。
+- 内部元素若写死颜色，也需要在源文件中改成 `currentColor` 才能跟随文字颜色。
+- SVGR 与组件保留多色和渐变，不会强制覆盖所有颜色。
+
+现有 `draft.svg` 已遵循上述规范。直接导入 `draft.svg` 仍然得到资源 URL，只有 `draft.svg?react` 会转换为 React 组件。

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Icon/svg-icon/SvgIcon.tsx

@@ -0,0 +1,27 @@
+import type { ComponentType, SVGProps } from 'react'
+
+export type SvgIconProps = Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+  icon: ComponentType<SVGProps<SVGSVGElement>>
+  size?: number | string
+}
+
+/** SVG 源文件使用 currentColor；不传 size、color 时继承父级文字样式。 */
+export default function SvgIcon({ icon: Icon, size, color, style, ...props }: SvgIconProps) {
+  return (
+    <Icon
+      aria-hidden={props['aria-label'] || props['aria-labelledby'] ? undefined : true}
+      focusable="false"
+      {...props}
+      width="1em"
+      height="1em"
+      style={{
+        display: 'inline-block',
+        verticalAlign: '-0.125em',
+        flexShrink: 0,
+        fontSize: size,
+        color,
+        ...style,
+      }}
+    />
+  )
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Loading/PageLoading.module.css

@@ -0,0 +1,7 @@
+@layer components {
+  .pageLoading {
+    display: grid;
+    min-height: 50vh;
+    place-items: center;
+  }
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/components/Loading/PageLoading.tsx

@@ -1,8 +1,9 @@
 import { Spin } from 'antd'
+import styles from './PageLoading.module.css'
 
 const Loading = () => {
   return (
-    <div className="flex h-screen w-screen items-center justify-center">
+    <div className={styles.pageLoading} role="status" aria-label="页面加载中">
       <Spin size="large" />
     </div>
   )

package/template-vp-monorepo-react-nestjs/apps/web/src/config/theme.ts

@@ -0,0 +1,20 @@
+import type { ThemeConfig } from 'antd'
+
+/** Ant Design 与 ProComponents 共用的主题入口。 */
+export const appTheme: ThemeConfig = {
+  token: {
+    colorPrimary: '#176f88',
+    colorInfo: '#176f88',
+    colorBgLayout: '#f3f6f8',
+    colorText: '#1a2938',
+    colorBorderSecondary: '#dfe7ed',
+    borderRadius: 6,
+    fontFamily: '"Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif',
+  },
+  components: {
+    Layout: {
+      headerBg: '#ffffff',
+      siderBg: '#ffffff',
+    },
+  },
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/layouts/BasicLayout.module.css

@@ -0,0 +1,17 @@
+@layer components {
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .logo {
+    color: var(--ant-color-primary);
+    font-size: 28px;
+  }
+
+  .brand h1 {
+    font-family: Bahnschrift, 'Microsoft YaHei', sans-serif;
+    letter-spacing: 0.04em;
+  }
+}

package/template-vp-monorepo-react-nestjs/apps/web/src/layouts/BasicLayout.tsx

@@ -0,0 +1,106 @@
+import {
+  AppstoreOutlined,
+  DashboardOutlined,
+  LogoutOutlined,
+  TableOutlined,
+  TranslationOutlined,
+} from '@ant-design/icons'
+import { ProLayout } from '@ant-design/pro-components'
+import { useRequest } from 'alova/client'
+import { App, Button } from 'antd'
+import { Suspense } from 'react'
+import { Link, Outlet, useLocation, useNavigate } from 'react-router'
+import PageLoading from '@/components/Loading/PageLoading'
+import { logout } from '@/api/auth'
+import { cookie } from '@/utils/storage/cookie'
+import styles from './BasicLayout.module.css'
+
+const menuRoutes = [
+  { path: '/home', name: '工作台', icon: <DashboardOutlined /> },
+  {
+    path: '/examples/pro-table',
+    key: 'pro-table-examples',
+    name: 'ProTable 示例',
+    icon: <TableOutlined />,
+    routes: [
+      { path: '/examples/pro-table', key: 'pro-table-basic', name: '基础' },
+      { path: '/examples/pro-table/draft', name: '草稿' },
+    ],
+  },
+  { path: '/examples/i18n', name: '国际化示例', icon: <TranslationOutlined /> },
+]
+
+export default function BasicLayout() {
+  const location = useLocation()
+  const navigate = useNavigate()
+  const token = cookie.get('token')
+  const { message } = App.useApp()
+  const { send, loading } = useRequest(logout, { immediate: false })
+
+  async function handleLogout() {
+    if (loading) return
+    try {
+      await send()
+      cookie.remove('token')
+      void navigate('/login', { replace: true })
+    } catch (error) {
+      void message.error(error instanceof Error ? error.message : '退出失败，请重试')
+    }
+  }
+
+  return (
+    <ProLayout
+      className="platform-layout"
+      style={{ height: '100dvh', overflow: 'hidden' }}
+      contentStyle={{ minHeight: 0, padding: 0, overflow: 'auto' }}
+      title="通用平台"
+      logo={<AppstoreOutlined className={styles.logo} />}
+      layout="mix"
+      fixedHeader
+      fixSiderbar
+      siderWidth={224}
+      actionsRender={() =>
+        token
+          ? [
+              <Button
+                key="logout"
+                type="text"
+                icon={<LogoutOutlined />}
+                loading={loading}
+                onClick={() => void handleLogout()}
+              >
+                退出登录
+              </Button>,
+            ]
+          : [
+              <Link key="login" to="/login">
+                登录
+              </Link>,
+            ]
+      }
+      location={location}
+      route={{ path: '/', routes: menuRoutes }}
+      menu={{ locale: false }}
+      menuProps={{
+        selectedKeys: [
+          location.pathname === '/examples/pro-table' ? 'pro-table-basic' : location.pathname,
+        ],
+      }}
+      menuItemRender={(item, dom, { isMobile }) => (
+        <Link to={item.path ?? '/home'} onClick={isMobile ? item.onClick : undefined}>
+          {dom}
+        </Link>
+      )}
+      headerTitleRender={(logo, title) => (
+        <Link className={styles.brand} to="/home" aria-label="通用平台首页">
+          {logo}
+          {title}
+        </Link>
+      )}
+    >
+      <Suspense fallback={<PageLoading />}>
+        <Outlet />
+      </Suspense>
+    </ProLayout>
+  )
+}

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

@@ -0,0 +1,23 @@
+@layer components {
+  .demo {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+  }
+
+  .panel {
+    display: flex;
+    flex: 1 1 256px;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px;
+    border: 1px solid var(--ant-color-border-secondary);
+    border-radius: var(--ant-border-radius);
+  }
+
+  .panel h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 500;
+  }
+}

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

@@ -0,0 +1,53 @@
+import { createJsonStorage, i18n } from '@bubblesjs/i18n-core'
+import I18nProvider, { useI18n } from '@bubblesjs/i18n-react'
+import { PageContainer, ProCard } from '@ant-design/pro-components'
+import { Button } from 'antd'
+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),
+})
+
+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={styles.panel}>
+      <h2>{title}</h2>
+      <div>{tr('保存')}</div>
+      <div>{tr('你好1')}</div>
+      <div>目前语言: {locale}</div>
+      <Button onClick={() => void loadLocale(switchLocale)}>切换到 {switchLocale}</Button>
+    </section>
+  )
+}
+
+const I18nExample = () => {
+  return (
+    <PageContainer title="国际化示例" content="两个独立语言作用域，分别切换并保存语言偏好。">
+      <ProCard title="语言作用域" variant="outlined">
+        <div className={styles.demo}>
+          <I18nProvider store={leftStore}>
+            <I18nTestNode title="节点 A" switchLocale="en_US" />
+          </I18nProvider>
+
+          <I18nProvider store={rightStore}>
+            <I18nTestNode title="节点 B" switchLocale="zh_CN" />
+          </I18nProvider>
+        </div>
+      </ProCard>
+    </PageContainer>
+  )
+}
+
+export default I18nExample