@tbox.cn/app-template-h5 0.1.13 → 0.1.14

package/AGENTS.md

@@ -1,6 +1,6 @@
 # AGENTS.md
 
-template-h5 是面向 AI 生成移动 H5 应用的单 workspace 模板：`apps/client`（React/Vite）+ `apps/server`（Express）。
+template-h5 是面向 AI 生成 H5 应用的单 workspace 模板：`apps/client`（React/Vite）+ `apps/server`（Express）。
 
 ## 工程结构
 
@@ -59,4 +59,5 @@ apps/server/src/dev.ts                   # vite dev 入口（仅 tsx 运行；
 
 - 保持单 workspace 的 `apps/client` + `apps/server` 两成员；不新增 `apps/client/` 之外的 Vite 配置或嵌套 lockfile（`pnpm check:workspace` 校验）。
 - 无模块/Provider/主题装配面：缺双端 `apps/*/src/modules.ts`——`tbox-app module add`、`tbox-app new module`、`tbox-app new provider` 会被 CLI 直接拒绝；`tbox-app theme use` 因无主题接线点也不适用。
+- 模板不预设端形态（移动/桌面/自适应）——适配策略由应用自定；全局样式挂点 = `apps/client/src/styles/base.css`（仅设备无关卫生规则）。
 - 结构、路由、命令、依赖或环境变量变化时同步 README 与本文件。

package/README.md

@@ -1,6 +1,6 @@
 # template-h5
 
-tbox 移动 H5 全栈模板（包名 `@tbox.cn/app-template-h5`），单 workspace：`apps/client`（React/Vite）+ `apps/server`（Express）。运行时与页面微调经 `@tbox.cn/app-sdk-client` / `@tbox.cn/app-sdk-server`。
+tbox H5 全栈模板（包名 `@tbox.cn/app-template-h5`），单 workspace：`apps/client`（React/Vite）+ `apps/server`（Express）。运行时与页面微调经 `@tbox.cn/app-sdk-client` / `@tbox.cn/app-sdk-server`。
 
 ## 快速开始
 

package/apps/client/index.html

@@ -2,28 +2,8 @@
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <!-- 移动端视口；缩放锁定，配合 postcss-pxtorem 的 750→rem 换算 -->
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
-    />
-    <meta name="theme-color" content="#0f172a" />
-    <!-- rem 弹性根字号（threshold 450 / designWidth 750）：移动端随屏宽缩放、PC 固定 50px 居中。
-         在 CSS 前同步执行，避免首屏字号闪动。 -->
-    <script>
-      (function () {
-        var THRESHOLD = 450,
-          DESIGN = 750;
-        function setRootFontSize() {
-          var w = document.documentElement.clientWidth;
-          document.documentElement.style.fontSize =
-            (w > THRESHOLD ? 50 : (100 / DESIGN) * w) + 'px';
-        }
-        setRootFontSize();
-        window.addEventListener('resize', setRootFontSize);
-        window.addEventListener('orientationchange', setRootFontSize);
-      })();
-    </script>
+    <!-- 基础视口；全屏 safe-area（viewport-fit=cover + env() 补偿）由应用成对启用 -->
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>H5 应用</title>
     <!-- 平台微调(inspector) runtime：由 server 提供 GET /__vs_inspector__.js；dev 下经 Vite 代理到 server。 -->
     <script src="/__vs_inspector__.js" defer></script>

package/apps/client/package.json

@@ -20,7 +20,6 @@
     "@types/react-dom": "catalog:",
     "@vitejs/plugin-react": "catalog:",
     "happy-dom": "catalog:",
-    "postcss-pxtorem": "catalog:",
     "typescript": "catalog:",
     "vite": "catalog:",
     "vitest": "catalog:"

package/apps/client/src/business/App.test.tsx

@@ -6,13 +6,13 @@ import { createElement } from 'react';
 import BusinessApp from './App';
 
 describe('BusinessApp', () => {
-  it('渲染中性入口标题', () => {
+  it('渲染中性入口', () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
     flushSync(() => {
       createRoot(container).render(createElement(BusinessApp));
     });
-    expect(container.querySelector('h1')?.textContent).toBe('你的移动应用，从这里开始');
+    expect(container.querySelector('main')?.textContent).toBe('应用从这里开始');
     container.remove();
   });
 });

package/apps/client/src/business/App.tsx

@@ -1,15 +1,3 @@
-/**
- * 业务应用唯一入口：中性单页起点，无占位标记。
- * 新应用替换本组件；后端调用走 @tbox.cn/app-sdk-client 的 httpGet/httpPost（同源 /api/*）。
- */
 export default function BusinessApp() {
-  return (
-    <main className="app-shell">
-      <section className="app-hero" aria-labelledby="app-title">
-        <p className="app-kicker">H5 应用</p>
-        <h1 id="app-title">你的移动应用，从这里开始</h1>
-        <p>品牌、页面与数据能力从这里构建——前后端同仓，SDK 提供运行时与页面微调基线。</p>
-      </section>
-    </main>
-  );
+  return <main>应用从这里开始</main>;
 }

package/apps/client/src/main.tsx

@@ -21,7 +21,7 @@ if (el) {
     <StrictMode>
       <ErrorBoundary
         fallback={
-          <main className="app-error">
+          <main>
             <h1>页面暂时不可用</h1>
             <button type="button" onClick={() => window.location.reload()}>
               重新加载

package/apps/client/src/styles/base.css

@@ -1,61 +1,14 @@
-/* 基础样式三合一：tokens 变量 + 移动端基础 + motion。
-   变量值保持中性（slate 系），主题覆写由各应用自行扩展。 */
-
-/* ===== tokens（变量） ===== */
-:root {
-  --font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --color-background: #f8fafc;
-  --color-surface: #ffffff;
-  --color-text: #0f172a;
-  --color-muted: #64748b;
-  --color-primary: #0f766e;
-  --color-primary-strong: #115e59;
-  --color-accent: #f59e0b;
-  --color-border: #dbe4ea;
-  --color-focus: #f59e0b;
-  --content-width: 480px;
-  --space-1: 0.25rem;
-  --space-2: 0.5rem;
-  --space-3: 0.75rem;
-  --space-4: 1rem;
-  --space-5: 1.25rem;
-  --space-6: 1.5rem;
-  --space-8: 2rem;
-  --radius-sm: 0.5rem;
-  --radius-md: 0.75rem;
-  --shadow-soft: 0 20px 50px rgba(15, 23, 42, 0.08);
-}
-
-/* ===== 基础（reset + 移动端基线） ===== */
-:root { font-family: var(--font-family); color: var(--color-text); background: var(--color-background); font-synthesis: none; text-rendering: optimizeLegibility; }
+/* 全局样式入口：仅设备无关的基础卫生规则；视觉/布局/端形态由应用自定。 */
 *, *::before, *::after { box-sizing: border-box; }
-html { min-width: 320px; min-height: 100%; background: var(--color-background); }
-body { margin: 0; min-width: 320px; min-height: 100%; overflow-x: hidden; background: var(--color-background); }
-body, button, input, textarea, select { font: inherit; }
-button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
-button, a { touch-action: manipulation; }
-button { min-height: 44px; cursor: pointer; }
-button:disabled { cursor: wait; opacity: 0.65; }
-img, video, canvas { display: block; max-width: 100%; }
-img { height: auto; }
-#root { min-height: 100dvh; }
-@supports not (height: 100dvh) { #root { min-height: 100vh; } }
-@media (min-width: 700px) {
-  body { display: flex; justify-content: center; background: #e2e8f0; }
-  #root { width: min(100%, 480px); min-height: 100dvh; background: var(--color-background); box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); overflow-x: hidden; }
+body { margin: 0; }
+button, input, textarea, select { font: inherit; }
+img, video, canvas { display: block; }
+img, video { max-width: 100%; height: auto; }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
 }
-:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
-
-/* ===== 入口类（中性起点，随应用改写） ===== */
-.app-shell { min-height: 100dvh; padding: max(2rem, env(safe-area-inset-top)) var(--space-5) max(2rem, env(safe-area-inset-bottom)); }
-.app-hero { padding: clamp(2.5rem, 12vh, 6rem) 0 var(--space-8); }
-.app-kicker { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
-.app-hero h1 { max-width: 12ch; margin: var(--space-4) 0; font-size: 2.75rem; line-height: 1.02; }
-.app-hero p { max-width: 34rem; margin: 0 0 var(--space-6); color: var(--color-muted); font-size: 1.05rem; line-height: 1.7; }
-.app-error { display: grid; min-height: 100dvh; place-content: center; gap: var(--space-4); padding: var(--space-6); text-align: center; }
-@media (max-width: 380px) { .app-hero h1 { font-size: 2.4rem; } }
-
-/* ===== motion ===== */
-.loading-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: currentColor; animation: pulse 1.2s ease-in-out infinite; }
-@keyframes pulse { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }
-@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }

package/apps/client/src/vite-env.d.ts

@@ -1,3 +1 @@
 /// <reference types="vite/client" />
-
-declare module 'postcss-pxtorem';

package/apps/client/vite.config.ts

@@ -1,23 +1,11 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
-import pxToRem from 'postcss-pxtorem';
 import { resolve } from 'node:path';
 // 平台微调配套 babel plugin（随 @tbox.cn/app-sdk 分发）：dev 期给每个 JSX 注入源码位置属性，
 // 供 inspector runtime(/__vs_inspector__.js) 点选元素→定位源码（check:inspector 断言点）。
 import codeInspectPlugin from '@tbox.cn/app-sdk-client/platform/code-inspect';
 
-const pxToRemPlugin = pxToRem({
-  rootValue: 100,
-  unitPrecision: 5,
-  propList: ['*'],
-  selectorBlackList: ['.no-rem'],
-  minPixelValue: 1,
-  mediaQuery: false,
-  // 排除 node_modules 内三方样式，但放行 pnpm 布局下的 @tbox.cn 模块 CSS（agent 同参）
-  exclude: /node_modules\/(?!\.pnpm|@tbox\.cn)/,
-});
-
 // dev 期页面由 apps/server dev.ts 的 vite middleware 托管（本文件被其加载）；
 // build 恒走静态产物。无 .tbox-dev.local 探针段（h5 无 dev 装配面，native launch）。
 export default defineConfig(({ command }) => ({
@@ -27,9 +15,6 @@ export default defineConfig(({ command }) => ({
       '@': resolve(__dirname, 'src'),
     },
   },
-  css: {
-    postcss: { plugins: [pxToRemPlugin] },
-  },
   build: {
     rollupOptions: { input: { index: resolve(__dirname, 'index.html') } },
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tbox.cn/app-template-h5",
-  "version": "0.1.13",
-  "description": "tbox 移动 H5 全栈模板（单 workspace：apps/client + apps/server），运行时与页面微调经 @tbox.cn/app-sdk。",
+  "version": "0.1.14",
+  "description": "tbox H5 全栈模板（单 workspace：apps/client + apps/server），运行时与页面微调经 @tbox.cn/app-sdk。",
   "type": "module",
   "engines": {
     "node": ">=24.0.0 <25.0.0"

package/pnpm-lock.template.yaml

@@ -42,9 +42,6 @@ catalogs:
     happy-dom:
       specifier: 20.11.2
       version: 20.11.2
-    postcss-pxtorem:
-      specifier: 6.1.0
-      version: 6.1.0
     react:
       specifier: 18.3.1
       version: 18.3.1
@@ -123,9 +120,6 @@ importers:
       happy-dom:
         specifier: 'catalog:'
         version: 20.11.2
-      postcss-pxtorem:
-        specifier: 'catalog:'
-        version: 6.1.0(postcss@8.5.26)
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
@@ -1901,11 +1895,6 @@ packages:
       yaml:
         optional: true
 
-  postcss-pxtorem@6.1.0:
-    resolution: {integrity: sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==}
-    peerDependencies:
-      postcss: ^8.0.0
-
   postcss@8.5.26:
     resolution: {integrity: sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -3886,10 +3875,6 @@ snapshots:
       postcss: 8.5.26
       tsx: 4.23.11
 
-  postcss-pxtorem@6.1.0(postcss@8.5.26):
-    dependencies:
-      postcss: 8.5.26
-
   postcss@8.5.26:
     dependencies:
       nanoid: 3.3.18

package/pnpm-workspace.template.yaml

@@ -46,7 +46,6 @@ catalog:
   tsup: 8.5.1
   "@vitejs/plugin-react": 4.7.0
   happy-dom: 20.11.2
-  postcss-pxtorem: 6.1.0
   supertest: 7.2.2
   "@types/supertest": 7.2.1