修复 ElSelect 模板解析失败-v-click-outside、class和@[]形式的属性不支持，并修复了 Option API components 里映射缺失导致的属性名 undefined 问题

Author: YunWren

packages/vue-to-horizon/libs/horizon-vue/src/next/convert/js/handlers/optionParserHandler.js

@@ -1,11 +1,12 @@
-import t from '@babel/types';
-import LOG from '../../../logHelper.js';
-import { globalLibPaths } from '../../defaultConfig.js';
-import { addInstance } from '../../jsx/handlers/instanceHandler.js';
-import { JSErrors } from '../../../errors.js';
-import { DATA_REACTIVE, INSTANCE } from '../../jsx/consts.js';
-import { watchParser } from './watchHandler.js';
-import { propsParser } from './propsHandler.js';
+import t from '@babel/types'
+import LOG from '../../../logHelper.js'
+import { globalLibPaths } from '../../defaultConfig.js'
+import { addInstance } from '../../jsx/handlers/instanceHandler.js'
+import { JSErrors } from '../../../errors.js'
+import { DATA_REACTIVE, INSTANCE } from '../../jsx/consts.js'
+import { watchParser } from './watchHandler.js'
+import { propsParser } from './propsHandler.js'
+import { getIsPinia } from '../jsUtils.js';
 
 /**
  * 找到Object的key和value
@@ -116,6 +117,7 @@ function computedParser(ast, reactCovert) {
     let computedBody = null;
     if (prop.type === 'SpreadElement') {
       /*
+        vuex中需要讲mapState转成useMapState， pinia不需要
         computed: {
           ...mapState('counter', ['count']),
         }
@@ -124,7 +126,8 @@ function computedParser(ast, reactCovert) {
         */
       if (prop.argument.type === 'CallExpression') {
         const callName = prop.argument.callee.name;
-        const ags0 = prop.argument.arguments[0];
+        const isPinia = getIsPinia(reactCovert);
+        const ags0 = prop.argument.arguments[isPinia ? 1 : 0];
         let outKeys = [];
         let outputsNode = null;
         // 存在vuex的模块定义
@@ -143,10 +146,10 @@ function computedParser(ast, reactCovert) {
             });
           }
         }
-
+        const newCallName = isPinia ? callName : globalLibPaths.vuex.imports[callName];
         // 创建函数调用表达式 xx('')
         const functionCallExpression = t.callExpression(
-          t.identifier(globalLibPaths.vuex.imports[callName] || callName),
+          t.identifier(newCallName),
           prop.argument.arguments
         );
 
@@ -221,24 +224,26 @@ function computedParser(ast, reactCovert) {
 }
 
 function methodsParser(ast, reactCovert) {
+  // vuex中需要讲mapState转成useMapState， pinia不需要
   const methodNames = [];
   ast?.properties.forEach(prop => {
     let computedBody = null;
     if (prop.type === 'SpreadElement') {
       if (prop.argument.type === 'CallExpression') {
+        const isPinia = getIsPinia(reactCovert);
         const callName = prop.argument.callee.name;
-        const ags0 = prop.argument.arguments[0];
+        const mapAttrParam = prop.argument.arguments[isPinia ? 1 : 0];
         let outKeys = [];
         let outputsNode = null;
         // 存在vuex的模块定义
-        if (ags0.type === 'ObjectExpression') {
-          const { keys } = findObjectExpressionKeyAndValue(ags0);
+        if (mapAttrParam.type === 'ObjectExpression') {
+          const { keys } = findObjectExpressionKeyAndValue(mapAttrParam);
           outKeys = keys;
         } else {
-          if (ags0.type === 'StringLiteral') {
+          if (mapAttrParam.type === 'StringLiteral') {
             outputsNode = prop.argument.arguments?.[1];
-          } else if (ags0.type === 'ArrayExpression') {
-            outputsNode = ags0;
+          } else if (mapAttrParam.type === 'ArrayExpression') {
+            outputsNode = mapAttrParam;
           }
           if (outputsNode && outputsNode.type === 'ArrayExpression') {
             outputsNode.elements.forEach(v => {
@@ -247,10 +252,10 @@ function methodsParser(ast, reactCovert) {
             });
           }
         }
-
+        const newCallName = isPinia ? callName : globalLibPaths.vuex.imports[callName]
         // 创建函数调用表达式 xx('')
         const functionCallExpression = t.callExpression(
-          t.identifier(globalLibPaths.vuex.imports[callName] || callName),
+          t.identifier(newCallName),
           prop.argument.arguments
         );
 
@@ -298,11 +303,16 @@ function methodsParser(ast, reactCovert) {
 
     // 创建 methods 对象
     const methodsObject = t.objectExpression(
-      methodNames.map(name => t.objectProperty(t.identifier(name), t.identifier(name), false, true))
+      methodNames.map(name =>
+        t.objectProperty(t.identifier(name), t.identifier(name), false, true)
+      )
     );
 
     // 创建 setToInstance 函数调用
-    const setToInstanceCall = t.callExpression(t.identifier('setToInstance'), [t.identifier(INSTANCE), methodsObject]);
+    const setToInstanceCall = t.callExpression(t.identifier('setToInstance'), [
+      t.identifier(INSTANCE),
+      methodsObject
+    ]);
 
     // 创建表达式语句
     const expressionStatement = t.expressionStatement(setToInstanceCall);
@@ -382,8 +392,10 @@ function componentsParser(ast, reactCovert) {
         t.identifier('components'),
         t.objectExpression(
           ast.properties.map(node => {
-            const name = reactCovert.sourceCodeContext.optionTypeRegistComponentMap.get(node.key.name);
-            return t.objectProperty(t.identifier(node.key.name), t.identifier(name));
+            const keyName = node.key.name || node.key.value;
+            const mapped = reactCovert.sourceCodeContext.optionTypeRegistComponentMap.get(keyName);
+            const targetName = mapped || keyName;
+            return t.objectProperty(t.identifier(keyName), t.identifier(targetName));
           })
         )
       ),