From f208627f6f913bd5eb8f77c370021287f207239c Mon Sep 17 00:00:00 2001 From: pan <1029559041@qq.com> Date: Sat, 25 Jul 2020 15:23:56 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=87=E6=A1=A3=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layouts/mainmenu.vue | 6 +- nuxt.config.js | 14 +++- package.json | 4 +- pages/index/document.vue | 174 +++++++-------------------------------- pages/index/read.vue | 151 +++++++++++++++++++++++++++++++++ plugins/contextmenu.js | 5 ++ plugins/global.js | 26 +++++- store/menus.js | 16 ++++ store/read.js | 42 ++++++++++ yarn.lock | 10 +++ 10 files changed, 302 insertions(+), 146 deletions(-) create mode 100644 pages/index/read.vue create mode 100644 plugins/contextmenu.js create mode 100644 store/menus.js create mode 100644 store/read.js diff --git a/layouts/mainmenu.vue b/layouts/mainmenu.vue index 0bb455b..9b79264 100644 --- a/layouts/mainmenu.vue +++ b/layouts/mainmenu.vue @@ -42,7 +42,11 @@ }, data() { return { - menus: ['document', 'note', 'center', 'upload'] + } + }, + computed:{ + menus(){ + return this.$store.state.menus.menus } }, mounted() { diff --git a/nuxt.config.js b/nuxt.config.js index edd716f..7f2d992 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -37,7 +37,7 @@ export default { ** Plugins to load before mounting the App ** https://nuxtjs.org/guide/plugins */ - plugins: ['@/plugins/element-ui','@/plugins/vue-cookies','@/plugins/global','@/plugins/moment'], + plugins: ['@/plugins/element-ui','@/plugins/vue-cookies','@/plugins/global','@/plugins/moment','@/plugins/contextmenu'], /* ** Auto import components ** See https://nuxtjs.org/api/configuration-components @@ -161,6 +161,7 @@ export default { "center": "个人中心", "document": "文档", "note": "笔记列表", + "read": "阅读论文", "upload": "本地上传论文" }, "more_query": "更多查询", @@ -173,6 +174,11 @@ export default { "confirm_del": "此操作将永久删除该笔记，是否继续？" } }, + "read": { + "contextmenu": { + "add": "添加笔记" + } + }, "reading_online": "在线阅读", "tip": "提示", "today_recommend": "今日推荐", @@ -274,6 +280,7 @@ export default { "center": "", "document": "document", "note": "note list", + "read": "", "upload": "" }, "more_query": "", @@ -286,6 +293,11 @@ export default { "confirm_del": "" } }, + "read": { + "contextmenu": { + "add": "" + } + }, "reading_online": "", "tip": "", "today_recommend": "", diff --git a/package.json b/package.json index 0c7980c..6e3b83c 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,9 @@ "moment": "^2.27.0", "nuxt": "^2.13.0", "nuxt-i18n": "^6.13.1", - "vue-cookies": "^1.7.2" + "v-contextmenu": "^2.9.0", + "vue-cookies": "^1.7.2", + "vue-runtime-helpers": "^1.1.2" }, "devDependencies": { "@nuxt/typescript-build": "^1.0.3", diff --git a/pages/index/document.vue b/pages/index/document.vue index f654776..b150d56 100644 --- a/pages/index/document.vue +++ b/pages/index/document.vue @@ -50,7 +50,7 @@ - + {{index+1}}. @@ -70,10 +70,10 @@ - {{tag}} + {{tag}} - {{$t('reading_online')}} + {{$t('reading_online')}} @@ -83,7 +83,7 @@

{{$t('today_recommend')}}
- +

{{item.title}}

{{item.summary}}

 @@ -116,144 +116,34 @@ }, rules: {}, activeNames: [], - docList:[ - { - title:'浅谈中国山水画的传承与创新', - type:'硕士论文', - author:'马俊', - profession:'网络游戏', - school:'中国美术学院', - year:2011, - summary:'摘要：传统的中国山水画建立在自然形象及其对人对自然升华的基础上。在哲学意义上，它的语言和精神性依赖于一个自然体系。而当下中国艺术的现代性转变也是一个如何超越自然体系的问题。现代性面对的社会和空间是工业社会和城市。', - tags:['山水画','空间经验','构成主义'] - }, - { - title:'浅谈中国山水画的传承与创新', - type:'硕士论文', - author:'马俊', - profession:'网络游戏', - school:'中国美术学院', - year:2011, - summary:'摘要：传统的中国山水画建立在自然形象及其对人对自然升华的基础上。在哲学意义上，它的语言和精神性依赖于一个自然体系。而当下中国艺术的现代性转变也是一个如何超越自然体系的问题。现代性面对的社会和空间是工业社会和城市。' - }, - { - title:'浅谈中国山水画的传承与创新', - type:'硕士论文', - author:'马俊', - profession:'网络游戏', - school:'中国美术学院', - year:2011, - summary:'摘要：传统的中国山水画建立在自然形象及其对人对自然升华的基础上。在哲学意义上，它的语言和精神性依赖于一个自然体系。而当下中国艺术的现代性转变也是一个如何超越自然体系的问题。现代性面对的社会和空间是工业社会和城市。', - tags:['山水画','空间经验','构成主义'] - }, - { - title:'浅谈中国山水画的传承与创新', - type:'硕士论文', - author:'马俊', - profession:'网络游戏', - school:'中国美术学院', - year:2011, - summary:'摘要：传统的中国山水画建立在自然形象及其对人对自然升华的基础上。在哲学意义上，它的语言和精神性依赖于一个自然体系。而当下中国艺术的现代性转变也是一个如何超越自然体系的问题。现代性面对的社会和空间是工业社会和城市。' - }, - { - title:'浅谈中国山水画的传承与创新', - type:'硕士论文', - author:'马俊', - profession:'网络游戏', - school:'中国美术学院', - year:2011, - summary:'摘要：传统的中国山水画建立在自然形象及其对人对自然升华的基础上。在哲学意义上，它的语言和精神性依赖于一个自然体系。而当下中国艺术的现代性转变也是一个如何超越自然体系的问题。现代性面对的社会和空间是工业社会和城市。', - tags:['山水画','空间经验','构成主义'] - }, - { - title:'浅谈中国山水画的传承与创新', - type:'硕士论文', - author:'马俊', - profession:'网络游戏', - school:'中国美术学院', - year:2011, - summary:'摘要：传统的中国山水画建立在自然形象及其对人对自然升华的基础上。在哲学意义上，它的语言和精神性依赖于一个自然体系。而当下中国艺术的现代性转变也是一个如何超越自然体系的问题。现代性面对的社会和空间是工业社会和城市。' - }, - { - title:'浅谈中国山水画的传承与创新', - type:'硕士论文', - author:'马俊', - profession:'网络游戏', - school:'中国美术学院', - year:2011, - summary:'摘要：传统的中国山水画建立在自然形象及其对人对自然升华的基础上。在哲学意义上，它的语言和精神性依赖于一个自然体系。而当下中国艺术的现代性转变也是一个如何超越自然体系的问题。现代性面对的社会和空间是工业社会和城市。', - tags:['山水画','空间经验','构成主义'] - }, - { - title:'浅谈中国山水画的传承与创新', - type:'硕士论文', - author:'马俊', - profession:'网络游戏', - school:'中国美术学院', - year:2011, - summary:'摘要：传统的中国山水画建立在自然形象及其对人对自然升华的基础上。在哲学意义上，它的语言和精神性依赖于一个自然体系。而当下中国艺术的现代性转变也是一个如何超越自然体系的问题。现代性面对的社会和空间是工业社会和城市。' - },{ - title:'浅谈中国山水画的传承与创新', - type:'硕士论文', - author:'马俊', - profession:'网络游戏', - school:'中国美术学院', - year:2011, - summary:'摘要：传统的中国山水画建立在自然形象及其对人对自然升华的基础上。在哲学意义上，它的语言和精神性依赖于一个自然体系。而当下中国艺术的现代性转变也是一个如何超越自然体系的问题。现代性面对的社会和空间是工业社会和城市。', - tags:['山水画','空间经验','构成主义'] - }, - { - title:'浅谈中国山水画的传承与创新', - type:'硕士论文', - author:'马俊', - profession:'网络游戏', - school:'中国美术学院', - year:2011, - summary:'摘要：传统的中国山水画建立在自然形象及其对人对自然升华的基础上。在哲学意义上，它的语言和精神性依赖于一个自然体系。而当下中国艺术的现代性转变也是一个如何超越自然体系的问题。现代性面对的社会和空间是工业社会和城市。' - } - ], - recommend_list:[ - { - title:'玩具产品的情感设计研究', - summary:'摘要：首先,玩具作为一种产品,是设计者情感的外显化与实物化,设计者通过玩具的设计,将生活中的感动和梦想投射到玩具形像中,使得这样的情感和梦想得到延续。而使用者在使用玩具时,也能感受到设计师的情感,从而产生共鸣。' - }, - { - title:'玩具产品的情感设计研究', - summary:'摘要：首先,玩具作为一种产品,是设计者情感的外显化与实物化,设计者通过玩具的设计,将生活中的感动和梦想投射到玩具形像中,使得这样的情感和梦想得到延续。而使用者在使用玩具时,也能感受到设计师的情感,从而产生共鸣。' - }, - { - title:'玩具产品的情感设计研究', - summary:'摘要：首先,玩具作为一种产品,是设计者情感的外显化与实物化,设计者通过玩具的设计,将生活中的感动和梦想投射到玩具形像中,使得这样的情感和梦想得到延续。而使用者在使用玩具时,也能感受到设计师的情感,从而产生共鸣。' - }, - { - title:'玩具产品的情感设计研究', - summary:'摘要：首先,玩具作为一种产品,是设计者情感的外显化与实物化,设计者通过玩具的设计,将生活中的感动和梦想投射到玩具形像中,使得这样的情感和梦想得到延续。而使用者在使用玩具时,也能感受到设计师的情感,从而产生共鸣。' - }, - { - title:'玩具产品的情感设计研究', - summary:'摘要：首先,玩具作为一种产品,是设计者情感的外显化与实物化,设计者通过玩具的设计,将生活中的感动和梦想投射到玩具形像中,使得这样的情感和梦想得到延续。而使用者在使用玩具时,也能感受到设计师的情感,从而产生共鸣。' - }, - { - title:'玩具产品的情感设计研究', - summary:'摘要：首先,玩具作为一种产品,是设计者情感的外显化与实物化,设计者通过玩具的设计,将生活中的感动和梦想投射到玩具形像中,使得这样的情感和梦想得到延续。而使用者在使用玩具时,也能感受到设计师的情感,从而产生共鸣。' - }, - { - title:'玩具产品的情感设计研究', - summary:'摘要：首先,玩具作为一种产品,是设计者情感的外显化与实物化,设计者通过玩具的设计,将生活中的感动和梦想投射到玩具形像中,使得这样的情感和梦想得到延续。而使用者在使用玩具时,也能感受到设计师的情感,从而产生共鸣。' - }, - { - title:'玩具产品的情感设计研究', - summary:'摘要：首先,玩具作为一种产品,是设计者情感的外显化与实物化,设计者通过玩具的设计,将生活中的感动和梦想投射到玩具形像中,使得这样的情感和梦想得到延续。而使用者在使用玩具时,也能感受到设计师的情感,从而产生共鸣。' - }, - { - title:'玩具产品的情感设计研究', - summary:'摘要：首先,玩具作为一种产品,是设计者情感的外显化与实物化,设计者通过玩具的设计,将生活中的感动和梦想投射到玩具形像中,使得这样的情感和梦想得到延续。而使用者在使用玩具时,也能感受到设计师的情感,从而产生共鸣。' - }, - { - title:'玩具产品的情感设计研究', - summary:'摘要：首先,玩具作为一种产品,是设计者情感的外显化与实物化,设计者通过玩具的设计,将生活中的感动和梦想投射到玩具形像中,使得这样的情感和梦想得到延续。而使用者在使用玩具时,也能感受到设计师的情感,从而产生共鸣。' - } - ] + docList:[], + recommend_list:[] + } + }, + methods:{ + read(item:any){ + this.$store.commit('menus/read') + this.$store.commit('read/open',item) + this.$router.push(this.localePath('/read')) + } + }, + mounted() { + for(let i=0;i<10;i++){ + this.docList.push({ + title:'浅谈中国山水画的传承与创新'+i, + type:'硕士论文', + author:'马俊', + profession:'网络游戏', + school:'中国美术学院', + year:2011, + summary:'摘要：传统的中国山水画建立在自然形象及其对人对自然升华的基础上。在哲学意义上，它的语言和精神性依赖于一个自然体系。而当下中国艺术的现代性转变也是一个如何超越自然体系的问题。现代性面对的社会和空间是工业社会和城市。', + tags:['山水画','空间经验','构成主义'], + content:`
123
` + }) + this.recommend_list.push({ + title:'玩具产品的情感设计研究', + summary:'摘要：首先,玩具作为一种产品,是设计者情感的外显化与实物化,设计者通过玩具的设计,将生活中的感动和梦想投射到玩具形像中,使得这样的情感和梦想得到延续。而使用者在使用玩具时,也能感受到设计师的情感,从而产生共鸣。' + }) } } }) diff --git a/pages/index/read.vue b/pages/index/read.vue new file mode 100644 index 0000000..2f0228b --- /dev/null +++ b/pages/index/read.vue @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/plugins/contextmenu.js b/plugins/contextmenu.js new file mode 100644 index 0000000..baefb04 --- /dev/null +++ b/plugins/contextmenu.js @@ -0,0 +1,5 @@ +import contentmenu from 'v-contextmenu' +import 'v-contextmenu/dist/index.css' +import Vue from 'vue' + +Vue.use(contentmenu) diff --git a/plugins/global.js b/plugins/global.js index 497c210..6777f8d 100644 --- a/plugins/global.js +++ b/plugins/global.js @@ -2,5 +2,29 @@ import Vue from 'vue' Vue.prototype.GLOBAL ={ //用户cookie - user_key:'user' + user_key:'user', + //获取当前光标位置 + getCursortPosition:function(element) { + var caretOffset = 0; + var doc = element.ownerDocument || element.document; + var win = doc.defaultView || doc.parentWindow; + var sel; + if (typeof win.getSelection != "undefined") {//谷歌、火狐 + sel = win.getSelection(); + if (sel.rangeCount > 0) {//选中的区域 + var range = win.getSelection().getRangeAt(0); + var preCaretRange = range.cloneRange();//克隆一个选中区域 + preCaretRange.selectNodeContents(element);//设置选中区域的节点内容为当前节点 + preCaretRange.setEnd(range.endContainer, range.endOffset); //重置选中区域的结束位置 + caretOffset = preCaretRange.toString().length; + } + } else if ((sel = doc.selection) && sel.type !== "Control") {//IE + var textRange = sel.createRange(); + var preCaretTextRange = doc.body.createTextRange(); + preCaretTextRange.moveToElementText(element); + preCaretTextRange.setEndPoint("EndToEnd", textRange); + caretOffset = preCaretTextRange.text.length; + } + return caretOffset; + } } diff --git a/store/menus.js b/store/menus.js new file mode 100644 index 0000000..db7df07 --- /dev/null +++ b/store/menus.js @@ -0,0 +1,16 @@ +/** + * 菜单列表 + */ +export const state=()=>({ + menus:['document', 'note', 'center', 'upload'] +}) +export const mutations = { + //默认不包含阅读论文菜单 + none(state){ + state.menus=['document', 'note', 'center', 'upload'] + }, + //包含阅读论文菜单 + read(state){ + state.menus=['document', 'note', 'center', 'upload','read'] + } +} diff --git a/store/read.js b/store/read.js new file mode 100644 index 0000000..44caaba --- /dev/null +++ b/store/read.js @@ -0,0 +1,42 @@ +/** + * 阅读论文标签数据 + */ +export const state=()=>({ + //已打开论文列表 + read:[], + //激活的论文标签 + activeName:'' +}) +export const mutations = { + //新建论文标签 + open(state,item){ + let isNew=true + for(let i in state.read) { + if (state.read[i].title === item.title) { + isNew=false + mutations.choose(state,item.title) + } + } + if(isNew) { + state.read.push(item) + mutations.choose(state, state.read[state.read.length - 1].title) + } + }, + //关闭论文标签 + close(state,title){ + for(let i in state.read){ + if(state.read[i].title===title){ + state.read.splice(i,1) + if(state.read.length>0){ + if(state.activeName===title) { + mutations.choose(state, state.read[state.read.length - 1].title) + } + } + } + } + }, + //选择论文标签 + choose(state,title){ + state.activeName=title + } +} diff --git a/yarn.lock b/yarn.lock index e8d810e..df67a1d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10334,6 +10334,11 @@ uuid@^3.3.2: resolved "https://registry.npm.taobao.org/uuid/download/uuid-3.4.0.tgz?cache=0&sync_timestamp=1592944143460&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuuid%2Fdownload%2Fuuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee" integrity sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4= +v-contextmenu@^2.9.0: + version "2.9.0" + resolved "https://registry.npm.taobao.org/v-contextmenu/download/v-contextmenu-2.9.0.tgz#1753a7afc42051f1ed5cb75c20498a16fd7ec332" + integrity sha1-F1Onr8QgUfHtXLdcIEmKFv1+wzI= + v8-compile-cache@^2.0.3, v8-compile-cache@^2.1.1: version "2.1.1" resolved "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745" @@ -10446,6 +10451,11 @@ vue-router@^3.3.4: resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.3.4.tgz?cache=0&sync_timestamp=1592476684972&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.3.4.tgz#4e38abc34a11c41b6c3d8244449a2e363ba6250b" integrity sha1-Tjirw0oRxBtsPYJERJouNjumJQs= +vue-runtime-helpers@^1.1.2: + version "1.1.2" + resolved "https://registry.npm.taobao.org/vue-runtime-helpers/download/vue-runtime-helpers-1.1.2.tgz#446b7b820888ab0c5264d2c3a32468e72e4100f3" + integrity sha1-RGt7ggiIqwxSZNLDoyRo5y5BAPM= + vue-server-renderer@^2.6.11: version "2.6.11" resolved "https://registry.npm.taobao.org/vue-server-renderer/download/vue-server-renderer-2.6.11.tgz#be8c9abc6aacc309828a755c021a05fc474b4bc3"