文章目錄
- 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軟件下載站實戰開發（十一）：軟件分片上傳接口實現
)
