feat: 优化SDK版本选择功能，添加单选按钮样式，保存SDK配置到.config文件

BernardXiong · BernardXiong · commit 833b72b63f3c · 2025-08-07T08:40:51.000+08:00
diff --git a/src/vue/setting/view/sdk/index.less b/src/vue/setting/view/sdk/index.less
@@ -114,28 +114,41 @@
 }
 
 .sdk-versions {
-    .el-radio-group {
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        align-items: flex-start;
-    }
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
     
-    .el-radio {
-        margin-right: 0;
-        margin-left: 0;
+    .version-radio-item {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        padding: 4px 8px;
+        border-radius: 4px;
+        transition: background-color 0.2s;
         
-        .el-radio__label {
+        &:hover {
+            background-color: #f5f7fa;
+        }
+        
+        input[type="radio"] {
+            width: 16px;
+            height: 16px;
+            margin: 0;
+            cursor: pointer;
+            accent-color: #409eff;
+        }
+        
+        label {
+            margin-left: 8px;
             font-size: 14px;
             color: #606266;
-            padding-left: 10px;
+            cursor: pointer;
+            user-select: none;
         }
         
-        &.is-checked {
-            .el-radio__label {
-                color: #409eff;
-                font-weight: 500;
-            }
+        input[type="radio"]:checked + label {
+            color: #409eff;
+            font-weight: 500;
         }
     }
 }
diff --git a/src/vue/setting/view/sdk/index.vue b/src/vue/setting/view/sdk/index.vue
@@ -24,16 +24,20 @@
                 <template #default="props">
                     <div class="sdk-expand-content">
                         <div class="sdk-versions">
-                            <el-radio-group v-model="props.row.selectedVersion">
-                                <el-radio 
-                                    v-for="version in props.row.versions" 
-                                    :key="version"
-                                    :label="version"
-                                    @change="onVersionChange(props.row)"
-                                >
-                                    {{ version }}
-                                </el-radio>
-                            </el-radio-group>
+                            <div
+                                v-for="version in props.row.versions" 
+                                :key="version"
+                                class="version-radio-item"
+                                @click="handleRadioClick(props.row, version)"
+                            >
+                                <input 
+                                    type="radio"
+                                    :name="`sdk-${props.row.name}`"
+                                    :checked="props.row.selectedVersion === version"
+                                    @click.stop
+                                />
+                                <label>{{ version }}</label>
+                            </div>
                         </div>
                     </div>
                 </template>
@@ -129,39 +133,34 @@ const expandAll = () => {
     isAllExpanded.value = !isAllExpanded.value;
 };
 
-// 版本变更
-const onVersionChange = (row: SDKListItem) => {
-    console.log(`SDK ${row.name} 版本变更为: ${row.selectedVersion}`);
-    // 标记该SDK已被修改
+// 处理单选按钮点击
+const handleRadioClick = (row: SDKListItem, version: string) => {
     const sdk = sdkList.value.find(s => s.name === row.name);
     if (sdk) {
-        sdk.selectedVersion = row.selectedVersion;
+        // 如果点击的是已选中的版本，则取消选择
+        if (sdk.selectedVersion === version) {
+            sdk.selectedVersion = '';
+        } else {
+            // 否则选择新版本
+            sdk.selectedVersion = version;
+        }
+        console.log(`SDK ${row.name} 版本变更为: ${sdk.selectedVersion || '未选择'}`);
     }
 };
 
 // 应用更改
 const applyChanges = () => {
-    // 收集有变更的SDK配置信息
-    const changedSDKs = sdkList.value.filter(sdk => {
-        // 已安装但版本变更，或未安装但选择了版本
-        return (sdk.installed && sdk.selectedVersion !== sdk.installedVersion) ||
-               (!sdk.installed && sdk.selectedVersion);
-    });
-    
-    if (changedSDKs.length === 0) {
-        showMessage('没有需要应用的更改');
-        return;
-    }
-    
-    // 发送配置到后端
-    const configs = changedSDKs.map(sdk => ({
+    // 收集所有SDK的配置信息
+    const sdkConfigs = sdkList.value.map(sdk => ({
         name: sdk.name,
-        version: sdk.selectedVersion,
-        install: !!sdk.selectedVersion
+        version: sdk.selectedVersion || '',
+        selected: !!sdk.selectedVersion,
+        path: sdk.path || ''
     }));
     
-    sendCommand('applySDKConfig', configs);
-    showMessage(`正在应用 ${changedSDKs.length} 个SDK的更改...`);
+    // 发送配置到后端保存到.config文件
+    sendCommand('saveSDKDotConfig', [sdkConfigs]);
+    showMessage('正在保存SDK配置...');
 };
 
 // 组件挂载时获取SDK列表
@@ -189,9 +188,7 @@ onMounted(() => {
                 break;
             case 'sdkConfigApplied':
                 // SDK配置应用成功
-                showMessage('SDK 配置已成功应用');
-                // 重新加载SDK列表
-                sendCommand('getSDKList');
+                showMessage('SDK 配置已保存到 .config 文件');
                 break;
             case 'sdkConfigError':
                 // SDK配置应用失败
diff --git a/src/webviews/setting.ts b/src/webviews/setting.ts
@@ -88,6 +88,11 @@ export function openSettingWebview(context: vscode.ExtensionContext) {
             panel.webview.postMessage({ command: 'envStatus', status: envStatus });
         });
 
+        // 初始化时发送SDK配置
+        if (extensionInfo.SDKConfig) {
+            panel.webview.postMessage({ command: 'setSDKConfig', data: extensionInfo.SDKConfig });
+        }
+
         // read out/${name}/index.html
         const indexHtmlPath = vscode.Uri.file(context.asAbsolutePath(`out/${name}/index.html`));
         const htmlFolder = vscode.Uri.file(context.asAbsolutePath(`out`));
@@ -101,6 +106,16 @@ export function openSettingWebview(context: vscode.ExtensionContext) {
 
                 return `"${panel.webview.asWebviewUri(vscode.Uri.file(absPath)).toString()}"`;
             });
+
+            // 在HTML设置完成后延迟发送初始数据
+            setTimeout(() => {
+                // 发送SDK配置
+                if (extensionInfo.SDKConfig) {
+                    panel.webview.postMessage({ command: 'setSDKConfig', data: extensionInfo.SDKConfig });
+                }
+                // 发送扩展信息
+                panel.webview.postMessage({command: 'extensionInfo', data: extensionInfo});
+            }, 100);
         });
         panel.webview.onDidReceiveMessage(async (message) => {
             // 先尝试使用SDK处理器处理消息
@@ -139,12 +154,14 @@ export function openSettingWebview(context: vscode.ExtensionContext) {
                 case 'getSDkConfig':
                     data = readJsonObject(sdkCfgFn);
                     if (data) {
-                        panel.webview.postMessage({command: 'setConfig', data: data});
+                        panel.webview.postMessage({command: 'setSDKConfig', data: data});
                     }
                     return ;
                 case 'setSDKConfig':
                     data = message.args[0];
                     writeJsonObject(message.args[0], sdkCfgFn);
+                    // 更新内存中的配置
+                    extensionInfo.SDKConfig = data;
     
                     vscode.window.showInformationMessage('保存工具链配置成功');
                     return ;
diff --git a/src/webviews/settings_sdk.ts b/src/webviews/settings_sdk.ts
@@ -240,6 +240,40 @@ function removeConfigLine(content: string, key: string): string {
     return content.replace(regex, '');
 }
 
+// 保存完整的SDK配置到.config文件
+export async function saveSDKDotConfig(configs: Array<{ name: string; version: string; selected: boolean; path: string }>): Promise<void> {
+    const configPath = getConfigPath();
+    let content = 'CONFIG_TARGET_FILE=""\n';
+    
+    // 生成所有SDK的配置
+    for (const config of configs) {
+        const upperName = config.name.replace(/-/g, '_').toUpperCase();
+        const usingKey = `CONFIG_PKG_USING_${upperName}`;
+        
+        if (config.selected && config.version) {
+            // SDK已选择
+            content += `${usingKey}=y\n`;
+            content += `CONFIG_PKG_${upperName}_VER="${config.version}"\n`;
+            
+            // 设置路径
+            const sdkPath = config.path || path.join('sdk', config.name, config.version);
+            content += `CONFIG_PKG_${upperName}_PATH="${sdkPath}"\n`;
+        } else {
+            // SDK未选择
+            content += `# ${usingKey} is not set\n`;
+        }
+    }
+    
+    // 确保目录存在
+    const configDir = path.dirname(configPath);
+    if (!fs.existsSync(configDir)) {
+        fs.mkdirSync(configDir, { recursive: true });
+    }
+    
+    // 写入配置文件
+    fs.writeFileSync(configPath, content, 'utf8');
+}
+
 // 处理SDK相关消息
 export function handleSDKMessage(webview: vscode.Webview, message: any): boolean {
     switch (message.command) {
@@ -258,6 +292,29 @@ export function handleSDKMessage(webview: vscode.Webview, message: any): boolean
             });
             return true;
             
+        case 'saveSDKDotConfig':
+            if (message.args && message.args[0] && Array.isArray(message.args[0])) {
+                saveSDKDotConfig(message.args[0]).then(() => {
+                    webview.postMessage({
+                        command: 'sdkConfigApplied'
+                    });
+                    vscode.window.showInformationMessage('SDK配置已保存到 .config 文件');
+                }).catch(error => {
+                    console.error('Failed to save SDK config:', error);
+                    webview.postMessage({
+                        command: 'sdkConfigError',
+                        error: '保存SDK配置失败'
+                    });
+                });
+            } else {
+                console.error('Invalid data format for saveSDKDotConfig:', message);
+                webview.postMessage({
+                    command: 'sdkConfigError',
+                    error: 'SDK配置数据格式错误'
+                });
+            }
+            return true;
+            
         case 'applySDKConfig':
             if (message.data && Array.isArray(message.data)) {
                 updateSDKConfig(message.data).then(() => {
