文章目录
- Softhub软件下载站实战开发（十二）：软件管理编辑页面实现✨
- 功能概述 📋
- 编辑页面实现 🛠️
- 1. 页面结构设计
- 2. aieEditor集成 🌟
- 初始化配置
- 编辑器功能
- 3. 大整数处理 🔢
- 4. 封面图片上传 📤
- 关键代码解析 💻
- 编辑器保存处理
- 编辑器初始化配置
- 样式优化 🎨
- 效果展示
Softhub软件下载站实战开发（十二）：软件管理编辑页面实现✨
前面几篇文章我们已经实现了软件管理主要的接口，本篇文章来实现软件管理的前端部分。
基础代码采用代码生成器生成即可，再次不赘述
功能概述 📋
软件管理模块主要包含以下功能：
编辑页面实现 🛠️
1. 页面结构设计
编辑页面采用全屏弹窗设计，包含两个标签页：
- 基本信息：软件名称、分类、平台等基础信息
- 软件详情：使用
aieEditor实现的富文本编辑器
<template><div class="system-edit-post-container"><el-dialog v-model="isShowDialog" width="1200px" :fullscreen="true" class="edit-dialog"><template #header><div>{{ (formData.id === '0' ? '添加' : '修改') + '软件表' }}</div></template><div class="edit-container"><el-card class="main-card"><el-tabs v-model="activeTab" class="software-tabs" tab-position="top"><el-tab-pane label="基本信息" name="basic"><div class="tab-content"><el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="100px"><el-row :gutter="24"><el-col :span="12"><el-form-item label="分类" prop="categoryId"><el-cascaderv-model="formData.categoryId":options="categoryOptions"placeholder="请选择分类"size="large"clearable:props="{checkStrictly: true,value: 'id',label: 'categoryName',children: 'children',disabled: 'disabled',emitPath: false}"/></el-form-item></el-col><el-col :span="12"><el-form-item label="平台" prop="platformIds"><el-selectv-model="formData.platformIds"placeholder="请选择平台"size="large"clearablemultiplecollapse-tagscollapse-tags-tooltip:empty-values="[null, undefined, []]"><el-option v-for="item in platformList" :key="item.id" :label="item.platformName" :value="item.id" /></el-select></el-form-item></el-col></el-row><el-row :gutter="24"><el-col :span="12"><el-form-item label="软件名称" prop="softwareName"><el-input v-model="formData.softwareName" placeholder="请输入软件名称" clearable /></el-form-item></el-col><el-col :span="12"><el-form-item label="官网地址" prop="officialWebsite"><el-input v-model="formData.officialWebsite" placeholder="请输入官网地址" clearable /></el-form-item></el-col></el-row><el-row :gutter="24"><el-col :span="12"><el-form-item label="Git仓库" prop="gitRepo"><el-input v-model="formData.gitRepo" placeholder="请输入Git仓库地址" clearable /></el-form-item></el-col><el-col :span="12"><el-form-item label="备注" prop="remark"><el-input v-model="formData.remark" placeholder="请输入备注" clearable /></el-form-item></el-col></el-row><el-row :gutter="24"><el-col :span="24"><el-form-item label="封面" prop="coverId"><div class="cover-upload-container"><el-uploadclass="cover-uploader":action="uploadAction":show-file-list="false":on-success="handleCoverSuccess":before-upload="beforeCoverUpload":headers="{ 'Authorization': `Bearer ${Session.get('token')}` }"><img v-if="coverUrl" :src="coverUrl" class="cover-image" /><div v-else class="cover-upload-placeholder"><el-icon class="cover-uploader-icon"><ele-Plus /></el-icon></div></el-upload><div class="cover-tips"><p>建议尺寸：400x300px，支持 JPG、PNG 格式，文件大小不超过 2MB</p></div></div></el-form-item></el-col></el-row></el-form></div></el-tab-pane><el-tab-pane label="软件描述" name="detail"><div class="tab-content"><div class="editor-section"><div class="editor-header"><h3>软件详情</h3><p class="editor-tips">在这里详细描述软件的功能、特点、使用方法等信息</p></div><div id="aiEditor" ref="divRef" class="editor-container"><div class="aie-container"><div class="aie-container-header"></div><div class="aie-container-main"></div><div class="aie-container-footer"></div></div></div></div></div></el-tab-pane></el-tabs></el-card></div><div class="dialog-footer"><el-button @click="onCancel" size="default">取 消</el-button><el-button type="primary" @click="onSubmit" size="default" :loading="loading">{{ formData.id === '0' ? '新 增' : '修 改' }}</el-button></div></el-dialog></div>
</template>
2.ai配置提取
// 初始化 IndexedDB
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 config = await db.get('aiConfig', 'current')
console.log('读取到的配置:', config)let aiConfig = {}
2. aieEditor集成 🌟
初始化配置
配置ai、图片上传下载以及视频上传下载接口
const initAiEditor = async () => {await nextTick()if (divRef.value && !aiEditor) {const db = await initDB()// 尝试读取配置const config = await db.get('aiConfig', 'current')console.log('读取到的配置:', config)let aiConfig = {}if (config.provide == "custom"){aiConfig = {models:{openai:{endpoint: config.apiEndpoint || '',apiKey: config.apiKey || '',model: config.model || '',}}}}else{aiConfig = {models:{openai:{customUrl: config.customEndpoint || '',apiKey: config.apiKey || '',model: config.model || '',}}}}console.log(aiConfig)aiEditor = new AiEditor({element: divRef.value as Element,placeholder: '点击输入内容...',ai: aiConfig,toolbarExcludeKeys: ["attachment","printer"],image: {uploadUrl: import.meta.env.VITE_API_URL + '/api/v1/admin/ds/dsImage/upload',uploadHeaders: {'Authorization': `Bearer ${Session.get('token')}`},uploaderEvent: {onSuccess: (file, response) => {console.log("response@@@@",response)if (response.code === 0) {let res = {errorCode: 0,data: {src: response.data.url,alt: file.name}}console.log("res@@@",res)return res}return false},onError: (file, error) => {console.error('图片上传失败:', error)ElMessage.error('图片上传失败')return false}},uploadFormName: 'file'},video: {uploadUrl: import.meta.env.VITE_API_URL + '/api/v1/admin/ds/dsVidio/upload',uploadHeaders: {'Authorization': `Bearer ${Session.get('token')}`},uploaderEvent: {onSuccess: (file, response) => {console.log("response@@@@",response)if (response.code === 0) {let res = {errorCode: 0,data: {src: response.data.url,poster: response.data.poster}}console.log("res@@@",res)return res}return false},onError: (file, error) => {console.error('视频上传失败:', error)ElMessage.error('视频上传失败')return false}},uploadFormName: 'file'}})}
}
编辑器功能
- AI辅助写作 🤖：集成OpenAI API提供智能写作建议
- 多媒体支持 🖼️：支持图片、视频上传
- Markdown兼容 📝：同时支持富文本和Markdown编辑
- 响应式设计 📱：适配不同屏幕尺寸
3. 大整数处理 🔢
由于JavaScript的Number类型限制，对于大整数ID我们做了特殊处理：
// 大整数转换工具函数
const toBigIntString = (id: number | string): string => {try {return BigInt(id).toString()} catch {return String(id)}
}// 数据处理示例
const processedRow = {...row,id: toBigIntString(row.id),coverId: row.coverId ? toBigIntString(row.coverId) : ''
}
4. 封面图片上传 📤
<el-uploadclass="cover-uploader":action="uploadAction":show-file-list="false":on-success="handleCoverSuccess":before-upload="beforeCoverUpload"><img v-if="coverUrl" :src="coverUrl" class="cover-image" /><div v-else class="cover-upload-placeholder"><el-icon><ele-Plus /></el-icon></div>
</el-upload>
上传限制：
- 仅支持图片格式
- 大小不超过2MB
- 建议尺寸400x300px
关键代码解析 💻
编辑器保存处理
const onSubmit = async () => {const detail = aiEditor?.getHtml() || '';if (!detail) {ElMessage.error('软件详情不能为空');return;}const submitData = {...formData,detail,id: toBigIntString(formData.id),coverId: formData.coverId ? toBigIntString(formData.coverId) : 0};if (formData.id === '0') {await addDsSoftware(submitData);ElMessage.success('添加成功');} else {await editDsSoftware(submitData);ElMessage.success('修改成功');}
}
编辑器初始化配置
从IndexedDB中读取AI配置：
const initDB = async () => {const db = await openDB('softhub', 1, {upgrade(db) {db.createObjectStore('aiConfig', { keyPath: 'id' });}});const config = await db.get('aiConfig', 'current');return {models: {openai: {endpoint: config.apiEndpoint,apiKey: config.apiKey,model: config.model}}};
}
样式优化 🎨
编辑页面采用了全屏弹窗设计，并优化了编辑器的显示区域：
.editor-container {flex: 1;overflow: hidden;min-height: 500px;border: 1px solid var(--el-border-color);border-radius: 6px;:deep(.aie-container-main) {height: calc(100% - 40px);}
}
效果展示
softhub系列往期文章
- Softhub软件下载站实战开发（一）：项目总览
- Softhub软件下载站实战开发（二）：项目基础框架搭建
- Softhub软件下载站实战开发（三）：平台管理模块实战
- Softhub软件下载站实战开发（四）：代码生成器设计与实现
- Softhub软件下载站实战开发（五）：分类模块实现
- Softhub软件下载站实战开发（六）：软件配置面板实现
- Softhub软件下载站实战开发（七）：集成MinIO实现文件存储功能
- Softhub软件下载站实战开发（八）：编写软件后台管理
- Softhub软件下载站实战开发（九）：编写软件配置管理界面
- Softhub软件下载站实战开发（十）：实现图片视频上传下载接口
- Softhub软件下载站实战开发（十一）：软件分片上传接口实现
)
