Finish the preview things.

src/assets/css/bootstrap/bootstrap.less

@@ -4,7 +4,7 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 // Core variables and mixins
-@import "../inspinia/variables.less";
+@import "../global/variables.less";
 
 
 

src/assets/css/global/color.less

@@ -1,4 +1,3 @@
-@import "../inspinia/variables.less";
 @import "./variables.less";
 
 .bg-primary {

src/assets/css/global/variables.less

@@ -1,4 +1,89 @@
-@import "../inspinia/variables.less";
+@import "../bootstrap/variables.less";
+//Bootstrap Theme.
+//@brand-primary:         darken(#428bca, 6.5%); // #337ab7
+//@brand-success:         #5cb85c;
+//@brand-info:            #5bc0de;
+//@brand-warning:         #f0ad4e;
+//@brand-danger:          #d9534f;
+//@brand-gray: #c2c2c2;
+
+//Angulr Theme.
+//@brand-primary:         #7266ba;
+//@brand-info:            #23b7e5;
+//@brand-success:         #27c24c;
+//@brand-warning:         #fad733;
+//@brand-danger:          #f05050;
+//@brand-light:           #edf1f2;
+//@brand-dark:            #3a3f51;
+//@brand-black:           #1c2b36;
+//@brand-gray:            #c2c2c2;
+//@brand-laxative:        #B3EE3A;
+
+//Inspina Theme.
+//@brand-primary: #1ab394;
+//@brand-success: #1c84c6;
+//@brand-info: #23c6c8;
+//@brand-warning: #f8ac59;
+//@brand-danger: #ED5565;
+//@brand-gray: #c2c2c2;
+//@brand-laxative: #B3EE3A;
+
+
+//zhengxianqian Theme.
+//@brand-primary: #23B7E5;
+@brand-primary: #006699;
+@brand-success: #1ab394;
+@brand-info: #5EC1C5;
+@brand-warning: #FEC62E;
+@brand-danger: #FE8768;
+@brand-gray: #c2c2c2;
+@brand-laxative: #B3EE3A;
+
+
+@navy: @brand-primary; // Primary color
+@dark-gray: @brand-gray; // Default color
+@blue: @brand-success; // Success color
+@lazur: @brand-info; // Info color
+@yellow: @brand-warning; // Warrning color
+@red: @brand-danger; // Danger color
+@green: @brand-laxative; // Danger color
+
+@gray-base: #000;
+@gray-darker: lighten(@gray-base, 13.5%); // #222
+@gray-dark: lighten(@gray-base, 20%); // #333
+@gray: lighten(@gray-base, 33.5%); // #555
+@gray-light: lighten(@gray-base, 46.7%); // #777
+@gray-lighter: lighten(@gray-base, 93.5%); // #eee
+
+// Various colors
+@text-color: #676a6c; // Body text
+@gray: #f3f3f4; // Background wrapper color
+@light-gray: #D1DADE; // Default label, badget
+@label-badget-color: #5E5E5E;
+@light-blue: #f3f6fb;
+
+// Spiner color and margin
+@spin-color: @navy;
+@spin-margin: 0 auto;
+
+// IBOX colors ( default panel colors)
+@border-color: #e7eaec; // IBox border
+@ibox-title-bg: #ffffff; // IBox Background header
+@ibox-content-bg: #ffffff; // IBox Background content
+
+//Sidebar width
+@sidebar-width: 170px;
+
+// Boxed layout width
+@boxed-width: 1200px;
+
+//Border radius for buttons
+@btn-border-radius: 3px;
+
+//Navigation
+@nav-bg: #2F4050;
+@nav-text-color: #a7b1c2;
+
 
 @top-navigation-height: 45px;
 

src/assets/css/inspinia/style.less

@@ -5,7 +5,7 @@
  *
 */
 // Variables, Mixins
-@import "variables.less";
+@import "../global/variables.less";
 @import "mixins.less";
 // INSPINIA Theme Elements
 @import "typography.less";

src/assets/css/inspinia/variables.less

@@ -1,76 +0,0 @@
-@import "../bootstrap/variables.less";
-//Bootstrap Theme.
-//@brand-primary:         darken(#428bca, 6.5%); // #337ab7
-//@brand-success:         #5cb85c;
-//@brand-info:            #5bc0de;
-//@brand-warning:         #f0ad4e;
-//@brand-danger:          #d9534f;
-//@brand-gray: #c2c2c2;
-
-//Angulr Theme.
-//@brand-primary:         #7266ba;
-//@brand-info:            #23b7e5;
-//@brand-success:         #27c24c;
-//@brand-warning:         #fad733;
-//@brand-danger:          #f05050;
-//@brand-light:           #edf1f2;
-//@brand-dark:            #3a3f51;
-//@brand-black:           #1c2b36;
-//@brand-gray:            #c2c2c2;
-//@brand-laxative:        #B3EE3A;
-
-//Inspina Theme.
-//@brand-primary: #1ab394;
-//@brand-success: #1c84c6;
-//@brand-info: #23c6c8;
-//@brand-warning: #f8ac59;
-//@brand-danger: #ED5565;
-//@brand-gray: #c2c2c2;
-//@brand-laxative: #B3EE3A;
-
-
-
-
-@navy: @brand-primary; // Primary color
-@dark-gray: @brand-gray; // Default color
-@blue: @brand-success; // Success color
-@lazur: @brand-info; // Info color
-@yellow: @brand-warning; // Warrning color
-@red: @brand-danger; // Danger color
-@green: @brand-laxative; // Danger color
-
-@gray-base: #000;
-@gray-darker: lighten(@gray-base, 13.5%); // #222
-@gray-dark: lighten(@gray-base, 20%); // #333
-@gray: lighten(@gray-base, 33.5%); // #555
-@gray-light: lighten(@gray-base, 46.7%); // #777
-@gray-lighter: lighten(@gray-base, 93.5%); // #eee
-
-// Various colors
-@text-color: #676a6c; // Body text
-@gray: #f3f3f4; // Background wrapper color
-@light-gray: #D1DADE; // Default label, badget
-@label-badget-color: #5E5E5E;
-@light-blue: #f3f6fb;
-
-// Spiner color and margin
-@spin-color: @navy;
-@spin-margin: 0 auto;
-
-// IBOX colors ( default panel colors)
-@border-color: #e7eaec; // IBox border
-@ibox-title-bg: #ffffff; // IBox Background header
-@ibox-content-bg: #ffffff; // IBox Background content
-
-//Sidebar width
-@sidebar-width: 170px;
-
-// Boxed layout width
-@boxed-width: 1200px;
-
-//Border radius for buttons
-@btn-border-radius: 3px;
-
-//Navigation
-@nav-bg: #2F4050;
-@nav-text-color: #a7b1c2;

src/backyard/image/cache/List.vue

@@ -57,7 +57,7 @@
 
     data() {
       return {
-        pager: new Pager(ImageCache),
+        pager: new Pager(ImageCache, Pager.MAX_PAGE_SIZE),
         user: this.$store.state.user,
         selectedImageCaches: []
       }

src/backyard/matter/widget/MatterPanel.vue

@@ -198,12 +198,28 @@
 
             this.$previewer.previewText(that.matter.name, that.matter.getPreviewUrl(), that.matter.size)
 
+          } else if (that.matter.isAudio()) {
+
+            this.$previewer.previewAudio(that.matter.name, that.matter.getPreviewUrl(), that.matter.size)
+
+          } else if (that.matter.isVideo()) {
+
+            this.$previewer.previewVideo(that.matter.name, that.matter.getPreviewUrl(), that.matter.size)
+
           } else {
-            this.download()
+            this.preview()
           }
         }
       },
 
+      preview() {
+        if (this.director.isEditing()) {
+          console.error('导演正忙着，不予执行')
+          return
+        }
+
+        window.open(this.matter.getPreviewUrl())
+      },
       download() {
         if (this.director.isEditing()) {
           console.error('导演正忙着，不予执行')

src/backyard/user/Detail.vue

@@ -29,7 +29,7 @@
                 <div class="row f14">
                   <div class="mt5 col-md-12">
                     <div>
-                      <span class="bold">角色：</span>{{currentUser.getRoleName()}}
+                      <span class="bold">角色：</span>{{UserRoleMap[currentUser.role].name}}
                     </div>
                   </div>
                   <div class="mt5 col-md-12">
@@ -47,7 +47,7 @@
                       </div>
                       <div class="mt5 col-md-12">
                         <div>
-                          <span class="bold">性别：</span>{{currentUser.getGenderName()}}
+                          <span class="bold">性别：</span>{{UserGenderMap[currentUser.gender].name}}
                         </div>
                       </div>
                       <div class="mt5 col-md-12" v-if="currentUser.city">
@@ -71,7 +71,7 @@
 
                       <div class="mt5 col-md-12">
                         <div>
-                          <span class="bold">状态：</span>{{currentUser.getStatusName()}}
+                          <span class="bold">状态：</span>{{UserStatusMap[currentUser.status].name}}
                         </div>
                       </div>
 

src/common/model/base/Pager.js

@@ -7,7 +7,7 @@ import {FilterType} from "./FilterType";
 
 export default class Pager extends Base {
 
-  static MAX_PAGE_SIZE = 500
+  static MAX_PAGE_SIZE = 100
 
   constructor(Clazz, pageSize = 10, page = 0) {
     super()

src/common/model/image/cache/ImageCache.js

@@ -14,7 +14,7 @@ export default class ImageCache extends BaseEntity {
 
     this.userUuid = null;
     this.matterUuid = null;
-    this.uri = null;
+    this.mode = null;
     this.md5 = null;
     this.size = 0;
     this.path = 0;
@@ -49,17 +49,12 @@ export default class ImageCache extends BaseEntity {
   }
 
   getMatterName() {
-    let quotePosition = this.uri.indexOf("?")
-    let path = this.uri.substr(0, quotePosition)
-    return path.substr(path.lastIndexOf("/") + 1)
+
+    return this.path.substr(this.path.lastIndexOf("/") + 1)
   }
 
   getName() {
-    let quotePosition = this.uri.indexOf("?")
-    let query = this.uri.substr(quotePosition + 1)
-    let path = this.uri.substr(0, quotePosition)
-    let imageName = path.substr(path.lastIndexOf("/") + 1)
-    return imageName + "?" + query
+    return this.getMatterName() + "?" + this.mode
   }
 
   getResizeUrl(){

src/common/model/matter/Matter.js

@@ -106,6 +106,16 @@ export default class Matter extends BaseEntity {
     return startWith(mimeType, 'application/vnd.ms-excel') || startWith(mimeType, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
   }
 
+  isAudio() {
+    let mimeType = getMimeType(this.name)
+    return startWith(mimeType, 'audio');
+  }
+
+  isVideo() {
+    let mimeType = getMimeType(this.name)
+    return startWith(mimeType, 'video');
+  }
+
   getIcon() {
 
     if (this.dir) {
@@ -121,9 +131,9 @@ export default class Matter extends BaseEntity {
       return "/static/img/file/ppt.svg"
     } else if (this.isXls()) {
       return "/static/img/file/xls.svg"
-    } else if (startWith(mimeType, 'audio')) {
+    } else if (this.isAudio()) {
       return "/static/img/file/audio.svg"
-    } else if (startWith(mimeType, 'video')) {
+    } else if (this.isVideo()) {
       return "/static/img/file/video.svg"
     } else if (this.isText()) {
       return "/static/img/file/text.svg"

src/common/plugin/previewer/Previewer.js

@@ -38,4 +38,12 @@ export default class Previewer {
     this.$vm.previewOffice(name, url, size);
   }
 
+  previewAudio(name, url, size) {
+    this.$vm.previewAudio(name, url, size);
+  }
+
+  previewVideo(name, url, size) {
+    this.$vm.previewVideo(name, url, size);
+  }
+
 }

src/common/plugin/previewer/PreviewerLayout.vue

@@ -6,14 +6,17 @@
   import PdfPanel from "./panels/PdfPanel"
   import TextPanel from "./panels/TextPanel"
   import OfficePanel from "./panels/OfficePanel"
+  import AudioPanel from "./panels/AudioPanel"
+  import VideoPanel from "./panels/VideoPanel"
   import {humanFileSize} from "../../filter/str";
 
 
   let CLASS_NAME = " previewer-mode"
-  //这个组件主要用于提供dom元素。
   export default {
     data() {
-      return {}
+      return {
+
+      }
     },
     computed: {},
     props: {},
@@ -31,11 +34,20 @@
           document.body.className = bodyClassName.substr(0, position) + bodyClassName.substr(position + bodyClassName.length)
         }
       },
+
       preview(name, url, size, vNode) {
         let that = this;
 
         that.bodyAddClass()
 
+        //需要给vue一点点时间去挂载这个vNode
+        setTimeout(function () {
+          if (vNode.componentInstance && vNode.componentInstance.show) {
+            vNode.componentInstance.show()
+          }
+        }, 100)
+
+
         that.$msgbox({
           title: name + "(" + humanFileSize(size) + ")",
           message: vNode,
@@ -46,12 +58,16 @@
           beforeClose: (action, instance, done) => {
 
             that.bodyRemoveClass()
+
+            //如果有定义close函数，那么去调用。主要是音频和视频需要停止
+            if (vNode.componentInstance && vNode.componentInstance.close) {
+              vNode.componentInstance.close()
+            }
+
             done();
           }
         }).then(action => {
-          console.log("then method ")
         }).catch((e) => {
-          console.log("catch method ")
           //关闭了对话框
           that.bodyRemoveClass()
         });
@@ -59,10 +75,7 @@
       previewPdf(name, url, size) {
 
         let that = this
-
-        const h = this.$createElement;
-
-        let vNode = h(PdfPanel, {
+        let vNode = this.$createElement(PdfPanel, {
           props: {
             name: name,
             url: url
@@ -74,10 +87,7 @@
       previewText(name, url, size) {
 
         let that = this
-
-        const h = this.$createElement;
-
-        let vNode = h(TextPanel, {
+        let vNode = this.$createElement(TextPanel, {
           props: {
             name: name,
             url: url
@@ -89,12 +99,33 @@
       previewOffice(name, url, size) {
 
         let that = this
+        let vNode = this.$createElement(OfficePanel, {
+          props: {
+            name: name,
+            url: url
+          }
+        });
 
-        const h = this.$createElement;
+        this.preview(name, url, size, vNode)
+      },
+      previewAudio(name, url, size) {
 
-        console.log("这里");
+        let that = this
 
-        let vNode = h(OfficePanel, {
+        let vNode = this.$createElement(AudioPanel, {
+          props: {
+            name: name,
+            url: url
+          }
+        });
+
+        this.preview(name, url, size, vNode)
+      },
+      previewVideo(name, url, size) {
+
+        let that = this
+
+        let vNode = this.$createElement(VideoPanel, {
           props: {
             name: name,
             url: url

src/common/plugin/previewer/panels/AudioPanel.vue

@@ -0,0 +1,57 @@
+<template>
+
+  <div class="previewer-audio-panel" v-if="showFlag">
+    <iframe width="100%" height="100%" :src="url"></iframe>
+  </div>
+
+</template>
+
+<script>
+
+  export default {
+    data() {
+      return {
+        showFlag: true
+      }
+    },
+    computed: {},
+    props: {
+      //寻找该用户的合适文件夹
+      name: {
+        type: String,
+        required: true
+      },
+      url: {
+        type: String,
+        required: true
+      }
+    },
+    watch: {},
+    methods: {
+      show() {
+        this.showFlag = true
+      },
+      close() {
+        this.showFlag = false
+      }
+    },
+    mounted() {
+    }
+  }
+</script>
+
+<style lang="less" rel="stylesheet/less">
+  @import "../../../../assets/css/global/variables";
+
+  .previewer-audio-panel {
+    width: 100%;
+    height: 100%;
+
+    iframe {
+      border: 1px solid #eeeeee;
+    }
+
+  }
+</style>
+
+

src/common/plugin/previewer/panels/TextPanel.vue

@@ -23,9 +23,10 @@
       }
     },
     watch: {},
-    methods: {},
-    mounted() {
+    methods: {
 
+    },
+    mounted() {
     }
   }
 </script>

src/common/plugin/previewer/panels/VideoPanel.vue

@@ -0,0 +1,57 @@
+<template>
+
+  <div class="previewer-video-panel" v-if="showFlag">
+    <iframe width="100%" height="100%" :src="url"></iframe>
+  </div>
+
+</template>
+
+<script>
+
+  export default {
+    data() {
+      return {
+        showFlag: true
+      }
+    },
+    computed: {},
+    props: {
+      //寻找该用户的合适文件夹
+      name: {
+        type: String,
+        required: true
+      },
+      url: {
+        type: String,
+        required: true
+      }
+    },
+    watch: {},
+    methods: {
+      show() {
+        this.showFlag = true
+      },
+      close() {
+        this.showFlag = false
+      }
+    },
+    mounted() {
+    }
+  }
+</script>
+
+<style lang="less" rel="stylesheet/less">
+  @import "../../../../assets/css/global/variables";
+
+  .previewer-video-panel {
+    width: 100%;
+    height: 100%;
+
+    iframe {
+      border: 1px solid #eeeeee;
+    }
+
+  }
+</style>
+
+

src/common/widget/NbSwitcher.vue

@@ -79,7 +79,7 @@
 
 <style lang="less" rel="stylesheet/less">
 
-	@import "../../assets/css/inspinia/variables.less";
+	@import "../../assets/css/global/variables.less";
 
 	.nb-switch {
 

static/img/file/audio.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1514189404825" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3026" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M146.386345 0a81.949268 81.949268 0 0 0-81.583423 81.583423v860.711206a81.949268 81.949268 0 0 0 81.583423 81.583423h731.120797a81.949268 81.949268 0 0 0 81.583422-81.583423v-617.546266l-302.350522-324.748363z" fill="#9B45E6" p-id="3027"></path><path d="M959.090564 326.37434v16.015879h-204.79187s-100.769958-20.812512-97.558652-108.777897a94.631892 94.631892 0 0 0 95.973324 92.802667z" fill="#2987C8" p-id="3028"></path><path d="M656.740042 0v233.571672a92.965265 92.965265 0 0 0 97.558652 92.802668H959.090564z" fill="#FFFFFF" p-id="3029"></path><path d="M539.913557 543.930134l-227.189711 30.40578v214.385137a82.843555 82.843555 0 0 0-39.999047-1.585328c-31.991108 6.381962-52.84427 27.194474-46.381009 46.381009 6.381962 20.812512 36.787742 30.40578 68.778849 23.983169 28.779802-4.796634 48.006987-22.39784 48.006987-39.999048v-171.174784l166.378151-20.812513v132.801715a84.266286 84.266286 0 0 0-39.999047 0c-33.576436 6.381962-54.388948 27.194474-48.006987 46.381009s36.787742 30.40578 70.404827 23.983169c28.779802-6.381962 49.592315-23.983169 48.006987-41.584375z" fill="#FFFFFF" p-id="3030"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543321997742" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3887" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M160 32c-12 0-24.8 4.8-33.6 14.4S112 68 112 80v864c0 12 4.8 24.8 14.4 33.6C136 987.2 148 992 160 992h704c12 0 24.8-4.8 33.6-14.4C907.2 968 912 956 912 944V304L640 32H160z" fill="#FF5562" p-id="3888"></path><path d="M912 304H688c-12 0-24.8-4.8-33.6-14.4-9.6-8.8-14.4-21.6-14.4-33.6V32l272 272z" fill="#FFBBC0" p-id="3889"></path><path d="M669.6 491.2c0-1.6 0.8-4 0-6.4V369.6c0-4.8-2.4-8.8-5.6-12-4-3.2-8-4-12.8-3.2l-250.4 70.4c-7.2 1.6-12 7.2-12 14.4v275.2c-9.6-4-20.8-6.4-32.8-6.4-8.8 0-17.6 0.8-26.4 3.2-40.8 11.2-66.4 43.2-58.4 72.8 6.4 23.2 30.4 37.6 60.8 37.6 8.8 0 17.6-1.6 26.4-3.2 36.8-10.4 60.8-36.8 60-63.2 0.8-1.6 0.8-3.2 0.8-5.6V570.4l220-61.6v136c-9.6-4-20.8-6.4-32.8-6.4-8.8 0-17.6 0.8-26.4 3.2-40.8 11.2-66.4 43.2-58.4 72.8C528 737.6 552 752 582.4 752c8.8 0 17.6-0.8 26.4-3.2 36-9.6 60-36 60-62.4 0.8-1.6 0.8-3.2 0.8-5.6V491.2z m-250.4 48v-53.6l220-61.6v53.6l-220 61.6z" fill="#FFFFFF" p-id="3890"></path></svg>