create-bubbles 0.1.25 → 0.1.26

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

@@ -0,0 +1,183 @@
+import { AppstoreOutlined, ArrowRightOutlined, LockOutlined, UserOutlined } from '@ant-design/icons'
+import { LoginForm, ProFormText } from '@ant-design/pro-components'
+import { useRequest } from 'alova/client'
+import { Alert } from 'antd'
+import { useState } from 'react'
+import { useNavigate } from 'react-router'
+import type { LoginRequest } from 'shared/types'
+import { ACCOUNT_PATTERN, normalizeAccount } from 'shared/utils'
+import { cookie } from '@/utils/storage/cookie'
+import { login } from './api'
+import './login.css'
+
+function ModuleDrawing() {
+  return (
+    <svg className="login-drawing" viewBox="0 0 540 360" fill="none" aria-hidden="true">
+      <g stroke="currentColor" strokeWidth="1.5">
+        <path d="M156 88h38a24 24 0 0 1 24 24v30M322 180h52a24 24 0 0 0 24-24v-28M218 218v38a24 24 0 0 1-24 24h-54M322 218v50a24 24 0 0 0 24 24h54" />
+        <path
+          d="M100 130v58a24 24 0 0 0 24 24h42M444 240v-28a24 24 0 0 0-24-24h-46"
+          strokeDasharray="4 7"
+          opacity=".35"
+        />
+        <g fill="var(--login-panel-bg)">
+          <rect x="52" y="46" width="104" height="84" rx="12" />
+          <rect x="354" y="48" width="104" height="80" rx="12" />
+          <rect x="60" y="244" width="80" height="72" rx="12" />
+          <rect x="396" y="248" width="88" height="68" rx="12" />
+        </g>
+        <path
+          d="M76 72h24v24H76zM112 72h20M112 84h12M112 96h20M378 74h56M378 88h36M378 102h46M80 264h40M80 278h24M80 292h32"
+          opacity=".7"
+        />
+        <circle cx="440" cy="282" r="14" />
+        <path d="m434 282 4 4 8-9" stroke="var(--login-accent)" />
+        <rect
+          x="218"
+          y="128"
+          width="104"
+          height="104"
+          rx="20"
+          fill="var(--login-panel-bg)"
+          stroke="var(--login-accent)"
+        />
+        <g stroke="var(--login-accent)" strokeWidth="2">
+          <rect x="244" y="154" width="20" height="20" rx="3" />
+          <rect x="276" y="154" width="20" height="20" rx="3" />
+          <rect x="244" y="186" width="20" height="20" rx="3" />
+          <rect x="276" y="186" width="20" height="20" rx="3" />
+        </g>
+        <g fill="var(--login-accent)" stroke="none">
+          <circle cx="194" cy="88" r="3" />
+          <circle cx="374" cy="180" r="3" />
+          <circle cx="218" cy="256" r="3" />
+        </g>
+      </g>
+    </svg>
+  )
+}
+
+export default function LoginPage() {
+  const navigate = useNavigate()
+  const { send, loading } = useRequest(login, { immediate: false })
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleLogin(values: LoginRequest) {
+    if (loading) return false
+    setError(null)
+    try {
+      const result = await send({
+        account: normalizeAccount(values.account),
+        password: values.password,
+      })
+      cookie.set('token', result.accessToken, {
+        expires: new Date(result.absoluteExpiresAt),
+      })
+      void navigate('/home', { replace: true })
+      return true
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : '登录失败，请稍后重试')
+      return false
+    }
+  }
+
+  return (
+    <main className="login-page">
+      <title>登录 - 通用平台</title>
+      <section className="login-brand-panel" aria-label="通用平台">
+        <div className="login-brand">
+          <AppstoreOutlined />
+          <span>通用平台</span>
+        </div>
+        <div className="login-story">
+          <p className="login-eyebrow">UNIVERSAL PLATFORM</p>
+          <h1>
+            连接业务，
+            <br />
+            从这里开始。
+          </h1>
+          <ModuleDrawing />
+        </div>
+        <div className="login-brand-footer">
+          <span>一个平台，多种可能</span>
+          <span>UNIVERSAL PLATFORM</span>
+        </div>
+      </section>
+
+      <section className="login-form-panel" aria-labelledby="login-title">
+        <div className="login-form-content">
+          <p className="login-form-eyebrow">WORKSPACE</p>
+          <h2 id="login-title">登录工作台</h2>
+          <p className="login-description">欢迎回来，请使用平台账号登录。</p>
+          <LoginForm<LoginRequest>
+            autoFocusFirstInput={false}
+            requiredMark={false}
+            contentStyle={{ width: '100%', minWidth: 0 }}
+            containerStyle={{ padding: 0, minWidth: 0 }}
+            onFinish={handleLogin}
+            onValuesChange={() => {
+              if (error) setError(null)
+            }}
+            submitter={{
+              searchConfig: { submitText: '登录' },
+              submitButtonProps: {
+                size: 'large',
+                loading,
+                icon: <ArrowRightOutlined />,
+                iconPlacement: 'end',
+              },
+            }}
+          >
+            {error && (
+              <Alert className="login-error" type="error" showIcon title={error} role="alert" />
+            )}
+            <ProFormText
+              name="account"
+              label="账号"
+              placeholder="请输入账号"
+              fieldProps={{
+                prefix: <UserOutlined />,
+                autoComplete: 'username',
+                maxLength: 32,
+                size: 'large',
+                autoCapitalize: 'none',
+                spellCheck: false,
+              }}
+              rules={[
+                { required: true, whitespace: true, message: '请输入账号' },
+                {
+                  min: 4,
+                  max: 32,
+                  transform: (value: string) => value?.trim(),
+                  message: '账号长度为 4–32 位',
+                },
+                {
+                  pattern: ACCOUNT_PATTERN,
+                  transform: (value: string) => value?.trim(),
+                  message: '账号仅支持字母、数字和下划线',
+                },
+              ]}
+            />
+            <ProFormText.Password
+              name="password"
+              label="密码"
+              placeholder="请输入密码"
+              fieldProps={{
+                prefix: <LockOutlined />,
+                autoComplete: 'current-password',
+                maxLength: 128,
+                size: 'large',
+              }}
+              rules={[
+                { required: true, message: '请输入密码' },
+                { max: 128, message: '密码不能超过 128 位' },
+              ]}
+            />
+          </LoginForm>
+          <p className="login-account-hint">请使用已开通的账号，账号区分于显示名称。</p>
+        </div>
+        <footer className="login-footer">通用平台 · 业务工作空间</footer>
+      </section>
+    </main>
+  )
+}

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

@@ -0,0 +1,164 @@
+@layer components {
+  .login-page {
+    --login-panel-bg: #102f40;
+    --login-accent: #7dd4ce;
+    display: grid;
+    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
+    min-height: 100vh;
+    min-height: 100svh;
+    background: #fff;
+  }
+
+  .login-brand-panel {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 40px 56px 28px;
+    overflow: hidden;
+    color: #e3f1f4;
+    background-color: var(--login-panel-bg);
+    background-image:
+      linear-gradient(#ffffff03 1px, transparent 1px),
+      linear-gradient(90deg, #ffffff03 1px, transparent 1px);
+    background-size: 32px 32px;
+  }
+
+  .login-brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+  }
+
+  .login-brand > .anticon {
+    color: var(--login-accent);
+    font-size: 28px;
+  }
+
+  .login-story {
+    width: 100%;
+    max-width: 540px;
+    margin: 40px auto 24px;
+  }
+
+  .login-eyebrow,
+  .login-form-eyebrow {
+    font-family: Bahnschrift, 'Segoe UI', sans-serif;
+    font-size: 11px;
+    letter-spacing: 0.16em;
+  }
+
+  .login-eyebrow {
+    margin-bottom: 20px;
+    color: #a8c4cc;
+  }
+  .login-story h1 {
+    margin: 0;
+    font-size: clamp(32px, 3.2vw, 48px);
+    font-weight: 500;
+    line-height: 1.5;
+    letter-spacing: 0.06em;
+  }
+  .login-drawing {
+    display: block;
+    width: 100%;
+    max-height: 310px;
+    margin-top: 20px;
+    color: #6d9cae;
+  }
+
+  .login-brand-footer {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+    color: #a8c4cc;
+    font-size: 11px;
+    letter-spacing: 0.08em;
+  }
+
+  .login-form-panel {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 88px 40px 112px;
+  }
+  .login-form-content {
+    width: 100%;
+    max-width: 368px;
+  }
+  .login-form-eyebrow {
+    margin: 0 0 14px;
+    color: var(--ant-color-primary);
+  }
+  .login-form-content h2 {
+    margin: 0 0 12px;
+    font-size: 30px;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+  }
+  .login-description {
+    margin: 0 0 36px;
+    color: var(--ant-color-text-secondary);
+  }
+  .login-error {
+    margin-bottom: 24px;
+  }
+  .login-form-content .ant-form-item {
+    margin-bottom: 24px;
+  }
+  .login-form-content .ant-input-prefix {
+    margin-inline-end: 10px;
+    color: var(--ant-color-text-tertiary);
+  }
+  .login-form-content .ant-btn-primary {
+    height: 44px;
+    margin-top: 8px;
+    box-shadow: none;
+  }
+  .login-account-hint {
+    margin: 24px 0 0;
+    color: var(--ant-color-text-secondary);
+    font-size: 12px;
+    text-align: center;
+  }
+  .login-footer {
+    position: absolute;
+    bottom: 28px;
+    inset-inline: 24px;
+    color: var(--ant-color-text-tertiary);
+    font-size: 12px;
+    text-align: center;
+  }
+}
+
+@media (max-width: 1023px) {
+  .login-brand-panel {
+    padding-inline: 32px;
+  }
+}
+
+@media (max-width: 767px) {
+  .login-page {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
+  .login-brand-panel {
+    padding: 24px;
+  }
+  .login-brand {
+    font-size: 18px;
+  }
+  .login-story,
+  .login-brand-footer {
+    display: none;
+  }
+  .login-form-panel {
+    padding: 52px 24px 92px;
+  }
+  .login-form-content h2 {
+    font-size: 28px;
+  }
+}

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

@@ -1,20 +1,44 @@
-import { createBrowserRouter, Navigate, type RouteObject } from 'react-router'
+import { Button, Result } from 'antd'
+import { lazy } from 'react'
+import { createBrowserRouter, Link, Navigate, type RouteObject } from 'react-router'
+import BasicLayout from '@/layouts/BasicLayout'
 
-export const lazyLoad = (path: string, fileName = 'index') => {
-  const Module = lazy(() => import(`@/pages/${path}/${fileName}.tsx`))
-  return <Module />
-}
+const Home = lazy(() => import('@/pages/home'))
+const I18nExample = lazy(() => import('@/pages/examples/i18n'))
+const ProTableExample = lazy(() => import('@/pages/examples/pro-table'))
+const ProTableDraftExample = lazy(() => import('@/pages/examples/pro-table/draft'))
+const Login = lazy(() => import('@/pages/login'))
 
 const routes: RouteObject[] = [
   {
-    path: '/',
-    id: 'index',
-    element: <Navigate to={'/home'} />,
+    path: '/login',
+    element: <Login />,
   },
   {
-    path: '/home',
-    id: 'home',
-    element: lazyLoad('home'),
+    path: '/',
+    element: <BasicLayout />,
+    children: [
+      { index: true, element: <Navigate to="/home" replace /> },
+      { path: 'home', element: <Home /> },
+      { path: 'examples/pro-table', element: <ProTableExample /> },
+      { path: 'examples/pro-table/draft', element: <ProTableDraftExample /> },
+      { path: 'examples/i18n', element: <I18nExample /> },
+      {
+        path: '*',
+        element: (
+          <Result
+            status="404"
+            title="404"
+            subTitle="页面不存在，请检查地址或返回工作台。"
+            extra={
+              <Link to="/home">
+                <Button type="primary">返回工作台</Button>
+              </Link>
+            }
+          />
+        ),
+      },
+    ],
   },
 ]
 
@@ -22,4 +46,4 @@ export const router = createBrowserRouter(routes, {
   basename: '/',
 })
 
-export const navigator = router.navigate
+export const navigator = router.navigate.bind(router)

package/template-vp-monorepo-react-nestjs/apps/web/src/styles/index.css

@@ -1,7 +1,14 @@
+@layer theme, base, antd, antd-pro, components, utilities;
+
+@import 'antd/dist/reset.css' layer(base);
 @import 'tailwindcss';
 
-html,
-body {
-  margin: 0;
-  padding: 0;
+@layer base {
+  html,
+  body,
+  #root {
+    min-width: 320px;
+    min-height: 100%;
+    margin: 0;
+  }
 }

package/template-vp-monorepo-react-nestjs/apps/web/src/utils/request/core/index.ts

@@ -1,3 +1,4 @@
+import { axiosRequestAdapter, type AlovaAxiosRequestConfig } from '@alova/adapter-axios'
 import type {
   AlovaGlobalCacheAdapter,
   AlovaOptions,
@@ -7,8 +8,7 @@ import type {
   StatesHook,
 } from 'alova'
 import { createAlova } from 'alova'
-import type { FetchRequestInit } from 'alova/fetch'
-import adapterFetch from 'alova/fetch'
+import type { AxiosResponse, AxiosResponseHeaders } from 'axios'
 import { deepMergeObject, isPlainObject, isReadableStream, tryParseJsonString } from './utils.ts'
 
 type MaybePromise<T> = T | Promise<T>
@@ -23,7 +23,6 @@ type StatusMatcher<RE> = number | number[] | ((status: number, response: RE) =>
 type CodeMatcher = Array<number | string>
 
 export interface StatusMap<RE = unknown> {
-  success?: StatusMatcher<RE>
   unAuthorized?: StatusMatcher<RE>
 }
 
@@ -40,9 +39,9 @@ export interface RequestMeta {
 }
 
 export interface BaseRequestOption<
-  RC extends object = FetchRequestInit,
-  RE = Response,
-  RH = Headers,
+  RC extends object = AlovaAxiosRequestConfig,
+  RE = AxiosResponse,
+  RH = AxiosResponseHeaders,
   SE extends StatesExport<any> = StatesExport<any>,
 > extends RequestMeta {
   baseUrl?: string
@@ -60,7 +59,8 @@ export interface BaseRequestOption<
   errorDefaultMessage?: string
   successMessageFunc?: (message: string) => void
   errorMessageFunc?: (message: string) => void
-  unAuthorizedResponseFunc?: () => void
+  unAuthorizedResponseFunc?: (response: RE) => void
+  /** 默认使用 Axios；自定义适配器也须拒绝 HTTP 错误，并通过 error.response 提供响应。 */
   requestAdapter?: AlovaRequestAdapter<RC, RE, RH>
   l1Cache?: AlovaGlobalCacheAdapter
   l2Cache?: AlovaGlobalCacheAdapter
@@ -68,16 +68,16 @@ export interface BaseRequestOption<
 }
 
 export type baseRequestOption<
-  RC extends object = FetchRequestInit,
-  RE = Response,
-  RH = Headers,
+  RC extends object = AlovaAxiosRequestConfig,
+  RE = AxiosResponse,
+  RH = AxiosResponseHeaders,
   SE extends StatesExport<any> = StatesExport<any>,
 > = BaseRequestOption<RC, RE, RH, SE>
 
 export type RequestOption<
-  RC extends object = FetchRequestInit,
-  RE = Response,
-  RH = Headers,
+  RC extends object = AlovaAxiosRequestConfig,
+  RE = AxiosResponse,
+  RH = AxiosResponseHeaders,
   SE extends StatesExport<any> = StatesExport<any>,
 > = BaseRequestOption<RC, RE, RH, SE>
 
@@ -119,7 +119,6 @@ const defaultRequestOption: BaseRequestOption<any, any, any, any> = {
   baseUrl: '/',
   timeout: undefined,
   statusMap: {
-    success: 200,
     unAuthorized: 401,
   },
   codeMap: {
@@ -137,7 +136,7 @@ const defaultRequestOption: BaseRequestOption<any, any, any, any> = {
   errorDefaultMessage: DEFAULT_ERROR_MESSAGE,
   cacheFor: null,
   cacheLogger: true,
-  requestAdapter: adapterFetch() as AlovaRequestAdapter<any, any, any>,
+  requestAdapter: axiosRequestAdapter(),
 }
 
 function getMethodMeta(method: unknown): RequestMeta {
@@ -155,7 +154,7 @@ function isMatchedStatus<RE>(
   matcher: StatusMatcher<RE> | undefined,
   response: RE,
 ): boolean {
-  if (matcher === undefined) return status >= 200 && status < 300
+  if (matcher === undefined) return false
 
   if (typeof matcher === 'function') return matcher(status, response)
 
@@ -283,13 +282,21 @@ function resolveConfig<RC extends object, RE, RH, SE extends StatesExport<any>>(
 }
 
 export function createInstance<
-  RC extends object = FetchRequestInit,
-  RE = Response,
-  RH = Headers,
+  RC extends object = AlovaAxiosRequestConfig,
+  RE = AxiosResponse,
+  RH = AxiosResponseHeaders,
   SE extends StatesExport<any> = StatesExport<any>,
 >(option: RequestOption<RC, RE, RH, SE> = {}) {
   const config = resolveConfig(option)
 
+  function responseError(data: unknown, status: number) {
+    const code = getResponseField(data, config.responseCodeKey)
+    return Object.assign(
+      new Error(getResponseMessage(data, config.responseMessageKey, config.errorDefaultMessage)),
+      { status, code: typeof code === 'string' || typeof code === 'number' ? code : undefined },
+    )
+  }
+
   const alovaOptions: AlovaOptions<RequestAlovaGenerics<RC, RE, RH, SE>> = {
     baseURL: config.baseUrl,
     timeout: config.timeout,
@@ -310,6 +317,7 @@ export function createInstance<
       }
     },
     responded: {
+      // HTTP 成败由适配器判断；这里只解析成功响应并检查业务 code。
       onSuccess: async (response, method) => {
         const meta = getMethodMeta(method)
         const shouldTransform = getMetaFlag(meta, 'isTransformResponse', config.isTransformResponse)
@@ -322,18 +330,6 @@ export function createInstance<
         const status = getResponseStatus(response)
         const data = await getResponseData(response)
 
-        if (!isMatchedStatus(status, config.statusMap.success, response)) {
-          if (isMatchedStatus(status, config.statusMap.unAuthorized, response))
-            config.unAuthorizedResponseFunc?.()
-
-          if (showError) {
-            config.errorMessageFunc?.(
-              getResponseMessage(data, config.responseMessageKey, config.errorDefaultMessage),
-            )
-          }
-          return Promise.reject(response)
-        }
-
         if (!isWrapped) {
           if (showSuccess) config.successMessageFunc?.(config.successDefaultMessage)
           return data
@@ -348,30 +344,42 @@ export function createInstance<
         )
 
         if (!isMatchedCode(code, config.codeMap.success)) {
-          if (isMatchedCode(code, config.codeMap.unAuthorized)) config.unAuthorizedResponseFunc?.()
+          if (isMatchedCode(code, config.codeMap.unAuthorized))
+            config.unAuthorizedResponseFunc?.(response)
 
           if (showError) {
             config.errorMessageFunc?.(
               getResponseMessage(data, config.responseMessageKey, config.errorDefaultMessage),
             )
           }
-          return Promise.reject(response)
+          throw responseError(data, status)
         }
 
         if (showSuccess) config.successMessageFunc?.(responseMessage)
 
         return responseData
       },
-      onError: (error, method) => {
+      // 统一处理 HTTP 错误、网络故障和超时；onSuccess 抛出的业务错误直接传给调用方。
+      onError: async (error, method) => {
         const meta = getMethodMeta(method)
         const showError = getMetaFlag(meta, 'isShowErrorMessage', config.isShowErrorMessage)
+        const response = (error as { response?: RE } | undefined)?.response
+        let failure: Error
+
+        if (response) {
+          const status = getResponseStatus(response)
+          if (isMatchedStatus(status, config.statusMap.unAuthorized, response)) {
+            config.unAuthorizedResponseFunc?.(response)
+          }
+          failure = responseError(await getResponseData(response), status)
+        } else {
+          failure = new Error('无法连接服务，请检查网络后重试')
+        }
 
         if (showError) {
-          config.errorMessageFunc?.(
-            error instanceof Error ? error.message : config.errorDefaultMessage,
-          )
+          config.errorMessageFunc?.(failure.message)
         }
-        return Promise.reject(error)
+        throw failure
       },
     },
   }
@@ -380,24 +388,24 @@ export function createInstance<
 }
 
 export type RequestInstance<
-  RC extends object = FetchRequestInit,
-  RE = Response,
-  RH = Headers,
+  RC extends object = AlovaAxiosRequestConfig,
+  RE = AxiosResponse,
+  RH = AxiosResponseHeaders,
   SE extends StatesExport<any> = StatesExport<any>,
 > = ReturnType<typeof createInstance<RC, RE, RH, SE>>
 
 export type DualCallInstance<
-  RC extends object = FetchRequestInit,
-  RE = Response,
-  RH = Headers,
+  RC extends object = AlovaAxiosRequestConfig,
+  RE = AxiosResponse,
+  RH = AxiosResponseHeaders,
   SE extends StatesExport<any> = StatesExport<any>,
 > = RequestInstance<RC, RE, RH, SE> &
   ((option?: RequestOption<RC, RE, RH, SE>) => RequestInstance<RC, RE, RH, SE>)
 
 export function createDualCallInstance<
-  RC extends object = FetchRequestInit,
-  RE = Response,
-  RH = Headers,
+  RC extends object = AlovaAxiosRequestConfig,
+  RE = AxiosResponse,
+  RH = AxiosResponseHeaders,
   SE extends StatesExport<any> = StatesExport<any>,
 >(baseConfig: BaseRequestOption<RC, RE, RH, SE>): DualCallInstance<RC, RE, RH, SE> {
   const defaultInstance = createInstance(baseConfig)