@ttmg/cli 0.1.0-beta.8 → 0.1.0-beta.9

package/CHANGELOG.md

@@ -1,8 +1,16 @@
 ## 0.1.0
+
 发布正式版本，支持 H5 小游戏和原生小游戏的初始化、开发调试和打包构建。支持 Windows 系统
 
 ## 0.1.0-beta.1
+
 移除 Client WS 端口和 Http 端口默认 -1 的配置，变成通过和 Node CLI 通信显示发端口
 
 ## 0.1.0-beta.8
-支持自动打开浏览器，且聚焦在 devTools 窗口
+
+支持自动打开浏览器，且聚焦在 devTools 窗口
+
+## 0.1.0-beta.9
+
+1. 支持文件上传进度显示
+2. 支持自动打开浏览器调试模式

package/dist/index.js

@@ -1,2 +1,1246 @@
 #!/usr/bin/env node
-"use strict";var e,o,t,n,s,r,i=require("commander"),c=require("inquirer"),a=require("fs"),l=require("jsdom"),u=require("prettier"),d=require("chalk"),p=require("express"),f=require("path"),g=require("cheerio"),m=require("chrome-launcher"),h=require("open"),y=require("os"),w=require("crypto"),b=require("archiver"),S=require("multer"),v=require("ws"),k=require("axios"),M=require("form-data"),j=require("qrcode-terminal"),_=require("ttmg-pack");function T(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function E(e){if(Object.prototype.hasOwnProperty.call(e,"__esModule"))return e;var o=e.default;if("function"==typeof o){var t=function e(){var t=!1;try{t=this instanceof e}catch{}return t?Reflect.construct(o,arguments,this.constructor):o.apply(this,arguments)};t.prototype=o.prototype}else t={};return Object.defineProperty(t,"__esModule",{value:!0}),Object.keys(e).forEach(function(o){var n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:function(){return e[o]}})}),t}function O(){return o?e:(o=1,e={CONFIG_FILE_NAME:"minigame.config.json",SDK_URL:"https://connect.tiktok-minis.com/game/sdk.js",VCONSOLE_URL:"https://connect.tiktok-minis.com/libs/vConsole.js",VCONSOLE_INIT:"\n    if(typeof VConsole === 'function') {\n      window.vConsole = new VConsole();\n    }\n  ",MINIS_MANIFEST_FILE_NAME:"minis.manifest.json",MINIS_RUNTIME_URL:"https://www.tiktok.com/minigames/runtime"})}function N(){if(n)return t;n=1;const e=a,o=l,s=u,r=d,{JSDOM:i}=o,{CONFIG_FILE_NAME:c,SDK_URL:p,VCONSOLE_URL:f,VCONSOLE_INIT:g}=O(),m=`${process.cwd()}/${c}`,h=`${process.cwd()}/index.html`;return t=async function({config:o,clientKey:t}){if(e.writeFileSync(m,JSON.stringify(o,null,2)),!e.existsSync(h))return void console.error("index.html does not exist");const n=e.readFileSync(h,"utf8"),c=new i(n),{document:a}=c.window;let l=a.querySelector("head");l||(l=a.createElement("head"),a.documentElement.insertBefore(l,a.body));const u=Array.from(a.querySelectorAll("script")),d=u.some(e=>e.src&&e.src.includes(p)),y=u.some(e=>e.src&&e.src.includes("vConsole.js"));let w=null;if(d){const e=Array.from(l.querySelectorAll("script"));if(w=e.find(e=>function(e,o){return!!e.innerHTML&&e.innerHTML.includes("TTMinis.game.init")&&e.innerHTML.includes(o)}(e,t)),w)console.log("JS SDK 已接入，跳过 SDK 相关脚本注入");else{const o=e.filter(e=>e.src&&e.src.includes(p));o.length>0&&(w=o[o.length-1])}}else{const e=a.createElement("script");e.src=p,l.insertBefore(e,l.firstChild);const o=a.createElement("script");o.innerHTML=`\n      window.TTMinis = TTMinis;\n      TTMinis.game.init({\n        clientKey: "${t}",\n      });\n    `,l.insertBefore(o,e.nextSibling),w=o}if(function(e){return e.startsWith("sb")}(t)&&(console.log("Sandbox 环境，跳过 vConsole 相关脚本注入"),!y)){let e=w;e=e?e.nextSibling:l.firstChild;const o=a.createElement("script");o.src=f;const t=a.createElement("script");t.innerHTML=g,l.insertBefore(o,e),l.insertBefore(t,e)}const b=await s.format(c.serialize(),{parser:"html"});e.writeFileSync(h,b),console.log(r.green.bold("TikTok H5 Mini Game initialization has been completed..."))},t}var P=function(){if(r)return s;r=1;const e=c,o=N();return s=function(){e.createPromptModule()([{type:"input",name:"clientKey",message:"Please input client key"},{type:"input",name:"devPort",message:"Please input dev port",default:9527}]).then(async e=>{const{clientKey:t,devPort:n}=e,s={_comment:"orientation is the orientation of the game. It can be either 'VERTICAL' or 'HORIZONTAL'.our game default is VERTICAL; minigame.config.json dev is a configuration file for minigame development. You can use it to configure the minigame.",orientation:"VERTICAL",dev:{port:n}};await o({clientKey:t,config:s}),process.exit(0)}).catch(()=>{process.exit(1)})},s}(),$=T(P);async function I(e){try{return await m.launch({startingUrl:e,chromeFlags:["--auto-open-devtools-for-tabs","--no-default-browser-check","--disable-web-security","--allow-insecure-localhost","--ignore-certificate-errors","--allow-running-insecure-content","--remote-allow-origins=*","--user-data-dir=/tmp/chrome-debug-profile"]})}catch(o){return console.warn("启动 Chrome 失败，回退到系统默认浏览器:",(null==o?void 0:o.message)||o),await h(e),null}}function C(){const e=y.networkInterfaces();for(const o in e){const t=e[o];if(t)for(const e of t)if("IPv4"===e.family&&!e.internal)return e.address}}var z,L,x=E(Object.freeze({__proto__:null,centerQRCode:function(e){const o=process.stdout.columns||80,t=e.split("\n"),n=t.reduce((e,o)=>Math.max(e,o.length),0),s=Math.floor((o-n)/3),r=" ".repeat(s>0?s:0);return t.map(e=>r+e).join("\n")},getDesktopPath:function(){const e=y.homedir(),o=["Desktop","桌面"];for(const t of o){const o=f.join(e,t);if(a.existsSync(o))return o}return f.join(e,"Desktop")},getLocalIP:C,openUrl:I}));var q,U,D,F,H=function(){if(L)return z;L=1;const e=p,o=f,t=a,n=d,s=g,r=e(),{openUrl:i}=x,c=w,{CONFIG_FILE_NAME:l,MINIS_RUNTIME_URL:u}=O();return z=function(){const a=o.join(process.cwd(),l);if(!t.existsSync(a))return void console.log(n.red.bold(`${l} is not exist, please run minis game init first`));const d=JSON.parse(t.readFileSync(a,"utf8")),p=d.dev?.port||9527;console.log(n.yellow.bold("⚠️ Before dev, please ensure:\n 1. The account used to login www.tiktok.com is in the sandbox target user range of Minis developer platform, otherwise login authorization will throw an error.\n 2. The browser allows www.tiktok.com <popup and redirect>, because the authorization login linkage needs to open a new tab popup for operation, otherwise the authorization login linkage will not be able to debug normally.")),console.log(n.bold.blue("\n \n============== start dev your game, it will take a few seconds ============ \n \n")),r.use((e,o,t)=>{e.url.endsWith(".br")?o.setHeader("Content-Encoding","br"):e.url.endsWith(".gz")&&o.setHeader("Content-Encoding","gzip"),t()}),r.use((e,r,i)=>{try{const e=o.join(process.cwd(),"index.html"),n=t.readFileSync(e,"utf8"),i=s.load(n),a=[];i("script:not([src])").each((e,o)=>{const t=i(o).html();t&&t.trim()&&a.push(t)});a.map(e=>`'sha256-${c.createHash("sha256").update(e,"utf8").digest("base64")}'`);const l="*";r.setHeader("Content-Security-Policy",`default-src 'self';script-src 'self' data: blob: 'unsafe-eval' 'unsafe-inline' connect.tiktok-minis.com sf-connect.tiktokminis.us;img-src 'self' ${l} data: blob: *; connect-src 'self' ${l} data: blob: ; style-src 'self' ${l} 'unsafe-inline' fonts.googleapis.com data: blob: *; font-src 'self' fonts.gstatic.com blob: data: *; media-src 'self' ${l} data: blob: *; frame-src 'none'; base-uri 'self'; worker-src 'self' blob: data: ;`)}catch(e){console.warn(n.red("Failed to set CSP header:"),e.message)}i()}),r.use(e.static(o.join(process.cwd()))),r.listen(p,()=>{const e=`${u}?minis_url=${`http://localhost:${p}`}&enable_log=1`;console.log(`you can access ${n.green.underline.bold(e)} to debug your game in browser...`);try{i(e)}catch(e){console.warn(n.red("Failed to open browser, you can access it manually"),e.message)}})}}(),G=T(H);function A(){if(U)return q;U=1;const e=d,o=a,t=f,{MINIS_MANIFEST_FILE_NAME:n}=O();function s(e,o){let t=o.find(o=>"folder"===o.type&&o.name===e[0]);return t||(t={type:"folder",name:e[0],children:[]},o.push(t)),e.length>1?s(e.slice(1),t.children):t}function r(e,n=e){const s={};return o.readdirSync(e).forEach(i=>{const c=t.join(e,i);if(o.statSync(c).isDirectory()){const e=r(c,n);Object.assign(s,e)}else if(""!==t.extname(i)&&i){const e="/"+t.relative(n,c).replace(/\\/g,"/");s[c]=e}}),s}return q={buildMinisManifest:async function(){try{const e=t.join(process.cwd()),i=[],c=r(e);Object.keys(c).filter(e=>!e.endsWith(".map")).forEach(e=>{const o=c[e].split("/").filter(Boolean),t=o.pop()||"";if(0===o.length)i.push({type:"file",name:t});else{s(o,i).children.push({type:"file",name:t})}}),o.writeFileSync(t.join(e,n),JSON.stringify({name:n,resource_list:i},null,2))}catch(o){console.error(e.red(`Error during debug process: ${o.message}`)),o instanceof Error&&o.stack&&console.error(e.red(`Stack trace: ${o.stack}`)),process.exit(1)}}}}var R=T(function(){if(F)return D;F=1;const e=a,o=y,t=f,n=d,s=b,r=c.createPromptModule(),{buildMinisManifest:i}=A();return D=async function(){try{const{zipName:c}=await r({type:"input",name:"zipName",default:"game",message:"Please input zip name"}),a=Date.now();console.log(n.bold.blue("start build your game, it will take a few minutes..."));e.readdirSync(process.cwd()).forEach(o=>{o.endsWith(".zip")&&e.unlinkSync(t.join(process.cwd(),o))}),await i();const l=s("zip",{zlib:{level:9}});l.on("error",function(e){throw e});const u=function(){const n=o.homedir(),s=["Desktop","桌面"];for(const o of s){const s=t.join(n,o);if(e.existsSync(s))return s}const r=t.join(n,"Desktop");return console.log(`未找到特定桌面文件夹，使用默认路径: ${r}`),r}(),d=t.join(u,`${c}.zip`);await l.pipe(e.createWriteStream(d)),await l.directory(t.resolve(process.cwd()),!1),await l.finalize(),console.log(n.yellow.bold(`build ${c}.zip success, you can find it in desktop, use time ${Date.now()-a} ms`)),process.exit(0)}catch(e){console.log(n.red(`auto build ${zipNameInput}.zip failed: ${e.message}, you should zip it manually`)),process.exit(1)}}}());class W{constructor(e){this.listeners=[],this.state=e}static getInstance(e){return W.instance||(W.instance=new W(e)),W.instance}getState(){return this.state}setState(e){this.state=Object.assign(Object.assign({},this.state),e),this.listeners.forEach(e=>e(this.state))}subscribe(e){return this.listeners.push(e),()=>{this.listeners=this.listeners.filter(o=>o!==e)}}reset(e){this.state=e,this.listeners.forEach(e=>e(this.state))}}const B=W.getInstance({clientServerPort:"",clientServerHost:"",clientKey:"",packages:{}}),V=9529,K=f.join(y.homedir(),"__TTMG__");function J({clientWsPort:e}){const o={ws_port:V,nodeWsPort:V,clientWsPort:e};return btoa(JSON.stringify(o))}let Q;function Y(){Q.close(()=>{console.log("Dev server closed"),Q=null,process.exit(0)})}const Z=f.join(y.homedir(),".ttmg-cli");function X(){const e=f.join(process.cwd(),"project.config.json");let o;try{const t=JSON.parse(a.readFileSync(e,"utf-8"));o=t.appid||t.appId}catch(e){o=""}if(o)return o;console.log(d.red.bold("No appid found in project.config.json, you should provide it in project.config.json")),process.exit(1)}function ee(){const e=X();return f.join(y.homedir(),"__TTMG__",e)}async function oe(){const e=ee();console.log(d.yellow.bold("Start compress game resource"));const o=f.join(y.homedir(),"__TTMG__","upload.zip");var t,n;await(t=e,n=o,new Promise((e,o)=>{const s=a.createWriteStream(n),r=b("zip",{zlib:{level:9}});s.on("close",()=>{e()}),s.on("error",e=>{o(e)}),r.on("error",e=>{o(e)}),r.pipe(s),r.directory(t,!1),r.finalize()})),console.log(d.green.bold("Compress game package resource success \n"));const s=await async function(e){const o=new M;o.append("file",a.createReadStream(e),"upload.zip");try{console.log(d.yellow.bold("Start upload resource to client"));const{clientServerHost:t,clientServerPort:n}=B.getState(),s=await k.post(`http://${t}:${n}/game/upload`,o,{headers:o.getHeaders()});return a.unlinkSync(e),s}catch(e){console.error("Upload resource to client failed:",e.message)}}(o);return{isSuccess:200===(null==s?void 0:s.status)}}f.join(Z,"config.json");const te=new class{constructor(){this.ws=new v.Server({port:V}),this.ws.on("connection",e=>{e.on("message",e=>{const o=JSON.parse(e.toString());console.log("Client Message",o);if("browser"===o.from){switch(o.method){case"connected":this.sendUploadStatus("start"),oe().then(e=>{e.isSuccess?(this.sendUploadStatus("success",{packages:B.getState().packages,isSuccess:e.isSuccess}),console.log(d.green.bold("Upload resource to client successfully!"))):(this.sendUploadStatus("error",{errMsg:e.errorMsg}),console.log(d.red.bold("Upload resource to client failed!")))}).catch(()=>{this.sendUploadStatus("error",{isSuccess:!1}),console.log(d.red.bold("Start upload resource to client failed!"))});break;case"closeLocalDebug":console.log("closeLocalDebug"),this.ws.close(),Y(),console.log("close server")}}else{switch(o.method){case"shareDevParams":console.log("shareDevParams",o);const e=o.payload;console.log("shareDevParams",e);const{host:t,port:n,wsPort:s}=e;B.setState({clientServerPort:n,clientServerHost:t});const r=`http://${t}:${n}?session=${J({clientWsPort:s})}`;I(r),console.log(d.bold.yellow(`Game debug is ready! Visit ${r} in your browser.`));break;case"checkPermissionFailed":console.log(d.red.bold("Check permission failed! Please authorize in client first."))}}})})}send(e){this.ws.clients.forEach(o=>{if(o.readyState===v.OPEN){const t=Object.assign(Object.assign({},e),{from:"nodeServer"});o.send(JSON.stringify(t))}})}close(){this.ws.close()}sendUploadStatus(e,o){this.send({method:"uploadStatus",status:e,payload:o})}};async function ne(){await async function(){console.log(d.yellow.bold("Start compile game for debug"));const e=process.cwd(),o=ee();a.existsSync(o)||a.mkdirSync(o,{recursive:!0});const{isSuccess:t,errorMsg:n,packages:s}=await _.debugPkgs({entry:e,output:o});t?(B.setState({packages:s}),console.log(d.green.bold("Compile game package success \n"))):(console.log(d.redBright("Build game package failed, Please check the error message below:")),console.log(d.redBright(n)),process.exit(1))}(),await async function(){Q&&Y();const e=p(),o=9528,t=S({dest:y.tmpdir()});return e.use(p.json()),e.use(p.urlencoded({extended:!0})),e.post("/game/env",async(e,o)=>{const t=e.body,{host:n,port:s,wsPort:r}=t;B.setState({clientServerPort:s,clientServerHost:n});const i=`http://${n}:${s}?session=${J({clientWsPort:r})}`;I(i),console.log(d.bold.yellow(`Game debug is ready! Visit ${i} in your browser.`)),o.json({code:0,msg:"ok",data:{devUrl:i}})}),e.post("/game/upload",t.single("file"),async(e,o)=>{o.json({code:0,msg:"ok",filename:e.file.filename,originalname:e.file.originalname,size:e.file.size,path:e.file.path})}),Q=e.listen(o,()=>{console.log(d.cyan.bold("Node devServer is running on port 9528"))}),{port:o,host:C()}}(),await async function(){const e=X(),o=f.join(K,e),t=C();console.log(d.green.bold("Tips:")),console.log(`  1. ${d.yellow.bold("Scan the QR code to start the client devServer.")}`),console.log(`  2. ${d.yellow.bold("Will auto upload compiled resource to client.")} ${d.bold(o)}`),console.log(`  3. ${d.yellow.bold("Debug your game in the browser.")}\n`);const n=`https://www.tiktok.com/ttmg/dev/${e}?host=${t}&port=9529`;j.generate(n,{small:!0},e=>{console.log(e)})}(),await async function(){let e=null;a.watch(process.cwd(),(o,t)=>{console.log(d.yellow("game resource change, restart to upload")),e&&clearTimeout(e),e=setTimeout(async()=>{te.sendUploadStatus("start"),oe().then(e=>{e.isSuccess?te.sendUploadStatus("success"):te.sendUploadStatus("error",{errMsg:e.errorMsg})}).catch(()=>{te.sendUploadStatus("error")}),e=null},500)})}()}var se="0.1.0-beta.8";const re=new i.Command;re.name("ttmg").description("TikTok Mini Games Command Line Tool").version(se,"-v, --version","显示版本号").option("dev","Debug TikTok Mini Games for Client").option("dev --h5","Debug TikTok Mini Games for Web"),re.option("--h5","H5 Mini Game").command("init").description("Initialize project").action(()=>{re.opts().h5?$():console.log("Native Mini Game initialize")}),re.option("--h5","H5 Mini Game").command("dev").description("Open browser dev environment").action(()=>{re.opts().h5?G():ne()}),re.option("--h5","H5 Mini Game").command("build").description("Bundle project").action(()=>{re.opts().h5?R():console.log("Native Mini Game bundle")}),re.command("login").description("User Dev Portal Account to Login").action(async()=>{console.log("will support soon")}),re.parse(process.argv);
+'use strict';
+
+var commander = require('commander');
+var require$$0 = require('inquirer');
+var fs = require('fs');
+var require$$1 = require('jsdom');
+var require$$2 = require('prettier');
+var chalk = require('chalk');
+var express = require('express');
+var path = require('path');
+var require$$4 = require('cheerio');
+var chromeLauncher = require('chrome-launcher');
+var os = require('os');
+var require$$6 = require('crypto');
+var require$$5$1 = require('archiver');
+var multer = require('multer');
+var WebSocket = require('ws');
+var got = require('got');
+var FormData = require('form-data');
+var qrcode = require('qrcode-terminal');
+var ttmgPack = require('ttmg-pack');
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+function getAugmentedNamespace(n) {
+  if (Object.prototype.hasOwnProperty.call(n, '__esModule')) return n;
+  var f = n.default;
+	if (typeof f == "function") {
+		var a = function a () {
+			var isInstance = false;
+      try {
+        isInstance = this instanceof a;
+      } catch {}
+			if (isInstance) {
+        return Reflect.construct(f, arguments, this.constructor);
+			}
+			return f.apply(this, arguments);
+		};
+		a.prototype = f.prototype;
+  } else a = {};
+  Object.defineProperty(a, '__esModule', {value: true});
+	Object.keys(n).forEach(function (k) {
+		var d = Object.getOwnPropertyDescriptor(n, k);
+		Object.defineProperty(a, k, d.get ? d : {
+			enumerable: true,
+			get: function () {
+				return n[k];
+			}
+		});
+	});
+	return a;
+}
+
+var config;
+var hasRequiredConfig;
+
+function requireConfig () {
+	if (hasRequiredConfig) return config;
+	hasRequiredConfig = 1;
+	config = {
+	  CONFIG_FILE_NAME: 'minigame.config.json',
+	  SDK_URL: 'https://connect.tiktok-minis.com/game/sdk.js',
+	  VCONSOLE_URL: 'https://connect.tiktok-minis.com/libs/vConsole.js',
+	  VCONSOLE_INIT: `
+    if(typeof VConsole === 'function') {
+      window.vConsole = new VConsole();
+    }
+  `,
+	  MINIS_MANIFEST_FILE_NAME: 'minis.manifest.json',
+	  MINIS_RUNTIME_URL: 'https://www.tiktok.com/minigames/runtime',
+	};
+	return config;
+}
+
+var inject;
+var hasRequiredInject;
+
+function requireInject () {
+	if (hasRequiredInject) return inject;
+	hasRequiredInject = 1;
+	const fs$1 = fs;
+	const jsdom = require$$1;
+	const prettier = require$$2;
+	const chalk$1 = chalk;
+	const { JSDOM } = jsdom;
+	const {
+	  CONFIG_FILE_NAME,
+	  SDK_URL,
+	  VCONSOLE_URL,
+	  VCONSOLE_INIT,
+	} = requireConfig();
+	const CONFIG_PATH = `${process.cwd()}/${CONFIG_FILE_NAME}`;
+	const INDEX_HTML_PATH = `${process.cwd()}/index.html`;
+
+	function isSandbox(clientKey) {
+	  /**
+	   * sb 开头的 clientKey 都是 sandbox 环境
+	   */
+	  return clientKey.startsWith('sb');
+	}
+	// 判断是否是 TTMinis.game.init 的初始化脚本
+	function isTTMinisInitScript(script, clientKey) {
+	  if (!script.innerHTML) return false;
+	  return (
+	    script.innerHTML.includes('TTMinis.game.init') &&
+	    script.innerHTML.includes(clientKey)
+	  );
+	}
+
+	async function injectScripts({ config, clientKey }) {
+	  // 1. 检查 config 文件是否已存在
+	  fs$1.writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2));
+
+	  // 2. 读取 index.html
+	  if (!fs$1.existsSync(INDEX_HTML_PATH)) {
+	    console.error('index.html does not exist');
+	    return;
+	  }
+	  const indexHtml = fs$1.readFileSync(INDEX_HTML_PATH, 'utf8');
+	  const dom = new JSDOM(indexHtml);
+	  const { document } = dom.window;
+
+	  // 3. head 标签
+	  let head = document.querySelector('head');
+	  if (!head) {
+	    head = document.createElement('head');
+	    document.documentElement.insertBefore(head, document.body);
+	  }
+
+	  // 4. 检查是否已注入 SDK
+	  const scriptList = Array.from(document.querySelectorAll('script'));
+	  const hasSDK = scriptList.some(
+	    script => script.src && script.src.includes(SDK_URL),
+	  );
+
+	  // 5. 检查是否已注入 vConsole
+	  const hasVConsole = scriptList.some(
+	    script => script.src && script.src.includes('vConsole.js'),
+	  );
+
+	  let lastInitScript = null;
+	  if (!hasSDK) {
+	    // 插入 SDK 脚本
+	    const sdkScript = document.createElement('script');
+	    sdkScript.src = SDK_URL;
+	    head.insertBefore(sdkScript, head.firstChild);
+
+	    // 插入 SDK init 脚本
+	    const initScript = document.createElement('script');
+	    initScript.innerHTML = `
+      window.TTMinis = TTMinis;
+      TTMinis.game.init({
+        clientKey: "${clientKey}",
+      });
+    `;
+	    head.insertBefore(initScript, sdkScript.nextSibling);
+	    lastInitScript = initScript;
+	  } else {
+	    // 已经有 SDK，查找 TTMinis.game.init 脚本
+	    const headScripts = Array.from(head.querySelectorAll('script'));
+	    lastInitScript = headScripts.find(script =>
+	      isTTMinisInitScript(script, clientKey),
+	    );
+	    if (lastInitScript) {
+	      console.log('JS SDK 已接入，跳过 SDK 相关脚本注入');
+	    } else {
+	      // 没有 TTMinis.game.init，则查找最后一个 SDK 脚本
+	      const sdkScripts = headScripts.filter(
+	        script => script.src && script.src.includes(SDK_URL),
+	      );
+	      if (sdkScripts.length > 0) {
+	        lastInitScript = sdkScripts[sdkScripts.length - 1];
+	      }
+	    }
+	  }
+
+	  /**
+	   * 只有 Sandbox 环境才需要注入 vConsole
+	   */
+	  if (isSandbox(clientKey)) {
+	    console.log('Sandbox 环境，跳过 vConsole 相关脚本注入');
+	    // 8. 插入 vConsole 相关脚本（如果需要）
+	    if (!hasVConsole) {
+	      // vConsole 相关脚本的插入点
+	      let insertAfterNode = lastInitScript;
+	      if (insertAfterNode) {
+	        insertAfterNode = insertAfterNode.nextSibling;
+	      } else {
+	        insertAfterNode = head.firstChild;
+	      }
+
+	      // vConsole 源码
+	      const vconsoleSourceScript = document.createElement('script');
+	      vconsoleSourceScript.src = VCONSOLE_URL;
+	      // vConsole 初始化
+	      const vconsoleInitScript = document.createElement('script');
+	      vconsoleInitScript.innerHTML = VCONSOLE_INIT;
+
+	      head.insertBefore(vconsoleSourceScript, insertAfterNode);
+	      head.insertBefore(vconsoleInitScript, insertAfterNode);
+	    }
+	  }
+
+	  // 9. 格式化并写回 index.html
+	  const formattedHtml = await prettier.format(dom.serialize(), {
+	    parser: 'html',
+	  });
+	  fs$1.writeFileSync(INDEX_HTML_PATH, formattedHtml);
+	  console.log(
+	    chalk$1.green.bold(
+	      'TikTok H5 Mini Game initialization has been completed...',
+	    ),
+	  );
+	}
+
+	inject = injectScripts;
+	return inject;
+}
+
+var init;
+var hasRequiredInit;
+
+function requireInit () {
+	if (hasRequiredInit) return init;
+	hasRequiredInit = 1;
+	const inquirer = require$$0;
+	const inject = requireInject();
+
+	init = function init() {
+	  const promptModule = inquirer.createPromptModule();
+	  promptModule([
+	    {
+	      type: 'input',
+	      name: 'clientKey',
+	      message: 'Please input client key',
+	    },
+	    {
+	      type: 'input',
+	      name: 'devPort',
+	      message: 'Please input dev port',
+	      default: 9527,
+	    },
+	  ])
+	    .then(async answers => {
+	      const { clientKey, devPort } = answers;
+	      const config = {
+	        _comment: `orientation is the orientation of the game. It can be either 'VERTICAL' or 'HORIZONTAL'.our game default is VERTICAL; minigame.config.json dev is a configuration file for minigame development. You can use it to configure the minigame.`,
+	        orientation: 'VERTICAL',
+	        dev: {
+	          port: devPort,
+	        },
+	      };
+	      await inject({ clientKey, config });
+
+	      process.exit(0);
+	    })
+	    .catch(() => {
+	      process.exit(1);
+	    });
+	};
+	return init;
+}
+
+var initExports = requireInit();
+var index$2 = /*@__PURE__*/getDefaultExportFromCjs(initExports);
+
+async function openUrl(url) {
+    try {
+        await chromeLauncher.launch({
+            startingUrl: url,
+            chromeFlags: [
+                '--auto-open-devtools-for-tabs', // 自动打开 DevTools
+                '--no-default-browser-check',
+                '--allow-insecure-localhost',
+                '--ignore-certificate-errors',
+                '--allow-running-insecure-content',
+                '--remote-allow-origins=*',
+                '--user-data-dir=/tmp/chrome-debug-profile',
+            ],
+        });
+        await new Promise(() => { });
+    }
+    catch (e) {
+        // const open = await import('open');
+        // await open.default(url);
+    }
+}
+
+function getDesktopPath() {
+    const homeDir = os.homedir();
+    // 常见桌面文件夹名
+    const desktopNames = ['Desktop', '桌面'];
+    for (const name of desktopNames) {
+        const desktopPath = path.join(homeDir, name);
+        if (fs.existsSync(desktopPath)) {
+            return desktopPath;
+        }
+    }
+    // 没找到就默认返回 Desktop
+    return path.join(homeDir, 'Desktop');
+}
+
+function centerQRCode(qrString) {
+    const terminalWidth = process.stdout.columns || 80; // 获取终端宽度，默认80
+    const lines = qrString.split('\n');
+    const qrWidth = lines.reduce((max, line) => Math.max(max, line.length), 0);
+    const padding = Math.floor((terminalWidth - qrWidth) / 3);
+    const padStr = ' '.repeat(padding > 0 ? padding : 0);
+    return lines.map(line => padStr + line).join('\n');
+}
+
+function getLocalIP() {
+    const networkInterfaces = os.networkInterfaces();
+    for (const interfaceName in networkInterfaces) {
+        const interfaceInfo = networkInterfaces[interfaceName];
+        if (!interfaceInfo)
+            continue;
+        for (const addressInfo of interfaceInfo) {
+            if (addressInfo.family === 'IPv4' && !addressInfo.internal) {
+                return addressInfo.address;
+            }
+        }
+    }
+}
+
+var libs = /*#__PURE__*/Object.freeze({
+	__proto__: null,
+	centerQRCode: centerQRCode,
+	getDesktopPath: getDesktopPath,
+	getLocalIP: getLocalIP,
+	openUrl: openUrl
+});
+
+var require$$5 = /*@__PURE__*/getAugmentedNamespace(libs);
+
+var dev$1;
+var hasRequiredDev;
+
+function requireDev () {
+	if (hasRequiredDev) return dev$1;
+	hasRequiredDev = 1;
+	const express$1 = express;
+	const path$1 = path;
+	const fs$1 = fs;
+	const chalk$1 = chalk;
+	const cheerio = require$$4;
+	const app = express$1();
+	const { openUrl } = require$$5;
+	const crypto = require$$6;
+	// const open = require('open'); // 引入 open 包
+	const { CONFIG_FILE_NAME, MINIS_RUNTIME_URL } = requireConfig();
+
+	// 1. 检查配置文件是否存在
+	dev$1 = function dev() {
+	  const configPath = path$1.join(process.cwd(), CONFIG_FILE_NAME);
+	  if (!fs$1.existsSync(configPath)) {
+	    console.log(
+	      chalk$1.red.bold(
+	        `${CONFIG_FILE_NAME} is not exist, please run minis game init first`,
+	      ),
+	    );
+	    return;
+	  }
+
+	  // 2. 读取配置
+	  const gameConfig = JSON.parse(fs$1.readFileSync(configPath, 'utf8'));
+	  const devPort = gameConfig.dev?.port || 9527;
+
+	  // 3. 打印开发前提示
+	  console.log(
+	    chalk$1.yellow.bold(
+	      `⚠️ Before dev, please ensure:\n 1. The account used to login www.tiktok.com is in the sandbox target user range of Minis developer platform, otherwise login authorization will throw an error.\n 2. The browser allows www.tiktok.com <popup and redirect>, because the authorization login linkage needs to open a new tab popup for operation, otherwise the authorization login linkage will not be able to debug normally.`,
+	    ),
+	  );
+	  console.log(
+	    chalk$1.bold.blue(
+	      '\n \n============== start dev your game, it will take a few seconds ============ \n \n',
+	    ),
+	  );
+
+	  /**
+	   * 支持 .br 文件, 支持 gzip
+	   */
+
+	  app.use((req, res, next) => {
+	    if (req.url.endsWith('.br')) {
+	      res.setHeader('Content-Encoding', 'br');
+	    } else if (req.url.endsWith('.gz')) {
+	      res.setHeader('Content-Encoding', 'gzip');
+	    }
+	    next();
+	  });
+
+	  /**
+	   * 给所有的请求返回设置 CSP
+	   */
+	  app.use((req, res, next) => {
+	    /**
+	     * 计算 HTML 中的内联脚本生成 hash 插入 CSP 中
+	     */
+	    try {
+	      // 1. 读取 HTML 文件内容
+	      const htmlPath = path$1.join(process.cwd(), 'index.html');
+	      const html = fs$1.readFileSync(htmlPath, 'utf8');
+
+	      // 2. 用 cheerio 解析 HTML
+	      const $ = cheerio.load(html);
+
+	      // 3. 提取所有无 src 属性的内联 <script> 内容
+	      const scripts = [];
+	      $('script:not([src])').each((i, elem) => {
+	        const content = $(elem).html();
+	        if (content && content.trim()) {
+	          scripts.push(content);
+	        }
+	      });
+
+	      // 4. 计算每段脚本的 SHA-256 hash 并 base64 编码
+	      const hashes = scripts.map(script => {
+	        const hash = crypto
+	          .createHash('sha256')
+	          .update(script, 'utf8')
+	          .digest('base64');
+	        return `'sha256-${hash}'`;
+	      });
+
+	      // 开发者本地调试，信任的域名默认为 * 便于调试
+	      const devTrustedDomain = '*';
+
+	      res.setHeader(
+	        'Content-Security-Policy',
+	        `default-src 'self';script-src 'self' data: blob: 'unsafe-eval' 'unsafe-inline' connect.tiktok-minis.com sf-connect.tiktokminis.us;img-src 'self' ${devTrustedDomain} data: blob: *; connect-src 'self' ${devTrustedDomain} data: blob: ; style-src 'self' ${devTrustedDomain} 'unsafe-inline' fonts.googleapis.com data: blob: *; font-src 'self' fonts.gstatic.com blob: data: *; media-src 'self' ${devTrustedDomain} data: blob: *; frame-src 'none'; base-uri 'self'; worker-src 'self' blob: data: ;`,
+	      );
+	    } catch (e) {
+	      // 如果 index.html 不存在或有异常，CSP 头就不设置
+	      console.warn(chalk$1.red('Failed to set CSP header:'), e.message);
+	    }
+	    next();
+	  });
+
+	  // 4. 静态资源服务
+	  app.use(express$1.static(path$1.join(process.cwd())));
+
+	  // 5. 启动服务并自动打开浏览器
+	  app.listen(devPort, () => {
+	    const gameUrl = `http://localhost:${devPort}`;
+	    const devUrl = `${MINIS_RUNTIME_URL}?minis_url=${gameUrl}&enable_log=1`;
+
+	    console.log(
+	      `you can access ${chalk$1.green.underline.bold(
+	        devUrl,
+	      )} to debug your game in browser...`,
+	    );
+	    try {
+	      // 自动打开浏览器，跨平台
+	      openUrl(devUrl);
+	    } catch (e) {
+	      console.warn(
+	        chalk$1.red('Failed to open browser, you can access it manually'),
+	        e.message,
+	      );
+	    }
+	  });
+	};
+	return dev$1;
+}
+
+var devExports = requireDev();
+var index$1 = /*@__PURE__*/getDefaultExportFromCjs(devExports);
+
+var manifest;
+var hasRequiredManifest;
+
+function requireManifest () {
+	if (hasRequiredManifest) return manifest;
+	hasRequiredManifest = 1;
+	const chalk$1 = chalk;
+	const fs$1 = fs;
+	const path$1 = path;
+	const { MINIS_MANIFEST_FILE_NAME } = requireConfig();
+	async function buildMinisManifest() {
+	  try {
+	    const buildPath = path$1.join(process.cwd());
+	    const resourceList = [];
+	    const allFiles = collectAllFiles(buildPath);
+
+	    Object.keys(allFiles)
+	      .filter(file => !file.endsWith('.map'))
+	      .forEach(file => {
+	        const relativeFilePath = allFiles[file];
+	        const filePathArr = relativeFilePath.split('/').filter(Boolean); // Split filename
+	        const fileName = filePathArr.pop() || ''; // Get filename
+	        if (filePathArr.length === 0) {
+	          resourceList.push({ type: 'file', name: fileName });
+	        } else {
+	          const folder = findOrCreateFolder(filePathArr, resourceList);
+	          folder.children.push({ type: 'file', name: fileName });
+	        }
+	      });
+
+	    fs$1.writeFileSync(
+	      path$1.join(buildPath, MINIS_MANIFEST_FILE_NAME),
+	      JSON.stringify(
+	        { name: MINIS_MANIFEST_FILE_NAME, resource_list: resourceList },
+	        null,
+	        2,
+	      ),
+	    );
+	  } catch (error) {
+	    console.error(chalk$1.red(`Error during debug process: ${error.message}`));
+	    if (error instanceof Error && error.stack) {
+	      console.error(chalk$1.red(`Stack trace: ${error.stack}`));
+	    }
+	    process.exit(1);
+	  }
+	}
+
+	function findOrCreateFolder(pathArray, currentFolder) {
+	  let folder = currentFolder.find(
+	    item => item.type === 'folder' && item.name === pathArray[0],
+	  );
+	  if (!folder) {
+	    folder = { type: 'folder', name: pathArray[0], children: [] };
+	    currentFolder.push(folder);
+	  }
+	  if (pathArray.length > 1) {
+	    return findOrCreateFolder(pathArray.slice(1), folder.children);
+	  }
+	  return folder;
+	}
+
+	function collectAllFiles(dir, baseDir = dir) {
+	  const files = {};
+	  fs$1.readdirSync(dir).forEach(file => {
+	    const filePath = path$1.join(dir, file);
+	    const fileStat = fs$1.statSync(filePath);
+	    if (fileStat.isDirectory()) {
+	      // Process subdirectories recursively
+	      const subFiles = collectAllFiles(filePath, baseDir);
+	      Object.assign(files, subFiles);
+	    } else if (path$1.extname(file) !== '' && file) {
+	      const relativePath =
+	        '/' + path$1.relative(baseDir, filePath).replace(/\\/g, '/');
+	      files[filePath] = relativePath;
+	    }
+	  });
+	  return files;
+	}
+
+	manifest = {
+	  buildMinisManifest,
+	};
+	return manifest;
+}
+
+var bundle;
+var hasRequiredBundle;
+
+function requireBundle () {
+	if (hasRequiredBundle) return bundle;
+	hasRequiredBundle = 1;
+	const fs$1 = fs;
+	const os$1 = os;
+	const path$1 = path;
+	const inquirer = require$$0;
+	const chalk$1 = chalk;
+	const archiver = require$$5$1;
+	const promptModule = inquirer.createPromptModule();
+	const { buildMinisManifest } = requireManifest();
+
+	bundle = async function build() {
+	  try {
+	    /**
+	     * 用户输入打包后的游戏压缩包名称
+	     */
+	    const { zipName: zipNameInput } = await promptModule({
+	      type: 'input',
+	      name: 'zipName',
+	      default: 'game',
+	      message: 'Please input zip name',
+	    });
+
+	    const startTime = Date.now();
+	    console.log(
+	      chalk$1.bold.blue('start build your game, it will take a few minutes...'),
+	    );
+
+	    /**
+	     * 移除掉当前根目录下的文件包
+	     */
+
+	    const files = fs$1.readdirSync(process.cwd());
+	    files.forEach(file => {
+	      if (file.endsWith('.zip')) {
+	        fs$1.unlinkSync(path$1.join(process.cwd(), file));
+	      }
+	    });
+
+	    await buildMinisManifest();
+	    const archive = archiver('zip', {
+	      zlib: { level: 9 }, // Sets the compression level.
+	    });
+
+	    archive.on('error', function (err) {
+	      throw err;
+	    });
+
+	    /**
+	     * 把当前文件压缩成 game-${dateStr}.zip，并添加在桌面
+	     */
+	    const desktopPath = getDesktopPath();
+	    const zipPath = path$1.join(desktopPath, `${zipNameInput}.zip`);
+
+	    await archive.pipe(fs$1.createWriteStream(zipPath));
+
+	    await archive.directory(path$1.resolve(process.cwd()), false);
+
+	    await archive.finalize();
+	    console.log(
+	      chalk$1.yellow.bold(
+	        `build ${zipNameInput}.zip success, you can find it in desktop, use time ${
+	          Date.now() - startTime
+	        } ms`,
+	      ),
+	    );
+
+	    process.exit(0);
+	  } catch (error) {
+	    console.log(
+	      chalk$1.red(
+	        `auto build ${zipNameInput}.zip failed: ${error.message}, you should zip it manually`,
+	      ),
+	    );
+	    process.exit(1);
+	  }
+	};
+
+	/**
+	 * 获取当前操作系统的桌面路径，兼容 Windows 和 macOS。
+	 * @returns {string} 桌面的绝对路径。
+	 */
+	function getDesktopPath() {
+	  // 1. 获取用户的主目录，这是所有平台通用的基础
+	  //    - Windows: C:\Users\<username>
+	  //    - macOS/Linux: /Users/<username>
+	  const homeDir = os$1.homedir();
+	  // 2. 定义可能的桌面文件夹名称列表
+	  //    - 'Desktop' 是英文系统的标准名称
+	  //    - '桌面' 是中文系统的标准名称
+	  //    可以根据需要添加其他语言，例如 'Bureau' (法语), 'Schreibtisch' (德语) 等
+	  const desktopNames = ['Desktop', '桌面'];
+	  // 3. 遍历列表，检查哪个路径真实存在
+	  for (const name of desktopNames) {
+	    const possiblePath = path$1.join(homeDir, name);
+	    // fs.existsSync 会同步检查文件或文件夹是否存在
+	    if (fs$1.existsSync(possiblePath)) {
+	      // 找到一个就立即返回，这是最可靠的桌面路径
+	      return possiblePath;
+	    }
+	  }
+	  // 4. 兜底策略 (Fallback)
+	  //    如果上面的常见名称都没有找到（例如在一些极简或非标准的系统环境中），
+	  //    我们就默认返回英文的 'Desktop' 路径。
+	  //    这是一种安全的默认行为，因为即使文件夹不存在，程序后续创建文件时
+	  //    也可以选择自动创建这个目录。
+	  const defaultPath = path$1.join(homeDir, 'Desktop');
+	  console.log(`未找到特定桌面文件夹，使用默认路径: ${defaultPath}`);
+	  return defaultPath;
+	}
+	return bundle;
+}
+
+var bundleExports = requireBundle();
+var index = /*@__PURE__*/getDefaultExportFromCjs(bundleExports);
+
+class Store {
+    constructor(initialState) {
+        this.listeners = [];
+        this.state = initialState;
+    }
+    // 获取单例实例
+    static getInstance(initialState) {
+        if (!Store.instance) {
+            Store.instance = new Store(initialState);
+        }
+        return Store.instance;
+    }
+    // 获取状态
+    getState() {
+        return this.state;
+    }
+    // 设置状态
+    setState(newState) {
+        this.state = { ...this.state, ...newState };
+        this.listeners.forEach(listener => listener(this.state));
+    }
+    // 订阅状态变化
+    subscribe(listener) {
+        this.listeners.push(listener);
+        return () => {
+            this.listeners = this.listeners.filter(l => l !== listener);
+        };
+    }
+    // 重置状态
+    reset(newState) {
+        this.state = newState;
+        this.listeners.forEach(listener => listener(this.state));
+    }
+}
+const store = Store.getInstance({
+    clientServerPort: '',
+    clientServerHost: '',
+    clientKey: '',
+    packages: {},
+});
+
+const DEV_PORT = 9528;
+const DEV_WS_PORT = 9529;
+const OUTPUT_DIR = path.join(os.homedir(), '__TTMG__');
+
+function getSessionId({ clientWsPort }) {
+    const config = {
+        ws_port: DEV_WS_PORT,
+        nodeWsPort: DEV_WS_PORT,
+        // http_port: DEV_PORT,
+        clientWsPort,
+    };
+    return btoa(JSON.stringify(config));
+}
+
+/**
+ * 把我的调试相关的数据，生成 base64 字符串
+ */
+let server;
+async function createServer() {
+    if (server) {
+        closeServer();
+    }
+    const app = express();
+    const port = DEV_PORT; // 你可以自定义端口
+    const upload = multer({ dest: os.tmpdir() }); // 上传到 uploads 目录
+    // 解析 JSON body
+    app.use(express.json());
+    // 解析 FormData body
+    app.use(express.urlencoded({ extended: true }));
+    /**
+     * TODO: 提供的接口供客户端进行调用，告诉 NodeServer 客户端的 host 和 port
+     */
+    app.post('/game/env', async (req, res) => {
+        // 获取请求体
+        const body = req.body;
+        const { host, port, wsPort } = body;
+        store.setState({
+            clientServerPort: port,
+            clientServerHost: host,
+        });
+        // 响应内容（可以根据实际业务返回需要的数据）
+        const devUrl = `http://${host}:${port}?session=${getSessionId({ clientWsPort: wsPort })}`;
+        openUrl(devUrl);
+        console.log(chalk.bold.yellow(`Game debug is ready! Visit ${devUrl} in your browser.`));
+        res.json({
+            code: 0,
+            msg: 'ok',
+            data: {
+                devUrl,
+            },
+        });
+    });
+    app.post('/game/upload', upload.single('file'), async (req, res) => {
+        // 文件信息在 req.file
+        res.json({
+            code: 0,
+            msg: 'ok',
+            filename: req.file.filename, // multer生成的临时文件名
+            originalname: req.file.originalname, // 上传时的原始文件名
+            size: req.file.size,
+            path: req.file.path,
+        });
+    });
+    // 启动服务
+    server = app.listen(port, () => {
+        console.log(chalk.cyan.bold(`Node devServer is running on port ${port}`));
+    });
+    return {
+        port,
+        host: getLocalIP(),
+    };
+}
+function closeServer() {
+    server.close(() => {
+        console.log('Dev server closed');
+        server = null;
+        process.exit(0);
+    });
+}
+
+const CONFIG_DIR = path.join(os.homedir(), '.ttmg-cli');
+path.join(CONFIG_DIR, 'config.json');
+/**
+ * 获取 Client Key（选择或输入）
+ */
+function getClientKey() {
+    /**
+     * 读取 project.config.json 中的 appid/appId
+     */
+    const projectConfigPath = path.join(process.cwd(), 'project.config.json');
+    let clientKey;
+    try {
+        const projectConfig = JSON.parse(fs.readFileSync(projectConfigPath, 'utf-8'));
+        clientKey = projectConfig.appid || projectConfig.appId;
+    }
+    catch (e) {
+        clientKey = '';
+    }
+    if (clientKey) {
+        return clientKey;
+    }
+    else {
+        console.log(chalk.red.bold('No appid found in project.config.json, you should provide it in project.config.json'));
+        process.exit(1);
+    }
+    // const keys = readClientKeys();
+    // if (keys.length > 0) {
+    //   // 有历史 key，展示选择框
+    //   const { selectedKey } = await inquirer.prompt([
+    //     {
+    //       type: 'list',
+    //       name: 'selectedKey',
+    //       message: 'Please select your game id（client_key）：',
+    //       choices: [...keys, new inquirer.Separator(), 'Add new game id'],
+    //     },
+    //   ]);
+    //   if (selectedKey === 'Add new game id') {
+    //     // 输入新 key
+    //     const { newKey } = await inquirer.prompt([
+    //       {
+    //         type: 'input',
+    //         name: 'newKey',
+    //         message: 'Please input your new game id（client_key）：',
+    //         validate: (input: string) => (input ? true : 'Please input game id'),
+    //       },
+    //     ]);
+    //     saveClientKey(newKey);
+    //     clientKey = newKey;
+    //   } else {
+    //     clientKey = selectedKey;
+    //   }
+    // } else {
+    //   // 没有历史 key，让用户输入
+    //   const { newKey } = await inquirer.prompt([
+    //     {
+    //       type: 'input',
+    //       name: 'newKey',
+    //       message: 'Please input your game id（client_key）：',
+    //       validate: (input: string) => (input ? true : 'Please input game id'),
+    //     },
+    //   ]);
+    //   saveClientKey(newKey);
+    //   clientKey = newKey;
+    // }
+    // return clientKey;
+}
+
+function getOutputDir() {
+    const clientKey = getClientKey();
+    return path.join(os.homedir(), '__TTMG__', clientKey);
+}
+
+async function uploadGame() {
+    const outputDir = getOutputDir();
+    console.log(chalk.yellow.bold('Start compress game resource'));
+    const zipPath = path.join(os.homedir(), '__TTMG__', 'upload.zip');
+    await zipDirectory(outputDir, zipPath);
+    console.log(chalk.green.bold('Compress game package resource success \n'));
+    const res = await uploadZip(zipPath);
+    return {
+        isSuccess: res?.statusCode === 200,
+    };
+}
+function zipDirectory(sourceDir, outPath) {
+    return new Promise((resolve, reject) => {
+        const output = fs.createWriteStream(outPath); // 修正：传入输出路径
+        const archive = require$$5$1('zip', { zlib: { level: 9 } });
+        output.on('close', () => {
+            // console.log('Compress directory done');
+            resolve();
+        });
+        output.on('error', err => {
+            // console.error('Compress directory error:', err);
+            reject(err);
+        });
+        archive.on('error', err => {
+            reject(err);
+        });
+        archive.pipe(output);
+        archive.directory(sourceDir, false);
+        archive.finalize();
+    });
+}
+/**
+ * 上传 zip 文件到指定接口
+ * @param zipFilePath zip 文件路径
+ * @param uploadUrl 上传接口
+ */
+// export async function uploadZip(zipPath: string) {
+//   const form = new FormData();
+//   form.append('file', fs.createReadStream(zipPath), 'upload.zip');
+//   try {
+//     console.log(chalk.yellow.bold('Start upload resource to client'));
+//     const { clientServerHost, clientServerPort } = store.getState();
+//     const res = await axios.post(
+//       `http://${clientServerHost}:${clientServerPort}/game/upload`,
+//       form,
+//       {
+//         headers: form.getHeaders(),
+//       },
+//     );
+//     fs.unlinkSync(zipPath);
+//     return res;
+//   } catch (err: any) {
+//     console.error('Upload resource to client failed:', err.message);
+//   }
+// }
+// 使用 require 语法，完全兼容 CommonJS
+async function uploadZip(zipPath) {
+    const form = new FormData();
+    form.append('file', fs.createReadStream(zipPath), {
+        filename: 'upload.zip',
+        contentType: 'application/zip',
+    });
+    console.log(chalk.yellow.bold('Start upload resource to client'));
+    const { clientServerHost, clientServerPort } = store.getState();
+    const url = `http://${clientServerHost}:${clientServerPort}/game/upload`;
+    try {
+        // 1. 创建请求流
+        const stream = got.stream.post(url, {
+            body: form,
+        });
+        // 2. 监听上传进度 (这个回调是并行的，不影响封装)
+        stream.on('uploadProgress', progress => {
+            const percent = (progress.percent * 100).toFixed(1);
+            const transferred = progress.transferred;
+            const total = progress.total;
+            process.stdout.write(`\r${chalk.cyan('Uploading progress:  ')}${chalk.green(percent + '%')}`);
+            // 生成标准的 百分比
+            wsServer?.sendUploadStatus('process', {
+                progress: `${percent}%`,
+            });
+        });
+        // 3. 【核心封装】将流的处理过程包装在 Promise 中
+        const response = await new Promise((resolve, reject) => {
+            // 用于拼接响应数据
+            const chunks = [];
+            // 当流传输数据时，收集数据块
+            stream.on('data', chunk => {
+                chunks.push(chunk);
+            });
+            // 当流成功结束时
+            stream.on('end', () => {
+                // 拼接所有数据块，并转换为字符串
+                // const responseBody = Buffer.concat(chunks).toString('utf-8');
+                // stream.response 在流结束后才可用
+                // 将完整的响应对象 resolve 出去
+                resolve({
+                    statusCode: 200,
+                });
+            });
+            // 当流发生错误时
+            stream.on('error', err => {
+                // 将错误 reject 出去，这样外层的 try...catch 就能捕获到
+                reject(err);
+            });
+        });
+        // 4. 当 await 完成后，说明流已成功结束，可以安全地执行后续操作
+        process.stdout.write('\n'); // 换行，保持终端整洁
+        console.log(chalk.green.bold('✔ Upload completed successfully!'));
+        fs.unlinkSync(zipPath);
+        // 5. 返回从 Promise 中解析出的响应数据
+        return response;
+    }
+    catch (err) {
+        // 无论是请求错误还是流处理错误，都会在这里被捕获
+        process.stdout.write('\n');
+        if (err.response) {
+            console.error(chalk.red.bold('✖ Upload failed with server error:'), {
+                statusCode: err.response.statusCode,
+                body: err.response.body,
+            });
+        }
+        else {
+            console.error(chalk.red.bold('✖ Upload failed with error:'), err.message);
+        }
+    }
+}
+
+class WsServer {
+    constructor() {
+        this.ws = new WebSocket.Server({ port: DEV_WS_PORT });
+        this.ws.on('connection', ws => {
+            ws.on('message', message => {
+                /** 客户端发送的消息 */
+                const clientMessage = JSON.parse(message.toString());
+                console.log('Client Message', clientMessage);
+                const from = clientMessage.from;
+                if (from === 'browser') {
+                    const method = clientMessage.method;
+                    switch (method) {
+                        case 'connected':
+                            this.sendUploadStatus('start');
+                            uploadGame()
+                                .then(res => {
+                                if (res.isSuccess) {
+                                    this.sendUploadStatus('success', {
+                                        packages: store.getState().packages,
+                                        isSuccess: res.isSuccess,
+                                    });
+                                }
+                                else {
+                                    this.sendUploadStatus('error', {
+                                        errMsg: res.errorMsg,
+                                    });
+                                }
+                            })
+                                .catch(() => {
+                                this.sendUploadStatus('error', {
+                                    isSuccess: false,
+                                });
+                                console.log(chalk.red.bold('Start upload resource to client failed!'));
+                            });
+                            break;
+                        case 'closeLocalDebug':
+                            console.log('closeLocalDebug');
+                            /**
+                             * 关闭调试服务
+                             */
+                            this.ws.close();
+                            closeServer();
+                            console.log('close server');
+                            break;
+                    }
+                }
+                else {
+                    const method = clientMessage.method;
+                    switch (method) {
+                        case 'shareDevParams':
+                            console.log('shareDevParams', clientMessage);
+                            const payload = clientMessage.payload;
+                            console.log('shareDevParams', payload);
+                            const { host, port, wsPort } = payload;
+                            store.setState({
+                                clientServerPort: port,
+                                clientServerHost: host,
+                            });
+                            // 响应内容（可以根据实际业务返回需要的数据）
+                            const devUrl = `http://${host}:${port}?session=${getSessionId({ clientWsPort: wsPort })}`;
+                            openUrl(devUrl);
+                            console.log(chalk.bold.yellow(`Game debug is ready! Visit ${devUrl} in your browser.`));
+                            break;
+                        // 鉴权失败
+                        case 'checkPermissionFailed':
+                            // 提醒使用客户端先完成测试用户授权，再重新扫描二维码开启调试服务
+                            console.log(chalk.red.bold('Check permission failed! Please authorize in client first.'));
+                            break;
+                    }
+                }
+            });
+        });
+    }
+    send(params) {
+        this.ws.clients.forEach(client => {
+            if (client.readyState === WebSocket.OPEN) {
+                const data = {
+                    ...params,
+                    from: 'nodeServer',
+                };
+                client.send(JSON.stringify(data));
+            }
+        });
+    }
+    close() {
+        this.ws.close();
+    }
+    sendUploadStatus(status, payload) {
+        this.send({
+            method: 'uploadStatus',
+            status,
+            payload,
+        });
+    }
+}
+const wsServer = new WsServer();
+
+async function watchChange() {
+    let debounceTimer = null;
+    fs.watch(process.cwd(), (eventType, filename) => {
+        console.log(chalk.yellow('game resource change, restart to upload'));
+        // 清除之前的定时器
+        if (debounceTimer)
+            clearTimeout(debounceTimer);
+        // 重新设置定时器
+        debounceTimer = setTimeout(async () => {
+            wsServer.sendUploadStatus('start');
+            uploadGame()
+                .then((res) => {
+                if (res.isSuccess) {
+                    wsServer.sendUploadStatus('success');
+                }
+                else {
+                    wsServer.sendUploadStatus('error', {
+                        errMsg: res.errorMsg,
+                    });
+                }
+            })
+                .catch(() => {
+                wsServer.sendUploadStatus('error');
+            });
+            debounceTimer = null;
+        }, 500); // 500ms内只执行一次
+    });
+}
+
+async function showSchema() {
+    const clientKey = getClientKey();
+    const outputDir = path.join(OUTPUT_DIR, clientKey);
+    const localIP = getLocalIP();
+    console.log(chalk.green.bold('Tips:'));
+    console.log(`  1. ${chalk.yellow.bold('Scan the QR code to start the client devServer.')}`);
+    console.log(`  2. ${chalk.yellow.bold('Will auto upload compiled resource to client.')} ${chalk.bold(outputDir)}`);
+    console.log(`  3. ${chalk.yellow.bold('Debug your game in the browser.')}\n`);
+    const schema = `https://www.tiktok.com/ttmg/dev/${clientKey}?host=${localIP}&port=${DEV_WS_PORT}`;
+    qrcode.generate(schema, {
+        small: true,
+    }, qr => {
+        console.log(qr);
+    });
+}
+
+async function prepareResource() {
+    console.log(chalk.yellow.bold('Start compile game for debug'));
+    const entryDir = process.cwd();
+    const outputDir = getOutputDir();
+    if (!fs.existsSync(outputDir)) {
+        fs.mkdirSync(outputDir, { recursive: true });
+    }
+    const { isSuccess, errorMsg, packages } = await ttmgPack.debugPkgs({
+        entry: entryDir,
+        output: outputDir,
+    });
+    if (!isSuccess) {
+        console.log(chalk.redBright('Build game package failed, Please check the error message below:'));
+        console.log(chalk.redBright(errorMsg));
+        process.exit(1);
+    }
+    else {
+        store.setState({
+            packages,
+        });
+        console.log(chalk.green.bold('Compile game package success \n'));
+    }
+}
+
+async function dev() {
+    /**
+     * 1. 准备游戏资源
+     */
+    await prepareResource();
+    /**
+     * 2. 创建本地调试服务
+     */
+    await createServer();
+    /**
+     * 3. 显示调试二维码信息，扫码启动客户端调试服务
+     */
+    await showSchema();
+    /**
+     * 4. 监听游戏资源变化
+     */
+    await watchChange();
+}
+
+var version = "0.1.0-beta.9";
+var pkg = {
+	version: version};
+
+const program = new commander.Command();
+program
+    .name('ttmg')
+    .description('TikTok Mini Games Command Line Tool')
+    .version(pkg.version, '-v, --version', '显示版本号')
+    .option('dev', 'Debug TikTok Mini Games for Client')
+    .option('dev --h5', 'Debug TikTok Mini Games for Web');
+program
+    .option('--h5', 'H5 Mini Game')
+    .command('init')
+    .description('Initialize project')
+    .action(() => {
+    const options = program.opts(); // 获取 options
+    if (options.h5) {
+        index$2();
+    }
+    else {
+        console.log('Native Mini Game initialize');
+    }
+});
+/**
+ * ttmg dev 命令
+ */
+program
+    .option('--h5', 'H5 Mini Game')
+    .command('dev')
+    .description('Open browser dev environment')
+    .action(() => {
+    const options = program.opts();
+    if (options.h5) {
+        index$1();
+    }
+    else {
+        dev();
+    }
+});
+/**
+ * ttmg build 命令
+ */
+program
+    .option('--h5', 'H5 Mini Game')
+    .command('build')
+    .description('Bundle project')
+    .action(() => {
+    const options = program.opts(); // 获取 options
+    if (options.h5) {
+        index();
+    }
+    else {
+        console.log('Native Mini Game bundle');
+    }
+});
+program
+    .command('login')
+    .description('User Dev Portal Account to Login')
+    .action(async () => {
+    console.log('will support soon');
+});
+program.parse(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttmg/cli",
-  "version": "0.1.0-beta.8",
+  "version": "0.1.0-beta.9",
   "description": "TikTok Mini Game Command Line Tool",
   "license": "ISC",
   "bin": {
@@ -29,10 +29,12 @@
     "chalk": "^4.1.2",
     "cheerio": "^1.1.1",
     "chrome-launcher": "^1.2.0",
+    "chrome-remote-interface": "^0.33.3",
     "commander": "^11.1.0",
     "estraverse": "^5.3.0",
     "express": "^5.1.0",
     "form-data": "^4.0.4",
+    "got": "^11.8.5",
     "inquirer": "^12.7.0",
     "jsdom": "^26.1.0",
     "multer": "^2.0.2",