diff --git a/packages/hap-compiler/src/style/validator.js b/packages/hap-compiler/src/style/validator.js
index 262cad8f..862b99f9 100755
--- a/packages/hap-compiler/src/style/validator.js
+++ b/packages/hap-compiler/src/style/validator.js
@@ -2656,7 +2656,24 @@ const validatorMap = {
   starSecondary: validator.url,
   // font
   fontSrc: validator.fontSrc,
-  fontFamily: validator.fontFamily
+  fontFamily: validator.fontFamily,
+  themeColor: makeEnumValidator([
+    'uxCardColorTheme',
+    'uxCardColorAccent',
+    'uxCardColorPrimary',
+    'uxCardColorSecondary',
+    'uxCardColorSecondaryVariant',
+    'uxCardColorTertiary',
+    'uxCardColorQuaternary',
+    'uxCardColorContainer',
+    'uxCardBackground',
+    'uxCardColorHue',
+    'uxCardColorHueSecondary',
+    'uxIconColorAccent',
+    'uxIconColorPrimary',
+    'uxIconColorSecondary',
+    'uxIconColorBackground'
+  ])
 }
 
 /**
@@ -2672,7 +2689,7 @@ function validate(name, value, options) {
   const validator = validatorMap[name]
 
   if (typeof validator === 'function') {
-    if (typeof value !== 'function') {
+    if (typeof value !== 'function' && value.indexOf('function') < 0) {
       if (mightReferlocalResource(name)) {
         result = validator(value, options)
       } else {
diff --git a/packages/hap-compiler/src/template/exp.js b/packages/hap-compiler/src/template/exp.js
index ee5ac312..c5c86e15 100644
--- a/packages/hap-compiler/src/template/exp.js
+++ b/packages/hap-compiler/src/template/exp.js
@@ -35,7 +35,7 @@ function trimhtml(str) {
  * @param isLite is lite card
  * @returns {*}
  */
-function transExpr(expContent, toFunc, isLite) {
+function transExpr(expContent, toFunc, isLite, isCard) {
   let ret
   const trimExpContent = expContent.trim()
   if (!textParser.isExpr(trimExpContent)) {
@@ -64,8 +64,12 @@ function transExpr(expContent, toFunc, isLite) {
     ret = ret.join(' + ')
     if (toFunc !== false) {
       try {
-        /* eslint-disable no-eval */
-        ret = eval('(function () {return ' + ret + '})')
+        if (isCard) {
+          ret = 'function () {return ' + ret + '}'
+        } else {
+          /* eslint-disable no-eval */
+          ret = eval('(function () {return ' + ret + '})')
+        }
         /* eslint-enable no-eval */
       } catch (err) {
         err.isExpressionError = true
diff --git a/packages/hap-compiler/src/template/index.js b/packages/hap-compiler/src/template/index.js
index 329db3e8..828e4238 100644
--- a/packages/hap-compiler/src/template/index.js
+++ b/packages/hap-compiler/src/template/index.js
@@ -362,7 +362,13 @@ function parse(source, options) {
     { treeAdapter: parse5.treeAdapters.default, locationInfo: true },
     options.filePath
   )
-  const output = { result: {}, log: [], depFiles: [], isLite: !!options.lite }
+  const output = {
+    result: {},
+    log: [],
+    depFiles: [],
+    isCard: !!options.card,
+    isLite: !!options.lite
+  }
 
   // 模板为空或解析失败
   /* istanbul ignore if */
diff --git a/packages/hap-compiler/src/template/model.js b/packages/hap-compiler/src/template/model.js
index 4ab6dd4a..e8cf07fc 100644
--- a/packages/hap-compiler/src/template/model.js
+++ b/packages/hap-compiler/src/template/model.js
@@ -102,9 +102,16 @@ function genCheckboxModel(node, attrName, value, output) {
       ${expValue} = checked ? ${trueValueBinding} : ${falseValueBinding}
     }`
 
-  addAttr(output.result, attrName, eval(`(function() {${attrCheckedCode}})`))
-  addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
-
+  const isCard = output.isCard
+  const isLite = output.isLite
+  if (isCard && !isLite) {
+    addAttr(output.result, attrName, `(function() {${attrCheckedCode}})`)
+    addAttr(output.result, attrName + 'Raw', value)
+    addHandler(output.result, 'change', `function(evt) {${eventChangeCode}}`)
+  } else {
+    addAttr(output.result, attrName, eval(`(function() {${attrCheckedCode}})`))
+    addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
+  }
   return {
     attr: { checked: attrCheckedCode },
     events: { change: eventChangeCode }
@@ -125,8 +132,16 @@ function genRadioModel(node, attrName, value, output) {
   const attrCheckedCode = `return ${exp(value, false)} === ${valueBinding}`
   const eventChangeCode = `${exp(value, false)} = ${valueBinding}`
 
-  addAttr(output.result, attrName, eval(`(function() {${attrCheckedCode}})`))
-  addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
+  const isCard = output.isCard
+  const isLite = output.isLite
+  if (isCard && !isLite) {
+    addAttr(output.result, attrName, `(function() {${attrCheckedCode}})`)
+    addAttr(output.result, attrName + 'Raw', value)
+    addHandler(output.result, 'change', `function(evt) {${eventChangeCode}}`)
+  } else {
+    addAttr(output.result, attrName, eval(`(function() {${attrCheckedCode}})`))
+    addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
+  }
 
   return {
     attr: { checked: attrCheckedCode },
@@ -140,11 +155,17 @@ function genRadioModel(node, attrName, value, output) {
  * @param {object} output 构建的输出结果
  */
 function genSelectModel(value, output) {
-  addHandler(
-    output.result,
-    'change',
-    eval(`(function(evt) { ${exp(value, false)} = evt.newValue})`)
-  )
+  const isCard = output.isCard
+  const isLite = output.isLite
+  if (isCard && !isLite) {
+    addHandler(output.result, 'change', `function(evt) { ${exp(value, false)} = evt.newValue}`)
+  } else {
+    addHandler(
+      output.result,
+      'change',
+      eval(`(function(evt) { ${exp(value, false)} = evt.newValue})`)
+    )
+  }
 }
 
 /**
@@ -156,10 +177,16 @@ function genSelectModel(value, output) {
  */
 function genDefaultModel(attrName, value, output) {
   const eventChangeCode = `${exp(value, false)} = evt.target.value`
-
-  addAttr(output.result, attrName, exp(value))
-  addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
-
+  const isCard = output.isCard
+  const isLite = output.isLite
+  if (isCard && !isLite) {
+    addAttr(output.result, attrName, exp(value, true, isLite, isCard))
+    addAttr(output.result, attrName + 'Raw', value)
+    addHandler(output.result, 'change', `function(evt) {${eventChangeCode}}`)
+  } else {
+    addAttr(output.result, attrName, exp(value))
+    addHandler(output.result, 'change', eval(`(function(evt) {${eventChangeCode}})`))
+  }
   return { events: { change: eventChangeCode } }
 }
 
@@ -176,12 +203,22 @@ function genComponentModel(node, attrName, value, output, locationInfo, options)
   // 自定义组件model指令绑定的属性，依然作为普通属性处理
   validator.checkAttr(attrName, value, output, node.tagName, locationInfo, options)
 
-  // 为自定义组件绑定update:${attrName}事件，接收组件内部emit的update:${attrName}事件
-  addHandler(
-    output.result,
-    `update:${attrName}`,
-    eval(`(function(evt) { ${exp(value, false)} = evt.detail})`)
-  )
+  const isCard = output.isCard
+  const isLite = output.isLite
+  if (isCard && !isLite) {
+    addHandler(
+      output.result,
+      `update:${attrName}`,
+      `function(evt) { ${exp(value, false)} = evt.detail}`
+    )
+  } else {
+    // 为自定义组件绑定update:${attrName}事件，接收组件内部emit的update:${attrName}事件
+    addHandler(
+      output.result,
+      `update:${attrName}`,
+      eval(`(function(evt) { ${exp(value, false)} = evt.detail})`)
+    )
+  }
 }
 
 /**
@@ -196,40 +233,76 @@ function genDynamicModel(node, attrName, value, output, expType) {
   const checkboxCode = genCheckboxModel(node, attrName, value, output)
   const radioCode = genRadioModel(node, attrName, value, output)
   const textCode = genDefaultModel(attrName, value, output)
+  const isCard = output.isCard
+  const isLite = output.isLite
+  if (isCard && !isLite) {
+    addAttr(output.result, attrName, exp(value, true, isLite, isCard))
+    addAttr(output.result, attrName + 'Raw', value)
 
-  addAttr(output.result, attrName, exp(value))
+    addAttr(
+      output.result,
+      'checked',
+      `(function() { 
+        if (${expType} === 'checkbox') {
+          ${checkboxCode.attr.checked}
+        } else if (${expType} === 'radio') {
+          ${radioCode.attr.checked}
+        } else {
+          return false
+        }
+      })
+    `
+    )
 
-  addAttr(
-    output.result,
-    'checked',
-    eval(`
-    (function() { 
-      if (${expType} === 'checkbox') {
-        ${checkboxCode.attr.checked}
-      } else if (${expType} === 'radio') {
-        ${radioCode.attr.checked}
-      } else {
-        return false
-      }
-    })
-  `)
-  )
+    addAttr(output.result, 'checkedRaw', value)
+    addHandler(
+      output.result,
+      'change',
+      `function(evt) {
+        if (${expType} === 'checkbox') {
+          ${checkboxCode.events.change}
+        } else if (${expType} === 'radio') {
+          ${radioCode.events.change}
+        } else {
+          ${textCode.events.change}
+        }
+      }`
+    )
+  } else {
+    addAttr(output.result, attrName, exp(value))
 
-  addHandler(
-    output.result,
-    'change',
-    eval(`
-    (function(evt) {
-      if (${expType} === 'checkbox') {
-        ${checkboxCode.events.change}
-      } else if (${expType} === 'radio') {
-        ${radioCode.events.change}
-      } else {
-        ${textCode.events.change}
-      }
-    })
-  `)
-  )
+    addAttr(
+      output.result,
+      'checked',
+      eval(`
+      (function() { 
+        if (${expType} === 'checkbox') {
+          ${checkboxCode.attr.checked}
+        } else if (${expType} === 'radio') {
+          ${radioCode.attr.checked}
+        } else {
+          return false
+        }
+      })
+    `)
+    )
+
+    addHandler(
+      output.result,
+      'change',
+      eval(`
+      (function(evt) {
+        if (${expType} === 'checkbox') {
+          ${checkboxCode.events.change}
+        } else if (${expType} === 'radio') {
+          ${radioCode.events.change}
+        } else {
+          ${textCode.events.change}
+        }
+      })
+    `)
+    )
+  }
 }
 
 /**
diff --git a/packages/hap-compiler/src/template/validator.js b/packages/hap-compiler/src/template/validator.js
index 4c747dc1..1b540f54 100644
--- a/packages/hap-compiler/src/template/validator.js
+++ b/packages/hap-compiler/src/template/validator.js
@@ -1420,7 +1420,12 @@ function checkTagName(node, output, options = {}) {
  */
 function checkId(id, output) {
   if (id) {
-    output.result.id = exp.isExpr(id) ? exp(id, true, output.isLite) : id
+    const isLite = output.isLite
+    const isCard = output.isCard
+    output.result.id = exp.isExpr(id) ? exp(id, true, isLite, isCard) : id
+    if (isCard && !isLite) {
+      output.result.idRaw = id
+    }
   }
 }
 
@@ -1456,7 +1461,8 @@ function checkClass(className, output) {
   let classList = []
 
   className = className.trim()
-
+  const isLite = output.isLite
+  const isCard = output.isCard
   if (className) {
     let start = 0
     let end = 0
@@ -1477,7 +1483,6 @@ function checkClass(className, output) {
     }
     segs.push(className.slice(start)) // trailing static classes
 
-    const isLite = output.isLite
     classList = segs.reduce((list, seg) => {
       if (exp.isExpr(seg)) {
         hasBinding = true
@@ -1500,14 +1505,19 @@ function checkClass(className, output) {
         err.expression = className
         throw err
       }
-      output.result.class = className
       output.result.classList = classList
     } else if (hasBinding) {
-      const code = '(function () {return [' + classList.join(', ') + ']})'
       try {
-        /* eslint-disable no-eval */
-        output.result.classList = eval(code)
-        /* eslint-enable no-eval */
+        let code = ''
+        if (isCard) {
+          code = 'function () {return [' + classList.join(', ') + ']}'
+          output.result.classList = code
+        } else {
+          code = '(function () {return [' + classList.join(', ') + ']})'
+          /* eslint-disable no-eval */
+          output.result.classList = eval(code)
+          /* eslint-enable no-eval */
+        }
       } catch (err) {
         err.isExpressionError = true
         err.expression = className
@@ -1520,6 +1530,12 @@ function checkClass(className, output) {
       )
     }
   }
+  if (isCard) {
+    output.result.class = className
+    if (!isLite) {
+      output.result.classListRaw = className
+    }
+  }
 }
 
 /**
@@ -1532,9 +1548,11 @@ function checkClass(className, output) {
  */
 function checkStyle(cssText, output, locationInfo, options) {
   let style = {}
+  let styleRaw = {}
   const log = output.log
   if (cssText) {
     const isLite = output.isLite
+    const isCard = output.isCard
     if (exp.singleExpr(cssText)) {
       // 检测是否嵌套{{}}
       const incText = exp.removeExprffix(cssText)
@@ -1545,9 +1563,12 @@ function checkStyle(cssText, output, locationInfo, options) {
           reason: 'ERROR: style 属性不能嵌套多层{{}}'
         })
       } else {
-        style = exp(cssText, true, isLite)
+        style = exp(cssText, true, isLite, isCard)
       }
       output.result.style = style
+      if (isCard && !isLite) {
+        output.result.styleRaw = cssText
+      }
       return
     }
     // 如果是 a: {{}}; b: {{}};, 则分解处理
@@ -1563,13 +1584,18 @@ function checkStyle(cssText, output, locationInfo, options) {
         k = pair[0].trim()
         k = hyphenedToCamelCase(k)
         v = pair[1].trim()
-        v = exp(v, true, isLite) // 处理值表达式
+
+        const valueRaw = v
+        v = exp(v, true, isLite, isCard) // 处理值表达式
         vResult = styler.validateDelaration(k, v, options)
         v = vResult.value
         v.forEach((t) => {
           // 如果校验成功，则保存转换后的属性值
           if (isValidValue(t.v) || typeof t.v === 'function') {
             style[t.n] = t.v
+            if (isCard && !isLite) {
+              styleRaw[t.n] = valueRaw
+            }
           }
         })
         if (vResult.log) {
@@ -1590,6 +1616,9 @@ function checkStyle(cssText, output, locationInfo, options) {
       }
     }
     output.result.style = style
+    if (isCard && !isLite) {
+      output.result.styleRaw = styleRaw
+    }
   }
 }
 
@@ -1604,9 +1633,14 @@ function checkIs(value, output, locationInfo) {
   if (value) {
     // 如果没有，补充上{{}}
     value = exp.addExprffix(value)
+    const isLite = output.isLite
+    const isCard = output.isCard
 
     // 将表达式转换为function
-    output.result.is = exp(value, true, output.isLite)
+    output.result.is = exp(value, true, isLite, isCard)
+    if (isCard && !isLite) {
+      output.result.isRaw = value
+    }
   } else {
     log.push({
       line: locationInfo.line || 1,
@@ -1628,6 +1662,7 @@ function checkIf(value, output, not, locationInfo, conditionList) {
     // 如果没有，补充上{{}}
     value = exp.addExprffix(value)
     const isLite = output.isLite
+    const isCard = output.isCard
     if (not) {
       value = '{{' + buildConditionExp(conditionList) + '}}'
     } else {
@@ -1636,7 +1671,10 @@ function checkIf(value, output, not, locationInfo, conditionList) {
       conditionList.push(`${value.substr(2, value.length - 4)}`)
     }
     // 将表达式转换为function
-    output.result.shown = isLite ? value : exp(value, true)
+    output.result.shown = isLite ? value : exp(value, true, isLite, isCard)
+    if (isCard && !isLite) {
+      output.result.shownRaw = value
+    }
   } else {
     if (!not) {
       log.push({
@@ -1674,11 +1712,15 @@ function checkElif(value, cond, output, locationInfo, conditionList) {
     value = exp.addExprffix(value)
     cond = exp.addExprffix(cond)
     const isLite = output.isLite
+    const isCard = output.isCard
     newcond =
       '{{(' + value.substr(2, value.length - 4) + ') && ' + buildConditionExp(conditionList) + '}}'
 
     // 将表达式转换为function
-    output.result.shown = isLite ? newcond : exp(newcond)
+    output.result.shown = isLite ? newcond : exp(newcond, true, isLite, isCard)
+    if (isCard && !isLite) {
+      output.result.shownRaw = newcond
+    }
     conditionList.push(`${value.substr(2, value.length - 4)}`)
   } else {
     log.push({
@@ -1719,12 +1761,15 @@ function checkFor(value, output, locationInfo) {
     value = '{{' + value + '}}'
 
     const isLite = output.isLite
-    let repeat
+    const isCard = output.isCard
+    let repeat, repeatRaw
     if (!key && !val) {
-      repeat = exp(value, true, isLite)
+      repeat = exp(value, true, isLite, isCard)
+      repeatRaw = value
     } else {
       // 如果指定key,value
-      repeat = { exp: exp(value, true, isLite) }
+      repeat = { exp: exp(value, true, isLite, isCard) }
+      repeatRaw = { expRaw: value }
       if (key) {
         repeat.key = key
       }
@@ -1733,6 +1778,9 @@ function checkFor(value, output, locationInfo) {
       }
     }
     output.result.repeat = repeat
+    if (isCard && !isLite) {
+      output.result.repeatRaw = repeatRaw
+    }
   } else {
     log.push({
       line: locationInfo.line || 1,
@@ -1759,6 +1807,12 @@ function checkEvent(name, value, output) {
     // 如果表达式形式为XXX(xxxx)
     const paramsMatch = value.match(/(.*)\((.*)\)/)
     if (paramsMatch) {
+      if (output.isLite) {
+        const err = new Error('轻卡不支持带参数的事件')
+        err.isExpressionError = true
+        err.expression = value
+        throw err
+      }
       const funcName = paramsMatch[1]
       let params = paramsMatch[2]
       // 解析','分隔的参数
@@ -1775,11 +1829,15 @@ function checkEvent(name, value, output) {
       value = '{{' + funcName + '(' + params.join(',') + ')}}'
       try {
         // 将事件转换为函数对象
-        /* eslint-disable no-eval */
-        value = output.isLite
-          ? value
-          : eval('(function (evt) { return ' + exp(value, false).replace('this.evt', 'evt') + '})')
-        /* eslint-enable no-eval */
+        if (output.isCard && !output.isLite) {
+          value = 'function (evt) { return ' + exp(value, false).replace('this.evt', 'evt') + '}'
+        } else {
+          /* eslint-disable no-eval */
+          value = eval(
+            '(function (evt) { return ' + exp(value, false).replace('this.evt', 'evt') + '})'
+          )
+          /* eslint-enable no-eval */
+        }
       } catch (err) {
         err.isExpressionError = true
         err.expression = originValue
@@ -1805,12 +1863,24 @@ function checkCustomDirective(name, value, output, node) {
     colorconsole.warn(`\`${node.tagName}\` 组件自定义指令名称不能为空`)
     return false
   }
-
+  const isCard = output.isCard
+  const isLite = output.isLite
   output.result.directives = output.result.directives || []
-  output.result.directives.push({
-    name: dirName,
-    value: exp.isExpr(value) ? exp(value, true, output.isLite) : value
-  })
+  if (isCard && !isLite) {
+    // 补全绑定值的双花括号，如：dir:指令名称="data"补全为dir:指令名称="{{data}}"
+    value = exp.addExprffix(value)
+
+    output.result.directives.push({
+      name: dirName,
+      value: exp.isExpr(value) ? exp(value, true, output.isLite, output.isCard) : value,
+      valueRaw: value
+    })
+  } else {
+    output.result.directives.push({
+      name: dirName,
+      value: exp.isExpr(value) ? exp(value, true, output.isLite, output.isCard) : value
+    })
+  }
 }
 
 /**
@@ -1840,8 +1910,13 @@ function checkAttr(name, value, output, tagName, locationInfo, options) {
       value = resolvePath(value, options.filePath)
       output.depFiles.push(value)
     }
+    const isLite = output.isLite
+    const isCard = output.isCard
     output.result.attr = output.result.attr || {}
-    output.result.attr[hyphenedToCamelCase(name)] = exp(value, true, output.isLite)
+    output.result.attr[hyphenedToCamelCase(name)] = exp(value, true, isLite, isCard)
+    if (isCard && !isLite) {
+      output.result.attr[hyphenedToCamelCase(name) + 'Raw'] = value
+    }
     if (name === 'value' && tagName === 'text') {
       output.log.push({
         line: locationInfo.line,
@@ -1982,6 +2057,9 @@ function hasIfOrFor(nodes) {
   return flag
 }
 
+/**
+ * 检查class数组是否为常量和变量混合的方式，如 "clazz1 {{myClass}}"
+ */
 function isValidClassArray(arr) {
   const filterArr = arr.filter((clazz) => clazz.length > 0)
 
diff --git a/packages/hap-dsl-xvm/src/loaders/style-loader.js b/packages/hap-dsl-xvm/src/loaders/style-loader.js
index 9adf42db..ae12c6d8 100644
--- a/packages/hap-dsl-xvm/src/loaders/style-loader.js
+++ b/packages/hap-dsl-xvm/src/loaders/style-loader.js
@@ -30,6 +30,7 @@ const componentId = (() => {
 
 export default function styleLoader(code) {
   const self = this
+  const options = loaderUtils.parseQuery(this.resourceQuery)
   const loaderQuery = loaderUtils.parseQuery(this.query)
   const suppresslogs = !!getWebpackOptions(this).suppresslogs
   const resourcePath = this.resourcePath // 当前文件绝对路径
@@ -40,7 +41,7 @@ export default function styleLoader(code) {
     query: loaderQuery
   })
 
-  if (compileOptionsObject.enableExtractCss) {
+  if (compileOptionsObject.enableExtractCss && !options.card) {
     componentId.add(resourcePath)
     if (jsonStyle) {
       jsonStyle[`@info`] = {
diff --git a/packages/hap-dsl-xvm/src/loaders/ux-fragment-utils.js b/packages/hap-dsl-xvm/src/loaders/ux-fragment-utils.js
index 0d95ce15..e6486996 100644
--- a/packages/hap-dsl-xvm/src/loaders/ux-fragment-utils.js
+++ b/packages/hap-dsl-xvm/src/loaders/ux-fragment-utils.js
@@ -51,7 +51,7 @@ const defaultLoaders = {
  * @param uxType
  * @returns {*}
  */
-function makeLoaderString(type, config, uxType) {
+function makeLoaderString(type, config, isCard, uxType) {
   config = config || {}
   let loaders
 
@@ -146,10 +146,11 @@ function makeLoaderString(type, config, uxType) {
       }
     ]
 
-    compileOptionsObject.enableExtractCss &&
+    if (compileOptionsObject.enableExtractCss && !isCard) {
       loaders.unshift({
         name: defaultLoaders['extract-css']
       })
+    }
 
     let lang = config.lang
     if (lang && lang !== 'css') {
@@ -263,12 +264,14 @@ function makeLoaderString(type, config, uxType) {
  * @param $loader
  * @param imports - 外部导入的组件列表
  * @param importNames - 外部导入的组件名列表
- * @param {number} lite 1:轻卡; 0:普通卡
+ * @param {number} card 1:卡片
+ * @param {number} lite 1:轻卡
  * @returns {string}
  */
-function processImportFrag($loader, imports, importNames, lite) {
+function processImportFrag($loader, imports, importNames, card, lite) {
   let retStr = ''
   if (imports.length) {
+    const cardParam = card ? `&card=${card}` : ''
     const liteParam = lite ? `&lite=${lite}` : ''
     for (let i = 0; i < imports.length; i++) {
       const imp = imports[i]
@@ -305,8 +308,8 @@ function processImportFrag($loader, imports, importNames, lite) {
       })
       let reqStr = makeRequireString(
         $loader,
-        makeLoaderString(FRAG_TYPE.IMPORT),
-        `${importSrc}?uxType=${ENTRY_TYPE.COMP}&name=${importName}${liteParam}`
+        makeLoaderString(FRAG_TYPE.IMPORT, null, card),
+        `${importSrc}?uxType=${ENTRY_TYPE.COMP}&name=${importName}${cardParam}${liteParam}`
       )
 
       if (compileOptionsObject.stats) {
@@ -326,9 +329,10 @@ function processImportFrag($loader, imports, importNames, lite) {
  * @param templates
  * @param uxType
  * @param importNames
- * @param {number} lite 1:轻卡; 0:普通卡
+ * @param {number} card 1:卡片
+ * @param {number} lite 1:轻卡
  */
-function processTemplateFrag($loader, templates, uxType, importNames, lite) {
+function processTemplateFrag($loader, templates, uxType, importNames, card, lite) {
   let retStr = '{}'
   if (!templates.length) {
     $loader.emitError(new Error('需要模板 <template> 片段'))
@@ -343,15 +347,21 @@ function processTemplateFrag($loader, templates, uxType, importNames, lite) {
       src = fragAttrsSrc
     }
 
+    const cardParam = card ? `&card=${card}` : ''
     const liteParam = lite ? `&lite=${lite}` : ''
+    const pathParam = card ? `&uxPath=${src}` : ''
     // 解析成类似url中key[]=xxx 的形式，便于loader-utils解析
     importNames = importNames.map((item) => 'importNames[]=' + item)
     retStr = makeRequireString(
       $loader,
-      makeLoaderString(FRAG_TYPE.TEMPLATE, {
-        alone: !!fragAttrsSrc
-      }),
-      `${src}?uxType=${uxType}&${importNames.join(',')}${liteParam}`
+      makeLoaderString(
+        FRAG_TYPE.TEMPLATE,
+        {
+          alone: !!fragAttrsSrc
+        },
+        card
+      ),
+      `${src}?uxType=${uxType}&${importNames.join(',')}${cardParam}${liteParam}${pathParam}`
     )
   }
   return retStr
@@ -362,9 +372,10 @@ function processTemplateFrag($loader, templates, uxType, importNames, lite) {
  * @param $loader
  * @param styles
  * @param uxType
- * @param {number} lite 1:轻卡; 0:普通卡
+ * @param {number} card 1:卡片
+ * @param {number} lite 1:轻卡
  */
-function processStyleFrag($loader, styles, uxType, lite) {
+function processStyleFrag($loader, styles, uxType, card, lite) {
   let code = '{}'
   if (styles.length) {
     // 有且仅有一个<style>片段
@@ -380,14 +391,20 @@ function processStyleFrag($loader, styles, uxType, lite) {
     print({
       style: src
     })
+    const cardParam = card ? `&card=${card}` : ''
     const liteParam = lite ? `&lite=${lite}` : ''
+    const pathParam = card ? `&uxPath=${src}` : ''
     code = makeRequireString(
       $loader,
-      makeLoaderString(FRAG_TYPE.STYLE, {
-        alone: !!fragAttrsSrc,
-        lang: fragAttrsLang
-      }),
-      `${src}?uxType=${uxType}${liteParam}`
+      makeLoaderString(
+        FRAG_TYPE.STYLE,
+        {
+          alone: !!fragAttrsSrc,
+          lang: fragAttrsLang
+        },
+        card
+      ),
+      `${src}?uxType=${uxType}${cardParam}${liteParam}${pathParam}`
     )
   }
   return code
@@ -400,7 +417,7 @@ function processStyleFrag($loader, styles, uxType, lite) {
  * @param uxType
  * @returns {string}
  */
-function processScriptFrag($loader, scripts, uxType) {
+function processScriptFrag($loader, scripts, uxType, card) {
   let code = 'null'
   if (scripts.length) {
     // 有且仅有一个<script>节点
@@ -419,6 +436,7 @@ function processScriptFrag($loader, scripts, uxType) {
           alone: !!fragAttrsSrc,
           path: $loader.resourcePath
         },
+        card,
         uxType
       ),
       `${src}?uxType=${uxType}`
@@ -447,7 +465,7 @@ function processDataFrag($loader, datas, uxType) {
     }
     code = makeRequireString(
       $loader,
-      makeLoaderString(FRAG_TYPE.DATA, {}, uxType),
+      makeLoaderString(FRAG_TYPE.DATA, {}, true, uxType),
       `${src}?index=0&lite=1`
     )
   }
@@ -474,7 +492,7 @@ function processActionFrag($loader, datas, uxType) {
     }
     code = makeRequireString(
       $loader,
-      makeLoaderString(FRAG_TYPE.ACTIONS, {}, uxType),
+      makeLoaderString(FRAG_TYPE.ACTIONS, {}, true, uxType),
       `${src}?index=0&lite=1`
     )
   }
@@ -501,7 +519,7 @@ function processPropsFrag($loader, datas, uxType) {
     }
     code = makeRequireString(
       $loader,
-      makeLoaderString(FRAG_TYPE.PROPS, {}, uxType),
+      makeLoaderString(FRAG_TYPE.PROPS, {}, true, uxType),
       `${src}?index=0&lite=1`
     )
   }
diff --git a/packages/hap-dsl-xvm/src/loaders/ux-loader.js b/packages/hap-dsl-xvm/src/loaders/ux-loader.js
index b4214c3a..ba7d9b8f 100644
--- a/packages/hap-dsl-xvm/src/loaders/ux-loader.js
+++ b/packages/hap-dsl-xvm/src/loaders/ux-loader.js
@@ -31,12 +31,12 @@ const { validator } = templater
  * @param lite 1: 轻卡; 0: 普通卡
  * @return {String}
  */
-function assemble($loader, frags, name, uxType, lite) {
+function assemble($loader, frags, name, uxType, card, lite) {
   const isUseTreeShaking = !!globalConfig.useTreeShaking
   // 外部导入的组件列表
   const importNames = []
   // 处理导入的组件
-  const importFrag = processImportFrag($loader, frags.import, importNames, lite)
+  const importFrag = processImportFrag($loader, frags.import, importNames, card, lite)
 
   let moduleExports = `     $app_script$($app_module$, $app_exports$, $app_require$)
         if ($app_exports$.__esModule && $app_exports$.default) {
@@ -56,7 +56,7 @@ function assemble($loader, frags, name, uxType, lite) {
   let content = `${importFrag}\n`
   if (!lite) {
     // process script for JS card
-    content += `var $app_script$ = ${processScriptFrag($loader, frags.script, uxType)}\n`
+    content += `var $app_script$ = ${processScriptFrag($loader, frags.script, uxType, card)}\n`
   }
   content +=
     `$app_define$('@app-component/${name}', [], function($app_require$, $app_exports$, $app_module$) {\n` +
@@ -66,6 +66,7 @@ function assemble($loader, frags, name, uxType, lite) {
       frags.template,
       uxType,
       importNames,
+      card,
       lite
     )}\n`
   // $app_define$ function content
@@ -74,6 +75,7 @@ function assemble($loader, frags, name, uxType, lite) {
       $loader,
       frags.style,
       uxType,
+      card,
       lite
     )}\n`
   }
@@ -137,6 +139,7 @@ export default function uxLoader(source) {
   // 文件类型
   const uxType = resourceQuery.uxType
   // lite card
+  const card = resourceQuery.card
   const lite = resourceQuery.lite
 
   // 使用原有文件名（不包含扩展名）
@@ -158,7 +161,7 @@ export default function uxLoader(source) {
 
   parseImportList(this, frags.import)
     .then(() => {
-      return assemble(this, frags, name, uxType, lite)
+      return assemble(this, frags, name, uxType, card, lite)
     })
     .then((result) => {
       callback(null, result)
diff --git a/packages/hap-dsl-xvm/test/unit/ux/__snapshots__/component.test.js.snap b/packages/hap-dsl-xvm/test/unit/ux/__snapshots__/component.test.js.snap
index 95ac40b7..97a7e798 100644
--- a/packages/hap-dsl-xvm/test/unit/ux/__snapshots__/component.test.js.snap
+++ b/packages/hap-dsl-xvm/test/unit/ux/__snapshots__/component.test.js.snap
@@ -4951,24 +4951,24 @@ exports[`Component 编译测试 ux components: ../../../lib/loaders/template-loa
                 \\"type\\": function () {return this.dynamicType},
                 \\"value\\": \\"test dynamic type\\",
                 \\"checked\\": function() { 
-      if (this.dynamicType === 'checkbox') {
-        
+        if (this.dynamicType === 'checkbox') {
+          
     if (Array.isArray(this.dynamicValue)) {
       return this.dynamicValue.indexOf(\\"test dynamic type\\") > -1
     } else {
       return this.dynamicValue
     }
-      } else if (this.dynamicType === 'radio') {
-        return this.dynamicValue === \\"test dynamic type\\"
-      } else {
-        return false
+        } else if (this.dynamicType === 'radio') {
+          return this.dynamicValue === \\"test dynamic type\\"
+        } else {
+          return false
+        }
       }
-    }
               },
               \\"events\\": {
                 \\"change\\": function(evt) {
-      if (this.dynamicType === 'checkbox') {
-        
+        if (this.dynamicType === 'checkbox') {
+          
     const checked = evt.target.checked;
     if (Array.isArray(this.dynamicValue)) {
       const index = this.dynamicValue.indexOf(\\"test dynamic type\\")
@@ -4980,12 +4980,12 @@ exports[`Component 编译测试 ux components: ../../../lib/loaders/template-loa
     } else {
       this.dynamicValue = checked ? true : false
     }
-      } else if (this.dynamicType === 'radio') {
-        this.dynamicValue = \\"test dynamic type\\"
-      } else {
-        this.dynamicValue = evt.target.value
+        } else if (this.dynamicType === 'radio') {
+          this.dynamicValue = \\"test dynamic type\\"
+        } else {
+          this.dynamicValue = evt.target.value
+        }
       }
-    }
               }
             },
             {
diff --git a/packages/hap-packager/src/common/shared.js b/packages/hap-packager/src/common/shared.js
index 786f0c84..7e17e79c 100644
--- a/packages/hap-packager/src/common/shared.js
+++ b/packages/hap-packager/src/common/shared.js
@@ -228,6 +228,11 @@ function populateWidgetFields(widgetsObj) {
         `WARN: manifest.json 文件中 widgets 字段 ${key} 缺少 type 属性，默认设置为 js`
       )
     }
+    if (widgetsObj[key].type === 'js' && widgetsObj[key].minCardPlatformVersion) {
+      // 写了 minCardPlatformVersion 字段
+      // 赋值给 minPlatformVersion（兼容旧引擎），引导引擎升级
+      widgetsObj[key].minPlatformVersion = widgetsObj[key].minCardPlatformVersion
+    }
   })
 }
 
diff --git a/packages/hap-packager/src/common/utils.js b/packages/hap-packager/src/common/utils.js
index fcfe49c2..fd10a5a7 100644
--- a/packages/hap-packager/src/common/utils.js
+++ b/packages/hap-packager/src/common/utils.js
@@ -5,11 +5,8 @@
 
 import fs from 'fs'
 import path from 'path'
-import crypto from 'crypto'
 import { sync as resolveSync } from 'resolve'
 
-import { colorconsole } from '@hap-toolkit/shared-utils'
-
 /**
  * 获取要使用 babel.config.js 的路径
  * @param {string} cwd - 项目地址
@@ -132,17 +129,6 @@ export function isPlainObject(obj) {
   return toString.call(obj) === OBJECT_STRING
 }
 
-/**
- * 获取 SHA256 摘要
- * @param {Buffer} buffer - buffer
- * @string {String<hex-string>} - hash 值
- */
-export function calcDataDigest(buffer) {
-  const hash = crypto.createHash('SHA256')
-  hash.update(buffer)
-  return hash.digest()
-}
-
 /**
  * 获取入口页面所需的骨架屏文件
  * @param {Object} skeletonConf - 骨架屏配置
@@ -242,7 +228,7 @@ export function getLastLoaderPath(reqPath) {
   }
   reqPath = reqPath.replace(/\\/g, '/')
   const reqArr = reqPath.split('!')
-  let lastLoader = reqArr[0] // inline loader reversed by '!'
+  let lastLoader = reqArr.find((str) => str !== '') // inline loader reversed by '!'
   if (lastLoader && lastLoader.indexOf('?') > 0) {
     // remove params if exist
     lastLoader = lastLoader.split('?')[0]
diff --git a/packages/hap-packager/src/plugins/lite-card-plugin.js b/packages/hap-packager/src/plugins/card-plugin.js
similarity index 68%
rename from packages/hap-packager/src/plugins/lite-card-plugin.js
rename to packages/hap-packager/src/plugins/card-plugin.js
index 2706a00d..88ac32bf 100644
--- a/packages/hap-packager/src/plugins/lite-card-plugin.js
+++ b/packages/hap-packager/src/plugins/card-plugin.js
@@ -5,14 +5,16 @@
 
 import Compilation from 'webpack/lib/Compilation'
 import path from 'path'
-import { getLastLoaderPath, calcDataDigest } from '../common/utils'
+import { getLastLoaderPath } from '../common/utils'
+import { getStyleObjectId } from '@hap-toolkit/shared-utils'
+
 import {
   LOADER_INFO_LIST,
   LOADER_PATH_UX,
   LOADER_PATH_STYLE,
   LOADER_PATH_TEMPLATE
 } from '../common/constant'
-import { postHandleLiteCardRes } from '../post-handler'
+import { postHandleLiteCardRes, postHandleJSCardRes } from '../post-handler'
 
 const SUFFIX_UX = '.ux'
 const CARD_ENTRY = '#entry'
@@ -22,21 +24,21 @@ const STYLE_OBJECT_ID = 'styleObjectId'
 /**
  * Generate build output for light card.
  */
-class LiteCardPlugin {
+class CardPlugin {
   constructor(options = {}) {
     this.options = options || {}
   }
 
   apply(compiler) {
     let ConcatSource = compiler.webpack.sources.ConcatSource
-    compiler.hooks.compilation.tap('LiteCardPlugin', (compilation) => {
+    compiler.hooks.compilation.tap('CardPlugin', (compilation) => {
       compilation.hooks.processAssets.tap(
         {
-          name: 'LiteCardPlugin',
+          name: 'CardPlugin',
           stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
         },
         () => {
-          let { pathSrc } = this.options
+          let { pathSrc, isCardMinVersion } = this.options
           pathSrc = pathSrc.replace(/\\/g, '/')
           const moduleGraph = compilation.moduleGraph
           for (const chunk of compilation.chunks) {
@@ -45,26 +47,60 @@ class LiteCardPlugin {
               continue
             }
             const { rawRequest: entryRawRequest, request } = entryModule
-            if (this.isLightCard(entryRawRequest)) {
-              const { templateFileName, cssFileName, bundleFilePath } = this.getLightCardBuildPath(
+            if (this.isCard(entryRawRequest)) {
+              const { templateFileName, cssFileName, bundleFilePath } = this.getCardBuildPath(
                 request,
                 pathSrc
               )
-              const liteCardRes = {
+              let templateRes = {
                 [CARD_ENTRY]: {}
               }
               const styleRes = {}
               this.findOutgoingModules(
                 moduleGraph,
                 entryModule,
-                liteCardRes,
-                liteCardRes,
+                templateRes,
+                templateRes,
                 styleRes,
                 pathSrc,
                 bundleFilePath
               )
-              const templateJsonStr = postHandleLiteCardRes(liteCardRes)
+
+              if (this.isLiteCard(entryRawRequest)) {
+                templateRes = postHandleLiteCardRes(templateRes)
+              } else if (isCardMinVersion) {
+                // 快应用 2.0 标准的 JS 卡，输出 .template.json 和 .css.json
+                templateRes = postHandleJSCardRes(templateRes)
+              } else {
+                // 非快应用 2.0 标准的 JS 卡，不输出 .template.json 和 .css.json
+                continue
+              }
+
+              // 用于修改 template 的 key 的 stringify 的顺序，type 放第一个，children 放最后一个
+              let templateKeys = []
+              recordKeys(templateRes, templateKeys)
+
+              templateKeys = [...new Set(templateKeys.sort())]
+                .filter(
+                  (key) =>
+                    key !== 'children' && key !== 'type' && key !== 'template' && key !== 'data'
+                )
+                .concat('children')
+              templateKeys.unshift('type', 'template', 'data')
+
+              // 自定义组件 template 抽取成独立 JSON —— 卡片不采用该方式
+              // Object.keys(templateRes).forEach((key) => {
+              //   const res = templateRes[key]
+              //   const fileName = key === CARD_ENTRY ? templateFileName : `${key}.template.json`
+              //   const templateJsonStr = JSON.stringify(res, templateKeys)
+              //   compilation.assets[fileName] = new ConcatSource(templateJsonStr)
+              // })
+
+              // 处理 template
+              const templateJsonStr = JSON.stringify(templateRes, templateKeys)
               compilation.assets[templateFileName] = new ConcatSource(templateJsonStr)
+
+              // 处理 css
               compilation.assets[cssFileName] = new ConcatSource(JSON.stringify(styleRes))
             }
           }
@@ -74,11 +110,11 @@ class LiteCardPlugin {
   }
 
   /**
-   * Generate bundle JSON result for lite card
+   * Generate bundle JSON result for card
    * @param {*} moduleGraph webpack moduleGraph
    * @param {*} currModule current module
    * @param {*} currCompRes JSON result for current ux component
-   * @param {*} liteCardRes JSON result for lite card
+   * @param {*} templateCardRes JSON result for card
    * @param {*} styleRes JSON result for style
    * @param {*} pathSrc src path for current quickapp project
    * @param {*} compPath card ux component path
@@ -87,7 +123,7 @@ class LiteCardPlugin {
     moduleGraph,
     currModule,
     currCompRes,
-    liteCardRes,
+    templateCardRes,
     styleRes,
     pathSrc,
     compPath
@@ -97,7 +133,7 @@ class LiteCardPlugin {
     if (moduleGraphConnection !== undefined) {
       for (const m of moduleGraphConnection.keys()) {
         const { rawRequest, _source, request } = m
-        if (!rawRequest) {
+        if (!this.isValidJsonModule(rawRequest)) {
           continue
         }
         const { _valueAsString, _valueAsBuffer } = _source || {}
@@ -124,7 +160,7 @@ class LiteCardPlugin {
         const isCardRes = !!currCompRes['#entry']
         if (type === LOADER_PATH_UX.type) {
           const { compName, relativeSrcPath } = this.getComponentName(reqPath, pathSrc)
-          // console.log('LiteCardPlugin >>> compName, reqPath, relativeSrcPath:', compName, reqPath, relativeSrcPath)
+          // console.log('CardPlugin >>> compName, reqPath, relativeSrcPath:', compName, reqPath, relativeSrcPath)
           if (!compName) {
             throw new Error(`Build failed, invalid component name, path: ${reqPath}`)
           }
@@ -142,18 +178,18 @@ class LiteCardPlugin {
             }
             currCompRes[TYPE_IMPORT][compName] = relativeSrcPath
           }
-          if (liteCardRes[relativeSrcPath]) {
+          if (templateCardRes[relativeSrcPath]) {
             // console.log(`'Component ${compName} already resolved, relativeSrcPath=${relativeSrcPath}, uxPath=${uxPath}`)
             continue
           }
 
           const compRes = {}
-          liteCardRes[relativeSrcPath] = compRes
+          templateCardRes[relativeSrcPath] = compRes
           this.findOutgoingModules(
             moduleGraph,
             m,
             compRes,
-            liteCardRes,
+            templateCardRes,
             styleRes,
             pathSrc,
             relativeSrcPath
@@ -219,18 +255,41 @@ class LiteCardPlugin {
     return relativeSrcPathStr
   }
 
-  // chunk.entryModule.rawRequest: ./src/cards/card/index.ux?uxType=card&lite=1
-  isLightCard(requestPath) {
+  // chunk.entryModule.rawRequest: ./src/cards/card/index.ux?uxType=card&card=1&lite=1
+  isCard(requestPath) {
+    if (requestPath && requestPath.lastIndexOf('?') > 0) {
+      const pathParamIndex = requestPath.lastIndexOf('?')
+      const paramStr = requestPath.substring(pathParamIndex + 1)
+      const paramArr = paramStr.split('&')
+      return paramArr && paramArr.indexOf('card=1') >= 0 && paramArr.indexOf('uxType=card') >= 0
+    }
+    return false
+  }
+
+  // chunk.entryModule.rawRequest: ./src/cards/card/index.ux?uxType=card&card=1&lite=1
+  isLiteCard(requestPath) {
     if (requestPath && requestPath.lastIndexOf('?') > 0) {
       const pathParamIndex = requestPath.lastIndexOf('?')
       const paramStr = requestPath.substring(pathParamIndex + 1)
       const paramArr = paramStr.split('&')
-      return paramArr && paramArr.indexOf('lite=1') >= 0 && paramArr.indexOf('uxType=card') >= 0
+      return (
+        paramArr &&
+        paramArr.indexOf('card=1') >= 0 &&
+        paramArr.indexOf('lite=1') >= 0 &&
+        paramArr.indexOf('uxType=card') >= 0
+      )
     }
     return false
   }
 
-  getLightCardBuildPath(requestPath, pathSrc) {
+  isValidJsonModule(request) {
+    const pathParamIndex = request.indexOf('?')
+    const paramStr = request.substring(pathParamIndex + 1)
+    const paramArr = paramStr.split('&')
+    return paramArr && !paramArr.some((ele) => ele.indexOf('type=script') >= 0)
+  }
+
+  getCardBuildPath(requestPath, pathSrc) {
     if (!requestPath || !pathSrc) {
       throw new Error(`Invalid request path or src path:\n${requestPath}\n${pathSrc}`)
     }
@@ -252,7 +311,7 @@ class LiteCardPlugin {
       uxRelativePath.length - SUFFIX_UX.length
     )}`
     return {
-      bundleFilePath,
+      bundleFilePath: bundleFilePath.replace(/\\/g, '/'),
       templateFileName: `${bundleFilePath}.template.json`,
       cssFileName: `${bundleFilePath}.css.json`
     }
@@ -270,30 +329,18 @@ class LiteCardPlugin {
   }
 }
 
-const componentIdMap = new Map()
-const componentPathMap = new Map()
-function getStyleObjectId(compPath) {
-  if (!componentPathMap.get(compPath)) {
-    const compId = getHash(compPath)
-    componentIdMap.set(compId, compPath)
-    componentPathMap.set(compPath, compId)
-  }
-  return componentPathMap.get(compPath)
-}
+function recordKeys(liteCardRes, templateKeys) {
+  const helper = function (obj) {
+    if (!obj || typeof obj !== 'object') return
 
-function getHash(compPath) {
-  const digest = calcDataDigest(Buffer.from(compPath, 'utf-8'))
-  const digestStr = digest.toString('hex')
-  const len = Math.min(6, digestStr.length)
-  let res = compPath
-  for (let i = len; i < digestStr.length; i++) {
-    res = digestStr.substring(0, i)
-    if (componentIdMap.has(res)) {
-      continue
-    }
-    break
+    const keys = Object.keys(obj)
+    templateKeys.push(...keys)
+    keys.forEach((key) => {
+      return helper(obj[key], templateKeys)
+    })
   }
-  return res
+
+  helper(liteCardRes, templateKeys)
 }
 
-export { LiteCardPlugin }
+export { CardPlugin }
diff --git a/packages/hap-packager/src/plugins/card-script-handle-plugin.js b/packages/hap-packager/src/plugins/card-script-handle-plugin.js
new file mode 100644
index 00000000..1b984f88
--- /dev/null
+++ b/packages/hap-packager/src/plugins/card-script-handle-plugin.js
@@ -0,0 +1,303 @@
+/*
+ * Copyright (c) 2024-present, the hapjs-platform Project Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import path from 'path'
+import Compilation from 'webpack/lib/Compilation'
+import { getStyleObjectId, globalConfig } from '@hap-toolkit/shared-utils'
+import loaderUtils from 'loader-utils'
+import { parse } from '@babel/parser'
+import traverse from '@babel/traverse'
+import generate from '@babel/generator'
+import * as t from '@babel/types'
+
+const PLUGIN_NAME = 'CardScriptHandlePlugin'
+const SUFFIX_UX = '.ux'
+const CARD_ENTRY = '#entry'
+
+/**
+ * 修改输出的 js 的内容：
+ * 1. 增加 $json_require$方法，用于配合引擎读取 template.json 的内容
+ * 2. style 通过 @info 来标记，用于配合引擎读取 css.json 的内容
+ */
+class CardScriptHandlePlugin {
+  constructor(options = {}) {
+    this.options = options || {}
+  }
+
+  apply(compiler) {
+    let ConcatSource = compiler.webpack.sources.ConcatSource
+    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: PLUGIN_NAME,
+          stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
+        },
+        () => {
+          let { pathSrc } = this.options
+          pathSrc = pathSrc.replace(/\\/g, '/')
+          for (const chunk of compilation.chunks) {
+            const entryModule = this.getEntryModule(compilation, chunk)
+            if (!entryModule) {
+              continue
+            }
+            const { rawRequest: entryRawRequest, request } = entryModule
+            if (this.isJsCard(entryRawRequest)) {
+              const { templateFileName, cssFileName } = this.getCardBuildPath(request, pathSrc)
+              const jsAssetesName = this.getJsAssetsName(request, pathSrc)
+              const source = compilation.assets[jsAssetesName].source()
+              let newSource = source
+              if (globalConfig.mode === 'development') {
+                // 开发模式用字符串替换的方式，可以确保sourcemap行数对应正确
+                newSource = this.getDevNewSource(source, cssFileName, templateFileName, pathSrc)
+              } else {
+                // 生产模式无需sourcemap，而字符串匹配替换方式失效，用ast分析的方式
+                newSource = this.getProdNewSource(source, cssFileName, templateFileName, pathSrc)
+              }
+
+              compilation.assets[jsAssetesName] = new ConcatSource(newSource)
+            }
+          }
+        }
+      )
+    })
+  }
+  getEntryModule(compilation, chunk) {
+    const chunkModules = compilation.chunkGraph.getChunkModules(chunk)
+    for (let i = 0; i < chunkModules.length; i++) {
+      const module = chunkModules[i]
+      if (compilation.chunkGraph.isEntryModuleInChunk(module, chunk)) {
+        return module
+      }
+    }
+    return null
+  }
+  getCardBuildPath(requestPath, pathSrc) {
+    if (!requestPath || !pathSrc) {
+      throw new Error(`Invalid request path or src path:\n${requestPath}\n${pathSrc}`)
+    }
+    requestPath = requestPath.replace(/\\/g, '/')
+    // pathSrc = pathSrc.replace(/\\/g, '/')
+    // const requestPathNormal = path.normalize(requestPath)
+    const reqPathArr = requestPath.split('!')
+    let uxPathStr = reqPathArr[reqPathArr.length - 1]
+    if (uxPathStr.indexOf('?') > 0) {
+      uxPathStr = uxPathStr.substring(0, uxPathStr.indexOf('?'))
+    }
+    const uxRelativePath = path.relative(pathSrc, uxPathStr)
+
+    if (!uxRelativePath.endsWith(SUFFIX_UX)) {
+      throw new Error(`Invalid relative path for ux:\n${uxRelativePath}`)
+    }
+    const bundleFilePath = `${uxRelativePath.substring(
+      0,
+      uxRelativePath.length - SUFFIX_UX.length
+    )}`
+    return {
+      bundleFilePath: bundleFilePath.replace(/\\/g, '/'),
+      templateFileName: `${bundleFilePath}.template.json`.replace(/\\/g, '/'),
+      cssFileName: `${bundleFilePath}.css.json`.replace(/\\/g, '/')
+    }
+  }
+  // chunk.entryModule.rawRequest: ./src/cards/card/index.ux?uxType=card&card=1&lite=1
+  isJsCard(requestPath) {
+    if (requestPath && requestPath.lastIndexOf('?') > 0) {
+      const pathParamIndex = requestPath.lastIndexOf('?')
+      const paramStr = requestPath.substring(pathParamIndex + 1)
+      const paramArr = paramStr.split('&')
+      return (
+        paramArr &&
+        paramArr.indexOf('card=1') >= 0 &&
+        paramArr.indexOf('uxType=card') >= 0 &&
+        paramArr.indexOf('lite=1') < 0
+      )
+    }
+    return false
+  }
+  getJsAssetsName(requestPath, pathSrc) {
+    if (!requestPath || !pathSrc) {
+      throw new Error(`Invalid request path or src path:\n${requestPath}\n${pathSrc}`)
+    }
+    requestPath = requestPath.replace(/\\/g, '/')
+    // pathSrc = pathSrc.replace(/\\/g, '/')
+    // const requestPathNormal = path.normalize(requestPath)
+    const reqPathArr = requestPath.split('!')
+    let uxPathStr = reqPathArr[reqPathArr.length - 1]
+    if (uxPathStr.indexOf('?') > 0) {
+      uxPathStr = uxPathStr.substring(0, uxPathStr.indexOf('?'))
+    }
+    const uxRelativePath = path.relative(pathSrc, uxPathStr)
+
+    if (!uxRelativePath.endsWith(SUFFIX_UX)) {
+      throw new Error(`Invalid relative path for ux:\n${uxRelativePath}`)
+    }
+    const bundleFilePath = `${uxRelativePath.substring(
+      0,
+      uxRelativePath.length - SUFFIX_UX.length
+    )}`
+    return `${bundleFilePath}.js`
+  }
+  getDevNewSource(source, cssFileName, templateFileName, pathSrc) {
+    const sourceSplit = source.split('\n')
+    let newSource = ''
+    for (let i = sourceSplit.length - 1; i >= 0; i--) {
+      const str = sourceSplit[i]
+      if (devUtils.isStyleStr(str)) {
+        sourceSplit.splice(i, 1, devUtils.getStyleExportsString(str, cssFileName, pathSrc))
+      }
+      if (devUtils.isTemplateStr(str)) {
+        sourceSplit.splice(i, 1, devUtils.getTemplateExportsString(str, templateFileName, pathSrc))
+      }
+    }
+    newSource += sourceSplit.join('\n')
+    return newSource
+  }
+  getProdNewSource(source, cssFileName, templateFileName, pathSrc) {
+    let newSource = ''
+    const ast = parse(source, {
+      sourceType: 'module'
+    })
+
+    // 用于在遍历 AST 时修改节点
+    const visitor = {
+      CallExpression(path) {
+        const firstArg = path.node.arguments[0]
+        if (prodUtils.isTemplateStr(firstArg)) {
+          prodUtils.replaceTemplateStr(path, firstArg.value, templateFileName, pathSrc)
+        } else if (prodUtils.isStyleStr(firstArg)) {
+          prodUtils.replaceStyleStr(path, firstArg.value, cssFileName, pathSrc)
+        }
+      }
+    }
+
+    // 遍历 AST 并修改 exports.template 和 exports.style
+    traverse(ast, visitor)
+
+    // 生成修改后的代码
+    newSource = generate(
+      ast,
+      {
+        compact: true // 设置紧凑模式，省略多余的空格和换行
+      },
+      source
+    ).code
+    return prodUtils.replacePlaceHolder(newSource)
+  }
+}
+
+const prodUtils = {
+  isTemplateStr(firstArg) {
+    if (!firstArg) return false
+    return t.isStringLiteral(firstArg) && firstArg.value.includes('type=template')
+  },
+  isStyleStr(firstArg) {
+    if (!firstArg) return false
+    return t.isStringLiteral(firstArg) && firstArg.value.includes('type=style')
+  },
+  replaceTemplateStr(path, templateStr, templateFileName, pathSrc) {
+    const compPath = this.getCompPath(templateStr, pathSrc)
+    let templatePath = compPath
+    if (templateFileName === `${compPath}.template.json`) {
+      templatePath = CARD_ENTRY
+    }
+    const uniquePlaceHolder = `_START_PLACE_HOLDER_TEMPLATE_${templateFileName}_${templatePath}_END_`
+    path.replaceWith(t.stringLiteral(uniquePlaceHolder))
+  },
+  replaceStyleStr(path, styleStr, cssFileName, pathSrc) {
+    const compPath = this.getCompPath(styleStr, pathSrc)
+    const styleObjId = getStyleObjectId(compPath)
+    const uniquePlaceHolder = `_START_PLACE_HOLDER_CSS_${cssFileName}_${styleObjId}_END_`
+    path.replaceWith(t.stringLiteral(uniquePlaceHolder))
+  },
+  replacePlaceHolder(code) {
+    // 正则表达式匹配_idX_valY_place_holder_格式的字符串
+    const regexTemplate = /["'`]_START_PLACE_HOLDER_TEMPLATE_([^_\s]+)_([^_\s]+)_END_["'`]/g
+
+    // 替换 template 的 placeholder
+    code = code.replace(regexTemplate, function (match, templateFileName, templatePath) {
+      return `$json_require$("${templateFileName}",{"componentPath":"${templatePath}"})`
+    })
+    const regexCss = /["'`]_START_PLACE_HOLDER_CSS_([^_\s]+)_([^_\s]+)_END_["'`]/g
+
+    // 替换 css 的 placeholder
+    code = code.replace(regexCss, function (match, cssFileName, styleObjId) {
+      return JSON.stringify({
+        '@info': { styleObjectId: styleObjId },
+        extracted: true,
+        jsonPath: cssFileName
+      })
+    })
+
+    return code
+  },
+  getRelativeCompPath(pathSrc, uxPath) {
+    let relativeSrcPathStr = path.relative(pathSrc, uxPath)
+    relativeSrcPathStr = relativeSrcPathStr.replace(/\\/g, '/')
+    if (relativeSrcPathStr && relativeSrcPathStr.endsWith('.ux')) {
+      return relativeSrcPathStr.substring(0, relativeSrcPathStr.length - SUFFIX_UX.length)
+    }
+    return relativeSrcPathStr
+  },
+  getCompPath(request, pathSrc) {
+    const reqArr = request.split('!')
+    const lastItem = reqArr[reqArr.length - 1]
+    const pathArr = lastItem.split('?')
+    const query = pathArr[pathArr.length - 1]
+    const resourceQuery = loaderUtils.parseQuery(query ? `?${query}` : '?')
+
+    const uxPath = resourceQuery.uxPath
+    return this.getRelativeCompPath(pathSrc, uxPath)
+  }
+}
+
+const devUtils = {
+  isTemplateStr(str) {
+    return str.indexOf('type=template') >= 0 && str.indexOf('__webpack_require__') >= 0
+  },
+  isStyleStr(str) {
+    return str.indexOf('type=style') >= 0 && str.indexOf('__webpack_require__') >= 0
+  },
+  getTemplateExportsString(str, templateFileName, pathSrc) {
+    const compPath = this.getCompPath(str, pathSrc)
+    let templatePath = compPath
+    if (templateFileName === `${compPath}.template.json`) {
+      templatePath = CARD_ENTRY
+    }
+    return `$app_module$.exports.template = $json_require$("${templateFileName}", { "componentPath": "${templatePath}" })`
+  },
+  getStyleExportsString(str, cssFileName, pathSrc) {
+    const compPath = this.getCompPath(str, pathSrc)
+    const styleObjId = getStyleObjectId(compPath)
+    return `$app_module$.exports.style = { "@info": { "styleObjectId": "${styleObjId}" }, "extracted": true, "jsonPath": "${cssFileName}" }`
+  },
+  getRelativeCompPath(pathSrc, uxPath) {
+    let relativeSrcPathStr = path.relative(pathSrc, uxPath)
+    relativeSrcPathStr = relativeSrcPathStr.replace(/\\/g, '/')
+    if (relativeSrcPathStr && relativeSrcPathStr.endsWith('.ux')) {
+      return relativeSrcPathStr.substring(0, relativeSrcPathStr.length - SUFFIX_UX.length)
+    }
+    return relativeSrcPathStr
+  },
+  // 通过匹配__webpack_require__('xxxx')中的值来获取组件名
+  getCompPath: function (str, pathSrc) {
+    const regex = /__webpack_require__\("([^"]+)"\)/
+    const match = str.match(regex)
+
+    if (match && match[1]) {
+      const request = match[1]
+      const reqArr = request.split('!')
+      const lastItem = reqArr[reqArr.length - 1]
+      const pathArr = lastItem.split('?')
+      const query = pathArr[pathArr.length - 1]
+      const resourceQuery = loaderUtils.parseQuery(query ? `?${query}` : '?')
+
+      const uxPath = resourceQuery.uxPath
+      return this.getRelativeCompPath(pathSrc, uxPath)
+    } else {
+      return ''
+    }
+  }
+}
+
+export { CardScriptHandlePlugin }
diff --git a/packages/hap-packager/src/plugins/index.js b/packages/hap-packager/src/plugins/index.js
index 6d28e8d4..738e1401 100644
--- a/packages/hap-packager/src/plugins/index.js
+++ b/packages/hap-packager/src/plugins/index.js
@@ -1,6 +1,6 @@
 export * from './copy-dsl-plugin'
 export * from './device-type-plugin'
-export * from './lite-card-plugin'
+export * from './card-plugin'
 export * from './handler-plugin'
 export * from './notify-plugin'
 export * from './resource-plugin'
@@ -8,3 +8,5 @@ export * from './sourcemap-fix-plugin'
 export * from './splitchunks-adapt-plugin'
 export * from './zip-plugin'
 export * from './widget-fingerprint-plugin'
+export * from './remove-modules-plugin'
+export * from './card-script-handle-plugin'
diff --git a/packages/hap-packager/src/plugins/remove-modules-plugin.js b/packages/hap-packager/src/plugins/remove-modules-plugin.js
new file mode 100644
index 00000000..fa03c83d
--- /dev/null
+++ b/packages/hap-packager/src/plugins/remove-modules-plugin.js
@@ -0,0 +1,106 @@
+/*
+ * Copyright (c) 2024-present, the hapjs-platform Project Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  LOADER_INFO_LIST,
+  LOADER_PATH_UX,
+  LOADER_PATH_STYLE,
+  LOADER_PATH_TEMPLATE
+} from '../common/constant'
+import { getLastLoaderPath } from '../common/utils'
+
+class RemoveModulesPlugin {
+  constructor(options) {
+    this.options = options
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap('RemoveModulesPlugin', (compilation) => {
+      // 在生成资源之前，遍历所有模块，删除 jscard 的 template 和 style 模块，保证输出的 js 中不包含 template 和 style
+      compilation.hooks.optimizeModules.tap('RemoveModulesPlugin', (modules) => {
+        modules.forEach((module) => {
+          const { _source, request } = module
+          if (this.isJsCardAndCardcomp(request)) {
+            const { _valueAsString, _valueAsBuffer } = _source || {}
+            const moduleSource = _valueAsString || _valueAsBuffer?.toString() || ''
+            const type = this.getRequestType(request)
+            if (type === LOADER_PATH_UX.type) {
+              // 从 chunk 中删除对 template 和 style 模块的依赖
+              if (typeof moduleSource === 'string') {
+                this.updateUXDependency(module)
+              }
+            }
+          }
+        })
+      })
+      // 在生成资源之前，遍历所有模块，删除 jscard 的 template 和 style 模块，保证输出的 js 中不包含 template 和 style
+      compilation.hooks.optimizeChunks.tap('RemoveModulesPlugin', (chunks) => {
+        chunks.forEach((chunk) => {
+          const chunkGraph = compilation.chunkGraph
+          // 遍历模块
+          const chunkModules = chunkGraph.getChunkModules(chunk)
+
+          chunkModules.forEach((module) => {
+            const { request } = module
+            if (this.isJsCardAndCardcomp(request)) {
+              const type = this.getRequestType(request)
+              const typeArr = LOADER_INFO_LIST.map((item) => item.type)
+              if (
+                typeArr.includes(type) &&
+                (type === LOADER_PATH_TEMPLATE.type || type === LOADER_PATH_STYLE.type)
+              ) {
+                // 从 chunk 中删除 template 和 style 模块内容
+                chunkGraph.disconnectChunkAndModule(chunk, module)
+              }
+            }
+          })
+        })
+      })
+    })
+  }
+  getRequestType(request) {
+    const reqPath = request.replace(/\\/g, '/')
+    const loaderPath = getLastLoaderPath(reqPath)
+    let type = ''
+    if (loaderPath) {
+      const loaderItem = LOADER_INFO_LIST.find((item) => item.path === loaderPath)
+      type = (loaderItem && loaderItem.type) || ''
+    }
+    return type
+  }
+  updateUXDependency(module) {
+    const dependencies = module.dependencies
+    const templateDeps = dependencies.filter((dep) => {
+      // 检查 ux 模块依赖，过滤对 template 模块的依赖
+      const depRequest = dep.request
+      const depRequestType = this.getRequestType(depRequest)
+      return (
+        depRequestType === LOADER_PATH_TEMPLATE.type || depRequestType === LOADER_PATH_STYLE.type
+      )
+    })
+
+    // 更新模块的依赖列表
+    templateDeps.forEach((dep) => {
+      module.removeDependency(dep)
+    })
+  }
+  // chunk.entryModule.rawRequest: ./src/cards/card/index.ux?uxType=card&card=1&lite=1
+  isJsCardAndCardcomp(requestPath) {
+    if (requestPath && requestPath.lastIndexOf('?') > 0) {
+      const pathParamIndex = requestPath.lastIndexOf('?')
+      const paramStr = requestPath.substring(pathParamIndex + 1)
+      const paramArr = paramStr.split('&')
+      return (
+        paramArr &&
+        paramArr.indexOf('card=1') >= 0 &&
+        paramArr.indexOf('lite=1') < 0 &&
+        (paramArr.indexOf('uxType=card') >= 0 || paramArr.indexOf('uxType=comp') >= 0)
+      )
+    }
+    return false
+  }
+}
+
+export { RemoveModulesPlugin }
diff --git a/packages/hap-packager/src/plugins/resource-plugin.js b/packages/hap-packager/src/plugins/resource-plugin.js
index 5347b219..35d3fa83 100644
--- a/packages/hap-packager/src/plugins/resource-plugin.js
+++ b/packages/hap-packager/src/plugins/resource-plugin.js
@@ -129,13 +129,12 @@ function minifyWidgetI18nJSONFiles(targetDir) {
       widgetsOption[key].path = key
     }
     const widgetPath = widgetsOption[key].path
-    const needFlatten = widgetsOption[key].type === 'lite'
     const dir = path.join(targetDir, widgetPath, 'i18n')
     if (fs.existsSync(dir)) {
       const jsonFiles = getFiles('*.json', dir)
       jsonFiles.forEach((filePath) => {
         arr.push(filePath)
-        minifyJson(filePath, filePath, needFlatten)
+        minifyJson(filePath, filePath, true)
       })
     }
   }
diff --git a/packages/hap-packager/src/plugins/widget-fingerprint-plugin.js b/packages/hap-packager/src/plugins/widget-fingerprint-plugin.js
index 24736fba..8e59f7fc 100644
--- a/packages/hap-packager/src/plugins/widget-fingerprint-plugin.js
+++ b/packages/hap-packager/src/plugins/widget-fingerprint-plugin.js
@@ -5,7 +5,9 @@
 
 import fs from 'fs-extra'
 import path from 'path'
-import { calcDataDigest, getLastLoaderPath } from '../common/utils'
+import { getLastLoaderPath } from '../common/utils'
+import { calcDataDigest } from '@hap-toolkit/shared-utils'
+
 import {
   LOADER_INFO_LIST,
   LOADER_PATH_UX,
diff --git a/packages/hap-packager/src/post-handler/index.js b/packages/hap-packager/src/post-handler/index.js
index 37483e77..64ad3f41 100644
--- a/packages/hap-packager/src/post-handler/index.js
+++ b/packages/hap-packager/src/post-handler/index.js
@@ -1,424 +1,4 @@
-import { templateValueToCardCode } from '@aiot-toolkit/card-expression'
-import { templater } from '@hap-toolkit/compiler'
-const { validator } = templater
+import { postHandleLiteCardRes } from './lite-card-post'
+import { postHandleJSCardRes } from './js-card-post'
 
-const CARD_ENTRY = '#entry'
-const TYPE_IMPORT = 'import'
-// 需要进行后处理的模块key
-const TEMPLATE_KEY = 'template'
-const ACTIONS_KEY = 'actions'
-const SIMPLE_EXPR_MODIFIERS = ['$', '.', '[]', '~', '{}']
-
-// 节点标记，同一节点可能同时符合多个kind定义，按priority高的进行标记
-const ENUM_KIND_TYPE = {
-  ELEMENT: {
-    // 普通动态节点、事件节点、带id属性的节点
-    kind: 1,
-    priority: 1
-  },
-  COMPONENT: {
-    // 自定义组件节点
-    kind: 3,
-    priority: 2
-  },
-  FRAGMENT: {
-    // if/for 动态节点
-    kind: 2,
-    priority: 3
-  }
-}
-
-// 处理 actions 中的字段，增加标记和处理表达式
-function postHandleActions(actions) {
-  if (!isObject(actions)) return
-
-  markType(actions)
-  markUrl(actions)
-  markMethod(actions)
-  markParams(actions)
-}
-
-function markType(actions) {
-  if (isExpr(actions.type)) {
-    let { rawExpr, prefixExpr } = getPrefixExpr(actions.type)
-    delete actions.type
-    actions['$type'] = rawExpr
-    actions['#type'] = prefixExpr
-  }
-}
-
-function markUrl(actions) {
-  // url 可能为字符串，也可能为数组
-  // 如为数组，则遍历数组进行表达式处理
-  if (typeof actions.url === 'string') {
-    if (isExpr(actions.url)) {
-      let { rawExpr, prefixExpr } = getPrefixExpr(actions.url)
-      delete actions.url
-      actions['$url'] = rawExpr
-      actions['#url'] = prefixExpr
-    }
-  } else if (Array.isArray(actions.url)) {
-    let hasBinding = false
-    const rawUrlList = actions.url.map((url) => {
-      if (isExpr(url)) {
-        hasBinding = true
-        let { rawExpr } = getPrefixExpr(url)
-        return `{{${rawExpr}}}`
-      }
-      return url
-    })
-
-    const prefixUrlList = actions.url.map((url) => {
-      if (isExpr(url)) {
-        hasBinding = true
-        let { prefixExpr } = getPrefixExpr(url)
-        return prefixExpr
-      }
-      return url
-    })
-
-    if (hasBinding) {
-      delete actions.url
-      actions['$url'] = rawUrlList
-      actions['#url'] = prefixUrlList
-    }
-  }
-}
-function markMethod(actions) {
-  if (isExpr(actions.method)) {
-    let { rawExpr, prefixExpr } = getPrefixExpr(actions.method)
-    delete actions.method
-    actions['$method'] = rawExpr
-    actions['#method'] = prefixExpr
-  }
-}
-
-function markParams(actions) {
-  if (!isObject(actions.params)) return
-
-  // 标准只支持一级结构中绑定变量，做一级结构的key遍历即可
-  Object.keys(actions.params).forEach((key) => {
-    const value = actions.params[key]
-    if (isExpr(value)) {
-      let { rawExpr, prefixExpr } = getPrefixExpr(value)
-      delete actions.params[key]
-      actions.params['$' + key] = rawExpr
-      actions.params['#' + key] = prefixExpr
-    }
-  })
-}
-
-// 处理 template 中的字段，增加标记和处理表达式
-function postHandleTemplate(template, liteCardRes) {
-  if (!isObject(template)) return
-
-  markStyle(template)
-  markClass(template)
-  markClassList(template)
-  markAttr(template)
-  markEvents(template)
-  markId(template)
-  markIs(template)
-  markIf(template)
-  markFor(template)
-  markCustomComp(template, liteCardRes)
-
-  const children = template.children
-  if (children && Array.isArray(children)) {
-    for (let i = 0; i < children.length; i++) {
-      const child = children[i]
-      postHandleTemplate(child, liteCardRes)
-    }
-  }
-}
-
-// 获取kind值对应的优先级
-function getPriority(kind) {
-  let prioity = kind
-  Object.keys(ENUM_KIND_TYPE).some((key) => {
-    const item = ENUM_KIND_TYPE[key]
-    if (item.kind === kind) {
-      prioity = item.priority
-      return true
-    }
-  })
-  return prioity
-}
-
-// 根据优先级标记节点的 kind 值
-function markKind(oldKind, newKind) {
-  if (!oldKind) return newKind
-
-  const oldPriority = getPriority(oldKind)
-  const newPriority = getPriority(newKind)
-  if (oldPriority < newPriority) return newKind
-
-  return oldKind
-}
-
-function markCustomComp(template, liteCardRes) {
-  if (!isObject(liteCardRes[CARD_ENTRY][TYPE_IMPORT])) return
-
-  const importList = Object.keys(liteCardRes[CARD_ENTRY][TYPE_IMPORT])
-
-  if (importList.includes(template.type)) {
-    template.kind = markKind(template.kind, ENUM_KIND_TYPE.COMPONENT.kind)
-  }
-}
-
-function markIf(template) {
-  if (!template.shown) return
-
-  if (isExpr(template.shown)) {
-    let { rawExpr, prefixExpr } = getPrefixExpr(template.shown)
-    delete template.shown
-    template['$shown'] = rawExpr
-    template['#shown'] = prefixExpr
-  }
-  template.kind = markKind(template.kind, ENUM_KIND_TYPE.FRAGMENT.kind)
-}
-
-function markIs(template) {
-  if (!template.is) return
-
-  if (isExpr(template.is)) {
-    let { rawExpr, prefixExpr } = getPrefixExpr(template.is)
-    delete template.is
-    template['$is'] = rawExpr
-    template['#is'] = prefixExpr
-    template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
-  }
-}
-
-function markId(template) {
-  if (!template.id) return
-
-  if (isExpr(template.id)) {
-    let { rawExpr, prefixExpr } = getPrefixExpr(template.id)
-    delete template.id
-    template['$id'] = rawExpr
-    template['#id'] = prefixExpr
-  }
-  // 节点有id属性，标记为kind 为 1
-  template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
-}
-
-function markFor(template) {
-  if (!template.repeat) return
-
-  if (isObject(template.repeat)) {
-    if (isExpr(template.repeat.exp)) {
-      /**
-       * example 1:
-        <div for="{{(index, item) in ItemList}}">   ->
-        "repeat": {
-          "$exp": "ItemList",
-          "#exp": ["$", "ItemList"],
-          "key": "index",
-          "value": "item"
-        },
-
-        example 2:
-        <div for="{{(index, item) in [1,2,3]}}">   ->
-        "repeat": {
-          "$exp": "[1, 2, 3]",
-          "#exp": "[\"~\",1,2,3]",
-          "key": "index",
-          "value": "item"
-        },
-      */
-      let { rawExpr, prefixExpr } = getPrefixExpr(template.repeat.exp)
-      delete template.repeat.exp
-      template.repeat['$exp'] = rawExpr
-      template.repeat['#exp'] = prefixExpr
-    }
-  } else if (isExpr(template.repeat)) {
-    /**
-      <div for="{{ItemList}}">   ->
-      "$repeat": "ItemList",
-      "#repeat": ["$", "ItemList"],
-    */
-    let { rawExpr, prefixExpr } = getPrefixExpr(template.repeat)
-    delete template.repeat
-    template['$repeat'] = rawExpr
-    template['#repeat'] = prefixExpr
-  }
-  template.kind = markKind(template.kind, ENUM_KIND_TYPE.FRAGMENT.kind)
-}
-
-function markStyle(template) {
-  if (!template.style) return
-
-  const style = template.style
-  if (typeof style === 'object') {
-    Object.keys(style).forEach((key) => {
-      const value = style[key]
-      if (isExpr(value)) {
-        let { rawExpr, prefixExpr } = getPrefixExpr(value)
-        delete template.style[key]
-        template.style['$' + key] = rawExpr
-        template.style['#' + key] = prefixExpr
-        template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
-      }
-    })
-  } else {
-    if (isExpr(style)) {
-      let { rawExpr, prefixExpr } = getPrefixExpr(style)
-      delete template.style
-      template['$style'] = rawExpr
-      template['#style'] = prefixExpr
-      template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
-    }
-  }
-}
-
-function markClass(template) {
-  if (!template.class || template.class.length === 0) return
-
-  if (isExpr(template.class)) {
-    let { rawExpr, prefixExpr } = getPrefixExpr(template.class)
-    delete template.class
-    template['$class'] = rawExpr
-    template['#class'] = prefixExpr
-    template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
-  }
-}
-
-function markClassList(template) {
-  if (!template.classList || template.classList.length === 0) return
-
-  let hasBinding = false
-  const prefixExprList = template.classList.map((classEle) => {
-    if (isExpr(classEle)) {
-      hasBinding = true
-      let { prefixExpr } = getPrefixExpr(classEle)
-      return prefixExpr
-    }
-    return classEle
-  })
-
-  if (hasBinding) {
-    // 如果 classList 元素有表达式
-    delete template.classList
-    template['#classList'] = prefixExprList
-    template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT)
-  }
-}
-
-function markEvents(template) {
-  if (template.events) {
-    template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
-  }
-}
-
-function markAttr(template) {
-  if (!template.attr) return
-
-  const attr = template.attr
-  if (isObject(attr)) {
-    Object.keys(attr).forEach((attrKey) => {
-      const attrValue = attr[attrKey]
-      if (isExpr(attrValue)) {
-        let { rawExpr, prefixExpr } = getPrefixExpr(attrValue)
-        delete attr[attrKey]
-        attr['$' + attrKey] = rawExpr
-        attr['#' + attrKey] = prefixExpr
-        template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
-      }
-    })
-  }
-}
-
-function isExpr(val) {
-  if (!val) return false
-  return validator.isExpr(val)
-}
-
-function isObject(obj) {
-  return obj && Object.prototype.toString.call(obj) === '[object Object]' && obj !== null
-}
-
-function getPrefixExpr(expr) {
-  const res = templateValueToCardCode(expr)
-  const parsed = JSON.parse(res)
-  if (isSimpleExpr(parsed)) {
-    // 简单表达式
-    // 目前只有 {{name}}、{{title.name}}、{{title[0]}}、{{[1,2,3]}}、{{ {a: 1} }} 算作简单表达式
-    return {
-      rawExpr: validator.parseText(expr)[0].value, // {{ name }} -> name
-      prefixExpr: parsed // {{ name }} -> ['$', 'name']
-    }
-  } else {
-    // 复杂表达式
-    return {
-      rawExpr: expr, // {{ a + b }} -> {{ a + b }}
-      prefixExpr: parsed // {{ a + b }} -> ["+",["$","a"],["$","b"]]
-    }
-  }
-}
-
-// 根据操作符来判断是否为简单表达式
-function isSimpleExpr(expr) {
-  if (!expr || !Array.isArray(expr)) return false
-
-  const modifierList = []
-  getAllModifiers(expr, modifierList)
-  return modifierList.every((modifier) => SIMPLE_EXPR_MODIFIERS.includes(modifier))
-}
-
-function getAllModifiers(exprList, modifierList) {
-  modifierList.push(exprList[0])
-  for (let i = 1; i < exprList.length; i++) {
-    if (Array.isArray(exprList[i])) {
-      // 如果当前元素是数组，递归调用，找出所有的操作符
-      getAllModifiers(exprList[i], modifierList)
-    }
-  }
-  return modifierList
-}
-
-function recordKeys(liteCardRes, templateKeys) {
-  const helper = function (obj) {
-    if (!obj || typeof obj !== 'object') return
-
-    const keys = Object.keys(obj)
-    templateKeys.push(...keys)
-    keys.forEach((key) => {
-      return helper(obj[key], templateKeys)
-    })
-  }
-
-  helper(liteCardRes, templateKeys)
-}
-
-export function postHandleLiteCardRes(liteCardRes) {
-  const uxList = Object.keys(liteCardRes)
-
-  // template
-  for (let i = 0; i < uxList.length; i++) {
-    const compName = uxList[i]
-    postHandleTemplate(liteCardRes[compName][TEMPLATE_KEY], liteCardRes)
-  }
-
-  // actions
-  for (let i = 0; i < uxList.length; i++) {
-    const compName = uxList[i]
-    const actionEvents = liteCardRes[compName][ACTIONS_KEY]
-    if (actionEvents) {
-      Object.keys(actionEvents).forEach((eventName) => {
-        postHandleActions(actionEvents[eventName])
-      })
-    }
-  }
-
-  // 用于修改 template 的 key 的 stringify 的顺序，type放第一个，children放最后一个
-  let templateKeys = []
-  recordKeys(liteCardRes, templateKeys)
-
-  templateKeys = [...new Set(templateKeys.sort())]
-    .filter((key) => key !== 'children' && key !== 'type')
-    .concat('children')
-    .unshift('type')
-
-  return JSON.stringify(liteCardRes, templateKeys)
-}
+export { postHandleLiteCardRes, postHandleJSCardRes }
diff --git a/packages/hap-packager/src/post-handler/js-card-post.js b/packages/hap-packager/src/post-handler/js-card-post.js
new file mode 100644
index 00000000..5368d06e
--- /dev/null
+++ b/packages/hap-packager/src/post-handler/js-card-post.js
@@ -0,0 +1,270 @@
+/*
+ * Copyright (c) 2024-present, the hapjs-platform Project Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import {
+  isExpr,
+  isFunctionStr,
+  isObject,
+  isConstObjOrArray,
+  isSimpleArr,
+  isSimplePath
+} from './utils'
+import { templater } from '@hap-toolkit/compiler'
+const { validator } = templater
+
+const CARD_ENTRY = '#entry'
+const TYPE_IMPORT = 'import'
+// 需要进行后处理的模块key
+const TEMPLATE_KEY = 'template'
+
+// 节点标记，同一节点可能同时符合多个kind定义，按priority高的进行标记
+const ENUM_KIND_TYPE = {
+  ELEMENT: {
+    // 普通动态节点、事件节点、带id属性的节点
+    kind: 1,
+    priority: 1
+  },
+  COMPONENT: {
+    // 自定义组件节点
+    kind: 3,
+    priority: 2
+  },
+  FRAGMENT: {
+    // if/for 动态节点
+    kind: 2,
+    priority: 3
+  }
+}
+
+// 处理 template 中的字段，增加标记和处理表达式
+function postHandleTemplate(template, JsCardRes) {
+  if (!isObject(template)) return
+
+  markStyle(template)
+  markClass(template)
+  markAttr(template)
+  markEvents(template)
+  markId(template)
+  markIs(template)
+  markIf(template)
+  markFor(template)
+  markCustomComp(template, JsCardRes)
+
+  const children = template.children
+  if (children && Array.isArray(children)) {
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i]
+      postHandleTemplate(child, JsCardRes)
+    }
+  }
+}
+
+// 获取kind值对应的优先级
+function getPriority(kind) {
+  let prioity = kind
+  Object.keys(ENUM_KIND_TYPE).some((key) => {
+    const item = ENUM_KIND_TYPE[key]
+    if (item.kind === kind) {
+      prioity = item.priority
+      return true
+    }
+  })
+  return prioity
+}
+
+// 根据优先级标记节点的 kind 值
+function markKind(oldKind, newKind) {
+  if (!oldKind) return newKind
+
+  const oldPriority = getPriority(oldKind)
+  const newPriority = getPriority(newKind)
+  if (oldPriority < newPriority) return newKind
+
+  return oldKind
+}
+
+function markCustomComp(template, JsCardRes) {
+  if (!isObject(JsCardRes[CARD_ENTRY][TYPE_IMPORT])) return
+
+  const importList = Object.keys(JsCardRes[CARD_ENTRY][TYPE_IMPORT])
+
+  if (importList.includes(template.type)) {
+    template.import = JsCardRes[CARD_ENTRY][TYPE_IMPORT][template.type]
+    template.kind = markKind(template.kind, ENUM_KIND_TYPE.COMPONENT.kind)
+    delete JsCardRes[CARD_ENTRY][TYPE_IMPORT]
+  }
+}
+
+function markIf(template) {
+  if (!template.shown) return
+
+  if (isExpr(template.shownRaw)) {
+    template['$shown'] = getExprRes(template.shownRaw, template.shown)
+    delete template.shown
+  }
+  delete template.shownRaw
+  template.kind = markKind(template.kind, ENUM_KIND_TYPE.FRAGMENT.kind)
+}
+
+function markIs(template) {
+  if (!template.is) return
+
+  if (isExpr(template.isRaw)) {
+    template['$is'] = getExprRes(template.isRaw, template.is)
+    delete template.is
+    template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+  }
+  delete template.isRaw
+}
+
+function markId(template) {
+  if (!template.id) return
+
+  if (isExpr(template.idRaw)) {
+    template['$id'] = getExprRes(template.idRaw, template.id)
+    delete template.id
+  }
+  delete template.idRaw
+  // 节点有id属性，标记为kind 为 1
+  template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+}
+
+function markFor(template) {
+  if (!template.repeat) return
+
+  if (isObject(template.repeat)) {
+    if (isExpr(template.repeatRaw.expRaw)) {
+      /**
+       * example 1:
+        <div for="{{(index, item) in ItemList}}">   ->
+        "repeat": {
+          "$exp": "ItemList",
+          "key": "index",
+          "value": "item"
+        },
+
+        example 2:
+        <div for="{{(index, item) in [1,2,3]}}">   ->
+        "repeat": {
+          "$exp": "[1, 2, 3]",
+          "key": "index",
+          "value": "item"
+        },
+      */
+      template.repeat['$exp'] = getExprRes(template.repeatRaw.expRaw, template.repeat.exp)
+      delete template.repeat.exp
+    }
+  } else {
+    if (isExpr(template.repeatRaw)) {
+      /**
+        <div for="{{ItemList}}">   ->
+        "$repeat": "ItemList",
+      */
+      template['$repeat'] = getExprRes(template.repeatRaw, template.repeat)
+      delete template.repeat
+    }
+    delete template.repeatRaw
+  }
+  delete template.repeatRaw
+  template.kind = markKind(template.kind, ENUM_KIND_TYPE.FRAGMENT.kind)
+}
+
+function markStyle(template) {
+  if (!template.style) return
+  const styleRaw = template.styleRaw
+  const style = template.style
+  if (typeof style === 'object') {
+    Object.keys(style).forEach((key) => {
+      if (isExpr(styleRaw[key])) {
+        template.style['$' + key] = getExprRes(styleRaw[key], style[key])
+        delete template.style[key]
+        template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+      }
+    })
+  } else {
+    if (isExpr(styleRaw)) {
+      template['$style'] = getExprRes(styleRaw, template.style)
+      delete template.style
+      template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+    }
+  }
+  delete template.styleRaw
+}
+
+function markClass(template) {
+  if (!template.class || template.class.length === 0) return
+
+  if (isExpr(template.classListRaw)) {
+    template['$class'] = getExprRes(template.classListRaw, template.classList)
+    template['$classList'] = getExprRes(template.classListRaw, template.classList)
+    delete template.classList
+    delete template.class
+    template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+  }
+  delete template.classListRaw
+}
+
+function markEvents(template) {
+  if (template.events) {
+    Object.keys(template.events).forEach((eventName) => {
+      const eventStr = template.events[eventName]
+      if (isFunctionStr(eventStr)) {
+        template.events['$' + eventName] = eventStr
+        delete template.events[eventName]
+      }
+    })
+    template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+  }
+}
+
+function markAttr(template) {
+  if (!template.attr) return
+
+  const attr = template.attr
+  if (isObject(attr)) {
+    Object.keys(attr).forEach((attrKey) => {
+      const attrValueRaw = attr[attrKey + 'Raw']
+      if (attrValueRaw !== undefined) {
+        if (isExpr(attrValueRaw)) {
+          attr['$' + attrKey] = getExprRes(attrValueRaw, attr[attrKey])
+          delete attr[attrKey]
+          template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+        }
+        delete attr[attrKey + 'Raw']
+      }
+    })
+  }
+}
+
+function getExprRes(exprRaw, expr) {
+  const tokens = validator.parseText(exprRaw.trim())
+  if (tokens.length > 1) {
+    return expr
+  }
+
+  const parsed = tokens[0].value
+  if (isConstObjOrArray(parsed)) {
+    // 简单表达式 {{ [1,2,3] }}、{{ {a: 1} }}
+    // eslint-disable-next-line no-eval
+    return eval(`(${parsed})`)
+  } else if (isSimplePath(parsed) && isSimpleArr(parsed)) {
+    // 简单表达式 {{name}}、{{title.name}}、{{title['name']}}、{{title[0]}}
+    return parsed // {{ name }} -> name
+  } else {
+    // 复杂表达式，返回function形式的表达式结果
+    return expr // {{a + b}} -> function () { return this.a + this.b }
+  }
+}
+
+export function postHandleJSCardRes(JsCardRes) {
+  const uxList = Object.keys(JsCardRes)
+
+  // template
+  for (let i = 0; i < uxList.length; i++) {
+    const compName = uxList[i]
+    postHandleTemplate(JsCardRes[compName][TEMPLATE_KEY], JsCardRes)
+  }
+
+  return JsCardRes
+}
diff --git a/packages/hap-packager/src/post-handler/lite-card-post.js b/packages/hap-packager/src/post-handler/lite-card-post.js
new file mode 100644
index 00000000..ae9e3016
--- /dev/null
+++ b/packages/hap-packager/src/post-handler/lite-card-post.js
@@ -0,0 +1,389 @@
+/*
+ * Copyright (c) 2024-present, the hapjs-platform Project Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { templateValueToCardCode } from '@aiot-toolkit/card-expression'
+import { isExpr, isObject, isConstObjOrArray, isSimpleArr, isSimplePath } from './utils'
+import { templater } from '@hap-toolkit/compiler'
+const { validator } = templater
+
+const TYPE_IMPORT = 'import'
+// 需要进行后处理的模块key
+const TEMPLATE_KEY = 'template'
+const ACTIONS_KEY = 'actions'
+
+// 节点标记，同一节点可能同时符合多个kind定义，按priority高的进行标记
+const ENUM_KIND_TYPE = {
+  ELEMENT: {
+    // 普通动态节点、事件节点、带id属性的节点
+    kind: 1,
+    priority: 1
+  },
+  COMPONENT: {
+    // 自定义组件节点
+    kind: 3,
+    priority: 2
+  },
+  FRAGMENT: {
+    // if/for 动态节点
+    kind: 2,
+    priority: 3
+  }
+}
+
+// 处理 actions 中的字段，增加标记和处理表达式
+function postHandleActions(actions) {
+  if (!isObject(actions)) return
+
+  markType(actions)
+  markUrl(actions)
+  markMethod(actions)
+  markParams(actions)
+}
+
+function markType(actions) {
+  if (isExpr(actions.type)) {
+    let { rawExpr, prefixExpr } = getPrefixExpr(actions.type)
+    delete actions.type
+    actions['$type'] = rawExpr
+    actions['#type'] = prefixExpr
+  }
+}
+
+function markUrl(actions) {
+  // url 可能为字符串，也可能为数组
+  // 如为数组，则遍历数组进行表达式处理
+  if (typeof actions.url === 'string') {
+    if (isExpr(actions.url)) {
+      let { rawExpr, prefixExpr } = getPrefixExpr(actions.url)
+      delete actions.url
+      actions['$url'] = rawExpr
+      actions['#url'] = prefixExpr
+    }
+  } else if (Array.isArray(actions.url)) {
+    let hasBinding = false
+    const rawUrlList = actions.url.map((url) => {
+      if (isExpr(url)) {
+        hasBinding = true
+        let { rawExpr } = getPrefixExpr(url)
+        return `{{${rawExpr}}}`
+      }
+      return url
+    })
+
+    const prefixUrlList = actions.url.map((url) => {
+      if (isExpr(url)) {
+        hasBinding = true
+        let { prefixExpr } = getPrefixExpr(url)
+        return prefixExpr
+      }
+      return url
+    })
+
+    if (hasBinding) {
+      delete actions.url
+      actions['$url'] = rawUrlList
+      actions['#url'] = prefixUrlList
+    }
+  }
+}
+function markMethod(actions) {
+  if (isExpr(actions.method)) {
+    let { rawExpr, prefixExpr } = getPrefixExpr(actions.method)
+    delete actions.method
+    actions['$method'] = rawExpr
+    actions['#method'] = prefixExpr
+  }
+}
+
+function markParams(actions) {
+  if (!isObject(actions.params)) return
+
+  // 标准只支持一级结构中绑定变量，做一级结构的key遍历即可
+  Object.keys(actions.params).forEach((key) => {
+    const value = actions.params[key]
+    if (isExpr(value)) {
+      let { rawExpr, prefixExpr } = getPrefixExpr(value)
+      delete actions.params[key]
+      actions.params['$' + key] = rawExpr
+      actions.params['#' + key] = prefixExpr
+    }
+  })
+}
+
+// 处理 template 中的字段，增加标记和处理表达式
+function postHandleCompTemplate(template, liteCardRes, compName) {
+  if (!isObject(template)) return
+
+  markStyle(template)
+  markClass(template)
+  markClassList(template)
+  markAttr(template)
+  markEvents(template)
+  markId(template)
+  markIs(template)
+  markIf(template)
+  markFor(template)
+  markCustomComp(template, liteCardRes, compName)
+
+  const children = template.children
+  if (children && Array.isArray(children)) {
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i]
+      postHandleCompTemplate(child, liteCardRes, compName)
+    }
+  }
+}
+
+// 获取kind值对应的优先级
+function getPriority(kind) {
+  let prioity = kind
+  Object.keys(ENUM_KIND_TYPE).some((key) => {
+    const item = ENUM_KIND_TYPE[key]
+    if (item.kind === kind) {
+      prioity = item.priority
+      return true
+    }
+  })
+  return prioity
+}
+
+// 根据优先级标记节点的 kind 值
+function markKind(oldKind, newKind) {
+  if (!oldKind) return newKind
+
+  const oldPriority = getPriority(oldKind)
+  const newPriority = getPriority(newKind)
+  if (oldPriority < newPriority) return newKind
+
+  return oldKind
+}
+
+function markCustomComp(template, liteCardRes, compName) {
+  if (!isObject(liteCardRes[compName][TYPE_IMPORT])) return
+
+  const importList = Object.keys(liteCardRes[compName][TYPE_IMPORT])
+
+  if (importList.includes(template.type)) {
+    template.import = liteCardRes[compName][TYPE_IMPORT][template.type]
+    template.kind = markKind(template.kind, ENUM_KIND_TYPE.COMPONENT.kind)
+  }
+}
+
+function markIf(template) {
+  if (!template.shown) return
+
+  if (isExpr(template.shown)) {
+    let { rawExpr, prefixExpr } = getPrefixExpr(template.shown)
+    delete template.shown
+    template['$shown'] = rawExpr
+    template['#shown'] = prefixExpr
+  }
+  template.kind = markKind(template.kind, ENUM_KIND_TYPE.FRAGMENT.kind)
+}
+
+function markIs(template) {
+  if (!template.is) return
+
+  if (isExpr(template.is)) {
+    let { rawExpr, prefixExpr } = getPrefixExpr(template.is)
+    delete template.is
+    template['$is'] = rawExpr
+    template['#is'] = prefixExpr
+    template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+  }
+}
+
+function markId(template) {
+  if (!template.id) return
+
+  if (isExpr(template.id)) {
+    let { rawExpr, prefixExpr } = getPrefixExpr(template.id)
+    delete template.id
+    template['$id'] = rawExpr
+    template['#id'] = prefixExpr
+  }
+  // 节点有id属性，标记为kind 为 1
+  template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+}
+
+function markFor(template) {
+  if (!template.repeat) return
+
+  if (isObject(template.repeat)) {
+    if (isExpr(template.repeat.exp)) {
+      /**
+       * example 1:
+        <div for="{{(index, item) in ItemList}}">   ->
+        "repeat": {
+          "$exp": "ItemList",
+          "#exp": ["$", "ItemList"],
+          "key": "index",
+          "value": "item"
+        },
+
+        example 2:
+        <div for="{{(index, item) in [1,2,3]}}">   ->
+        "repeat": {
+          "$exp": "[1, 2, 3]",
+          "#exp": "[\"~\",1,2,3]",
+          "key": "index",
+          "value": "item"
+        },
+      */
+      let { rawExpr, prefixExpr } = getPrefixExpr(template.repeat.exp)
+      delete template.repeat.exp
+      template.repeat['$exp'] = rawExpr
+      template.repeat['#exp'] = prefixExpr
+    }
+  } else if (isExpr(template.repeat)) {
+    /**
+      <div for="{{ItemList}}">   ->
+      "$repeat": "ItemList",
+      "#repeat": ["$", "ItemList"],
+    */
+    let { rawExpr, prefixExpr } = getPrefixExpr(template.repeat)
+    delete template.repeat
+    template['$repeat'] = rawExpr
+    template['#repeat'] = prefixExpr
+  }
+  template.kind = markKind(template.kind, ENUM_KIND_TYPE.FRAGMENT.kind)
+}
+
+function markStyle(template) {
+  if (!template.style) return
+
+  const style = template.style
+  if (typeof style === 'object') {
+    Object.keys(style).forEach((key) => {
+      const value = style[key]
+      if (isExpr(value)) {
+        let { rawExpr, prefixExpr } = getPrefixExpr(value)
+        delete template.style[key]
+        template.style['$' + key] = rawExpr
+        template.style['#' + key] = prefixExpr
+        template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+      }
+    })
+  } else {
+    if (isExpr(style)) {
+      let { rawExpr, prefixExpr } = getPrefixExpr(style)
+      delete template.style
+      template['$style'] = rawExpr
+      template['#style'] = prefixExpr
+      template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+    }
+  }
+}
+
+function markClass(template) {
+  if (!template.class || template.class.length === 0) return
+
+  if (isExpr(template.class)) {
+    let { rawExpr, prefixExpr } = getPrefixExpr(template.class)
+    delete template.class
+    template['$class'] = rawExpr
+    template['#class'] = prefixExpr
+    template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+  }
+}
+
+function markClassList(template) {
+  if (!template.classList || template.classList.length === 0) return
+
+  let hasBinding = false
+  const prefixExprList = template.classList.map((classEle) => {
+    if (isExpr(classEle)) {
+      hasBinding = true
+      let { prefixExpr } = getPrefixExpr(classEle)
+      return prefixExpr
+    }
+    return classEle
+  })
+
+  if (hasBinding) {
+    // 如果 classList 元素有表达式
+    delete template.classList
+    template['#classList'] = prefixExprList
+    template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT)
+  }
+}
+
+function markEvents(template) {
+  if (template.events) {
+    template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+  }
+}
+
+function markAttr(template) {
+  if (!template.attr) return
+
+  const attr = template.attr
+  if (isObject(attr)) {
+    Object.keys(attr).forEach((attrKey) => {
+      const attrValue = attr[attrKey]
+      if (isExpr(attrValue)) {
+        let { rawExpr, prefixExpr } = getPrefixExpr(attrValue)
+        delete attr[attrKey]
+        attr['$' + attrKey] = rawExpr
+        attr['#' + attrKey] = prefixExpr
+        template.kind = markKind(template.kind, ENUM_KIND_TYPE.ELEMENT.kind)
+      }
+    })
+  }
+}
+
+function getExprRes(exprRaw) {
+  const tokens = validator.parseText(exprRaw.trim())
+  if (tokens.length > 1) {
+    return exprRaw
+  }
+
+  const parsed = tokens[0].value
+  if (isConstObjOrArray(parsed)) {
+    // 简单表达式 {{ [1,2,3] }}、{{ {a: 1} }}
+    // eslint-disable-next-line no-eval
+    return eval(`(${parsed})`)
+  } else if (isSimplePath(parsed) && isSimpleArr(parsed)) {
+    // 简单表达式 {{name}}、{{title.name}}、{{title['name']}}、{{title[0]}}
+    return parsed // {{ name }} -> name
+  } else {
+    // 复杂表达式，返回function形式的表达式结果
+    return exprRaw // {{a + b}} -> function () { return this.a + this.b }
+  }
+}
+
+function getPrefixExpr(exprRaw) {
+  const res = templateValueToCardCode(exprRaw)
+  const parsed = JSON.parse(res)
+  const rawExpr = getExprRes(exprRaw)
+  return {
+    rawExpr: rawExpr, // {{ name }} -> name
+    prefixExpr: parsed // {{ name }} -> ['$', 'name']
+  }
+}
+
+export function postHandleLiteCardRes(liteCardRes) {
+  const uxList = Object.keys(liteCardRes)
+
+  // template
+  for (let i = 0; i < uxList.length; i++) {
+    const compName = uxList[i]
+    postHandleCompTemplate(liteCardRes[compName][TEMPLATE_KEY], liteCardRes, compName)
+    delete liteCardRes[compName][TYPE_IMPORT]
+  }
+
+  // actions
+  for (let i = 0; i < uxList.length; i++) {
+    const compName = uxList[i]
+    const actionEvents = liteCardRes[compName][ACTIONS_KEY]
+    if (actionEvents) {
+      Object.keys(actionEvents).forEach((eventName) => {
+        postHandleActions(actionEvents[eventName])
+      })
+    }
+  }
+
+  return liteCardRes
+}
diff --git a/packages/hap-packager/src/post-handler/utils.js b/packages/hap-packager/src/post-handler/utils.js
new file mode 100644
index 00000000..ae2ec143
--- /dev/null
+++ b/packages/hap-packager/src/post-handler/utils.js
@@ -0,0 +1,63 @@
+import { templater } from '@hap-toolkit/compiler'
+const { validator } = templater
+
+const pathTestRE =
+  /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['.*?'\]|\[".*?"\]|\[\d+\]|\[[A-Za-z_$][\w$]*\])*$/
+
+const literalValueRE = /^(?:true|false|null|undefined|Infinity|NaN)$/
+
+export function isExpr(val) {
+  if (!val) return false
+  return validator.isExpr(val)
+}
+
+export function isFunctionStr(str) {
+  const pattern = /^\s*function\s*\([\w\s,$]*\)\s*\{[\s\S]*\}\s*$/
+  return pattern.test(str.trim())
+}
+
+export function isObject(obj) {
+  return obj && Object.prototype.toString.call(obj) === '[object Object]' && obj !== null
+}
+
+export function isConstObjOrArray(exp) {
+  try {
+    // "[1, 2, 3]"、"{a: 1}" 常量作为模板内容时
+    // eslint-disable-next-line no-eval
+    eval(`(${exp})`)
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
+export function isSimpleArr(exp) {
+  // a.b.c，或 a['b']['c'] 返回 true
+  // eslint-disable-next-line no-useless-escape
+  const regex = /\[([^\[\]]+)\]/g
+  let match
+  const results = []
+
+  while ((match = regex.exec(exp)) !== null) {
+    results.push(match[1])
+  }
+
+  let res = true
+  // 检查所有[]匹配项是否全部为数字或常量字符串
+  results.forEach((content) => {
+    if (!/^\d+$/.test(content) && !/^('|"|`)(.*)\1$/.test(content)) {
+      res = false
+    }
+  })
+  return res
+}
+
+export function isSimplePath(exp) {
+  return (
+    pathTestRE.test(exp) &&
+    // true/false/null/undefined/Infinity/NaN
+    !literalValueRE.test(exp) &&
+    // Math常量
+    exp.slice(0, 5) !== 'Math.'
+  )
+}
diff --git a/packages/hap-packager/src/signature/index.js b/packages/hap-packager/src/signature/index.js
index fd79f10f..1c108436 100644
--- a/packages/hap-packager/src/signature/index.js
+++ b/packages/hap-packager/src/signature/index.js
@@ -5,7 +5,7 @@
 
 import path from 'path'
 
-import { calcDataDigest } from '../common/utils'
+import { calcDataDigest } from '@hap-toolkit/shared-utils'
 
 import { DIGEST_ZIP_PATH, DIGEST_HASH_JSON } from '../common/constant'
 
diff --git a/packages/hap-packager/src/subpackages/service.js b/packages/hap-packager/src/subpackages/service.js
index 80d3ab68..4e054968 100644
--- a/packages/hap-packager/src/subpackages/service.js
+++ b/packages/hap-packager/src/subpackages/service.js
@@ -6,8 +6,7 @@
 import fs from 'fs'
 import path from 'path'
 
-import { compileOptionsMeta, readJson } from '@hap-toolkit/shared-utils'
-import { calcDataDigest } from '../common/utils'
+import { compileOptionsMeta, readJson, calcDataDigest } from '@hap-toolkit/shared-utils'
 import { createFullPackage, createSubPackages } from './package'
 import { BUILD_INFO_FILE } from '../common/constant'
 
diff --git a/packages/hap-packager/src/webpack.post.js b/packages/hap-packager/src/webpack.post.js
index 74e4e4f2..904ff7b7 100644
--- a/packages/hap-packager/src/webpack.post.js
+++ b/packages/hap-packager/src/webpack.post.js
@@ -10,14 +10,16 @@ import { globalConfig, readJson, compileOptionsObject } from '@hap-toolkit/share
 import {
   WidgetFingerprintPlugin,
   CopyDslPlugin,
-  LiteCardPlugin,
+  CardPlugin,
   HandlerPlugin,
   ResourcePlugin,
   DeviceTypePlugin,
   ZipPlugin,
   NotifyPlugin,
   SourcemapFixPlugin,
-  SplitChunksAdaptPlugin
+  SplitChunksAdaptPlugin,
+  RemoveModulesPlugin,
+  CardScriptHandlePlugin
 } from './plugins'
 import { genPriorities, getBabelConfigJsPath } from './common/utils'
 import { getSkeletonConfig } from './common/info'
@@ -46,7 +48,8 @@ function postHook(webpackConf, defaultsOptions, quickappConfig = {}) {
     subpackages,
     workers,
     originType,
-    useTreeShaking
+    useTreeShaking,
+    isCardMinVersion
   } = defaultsOptions
 
   const manifestObj = readJson(path.join(pathSrc, 'manifest.json'))
@@ -123,8 +126,12 @@ function postHook(webpackConf, defaultsOptions, quickappConfig = {}) {
     )
   }
 
+  if (isCardMinVersion) {
+    // 如果工程中有卡片配置为快应用 2.0 卡片，则使用插件抽取 template 和 style 的 json
+    webpackConf.plugins.push(new CardScriptHandlePlugin({ pathSrc }), new RemoveModulesPlugin())
+  }
   webpackConf.plugins.push(
-    new LiteCardPlugin({ pathSrc }),
+    new CardPlugin({ pathSrc, isCardMinVersion }),
     // 框架Handler包装
     new HandlerPlugin({
       pathSrc: pathSrc,
diff --git a/packages/hap-shared-utils/src/index.js b/packages/hap-shared-utils/src/index.js
index 987867cb..1350de38 100644
--- a/packages/hap-shared-utils/src/index.js
+++ b/packages/hap-shared-utils/src/index.js
@@ -12,6 +12,7 @@ import chalk from 'chalk'
 import qrTerminal from 'qrcode-terminal'
 import globalConfig from './config'
 import BuildModeManager from './buildMode/BuildModeManager.js'
+import crypto from 'crypto'
 
 export { BuildModeManager, globalConfig }
 export { getLaunchPage } from './buildMode/util'
@@ -397,3 +398,40 @@ export function readJson(jsonpath) {
     }
   }
 }
+
+/**
+ * 获取 SHA256 摘要
+ * @param {Buffer} buffer - buffer
+ * @string {String<hex-string>} - hash 值
+ */
+export function calcDataDigest(buffer) {
+  const hash = crypto.createHash('SHA256')
+  hash.update(buffer)
+  return hash.digest()
+}
+
+const componentIdMap = new Map()
+const componentPathMap = new Map()
+export function getStyleObjectId(compPath) {
+  if (!componentPathMap.get(compPath)) {
+    const compId = getHash(compPath)
+    componentIdMap.set(compId, compPath)
+    componentPathMap.set(compPath, compId)
+  }
+  return componentPathMap.get(compPath)
+}
+
+function getHash(compPath) {
+  const digest = calcDataDigest(Buffer.from(compPath, 'utf-8'))
+  const digestStr = digest.toString('hex')
+  const len = Math.min(6, digestStr.length)
+  let res = compPath
+  for (let i = len; i < digestStr.length; i++) {
+    res = digestStr.substring(0, i)
+    if (componentIdMap.has(res)) {
+      continue
+    }
+    break
+  }
+  return res
+}
diff --git a/packages/hap-toolkit/__tests__/__snapshots__/appchunks.test.js.snap b/packages/hap-toolkit/__tests__/__snapshots__/appchunks.test.js.snap
index 8a574267..df5325f8 100644
--- a/packages/hap-toolkit/__tests__/__snapshots__/appchunks.test.js.snap
+++ b/packages/hap-toolkit/__tests__/__snapshots__/appchunks.test.js.snap
@@ -44,8 +44,8 @@ $app_define$('@app-component/index', [], function($app_require$, $app_exports$,
         if ($app_exports$.__esModule && $app_exports$.default) {
           $app_module$.exports = $app_exports$.default
         }
-    $app_module$.exports.template = require(\\"!../../../../../hap-dsl-xvm/lib/loaders/template-loader.js!../../../../../hap-dsl-xvm/lib/loaders/fragment-loader.js?index=0&type=template!./index.ux?uxType=card&\\")
-    $app_module$.exports.style = require(\\"!../../../../../hap-dsl-xvm/lib/loaders/style-loader.js?index=0&type=style!../../../../../hap-dsl-xvm/lib/loaders/fragment-loader.js?index=0&type=style!./index.ux?uxType=card\\")
+    $app_module$.exports.template = require(\\"!../../../../../hap-dsl-xvm/lib/loaders/template-loader.js!../../../../../hap-dsl-xvm/lib/loaders/fragment-loader.js?index=0&type=template!./index.ux?uxType=card&&card=1&uxPath=<project-root>/src/CardDemo/index.ux\\")
+    $app_module$.exports.style = require(\\"!../../../../../hap-dsl-xvm/lib/loaders/style-loader.js?index=0&type=style!../../../../../hap-dsl-xvm/lib/loaders/fragment-loader.js?index=0&type=style!./index.ux?uxType=card&card=1&uxPath=<project-root>/src/CardDemo/index.ux\\")
 });
 $app_bootstrap$('@app-component/index',{ packagerVersion: QUICKAPP_TOOLKIT_VERSION });"
 `;
@@ -251,17 +251,21 @@ exports[`split common component on a project build results include split chunks
   \\"classList\\": [
     \\"demo-page\\"
   ],
+  \\"class\\": \\"demo-page\\",
+  \\"classListRaw\\": \\"demo-page\\",
   \\"children\\": [
     {
       \\"type\\": \\"text\\",
       \\"attr\\": {
-        \\"value\\": function () {return this.text}
+        \\"value\\": \\"function () {return this.text}\\",
+        \\"valueRaw\\": \\"{{text}}\\"
       }
     },
     {
       \\"type\\": \\"text\\",
       \\"attr\\": {
-        \\"value\\": function () {return this.des}
+        \\"value\\": \\"function () {return this.des}\\",
+        \\"valueRaw\\": \\"{{des}}\\"
       }
     }
   ]
diff --git a/packages/hap-toolkit/__tests__/__snapshots__/compile.test.js.snap b/packages/hap-toolkit/__tests__/__snapshots__/compile.test.js.snap
index 22df0610..18aa009b 100644
--- a/packages/hap-toolkit/__tests__/__snapshots__/compile.test.js.snap
+++ b/packages/hap-toolkit/__tests__/__snapshots__/compile.test.js.snap
@@ -50,8 +50,8 @@ $app_define$('@app-component/index', [], function($app_require$, $app_exports$,
         if ($app_exports$.__esModule && $app_exports$.default) {
           $app_module$.exports = $app_exports$.default
         }
-    $app_module$.exports.template = require(\\"!../../../../../hap-dsl-xvm/lib/loaders/template-loader.js!../../../../../hap-dsl-xvm/lib/loaders/fragment-loader.js?index=0&type=template!./index.ux?uxType=card&\\")
-    $app_module$.exports.style = require(\\"!../../../../../hap-dsl-xvm/lib/loaders/style-loader.js?index=0&type=style!../../../../../hap-dsl-xvm/lib/loaders/fragment-loader.js?index=0&type=style!./index.ux?uxType=card\\")
+    $app_module$.exports.template = require(\\"!../../../../../hap-dsl-xvm/lib/loaders/template-loader.js!../../../../../hap-dsl-xvm/lib/loaders/fragment-loader.js?index=0&type=template!./index.ux?uxType=card&&card=1&uxPath=<project-root>/src/CardDemo/index.ux\\")
+    $app_module$.exports.style = require(\\"!../../../../../hap-dsl-xvm/lib/loaders/style-loader.js?index=0&type=style!../../../../../hap-dsl-xvm/lib/loaders/fragment-loader.js?index=0&type=style!./index.ux?uxType=card&card=1&uxPath=<project-root>/src/CardDemo/index.ux\\")
 });
 $app_bootstrap$('@app-component/index',{ packagerVersion: QUICKAPP_TOOLKIT_VERSION });"
 `;
@@ -257,17 +257,21 @@ exports[`测试compile compile build devtool=false 12`] = `
   \\"classList\\": [
     \\"demo-page\\"
   ],
+  \\"class\\": \\"demo-page\\",
+  \\"classListRaw\\": \\"demo-page\\",
   \\"children\\": [
     {
       \\"type\\": \\"text\\",
       \\"attr\\": {
-        \\"value\\": function () {return this.text}
+        \\"value\\": \\"function () {return this.text}\\",
+        \\"valueRaw\\": \\"{{text}}\\"
       }
     },
     {
       \\"type\\": \\"text\\",
       \\"attr\\": {
-        \\"value\\": function () {return this.des}
+        \\"value\\": \\"function () {return this.des}\\",
+        \\"valueRaw\\": \\"{{des}}\\"
       }
     }
   ]
@@ -290,6 +294,8 @@ Array [
   "CardDemo/index.js",
   "app.js",
   "workers/request/index.js",
+  "CardDemo/index.template.json",
+  "CardDemo/index.css.json",
 ]
 `;
 
@@ -314,7 +320,7 @@ versionCode 字段必须为 Integer 类型
 
 [LOG] ### App Loader ### 'com.application.demo.__preview__.base.srpk' 大小为 16 KB
 
-[LOG] ### App Loader ### 'com.application.demo.__preview___CardDemo.rpk' 大小为 10 KB
+[LOG] ### App Loader ### 'com.application.demo.__preview___CardDemo.rpk' 大小为 11 KB
 
 [LOG] ### App Loader ### 项目构建并生成文件：com.application.demo.__preview__.debug.1.0.0.rpks
 
@@ -326,8 +332,10 @@ exports[`测试compile compile build devtool=source-map 1`] = `
 Array [
   "app.js",
   "app.js.map",
+  "CardDemo/index.css.json",
   "CardDemo/index.js",
   "CardDemo/index.js.map",
+  "CardDemo/index.template.json",
   "Common/logo.png",
   "Common/tu.9.png",
   "Demo/index.js",
@@ -341,7 +349,9 @@ Array [
 exports[`测试compile compile release 1`] = `
 Array [
   "app.js",
+  "CardDemo/index.css.json",
   "CardDemo/index.js",
+  "CardDemo/index.template.json",
   "Common/logo.png",
   "Common/tu.9.png",
   "Demo/index.js",
@@ -352,7 +362,7 @@ Array [
 
 exports[`测试compile generate webpack config 1`] = `
 Object {
-  "CardDemo/index": "./src/CardDemo/index.ux?uxType=card",
+  "CardDemo/index": "./src/CardDemo/index.ux?uxType=card&card=1",
   "Demo/index": "./src/Demo/index.ux?uxType=page",
   "app": "./src/app.ux?uxType=app",
   "workers/request/index": "./src/workers/request/index.js",
diff --git a/packages/hap-toolkit/__tests__/__snapshots__/splitChunksWithSubPkg.test.js.snap b/packages/hap-toolkit/__tests__/__snapshots__/splitChunksWithSubPkg.test.js.snap
index e05130ef..de33a63b 100644
--- a/packages/hap-toolkit/__tests__/__snapshots__/splitChunksWithSubPkg.test.js.snap
+++ b/packages/hap-toolkit/__tests__/__snapshots__/splitChunksWithSubPkg.test.js.snap
@@ -4,6 +4,10 @@ exports[`split chunks on a project split chunks with subpackages 1`] = `
 Array [
   "app-chunks.json",
   "base/page-chunks.json",
+  "Card/CardDemo1/index.css.json",
+  "Card/CardDemo1/index.template.json",
+  "Card/CardDemo2/index.css.json",
+  "Card/CardDemo2/index.template.json",
   "manifest.json",
   "page-chunks.json",
   "Sub2/page-chunks.json",
diff --git a/packages/hap-toolkit/fixtures/com.application.demo.__preview__.debug.1.0.0.rpks b/packages/hap-toolkit/fixtures/com.application.demo.__preview__.debug.1.0.0.rpks
new file mode 100644
index 00000000..c05e2064
Binary files /dev/null and b/packages/hap-toolkit/fixtures/com.application.demo.__preview__.debug.1.0.0.rpks differ
diff --git a/packages/hap-toolkit/src/gen-webpack-conf/index.js b/packages/hap-toolkit/src/gen-webpack-conf/index.js
index d805e2ae..54c47056 100644
--- a/packages/hap-toolkit/src/gen-webpack-conf/index.js
+++ b/packages/hap-toolkit/src/gen-webpack-conf/index.js
@@ -23,7 +23,7 @@ import {
 import { name, postHook as packagerPostHook } from '@hap-toolkit/packager'
 import { postHook as xvmPostHook } from '@hap-toolkit/dsl-xvm'
 import ManifestWatchPlugin from '../plugins/manifest-watch-plugin'
-import { resolveEntries } from '../utils'
+import { resolveEntries, resolveCardMinVersion } from '../utils'
 import getDevtool from './get-devtool'
 import {
   getConfigPath,
@@ -97,6 +97,7 @@ export default async function genWebpackConf(launchOptions, mode) {
     launchOptions = Object.assign({}, launchOptions.ideConfig.cli, launchOptions)
   }
   globalConfig.launchOptions = launchOptions
+  globalConfig.mode = mode
 
   // 源代码目录
   const SRC_DIR = path.resolve(cwd, globalConfig.sourceRoot)
@@ -153,6 +154,8 @@ export default async function genWebpackConf(launchOptions, mode) {
   // 页面文件
   const entries = resolveEntries(manifest, SRC_DIR, cwd)
 
+  const isCardMinVersion = resolveCardMinVersion(manifest)
+
   // 环境变量
   const env = {
     // 平台：native
@@ -193,8 +196,10 @@ export default async function genWebpackConf(launchOptions, mode) {
   globalConfig.isSmartMode =
     compileOptionsObject.splitChunksMode === compileOptionsMeta.splitChunksModeEnum.SMART
 
+  // JS 卡由于将js assets中template和style抽取出来，如果使用缓存会编译错误。故卡片不使用缓存。
+  const isCard = Object.values(entries).some((entry) => entry.indexOf('card=1') > -1)
   let cache =
-    isJest ||
+    (isJest ||
     isProduction ||
     compileOptionsObject.disableCache ||
     // 提取公共 css 时不支持使用缓存，toolkit 内部的 cssModule 不支持缓存
@@ -210,7 +215,7 @@ export default async function genWebpackConf(launchOptions, mode) {
             config: [__filename, path.resolve(__dirname, '../../package.json')]
           },
           version: TOOLKIT_VERSION + ''
-        }
+        }) && !isCard
 
   const webpackConf = {
     context: cwd,
@@ -493,7 +498,8 @@ export default async function genWebpackConf(launchOptions, mode) {
         workers,
         cwd,
         originType: compileOptionsObject.originType,
-        ideConfig: launchOptions.ideConfig
+        ideConfig: launchOptions.ideConfig,
+        isCardMinVersion
       },
       quickappConfig
     )
diff --git a/packages/hap-toolkit/src/utils.js b/packages/hap-toolkit/src/utils.js
index 464b39da..33c850fb 100644
--- a/packages/hap-toolkit/src/utils.js
+++ b/packages/hap-toolkit/src/utils.js
@@ -107,8 +107,11 @@ export function resolveEntries(manifest, basedir, cwd) {
       let sourceFile = path.relative(cwd, filepath)
       sourceFile = './' + sourceFile + `?uxType=${type}`
       sourceFile = sourceFile.replace(/\\/g, '/')
-      if (type === ENTRY_TYPE.CARD && conf.type === 'lite') {
-        sourceFile += '&lite=1' // lite card
+      if (type === ENTRY_TYPE.CARD) {
+        sourceFile += '&card=1' // card
+        if (conf.type === 'lite') {
+          sourceFile += '&lite=1' // lite card
+        }
       }
       entries[entryKey] = sourceFile
     })
@@ -123,3 +126,28 @@ export function resolveEntries(manifest, basedir, cwd) {
   }
   return entries
 }
+export function resolveCardMinVersion(manifest) {
+  if (!manifest.router) {
+    throw Error('manifest.json 中未配置路由！')
+  }
+  let isCardMinVersion = false
+  // 卡片配置
+  const widgetsConf = manifest.router.widgets || {}
+
+  for (let key in widgetsConf) {
+    if (!widgetsConf[key].type || widgetsConf[key].type === 'js') {
+      // 针对 JS 卡的兼容
+      if (widgetsConf[key].minCardPlatformVersion) {
+        // 任意有一个 JS 卡写了 minCardPlatformVersion 字段
+        isCardMinVersion = true
+      } else {
+        // 没有 JS 卡写 minCardPlatformVersion 字段，说明是旧的 JS 卡片包
+        if (!widgetsConf[key].minPlatformVersion) {
+          // 同时没有写 minPlatformVersion 字段，提示补齐 minCardPlatformVersion
+          throw new Error(`manifest.json 中 widgets 必须包含 minCardPlatformVersion 字段`)
+        }
+      }
+    }
+  }
+  return isCardMinVersion
+}
diff --git a/packages/integration-tests/hap.test.js b/packages/integration-tests/hap.test.js
index 863dedcc..8b13bd47 100644
--- a/packages/integration-tests/hap.test.js
+++ b/packages/integration-tests/hap.test.js
@@ -53,7 +53,7 @@ describe('hap-toolkit', () => {
       expect(stderr.toString()).toMatch(/Please pick a new name/)
       await del([targetdirForExist, targetdirForNonExist], { force: true })
     },
-    10 * 60 * 1000
+    100 * 60 * 1000
   )
 
   it(