VS Code 扩展开发阶段八：综合实战项目 - 从设计到发布的完整开发流程

// 基础技术栈
- TypeScript 5.0+          // 类型安全的JavaScript
- VS Code API 1.74+        // VS Code扩展API
- Node.js 18+              // 运行时环境

// 前端技术栈  
- React 18 / Vue 3         // 现代前端框架
- WebView API              // VS Code内嵌网页
- CSS3 + Tailwind          // 样式方案

// 数据存储
- IndexedDB                // 浏览器端数据库
- SQLite                   // 轻量级关系数据库
- File System API          // 文件系统操作

// AI集成
- OpenAI API               // GPT模型接口
- Local LLM                // 本地大模型
- Prompt Engineering       // 提示工程

// 工具链
- Webpack                  // 模块打包
- Jest + @vscode/test     // 测试框架
- ESLint + Prettier       // 代码质量
- GitHub Actions          // CI/CD

// src/extension.ts
import * as vscode from 'vscode';
import { AIService } from './services/aiService';
import { CodeAnalyzer } from './services/codeAnalyzer';
import { ChatWebviewProvider } from './webview/chatWebviewProvider';
import { CommandHandler } from './commands/commandHandler';

export async function activate(context: vscode.ExtensionContext) {
    console.log('AI Code Assistant is now active!');
    
    // 初始化服务
    const aiService = new AIService();
    const codeAnalyzer = new CodeAnalyzer();
    const chatProvider = new ChatWebviewProvider(context.extensionUri, aiService);
    const commandHandler = new CommandHandler(aiService, codeAnalyzer);
    
    // 注册WebView Provider
    context.subscriptions.push(
        vscode.window.registerWebviewViewProvider(
            'aiAssistantView',
            chatProvider
        )
    );
    
    // 注册命令
    const commands = [
        vscode.commands.registerCommand('aiAssistant.generateCode', 
            commandHandler.generateCode.bind(commandHandler)
        ),
        vscode.commands.registerCommand('aiAssistant.explainCode', 
            commandHandler.explainCode.bind(commandHandler)
        ),
        vscode.commands.registerCommand('aiAssistant.optimizeCode', 
            commandHandler.optimizeCode.bind(commandHandler)
        ),
        vscode.commands.registerCommand('aiAssistant.generateTests', 
            commandHandler.generateTests.bind(commandHandler)
        ),
        vscode.commands.registerCommand('aiAssistant.generateDocs', 
            commandHandler.generateDocs.bind(commandHandler)
        ),
        vscode.commands.registerCommand('aiAssistant.openChat', 
            () => chatProvider.show()
        )
    ];
    
    context.subscriptions.push(...commands);
    
    // 设置上下文变量
    vscode.commands.executeCommand('setContext', 'aiAssistant.enabled', true);
    
    // 监听配置变化
    context.subscriptions.push(
        vscode.workspace.onDidChangeConfiguration(event => {
            if (event.affectsConfiguration('aiAssistant')) {
                aiService.updateConfiguration();
            }
        })
    );
}

// src/services/aiService.ts
import * as vscode from 'vscode';
import OpenAI from 'openai';

export interface AIRequest {
    prompt: string;
    context?: string;
    language?: string;
    temperature?: number;
}

export interface AIResponse {
    content: string;
    usage?: {
        prompt_tokens: number;
        completion_tokens: number;
        total_tokens: number;
    };
}

export class AIService {
    private openai: OpenAI | null = null;
    private config: vscode.WorkspaceConfiguration;
    
    constructor() {
        this.updateConfiguration();
    }
    
    updateConfiguration() {
        this.config = vscode.workspace.getConfiguration('aiAssistant');
        const apiKey = this.config.get<string>('apiKey');
        
        if (apiKey) {
            this.openai = new OpenAI({
                apiKey: apiKey
            });
        }
    }
    
    async generateCode(request: AIRequest): Promise<AIResponse> {
        if (!this.openai) {
            throw new Error('AI service not configured. Please set your API key.');
        }
        
        const systemPrompt = `You are an expert programmer. Generate clean, efficient, and well-commented code based on the user's requirements. 
        
Language: ${request.language || 'TypeScript'}
Context: ${request.context || 'No additional context'}

Please provide only the code without explanations unless specifically requested.`;
        
        try {
            const completion = await this.openai.chat.completions.create({
                model: this.config.get<string>('model') || 'gpt-3.5-turbo',
                messages: [
                    { role: 'system', content: systemPrompt },
                    { role: 'user', content: request.prompt }
                ],
                max_tokens: this.config.get<number>('maxTokens') || 2048,
                temperature: request.temperature || 0.3
            });
            
            const response = completion.choices[0]?.message?.content || '';
            
            return {
                content: response,
                usage: completion.usage ? {
                    prompt_tokens: completion.usage.prompt_tokens,
                    completion_tokens: completion.usage.completion_tokens,
                    total_tokens: completion.usage.total_tokens
                } : undefined
            };
        } catch (error) {
            console.error('AI Service Error:', error);
            throw new Error(`AI request failed: ${error.message}`);
        }
    }
    
    async explainCode(code: string, language: string): Promise<AIResponse> {
        const prompt = `Explain the following ${language} code in detail. Include:
1. What the code does
2. How it works
3. Any patterns or best practices used
4. Potential improvements or concerns

Code:
\`\`\`${language}
${code}
\`\`\``;
        
        return this.generateCode({
            prompt,
            language,
            temperature: 0.2
        });
    }
    
    async optimizeCode(code: string, language: string): Promise<AIResponse> {
        const prompt = `Analyze and optimize the following ${language} code. Provide:
1. Optimized version of the code
2. Explanation of improvements made
3. Performance benefits
4. Any trade-offs to consider

Original code:
\`\`\`${language}
${code}
\`\`\``;
        
        return this.generateCode({
            prompt,
            language,
            temperature: 0.1
        });
    }
    
    async generateTests(code: string, language: string): Promise<AIResponse> {
        const framework = this.getTestFramework(language);
        
        const prompt = `Generate comprehensive unit tests for the following ${language} code using ${framework}. Include:
1. Test cases for normal operation
2. Edge cases and error handling
3. Mock dependencies if needed
4. Clear test descriptions

Code to test:
\`\`\`${language}
${code}
\`\`\``;
        
        return this.generateCode({
            prompt,
            language,
            temperature: 0.2
        });
    }
    
    async generateDocumentation(code: string, language: string): Promise<AIResponse> {
        const prompt = `Generate comprehensive documentation for the following ${language} code. Include:
1. Function/class description
2. Parameter descriptions with types
3. Return value description
4. Usage examples
5. Any side effects or important notes

Code:
\`\`\`${language}
${code}
\`\`\``;
        
        return this.generateCode({
            prompt,
            language,
            temperature: 0.1
        });
    }
    
    private getTestFramework(language: string): string {
        const frameworks: Record<string, string> = {
            'typescript': 'Jest',
            'javascript': 'Jest',
            'python': 'pytest',
            'java': 'JUnit',
            'csharp': 'MSTest',
            'go': 'Go testing package'
        };
        
        return frameworks[language] || 'appropriate testing framework';
    }
}

// src/services/codeAnalyzer.ts
import * as vscode from 'vscode';
import * as ts from 'typescript';

export interface CodeContext {
    selectedText: string;
    fileName: string;
    language: string;
    lineNumber: number;
    functionContext?: string;
    classContext?: string;
    imports?: string[];
}

export class CodeAnalyzer {
    
    async getCodeContext(): Promise<CodeContext | null> {
        const editor = vscode.window.activeTextEditor;
        if (!editor) {
            return null;
        }
        
        const document = editor.document;
        const selection = editor.selection;
        const selectedText = document.getText(selection);
        
        if (!selectedText) {
            vscode.window.showWarningMessage('请选择要分析的代码');
            return null;
        }
        
        const context: CodeContext = {
            selectedText,
            fileName: document.fileName,
            language: document.languageId,
            lineNumber: selection.start.line + 1
        };
        
        // 为TypeScript/JavaScript提供更详细的上下文
        if (document.languageId === 'typescript' || document.languageId === 'javascript') {
            this.enhanceTypeScriptContext(context, document, selection);
        }
        
        return context;
    }
    
    private enhanceTypeScriptContext(
        context: CodeContext, 
        document: vscode.TextDocument, 
        selection: vscode.Selection
    ) {
        try {
            const sourceFile = ts.createSourceFile(
                document.fileName,
                document.getText(),
                ts.ScriptTarget.Latest,
                true
            );
            
            const position = document.offsetAt(selection.start);
            
            // 查找包含选择文本的函数
            const functionNode = this.findContainingFunction(sourceFile, position);
            if (functionNode) {
                context.functionContext = document.getText(
                    new vscode.Range(
                        document.positionAt(functionNode.getStart()),
                        document.positionAt(functionNode.getEnd())
                    )
                );
            }
            
            // 查找包含选择文本的类
            const classNode = this.findContainingClass(sourceFile, position);
            if (classNode) {
                context.classContext = document.getText(
                    new vscode.Range(
                        document.positionAt(classNode.getStart()),
                        document.positionAt(classNode.getEnd())
                    )
                );
            }
            
            // 提取导入语句
            context.imports = this.extractImports(sourceFile);
            
        } catch (error) {
            console.error('TypeScript analysis error:', error);
        }
    }
    
    private findContainingFunction(node: ts.Node, position: number): ts.FunctionLikeDeclaration | null {
        if (ts.isFunctionLike(node) && 
            position >= node.getStart() && 
            position <= node.getEnd()) {
            return node;
        }
        
        for (const child of node.getChildren()) {
            const result = this.findContainingFunction(child, position);
            if (result) {
                return result;
            }
        }
        
        return null;
    }
    
    private findContainingClass(node: ts.Node, position: number): ts.ClassDeclaration | null {
        if (ts.isClassDeclaration(node) && 
            position >= node.getStart() && 
            position <= node.getEnd()) {
            return node;
        }
        
        for (const child of node.getChildren()) {
            const result = this.findContainingClass(child, position);
            if (result) {
                return result;
            }
        }
        
        return null;
    }
    
    private extractImports(sourceFile: ts.SourceFile): string[] {
        const imports: string[] = [];
        
        ts.forEachChild(sourceFile, node => {
            if (ts.isImportDeclaration(node)) {
                imports.push(node.getFullText().trim());
            }
        });
        
        return imports;
    }
    
    detectLanguageFramework(document: vscode.TextDocument): string {
        const content = document.getText();
        const frameworks: Record<string, RegExp[]> = {
            'React': [/import.*react/i, /jsx/i, /useState|useEffect/i],
            'Vue': [/import.*vue/i, /<template>/i, /defineComponent/i],
            'Angular': [/import.*@angular/i, /@Component/i, /@Injectable/i],
            'Express': [/import.*express/i, /app\.get|app\.post/i],
            'NestJS': [/import.*@nestjs/i, /@Controller|@Injectable/i]
        };
        
        for (const [framework, patterns] of Object.entries(frameworks)) {
            if (patterns.some(pattern => pattern.test(content))) {
                return framework;
            }
        }
        
        return 'Unknown';
    }
}

// src/commands/commandHandler.ts
import * as vscode from 'vscode';
import { AIService } from '../services/aiService';
import { CodeAnalyzer } from '../services/codeAnalyzer';

export class CommandHandler {
    constructor(
        private aiService: AIService,
        private codeAnalyzer: CodeAnalyzer
    ) {}
    
    async generateCode() {
        const prompt = await vscode.window.showInputBox({
            prompt: '描述你想要生成的代码功能',
            placeHolder: '例如：创建一个用户注册的API接口',
            value: ''
        });
        
        if (!prompt) {
            return;
        }
        
        const editor = vscode.window.activeTextEditor;
        const language = editor?.document.languageId || 'typescript';
        
        // 显示进度
        await vscode.window.withProgress({
            location: vscode.ProgressLocation.Notification,
            title: "AI正在生成代码...",
            cancellable: false
        }, async (progress) => {
            try {
                progress.report({ increment: 30, message: "分析需求中..." });
                
                const response = await this.aiService.generateCode({
                    prompt,
                    language,
                    context: await this.getProjectContext()
                });
                
                progress.report({ increment: 70, message: "生成代码中..." });
                
                await this.insertGeneratedCode(response.content);
                
                // 显示token使用情况
                if (response.usage) {
                    vscode.window.showInformationMessage(
                        `代码已生成！Token使用: ${response.usage.total_tokens}`
                    );
                }
                
            } catch (error) {
                vscode.window.showErrorMessage(`代码生成失败: ${error.message}`);
            }
        });
    }
    
    async explainCode() {
        const context = await this.codeAnalyzer.getCodeContext();
        if (!context) {
            return;
        }
        
        await vscode.window.withProgress({
            location: vscode.ProgressLocation.Notification,
            title: "AI正在分析代码...",
            cancellable: false
        }, async () => {
            try {
                const response = await this.aiService.explainCode(
                    context.selectedText,
                    context.language
                );
                
                // 在新的编辑器标签页中显示解释
                const document = await vscode.workspace.openTextDocument({
                    content: this.formatExplanation(response.content, context),
                    language: 'markdown'
                });
                
                await vscode.window.showTextDocument(document);
                
            } catch (error) {
                vscode.window.showErrorMessage(`代码解释失败: ${error.message}`);
            }
        });
    }
    
    async optimizeCode() {
        const context = await this.codeAnalyzer.getCodeContext();
        if (!context) {
            return;
        }
        
        await vscode.window.withProgress({
            location: vscode.ProgressLocation.Notification,
            title: "AI正在优化代码...",
            cancellable: false
        }, async () => {
            try {
                const response = await this.aiService.optimizeCode(
                    context.selectedText,
                    context.language
                );
                
                // 显示优化建议和对比
                await this.showOptimizationResult(context, response.content);
                
            } catch (error) {
                vscode.window.showErrorMessage(`代码优化失败: ${error.message}`);
            }
        });
    }
    
    async generateTests() {
        const context = await this.codeAnalyzer.getCodeContext();
        if (!context) {
            return;
        }
        
        await vscode.window.withProgress({
            location: vscode.ProgressLocation.Notification,
            title: "AI正在生成测试...",
            cancellable: false
        }, async () => {
            try {
                const response = await this.aiService.generateTests(
                    context.selectedText,
                    context.language
                );
                
                // 创建测试文件
                await this.createTestFile(context, response.content);
                
            } catch (error) {
                vscode.window.showErrorMessage(`测试生成失败: ${error.message}`);
            }
        });
    }
    
    async generateDocs() {
        const context = await this.codeAnalyzer.getCodeContext();
        if (!context) {
            return;
        }
        
        await vscode.window.withProgress({
            location: vscode.ProgressLocation.Notification,
            title: "AI正在生成文档...",
            cancellable: false
        }, async () => {
            try {
                const response = await this.aiService.generateDocumentation(
                    context.selectedText,
                    context.language
                );
                
                // 在当前位置插入文档注释
                await this.insertDocumentation(context, response.content);
                
            } catch (error) {
                vscode.window.showErrorMessage(`文档生成失败: ${error.message}`);
            }
        });
    }
    
    private async getProjectContext(): Promise<string> {
        const workspaceFolder = vscode.workspace.workspaceFolders?.[0];
        if (!workspaceFolder) {
            return '';
        }
        
        // 读取package.json获取项目信息
        try {
            const packageJsonUri = vscode.Uri.joinPath(workspaceFolder.uri, 'package.json');
            const packageJsonDoc = await vscode.workspace.openTextDocument(packageJsonUri);
            const packageJson = JSON.parse(packageJsonDoc.getText());
            
            return `项目: ${packageJson.name}, 描述: ${packageJson.description}, 依赖: ${Object.keys(packageJson.dependencies || {}).join(', ')}`;
        } catch {
            return `工作区: ${workspaceFolder.name}`;
        }
    }
    
    private async insertGeneratedCode(code: string) {
        const editor = vscode.window.activeTextEditor;
        if (!editor) {
            return;
        }
        
        // 清理生成的代码（移除markdown标记）
        const cleanCode = this.cleanGeneratedCode(code);
        
        await editor.edit(editBuilder => {
            editBuilder.insert(editor.selection.active, cleanCode);
        });
        
        // 自动格式化
        await vscode.commands.executeCommand('editor.action.formatDocument');
    }
    
    private cleanGeneratedCode(code: string): string {
        // 移除markdown代码块标记
        return code
            .replace(/^```[\w]*\n/, '')
            .replace(/\n```$/, '')
            .trim();
    }
    
    private formatExplanation(explanation: string, context: any): string {
        return `# 代码解释

## 分析的代码
\`\`\`${context.language}
${context.selectedText}
\`\`\`

## 文件信息
- **文件**: ${context.fileName}
- **语言**: ${context.language}
- **行号**: ${context.lineNumber}

## 详细解释

${explanation}

---
*由 AI Code Assistant 生成于 ${new Date().toLocaleString()}*
`;
    }
    
    private async showOptimizationResult(context: any, optimization: string) {
        const document = await vscode.workspace.openTextDocument({
            content: `# 代码优化建议

## 原始代码
\`\`\`${context.language}
${context.selectedText}
\`\`\`

## 优化建议

${optimization}

---
*由 AI Code Assistant 生成于 ${new Date().toLocaleString()}*
`,
            language: 'markdown'
        });
        
        await vscode.window.showTextDocument(document);
    }
    
    private async createTestFile(context: any, testCode: string) {
        const editor = vscode.window.activeTextEditor;
        if (!editor) {
            return;
        }
        
        // 生成测试文件名
        const originalPath = editor.document.uri.fsPath;
        const testPath = originalPath.replace(/\.(ts|js)$/, '.test.$1');
        
        try {
            const testUri = vscode.Uri.file(testPath);
            const testContent = `// 由 AI Code Assistant 自动生成的测试文件
// 生成时间: ${new Date().toLocaleString()}

${this.cleanGeneratedCode(testCode)}
`;
            
            await vscode.workspace.fs.writeFile(testUri, Buffer.from(testContent, 'utf8'));
            const testDocument = await vscode.workspace.openTextDocument(testUri);
            await vscode.window.showTextDocument(testDocument);
            
            vscode.window.showInformationMessage(`测试文件已创建: ${testPath}`);
        } catch (error) {
            vscode.window.showErrorMessage(`创建测试文件失败: ${error.message}`);
        }
    }
    
    private async insertDocumentation(context: any, documentation: string) {
        const editor = vscode.window.activeTextEditor;
        if (!editor) {
            return;
        }
        
        // 找到选择文本的开始位置，在其前面插入文档注释
        const startLine = editor.selection.start.line;
        const insertPosition = new vscode.Position(startLine, 0);
        
        const docComment = this.formatDocComment(documentation, context.language);
        
        await editor.edit(editBuilder => {
            editBuilder.insert(insertPosition, docComment + '\n');
        });
    }
    
    private formatDocComment(documentation: string, language: string): string {
        // 清理和格式化文档注释
        const cleanDoc = this.cleanGeneratedCode(documentation);
        
        if (language === 'typescript' || language === 'javascript') {
            // JSDoc格式
            return `/**\n${cleanDoc.split('\n').map(line => ` * ${line}`).join('\n')}\n */`;
        } else if (language === 'python') {
            // Python docstring格式
            return `"""\n${cleanDoc}\n"""`;
        } else {
            // 通用注释格式
            return cleanDoc.split('\n').map(line => `// ${line}`).join('\n');
        }
    }
}

// src/webview/chatWebviewProvider.ts
import * as vscode from 'vscode';
import { AIService } from '../services/aiService';

export class ChatWebviewProvider implements vscode.WebviewViewProvider {
    public static readonly viewType = 'aiAssistantView';
    
    private _view?: vscode.WebviewView;
    
    constructor(
        private readonly _extensionUri: vscode.Uri,
        private readonly _aiService: AIService
    ) {}
    
    public resolveWebviewView(
        webviewView: vscode.WebviewView,
        context: vscode.WebviewViewResolveContext,
        _token: vscode.CancellationToken,
    ) {
        this._view = webviewView;
        
        webviewView.webview.options = {
            enableScripts: true,
            localResourceRoots: [this._extensionUri]
        };
        
        webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
        
        // 处理来自WebView的消息
        webviewView.webview.onDidReceiveMessage(async (data) => {
            switch (data.type) {
                case 'sendMessage':
                    await this.handleUserMessage(data.message);
                    break;
                case 'clearChat':
                    this.clearChat();
                    break;
                case 'insertCode':
                    await this.insertCodeToEditor(data.code);
                    break;
            }
        });
    }
    
    public show() {
        if (this._view) {
            this._view.show?.(true);
        }
    }
    
    private async handleUserMessage(message: string) {
        if (!this._view) {
            return;
        }
        
        // 显示用户消息
        this._view.webview.postMessage({
            type: 'addMessage',
            message: {
                role: 'user',
                content: message,
                timestamp: new Date().toISOString()
            }
        });
        
        // 显示加载状态
        this._view.webview.postMessage({
            type: 'setLoading',
            loading: true
        });
        
        try {
            // 获取当前编辑器上下文
            const context = await this.getCurrentContext();
            
            const response = await this._aiService.generateCode({
                prompt: message,
                context: context,
                language: this.getCurrentLanguage()
            });
            
            // 显示AI回复
            this._view.webview.postMessage({
                type: 'addMessage',
                message: {
                    role: 'assistant',
                    content: response.content,
                    timestamp: new Date().toISOString(),
                    usage: response.usage
                }
            });
            
        } catch (error) {
            this._view.webview.postMessage({
                type: 'addMessage',
                message: {
                    role: 'error',
                    content: `Error: ${error.message}`,
                    timestamp: new Date().toISOString()
                }
            });
        } finally {
            this._view.webview.postMessage({
                type: 'setLoading',
                loading: false
            });
        }
    }
    
    private clearChat() {
        if (this._view) {
            this._view.webview.postMessage({
                type: 'clearMessages'
            });
        }
    }
    
    private async insertCodeToEditor(code: string) {
        const editor = vscode.window.activeTextEditor;
        if (!editor) {
            vscode.window.showWarningMessage('请先打开一个文件');
            return;
        }
        
        await editor.edit(editBuilder => {
            editBuilder.insert(editor.selection.active, code);
        });
        
        // 自动格式化
        await vscode.commands.executeCommand('editor.action.formatDocument');
    }
    
    private async getCurrentContext(): Promise<string> {
        const editor = vscode.window.activeTextEditor;
        if (!editor) {
            return '';
        }
        
        const document = editor.document;
        const selection = editor.selection;
        
        if (!selection.isEmpty) {
            return `当前选中的代码:\n${document.getText(selection)}`;
        }
        
        // 获取当前函数上下文
        const currentLine = document.lineAt(selection.active.line);
        const functionContext = this.findFunctionContext(document, selection.active.line);
        
        return functionContext || `当前行: ${currentLine.text}`;
    }
    
    private findFunctionContext(document: vscode.TextDocument, lineNumber: number): string {
        // 简单的函数查找逻辑
        for (let i = lineNumber; i >= 0; i--) {
            const line = document.lineAt(i).text;
            if (line.match(/function\s+\w+|const\s+\w+\s*=.*=>|class\s+\w+/)) {
                return line.trim();
            }
        }
        return '';
    }
    
    private getCurrentLanguage(): string {
        const editor = vscode.window.activeTextEditor;
        return editor?.document.languageId || 'typescript';
    }
    
    private _getHtmlForWebview(webview: vscode.Webview) {
        const styleResetUri = webview.asWebviewUri(
            vscode.Uri.joinPath(this._extensionUri, 'media', 'reset.css')
        );
        const styleVSCodeUri = webview.asWebviewUri(
            vscode.Uri.joinPath(this._extensionUri, 'media', 'vscode.css')
        );
        const styleMainUri = webview.asWebviewUri(
            vscode.Uri.joinPath(this._extensionUri, 'media', 'main.css')
        );
        const scriptUri = webview.asWebviewUri(
            vscode.Uri.joinPath(this._extensionUri, 'media', 'main.js')
        );
        
        const nonce = getNonce();
        
        return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource} 'unsafe-inline'; script-src 'nonce-${nonce}'; font-src ${webview.cspSource};">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="${styleResetUri}" rel="stylesheet">
    <link href="${styleVSCodeUri}" rel="stylesheet">
    <link href="${styleMainUri}" rel="stylesheet">
    <title>AI Assistant</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>AI Code Assistant</h2>
            <button id="clearBtn" class="btn-secondary">清空对话</button>
        </div>
        
        <div id="chatContainer" class="chat-container">
            <div class="welcome-message">
                <h3>👋 欢迎使用AI代码助手</h3>
                <p>我可以帮助你：</p>
                <ul>
                    <li>生成代码片段</li>
                    <li>解释复杂代码</li>
                    <li>优化代码性能</li>
                    <li>生成单元测试</li>
                    <li>编写技术文档</li>
                </ul>
            </div>
        </div>
        
        <div class="input-container">
            <div class="input-wrapper">
                <textarea 
                    id="messageInput" 
                    placeholder="输入你的问题或需求..." 
                    rows="3"
                ></textarea>
                <button id="sendBtn" class="btn-primary">发送</button>
            </div>
            <div id="loadingIndicator" class="loading" style="display: none;">
                <div class="spinner"></div>
                <span>AI思考中...</span>
            </div>
        </div>
    </div>
    
    <script nonce="${nonce}" src="${scriptUri}"></script>
</body>
</html>`;
    }
}

function getNonce() {
    let text = '';
    const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    for (let i = 0; i < 32; i++) {
        text += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
}

// src/test/suite/aiService.test.ts
import * as assert from 'assert';
import { AIService } from '../../services/aiService';

suite('AI Service Tests', () => {
    let aiService: AIService;
    
    setup(() => {
        aiService = new AIService();
    });
    
    test('should handle code generation request', async () => {
        const request = {
            prompt: 'Create a simple hello world function',
            language: 'typescript'
        };
        
        // Mock的实现，实际测试中需要使用真实的API或Mock
        // const response = await aiService.generateCode(request);
        // assert.ok(response.content.length > 0);
    });
    
    test('should extract code context correctly', async () => {
        // 测试代码上下文提取
        assert.ok(true); // 占位符测试
    });
});

// 项目结构
src/
├── extension.ts              // 扩展入口
├── providers/
│   ├── apiTreeProvider.ts    // API列表树视图
│   ├── requestWebview.ts     // 请求构建界面
│   └── historyProvider.ts    // 历史记录提供者
├── services/
│   ├── httpClient.ts         // HTTP请求服务
│   ├── environmentService.ts // 环境变量服务
│   └── storageService.ts     // 数据存储服务
├── models/
│   ├── request.ts            // 请求数据模型
│   ├── response.ts           // 响应数据模型
│   └── environment.ts        // 环境配置模型
└── webview/                  // React前端
    ├── components/
    ├── services/
    └── App.tsx