refine

src/api/article.js

 import fetch from 'utils/fetch'
 
-export function getList () {
+export function getList() {
   return fetch({
     url: '/article/list',
     method: 'get'
   })
 }
 
-export function getArticle () {
+export function getArticle() {
   return fetch({
     url: '/article/detail',
     method: 'get'

src/api/article_table.js

 import fetch from 'utils/fetch'
 
-export function fetchList (query) {
+export function fetchList(query) {
   return fetch({
     url: '/article_table/list',
     method: 'get',
@@ -8,7 +8,7 @@ export function fetchList (query) {
   })
 }
 
-export function fetchPv (pv) {
+export function fetchPv(pv) {
   return fetch({
     url: '/article_table/pv',
     method: 'get',

src/api/login.js

 import fetch from 'utils/fetch'
 
-export function loginByUsername (username, password) {
+export function loginByUsername(username, password) {
   const data = {
     username,
     password
@@ -12,14 +12,14 @@ export function loginByUsername (username, password) {
   })
 }
 
-export function logout () {
+export function logout() {
   return fetch({
     url: '/login/logout',
     method: 'post'
   })
 }
 
-export function getInfo (token) {
+export function getInfo(token) {
   return fetch({
     url: '/user/info',
     method: 'get',

src/api/qiniu.js

 import fetch from 'utils/fetch'
 
-export function getToken () {
+export function getToken() {
   return fetch({
     url: '/qiniu/upload/token', // 假地址 自行替换
     method: 'get'

src/api/remoteSearch.js

 import fetch from 'utils/fetch'
 
-export function userSearch (name) {
+export function userSearch(name) {
   return fetch({
     url: '/search/user',
     method: 'get',

src/components/Tinymce/index.vue

@@ -52,11 +52,9 @@ export default {
       height: this.height,
       body_class: 'panel-body ',
       object_resizing: false,
-          //  language: 'zh_CN',
-          //  language_url: '/static/tinymce/langs/zh_CN.js',
       toolbar: this.toolbar,
       menubar: this.menubar,
-      plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools,watermark',
+      plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists,media,wordcount, imagetools',
       end_container_on_empty_block: true,
       powerpaste_word_import: 'clean',
       code_dialog_height: 450,
@@ -160,14 +158,4 @@ export default {
   visibility: hidden;
   z-index: -1;
 }
-
-.editor-custom-btn-container {
-  position: absolute;
-  right: 15px;
-  top: 18px;
-}
-
-.editor-upload-btn {
-  display: inline-block;
-}
 </style>

src/components/twoDndList/index.vue

@@ -3,21 +3,20 @@
     <div class="twoDndList-list" :style="{width:width1}">
       <h3>{{list1Title}}</h3>
       <draggable :list="list1" class="dragArea" :options="{group:'article'}">
-        <div class="list-complete-item" v-for="element in list1" :key='element'>
+        <div class="list-complete-item" v-for="element in list1" :key='element.id'>
           <div class="list-complete-item-handle">[{{element.author}}] {{element.title}}</div>
           <div style="position:absolute;right:0px;">
             <span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
-                        <i style="color:#ff4949" class="el-icon-delete"></i>
-                    </span>
+              <i style="color:#ff4949" class="el-icon-delete"></i>
+            </span>
           </div>
         </div>
       </draggable>
     </div>
-
     <div class="twoDndList-list" :style="{width:width2}">
       <h3>{{list2Title}}</h3>
       <draggable :list="filterList2" class="dragArea" :options="{group:'article'}">
-        <div class="list-complete-item" v-for="element in filterList2" :key='element'>
+        <div class="list-complete-item" v-for="element in filterList2" :key='element.id'>
           <div class='list-complete-item-handle2' @click="pushEle(element)"> [{{element.author}}] {{element.title}}</div>
         </div>
       </draggable>
@@ -27,6 +26,7 @@
 
 <script>
 import draggable from 'vuedraggable'
+
 export default {
   name: 'twoDndList',
   components: { draggable },

src/router/index.js

@@ -65,8 +65,8 @@ export const asyncRouterMap = [
       { path: 'index', component: _import('components/index'), name: '介绍 ' },
       { path: 'tinymce', component: _import('components/tinymce'), name: '富文本编辑器' },
       { path: 'markdown', component: _import('components/markdown'), name: 'Markdown' },
-      { path: 'jsoneditor', component: _import('components/jsoneditor'), name: 'JSON编辑器' },
-      { path: 'dndlist', component: _import('components/dndlist'), name: '列表拖拽' },
+      { path: 'jsoneditor', component: _import('components/jsonEditor'), name: 'JSON编辑器' },
+      { path: 'dndlist', component: _import('components/dndList'), name: '列表拖拽' },
       { path: 'splitpane', component: _import('components/splitpane'), name: 'SplitPane' },
       { path: 'avatarupload', component: _import('components/avatarUpload'), name: '头像上传' },
       { path: 'dropzone', component: _import('components/dropzone'), name: 'Dropzone' },

src/store/modules/user.js

@@ -115,10 +115,16 @@ const user = {
     // 动态修改权限
     ChangeRole({ commit }, role) {
       return new Promise(resolve => {
-        commit('SET_ROLES', [role])
         commit('SET_TOKEN', role)
         setToken(role)
-        resolve()
+        getInfo(role).then(response => {
+          const data = response.data
+          commit('SET_ROLES', data.role)
+          commit('SET_NAME', data.name)
+          commit('SET_AVATAR', data.avatar)
+          commit('SET_INTRODUCTION', data.introduction)
+          resolve()
+        })
       })
     }
   }

src/views/charts/index.vue

 <template>
   <div class="components-container" >
     <code>
-      这里的所有的图表都基于ECharts,实例代码来源<a href='http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all' target='_blank'>gallery</a><br/>其实ECharts封装的很好了，用vue封装是很简单的事情，建议大家自己来封装。<a target='_blank' class='lin' href="https://segmentfault.com/a/1190000009762198#articleHeader16">相关教程</a>
+      这里的所有的图表都基于ECharts,实例代码来源<a href='http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all' target='_blank'> gallery</a><br/>其实ECharts封装的很好了，用vue封装是很简单的事情，建议大家自己来封装。<a target='_blank' class='lin' href="https://segmentfault.com/a/1190000009762198#articleHeader16">相关教程</a>
     </code>
   </div>
 </template>

src/views/charts/keyboard2.vue

 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <keyboard-chart2 id='apple' height='100%' width='100%'></keyboard-chart2>
+      <keyboard-chart2 height='100%' width='100%'></keyboard-chart2>
     </div>
   </div>
 </template>

src/views/charts/mixChart.vue

 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <mix-chart id='apple' height='100%' width='100%'></mix-chart>
+      <mix-chart height='100%' width='100%'></mix-chart>
     </div>
   </div>
 </template>

src/views/components/dndlist.vue → src/views/components/dndList.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import DndList from 'components/twoDndList'
+import DndList from '@/components/twoDndList'
 import { getList } from 'api/article'
 
 export default {
@@ -28,7 +28,6 @@ export default {
       getList(this.listQuery).then(response => {
         this.list1 = response.data.splice(0, 5)
         this.list2 = response.data
-        console.log(this.list1, this.list2)
       })
     }
   }

src/views/components/jsoneditor.vue → src/views/components/jsonEditor.vue

 <template>
   <div class="components-container" style='height:100vh'>
-    <code>jsonEditor is base on  <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>,lint base on json-lint </code>
+    <code>jsonEditor is base on  <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a> , lint base on json-lint </code>
     <div class="editor-container">
       <json-editor ref="jsonEditor" v-model="value"></json-editor>
     </div>
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import jsonEditor from 'components/jsonEditor'
+import jsonEditor from '@/components/jsonEditor'
 const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'
 
 export default {

src/views/components/markdown.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import MdEditor from 'components/MdEditor'
+import MdEditor from '@/components/MarkdownEditor'
 export default {
   components: { MdEditor },
   data() {

src/views/components/tinymce.vue

 <template>
   <div class="components-container">
-    <code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader13'> 相关文章 </a></code>
+    <code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader13'> 相关文章 </a> <a target='_blank' href='https://www.tinymce.com/'> 官网 </a></code>
     <div>
       <Tinymce :height=200 ref="editor" v-model="content"></Tinymce>
     </div>
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import Tinymce from 'components/Tinymce'
+import Tinymce from '@/components/Tinymce'
 
 export default {
   components: { Tinymce },

static/tinymce/plugins/watermark/plugin.min.js

-(function() {
-  const qiniuOption = {
-    watermark: 'aHR0cHM6Ly93ZGwud2FsbHN0cmVldGNuLmNvbS8yM2Y0ZWE2Ny1hZjI1LTQ3ZTItYTFlYy1iNzJjNzkzYWNlOGE=',
-    weexWatermark: 'aHR0cHM6Ly93cGltZy53YWxsc3Rjbi5jb20vMGQxMmMwN2ItNjViMS00NjA4LTllMTctODUyMDRhOTc3YzY5',
-    dissolve: 30,
-    dx: 20,
-    dy: 20,
-    watermarkScale: 0
-  };
-  tinymce.create('tinymce.plugins.WaterMarkPlugin', {
-    init(ed) {
-      ed.addCommand('mceWaterMark', () => {
-        const target = ed.selection.getNode();
-
-        const src = $(target).attr('src') + '?watermark/1/image/' + qiniuOption.watermark + '/dissolve/' + qiniuOption.dissolve + '/gravity/Center/dx/' + qiniuOption.dx + '/dy/' + qiniuOption.dy + '/ws/' + qiniuOption.watermarkScale
-        ed.windowManager.open({
-          title: '七牛水印',
-          width: 600,
-          height: 500,
-          body: [{
-            type: 'container',
-            html: `<div class="mce-container" hidefocus="1" tabindex="-1" >
-								<div class="mce-container-body mce-container-watermark-body">
-                   <div style="margin-bottom:10px;">
-                      <label><input checked='true' style="margin-left: 20px;margin-right: 5px;" name="image-watermarkType" data-type="watermark" class="note-image-watermarkType" type="radio" />见闻</label>
-                      <label><input style="margin-left: 20px;margin-right: 5px;" name="image-watermarkType" data-type="weexWatermark" class="note-image-watermarkType" type="radio" />WEEX</label>
-                  </div>
-                  <div style='min-height:600px;'>
-                    <label><input style="margin-left: 20px;margin-right: 5px;" name="image-watermark" data-position="NorthWest" class="note-image-watermark" type="radio" />左上</label>
-                    <label><input style="margin-left: 20px;margin-right: 5px;" name="image-watermark" data-position="SouthWest" class="note-image-watermark" type="radio" />左下</label>
-                    <label><input style="margin-left: 20px;margin-right: 5px;" name="image-watermark" data-position="NorthEast" class="note-image-watermark" type="radio" /><span>右上</span></label>
-                    <label><input style="margin-left: 20px;margin-right: 5px;" name="image-watermark" data-position="SouthEast" class="note-image-watermark" type="radio" /><span>右下</span></label>
-                    <label><input checked='true' style="margin-left: 20px;margin-right: 5px;" name="image-watermark" data-position="Center" class="note-image-watermark" type="radio" /><span>正中央</span></label>
-                    <img src=${src} style="display: block;margin: 20px auto;max-height: 420px;max-width: 100%;" class="watermark-preview">
-                  </div>
-								</div>
-							</div>`
-          }],
-          onSubmit() {
-            const src = $('.mce-container-watermark-body .watermark-preview').attr('src');
-            $(target).attr('src', src);
-            ed.undoManager.add()
-            // setTimeout(() => {
-            //   ed.insertContent('a')
-            // }, 100);
-          }
-        });
-        $('.mce-container-watermark-body input[type="radio"]').on('click', () => {
-          const $watermarkImg = $('.mce-container-watermark-body .watermark-preview')
-          const baseSrc = $watermarkImg.attr('src').split('?')[0];
-          const position = $('.mce-container-watermark-body input[name="image-watermark"]:checked').attr('data-position');
-          const type = $('.mce-container-watermark-body input[name="image-watermarkType"]:checked').attr('data-type');
-          const query = setQuery(position, type);
-          $watermarkImg.attr('src', baseSrc + query);
-        })
-      });
-
-
-      function setQuery(postion, type) {
-        return '?watermark/1/image/' + qiniuOption[type] + '/dissolve/' + qiniuOption.dissolve + '/gravity/' + postion + '/dx/' + qiniuOption.dx + '/dy/' + qiniuOption.dy + '/ws/' + qiniuOption.watermarkScale
-      }
-
-      // Register buttons
-      ed.addButton('watermark', {
-        title: 'watermark',
-        text: '水印',
-        cmd: 'mceWaterMark'
-      });
-    }
-  });
-  tinymce.PluginManager.add('watermark', tinymce.plugins.WaterMarkPlugin);
-}());