@talknote/create-talknote-h5 0.1.3 → 0.1.5

package/template/src/layouts/HeaderLayout/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Header from '@/components/Header';
+import type { HeaderProps } from '@/components/Header';
+import { LayoutOutlet } from '../LayoutOutlet';
+import { usePageHeaderProps } from '../usePageHeaderProps';
+import styles from './index.less';
+
+export type HeaderLayoutProps = HeaderProps & {
+  children?: React.ReactNode;
+};
+
+/**
+ * 顶栏固定 + 内容区滚动。Header 与滚动容器是兄弟节点，
+ * 不会被 iOS 橡皮筋（overscroll）带着拉伸。
+ */
+const HeaderLayout: React.FC<HeaderLayoutProps> = ({
+  children,
+  title,
+  showBack,
+  extra,
+  onBack,
+}) => {
+  const fromRoute = usePageHeaderProps();
+
+  return (
+    <div className={styles.layout}>
+      <div className={styles.headerWrap}>
+        <Header
+          title={title ?? fromRoute?.title}
+          showBack={showBack ?? fromRoute?.showBack ?? true}
+          extra={extra ?? fromRoute?.extra}
+          onBack={onBack ?? fromRoute?.onBack}
+        />
+      </div>
+      <div className={styles.content}>
+        <LayoutOutlet>{children}</LayoutOutlet>
+      </div>
+    </div>
+  );
+};
+
+export default HeaderLayout;

package/template/src/layouts/LayoutOutlet.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Outlet } from 'alita';
+
+/** 作为路由布局时用 Outlet，作为组件嵌套时用 children */
+export function LayoutOutlet({ children }: { children?: React.ReactNode }) {
+  return <>{children ?? <Outlet />}</>;
+}

package/template/src/layouts/SSOLoginLayout/index.less

@@ -0,0 +1,28 @@
+.gate {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 0;
+  gap: var(--spacing-md);
+  padding: var(--spacing-lg);
+  background: var(--color-background-bg);
+}
+
+.pending {
+  flex-direction: row;
+  gap: var(--spacing-sm);
+}
+
+.message {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-align: center;
+}
+
+.errorImg {
+  width: 200Px;
+  height: 200Px;
+}

package/template/src/layouts/SSOLoginLayout/index.tsx

@@ -0,0 +1,92 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button, DotLoading } from 'antd-mobile';
+import { ensureSsoLogin, hasSsoSucceeded } from '@/utils/ensureSsoLogin';
+import errorImg from '@/assets/error.png';
+import styles from './index.less';
+
+export type SSOLoginLayoutProps = {
+  children?: React.ReactNode;
+
+  /** false: skip ticket login and render children immediately */
+  enabled?: boolean;
+};
+
+type SsoStatus = 'pending' | 'ready' | 'failed';
+
+/**
+ * Top-level gate: SSO ticket login before the app.
+ * Disable via `enabled={false}` (see `ssoLoginEnabled` in src/routes.ts).
+ */
+const SSOLoginLayout: React.FC<SSOLoginLayoutProps> = ({ children, enabled = true }) => {
+  const [status, setStatus] = useState<SsoStatus>(() =>
+    !enabled || hasSsoSucceeded() ? 'ready' : 'pending',
+  );
+
+  const isInApp = useMemo(() => typeof window.vibeNoteBridge !== 'undefined', []);
+
+  const runSsoLogin = useCallback(() => {
+    if (!enabled) {
+      setStatus('ready');
+      return;
+    }
+    if (hasSsoSucceeded()) {
+      setStatus('ready');
+      return;
+    }
+    setStatus('pending');
+    ensureSsoLogin()
+      .then(() => setStatus('ready'))
+      .catch(() => setStatus('failed'));
+  }, [enabled]);
+
+  useEffect(() => {
+    if (!isInApp) {
+      setStatus('failed');
+      return;
+    }
+    runSsoLogin();
+  }, [runSsoLogin, isInApp]);
+
+  if (!enabled || status === 'ready') {
+    return <>{children}</>;
+  }
+
+  if (status === 'pending') {
+    return (
+      <div className={`${styles.gate} ${styles.pending}`}>
+        <DotLoading color="primary" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.gate}>
+      <img src={errorImg} alt="error" className={styles.errorImg} />
+      {
+        isInApp ? (
+          <>
+            <p className={styles.message}>登录失败，请重试</p>
+            <Button
+              color="primary"
+              onClick={runSsoLogin}
+              style={{
+                marginTop: 'var(--spacing-md)',
+                borderRadius: '99Px',
+                fontWeight: 'var(--font-weight-medium)',
+                width: '180Px',
+              }}
+            >
+              重试
+            </Button>
+          </>
+        ) : (
+          <p className={styles.message}>请在智在记录APP里访问</p>
+        )
+      }
+      
+      
+    </div>
+  );
+};
+
+export default SSOLoginLayout;

package/template/src/layouts/TabBarLayout/index.less

@@ -0,0 +1,21 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: var(--color-background-bg);
+}
+
+.body {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.content {
+  position: relative;
+  height: 100%;
+  overflow: auto;
+  overscroll-behavior: none;
+  -webkit-overflow-scrolling: touch;
+}

package/template/src/layouts/TabBarLayout/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import NavBar from '@/components/TabBar';
+import HeaderLayout from '../HeaderLayout';
+import { LayoutOutlet } from '../LayoutOutlet';
+import { usePageHeaderProps } from '../usePageHeaderProps';
+import styles from './index.less';
+
+/**
+ * 带底部导航的布局。配置了 headerProps 才渲染顶栏。
+ */
+const TabBarLayout: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  const headerProps = usePageHeaderProps();
+  const content = <LayoutOutlet>{children}</LayoutOutlet>;
+
+  return (
+    <div className={styles.layout}>
+      <div className={styles.body}>
+        {headerProps ? (
+          <HeaderLayout {...headerProps}>{content}</HeaderLayout>
+        ) : (
+          <div className={styles.content}>{content}</div>
+        )}
+      </div>
+      <NavBar />
+    </div>
+  );
+};
+
+export default TabBarLayout;

package/template/src/layouts/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useKeepOutlets, useLocation } from 'alita';
+import type { LayoutName } from '@/routes';
+import { getLayoutName, ssoLoginEnabled } from '@/routes';
+import BlankLayout from './BlankLayout';
+import HeaderLayout from './HeaderLayout';
+import SSOLoginLayout from './SSOLoginLayout';
+import TabBarLayout from './TabBarLayout';
+
+const layoutMap: Record<LayoutName, React.ComponentType<{ children?: React.ReactNode }>> = {
+  tabBar: TabBarLayout,
+  header: HeaderLayout,
+  blank: BlankLayout,
+};
+
+/**
+ * 全局外壳：SSO 闸门 + keepalive + 按 src/routes.ts 选择布局。
+ * 改 routes.ts（含 ssoLoginEnabled）走 HMR，不用重启 dev。
+ */
+export default function Layout() {
+  const { pathname } = useLocation();
+  const element = useKeepOutlets();
+  const LayoutComp = layoutMap[getLayoutName(pathname)];
+
+  return (
+    <SSOLoginLayout enabled={ssoLoginEnabled}>
+      <LayoutComp>{element}</LayoutComp>
+    </SSOLoginLayout>
+  );
+}

package/template/src/layouts/usePageHeaderProps.ts

@@ -0,0 +1,9 @@
+import { useLocation } from 'alita';
+import { getHeaderProps } from '@/routes';
+import type { HeaderProps } from '@/components/Header';
+
+/** 从 src/routes.ts 读取当前页 headerProps；未配置则不展示 Header */
+export function usePageHeaderProps(): HeaderProps | undefined {
+  const { pathname } = useLocation();
+  return getHeaderProps(pathname);
+}

package/template/src/pages/index/index.css

@@ -3,15 +3,15 @@
   flex-direction: column;
   align-items: center;
   padding: var(--spacing-xl);
-  min-height: 100vh;
+  min-height: 100%;
   background: var(--color-background-bg);
 }
 
 .welcome {
-  width: 200px;
-  height: 200px;
-  background: url('~@/assets/yay.jpg') no-repeat center 0;
-  background-size: 200px 200px;
+  width: 246px;
+  height: 184px;
+  background: url('~@/assets/welcome.png') no-repeat center 0;
+  background-size: 246px 184px;
   border-radius: var(--radius-card);
   margin-top: var(--spacing-xxl);
 }

package/template/src/pages/index/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useNavigate } from 'alita';
 import { Button } from 'antd-mobile';
 import styles from './index.css';
@@ -8,10 +9,9 @@ export default function () {
     <div className={styles.normal}>
       <div className={styles.welcome} />
       <p className={styles.description}>
-        To get started, edit <code>src/pages/index.js</code> and save to reload.
+        Welcome to VibeNote application development.
       </p>
       <Button
-        size="large"
         color="primary"
         fill="solid"
         block
@@ -23,6 +23,19 @@ export default function () {
       >
         Go to List
       </Button>
+      <Button
+        color="primary"
+        fill="outline"
+        block
+        onClick={() => navigate('/xiaozhi-chat')}
+        style={{
+          marginTop: 'var(--spacing-md)',
+          borderRadius: 'var(--radius-button)',
+          fontWeight: 'var(--font-weight-medium)',
+        }}
+      >
+        xiaozhi-chat
+      </Button>
     </div>
   );
 }

package/template/src/pages/list/index.tsx

@@ -1,7 +1,7 @@
-import { Content, Header, Page } from '@alita/flow';
+import { Content, Header as PageHeader, Page } from '@alita/flow';
 import { useNavigate } from 'alita';
 import { InfiniteScroll, List } from 'antd-mobile';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import SearchBar from '../../components/SearchBar';
 
 let count = 0;
@@ -47,9 +47,9 @@ export default () => {
   }, []);
   return (
     <Page>
-      <Header>
-        <SearchBar placeholder="请输入内容" />
-      </Header>
+      <PageHeader>
+        <SearchBar />
+      </PageHeader>
       <Content>
         <List>
           {data.map((item, index) => (

package/template/src/pages/test/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useNavigate } from 'alita';
+import { Button } from 'antd-mobile';
+
+export default function () {
+  const navigate = useNavigate();
+  return (
+    <div vibe-element="safe-area-view" vibe-edges="top">
+      2111
+    </div>
+  );
+}

package/template/src/pages/xiaozhi-chat/index.less

@@ -0,0 +1,4 @@
+.wrap {
+  height: 100%;
+  overflow: hidden;
+}

package/template/src/pages/xiaozhi-chat/index.tsx

@@ -0,0 +1,26 @@
+import React, { useCallback } from 'react';
+import { useNavigate } from 'alita';
+import { XiaozhiChatPage } from '@talknote/xiaozhi-chat';
+import styles from './index.less';
+
+/**
+ * Ask AI 路由壳：业务实现在 packages/xiaozhi-chat
+ * 布局为 BlankLayout，见 src/routes.ts
+ */
+export default () => {
+  const navigate = useNavigate();
+
+  const handleBack = useCallback(() => {
+    if (window.history.length > 1) {
+      navigate(-1);
+      return;
+    }
+    navigate('/', { replace: true });
+  }, [navigate]);
+
+  return (
+    <div className={styles.wrap}>
+      <XiaozhiChatPage title="Ask AI" onBack={handleBack} />
+    </div>
+  );
+};

package/template/src/routes.ts

@@ -0,0 +1,49 @@
+import type { HeaderProps } from '@/components/Header';
+
+export type LayoutName = 'tabBar' | 'header' | 'blank';
+
+export type AppRoute = {
+  path: string;
+
+  /** tabBar：底栏；header：仅顶栏；blank：都没有 */
+  layout: LayoutName;
+
+  /** 不配则不展示 Header */
+  headerProps?: HeaderProps;
+};
+
+/** Top-level SSOLoginLayout. false = skip ticket login and enter the app. */
+export const ssoLoginEnabled = false;
+
+// 系统使用约定路由（src/pages 下各目录的 index.tsx），此处仅为路由配置layout 和 header，如不配置 layout 使用 blank、header不展示。
+const routes: AppRoute[] = [
+  {
+    path: '/',
+    layout: 'tabBar',
+    headerProps: { title: '首页', showBack: false },
+  },
+  {
+    path: '/list',
+    layout: 'tabBar',
+    headerProps: { title: '列表', showBack: false },
+  },
+];
+
+function matchRoute(pathname: string): AppRoute | undefined {
+  const exact = routes.find((item) => item.path === pathname);
+  if (exact) {
+    return exact;
+  }
+
+  return [...routes]
+    .filter((item) => item.path !== '/' && pathname.startsWith(`${item.path}/`))
+    .sort((a, b) => b.path.length - a.path.length)[0];
+}
+
+export function getLayoutName(pathname: string): LayoutName {
+  return matchRoute(pathname)?.layout ?? 'blank';
+}
+
+export function getHeaderProps(pathname: string): HeaderProps | undefined {
+  return matchRoute(pathname)?.headerProps;
+}

package/template/src/services/api.ts

@@ -1,5 +1,10 @@
-import { request } from 'alita';
+import { post, request } from '@/utils/request';
 
 export async function query(): Promise<any> {
-  return request('/api/hello', { method: 'POST' });
+  return request('/api/hello', { method: 'POST', prefix: false, unwrap: false });
+}
+
+/** POST /oauth2/ticketLogin — plants session cookie */
+export function ssoLogin(params: { ticket: string }) {
+  return post('/oauth2/ticketLogin', params);
 }

package/template/src/theme/variables.css

@@ -135,3 +135,8 @@
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.75;
 }
+
+/* 覆盖 antd-mobile 默认主色，与 --color-primary 保持一致 */
+:root:root {
+  --adm-color-primary: var(--color-primary);
+}

package/template/src/utils/ensureSsoLogin.ts

@@ -0,0 +1,28 @@
+import { ssoLogin } from '@/services/api';
+
+let ssoPromise: Promise<void> | null = null;
+let ssoSucceeded = false;
+
+export const hasSsoSucceeded = () => ssoSucceeded;
+
+/** First entry: get ticket from native bridge, then ticketLogin. Failures can retry. */
+export const ensureSsoLogin = (): Promise<void> => {
+  if (ssoPromise) return ssoPromise;
+
+  const run = async () => {
+    const ticket = (await window.vibeNoteBridge?.getAuthTicket?.())?.ticket;
+    if (!ticket) {
+      throw new Error('empty ticket');
+    }
+    await ssoLogin({ ticket });
+    ssoSucceeded = true;
+  };
+
+  ssoPromise = run().catch((error) => {
+    ssoPromise = null;
+    ssoSucceeded = false;
+    throw error;
+  });
+
+  return ssoPromise;
+};

package/template/src/utils/goBack.ts

@@ -0,0 +1,10 @@
+import TalkNoteH5Bridge from '@talknote/h5-bridge';
+
+/** 有浏览历史则后退，否则交给原生容器 */
+export function goBack() {
+  if (window.history.length > 1) {
+    window.history.back();
+    return;
+  }
+  TalkNoteH5Bridge.goBack();
+}

package/template/src/utils/request.ts

@@ -0,0 +1,106 @@
+import { request as umiRequest } from 'alita';
+import type { RequestOptionsInit } from 'alita';
+
+export const API_PREFIX = process.env.API_PREFIX || './server/nes';
+const SUCCESS_RESULT_CODE = '0';
+const DEFAULT_TIMEOUT = 60_000;
+
+export type ApiInnerResponse<T = unknown> = {
+  resultCode?: string | number;
+  resultObject?: T;
+  resultMsg?: string;
+};
+
+export type ApiResponse<T = unknown> = {
+  resultCode?: string | number;
+  resultObject?: ApiInnerResponse<T> | T;
+  resultMsg?: string;
+};
+
+export type AppRequestOptions = Omit<RequestOptionsInit, 'prefix'> & {
+
+  /** prepend API_PREFIX; default true */
+  prefix?: boolean;
+
+  /** check resultCode and unwrap resultObject; default true */
+  unwrap?: boolean;
+};
+
+export function withApiPrefix(path: string): string {
+  if (/^https?:\/\//.test(path) || path.startsWith(API_PREFIX)) {
+    return path;
+  }
+  const normalized = path.startsWith('/') ? path : `/${path}`;
+  return `${API_PREFIX}${normalized}`;
+}
+
+const isSuccessCode = (code: unknown) => String(code) === SUCCESS_RESULT_CODE;
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  value != null && typeof value === 'object' && !Array.isArray(value);
+
+const getApiErrorMessage = (body: unknown, fallback: string) => {
+  if (!isRecord(body)) return fallback;
+  const inner = body.resultObject;
+  if (isRecord(inner) && typeof inner.resultMsg === 'string' && inner.resultMsg.trim()) {
+    return inner.resultMsg;
+  }
+  if (typeof body.resultMsg === 'string' && body.resultMsg.trim()) {
+    return body.resultMsg;
+  }
+  return fallback;
+};
+
+/** Single- or double-layer NES envelope */
+export function unwrapApiData<T>(body: unknown): T {
+  if (body == null) {
+    throw new Error('业务请求失败');
+  }
+  if (!isRecord(body) || body.resultCode == null) {
+    return body as T;
+  }
+  if (!isSuccessCode(body.resultCode)) {
+    throw new Error(getApiErrorMessage(body, '业务请求失败'));
+  }
+
+  const inner = body.resultObject;
+  if (isRecord(inner) && inner.resultCode != null) {
+    if (!isSuccessCode(inner.resultCode)) {
+      throw new Error(getApiErrorMessage(body, '业务请求失败'));
+    }
+    return inner.resultObject as T;
+  }
+
+  return inner as T;
+}
+
+export async function request<T>(path: string, options: AppRequestOptions = {}): Promise<T> {
+  const { prefix = true, unwrap = true, ...rest } = options;
+  const url = prefix ? withApiPrefix(path) : path;
+
+  try {
+    const body = await umiRequest(url, {
+      credentials: 'include',
+      timeout: DEFAULT_TIMEOUT,
+      ...rest,
+    });
+    if (!unwrap) {
+      return body as T;
+    }
+    return unwrapApiData<T>(body);
+  } catch (error) {
+    if (error instanceof Error && error.message.trim()) {
+      throw error;
+    }
+    throw new Error('网络请求失败');
+  }
+}
+
+export const get = <T>(
+  path: string,
+  params?: Record<string, unknown>,
+  options?: AppRequestOptions,
+) => request<T>(path, { ...options, method: 'GET', params });
+
+export const post = <T>(path: string, data?: unknown, options?: AppRequestOptions) =>
+  request<T>(path, { ...options, method: 'POST', data });

package/template/tsconfig.json

@@ -1,3 +1,6 @@
 {
-  "extends": "./src/.umi/tsconfig.json"
+  "extends": "./src/.umi/tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
 }

package/template/typings.d.ts

@@ -1 +1,16 @@
 import 'alita/typings';
+
+declare module 'react' {
+  interface HTMLAttributes<T> {
+    'vibe-element'?: string;
+    'vibe-edges'?: string;
+  }
+}
+
+declare global {
+  interface Window {
+    vibeNoteBridge?: {
+      getAuthTicket?: () => Promise<{ ticket?: string }>;
+    };
+  }
+}