+
-
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -65,7 +127,6 @@
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
-// mount with global
Vue.use(VueQuillEditor)
export default {
@@ -79,18 +140,23 @@ export default {
data () {
return {
result: '',
- contentArr: [],
+ contentArr: null,
carouselData: [],
isEditorToolboxFixed: false,
isShowAddCarousel: false,
uploadImage: `${this.Http.baseUrl}tools/upload-image/`,
+ uploadAudio: `${this.Http.baseUrl}tools/upload-file/`,
uploadImageData: {
identifier: '',
image_type: 'sun/content'
},
+ uploadAudioData: {
+ file_type: 'sun/audio'
+ },
uploadHeader: {
Authorization: `Token ${window.localStorage.token}`
},
+ isCompressImage: true,
processLoading: false,
startTimestamp: new Date(),
editorOption: {
@@ -113,15 +179,22 @@ export default {
]
}
},
- content: `
-
{{section.header.name}}
-{{section.subheader.name}}
+{{section.header.name}}
+{{section.subheader.name}}
+
+ {{section.header.name}}
+{{section.subheader.name}}
+
+
+
+ {{item}}
+Text content loading..
` + content: `Text content loading..
`, + carouselWidth: 0 } }, methods: { + setSize: function () { + if (this.$refs.imageCarousel && this.$refs.imageCarousel.length > 0) { + this.carouselWidth = this.$refs.imageCarousel[0].$el.clientWidth + } + }, formatContentNode () { let content = this.$refs.resultContent if (!content || !content.childNodes) return this.contentArr = this.Utils.formatProject(content.childNodes) console.log('contentArr - \n', this.contentArr) + this.setSize() }, showSplit () { let quill = this.$refs.myQuillEditor.quill @@ -164,8 +237,39 @@ export default { }) .catch(_ => {}) }, - handleBeforeUpdate () { + handleBeforeUpdate (file) { + this.uploadImageData.identifier = new Date().getTime() + // 限制上传大小 + }, + handleImageBeforeUpdate (file) { this.uploadImageData.identifier = new Date().getTime() + // 限制上传图片大小 + let originSize = file.size + if (originSize > 15728640) { + // 不能超过 15 M + console.error('Image too large') + this.$message.error('图片太大, 请先本地压缩') + return false + } else if (originSize > 0 && this.isCompressImage) { + const vm = this + return new Promise((resolve) => { + const reader = new FileReader() + const image = new Image() + image.onload = (imageEvent) => { + let dataUrl = vm.Utils.compressImage(image, file.type) + let blobData = vm.Utils.dataURItoBlob(dataUrl, file.type) + let compressedSize = blobData.size + this.$notify({ + type: 'success', + title: '压缩成功', + message: `体积从 ${(originSize / 1024 / 1024).toFixed(2)}M 缩小到了 ${(compressedSize / 1024 / 1024).toFixed(2)}M` + }) + resolve(blobData) + } + reader.onload = e => { image.src = e.target.result } + reader.readAsDataURL(file) + }) + } }, handleUploadProcess () { this.processLoading = true @@ -198,6 +302,38 @@ export default { } // loading动画消失 }, + // 插入音频 + joinAudio: function (state) { + // button is clicked + // this.$refs.myQuillEditor.quill.root.children.push('99999
') + console.log(this.$refs.myQuillEditor.quill.root.children) + document.querySelector('.upload-audio input').click() + console.log('Btn', state) + }, + bindUploadAudioSuccess: function (res, file) { + console.log(res, file) + this.addAudioToQuill(res) + this.processLoading = false + }, + addAudioToQuill: function (res) { + let quill = this.$refs.myQuillEditor.quill + // 如果上传成功 + if (res) { + // 获取光标所在位置 + let length = quill.getSelection().index + // 插入图片 res.info为服务器返回的图片地址 + // quill.insertEmbed(length, 'audio', res) + let content = `` + // 插入 + quill.insertText(length, content, { + 'color': '#666666' + }) + // 调整光标到最后 + quill.setSelection(length + 1) + } else { + this.$message.error('音频插入失败') + } + }, addCarouselImage: function (params) { let imgItem = { type: 'image', @@ -235,9 +371,10 @@ export default { this.closeAddCarousel() }, confirmText: function (params) { - console.log('CONTENT | ', this.content) this.result = this.content - // this.formatContentNode() + setTimeout(() => { + this.formatContentNode() + }, 200) this.$emit('confirmEditorRichText', this.content) }, cancel: function (params) { @@ -268,6 +405,7 @@ export default { }, 1300) var vm = this vm.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler) + // vm.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('audio', this.audioHandler) } } diff --git a/src/views/Home.vue b/src/views/Home.vue index a50c906..59c2b3e 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,15 +1,9 @@
-
-
-
@@ -17,7 +11,7 @@
Research-based,
-Problem-solving,
-Experience-creating,
-DESIGNER.
- ![Not found]()
+ ![]()
- ![]()
+ ![]()
{{element.name}}
{{element.discribe}}
@@ -171,7 +165,7 @@ export default { return { ...item, uuid: item.uuid, - src: item.header_image.replace('Http://', 'Https://'), + src: item.thumbnail.replace('Http://', 'Https://') + '?x-oss-process=style/smaller', name: item.title, discribe: item.explanation, group: item.category @@ -274,15 +268,15 @@ export default { background-size: cover; background-repeat: no-repeat; background-position: center; - cursor: pointer; - background-image: url(/static/images/imgnm.jpg); /* 首页背景图片 */ + /* cursor: pointer; */ + background-image: url(https://static.dubheee.cn/sun/static/imgnm.png?x-oss-process=style/2k); /* 首页背景图片 */ } .mobile-home { height: calc(100vh - 66px); width: 100%; - cursor: pointer; + /* cursor: pointer; */ background-color: black; - background-image: url(/static/images/imgmb.jpg); /* 首页背景图片 */ + background-image: url(https://static.dubheee.cn/sun/static/imgmb.png?x-oss-process=style/2k); /* 首页背景图片 */ background-size: cover; background-repeat: no-repeat; color: #ffffff; @@ -304,6 +298,7 @@ export default { .home-page .project-item { position: relative; overflow: hidden; + cursor: url(https://static.dubheee.cn/sun/static/cursor_pointer.png) 22.8 0, pointer; .hover-show { position: absolute; top: 100%; diff --git a/src/views/Periodic.vue b/src/views/Periodic.vue index 355aa49..634766a 100644 --- a/src/views/Periodic.vue +++ b/src/views/Periodic.vue @@ -496,7 +496,7 @@ body { outline: 1px solid rgba(127,255,255,0.75); border: 0px; padding: 5px 10px; - cursor: pointer; + cursor: url(https://static.dubheee.cn/sun/static/cursor_pointer.png),pointer; } .page-dashboard button:hover { background-color: rgba(0,255,255,0.5); diff --git a/src/views/Post.vue b/src/views/Post.vue index 2826efc..37c382b 100644 --- a/src/views/Post.vue +++ b/src/views/Post.vue @@ -368,7 +368,7 @@ export default { .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; - cursor: pointer; + cursor: url(https://static.dubheee.cn/sun/static/cursor_pointer.png),pointer; position: relative; } .el-upload:hover { diff --git a/src/views/PostRecord.vue b/src/views/PostRecord.vue index 85b1093..77415e4 100644 --- a/src/views/PostRecord.vue +++ b/src/views/PostRecord.vue @@ -74,7 +74,7 @@ class="grid-item grid-sizer">
{{index+1}}. {{item.title}}
diff --git a/src/views/Project.vue b/src/views/Project.vue
index 236b23f..902de9e 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -10,6 +10,8 @@
v-bind:style="{ background: articleDetail.theme_color || 'gray'}"
class="left-col mb-0">
![Header photos - title]()
@@ -31,7 +33,7 @@
-
+
-
+
+
+
+
+
+
+
@@ -134,7 +151,8 @@ export default {
theme_color: '#000000'
},
categoryConfig: categoryConfig,
- carouselWidth: 0
+ carouselWidth: 0,
+ contentWidth: 0
}
},
created () {
@@ -181,10 +199,54 @@ export default {
this.$scrollTo(5)
},
setSize: function () {
- if (this.$refs.imageCarousel && this.$refs.imageCarousel.length > 0) {
- this.carouselWidth = this.$refs.imageCarousel[0].$el.clientWidth
+ let contentNode = this.$refs.contentNode
+ this.contentWidth = contentNode.clientWidth
+ this.$nextTick().then(() => {
+ if (this.$refs.imageCarousel && this.$refs.imageCarousel.length > 0) {
+ this.carouselWidth = this.$refs.imageCarousel[0].$el.clientWidth
+ // console.log('carouselWidth:', this.carouselWidth)
+ this.calcImageSize()
+ }
+ })
+ },
+ calcImageSize () {
+ let needCalcArrs = this.articleDetail.contentArr.filter((item) => this.imageDetectFilterFunc(item))
+ if (needCalcArrs.length > 0) {
+ let imagePromiseArr = []
+ this.articleDetail.contentArr.forEach((each, index) => {
+ if (this.imageDetectFilterFunc(each)) {
+ // console.log(each, index)
+ imagePromiseArr.push(this.Utils.loadImage(each.firstImageUrl))
+ } else {
+ imagePromiseArr.push(this.nothingPromise())
+ }
+ })
+ Promise.all(imagePromiseArr).then((resArr) => {
+ if (resArr) {
+ resArr.forEach((value, index, array) => {
+ if (value) {
+ // console.log(value.height, value.width, index)
+ let item = this.articleDetail.contentArr[index]
+ if (item.styleClass === 'images-section') {
+ item.height = value.height
+ item.width = value.width
+ this.$set(this.articleDetail.contentArr, index, item)
+ }
+ }
+ })
+ }
+ })
}
},
+ nothingPromise () {
+ return new Promise(resolve => resolve())
+ },
+ imageDetectFilterFunc (item) {
+ return item.styleClass === 'images-section' && item.images && item.images.length > 1 && (item.height === 0 || item.width === 0)
+ },
+ elCarouselHeight (section) {
+ return parseInt(this.carouselWidth * section.height / section.width) || 400
+ },
onScroll: function (e, position) {
this.position = position
this.scrollTop = position.scrollTop
@@ -218,24 +280,36 @@ export default {
this.isDetailLoading = true
let uuid = this.$router.history.current.params.uuid
this.Http.SimpleGet(`sun-create/article/${uuid}/`).then(res => {
- this.articleDetail = res
+ this.articleDetail = {
+ ...res,
+ header_image: res.header_image.indexOf('x-oss') >= 0 ? res.header_image : `${res.header_image}?x-oss-process=style/2k`
+ }
setTimeout(() => {
let promiseTitle = this.formatTitleMenu(res.title)
let promiseContent = this.formatContentNode()
Promise.all([promiseTitle, promiseContent]).then(res => {
+ console.log('Then')
this.isDetailLoading = false
this.setSize()
+ }).catch((err) => {
+ console.error(err)
})
}, 200)
})
},
formatContentNode () {
- let content = this.$refs.content
- this.articleDetail.contentArr = this.Utils.formatProject(content.childNodes)
let that = this
- setTimeout(() => {
- that.totalHeight = this.$refs.bottomFooter.offsetTop - window.innerHeight
- }, 1000)
+ return new Promise((resolve, reject) => {
+ that.$nextTick().then(() => {
+ let content = that.$refs.content
+ that.articleDetail.contentArr = that.Utils.formatProject(content.childNodes)
+ console.log('End build')
+ that.$nextTick().then(() => {
+ that.totalHeight = that.$refs.bottomFooter.offsetTop - window.innerHeight
+ resolve(that.totalHeight)
+ })
+ })
+ })
// console.log('contentArr - \n', this.articleDetail.contentArr)
},
// titleList: this.formatTitleMenu(item.content)
@@ -304,6 +378,7 @@ export default {
height: 100vh;
overflow: auto;
overflow-x: hidden;
+ transition-duration: 200ms; // Fix 高度变化
}
.active-header section.page-project {
height: calc(100vh - 66px);
diff --git a/src/views/medias/UploadDialog.vue b/src/views/medias/UploadDialog.vue
new file mode 100644
index 0000000..35bad05
--- /dev/null
+++ b/src/views/medias/UploadDialog.vue
@@ -0,0 +1,98 @@
+
+
+
+
+ {{item.title}}
+
+
+
+
+
+
+
+
+
+
+
+ 上传{{selectTypeObj.title}}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/medias/index.vue b/src/views/medias/index.vue
new file mode 100644
index 0000000..324f8c9
--- /dev/null
+++ b/src/views/medias/index.vue
@@ -0,0 +1,103 @@
+
+
{{section.header.name}}
@@ -53,14 +55,29 @@ :autoplay="section.images.length > 2 ? true : false" :loop="section.images.length > 2 ? true : false" ref="imageCarousel" - :height="(parseInt(carouselWidth * section.height / section.width) || 400) + 'px'" + :height="elCarouselHeight(section) + 'px'" indicator-position="outside">
+
+
+ {{item}}
++
{{selectTypeObj.title}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/medias/mediaItem.vue b/src/views/medias/mediaItem.vue
new file mode 100644
index 0000000..4935ad6
--- /dev/null
+++ b/src/views/medias/mediaItem.vue
@@ -0,0 +1,62 @@
+
+ 素材库
+
+ 上传
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/pages/NotFound.vue b/src/views/pages/NotFound.vue
new file mode 100644
index 0000000..30c185b
--- /dev/null
+++ b/src/views/pages/NotFound.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+ +
+ {{media.name}}
+ {{media.type}}
+
+ {{media.oss_path}}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/static/images/construction02.gif b/static/images/construction02.gif
new file mode 100644
index 0000000..29a3a36
Binary files /dev/null and b/static/images/construction02.gif differ
diff --git a/static/images/cursor.png b/static/images/cursor.png
new file mode 100644
index 0000000..6574d04
Binary files /dev/null and b/static/images/cursor.png differ
diff --git a/static/images/imgmb.jpg b/static/images/imgmb.jpg
deleted file mode 100644
index 0502476..0000000
Binary files a/static/images/imgmb.jpg and /dev/null differ
diff --git a/static/images/imgmb.png b/static/images/imgmb.png
new file mode 100644
index 0000000..a50b3c0
Binary files /dev/null and b/static/images/imgmb.png differ
diff --git a/static/images/imgnm.jpg b/static/images/imgnm.jpg
deleted file mode 100644
index dd821ba..0000000
Binary files a/static/images/imgnm.jpg and /dev/null differ
diff --git a/static/images/imgnm.png b/static/images/imgnm.png
new file mode 100644
index 0000000..942f055
Binary files /dev/null and b/static/images/imgnm.png differ
diff --git a/static/images/logo.jpg b/static/images/logo.jpg
index c63e292..a49fbea 100644
Binary files a/static/images/logo.jpg and b/static/images/logo.jpg differ
diff --git a/static/images/logo.png b/static/images/logo.png
index 9ef511e..aee0e78 100644
Binary files a/static/images/logo.png and b/static/images/logo.png differ
diff --git a/static/images/project/img1.png b/static/images/project/img1.png
index 4377999..e9c9c8a 100644
Binary files a/static/images/project/img1.png and b/static/images/project/img1.png differ
diff --git a/static/images/project/img2.png b/static/images/project/img2.png
index 8fef036..e5fed71 100644
Binary files a/static/images/project/img2.png and b/static/images/project/img2.png differ