完成ppt制作前端部分

This commit is contained in:
junleea 2025-04-06 14:00:14 +08:00
parent 1268f36350
commit e7cfc9cef8
1 changed files with 69 additions and 64 deletions

View File

@ -103,9 +103,10 @@
<el-input <el-input
v-model="inputMessage" v-model="inputMessage"
type="textarea" type="textarea"
maxlength="5000"
style="border: 0" style="border: 0"
:rows="5" :rows="5"
placeholder="输入消息..." placeholder="输入ppt主题即要求...(如制作一份关于人工智能的ppt),最多输入5000字"
@keyup.enter="sendMessage" @keyup.enter="sendMessage"
/> />
<!-- <el-text <!-- <el-text
@ -132,7 +133,7 @@
:disabled="loading" :disabled="loading"
>生成ppt</el-button> >生成ppt</el-button>
</el-col> </el-col>
<el-col :span="3" style="text-align: center"> <!-- <el-col :span="3" style="text-align: center">
<el-select v-model="selectModel" placeholder="选择模型"> <el-select v-model="selectModel" placeholder="选择模型">
<el-option <el-option
v-for="item in ModelList" v-for="item in ModelList"
@ -141,7 +142,7 @@
:value="item.ID" :value="item.ID"
></el-option> ></el-option>
</el-select> </el-select>
</el-col> </el-col> -->
<el-col :span="1" style="text-align: center"> <el-col :span="1" style="text-align: center">
<el-button @click="handleSelectFileVisible" <el-button @click="handleSelectFileVisible"
><el-icon><Files /></el-icon ><el-icon><Files /></el-icon
@ -149,11 +150,10 @@
</el-col> </el-col>
<el-col :span="12" style="text-align: center"> <el-col :span="12" style="text-align: center">
<el-tag <el-tag
v-for="(file, index) in selectedFiles"
:key="index"
closable closable
@close="removeFile(index)" @close="removeFile(0)"
>{{ file.UserFileName }}</el-tag v-if="selectedFile"
>{{ selectedFile.UserFileName }}</el-tag
> >
</el-col> </el-col>
</el-row> </el-row>
@ -175,38 +175,30 @@
<el-button @click="uploadMessageFile">上传文件</el-button> <el-button @click="uploadMessageFile">上传文件</el-button>
<!-- 文件列表 --> <!-- 文件列表 -->
<div class="file-list"> <div class="file-list">
<el-checkbox-group v-model="selectedFiles"> <el-radio-group v-model="selectedFile">
<el-checkbox <el-radio
v-for="(item, index) in filteredFiles" v-for="(item, index) in filteredFiles"
:key="index" :key="index"
:label="item" :label="item"
> >
<span class="file-icon"> <span class="file-icon">
<!-- 根据文件类型展示不同图标 --> <!-- 根据文件类型展示不同图标 -->
<i <i v-if="item.UploadType === 'image'" class="el-icon-picture"></i>
v-if="item.UploadType === 'image'" <i v-else-if="item.UploadType === 'file'" class="el-icon-document"></i>
class="el-icon-picture"
></i>
<i
v-else-if="item.UploadType === 'file'"
class="el-icon-document"
></i>
<!-- 可继续补充其他文件类型图标 --> <!-- 可继续补充其他文件类型图标 -->
</span> </span>
{{ item.UserFileName }} {{ item.UserFileName }}
<!-- <span class="file-time">{{ item.CreatedAt }}</span> --> <!-- <span class="file-time">{{ item.CreatedAt }}</span> -->
</el-checkbox> </el-radio>
</el-checkbox-group> </el-radio-group>
</div> </div>
<!-- 底部状态栏和按钮 --> <!-- 底部状态栏和按钮 -->
<div class="footer-bar"> <div class="footer-bar">
<span class="selected-count" <span class="selected-count">已选 {{ selectedFile ? 1 : 0 }} 个文件</span>
>已选 {{ selectedFiles.length }} 个文件</span
>
<el-button @click="selectFileVisible = false">取消</el-button> <el-button @click="selectFileVisible = false">取消</el-button>
<el-button type="primary" @click="handleSelectFileConfirm" <el-button type="primary" @click="handleSelectFileConfirm">
>确认添加({{ selectedFiles.length }})</el-button 确认添加({{ selectedFile ? 1 : 0 }})
> </el-button>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
@ -308,6 +300,7 @@
const selectFileVisible = ref(false); // const selectFileVisible = ref(false); //
const searchFileQuery = ref(""); // const searchFileQuery = ref(""); //
const filteredFiles = ref<File[]>([]); // const filteredFiles = ref<File[]>([]); //
const selectedFile = ref<File | null>(null); //
const uploadFileVisible = ref(false); // const uploadFileVisible = ref(false); //
const baseInfo = ref<BaseInfo>({ const baseInfo = ref<BaseInfo>({
user_id: 0, user_id: 0,
@ -336,11 +329,12 @@
}); });
}; };
const removeFile = (index: number) => { const removeFile = (index: number) => {
selectedFiles.value.splice(index, 1); selectedFile .value = null; //
}; };
const handleSelectFileVisible = async () => { const handleSelectFileVisible = async () => {
await getFileListData(); // await getFileListData(); //
ElMessage.success("制作PPT当前只支持单文件支持docx、doc、pdf、txt、md等格式的文件");
console.log("selectedFiles:", selectedFiles.value); console.log("selectedFiles:", selectedFiles.value);
selectFileVisible.value = true; // selectFileVisible.value = true; //
console.log("handleSelectFileVisible:", selectFileVisible.value); console.log("handleSelectFileVisible:", selectFileVisible.value);
@ -365,10 +359,11 @@
}; };
const handleSelectFileConfirm = () => { const handleSelectFileConfirm = () => {
// if (selectedFile.value) {
console.log("选中的文件:", selectedFiles.value); //
// console.log("Selected file:", selectedFile.value);
selectFileVisible.value = false; // selectFileVisible.value = false;
}
}; };
const doButtonD = () => { const doButtonD = () => {
@ -440,19 +435,29 @@
ElMessage.warning("当前会话已结束创建ppt请新建会话"); ElMessage.warning("当前会话已结束创建ppt请新建会话");
return; return;
} }
loading.value = true;
let req = { let req = {
token: localStorage.getItem('token'), token: localStorage.getItem('token'),
function: "spark-create-ppt", function: "spark-create-ppt",
query: inputMessage.value, query: inputMessage.value,
fileUrl: fileUrl + selectedFiles.value[0].file_store_name,
fileName: selectedFiles.value[0].UserFileName,
} }
if(selectedFile.value){
//docxdocpdftxtmd
let fileType = selectedFile.value.file_store_name.split('.').pop();
if (fileType !== "docx" && fileType !== "doc" && fileType !== "pdf" && fileType !== "txt" && fileType !== "md") {
ElMessage.warning("当前只支持docx、doc、pdf、txt、md等格式的文件");
return;
}
req["fileUrl"] = selectedFile.value.file_store_name;
req["fileName"] = selectedFile.value.UserFileName;
}
loading.value = true;
let pMsgContent =""; let pMsgContent ="";
if (req.fileUrl) { if (req["fileUrl"]) {
//url //url
pMsgContent += `[${req.fileName}](${req.fileUrl})` + "\n"; pMsgContent += `[${req["fileUrl"]}](${req["fileUrl"]})` + "\n";
pMsgContent = pMsgContent + req.query; pMsgContent = pMsgContent + req.query;
} else { } else {
pMsgContent = req.query; pMsgContent = req.query;