create-bubbles 0.1.25 → 0.1.27

package/template-vp-monorepo-react-nestjs/apps/web/public/favicon.svg

@@ -1 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="6" fill="#176f88"/>
+  <g stroke="white" stroke-width="1.6">
+    <rect x="7" y="7" width="7" height="7" rx="1.5"/>
+    <rect x="18" y="7" width="7" height="7" rx="1.5"/>
+    <rect x="7" y="18" width="7" height="7" rx="1.5"/>
+    <rect x="18" y="18" width="7" height="7" rx="1.5"/>
+  </g>
+</svg>

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

@@ -0,0 +1,5 @@
+@layer components {
+  .app {
+    min-height: 100vh;
+  }
+}

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

@@ -1,24 +1,42 @@
-import { ConfigProvider } from 'antd'
+import { StyleProvider } from '@ant-design/cssinjs'
+import { ProConfigProvider } from '@ant-design/pro-components'
+import { useI18n } from '@bubblesjs/i18n-react'
+import { App as AntdApp, ConfigProvider } from 'antd'
 import dayjs from 'dayjs'
+import 'dayjs/locale/en'
 import 'dayjs/locale/zh-cn'
-import { Suspense } from 'react'
-import { RouterProvider } from 'react-router'
 import PageLoading from '@/components/Loading/PageLoading'
+import { appTheme } from '@/config/theme'
+import { DEFAULT_LOCALE, isAppLocale } from '@/i18n/config'
+import { getUiLocale } from '@/i18n/ui-locale'
+import styles from './App.module.css'
 import { router } from './router'
 
-dayjs.locale('zh-cn')
+/** 配置全局主题、组件上下文与统一懒加载边界，让路由完成加载后执行一次页面过渡。 */
+function App() {
+  const { locale } = useI18n()
+  const activeLocale = isAppLocale(locale) ? locale : DEFAULT_LOCALE
+  const uiLocale = getUiLocale(activeLocale)
 
-// const i18nStore = await i18n.init()
+  useEffect(() => {
+    dayjs.locale(uiLocale.dayjs)
+    document.documentElement.lang = uiLocale.document
+  }, [uiLocale.dayjs, uiLocale.document])
 
-function App() {
   return (
-    // <I18nProvider store={i18nStore}>
-    <Suspense fallback={<PageLoading />}>
-      <ConfigProvider>
-        <RouterProvider router={router} />
+    <StyleProvider layer>
+      <ConfigProvider locale={uiLocale.antd} theme={appTheme}>
+        <ProConfigProvider intl={uiLocale.pro}>
+          <AntdApp className={styles.app}>
+            {/* 懒加载统一等待，保留旧页面直到目标页面可以提交。 */}
+            <Suspense fallback={<PageLoading />}>
+              {/* 加载态立即更新，最终路由通过 transition 提交。 */}
+              <RouterProvider router={router} useTransitions />
+            </Suspense>
+          </AntdApp>
+        </ProConfigProvider>
       </ConfigProvider>
-    </Suspense>
-    // </I18nProvider>
+    </StyleProvider>
   )
 }
 

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

@@ -0,0 +1,22 @@
+import type { ChangePasswordRequest, ChangePasswordResult, LogoutResult } from 'shared/types'
+import request from '@/utils/request'
+
+const passwordRequest = request({
+  cacheLogger: false,
+  isShowErrorMessage: false,
+})
+
+/** 提交本人改密，成功正文不含密码，且不缓存或合并含密码的请求。 */
+export const changePassword = (input: ChangePasswordRequest) =>
+  passwordRequest.Post<ChangePasswordResult>('/auth/change-password', input, {
+    cacheFor: 0,
+    shareRequest: false,
+  })
+
+/** 请求服务端注销当前会话，禁用缓存和重复请求合并。 */
+export const logout = () =>
+  request.Post<LogoutResult>('/auth/logout', undefined, {
+    cacheFor: 0,
+    shareRequest: false,
+    meta: { isShowErrorMessage: false },
+  })

package/template-vp-monorepo-react-nestjs/apps/web/src/assets/svg/accounts.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">
+  <circle cx="12" cy="8" r="3.25" />
+  <path d="M5 20a7 7 0 0 1 14 0M19 7.5a2.75 2.75 0 0 1 0 5M5 7.5a2.75 2.75 0 0 0 0 5M18.5 19a5.25 5.25 0 0 0-2.25-3.5M5.5 19a5.25 5.25 0 0 1 2.25-3.5" />
+</svg>

package/template-vp-monorepo-react-nestjs/apps/web/src/assets/svg/audit-log.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 3h9l3 3v15H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z" />
+  <path d="M14 3v4h4M8 11h6M8 15h6M8 19h3" />
+</svg>

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

@@ -0,0 +1,5 @@
+<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="M4 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16" />
+  <path d="M16 9h2a2 2 0 0 1 2 2v10" />
+  <path d="M2 21h20M8 7h4M8 11h4M8 15h4M8 19h4" />
+</svg>

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

@@ -0,0 +1,6 @@
+<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">
+  <rect x="3" y="3" width="7" height="7" rx="1" />
+  <rect x="14" y="3" width="7" height="7" rx="1" />
+  <rect x="3" y="14" width="7" height="7" rx="1" />
+  <rect x="14" y="14" width="7" height="7" rx="1" />
+</svg>

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/assets/svg/home.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="m3 10 9-7 9 7" />
+  <path d="M5 9v11h14V9M9 20v-6h6v6" />
+</svg>

package/template-vp-monorepo-react-nestjs/apps/web/src/assets/svg/members.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">
+  <circle cx="9" cy="8" r="3" />
+  <path d="M3.5 20a5.5 5.5 0 0 1 11 0M16 5.5a2.5 2.5 0 0 1 0 5M17 14a4.5 4.5 0 0 1 3.5 4.5" />
+</svg>

package/template-vp-monorepo-react-nestjs/apps/web/src/assets/svg/menu-item.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">
+  <rect x="4" y="4" width="16" height="16" rx="3" />
+  <path d="M8 9h8M8 13h5M8 17h3" />
+</svg>

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

@@ -0,0 +1,6 @@
+<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="M4 5h16M4 12h16M4 19h16" />
+  <circle cx="7" cy="5" r="1" fill="currentColor" stroke="none" />
+  <circle cx="7" cy="12" r="1" fill="currentColor" stroke="none" />
+  <circle cx="7" cy="19" r="1" fill="currentColor" stroke="none" />
+</svg>

package/template-vp-monorepo-react-nestjs/apps/web/src/assets/svg/organization-template.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="M5 3h10l4 4v14H5z" />
+  <path d="M15 3v5h4M8 12h8M8 16h6" />
+</svg>

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

@@ -0,0 +1,6 @@
+<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">
+  <rect x="9" y="3" width="6" height="5" rx="1" />
+  <rect x="3" y="16" width="6" height="5" rx="1" />
+  <rect x="15" y="16" width="6" height="5" rx="1" />
+  <path d="M12 8v4M6 16v-2h12v2" />
+</svg>

package/template-vp-monorepo-react-nestjs/apps/web/src/assets/svg/positions.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="M4 6h16v14H4zM8 6V4h8v2M8 11h8M8 15h5" />
+  <path d="M16 15h.01" />
+</svg>

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

@@ -0,0 +1,5 @@
+<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">
+  <rect x="4" y="3" width="16" height="18" rx="2" />
+  <circle cx="12" cy="9" r="2.5" />
+  <path d="M8 17a4 4 0 0 1 8 0M8 5h2M14 5h2" />
+</svg>

package/template-vp-monorepo-react-nestjs/apps/web/src/assets/svg/projects.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="M4 6.5A2.5 2.5 0 0 1 6.5 4h4l2 2h5A2.5 2.5 0 0 1 20 8.5v9a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5v-11Z" />
+  <path d="M4 10h16" />
+</svg>

package/template-vp-monorepo-react-nestjs/apps/web/src/assets/svg/roles.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="M12 3 19 6v5c0 4.5-2.8 8.2-7 10-4.2-1.8-7-5.5-7-10V6l7-3Z" />
+  <path d="m9 12 2 2 4-4" />
+</svg>

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

@@ -0,0 +1,125 @@
+@layer components {
+  .brand {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+
+  .link {
+    text-decoration: none;
+  }
+
+  .mark {
+    position: relative;
+    display: inline-block;
+    width: 34px;
+    height: 34px;
+    flex: 0 0 34px;
+    border: 1px solid rgba(255, 255, 255, 0.9);
+    border-radius: 50%;
+    background: radial-gradient(circle at 28% 24%, #fff 0, #ede3fb 28%, #bcb0eb 65%, #dceefa);
+    box-shadow:
+      inset -3px -4px 8px #ac9fd84d,
+      0 4px 14px #8d79c333;
+  }
+
+  .mark::before {
+    position: absolute;
+    inset: 9px -6px;
+    border: 1px solid #a796d6;
+    border-top-color: #ffffffb3;
+    border-radius: 50%;
+    content: '';
+    transform: rotate(-34deg);
+  }
+
+  .mark::after {
+    position: absolute;
+    top: 0;
+    right: -4px;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: #ac99da;
+    box-shadow: 0 0 7px #ffffff;
+    content: '';
+  }
+
+  .wordmark {
+    line-height: 1.15;
+  }
+
+  .basic {
+    gap: 12px;
+    color: var(--wanwu-ink);
+  }
+
+  .link.basic:hover {
+    color: var(--wanwu-ink);
+  }
+
+  .basic .wordmark {
+    font-family: Bahnschrift, 'Microsoft YaHei', sans-serif;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 32px;
+    letter-spacing: 0.04em;
+  }
+
+  .workspace {
+    gap: 16px;
+    color: var(--wanwu-ink);
+  }
+
+  .link.workspace:hover {
+    color: var(--wanwu-accent);
+  }
+
+  .workspace .wordmark {
+    font-family: 'STSong', 'SimSun', serif;
+    font-size: 27px;
+    font-weight: 600;
+    letter-spacing: 0.16em;
+  }
+
+  .englishName {
+    display: block;
+    margin-top: 4px;
+    color: var(--wanwu-muted);
+    font:
+      9px/1.2 'Segoe UI',
+      sans-serif;
+    letter-spacing: 0.35em;
+  }
+
+  .auth {
+    gap: 14px;
+  }
+
+  .auth .wordmark {
+    font-family: 'Songti SC', SimSun, serif;
+    font-size: 25px;
+    font-weight: 600;
+    letter-spacing: 0.14em;
+  }
+
+  @media (max-width: 767px) {
+    :global(.ant-pro-global-header) .mark,
+    :global(.ant-pro-global-header) .workspace .englishName {
+      display: none;
+    }
+
+    :global(.ant-pro-global-header) .workspace .wordmark {
+      font-size: 22px;
+      letter-spacing: 0.06em;
+    }
+
+    .auth {
+      gap: 12px;
+    }
+
+    .auth .wordmark {
+      font-size: 24px;
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+import { useI18n } from '@bubblesjs/i18n-react'
+import classNames from 'classnames'
+import styles from './Brand.module.css'
+
+export type BrandVariant = 'auth' | 'basic' | 'workspace'
+
+export interface BrandProps {
+  ariaLabel?: string
+  className?: string
+  to?: string
+  variant?: BrandVariant
+}
+
+export interface BrandMarkProps {
+  className?: string
+}
+
+const BRAND_VARIANTS = {
+  auth: { className: styles.auth!, showEnglishName: false },
+  basic: { className: styles.basic!, showEnglishName: false },
+  workspace: { className: styles.workspace!, showEnglishName: true },
+} satisfies Record<BrandVariant, { className: string; showEnglishName: boolean }>
+
+/** 渲染万物品牌的图形标记，供品牌字标和第三方布局组件复用。 */
+export function BrandMark({ className }: BrandMarkProps) {
+  return <span className={classNames(styles.mark, className)} aria-hidden="true" />
+}
+
+/** 按使用场景渲染统一的万物品牌标记与字标，可选提供站内跳转。 */
+export default function Brand({ ariaLabel, className, to, variant = 'workspace' }: BrandProps) {
+  const { tr } = useI18n()
+  const variantConfig = BRAND_VARIANTS[variant]
+  const content = (
+    <>
+      <BrandMark />
+      <span className={styles.wordmark}>
+        {tr('万物')}
+        {variantConfig.showEnglishName && <small className={styles.englishName}>WANWU</small>}
+      </span>
+    </>
+  )
+  const brandClassName = classNames(
+    styles.brand,
+    variantConfig.className,
+    to && styles.link,
+    className,
+  )
+
+  return to ? (
+    <Link className={brandClassName} to={to} aria-label={ariaLabel}>
+      {content}
+    </Link>
+  ) : (
+    <span className={brandClassName}>{content}</span>
+  )
+}

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,105 @@
+import DraftIcon from '@/assets/svg/draft.svg?react'
+import { InfoCircleOutlined } from '@ant-design/icons'
+import type { ParamsType } from '@ant-design/pro-components'
+import { useI18n } from '@bubblesjs/i18n-react'
+import { Badge } from 'antd'
+import classNames from 'classnames'
+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 { tr } = useI18n()
+  const isDraft = view === 'draft'
+  const activeDraftHint = draftHint === undefined ? tr('草稿提交后进入列表') : draftHint
+  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
+            ? tr('草稿箱')
+            : tr('草稿箱，{count} 条草稿', { count: 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 && activeDraftHint && (
+            <div className={styles.hint}>
+              <InfoCircleOutlined />
+              {activeDraftHint}
+            </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`。示例使用当前浏览器的本地存储和固定演示用户；真实系统的草稿持久化及可见权限应由后端处理。示例中草稿允许字段不完整，提交时校验必填项，并沿用草稿编号转为正式项目。已提交项目编辑后直接保存。