新增打开新课件,优化PDF插件查看器

This commit is contained in:
qinqing 2024-10-11 16:21:52 +08:00
parent 8eff515fd8
commit 6911a92ecb
11 changed files with 135 additions and 44 deletions

File diff suppressed because one or more lines are too long

View File

@ -2782,7 +2782,8 @@
--editor-toolbar-base-offset:105px;
--main-color:rgb(12 12 13);
--body-bg-color:rgb(255, 255, 255);
/* --body-bg-color:rgb(255, 255, 255); */
--body-bg-color:rgb(241, 241, 252);
--progressBar-color:rgb(10 132 255);
--progressBar-bg-color:rgb(221 221 222);
--progressBar-blend-color:rgb(116 177 239);
@ -3148,12 +3149,12 @@ body{
}
#toolbarViewer{
width: 300px;
height: 32px;
width: auto;
height: 60px;
position: fixed;
z-index: 9999;
bottom: 15px;
left: 50%;
right: 2%;
background-color: #fff;
border-radius: 4px;
transform: translateX(-50%);
@ -3477,8 +3478,9 @@ body{
}
#toolbarViewerLeft{
padding-inline-start:1px;
/* padding-inline-start:1px; 修改样式*/
}
#toolbarViewerRight{
padding-inline-end:1px;
}
@ -3693,7 +3695,7 @@ body{
mask-image:var(--findbarButton-next-icon);
}
#previous::before{
/* #previous::before{
-webkit-mask-image:var(--toolbarButton-pageUp-icon);
mask-image:var(--toolbarButton-pageUp-icon);
}
@ -3701,8 +3703,27 @@ body{
#next::before{
-webkit-mask-image:var(--toolbarButton-pageDown-icon);
mask-image:var(--toolbarButton-pageDown-icon);
} */
/* 修改样式 */
#toolbarViewerLeft .toolbarButton{
width: 80px;
height: 60px;
margin: 0;
}
#toolbarViewerLeft .toolbarButton::before{
opacity: 0;
}
#toolbarViewerLeft .toolbarButton span{
width: auto;
height: auto;
}
.toolpageBtn{
height: 60px;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
#zoomOut::before{
-webkit-mask-image:var(--toolbarButton-zoomOut-icon);
mask-image:var(--toolbarButton-zoomOut-icon);

View File

@ -44,12 +44,12 @@ See https://github.com/adobe-type-tools/cmap-resources
<div id="toolbarSidebar">
<div id="toolbarSidebarLeft">
<div id="sidebarViewButtons" class="splitToolbarButton toggled" role="radiogroup">
<button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="pdfjs-thumbs-button" role="radio" aria-checked="true" aria-controls="thumbnailView">
<span data-l10n-id="pdfjs-thumbs-button-label">Thumbnails</span>
</button>
<button id="viewOutline" class="toolbarButton" title="Show Document Outline (double-click to expand/collapse all items)" tabindex="3" data-l10n-id="pdfjs-document-outline-button" role="radio" aria-checked="false" aria-controls="outlineView">
<span data-l10n-id="pdfjs-document-outline-button-label">Document Outline</span>
</button>
<button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="pdfjs-thumbs-button" role="radio" aria-checked="true" aria-controls="thumbnailView">
<span data-l10n-id="pdfjs-thumbs-button-label">Thumbnails</span>
</button>
<button id="viewAttachments" class="toolbarButton" title="Show Attachments" tabindex="4" data-l10n-id="pdfjs-attachments-button" role="radio" aria-checked="false" aria-controls="attachmentsView">
<span data-l10n-id="pdfjs-attachments-button-label">Attachments</span>
</button>
@ -273,14 +273,17 @@ See https://github.com/adobe-type-tools/cmap-resources
<div id="toolbarContainer">
<div id="toolbarViewer">
<div id="toolbarViewerLeft">
<button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11" data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false" aria-controls="sidebarContainer">
<span data-l10n-id="pdfjs-toggle-sidebar-button-label">Toggle Sidebar</span>
<button id="sidebarToggle" class="toolbarButton" tabindex="11" aria-expanded="false" aria-controls="sidebarContainer">
<span>目录</span>
</button>
<div class="toolbarButtonSpacer"></div>
<button id="viewFind" class="toolbarButton" title="Find in Document" tabindex="12" data-l10n-id="pdfjs-findbar-button" aria-expanded="false" aria-controls="findbar">
<!-- <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11" data-l10n-id="pdfjs-toggle-sidebar-button" aria-expanded="false" aria-controls="sidebarContainer">
<span data-l10n-id="pdfjs-toggle-sidebar-button-label">Toggle Sidebar</span>
</button> -->
<!-- <div class="toolbarButtonSpacer"></div> -->
<button style="display: none;" id="viewFind" class="toolbarButton" title="Find in Document" tabindex="12" data-l10n-id="pdfjs-findbar-button" aria-expanded="false" aria-controls="findbar">
<span data-l10n-id="pdfjs-findbar-button-label">Find</span>
</button>
<div class="splitToolbarButton hiddenSmallView">
<div class="splitToolbarButton toolpageBtn">
<button class="toolbarButton" title="Previous Page" id="previous" tabindex="13" data-l10n-id="pdfjs-previous-button">
<span data-l10n-id="pdfjs-previous-button-label">Previous</span>
</button>
@ -289,12 +292,12 @@ See https://github.com/adobe-type-tools/cmap-resources
<span data-l10n-id="pdfjs-next-button-label">Next</span>
</button>
</div>
<span class="loadingInput start">
<span class="loadingInput start" style="display: none;">
<input type="number" id="pageNumber" class="toolbarField" title="Page" value="1" min="1" tabindex="15" data-l10n-id="pdfjs-page-input" autocomplete="off">
</span>
<span id="numPages" class="toolbarLabel"></span>
<span id="numPages" class="toolbarLabel" style="display: none;"></span>
</div>
<div id="toolbarViewerRight">
<div id="toolbarViewerRight" style="display: none;">
<div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
<button id="editorHighlight" class="toolbarButton" hidden="true" disabled="disabled" title="Highlight" role="radio" aria-checked="false" aria-controls="editorHighlightParamsToolbar" tabindex="31" data-l10n-id="pdfjs-editor-highlight-button">
<span data-l10n-id="pdfjs-editor-highlight-button-label">Highlight</span>

View File

@ -7407,7 +7407,8 @@ class PDFSidebar {
this.isInitialViewSet = false;
this.isInitialEventDispatched = false;
this.#hideUINotification(true);
this.switchView(SidebarView.THUMBS);
// this.switchView(SidebarView.THUMBS);默认开启书签模式
this.switchView(SidebarView.OUTLINE);
this.outlineButton.disabled = false;
this.attachmentsButton.disabled = false;
this.layersButton.disabled = false;
@ -13095,12 +13096,16 @@ const PDFViewerApplication = {
this.pdfViewer.scrollMode = scroll;
}
if (isValidSpreadMode(spread)) {
this.pdfViewer.spreadMode = spread;
//默认双页
// this.pdfViewer.spreadMode = spread;
this.pdfViewer.spreadMode = 1;
}
};
this.isInitialViewSet = true;
this.pdfSidebar?.setInitialView(sidebarView);
setViewerModes(scrollMode, spreadMode);
//默认双页
// setViewerModes(scrollMode, spreadMode);
setViewerModes(scrollMode, 1);
if (this.initialBookmark) {
setRotation(this.initialRotation);
delete this.initialRotation;

View File

@ -12,15 +12,20 @@ const props = defineProps({
type: String,
required: true,
default: ''
},
isWin: {
type: Boolean,
default: false
}
})
/**pdf文件地址 */
const pdfUrl = ref('');
/**pdfjs文件地址 */
const fileUrl = getAppInstallUrl('pdfjs-dist/web/viewer.html', 'user', '\\out\\renderer', true) + "?file=" //
const fileUrl = props.isWin ? props.url : getAppInstallUrl('pdfjs-dist/web/viewer.html', 'user', '\\out\\renderer', true) + "?file=" //
onMounted(() => {
/** 将传入的pdf地址进行编码防止中文识别错误 */
pdfUrl.value = fileUrl + encodeURIComponent(props.url)
if(props.isWin) pdfUrl.value = fileUrl
else pdfUrl.value = fileUrl + encodeURIComponent(props.url) + '#pageMode=outline'
})
</script>

View File

@ -15,6 +15,12 @@ export const constantRoutes = [
// component: ()=> import('../login/index.vue'),
hidden: true
},
{
path: '/fullscreenpdf',
component: () => import('@/views/fullScreenPdf/index.vue'),
name: 'fullscreenpdf',
meta: {title: '全屏显示PDF'}
},
{
path: '/',
component: Layout,
@ -74,6 +80,7 @@ export const constantRoutes = [
name: 'testpdf',
meta: {title: '测试PDF'}
},
{
path: '/classReserv',
component: () => import('@/views/classManage/classReserv.vue'),

View File

@ -325,7 +325,22 @@ export const toLinkWeb = (path) => {
cookieData: { ...config }
})
}
/**
* @description 外部跳转-web网页
* @param {*} path
* @param {*} params
*/
export const toRoter = (path) => {
const config = baseConfig()
// console.log(config)
// const fullPath = config.url + path
// 通知主进程
ipcRenderer.send('openWindow', {
key: `win-${Date.now()}`,
fullPath: path,
cookieData: { ...config }
})
}
// const taskHandles = () => {
// // 设置任务栏上下文菜单
// const contextMenu = new Remote.Menu()

View File

@ -187,7 +187,7 @@ import { parseCataByNode, creatPPT, asyncLocalFile } from '@/utils/talkFile'
import FileOperBatch from '@/views/prepare/container/file-oper-batch.vue'
import SetHomework from '@/components/set-homework/index.vue'
import outLink from '@/utils/linkConfig'
import { createWindow, sessionStore } from '@/utils/tool'
import { createWindow, sessionStore, getAppInstallUrl } from '@/utils/tool'
import { cloneDeep } from 'lodash'
import { delClasswork, listEntpcourse } from '@/api/teaching/classwork'
import { getClassInfo, getSelfReserv } from '@/api/classManage'
@ -330,8 +330,8 @@ export default {
this.openLesson(res.data.id);
})
},
getBookPathFromServer() {
let fileName = this.curBookPath
getBookPathFromServer(path) {
let fileName = path ? path : this.curBookPath
if (!fileName) return
fileName = fileName.replace('.txt', '.pdf')
return new Promise((resolve, reject) => {
@ -575,6 +575,9 @@ export default {
if (this.currentNode.id === data.node.id) return
this.curBookImg = data.textBook.curBookImg
this.curBookPath = data.textBook.curBookPath
const path = await this.getBookPathFromServer(data.textBook.curBookPath)
const localpath = getAppInstallUrl('pdfjs-dist/web/viewer.html', 'user', '\\out\\renderer', true) + "?file="
localStorage.setItem('PDF-LOCAL-PATH',localpath + encodeURIComponent(import.meta.env.VITE_APP_RES_FILE_PATH + path))
this.checkFileList = []
this.currentWorkList = []
let cata = parseCataByNode(data.node)

View File

@ -7,7 +7,7 @@
<el-image class="imges" :src="bookInfo ? bookInfo.avartar : ''" />
</div>
<div class="stand-head-right">
<div class="stand-head-right-tit">{{booktitle}}</div>
<div class="stand-head-right-tit">{{bookInfo ? bookInfo.bookName: ''}}</div>
<i class="iconfont icon-yidongdaozu stand-head-right-icon" @click="dialogVisible = true"></i>
<div class="stand-head-right-row">
<div class="stand-head-right-row-time">更新2024.9.10</div>
@ -72,7 +72,7 @@
<div class="booklist">
<div :class="{'item': true,'active': booksel === idx}" v-for="item,idx in bookList" :key="idx" @click="bookChange(item,idx)">
<el-image class="bookimg" :src="item.avartar" />
<div class="bookname">{{item.fileurl.replace('.txt', '')}}</div>
<div class="bookname">{{item.bookName}}</div>
</div>
</div>
</el-dialog>
@ -84,11 +84,13 @@ import PDF from '@/components/PdfJs/index.vue'
import { useRoute } from 'vue-router';
import useResoureStore from '../resource/store'
import { listEvaluationclue } from '@/api/teaching/classwork'
import { uploadServer, getJSONFile } from '@/utils/common'
// import { uploadServer, getJSONFile } from '@/utils/common'
import { ElNotification } from 'element-plus'
import ChooseTextbook from "@/components/choose-textbook/index.vue";
import { listEvaluation } from '@/api/classManage/index'
import useUserStore from '@/store/modules/user'
import { sessionStore } from '@/utils/store'
import { useGetSubject } from '@/hooks/useGetSubject'
const userStore = useUserStore()
const sourceStore = useResoureStore()
// import { getStaticUrl } from '@/utils/tool'
@ -105,7 +107,6 @@ const headref = ref(null);
const searchref = ref(null);
const listHeight = ref(0);
const dialogVisible = ref(false);
const booktitle = ref('');
const bookInfo = ref(null);
const booksel = ref(0);
const bookList = ref([])
@ -248,31 +249,43 @@ const getAllSubject = async () => {
const dataList = [];
rows && rows.map((item,idx) => {
if(item.fileurl !== ''){
dataList.push({...item,avartar: import.meta.env.VITE_APP_BUILD_BASE_PATH + item.avartar})
dataList.push({...item,avartar: import.meta.env.VITE_APP_BUILD_BASE_PATH + item.avartar,bookName: item.fileurl.replace('.txt','')})
}
})
bookList.value = dataList
bookInfo.value = {...dataList[0],avartar: dataList[0].avartar}
booktitle.value = dataList[0].fileurl.replace('.txt','')
const filePath = import.meta.env.VITE_APP_RES_FILE_PATH + dataList[0].fileurl.replace('.txt','.pdf')
await loadPdfAnimation(filePath)
const { id, rootid } = sessionStore.get('subject.curNode')
if(id && rootid){
const idx = dataList.findIndex(item => item.id === id && item.rootid === rootid)
let filePath = import.meta.env.VITE_APP_RES_FILE_PATH;
if(idx > -1){
bookInfo.value = {...dataList[idx]}
filePath += dataList[idx].fileurl.replace('.txt','.pdf')
}else{
bookInfo.value = {...dataList[0]}
filePath += dataList[0].fileurl.replace('.txt','.pdf')
}
await loadPdfAnimation(filePath)
}
}
const bookChange = async (item, idx) => {
booksel.value = idx
bookInfo.value = {...item}
booktitle.value = item.fileurl.replace('.txt','')
pdfUrl.value = '';
const filepath = import.meta.env.VITE_APP_RES_FILE_PATH + item.fileurl.replace('.txt','.pdf')
await loadPdfAnimation(filepath)
dialogVisible.value = false
}
const loadPdfAnimation = (path) => {
console.log('书本地址====',path);
const timer = setTimeout(() => {
pdfUrl.value = path
clearTimeout(timer);
},2000)
}
onMounted(async () => {
await useGetSubject();
await getAllSubject();
if(cardref.value && headref.value){
const cardH = cardref.value.offsetHeight;
@ -423,13 +436,18 @@ onMounted(async () => {
z-index: 2;
&-tit{
width: 100%;
height: 44px;
line-height: 22px;
font-size: 15px;
font-weight: 600;
white-space: nowrap;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
color: #3b3b3b;
text-align: left;
padding-right: 30px;
}
&-icon{
position: absolute;
@ -443,7 +461,6 @@ onMounted(async () => {
height: 32px;
display: flex;
justify-content: space-between;
margin-top: 12px;
&-time{
font-size: var(--el-font-size-extra-small);
color: var(--el-color-info-rgb);
@ -537,9 +554,10 @@ onMounted(async () => {
width: 130px;
height: 180px;
}
.name{
.bookname{
height: 60px;
line-height: 20px;
font-size: 14px;
color: #3b3b3b;
}
}
.item:hover{

View File

@ -38,7 +38,7 @@ import { computed, defineProps, ref, reactive, watchEffect, onMounted } from 'vu
import homework from './homework.vue';
// -
const colors = ['#00f389', '#ff7f00', '#ffff00', '#409EFF', '#00baff', '#13b189', '#F56C6C']
const colors = ['#409EFF','#00f389', '#ff7f00', '#ffff00', '#00baff', '#13b189', '#F56C6C']
const emit = defineEmits(['update:modelValue','change'])
const props = defineProps({
modelValue: { //
@ -48,6 +48,7 @@ const props = defineProps({
data: { //
type: Array,
default: () => [
{ label: '课件', prop: 'book', isExtra: true, icon: 'icon--kejian' },
{ label: '资源', prop: 'resource', icon: 'icon-kechengziyuan1' },
{ label: '互动', prop: 'interact', icon: 'icon-hudong' },
{ label: '窗口', prop: 'win', icon: 'icon-tubiaozhizuomobanyihuifu-' },

View File

@ -52,7 +52,7 @@ import imChat from './components/imChat.vue' // im-chat-子组件
import vDrag from './directive/drag' // -
import vIgnore from './directive/ignore' // -穿
import { useToolState } from '@/store/modules/tool' // -
import { ipcMsgSend, ipcMain, sessionStore } from '@/utils/tool' //
import { ipcMsgSend, ipcMain, sessionStore, toRoter } from '@/utils/tool' //
import MsgEnum from '@/plugins/imChat/msgEnum' // -(nuem)
const route = useRoute();
@ -62,6 +62,7 @@ const isDrag = ref(false) // 开始拖拽
const dragtime = ref(0) // -
const isShow = ref(false) // -
const isOver = ref(false) //
const isOpenBook = ref(false)
const toolStore = useToolState() //
const boardVueRef=ref(null) // ref
const upvoteRef = ref(null) // ref
@ -70,6 +71,7 @@ const classObj = reactive({ // 课程相关
id: route.query.reservId, // id
data: {} //
})
const bookInfo = ref(null)
const msgIds = [] // id
const electron = window.electron // electron
const btnList = [ //
@ -88,6 +90,7 @@ onMounted(async() => {
window.test1 = toolStore
getClassInfo() // ex3
resetStatus() // -
})
// ==== ===
@ -204,6 +207,16 @@ const sideMouse = e => {
const sideChange = async o => {
// console.log(o)
switch(o.prop) {
case 'book':
if(isOpenBook.value) {
isOpenBook.value = false
ElMessage.info('已经打开课本了哦')
}else {
// createWindow('fullScreen-PDF',{url: '/fullscreenpdf'})
toRoter(`${process.env['ELECTRON_RENDERER_URL']}/#/fullscreenpdf`)
isOpenBook.value = true
}
break
case 'resource': //
break
case 'interact': //