shoplazza-cli 1.0.6 → 1.0.7-beta.1

package/lib/app/api/index.js

@@ -0,0 +1,96 @@
+const instance = require('../../openAPI/index');
+
+
+/**
+ * 获取主题列表
+ */
+async function getThemeList() {
+  return instance.get('/themes');
+}
+
+/**
+ * 获取店铺私有主题插件列表
+ * @returns
+ */
+async function getThemeAppList() {
+  return instance.get('/theme-extensions');
+}
+
+/**
+ * 创建主题插件 or 更新主题插件信息
+ */
+async function toCreateThemeApp(data) {
+  return instance.put('/theme-extensions', data);
+}
+
+/**
+ * 上传主题插件
+ */
+async function toUploadThemeApp(extension_id, data) {
+  return instance.patch(`/theme-extensions/${extension_id}/dev-doctree`, data);
+}
+
+/**
+ * 新增文件
+ */
+async function toCreateFile(extension_id, data) {
+  return instance.post(`/theme-extensions/${extension_id}/dev-doc`, data);
+}
+
+/**
+ * 更新文件
+ */
+async function toUpdateFile(extension_id, data) {
+  return instance.patch(`/theme-extensions/${extension_id}/dev-doc`, data);
+}
+
+/**
+ * 删除文件
+ */
+async function toDeleteFile(extension_id, params) {
+  return instance.delete(`/theme-extensions/${extension_id}/dev-doc`, {
+    params
+  });
+}
+
+/**
+ * 获取任务状态
+ */
+async function getTaskStatus(data) {
+  return instance.get(`/theme-extensions/version-tasks/${data.taskId}`);
+}
+
+/**
+ * 获取主题插件版本列表
+ */
+async function getThemeAppVersionList(extension_id) {
+  return instance.get(`/theme-extensions/${extension_id}/versions`);
+}
+
+/**
+ * 创建主题插件版本
+ */
+async function toCreateThemeAppVersion(data) {
+  return instance.post(`/theme-extensions/version-tasks`, data);
+}
+
+/**
+ * 部署主题插件
+ */
+async function toDeployThemeApp(data) {
+  return instance.post(`/theme-extensions/publications`, data);
+}
+
+module.exports = {
+  getThemeList,
+  getThemeAppList,
+  toCreateThemeApp,
+  toCreateFile,
+  toUpdateFile,
+  toDeleteFile,
+  toUploadThemeApp,
+  getThemeAppVersionList,
+  toCreateThemeAppVersion,
+  toDeployThemeApp,
+  getTaskStatus
+};

package/lib/app/commands/build.js

@@ -1,47 +1,69 @@
 const chalk = require('chalk');
 const inquirer = require('inquirer');
-const path = require('path');
-const { getThemeAppConfig, compareVersions } = require('../utils');
-const { getThemeAppVersionList, toCreateThemeAppVersion } = require('../api/api');
+const ora = require('ora');
+const fsExtra = require('fs-extra');
+const { getThemeAppConfig, compareVersions, compress } = require('../utils');
+const { THEME_APP_DIR_PATH, EXCHANGE_TOKEN, STORE_DOMAIN } = require('../utils/config');
+const { getThemeAppVersionList, toCreateThemeAppVersion, getTaskStatus } = require('../api');
+const { useOss } = require('../../oss');
 
-async function createNewVersion(appId, version, description) {
-  const themeAppPath = path.resolve(WORKSPACE_PATH, 'theme-app');
-  const { zipPath, zipName } = await compress(themeAppPath);
+async function createNewVersion(extensionId, version, description) {
+  const spinner = ora('Start building a new version...').start();
+  const { zipPath, zipName } = await compress(THEME_APP_DIR_PATH);
+  const { uploadOss } = useOss(
+    EXCHANGE_TOKEN,
+    STORE_DOMAIN,
+    `✗ No store found. Please run ${chalk.cyan('shoplazza login')} to login to a specific store.`
+  );
   const zipOssUrl = await uploadOss(zipPath, zipName);
-  const taskId = await toCreateThemeAppVersion({
-    extension_id: appId,
+  // 上传完成删除压缩包
+  fsExtra.removeSync(zipPath);
+  const res = await toCreateThemeAppVersion({
+    extension_id: extensionId,
     version,
-    description,
+    exts: description,
     resource_url: zipOssUrl
   });
-  while (true) {
-    const res = await getTaskStatus({ taskId });
-    if (res.data?.task?.state === 1) {
-      console.log(chalk.green(`[SUCCESS] Theme app pushed successfully.`));
-      break;
-    } else if (res.data?.task?.state === 2) {
-      console.error(chalk.red(`[ERROR] Theme app push failed: ${res.data?.task?.error_message}`));
-      break;
-    } else {
-      console.log(chalk.yellow(`[WAITING] Theme app push in progress...`));
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-    }
+  const taskId = res.data?.task_id;
+
+  if (!taskId) {
+    spinner.fail(chalk.red(`Failed to build a new version!`));
+    throw new Error('taskId is required');
   }
+  return new Promise((resolve, reject) => {
+    const timer = setInterval(async () => {
+      const res = await getTaskStatus({ taskId });
+      if (res.data?.state === 1) {
+        clearInterval(timer);
+        spinner.succeed(chalk.green(`Successfully built a new version(v${version})!`));
+        resolve();
+      } else if (res.data?.state === 2) {
+        clearInterval(timer);
+        spinner.fail(chalk.red(`Failed to build a new version!`));
+        reject(new Error(res.data?.message));
+      } else {
+        spinner.text = chalk.blue(`[WAITING] Building a new version...`);
+      }
+    }, 1000);
+  });
 }
 
 /**
  * 交互式命令行
  */
-async function usePrompt() {
-  const versionList = await getThemeAppVersionList();
-  const latestVersion = versionList[versionList.length - 1];
+async function usePrompt(extensionId) {
+  const res = await getThemeAppVersionList(extensionId);
 
-  console.log(
-    chalk.cyanBright(`\n🔍 Latest version: `) +
-      chalk.yellow(`${latestVersion.version} `) +
-      chalk.white(`(${latestVersion.description})`) +
-      chalk.gray(` [Released on: ${latestVersion.date}]`)
-  );
+  const latestVersion = res.data?.data?.[0];
+
+  if (latestVersion) {
+    console.log(
+      chalk.cyanBright(`\n🔍 Latest version: `) +
+        chalk.yellow(`${latestVersion.version} `) +
+        chalk.white(`(${latestVersion.description})`) +
+        chalk.gray(` [Released on: ${latestVersion.created_at}]`)
+    );
+  }
 
   return inquirer.prompt([
     {
@@ -52,8 +74,10 @@ async function usePrompt() {
         if (!/^[0-9]+\.[0-9]+\.[0-9]+$/.test(newVersion)) {
           return chalk.red('❌ Version must follow the format X.Y.Z (e.g., 1.0.0).');
         }
-        if (compareVersions(newVersion, latestVersion.version) !== 1) {
-          return chalk.red('❌ Version must be greater than the latest version.');
+        if (latestVersion) {
+          if (compareVersions(newVersion, latestVersion.version) !== 1) {
+            return chalk.red('❌ Version must be greater than the latest version.');
+          }
         }
         return true;
       }
@@ -74,9 +98,12 @@ async function usePrompt() {
 
 async function build() {
   try {
-    const { appId } = await getThemeAppConfig();
-    const { newVersion, description } = await usePrompt();
-    await createNewVersion(appId, newVersion, description);
+    const { extensionId } = await getThemeAppConfig();
+    if (!extensionId) {
+      throw new Error('ExtensionId is empty, please use `serve` command first.');
+    }
+    const { newVersion, description } = await usePrompt(extensionId);
+    await createNewVersion(extensionId, newVersion, description);
   } catch (error) {
     console.error(chalk.red(`[ERROR IN BUILD] ${error.message}`));
   }

package/lib/app/commands/create.js

@@ -13,14 +13,14 @@ async function usePrompt() {
     {
       type: 'list',
       name: 'themeAppType',
-      message: 'Select theme app type:',
+      message: 'Select theme extension type:',
       choices: [THEME_APP_TYPE.BASIC_APP.description, THEME_APP_TYPE.EMBEDS_APP.description],
       prefix: '*'
     },
     {
       type: 'input',
       name: 'projectName',
-      message: 'Please enter the theme app project name:',
+      message: 'Please enter the theme extension project name:',
       prefix: '*',
       validate: (projectName) => {
         if (!projectName.trim()) {
@@ -35,12 +35,12 @@ async function usePrompt() {
 /**
  * 初始化项目
  */
-async function initProj(projectPath, projectName) {
+async function initProj(projectPath, projectName, isBasicApp = false) {
   // 替换占位符 key文件相对路径 value替换的内容
   const replacementConfig = {
     'package.json': { projectName },
     'theme-app/blocks/index.liquid': { projectName },
-    'theme-app.config.json': { projectName }
+    'theme-extension.config.json': { projectName }
   };
   for (const [filePath, replacements] of Object.entries(replacementConfig)) {
     const fullPath = path.resolve(projectPath, filePath);
@@ -48,10 +48,14 @@ async function initProj(projectPath, projectName) {
   }
 
   // 重命名文件
-  const filesToRename = ['assets/index.css', 'blocks/index.liquid', 'snippets/index.liquid'];
+  const filesToRename = [
+    isBasicApp ? 'assets/index.css' : 'snippets/index_css.liquid',
+    'blocks/index.liquid',
+    'snippets/index.liquid'
+  ];
   for (const file of filesToRename) {
     const filePath = path.resolve(projectPath, 'theme-app', file);
-    await renameFile(filePath, `${projectName}${file.includes('snippets') ? '_snippet' : ''}`);
+    await renameFile(filePath, `${projectName}${filePath.includes('_css') ? '_css' : ''}`);
   }
 }
 
@@ -59,7 +63,7 @@ async function initProj(projectPath, projectName) {
  * 控制台提示信息
  */
 function consoleTips(projectName) {
-  console.log(chalk.green(`Theme app project "${projectName}" has been successfully created.`));
+  console.log(chalk.green(`Theme extension project "${projectName}" has been successfully created.`));
   console.log(chalk.bold(`To get started:\n`));
   console.log(`  ${chalk.cyan(`cd ${projectName}`)}`);
   console.log(`  ${chalk.cyan(`npm start`)}\n`);
@@ -71,18 +75,15 @@ function consoleTips(projectName) {
  */
 async function _create(themeAppDescription, projectName) {
   const projectPath = path.resolve(WORKSPACE_PATH, projectName);
-  const projectExists = await fsExtra.pathExists(projectPath);
 
-  if (projectExists) {
+  if (fsExtra.pathExistsSync(projectPath)) {
     throw new Error(`Project directory "${projectName}" already exists.`);
   }
   await fsExtra.ensureDir(projectPath);
-  const templatePath =
-    THEME_APP_TYPE.BASIC_APP.description === themeAppDescription
-      ? THEME_APP_TYPE.BASIC_APP.templatePath
-      : THEME_APP_TYPE.EMBEDS_APP.templatePath;
+  const isBasicApp = themeAppDescription === THEME_APP_TYPE.BASIC_APP.description;
+  const templatePath = isBasicApp ? THEME_APP_TYPE.BASIC_APP.templatePath : THEME_APP_TYPE.EMBEDS_APP.templatePath;
   await fsExtra.copy(templatePath, projectPath);
-  await initProj(projectPath, projectName);
+  await initProj(projectPath, projectName, isBasicApp);
   consoleTips(projectName);
 }
 

package/lib/app/commands/deploy.js

@@ -2,23 +2,21 @@ const inquirer = require('inquirer');
 const chalk = require('chalk');
 const ora = require('ora');
 const { getThemeAppConfig } = require('../utils');
-const { getThemeAppVersionList, toDeployThemeApp } = require('../api/api');
+const { getThemeAppVersionList, toDeployThemeApp } = require('../api');
 
-// 调用后端 API 进行部署
-async function deployVersion(appId, version) {
-  // await new Promise((resolve) => setTimeout(resolve, 2000));
+async function deployVersion(extensionId, versionInfo) {
   await toDeployThemeApp({
-    extension_id: appId,
-    version,
+    extension_id: extensionId,
+    version_id: versionInfo.version_id,
     type: 'enable'
   });
-  console.log(chalk.green(`Version ${version} has been deployed successfully.`));
+  console.log(chalk.green(`Version ${versionInfo.version} has been deployed successfully.`));
 }
 
 async function usePrompt(versionList) {
   const choices = versionList.map((v) => ({
-    name: `${v.version} (${v.date}) - ${v.description}`,
-    value: v.version
+    name: `${v.version} (${v.exts}) - ${v.created_at}`,
+    value: v.version_id
   }));
   return inquirer.prompt([
     {
@@ -32,12 +30,21 @@ async function usePrompt(versionList) {
 
 async function deploy() {
   try {
-    const { appId } = await getThemeAppConfig();
+    const { extensionId } = await getThemeAppConfig();
+    if (!extensionId) {
+      throw new Error('ExtensionId is empty, please use `serve` command first.');
+    }
     const spinner = ora('Fetching version list...').start();
-    const versionList = await getThemeAppVersionList();
+    const res = await getThemeAppVersionList(extensionId);
+    const versionList = res.data?.data || [];
+    if (!versionList.length) {
+      spinner.succeed('Version list loaded.');
+      throw new Error('No version found, please use `build` command to upload a version first.');
+    }
     spinner.succeed('Version list loaded.');
     const { selectedVersion } = await usePrompt(versionList);
-    await deployVersion(appId, selectedVersion);
+    const versionInfo = versionList.find((v) => v.version_id === selectedVersion);
+    await deployVersion(extensionId, versionInfo);
   } catch (error) {
     console.error(chalk.red(`[ERROR IN DEPLOY] ${error.message}`));
   }

package/lib/app/commands/list.js

@@ -1,25 +1,29 @@
 const chalk = require('chalk');
 const ora = require('ora');
-const { getThemeAppConfig, renderTable } = require('../utils');
-const { getThemeAppList } = require('../api/api');
+const { renderTable } = require('../utils');
+const { getThemeAppList } = require('../api');
 
 /**
  * 控制台提示
  */
 function consoleTips(versionList) {
-  console.log(chalk.green('\n📜 Available Theme Apps:'));
-  console.log(
-    renderTable(versionList, [
-      { label: 'Name', filed: 'name' },
-      { label: 'Version', filed: 'version', color: 'yellowBright' },
-      { label: 'Description', filed: 'description' }
-    ])
-  );
+  if (versionList.length) {
+    console.log(chalk.green(`\n📃 Your store has ${versionList.length} available theme extensions:`));
+    console.log(
+      renderTable(versionList, [
+        { label: 'App Name', filed: 'title' },
+        { label: 'CreateTime', filed: 'created_at', color: 'yellowBright' },
+      ])
+    );
+  } else {
+    console.log(chalk.green('Your store does not have any available theme extensions.'));
+  }
 }
 
 async function list() {
   try {
-    const themeAppList = await getThemeAppList();
+    const res = await getThemeAppList();
+    const themeAppList = res.data?.data || [];
     consoleTips(themeAppList);
   } catch (error) {
     console.error(chalk.red(`[ERROR IN LIST] ${error.message}`));

package/lib/app/commands/serve.js

@@ -1,36 +1,35 @@
-const path = require('path');
 const chalk = require('chalk');
 const inquirer = require('inquirer');
-const { STORE_DOMAIN, THEME_APP_PATH, EXCHANGE_TOKEN } = require('../utils/config');
-const { compress, getThemeAppConfig, setThemeAppConfig } = require('../utils');
-const { toCreateThemeApp, toUploadThemeApp, getTaskStatus, getThemeList } = require('../api/api');
-const { initWatcher } = require('../../utils');
+const fsExtra = require('fs-extra');
+const ora = require('ora');
+const { STORE_DOMAIN, THEME_APP_DIR_PATH, EXCHANGE_TOKEN } = require('../utils/config');
+const { compress, getThemeAppConfig, setThemeAppConfig, getFileInfo } = require('../utils');
+const {
+  toCreateThemeApp,
+  toUploadThemeApp,
+  getTaskStatus,
+  getThemeList,
+  toCreateFile,
+  toUpdateFile,
+  toDeleteFile
+} = require('../api');
+const { watchWorkspace } = require('../../utils');
 const { useOss } = require('../../oss');
 
-/**
- * 模拟上传文件到服务器
- */
-async function uploadFileToServer(filePath) {
-  console.log(chalk.blue(`[UPLOAD] ${filePath} - Uploading to server...`));
-  // TODO: 替换为实际的上传逻辑（例如调用后端 API 或 WebSocket 通信）
-  await new Promise((resolve) => setTimeout(resolve, 1000)); // 模拟网络延迟
-  console.log(chalk.green(`[SUCCESS] ${filePath} - Uploaded successfully.`));
-}
-
 /**
  * 控制台提示信息
  */
-function consoleTips(selectedThemeId, appId) {
+function consoleTips(selectedThemeId, extensionId) {
   console.log(`\n======================================PREVIEW URLS======================================`);
   console.log(chalk.cyan.bold('🔗 Admin Preview URL:'));
   console.log(
-    chalk.blueBright(`  https://${STORE_DOMAIN}/admin/card?theme_id=${selectedThemeId}&ext_debug=${appId}\n`)
+    chalk.blueBright(`  https://${STORE_DOMAIN}/admin/card?theme_id=${selectedThemeId}&ext_debug=${extensionId}\n`)
   );
   console.log(chalk.cyan.bold('🔗 Storefront Preview URL:'));
-  console.log(chalk.blueBright(`  https://${STORE_DOMAIN}?preview_theme_id=${selectedThemeId}&ext_debug[]=${appId}\n`));
+  console.log(chalk.blueBright(`  https://${STORE_DOMAIN}?preview_theme_id=${selectedThemeId}&ext_debug=${extensionId}\n`));
   console.log(`=====================================WATCHER RUNNING=====================================`);
   console.log(chalk.green(`🎉 File watcher is now running!`));
-  console.log(chalk.green(`📂 Watching directory:`), chalk.blue(THEME_APP_PATH));
+  console.log(chalk.green(`📂 Watching directory:`), chalk.blue(THEME_APP_DIR_PATH));
   console.log(chalk.green(`✨ You can make changes to your files, and they will be processed automatically.`));
   console.log(chalk.green(`🚀 Press Ctrl+C to stop.\n`));
 }
@@ -38,33 +37,42 @@ function consoleTips(selectedThemeId, appId) {
 /**
  * 同步本地代码到远程服务器
  */
-async function syncLocalFiles(appId) {
-  const { zipPath, zipName } = await compress(THEME_APP_PATH);
+async function syncLocalFiles(extensionId) {
+  const spinner = ora('Start synchronizing local files to remote...').start();
+  const { zipPath, zipName } = await compress(THEME_APP_DIR_PATH);
   const { uploadOss } = useOss(
     EXCHANGE_TOKEN,
     STORE_DOMAIN,
     `✗ No store found. Please run ${chalk.cyan('shoplazza login')} to login to a specific store.`
   );
   const zipOssUrl = await uploadOss(zipPath, zipName);
-  const res = await toUploadThemeApp({
-    extension_id: appId,
+  // 上传完成删除压缩包
+  fsExtra.removeSync(zipPath);
+  const res = await toUploadThemeApp(extensionId, {
     resource_url: zipOssUrl
   });
   const taskId = res.data?.task_id;
-  // 轮询查看任务是否完成
-  while (true) {
-    const res = await getTaskStatus({ taskId });
-    if (res.data?.task?.state === 1) {
-      console.log(chalk.green(`[SUCCESS] Theme app pushed successfully.`));
-      break;
-    } else if (res.data?.task?.state === 2) {
-      console.error(chalk.red(`[ERROR] Theme app push failed: ${res.data?.task?.error_message}`));
-      break;
-    } else {
-      console.log(chalk.yellow(`[WAITING] Theme app push in progress...`));
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-    }
+  if (!taskId) {
+    spinner.fail(chalk.red(`Failed to synchronize local files to remote location!`));
+    throw new Error('taskId is required');
   }
+  // 轮询查看任务是否完成
+  return new Promise((resolve, reject) => {
+    const timer = setInterval(async () => {
+      const res = await getTaskStatus({ taskId });
+      if (res.data?.state === 1) {
+        clearInterval(timer);
+        spinner.succeed(chalk.green(`Successfully synchronized local files to remote location!`));
+        resolve();
+      } else if (res.data?.state === 2) {
+        clearInterval(timer);
+        spinner.fail(chalk.red(`Failed to synchronize local files to remote location!`));
+        reject(new Error(res.data?.message));
+      } else {
+        spinner.text = chalk.blue(`[WAITING] Synchronizing local files to remote...`);
+      }
+    }, 1000);
+  });
 }
 
 /**
@@ -90,26 +98,71 @@ async function usePrompt() {
 /**
  * 创建主题插件
  */
-async function createThemeApp(appName) {
-  const res = await toCreateThemeApp({
-    title: appName
+async function createThemeApp(themeAppConfig) {
+  const data = {
+    title: themeAppConfig.extensionName || '' // 插件显示名称
+  };
+  if (themeAppConfig.extensionId) {
+    data.extension_id = themeAppConfig.extensionId;
+  }
+  const res = await toCreateThemeApp(data);
+  const extensionId = res.data?.extension_id;
+  await setThemeAppConfig({ extensionId });
+  return extensionId;
+}
+
+/**
+ * 启动监听
+ */
+function startWatcher(extensionId) {
+  const ACTION_MAP = {
+    ADD: 'add',
+    CHANGE: 'change',
+    DELETE: 'delete'
+  };
+  const actionToApiMap = {
+    [ACTION_MAP.ADD]: toCreateFile,
+    [ACTION_MAP.CHANGE]: toUpdateFile,
+    [ACTION_MAP.DELETE]: toDeleteFile
+  };
+  const funcCache = {};
+  const handleFileChange = (action) => {
+    if (funcCache[action]) {
+      return funcCache[action];
+    }
+    const func = (filePath) => {
+      const { fileName, parentDirName } = getFileInfo(filePath);
+      const data = {
+        type: parentDirName,
+        location: fileName
+      };
+      if ([ACTION_MAP.CHANGE, ACTION_MAP.ADD].includes(action)) {
+        data.content = fsExtra.readFileSync(filePath, 'utf-8');
+      }
+      actionToApiMap[action](extensionId, data);
+    };
+    funcCache[action] = func;
+    return func;
+  };
+  watchWorkspace(THEME_APP_DIR_PATH, {
+    onAdd: handleFileChange(ACTION_MAP.ADD),
+    onChange: handleFileChange(ACTION_MAP.CHANGE),
+    onDelete: handleFileChange(ACTION_MAP.DELETE),
+    ignored: '**/assets-manifest.json',
   });
-  const appId = res.data?.extension_id;
-  // QQQ1
-  await setThemeAppConfig({ appId });
-  return appId;
 }
 
 async function serve() {
   try {
-    let { appId, appName } = await getThemeAppConfig();
-    // if (!appId) {
-    //   appId = createThemeApp(appName);
-    // }
-    // await syncLocalFiles(appId);
+    const themeAppConfig = await getThemeAppConfig();
+    let extensionId = themeAppConfig.extensionId;
+    if (!extensionId) {
+      extensionId = await createThemeApp(themeAppConfig);
+    }
+    await syncLocalFiles(extensionId);
     const selectedThemeId = await usePrompt();
-    initWatcher(THEME_APP_PATH);
-    consoleTips(selectedThemeId, appId);
+    startWatcher(extensionId);
+    consoleTips(selectedThemeId, extensionId);
   } catch (error) {
     console.error(chalk.red(`[ERROR IN SERVE] ${error.message}`));
   }

package/lib/app/commands/versions.js

@@ -1,38 +1,46 @@
 const chalk = require('chalk');
 const ora = require('ora');
 const { getThemeAppConfig, renderTable } = require('../utils');
-const { getThemeAppVersionList } = require('../api/api');
+const { getThemeAppVersionList } = require('../api');
 
 /**
  * 控制台提示
  */
 function consoleTips(versionList) {
-  console.log(chalk.green('\n📜 Available Versions:'));
-  console.log(
-    renderTable(versionList, [
-      {
-        label: 'Version',
-        filed: 'version',
-        color: 'yellowBright'
-      },
-      {
-        label: 'Date',
-        filed: 'date',
-        color: 'blackBright'
-      },
-      {
-        label: 'Description',
-        filed: 'description',
-        color: 'whiteBright'
-      }
-    ])
-  );
+  if (versionList.length) {
+    console.log(chalk.green('\n📜 Available Versions:'));
+    console.log(
+      renderTable(versionList, [
+        {
+          label: 'Version',
+          filed: 'version',
+          color: 'yellowBright'
+        },
+        {
+          label: 'CreateTime',
+          filed: 'created_at',
+          color: 'blackBright'
+        },
+        {
+          label: 'Description',
+          filed: 'exts',
+          color: 'whiteBright'
+        }
+      ])
+    );
+  } else {
+    console.log(chalk.green('Your current theme extension does not have an available version.'));
+  }
 }
 
 async function versions() {
   try {
-    const { appId } = await getThemeAppConfig();
-    const versionList = await getThemeAppVersionList({ appId });
+    const { extensionId } = await getThemeAppConfig();
+    if(!extensionId) {
+      throw new Error('ExtensionId is empty, please use `serve` command first.')
+    }
+    const res = await getThemeAppVersionList(extensionId);
+    const versionList = res.data?.data || [];
     consoleTips(versionList);
   } catch (error) {
     console.error(chalk.red(`[ERROR IN VERSIONS] ${error.message}`));