修复 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

@@ -6,7 +6,7 @@ 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';
+import { getIsPinia } from '../jsUtils.js';
 
 /**
  * 找到Object的key和value
@@ -392,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));
           })
         )
       ),

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

@@ -206,6 +206,10 @@ export function createNodeByVueVariable(name, reactCovert, path) {
   // 处理特殊的 $ 开头的属性
   else if (name.startsWith('$')) {
     switch (name) {
+      case '$event': {
+        // 将模板中的 $event 识别为当前事件参数 e
+        return t.identifier('e');
+      }
       case '$emit': {
         // 将模板中的 $emit(...) 统一映射为 emit(...)
         // 若不存在 emit，则自动注入: const emit = defineEmits(props);

packages/vue-to-horizon/libs/horizon-vue/src/next/convert/jsx/stringRegexHandler.js

@@ -196,6 +196,20 @@ const convertJsxNoCloseTag = input => {
   return input.replaceAll(/<br>/g, '<br/>');
 };
 
+// 支持动态事件/指令参数归一化
+const normalizeDynamicDirectiveArgs = input => {
+  // @[] 动态事件到 v-on:
+  let result = input.replace(/@\[(.*?)\]((\.[a-z0-9]+)*)(="[^"]*")?/gi, (m, name, modifiers, _, handler = '') => {
+    const modStr = (modifiers || '').replace(/\./g, '__');
+    return `v-on:${name}${modStr}${handler || ''}`;
+  });
+  // v-on:[] -> v-on:
+  result = result.replace(/v-on:\[([^\]]+)\]/gi, (m, name) => `v-on:${name}`);
+  // 通用 v-xxx:[arg] -> v-xxx:arg
+  result = result.replace(/v-([a-zA-Z-]+):\[([^\]]+)\]/g, (m, dir, arg) => `v-${dir}:${arg}`);
+  return result;
+};
+
 // 正则表达式匹配 v-model.xxx 语法
 const regex = /v-model\.(\w+)/g;
 const removeModelModifiers = input => {
@@ -215,6 +229,7 @@ const DefaultHardCodeHandler = {
   JSXNotes: convertJSXNotes,
   DynamicBinding: convertVueBindingToReact,
   ShortBinding: convertVBindShorthand,
+  DynamicArgs: normalizeDynamicDirectiveArgs,
   ShortOn: convertVueShortEventToReact,
   ShortSlot: convertVueShortSlotToReact,
   vShow: transformVShowSyntax,