提供转换为module less的写法的快速修复

src/extension.ts

@@ -38,6 +38,7 @@ import {
     activateTriggerPlugin,
     deactivateTriggerPlugin,
 } from './plugins/oakTriggers';
+import { activateStyleConvert, deactivateStyleConvert } from './plugins/StyleConvert';
 
 // 初始化配置
 // 查找工作区的根目录中的oak.config.json文件，排除src和node_modules目录
@@ -189,6 +190,7 @@ export async function activate(context: vscode.ExtensionContext) {
                 ...oakPathHighlighter
             );
             createFileWatcher(context);
+            activateStyleConvert(context);
         } catch (error) {
             console.error('激活插件时出错:', error);
         }
@@ -273,4 +275,5 @@ export function deactivate() {
     deactivateOakLocale();
     deactivateOakComponentPropsLinkProvider();
     stopWorker();
+    deactivateStyleConvert();
 }

src/plugins/styleConvert.ts

@@ -0,0 +1,62 @@
+import * as vscode from 'vscode';
+
+class ClassNameConversionProvider implements vscode.CodeActionProvider {
+    public provideCodeActions(
+        document: vscode.TextDocument,
+        range: vscode.Range,
+        context: vscode.CodeActionContext,
+        token: vscode.CancellationToken
+    ): vscode.CodeAction[] | undefined {
+        const classNameAttr = this.getClassNameAttr(document, range);
+        if (!classNameAttr) {
+            return;
+        }
+
+        const fix = new vscode.CodeAction('转换为ModuleLess写法', vscode.CodeActionKind.QuickFix);
+        fix.edit = new vscode.WorkspaceEdit();
+        fix.edit.replace(
+            document.uri,
+            classNameAttr.range,
+            this.convertToModuleStyle(classNameAttr.text)
+        );
+
+        return [fix];
+    }
+
+    private getClassNameAttr(document: vscode.TextDocument, range: vscode.Range): { text: string, range: vscode.Range } | undefined {
+        const line = document.lineAt(range.start.line);
+        const classNameMatch = line.text.match(/className\s*=\s*(['"])([^'"]+)(['"])/);
+        if (classNameMatch) {
+            const start = line.text.indexOf(classNameMatch[0]);
+            const end = start + classNameMatch[0].length;
+            return {
+                text: classNameMatch[0],
+                range: new vscode.Range(range.start.line, start, range.start.line, end)
+            };
+        }
+    }
+
+    private convertToModuleStyle(classNameAttr: string): string {
+        const classes = classNameAttr.match(/(['"])([^'"]+)(['"])/)?.[2];
+        const convertedClasses = classes?.split(' ')
+            .map(cls => `\${Styles.${cls}}`)
+            .join(' ');
+        return `className={\`${convertedClasses}\`}`;
+    }
+}
+
+const provider = vscode.languages.registerCodeActionsProvider(
+    { scheme: 'file', language: 'typescriptreact' },
+    new ClassNameConversionProvider(),
+    {
+        providedCodeActionKinds: [vscode.CodeActionKind.QuickFix]
+    }
+);
+
+export function activateStyleConvert(context: vscode.ExtensionContext) {
+    context.subscriptions.push(provider);
+}
+
+export function deactivateStyleConvert() {
+    provider.dispose();
+}