|
@@ -2,7 +2,8 @@
|
|
|
<div class="collapsible-toolbar" :class="{ collapsed: isCollapsed }">
|
|
<div class="collapsible-toolbar" :class="{ collapsed: isCollapsed }">
|
|
|
<div class="toolbar-content" v-show="!isCollapsed">
|
|
<div class="toolbar-content" v-show="!isCollapsed">
|
|
|
<div class="sidebar-content">
|
|
<div class="sidebar-content">
|
|
|
- <div class="sidebar-item feature-sidebar-item" :class="{ active: activeSubmenu === 'cocoai' }" @click="toggleSubmenu('cocoai')">
|
|
|
|
|
|
|
+ <div class="sidebar-item feature-sidebar-item" :class="{ active: activeSubmenu === 'cocoai' }"
|
|
|
|
|
+ @click="toggleSubmenu('cocoai')">
|
|
|
<svg class="item-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<svg class="item-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"></path>
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"></path>
|
|
|
<path d="M2 17l10 5 10-5"></path>
|
|
<path d="M2 17l10 5 10-5"></path>
|
|
@@ -138,36 +139,33 @@
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<template v-else-if="!showFileConfirmModal && !exportingDialog">
|
|
<template v-else-if="!showFileConfirmModal && !exportingDialog">
|
|
|
- <FileInput accept=".pptx"
|
|
|
|
|
- @change="handleFileUpload">
|
|
|
|
|
|
|
+ <FileInput accept=".pptx" @change="handleFileUpload">
|
|
|
<div class="upload-dropzone">
|
|
<div class="upload-dropzone">
|
|
|
- <div class="upload-dropzone-icon">
|
|
|
|
|
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
|
|
|
|
- <path d="M12 15V4"></path>
|
|
|
|
|
- <path d="M7 9l5-5 5 5"></path>
|
|
|
|
|
- <path d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2"></path>
|
|
|
|
|
- </svg>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="upload-dropzone-title">{{ lang.ssDragAndDrop }}</div>
|
|
|
|
|
- <div class="upload-dropzone-subtitle">{{ lang.ssSupportPptx }}</div>
|
|
|
|
|
- <!-- <div class="upload-dropzone-footnote">同类型文件支持批量导入,跨类型文件请分开处理</div> -->
|
|
|
|
|
|
|
+ <div class="upload-dropzone-icon">
|
|
|
|
|
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
|
|
|
|
+ <path d="M12 15V4"></path>
|
|
|
|
|
+ <path d="M7 9l5-5 5 5"></path>
|
|
|
|
|
+ <path d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2"></path>
|
|
|
|
|
+ </svg>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="upload-dropzone-title">{{ lang.ssDragAndDrop }}</div>
|
|
|
|
|
+ <div class="upload-dropzone-subtitle">{{ lang.ssSupportPptx }}</div>
|
|
|
|
|
+ <!-- <div class="upload-dropzone-footnote">同类型文件支持批量导入,跨类型文件请分开处理</div> -->
|
|
|
</div>
|
|
</div>
|
|
|
</FileInput>
|
|
</FileInput>
|
|
|
</template>
|
|
</template>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<template v-else-if="!exportingDialog">
|
|
<template v-else-if="!exportingDialog">
|
|
|
<div class="file-confirm-inline">
|
|
<div class="file-confirm-inline">
|
|
|
<div class="file-info">
|
|
<div class="file-info">
|
|
|
<div class="file-title">{{ lang.ssFileDetected }}{{ currentFileName }}</div>
|
|
<div class="file-title">{{ lang.ssFileDetected }}{{ currentFileName }}</div>
|
|
|
- <div class="file-subtitle">{{ currentFileName }}({{ lang.ssTotalPages.replace('{count}', pageCount.toString()) }})</div>
|
|
|
|
|
|
|
+ <div class="file-subtitle">{{ currentFileName }}({{ lang.ssTotalPages.replace('{count}',
|
|
|
|
|
+ pageCount.toString()) }})</div>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<div class="import-options">
|
|
<div class="import-options">
|
|
|
- <div
|
|
|
|
|
- class="import-option"
|
|
|
|
|
- :class="{ active: selectedImportOption === 'page' }"
|
|
|
|
|
- @click="selectedImportOption = 'page'"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <div class="import-option" :class="{ active: selectedImportOption === 'page' }"
|
|
|
|
|
+ @click="selectedImportOption = 'page'">
|
|
|
<div class="option-icon">
|
|
<div class="option-icon">
|
|
|
</div>
|
|
</div>
|
|
|
<div class="option-text">
|
|
<div class="option-text">
|
|
@@ -175,13 +173,9 @@
|
|
|
<div class="option-desc">{{ lang.ssImportAsSlideDesc }}</div>
|
|
<div class="option-desc">{{ lang.ssImportAsSlideDesc }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
- <div
|
|
|
|
|
- v-show="false"
|
|
|
|
|
- class="import-option"
|
|
|
|
|
- :class="{ active: selectedImportOption === 'library' }"
|
|
|
|
|
- @click="selectedImportOption = 'library'"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+
|
|
|
|
|
+ <div v-show="false" class="import-option" :class="{ active: selectedImportOption === 'library' }"
|
|
|
|
|
+ @click="selectedImportOption = 'library'">
|
|
|
<div class="option-icon">
|
|
<div class="option-icon">
|
|
|
</div>
|
|
</div>
|
|
|
<div class="option-text">
|
|
<div class="option-text">
|
|
@@ -203,14 +197,15 @@
|
|
|
<div class="progress-header">
|
|
<div class="progress-header">
|
|
|
<!-- <span class="file-name">{{ currentFileName }}</span>
|
|
<!-- <span class="file-name">{{ currentFileName }}</span>
|
|
|
<span class="progress-percent">{{ importProgress }}%</span> -->
|
|
<span class="progress-percent">{{ importProgress }}%</span> -->
|
|
|
- <div class="upload-task-main">
|
|
|
|
|
- <div class="upload-task-name">{{ currentFileName }}</div>
|
|
|
|
|
- <div class="upload-task-meta">课件文件 · {{ formatFileSize(currentFileSize) }}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="upload-task-side">
|
|
|
|
|
- <div class="upload-task-percent">{{importProgress}}%</div>
|
|
|
|
|
- <button type="button" class="upload-task-action" :class="{ 'upload-task-close': !exporting}" @click="handleParsingClose">{{ exporting ? '取消' :'×'}}</button>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div class="upload-task-main">
|
|
|
|
|
+ <div class="upload-task-name">{{ currentFileName }}</div>
|
|
|
|
|
+ <div class="upload-task-meta">课件文件 · {{ formatFileSize(currentFileSize) }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="upload-task-side">
|
|
|
|
|
+ <div class="upload-task-percent">{{ importProgress }}%</div>
|
|
|
|
|
+ <button type="button" class="upload-task-action" :class="{ 'upload-task-close': !exporting }"
|
|
|
|
|
+ @click="handleParsingClose">{{ exporting ? '取消' : '×' }}</button>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="progress-bar">
|
|
<div class="progress-bar">
|
|
|
<div class="progress-fill" :style="{ width: importProgress + '%' }"></div>
|
|
<div class="progress-fill" :style="{ width: importProgress + '%' }"></div>
|
|
@@ -493,7 +488,17 @@
|
|
|
</div>
|
|
</div>
|
|
|
<span class="submenu-label">{{ lang.ssUploadWebpageLink }}</span>
|
|
<span class="submenu-label">{{ lang.ssUploadWebpageLink }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
- <!-- <div class="submenu-item">
|
|
|
|
|
|
|
+ <div class="submenu-item" @click="handleToolClick('createWebpage')">
|
|
|
|
|
+ <div class="submenu-icon">
|
|
|
|
|
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
+ <rect x="3" y="3" width="18" height="14" rx="2"></rect>
|
|
|
|
|
+ <path d="M12 8v6"></path>
|
|
|
|
|
+ <path d="M9 11h6"></path>
|
|
|
|
|
+ </svg>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <span class="submenu-label">{{ lang.ssNewWebpage }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="submenu-item" @click="handleToolClick('uploadCode')">
|
|
|
<div class="submenu-icon">
|
|
<div class="submenu-icon">
|
|
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
<g id="Component 1">
|
|
<g id="Component 1">
|
|
@@ -506,16 +511,6 @@
|
|
|
</svg>
|
|
</svg>
|
|
|
</div>
|
|
</div>
|
|
|
<span class="submenu-label">{{ lang.ssUploadWebpage }}</span>
|
|
<span class="submenu-label">{{ lang.ssUploadWebpage }}</span>
|
|
|
- </div> -->
|
|
|
|
|
- <div class="submenu-item" @click="handleToolClick('createWebpage')">
|
|
|
|
|
- <div class="submenu-icon">
|
|
|
|
|
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
|
|
- <rect x="3" y="3" width="18" height="14" rx="2"></rect>
|
|
|
|
|
- <path d="M12 8v6"></path>
|
|
|
|
|
- <path d="M9 11h6"></path>
|
|
|
|
|
- </svg>
|
|
|
|
|
- </div>
|
|
|
|
|
- <span class="submenu-label">{{ lang.ssNewWebpage }}</span>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
<!-- <div class="submenu-item">
|
|
<!-- <div class="submenu-item">
|
|
|
<div class="submenu-icon">
|
|
<div class="submenu-icon">
|
|
@@ -563,6 +558,67 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="submenu" :class="{ visible: activeSubmenu === 'uploadCode' }">
|
|
|
|
|
+ <div class="submenu-title">
|
|
|
|
|
+ <div class="title">{{ lang.ssUploadWebpage }}</div>
|
|
|
|
|
+ <div class="close-icon" @click="activeSubmenu = 'h5page'">
|
|
|
|
|
+ <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
+ <g id="Component 3">
|
|
|
|
|
+ <g id="Component 1">
|
|
|
|
|
+ <path id="Vector" d="M16 18L12 14L16 10" stroke="#9CA3AF" stroke-width="1.33333" />
|
|
|
|
|
+ </g>
|
|
|
|
|
+ </g>
|
|
|
|
|
+ </svg>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="line_box">
|
|
|
|
|
+ <div class="upload-box">
|
|
|
|
|
+ <div class="upload-tabs">
|
|
|
|
|
+ <button class="upload-tab" :class="{ active: uploadTab === 'file' }"
|
|
|
|
|
+ @click="switchUploadTab('file')">上传文件</button>
|
|
|
|
|
+ <button class="upload-tab" :class="{ active: uploadTab === 'code' }"
|
|
|
|
|
+ @click="switchUploadTab('code')">粘贴代码</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="uploadFilePanel" v-if="uploadTab === 'file'">
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <FileInput accept=".html,.htm" @change="handleFileCodeUpload" v-if="!uploadCodeFile">
|
|
|
|
|
+ <div class="file-upload-area">
|
|
|
|
|
+ <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
|
|
|
+ <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path>
|
|
|
|
|
+ <polyline points="17 8 12 3 7 8"></polyline>
|
|
|
|
|
+ <line x1="12" y1="3" x2="12" y2="15"></line>
|
|
|
|
|
+ </svg>
|
|
|
|
|
+ <p class="upload-text">{{ lang.ssDragAndDropHint }}</p>
|
|
|
|
|
+ <p class="upload-hint">{{ lang.ssSupportHTML }}</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </FileInput>
|
|
|
|
|
+ <div class="file-name-display" v-else>
|
|
|
|
|
+ <span>{{ uploadCodeFile.name }}</span>
|
|
|
|
|
+ <button type="button" class="upload-task-action"
|
|
|
|
|
+ @click="handleFileCodeUpload(null)">×</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="pasteCodePanel" v-if="uploadTab === 'code'">
|
|
|
|
|
+ <div class="form-group">
|
|
|
|
|
+ <textarea class="code-textarea" :placeholder="lang.ssPasteHTML" v-model="codeInput"></textarea>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <button class="webpage-link-button"
|
|
|
|
|
+ :class="{ 'loading': isLoading, 'disabled': !uploadCodeFile || isLoading }"
|
|
|
|
|
+ :disabled="!uploadCodeFile || isLoading" @click="handleUploadCodeFile"
|
|
|
|
|
+ v-if="uploadTab === 'file'">
|
|
|
|
|
+ {{ isLoading ? lang.ssUploading : !uploadCodeFile ? lang.ssWaitingForInput2 : lang.ssStartUpload }}
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <button class="webpage-link-button"
|
|
|
|
|
+ :class="{ 'loading': isLoading, 'disabled': !codeInput || isLoading }"
|
|
|
|
|
+ :disabled="!codeInput || isLoading" @click="handleUploadCode"
|
|
|
|
|
+ v-else-if="uploadTab === 'code'">
|
|
|
|
|
+ {{ isLoading ? lang.ssUploading : !codeInput ? lang.ssWaitingForInput2 : lang.ssStartUpload }}
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
<div class="submenu" :class="{ visible: activeSubmenu === 'multimedia' }">
|
|
<div class="submenu" :class="{ visible: activeSubmenu === 'multimedia' }">
|
|
|
<div class="submenu-title">
|
|
<div class="submenu-title">
|
|
|
<div class="title">{{ lang.ssAddMultimedia }}</div>
|
|
<div class="title">{{ lang.ssAddMultimedia }}</div>
|
|
@@ -999,6 +1055,9 @@ const handleToolClick = _.debounce((tool: string) => {
|
|
|
else if (tool === 'uploadWebpage') {
|
|
else if (tool === 'uploadWebpage') {
|
|
|
activeSubmenu.value = 'uploadWebpage'
|
|
activeSubmenu.value = 'uploadWebpage'
|
|
|
}
|
|
}
|
|
|
|
|
+ else if (tool === 'uploadCode') {
|
|
|
|
|
+ activeSubmenu.value = 'uploadCode'
|
|
|
|
|
+ }
|
|
|
}, 300)
|
|
}, 300)
|
|
|
|
|
|
|
|
const loadContentList = () => {
|
|
const loadContentList = () => {
|
|
@@ -1106,7 +1165,7 @@ const getTypeClass = (type?: number) => {
|
|
|
|
|
|
|
|
import useImport from '@/hooks/useImport'
|
|
import useImport from '@/hooks/useImport'
|
|
|
import message from '@/utils/message'
|
|
import message from '@/utils/message'
|
|
|
-const { importPPTXFile, exporting, getFile, getPPTInfo } = useImport()
|
|
|
|
|
|
|
+const { importPPTXFile, exporting, getFile, getPPTInfo, uploadFileToS3 } = useImport()
|
|
|
const currentFileName = ref('')
|
|
const currentFileName = ref('')
|
|
|
const currentFileSize = ref(0)
|
|
const currentFileSize = ref(0)
|
|
|
const parsingStatus = ref<'parsing' | 'success'>('parsing')
|
|
const parsingStatus = ref<'parsing' | 'success'>('parsing')
|
|
@@ -1138,7 +1197,7 @@ const handleFileUpload = async (files: FileList) => {
|
|
|
pendingFile.value = files
|
|
pendingFile.value = files
|
|
|
selectedImportOption.value = 'page'
|
|
selectedImportOption.value = 'page'
|
|
|
readingFile.value = true
|
|
readingFile.value = true
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
try {
|
|
try {
|
|
|
// 读取 PPT 信息获取页码
|
|
// 读取 PPT 信息获取页码
|
|
|
const info = await getPPTInfo(file)
|
|
const info = await getPPTInfo(file)
|
|
@@ -1151,7 +1210,7 @@ const handleFileUpload = async (files: FileList) => {
|
|
|
finally {
|
|
finally {
|
|
|
readingFile.value = false
|
|
readingFile.value = false
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
showFileConfirmModal.value = true
|
|
showFileConfirmModal.value = true
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -1188,7 +1247,7 @@ const confirmFileUpload = async () => {
|
|
|
const confirmOnclose = () => {
|
|
const confirmOnclose = () => {
|
|
|
handleParsingClose()
|
|
handleParsingClose()
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
try {
|
|
try {
|
|
|
// 创建AbortController用于取消操作
|
|
// 创建AbortController用于取消操作
|
|
|
parsingAbortController.value = new AbortController()
|
|
parsingAbortController.value = new AbortController()
|
|
@@ -1238,6 +1297,48 @@ const handleParsingClose = () => {
|
|
|
|
|
|
|
|
exportingDialog.value = false
|
|
exportingDialog.value = false
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+const uploadTab = ref('file')
|
|
|
|
|
+const switchUploadTab = (tab: 'file' | 'code') => {
|
|
|
|
|
+ uploadTab.value = tab
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const codeInput = ref('')
|
|
|
|
|
+const uploadCodeFile = ref<File | null>()
|
|
|
|
|
+const handleFileCodeUpload = (files: FileList | null) => {
|
|
|
|
|
+
|
|
|
|
|
+ if (!files || files.length === 0) {
|
|
|
|
|
+ uploadCodeFile.value = null
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const file = files[0]
|
|
|
|
|
+ uploadCodeFile.value = file
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const handleUploadCodeFile = async () => {
|
|
|
|
|
+ if (!uploadCodeFile.value) return
|
|
|
|
|
+ const fileName = uploadCodeFile.value.name.toLowerCase()
|
|
|
|
|
+ if (fileName.endsWith('.html') || fileName.endsWith('.htm')) {
|
|
|
|
|
+ isLoading.value = true
|
|
|
|
|
+ const url = await uploadFileToS3(uploadCodeFile.value)
|
|
|
|
|
+ createSlide()
|
|
|
|
|
+ createFrameElement(url, 73)
|
|
|
|
|
+ uploadCodeFile.value = null
|
|
|
|
|
+ isLoading.value = false
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+const handleUploadCode = async () => {
|
|
|
|
|
+ if (!codeInput.value) return
|
|
|
|
|
+ const file = new File([codeInput.value], 'index.html', { type: 'text/html' })
|
|
|
|
|
+ isLoading.value = true
|
|
|
|
|
+ const url = await uploadFileToS3(file)
|
|
|
|
|
+ createSlide()
|
|
|
|
|
+ createFrameElement(url, 73)
|
|
|
|
|
+ codeInput.value = ''
|
|
|
|
|
+ isLoading.value = false
|
|
|
|
|
+}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@@ -1271,13 +1372,13 @@ const handleParsingClose = () => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.sidebar-divider::before {
|
|
.sidebar-divider::before {
|
|
|
- content: "";
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- right: 0;
|
|
|
|
|
- top: 50%;
|
|
|
|
|
- height: 1px;
|
|
|
|
|
- background: #e8ddd0;
|
|
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ height: 1px;
|
|
|
|
|
+ background: #e8ddd0;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.feature-sidebar-item {
|
|
.feature-sidebar-item {
|
|
@@ -1736,10 +1837,11 @@ const handleParsingClose = () => {
|
|
|
// color: #FF9300;
|
|
// color: #FF9300;
|
|
|
// }
|
|
// }
|
|
|
|
|
|
|
|
- .upload-task-main{
|
|
|
|
|
|
|
+ .upload-task-main {
|
|
|
min-width: 0;
|
|
min-width: 0;
|
|
|
}
|
|
}
|
|
|
- .upload-task-name{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .upload-task-name {
|
|
|
font-size: 13px;
|
|
font-size: 13px;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
color: #111827;
|
|
color: #111827;
|
|
@@ -1747,18 +1849,21 @@ const handleParsingClose = () => {
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
}
|
|
|
- .upload-task-meta{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .upload-task-meta {
|
|
|
margin-top: 2px;
|
|
margin-top: 2px;
|
|
|
font-size: 11px;
|
|
font-size: 11px;
|
|
|
color: #8b7356;
|
|
color: #8b7356;
|
|
|
}
|
|
}
|
|
|
- .upload-task-side{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .upload-task-side {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
gap: 8px;
|
|
|
flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
|
}
|
|
}
|
|
|
- .upload-task-percent{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .upload-task-percent {
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
color: #c76a0c;
|
|
color: #c76a0c;
|
|
@@ -1767,15 +1872,15 @@ const handleParsingClose = () => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.upload-task-action {
|
|
.upload-task-action {
|
|
|
- border: 0;
|
|
|
|
|
- background: transparent;
|
|
|
|
|
- color: #9a8a77;
|
|
|
|
|
- font-size: 12px;
|
|
|
|
|
- font-weight: 600;
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ color: #9a8a77;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .upload-task-close{
|
|
|
|
|
|
|
+ .upload-task-close {
|
|
|
width: 20px;
|
|
width: 20px;
|
|
|
height: 20px;
|
|
height: 20px;
|
|
|
display: inline-flex;
|
|
display: inline-flex;
|
|
@@ -1804,7 +1909,7 @@ const handleParsingClose = () => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .progress-loading{
|
|
|
|
|
|
|
+ .progress-loading {
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
color: #111827;
|
|
color: #111827;
|
|
|
}
|
|
}
|
|
@@ -1896,7 +2001,7 @@ const handleParsingClose = () => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.upload-dropzone{
|
|
|
|
|
|
|
+.upload-dropzone {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
border: 1.5px dashed rgba(247, 139, 34, 0.38);
|
|
border: 1.5px dashed rgba(247, 139, 34, 0.38);
|
|
|
border-radius: 20px;
|
|
border-radius: 20px;
|
|
@@ -1916,14 +2021,15 @@ const handleParsingClose = () => {
|
|
|
margin: 15px auto;
|
|
margin: 15px auto;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
- &:hover{
|
|
|
|
|
|
|
+ &:hover {
|
|
|
border-style: solid;
|
|
border-style: solid;
|
|
|
border-color: #f78b22;
|
|
border-color: #f78b22;
|
|
|
background: #fff3e2;
|
|
background: #fff3e2;
|
|
|
box-shadow: 0 18px 34px rgba(247, 139, 34, 0.16);
|
|
box-shadow: 0 18px 34px rgba(247, 139, 34, 0.16);
|
|
|
transform: translateY(-1px);
|
|
transform: translateY(-1px);
|
|
|
}
|
|
}
|
|
|
- .upload-dropzone-icon{
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .upload-dropzone-icon {
|
|
|
width: 56px;
|
|
width: 56px;
|
|
|
height: 56px;
|
|
height: 56px;
|
|
|
border-radius: 18px;
|
|
border-radius: 18px;
|
|
@@ -1934,26 +2040,26 @@ const handleParsingClose = () => {
|
|
|
background: rgba(247, 139, 34, 0.10);
|
|
background: rgba(247, 139, 34, 0.10);
|
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
|
|
|
|
|
|
- svg{
|
|
|
|
|
|
|
+ svg {
|
|
|
width: 28px;
|
|
width: 28px;
|
|
|
height: 28px;
|
|
height: 28px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .upload-dropzone-title{
|
|
|
|
|
|
|
+ .upload-dropzone-title {
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
color: #111827;
|
|
color: #111827;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .upload-dropzone-subtitle{
|
|
|
|
|
|
|
+ .upload-dropzone-subtitle {
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
line-height: 1.6;
|
|
line-height: 1.6;
|
|
|
color: #7c6d5d;
|
|
color: #7c6d5d;
|
|
|
max-width: 320px;
|
|
max-width: 320px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .upload-dropzone-footnote{
|
|
|
|
|
|
|
+ .upload-dropzone-footnote {
|
|
|
font-size: 11px;
|
|
font-size: 11px;
|
|
|
color: #9a8a77;
|
|
color: #9a8a77;
|
|
|
}
|
|
}
|
|
@@ -1986,6 +2092,7 @@ const handleParsingClose = () => {
|
|
|
0% {
|
|
0% {
|
|
|
transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
100% {
|
|
100% {
|
|
|
transform: rotate(360deg);
|
|
transform: rotate(360deg);
|
|
|
}
|
|
}
|
|
@@ -2004,12 +2111,14 @@ const handleParsingClose = () => {
|
|
|
|
|
|
|
|
.file-info {
|
|
.file-info {
|
|
|
margin-bottom: 16px;
|
|
margin-bottom: 16px;
|
|
|
|
|
+
|
|
|
.file-title {
|
|
.file-title {
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
color: #111827;
|
|
color: #111827;
|
|
|
margin-bottom: 6px;
|
|
margin-bottom: 6px;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.file-subtitle {
|
|
.file-subtitle {
|
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
|
color: #7c6d5d;
|
|
color: #7c6d5d;
|
|
@@ -2045,11 +2154,11 @@ const handleParsingClose = () => {
|
|
|
border-color: #f78b22;
|
|
border-color: #f78b22;
|
|
|
|
|
|
|
|
&::after {
|
|
&::after {
|
|
|
- content: '';
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- inset: 3px;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- background: #f78b22;
|
|
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ inset: 3px;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ background: #f78b22;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -2088,7 +2197,8 @@ const handleParsingClose = () => {
|
|
|
gap: 10px;
|
|
gap: 10px;
|
|
|
justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
|
|
|
|
|
|
- .cancel-btn, .confirm-btn {
|
|
|
|
|
|
|
+ .cancel-btn,
|
|
|
|
|
+ .confirm-btn {
|
|
|
min-width: 84px;
|
|
min-width: 84px;
|
|
|
height: 34px;
|
|
height: 34px;
|
|
|
padding: 0 14px;
|
|
padding: 0 14px;
|
|
@@ -2109,7 +2219,193 @@ const handleParsingClose = () => {
|
|
|
background: linear-gradient(180deg, #f89a34 0%, #f07815 100%);
|
|
background: linear-gradient(180deg, #f89a34 0%, #f07815 100%);
|
|
|
border: 0;
|
|
border: 0;
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
- box-shadow: 0 10px 20px rgba(240, 120, 21, 0.18);
|
|
|
|
|
|
|
+ box-shadow: 0 10px 20px rgba(240, 120, 21, 0.18);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.line_box {
|
|
|
|
|
+ height: calc(100% - 75px);
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.upload-box {
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+
|
|
|
|
|
+ .upload-tabs {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+ border-bottom: 1px solid rgb(229, 231, 235);
|
|
|
|
|
+
|
|
|
|
|
+ .upload-tab {
|
|
|
|
|
+ border-top-width: initial;
|
|
|
|
|
+ border-right-width: initial;
|
|
|
|
|
+ border-left-width: initial;
|
|
|
|
|
+ border-top-color: initial;
|
|
|
|
|
+ border-right-color: initial;
|
|
|
|
|
+ border-left-color: initial;
|
|
|
|
|
+ background-color: transparent;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: rgb(107, 114, 128);
|
|
|
|
|
+ margin-bottom: -1px;
|
|
|
|
|
+ padding: 10px 16px;
|
|
|
|
|
+ border-style: none none solid;
|
|
|
|
|
+ border-image: initial;
|
|
|
|
|
+ border-bottom: 2px solid transparent;
|
|
|
|
|
+
|
|
|
|
|
+ &.active {
|
|
|
|
|
+ color: rgb(247, 139, 34);
|
|
|
|
|
+ border-bottom-color: rgb(247, 139, 34);
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .uploadFilePanel {
|
|
|
|
|
+
|
|
|
|
|
+ .form-group {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+
|
|
|
|
|
+ .file-upload-area {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ min-height: 190px;
|
|
|
|
|
+ border-width: 2px;
|
|
|
|
|
+ border-style: dashed;
|
|
|
|
|
+ border-color: rgb(229, 231, 235);
|
|
|
|
|
+ border-image: initial;
|
|
|
|
|
+ border-radius: 12px;
|
|
|
|
|
+ background: rgb(250, 251, 252);
|
|
|
|
|
+ padding: 40px 20px;
|
|
|
|
|
+ transition: 0.2s;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+
|
|
|
|
|
+ svg {
|
|
|
|
|
+ color: rgb(156, 163, 175);
|
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .upload-text {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ color: rgb(55, 65, 81);
|
|
|
|
|
+ margin-bottom: 6px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .upload-hint {
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ color: rgb(107, 114, 128);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ border-color: rgb(247, 139, 34);
|
|
|
|
|
+ background: rgb(255, 248, 240);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .file-name-display {
|
|
|
|
|
+ margin-top: 12px;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ color: rgb(75, 85, 99);
|
|
|
|
|
+ background-color: rgb(249, 250, 251);
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ padding: 8px 12px;
|
|
|
|
|
+ border-width: 1px;
|
|
|
|
|
+ border-style: solid;
|
|
|
|
|
+ border-color: rgb(229, 231, 235);
|
|
|
|
|
+ border-image: initial;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+
|
|
|
|
|
+ span {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .upload-task-action {
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ color: #9a8a77;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .pasteCodePanel {
|
|
|
|
|
+ .form-group {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+
|
|
|
|
|
+ .code-textarea {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ min-height: 190px;
|
|
|
|
|
+ font-family: monospace;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ resize: vertical;
|
|
|
|
|
+ border-width: 1px;
|
|
|
|
|
+ border-style: solid;
|
|
|
|
|
+ border-color: rgb(209, 213, 219);
|
|
|
|
|
+ border-image: initial;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+ transition: border-color 0.2s;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ resize: none;
|
|
|
|
|
+
|
|
|
|
|
+ &:focus {
|
|
|
|
|
+ outline: none;
|
|
|
|
|
+ border-color: rgb(247, 139, 34);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .webpage-link-button {
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ padding: 10px 24px;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ transition: all 0.3s;
|
|
|
|
|
+ background-color: #FF9300;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ margin-top: 15px;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover:not(:disabled) {
|
|
|
|
|
+ background-color: #e68a00;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &:disabled {
|
|
|
|
|
+ opacity: 0.5;
|
|
|
|
|
+ cursor: not-allowed;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.loading {
|
|
|
|
|
+ cursor: not-allowed;
|
|
|
|
|
+ opacity: 0.8;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.error {
|
|
|
|
|
+ background-color: #ff4d4f;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+
|
|
|
|
|
+ &:hover:not(:disabled) {
|
|
|
|
|
+ background-color: #ff7875;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|