Refactor SDK and Env Management in Webview

- Enhanced the local toolchain configuration interface in `index.vue` for better user experience, including improved layout and functionality for adding, editing, and deleting toolchains.
- Implemented confirmation dialog for deletion of toolchains to prevent accidental removals.
- Moved environment-related functions from `setting.ts` to a new module `settings_env.ts` for better organization and maintainability.
- Created a new module `settings_sdk.ts` to handle SDK-related functionalities, including reading SDK package information, managing SDK configurations, and processing SDK-related messages.
- Updated the message handling in `setting.ts` to delegate SDK and Env messages to their respective handlers.
- Improved error handling and user feedback throughout the SDK and Env management processes.

Author: BernardXiong

src/vue/setting/view/sdk/index.less

@@ -1,10 +1,205 @@
-.toolchains-container {
-    width: 80%;
+/* SDK管理页面样式 */
+.sdk-container {
+    width: 100%;
     height: 100%;
     padding: 20px;
+    background-color: #f5f7fa;
+    box-sizing: border-box;
+}
+
+/* 页面头部 */
+.sdk-header {
+    background-color: #fff;
+    border-radius: 8px 8px 0 0;
+    padding: 20px 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #e4e7ed;
+}
+
+.sdk-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: #303133;
+    margin: 0;
+}
+
+.sdk-actions {
+    display: flex;
+    gap: 12px;
+}
+
+/* SDK内容区域 */
+.sdk-content {
+    background-color: #fff;
+    border-radius: 0 0 8px 8px;
+    overflow: hidden;
+}
+
+/* 表格样式 */
+.el-table {
+    font-size: 14px;
 
-    h1 {
-        font-size: 24px;
-        color: #333;
+    .el-table__header {
+        th {
+            background-color: #f5f7fa;
+            color: #606266;
+            font-weight: 600;
+            border-bottom: 1px solid #e4e7ed;
+        }
+    }
+    
+    .el-table__row {
+        &:hover {
+            background-color: #f5f7fa;
+        }
+    }
+    
+    // 隐藏默认的展开图标
+    .el-table__expand-icon {
+        display: none;
+    }
+}
+
+/* SDK名称样式 */
+.sdk-name {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    
+    .expand-icon {
+        font-size: 12px;
+        color: #909399;
+        transition: transform 0.3s;
+        
+        &.el-icon-arrow-down {
+            transform: rotate(90deg);
+        }
+    }
+    
+    span {
+        color: #303133;
+        font-weight: 500;
+    }
+}
+
+/* 安装状态样式 */
+.install-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    .el-tag {
+        min-width: 60px;
+    }
+    
+    .installed-version {
+        color: #67c23a;
+        font-weight: 500;
+    }
+    
+    .selected-version {
+        color: #e6a23c;
+        font-weight: 500;
+    }
+}
+
+/* 展开内容区域 */
+.sdk-expand-content {
+    padding: 20px 40px;
+    background-color: #fafbfc;
+    border-top: 1px solid #ebeef5;
+}
+
+.sdk-versions {
+    .el-radio-group {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        align-items: flex-start;
+    }
+    
+    .el-radio {
+        margin-right: 0;
+        margin-left: 0;
+        
+        .el-radio__label {
+            font-size: 14px;
+            color: #606266;
+            padding-left: 10px;
+        }
+        
+        &.is-checked {
+            .el-radio__label {
+                color: #409eff;
+                font-weight: 500;
+            }
+        }
+    }
+}
+
+/* 按钮样式 */
+.el-button {
+    min-width: 80px;
+    
+    &--primary {
+        background-color: #409eff;
+        border-color: #409eff;
+        
+        &:hover {
+            background-color: #66b1ff;
+            border-color: #66b1ff;
+        }
+        
+        &.is-plain {
+            color: #409eff;
+            background: #ecf5ff;
+            border-color: #b3d8ff;
+            
+            &:hover {
+                color: #fff;
+                background-color: #409eff;
+                border-color: #409eff;
+            }
+        }
+    }
+}
+
+/* 空数据状态 */
+.el-table__empty-text {
+    color: #909399;
+    font-size: 14px;
+    padding: 40px 0;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .sdk-container {
+        padding: 12px;
+    }
+    
+    .sdk-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+        padding: 16px;
+    }
+    
+    .sdk-title {
+        font-size: 18px;
+    }
+    
+    .sdk-actions {
+        width: 100%;
+        
+        .el-button {
+            flex: 1;
+        }
+    }
+    
+    .sdk-expand-content {
+        padding: 16px 20px;
     }
 }