@lark-apaas/coding-templates 0.1.43-alpha.0 → 0.1.43-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-templates",
-  "version": "0.1.43-alpha.0",
+  "version": "0.1.43-alpha.2",
   "description": "OpenClaw project templates for mclaw CLI",
   "publishConfig": {
     "access": "public"

package/template-apex/README.md

@@ -9,7 +9,7 @@
 - UI 组件: shadcn/ui `import { Button } from "@/components/ui/button";`
 - 图标: lucide-react `import { SearchIcon } from "lucide-react";`
 - 图表: echarts-for-react `import ReactECharts from "echarts-for-react";`
-- 动画: gsap `import gsap from "gsap"; import { useGSAP } from "@gsap/react";`
+- 动画: framer-motion `import { motion } from "framer-motion";`
 - 路由: react-router-dom `import { Link, useNavigate } from "react-router-dom";`
 - 校验: zod `import { z } from "zod";`
 

package/template-vite-react/.spark/meta.json.example

@@ -0,0 +1,8 @@
+{
+  "appId": "app_xxxxxxxxxxxxxx",
+  "template": "vite-react",
+  "version": "0.1.0",
+  "archType": 2,
+  "features": ["client"],
+  "appUrl": "https://bytedance.aiforce.cloud/app/app_xxxxxxxxxxxxxx"
+}

package/template-vite-react/.spark-project

@@ -0,0 +1,18 @@
+run = ["npm", "run", "dev"]
+lint = ["npm", "run", "lint"]
+hidden = [".config", ".git", "scripts", "node_modules", "dist", ".spark", ".agent", ".agents", "tmp", ".spark_project", ".playwright-cli"]
+
+[deployment]
+build = ["npm", "run", "build"]
+
+[files]
+[files.restrict]
+pathPatterns = ["package.json", ".spark-project", ".spark/meta.json", ".gitignore"]
+[files.hidden]
+pathPatterns = [".config", ".git", "scripts", "node_modules", "dist", ".spark", ".agent", ".agents", "tmp", ".spark_project", ".playwright-cli"]
+
+[sandbox]
+# 临时兼容老沙箱硬编码探测的 3000 / 8001 端口。
+# 这两个端口由 scripts/mock-health.cjs 占位，Vite dev server 实际监听 CLIENT_DEV_PORT(默认 8080)。
+# 沙箱链路切到新协议后，可改回 [8080]，并删掉 mock-health.cjs。
+healthCheck = [8001, 3000]

package/template-vite-react/client/src/hooks/use-mobile.ts

@@ -3,7 +3,9 @@ import * as React from "react"
 const MOBILE_BREAKPOINT = 768
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  const [isMobile, setIsMobile] = React.useState<boolean>(() =>
+    typeof window !== "undefined" && window.innerWidth < MOBILE_BREAKPOINT,
+  )
 
   React.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
@@ -11,9 +13,8 @@ export function useIsMobile() {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
     }
     mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
     return () => mql.removeEventListener("change", onChange)
   }, [])
 
-  return !!isMobile
+  return isMobile
 }

package/template-vite-react/package.json

@@ -10,6 +10,7 @@
     ]
   },
   "scripts": {
+    "dev": "concurrently -k -n vite,health 'vite --port 8001 --host 0.0.0.0' 'node scripts/mock-health.cjs'",
     "build": "bash scripts/build.sh",
     "typecheck": "tsc -p tsconfig.app.json",
     "lint": "concurrently npm:typecheck npm:lint:eslint",

package/template-vite-react/scripts/mock-health.cjs

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+/**
+ * 沙箱预览态健康检查兜底：在 3000 端口起 HTTP listener。
+ *
+ * 老沙箱硬编码探测 3000 + 8001 判定"应用启动了"。jsPage 没有真实 Node server，
+ * 8001 由 Vite dev server 真正占（预览流量也走 8001），3000 没有任何业务进程，
+ * 只能 mock 一个 listener 让健康检查过。
+ *
+ * 等沙箱链路切到新协议（读 .spark-project [sandbox].healthCheck）后可删除。
+ */
+const http = require('node:http');
+
+const PORTS = [3000];
+
+for (const port of PORTS) {
+  const server = http.createServer((_req, res) => {
+    res.writeHead(200, { 'content-type': 'text/plain' });
+    res.end('ok');
+  });
+  server.on('error', (err) => {
+    console.error(`[mock-health] :${port} listen error:`, err.message);
+    if (err.code === 'EADDRINUSE') {
+      // 端口已被占说明业务已起来，mock 退场即可
+      console.warn(`[mock-health] :${port} 已被占用，跳过 mock`);
+      return;
+    }
+    process.exitCode = 1;
+  });
+  server.listen(port, '0.0.0.0', () => {
+    console.log(`[mock-health] listening on :${port}`);
+  });
+}

package/template-vite-react/vite.config.ts

@@ -1,5 +1,56 @@
 import path from 'path'
+import type { IncomingMessage, ServerResponse } from 'http'
 import { defineConfig } from '@lark-apaas/coding-vite-preset'
+import type { Plugin, ViteDevServer } from 'vite'
+
+/**
+ * dev 模式 base-path normalize 中间件
+ *
+ * 沙箱预览网关把流量原样转给 vite（保留 /app/:appId 前缀）。浏览器首次访问的
+ * URL 形如 `/app/app_xxx?sso_token=...`，pathname 缺末尾 /。
+ *
+ * vite 8 的 baseMiddleware 对"缺末尾 /"的请求不再像 vite 5 那样自动 301，
+ * 而是直接返回 404 警告页 "The server is configured with a public base URL..."。
+ *
+ * 这里做 internal rewrite（不发 301，避免跟沙箱网关形成 round-trip 死循环）：
+ * 在 vite 内置 baseMiddleware **之前** unshift 一个中间件，把 req.url 改写
+ * 成带尾 /，下游 baseMiddleware 继续 strip base → SPA fallback。
+ * 浏览器全程不感知 redirect，地址栏可保留缺尾 / 形态（BrowserRouter basename
+ * 处理路由）。
+ *
+ * 必须 stack.unshift 而非 server.middlewares.use(...)，否则会排到内置
+ * baseMiddleware 之后失效。
+ *
+ * TODO: 这段已同步到 @lark-apaas/coding-vite-preset，待该包发布并被本模板
+ * 依赖升级拉到后，可以删除此 plugin。保留是为了让现存沙箱（用着老 preset
+ * 的应用）也能立即生效。
+ */
+const baseNormalizePlugin: Plugin = {
+  name: 'base-path-normalize',
+  configureServer(server: ViteDevServer) {
+    const base = (process.env.CLIENT_BASE_PATH || '').replace(/\/+$/, '')
+    if (!base) return
+    const stack = (
+      server.middlewares as unknown as {
+        stack: Array<{ route: string; handle: unknown }>
+      }
+    ).stack
+    if (!Array.isArray(stack)) return
+    stack.unshift({
+      route: '',
+      handle: (req: IncomingMessage, _res: ServerResponse, next: () => void) => {
+        const url = req.url || ''
+        const qIdx = url.indexOf('?')
+        const pathname = qIdx >= 0 ? url.slice(0, qIdx) : url
+        const search = qIdx >= 0 ? url.slice(qIdx) : ''
+        if (pathname === base) {
+          req.url = base + '/' + search
+        }
+        next()
+      },
+    })
+  },
+}
 
 export default defineConfig({
   root: path.resolve(__dirname, 'client'),
@@ -9,4 +60,5 @@ export default defineConfig({
       '@shared': path.resolve(__dirname, 'shared'),
     },
   },
+  plugins: [baseNormalizePlugin],
 })

package/template-apex/client/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

package/template-vite-react/client/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}