编程学习入门网站_qq电脑版官方网站_全网营销培训_企业网

Softhub软件下载站实战开发（六）：软件配置面板实现

在上一篇文章中，我们实现了分类模块。本文实现配置面板功能，并聚焦ai配置信息存储，并为后续配置信息拓展留足空间。

设计思路与核心功能

AI配置面板需要满足以下需求：

• 多提供商支持：支持OpenAI、DeepSeek、Ollama及自定义API
• 动态表单：根据不同提供商显示不同配置项
• 模型管理：自动获取可用模型列表
• 参数配置：温度、最大Token数等关键参数
• 本地存储：使用IndexedDB保存配置

实现详解

1. 多提供商支持与动态表单

<el-form-item label="AI 提供商" prop="provider"><el-select v-model="aiConfig.provider" placeholder="请选择 AI 提供商" @change="handleProviderChange"><el-option label="OpenAI" value="openai" /><el-option label="DeepSeek" value="deepseek" /><el-option label="Ollama" value="ollama" /><el-option label="自定义" value="custom" /></el-select>
</el-form-item>

根据选择的提供商动态显示/隐藏相关字段：

<el-form-item label="API Key" prop="apiKey" v-if="aiConfig.provider !== 'ollama'"><!-- API Key输入框 -->
</el-form-item><el-form-item label="API 地址" prop="apiEndpoint" v-if="aiConfig.provider !== 'custom'"><!-- API地址输入框 -->
</el-form-item><el-form-item label="自定义地址" prop="customEndpoint" v-if="aiConfig.provider === 'custom'"><!-- 自定义地址输入框 -->
</el-form-item>

2. 模型管理

为不同提供商设置默认模型列表：

const defaultModels = {openai: ['gpt-4', 'gpt-3.5-turbo'],deepseek: ['deepseek-chat', 'deepseek-reasoner'],ollama: []
};

对于Ollama提供商，动态获取本地模型列表：

const fetchOllamaModels = async () => {loadingModels.value = true;try {const response = await fetch('http://localhost:11434/api/tags');const data = await response.json();availableModels.value = data.models.map(model => model.name);} catch (error) {ElMessage.error('获取 Ollama 模型列表失败');availableModels.value = [];} finally {loadingModels.value = false;}
};

3. 参数配置

温度参数使用滑块控制：

<el-form-item label="温度" prop="temperature"><el-sliderv-model="aiConfig.temperature":min="0":max="1":step="0.1"show-input/>
</el-form-item>

最大Token数使用步进器控制：

<el-form-item label="最大长度" prop="maxTokens"><el-input-numberv-model="aiConfig.maxTokens":min="100":max="4000":step="100"/>
</el-form-item>

4. 数据持久化

使用IndexedDB存储配置：

需要安装idb库

npm install idb

const initDB = async () => {try {const db = await openDB('softhub', 1, {upgrade(db) {const store = db.createObjectStore('aiConfig', { keyPath: 'id' });store.createIndex('current', 'id', { unique: true });}});return db;} catch (error) {console.error('初始化数据库失败:', error);throw error;}
};const loadConfig = async () => {try {const db = await initDB();const config = await db.get('aiConfig', 'current');if (config) {Object.assign(aiConfig, config);if (aiConfig.provider === 'ollama') {await fetchOllamaModels();} else if (aiConfig.provider) {availableModels.value = defaultModels[aiConfig.provider];}}} catch (error) {console.error('加载配置失败:', error);}
};const handleSave = async () => {try {await aiFormRef.value.validate();saving.value = true;const db = await initDB();const configToSave = {id: 'current',...aiConfig,apiEndpoint: aiConfig.provider === 'custom' ? aiConfig.customEndpoint : aiConfig.apiEndpoint};await db.put('aiConfig', configToSave);ElMessage.success('配置保存成功');} catch (error) {ElMessage.error('配置保存失败');} finally {saving.value = false;}
};

布局与UI设计

1. 主页面布局

<template><div class="config-container"><el-tabs v-model="activeTab" tab-position="left" class="config-tabs"><el-tab-pane name="ai"><template #label><el-icon><Connection /></el-icon><span>AI 配置</span></template><ai-config ref="aiConfigRef" /></el-tab-pane></el-tabs></div>
</template>

2. 表单样式优化

.config-content {max-width: 800px;
}.config-form {margin-top: 20px;
}:deep(.el-form-item__label) {font-weight: 500;
}:deep(.el-button) {padding: 8px 20px;
}:deep(.el-button .el-icon) {margin-right: 4px;
}

3. 标签页样式

.config-container {padding: 20px;height: calc(100vh - 40px);background-color: #f5f7fa;
}.config-tabs {background-color: #fff;border-radius: 4px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}:deep(.el-tabs__header) {margin: 0;border-right: 1px solid #e4e7ed;background-color: #f5f7fa;
}:deep(.el-tabs__nav-wrap) {width: 180px;
}:deep(.el-tabs__item) {height: 50px;line-height: 50px;padding: 0 20px;font-size: 14px;color: #606266;display: flex;align-items: center;gap: 8px;transition: all 0.3s ease;
}:deep(.el-tabs__item.is-active) {background-color: #fff;color: #409eff;font-weight: 500;
}

页面效果

技术总结

1. 动态表单渲染：根据选择的AI提供商动态显示/隐藏相关配置项
2. 混合模型管理：结合预设模型列表和动态API获取
3. 响应式数据绑定：使用Vue的响应式系统管理复杂表单状态
4. 本地存储方案：IndexedDB提供可靠的客户端数据持久化
5. 优雅的错误处理：对网络请求和数据库操作进行完善的错误处理
6. 用户友好的UI：Element Plus组件提供一致且美观的用户体验

---

softhub系列往期文章

1. Softhub软件下载站实战开发（一）：项目总览
2. Softhub软件下载站实战开发（二）：项目基础框架搭建
3. Softhub软件下载站实战开发（三）：平台管理模块实战
4. Softhub软件下载站实战开发（四）：代码生成器设计与实现
5. Softhub软件下载站实战开发（五）：分类模块实现