@talknote/create-talknote-h5 0.1.3 → 0.1.5

package/template/packages/xiaozhi-chat/utils/typewriter.ts

@@ -0,0 +1,265 @@
+const DEFAULT_TYPING_SPEED = 32;
+const DEFAULT_CATCH_UP_SPEED = 6;
+const DEFAULT_BATCH_SIZE = 2;
+const DEFAULT_CATCH_UP_BATCH_SIZE = 10;
+const DEFAULT_MAX_LAG = 80;
+const DEFAULT_MAX_ADVANCE_PER_TICK = 32;
+const DEFAULT_SMOOTH_LAG_THRESHOLD = 40;
+const DEFAULT_SMOOTH_CHARS_PER_SECOND = 22;
+const DEFAULT_SMOOTH_MAX_ADVANCE_PER_TICK = 1;
+const DEFAULT_FINISH_TARGET_MS = 2500;
+const DEFAULT_FINISH_MIN_MS = 2000;
+const DEFAULT_FINISH_MAX_MS = 3000;
+const FINISH_MAX_TICK_MS = 120;
+const LAG_RAMP_MULTIPLIER = 4;
+
+export const TYPEWRITER_DEFAULTS = {
+  typingSpeed: DEFAULT_TYPING_SPEED,
+  catchUpSpeed: DEFAULT_CATCH_UP_SPEED,
+  batchSize: DEFAULT_BATCH_SIZE,
+  catchUpBatchSize: DEFAULT_CATCH_UP_BATCH_SIZE,
+  maxLag: DEFAULT_MAX_LAG,
+  maxAdvancePerTick: DEFAULT_MAX_ADVANCE_PER_TICK,
+  smoothLagThreshold: DEFAULT_SMOOTH_LAG_THRESHOLD,
+  smoothCharsPerSecond: DEFAULT_SMOOTH_CHARS_PER_SECOND,
+  smoothMaxAdvancePerTick: DEFAULT_SMOOTH_MAX_ADVANCE_PER_TICK,
+  finishTargetMs: DEFAULT_FINISH_TARGET_MS,
+  finishMinMs: DEFAULT_FINISH_MIN_MS,
+  finishMaxMs: DEFAULT_FINISH_MAX_MS,
+};
+
+export type TypewriterPacing = {
+  advanceSize: number;
+  delayMs: number;
+};
+
+export const computeStreamFinishPacing = (
+  lag: number,
+  typingSpeed: number,
+  catchUpSpeed: number,
+  maxAdvancePerTick: number,
+  remainingMs: number,
+): TypewriterPacing => {
+  if (lag <= 0) {
+    return { advanceSize: 0, delayMs: typingSpeed };
+  }
+
+  if (remainingMs <= catchUpSpeed) {
+    return {
+      advanceSize: Math.min(lag, maxAdvancePerTick),
+      delayMs: catchUpSpeed,
+    };
+  }
+
+  const advanceSize = Math.max(
+    1,
+    Math.min(maxAdvancePerTick, Math.round((lag * typingSpeed) / remainingMs)),
+  );
+  const tickCount = Math.ceil(lag / advanceSize);
+  const delayMs = Math.max(
+    catchUpSpeed,
+    Math.min(FINISH_MAX_TICK_MS, Math.round(remainingMs / tickCount)),
+  );
+
+  return {
+    advanceSize: Math.min(lag, advanceSize),
+    delayMs,
+  };
+};
+
+export const computeTypewriterPacing = (input: {
+  lag: number;
+  batchSize: number;
+  catchUpBatchSize: number;
+  maxLag: number;
+  maxAdvancePerTick: number;
+  typingSpeed: number;
+  catchUpSpeed: number;
+  smoothLagThreshold?: number;
+  smoothCharsPerSecond?: number;
+  smoothMaxAdvancePerTick?: number;
+  isStreamFinished?: boolean;
+  finishRemainingMs?: number;
+}): TypewriterPacing => {
+  const {
+    lag,
+    batchSize,
+    catchUpBatchSize,
+    maxLag,
+    maxAdvancePerTick,
+    typingSpeed,
+    catchUpSpeed,
+    smoothLagThreshold = DEFAULT_SMOOTH_LAG_THRESHOLD,
+    smoothCharsPerSecond = DEFAULT_SMOOTH_CHARS_PER_SECOND,
+    smoothMaxAdvancePerTick = DEFAULT_SMOOTH_MAX_ADVANCE_PER_TICK,
+    isStreamFinished = false,
+    finishRemainingMs = DEFAULT_FINISH_TARGET_MS,
+  } = input;
+
+  if (lag <= 0) {
+    return { advanceSize: 0, delayMs: typingSpeed };
+  }
+
+  if (isStreamFinished) {
+    return computeStreamFinishPacing(
+      lag,
+      typingSpeed,
+      catchUpSpeed,
+      maxAdvancePerTick,
+      Math.max(catchUpSpeed, finishRemainingMs),
+    );
+  }
+
+  if (lag <= smoothLagThreshold) {
+    const tickMs = typingSpeed;
+    const charsPerTick = (smoothCharsPerSecond * tickMs) / 1000;
+    const cappedPerTick = Math.max(
+      1,
+      Math.min(smoothMaxAdvancePerTick, Math.round(charsPerTick) || 1),
+    );
+    return {
+      advanceSize: Math.min(lag, cappedPerTick),
+      delayMs: tickMs,
+    };
+  }
+
+  if (lag <= maxLag) {
+    const span = Math.max(1, maxLag - smoothLagThreshold);
+    const t = (lag - smoothLagThreshold) / span;
+    const advanceSize = Math.min(
+      lag,
+      Math.max(1, Math.round(1 + t * (batchSize - 1))),
+    );
+    const delayMs = Math.round(typingSpeed * (1 - t * 0.25));
+    return { advanceSize, delayMs };
+  }
+
+  const rampStart = maxLag;
+  const rampEnd = Math.max(rampStart + 1, maxLag * LAG_RAMP_MULTIPLIER);
+  const boostedT = Math.min(1, (lag - rampStart) / (rampEnd - rampStart));
+
+  const advanceSize = Math.min(
+    lag,
+    maxAdvancePerTick,
+    Math.max(
+      catchUpBatchSize,
+      Math.round(catchUpBatchSize + boostedT * (maxAdvancePerTick - catchUpBatchSize)),
+    ),
+  );
+
+  const delayMs = Math.max(
+    catchUpSpeed,
+    Math.round(typingSpeed - boostedT * (typingSpeed - catchUpSpeed)),
+  );
+
+  return { advanceSize, delayMs };
+};
+
+const applyAtomicTokens = (
+  displayedLength: number,
+  received: string,
+  nextLength: number,
+  atomicTokens: string[],
+): number => {
+  if (!atomicTokens.length) {
+    return nextLength;
+  }
+
+  const receivedLength = received.length;
+  let resolved = nextLength;
+
+  const sortedTokens = [...atomicTokens]
+    .filter(Boolean)
+    .sort((a, b) => b.length - a.length);
+
+  sortedTokens.forEach((token) => {
+    let searchFrom = 0;
+    while (searchFrom < receivedLength) {
+      const tokenStart = received.indexOf(token, searchFrom);
+      if (tokenStart === -1) {
+        break;
+      }
+
+      const tokenEnd = tokenStart + token.length;
+
+      if (tokenEnd <= displayedLength) {
+        searchFrom = tokenEnd;
+      } else {
+        const cutsInsideToken = resolved > tokenStart && resolved < tokenEnd;
+        if (cutsInsideToken) {
+          resolved = tokenEnd <= receivedLength ? tokenEnd : Math.min(resolved, tokenStart);
+        }
+        searchFrom = tokenStart + 1;
+      }
+    }
+  });
+
+  return resolved;
+};
+
+const applyAtomicClosedTags = (
+  displayedLength: number,
+  received: string,
+  nextLength: number,
+  atomicClosedTags: string[],
+): number => {
+  if (!atomicClosedTags.length) {
+    return nextLength;
+  }
+
+  const receivedLength = received.length;
+  let resolved = nextLength;
+
+  [...new Set(atomicClosedTags.filter(Boolean))].forEach((tag) => {
+    const open = `<${tag}>`;
+    const close = `</${tag}>`;
+    let searchFrom = 0;
+
+    while (searchFrom < receivedLength) {
+      const openStart = received.indexOf(open, searchFrom);
+      if (openStart === -1) {
+        break;
+      }
+
+      const contentStart = openStart + open.length;
+      const closeStart = received.indexOf(close, contentStart);
+
+      if (closeStart === -1) {
+        resolved = displayedLength <= openStart
+          ? Math.min(resolved, openStart)
+          : displayedLength;
+        break;
+      }
+
+      const blockEnd = closeStart + close.length;
+      if (blockEnd <= displayedLength) {
+        searchFrom = blockEnd;
+      } else {
+        if (resolved > openStart && resolved < blockEnd) {
+          resolved = blockEnd;
+        }
+        searchFrom = blockEnd;
+      }
+    }
+  });
+
+  return resolved;
+};
+
+export const resolveTypewriterDisplayLength = (
+  displayedLength: number,
+  received: string,
+  batchSize: number,
+  atomicTokens: string[] = [],
+  atomicClosedTags: string[] = [],
+): number => {
+  const receivedLength = received.length;
+  if (displayedLength >= receivedLength) {
+    return receivedLength;
+  }
+
+  let nextLength = Math.min(displayedLength + Math.max(1, batchSize), receivedLength);
+  nextLength = applyAtomicTokens(displayedLength, received, nextLength, atomicTokens);
+  nextLength = applyAtomicClosedTags(displayedLength, received, nextLength, atomicClosedTags);
+  return Math.max(nextLength, displayedLength);
+};

package/template/scripts/dev.js

@@ -3,13 +3,14 @@
  * 开发启动脚本
  *
  * 用法：
- *   yarn dev                          # 使用 proxy.ts 中的默认代理地址
- *   yarn dev http://1.2.3.4:10000     # 把 process.env.BASE_URL 注入为该地址，代理过去
+ *   yarn dev                          # 走 .env.local / 环境变量 / proxy.ts 默认代理地址
+ *   yarn dev http://1.2.3.4:10000     # 把 process.env.DEV_SERVER 注入为该地址，代理过去
  *   yarn dev http://1.2.3.4:10000 --port 8081   # 额外参数透传给 alita dev
  *
  * 说明：
  *   第一个以 http:// 或 https:// 开头的参数会被当作代理地址，
- *   注入 process.env.BASE_URL（proxy.ts 会读取它）。
+ *   注入 process.env.DEV_SERVER（proxy.ts 会读取它）。
+ *   未传地址时不设置，由 alita 自行加载 .env.local。
  *   其余参数原样透传给 alita dev。
  */
 const { spawn } = require('child_process');
@@ -21,10 +22,8 @@ const proxyIndex = args.findIndex((a) => /^https?:\/\//i.test(a));
 const proxyUrl = proxyIndex >= 0 ? args.splice(proxyIndex, 1)[0] : undefined;
 
 if (proxyUrl) {
-  process.env.BASE_URL = proxyUrl;
-  console.log(`\n[dev] 代理地址已注入 BASE_URL = ${proxyUrl}\n`);
-} else {
-  console.log('\n[dev] 未指定代理地址，使用 proxy.ts 中的默认值\n');
+  process.env.DEV_SERVER = proxyUrl;
+  console.log(`\n[dev] 代理地址已注入 DEV_SERVER = ${proxyUrl}\n`);
 }
 
 // 启动 alita dev，剩余参数透传

package/template/src/app.tsx

@@ -1,15 +1,4 @@
-import HomeGary from '@/assets/demoIcon/home.png';
-import HomeBlue from '@/assets/demoIcon/home1.png';
-import ListGary from '@/assets/demoIcon/list.png';
-import ListBlue from '@/assets/demoIcon/list1.png';
-import type {
-  NavBarListItem,
-  NavBarProps,
-  ResponseError,
-  TabBarListItem,
-  TabBarProps,
-  TitleListItem,
-} from 'alita';
+import type { ResponseError } from 'alita';
 import TalkNoteH5Bridge, { type RequestBaseInfo } from '@talknote/h5-bridge';
 
 // 缓存原生请求信息，避免每次请求都调用 bridge
@@ -48,64 +37,3 @@ export const request = {
     console.log(error);
   },
 };
-
-const titleList: TitleListItem[] = [
-  {
-    pagePath: '/',
-    title: '首页',
-  },
-  {
-    pagePath: '/list',
-    title: '列表',
-  },
-];
-const navList: NavBarListItem[] = [];
-const navBar: NavBarProps = {
-  navList,
-  fixed: false,
-  //默认顶部导航栏不隐藏
-  hideNavBar: false,
-  onLeftClick: () => {
-    // 判断是否能够返回，如果不能返回调用 @talknote/h5-bridge goBack
-    if (window.history.length > 1) {
-      window.history.back();       // 有历史记录，浏览器返回
-    } else {
-      TalkNoteH5Bridge.goBack();   // 没有历史记录，交给原生端处理
-    }
-  },
-};
-const tabList: TabBarListItem[] = [
-  {
-    pagePath: '/',
-    text: '首页',
-    iconPath: HomeGary,
-    selectedIconPath: HomeBlue,
-    title: '首页',
-    iconSize: '',
-    badge: '',
-  },
-  {
-    pagePath: '/list',
-    text: '列表',
-    iconPath: ListGary,
-    selectedIconPath: ListBlue,
-    title: '列表',
-    iconSize: '',
-    badge: '',
-  },
-];
-
-const tabBar: TabBarProps = {
-  color: `#999999`,
-  selectedColor: '#00A0FF',
-  borderStyle: 'white',
-  position: 'bottom',
-  list: tabList,
-};
-
-export const mobileLayout = {
-  documentTitle: '默认标题',
-  navBar,
-  tabBar,
-  titleList,
-};

package/template/src/components/Header/index.less

@@ -0,0 +1,70 @@
+/* Px 避免 alita px→rem 把顶栏压小；vibe-element=header 由原生注入吸顶与安全区 */
+.header {
+  box-sizing: border-box;
+  position: relative;
+  z-index: 100;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 44Px;
+  padding: 0 12Px;
+  background: var(--color-background-primary);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.backBtn {
+  position: relative;
+  z-index: 2;
+  width: 36Px;
+  height: 36Px;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  flex-shrink: 0;
+  color: var(--color-text-primary);
+}
+
+.side {
+  width: 36Px;
+  height: 36Px;
+  flex-shrink: 0;
+}
+
+.title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 44Px;
+  max-width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  font-size: 17Px;
+  font-weight: var(--font-weight-semibold);
+  line-height: 22Px;
+  color: var(--color-text-primary);
+  font-family: var(--font-family);
+}
+
+.right {
+  position: relative;
+  z-index: 2;
+  min-width: 36Px;
+  height: 36Px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+}

package/template/src/components/Header/index.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react';
+import { ChevronLeft } from 'lucide-react';
+import { goBack as defaultGoBack } from '@/utils/goBack';
+import styles from './index.less';
+
+export type HeaderProps = {
+  title?: string;
+  showBack?: boolean;
+  onBack?: () => void;
+  extra?: React.ReactNode;
+  children?: React.ReactNode;
+};
+
+/**
+ * 页面顶栏。由 HeaderLayout 固定在滚动区域之外。
+ * vibe-element="header" 供原生容器注入吸顶与安全区。
+ */
+const Header: React.FC<HeaderProps> = ({
+  title,
+  showBack = true,
+  onBack = defaultGoBack,
+  extra,
+  children,
+}) => {
+  useEffect(() => {
+    if (title) {
+      document.title = title;
+    }
+  }, [title]);
+
+  return (
+    <header className={styles.header} vibe-element="header">
+      {showBack ? (
+        <button type="button" className={styles.backBtn} onClick={onBack} aria-label="返回">
+          <ChevronLeft size={24} strokeWidth={2} />
+        </button>
+      ) : (
+        <span className={styles.side} />
+      )}
+      <div className={styles.title}>{children ?? title}</div>
+      <div className={styles.right}>{extra}</div>
+    </header>
+  );
+};
+
+export default Header;

package/template/src/components/TabBar/index.less

@@ -0,0 +1,13 @@
+.wrap {
+  flex-shrink: 0;
+  background: var(--color-background-primary);
+  border-top: 1px solid var(--color-border);
+
+  :global {
+    .adm-tab-bar {
+      --adm-color-primary: var(--color-primary);
+      --adm-color-text-secondary: var(--color-text-tertiary);
+      background: var(--color-background-primary);
+    }
+  }
+}

package/template/src/components/TabBar/index.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { TabBar as TabBarComponent } from 'antd-mobile';
+import { useLocation, useNavigate } from 'alita';
+import { Home, List } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import styles from './index.less';
+
+export type TabItem = {
+  path: string;
+  text: string;
+  icon: LucideIcon;
+};
+
+export const navItems: TabItem[] = [
+  { path: '/', text: '首页', icon: Home },
+  { path: '/list', text: '列表', icon: List },
+];
+
+/**
+ * 底部导航。由 TabBarLayout 引入；不在 TabItem 中的页面不会高亮。
+ */
+const TabBar: React.FC = () => {
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+
+  return (
+    <div className={styles.wrap}>
+      <TabBarComponent
+        safeArea
+        activeKey={pathname}
+        onChange={(key) => {
+          if (key !== pathname) {
+            navigate(key, { replace: true });
+          }
+        }}
+      >
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          return (
+            <TabBarComponent.Item
+              key={item.path}
+              title={item.text}
+              icon={(active) => (
+                <Icon
+                  size={22}
+                  strokeWidth={2}
+                  color={active ? 'var(--color-primary)' : 'var(--color-text-tertiary)'}
+                />
+              )}
+            />
+          );
+        })}
+      </TabBarComponent>
+    </div>
+  );
+};
+
+export default TabBar;

package/template/src/global.css

@@ -1,5 +1,20 @@
 @import './theme/index.css';
 
+* {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+
+html {
+  width: 100%;
+  height: 100%;
+  text-size-adjust: 100%;
+  --alita-safe-area-top: env(safe-area-inset-top);
+  --alita-safe-area-bottom: env(safe-area-inset-bottom);
+  --alita-safe-area-left: env(safe-area-inset-left);
+  --alita-safe-area-right: env(safe-area-inset-right);
+}
+
 html,
 body,
 #root {
@@ -8,7 +23,19 @@ body,
 
 body {
   margin: 0;
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
   font-family: var(--font-family);
   background-color: var(--color-background-bg);
   color: var(--color-text-primary);
+  -webkit-font-smoothing: antialiased;
+  touch-action: manipulation;
+  overscroll-behavior-y: none;
+}
+
+/* keepalive 内层也禁止链式 overscroll，避免橡皮筋传到顶栏 */
+.runtime-keep-alive-layout,
+.runtime-keep-alive-layout-no {
+  overscroll-behavior-y: none;
 }

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

@@ -0,0 +1,5 @@
+.layout {
+  height: 100%;
+  overflow: hidden;
+  background: var(--color-background-bg);
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { LayoutOutlet } from '../LayoutOutlet';
+import styles from './index.less';
+
+/**
+ * 空白布局：无底部导航。页面自行决定是否使用 Header。
+ */
+const BlankLayout: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+  <div className={styles.layout}>
+    <LayoutOutlet>{children}</LayoutOutlet>
+  </div>
+);
+
+export default BlankLayout;

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

@@ -0,0 +1,25 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+  background: var(--color-background-bg);
+}
+
+.headerWrap {
+  flex-shrink: 0;
+  /* 独立合成层，避免 iOS 橡皮筋把顶栏一起拉伸 */
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+
+.content {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: none;
+  -webkit-overflow-scrolling: touch;
+}