当前位置：首页 > news >正文

Softhub软件下载站实战开发（十二）：软件管理编辑页面实现

news 2025/7/5 18:34:44

文章目录

- 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);}
}