cnwangzd@gmail.com 1 год назад
Родитель
Сommit
fb4e6ddc43
33 измененных файлов с 12320 добавлено и 10128 удалено
  1. 11 1
      .env
  2. 0 1
      app/matrix/m3graph/css/chunk-0177309a.4469f0ed.css
  3. 0 1
      app/matrix/m3graph/css/chunk-03b92cd2.18719048.css
  4. 0 1
      app/matrix/m3graph/css/chunk-2dc3fc5a.c602a3a4.css
  5. 0 1
      app/matrix/m3graph/css/chunk-4cc4398c.51ad25b6.css
  6. 0 1
      app/matrix/m3graph/css/chunk-56d2fb7a.bfd0e119.css
  7. 0 1
      app/matrix/m3graph/css/chunk-7490740a.b0ab25e4.css
  8. BIN
      app/matrix/m3graph/css/chunk-7490740a.b0ab25e4.css.gz
  9. 0 1
      app/matrix/m3graph/css/chunk-74b6079b.17450cd5.css
  10. BIN
      app/matrix/m3graph/css/chunk-74b6079b.17450cd5.css.gz
  11. 0 1
      app/matrix/m3graph/css/chunk-8485aeaa.559c1aab.css
  12. 0 1
      app/matrix/m3graph/css/chunk-8abc52c6.3871395d.css
  13. 0 1
      app/matrix/m3graph/css/chunk-vendors.8140bef9.css
  14. BIN
      app/matrix/m3graph/css/chunk-vendors.8140bef9.css.gz
  15. BIN
      app/matrix/m3graph/fonts/element-icons.535877f5.woff
  16. BIN
      app/matrix/m3graph/fonts/element-icons.732389de.ttf
  17. 43 3
      app/matrix/m3graph/index.html
  18. 0 1
      app/matrix/m3graph/js/chunk-24e09e63.638d82bd.js
  19. BIN
      app/matrix/m3graph/js/chunk-24e09e63.638d82bd.js.gz
  20. 0 25
      app/matrix/m3graph/js/chunk-2d0aa5b8.45ad0614.js
  21. BIN
      app/matrix/m3graph/js/chunk-2d0aa5b8.45ad0614.js.gz
  22. 0 1
      app/matrix/m3graph/js/chunk-7490740a.aebc6d32.js
  23. 0 1
      app/matrix/m3graph/js/chunk-74b6079b.c1163ba7.js
  24. 12012 9893
      package-lock.json
  25. 4 3
      package.json
  26. 109 27
      src/App.vue
  27. 4 2
      src/components/graph/GraphHandler.vue
  28. 1 1
      src/components/graph/searchbar/AdvBar.vue
  29. 19 21
      src/components/layout/Header.vue
  30. 7 7
      src/components/layout/SideBar.vue
  31. 1 1
      src/components/search/index.vue
  32. 56 51
      src/main.js
  33. 53 80
      vue.config.js

+ 11 - 1
.env

@@ -1,6 +1,16 @@
 VUE_APP_M3_APP="m3graph"
 VUE_APP_M3_TITLE="图查询"
 VUE_APP_M3_HOST="47.92.151.165:8080"
-VUE_APP_M3_COMPANY="eventbus"
+VUE_APP_M3_COMPANY="wecise"
 VUE_APP_M3_USERNAME="admin"
 VUE_APP_M3_PASSWORD="admin"
+# 公共静态资源所在URL,包括 js, css, theme, icon ...,测试环境默认为 assets,生产环境默认为 /static/app/assets
+VUE_APP_M3_ASSETS="assets"
+# 后端服务主题前缀,生产环境默认 v1 ,开发环境默认为 dev
+VUE_APP_M3_SERVICE_VERSION="dev"
+# 动态加载页面等待页面的动画效果,与 css 定义关联,默认为 lds-acting 
+VUE_APP_M3_LOADING_ACTING="lds-grid"
+# 预加载CSS,加载公共静态资源,URL 路径在 VUE_APP_M3_ASSETS 中指定,子目录固定为 css 后缀名固定为 css,多个文件用逗号分隔
+VUE_APP_M3_PRELOAD_CSS="lds-grid"
+# 预加载JS,加载公共静态资源,URL 路径在 VUE_APP_M3_ASSETS 中指定,子目录固定为 js 后缀名固定为 js,多个文件用逗号分隔
+VUE_APP_M3_PRELOAD_JS=""

Разница между файлами не показана из-за своего большого размера
+ 0 - 1
app/matrix/m3graph/css/chunk-0177309a.4469f0ed.css


+ 0 - 1
app/matrix/m3graph/css/chunk-03b92cd2.18719048.css

@@ -1 +0,0 @@
-.container[data-v-27d55e7f],.container[data-v-5348fe12]{padding:20px;background:#f2f2f2}.chart-container[data-v-5348fe12]{padding:20px;background:#fff}

+ 0 - 1
app/matrix/m3graph/css/chunk-2dc3fc5a.c602a3a4.css

@@ -1 +0,0 @@
-.el-container[data-v-097affa8]{height:70vh}

Разница между файлами не показана из-за своего большого размера
+ 0 - 1
app/matrix/m3graph/css/chunk-4cc4398c.51ad25b6.css


Разница между файлами не показана из-за своего большого размера
+ 0 - 1
app/matrix/m3graph/css/chunk-56d2fb7a.bfd0e119.css


Разница между файлами не показана из-за своего большого размера
+ 0 - 1
app/matrix/m3graph/css/chunk-7490740a.b0ab25e4.css


BIN
app/matrix/m3graph/css/chunk-7490740a.b0ab25e4.css.gz


Разница между файлами не показана из-за своего большого размера
+ 0 - 1
app/matrix/m3graph/css/chunk-74b6079b.17450cd5.css


BIN
app/matrix/m3graph/css/chunk-74b6079b.17450cd5.css.gz


+ 0 - 1
app/matrix/m3graph/css/chunk-8485aeaa.559c1aab.css

@@ -1 +0,0 @@
-.ace_editor .ace_marker-layer .ace_selected-word{background:rgba(251,222,134,.5411764705882353)!important;border:1px solid #f3f5f8!important}.container[data-v-a2fef4c4]{padding:20px;background:#f2f2f2}.chart-container[data-v-a2fef4c4]{padding:20px;background:#fff}

+ 0 - 1
app/matrix/m3graph/css/chunk-8abc52c6.3871395d.css

@@ -1 +0,0 @@
-.container[data-v-064a8f72]{padding:20px;background:#f2f2f2}.btn-entity[data-v-064a8f72]{max-width:100%;width:100%;height:auto;border-radius:10px!important;margin:5px;border:unset;box-shadow:0 0 5px 0 rgba(0,0,0,.05)}.btn-entity p[data-v-064a8f72]{text-align:left}.btn-entity p>span[data-v-064a8f72]{color:#888}.entity-box[data-v-064a8f72]{display:flex;flex-flow:wrap;padding:10px}.entity-box .el-button+.el-button{margin-left:6px!important}

Разница между файлами не показана из-за своего большого размера
+ 0 - 1
app/matrix/m3graph/css/chunk-vendors.8140bef9.css


BIN
app/matrix/m3graph/css/chunk-vendors.8140bef9.css.gz


BIN
app/matrix/m3graph/fonts/element-icons.535877f5.woff


BIN
app/matrix/m3graph/fonts/element-icons.732389de.ttf


Разница между файлами не показана из-за своего большого размера
+ 43 - 3
app/matrix/m3graph/index.html


Разница между файлами не показана из-за своего большого размера
+ 0 - 1
app/matrix/m3graph/js/chunk-24e09e63.638d82bd.js


BIN
app/matrix/m3graph/js/chunk-24e09e63.638d82bd.js.gz


Разница между файлами не показана из-за своего большого размера
+ 0 - 25
app/matrix/m3graph/js/chunk-2d0aa5b8.45ad0614.js


BIN
app/matrix/m3graph/js/chunk-2d0aa5b8.45ad0614.js.gz


+ 0 - 1
app/matrix/m3graph/js/chunk-7490740a.aebc6d32.js

@@ -1 +0,0 @@
-(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-7490740a"],{6104:function(n,w,o){}}]);

+ 0 - 1
app/matrix/m3graph/js/chunk-74b6079b.c1163ba7.js

@@ -1 +0,0 @@
-(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-74b6079b"],{"7cbd":function(n,w,b){}}]);

Разница между файлами не показана из-за своего большого размера
+ 12012 - 9893
package-lock.json


+ 4 - 3
package.json

@@ -1,6 +1,6 @@
 {
-  "name": "m3appstore",
-  "version": "0.1.0",
+  "name": "m3graph",
+  "version": "0.9.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -8,7 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@wecise/m3js": "^1.0.39",
+    "@wecise/m3js": "^1.0.193",
     "core-js": "^3.6.5",
     "echarts": "^4.9.0",
     "element-ui": "^2.4.5",
@@ -18,6 +18,7 @@
     "screenfull": "^5.1.0",
     "scroll-js": "^3.4.2",
     "split.js": "^1.6.2",
+    "uglifyjs-webpack-plugin": "^2.2.0",
     "vue": "^2.6.11",
     "vue-doc-preview": "^0.3.2",
     "vue-split-panel": "^1.0.4",

+ 109 - 27
src/App.vue

@@ -1,32 +1,34 @@
 <template>
-  <div class="m3" v-if="auth">
-    <Header :auth="auth.signedUser" class="header"></Header>
-    <div class="main">
-      <SideBar class="sidebar" :auth="auth.signedUser" :global="global"></SideBar>
-      <MainView :auth="auth" :global="global" class="content"></MainView>
+
+  <div class="m3 m3graph" v-if="auth && global">
+    <Header :auth="auth" class="header" v-if="layout.header.show"></Header>
+    <div :class="layout.header.show ? 'main' : 'main-fullscreen'">
+      <SideBar class="sidebar" :auth="auth" :global="global" v-if="layout.sidebar.show" ></SideBar>
+      <MainView :global="global" class="content" v-if="global"></MainView>
     </div>
-    <Footer :auth="auth" v-if="layout.footer.show"></Footer>
+    <Footer :auth="auth" class="footer" v-if="layout.footer.show"></Footer>
   </div>
+
 </template>
 
 <script>
 
 import MainView from './components/MainView';
 import Header from './components/layout/Header';
-import Footer from './components/layout/Footer';
 import SideBar from './components/layout/SideBar';
+import Footer from './components/layout/Footer';
 
 export default {
   name: 'app',
   components: {
     Header,
-    MainView,
+    SideBar,
     Footer,
-    SideBar
+    MainView//: resolve => {require(['./components/MainView.vue'], resolve)}
   },
   data(){
     return {
-      global: null,
+      global:null,
       auth: null,
       layout: {
         header: {
@@ -36,28 +38,19 @@ export default {
           show: true
         },
         footer: {
-          show: false
+          show: true
         }
       }
     }
   },
   created(){
-    let init = ()=>{
-        let timer = setInterval(()=>{
-          try{
-            this.m3.init();
-            window.global = this.global = this.m3.global;
-            this.auth = this.m3.auth;
-            if(this.m3.auth && this.m3.global){
-              clearTimeout(timer);
-            }
-          }catch(err){
-            console.error(err);
-          }
-        },200);
-    };
     
-    init();
+    this.global = this.m3.global;
+    this.auth = this.m3.auth.signedUser;
+    
+    this.eventHub.$on("layout-change",(data)=>{
+      this.layout = data;
+    })
   }
 }
 </script>
@@ -81,4 +74,93 @@ export default {
     padding-top: 50px;
     display: flex;
   }
-</style>
+
+  .main-fullscreen{
+    display: flex;
+  }
+
+  
+  .el-table .el-table__body td {
+      padding: 3px;
+  }
+  
+  /* mxgraph contextmenu style */
+  td.mxPopupMenuIcon div {
+    width:16px;
+    height:16px;
+  }
+  html div.mxPopupMenu {
+    -webkit-box-shadow:2px 2px 3px #d5d5d5;
+    -moz-box-shadow:2px 2px 3px #d5d5d5;
+    box-shadow:2px 2px 3px #d5d5d5;
+    _filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color='#d0d0d0', Positive='true');
+    background:white;
+    position:absolute;
+    border:1px solid #e7e7e7;
+    padding:3px;
+  }
+  html table.mxPopupMenu {
+    border-collapse:collapse;
+    margin:0px;
+  }
+  html td.mxPopupMenuItem {
+    padding:7px 30px 7px 30px;
+    font-family: "微软雅黑";/* Microsoft YaHei,Helvetica Neue,Helvetica,Arial Unicode MS,Arial;*/
+    font-size:12px;
+  }
+  html td.mxPopupMenuIcon {
+    background-color:white;
+    padding:0px;
+  }
+  td.mxPopupMenuIcon .geIcon {
+    padding:2px;
+    padding-bottom:4px;
+    margin:2px;
+    border:1px solid transparent;
+    opacity:0.5;
+    _width:26px;
+    _height:26px;
+  }
+  td.mxPopupMenuIcon .geIcon:hover {
+    border:1px solid gray;
+    border-radius:2px;
+    opacity:1;
+  }
+  html tr.mxPopupMenuItemHover {
+    background-color: #f5f5f5;
+    color: black;
+  }
+  table.mxPopupMenu hr {
+    color:#cccccc;
+    background-color:#f5f5f5;
+    border:none;
+    height:1px;
+  }
+  table.mxPopupMenu tr {
+    font-size:4pt;
+  }
+
+  .el-dialog{
+      width: 90vw!important;
+      height:auto;
+      margin-top: 0!important;
+  }
+  
+  /* el-checkbox */
+  .el-checkbox__label {
+      font-size: 12px!important;
+  }
+  /* el-tabs */
+  .el-tabs--border-card>.el-tabs__header {
+    background-color: #f2f2f2!important;
+    border-bottom: unset!important;
+    border-top: 1px solid #dddddd;
+  }
+  
+  .el-menu .svg-icon{
+    width: 1.2em!important;
+    height: 1.2em!important;
+    padding: 0px 5px 0 0;
+  }
+  
+</style>

+ 4 - 2
src/components/graph/GraphHandler.vue

@@ -1024,7 +1024,7 @@ export default {
                     
                     let source = model.getCell(k.source);
                     let target = model.getCell(k.target);
-                    
+
                     let baseEdgeStyle = `edgeStyle=${this.graph.style.edge.value.title};html=1;rounded=1;jettySize=auto;orthogonalLoop=1;endArrow=block;endFill=1;`;
                     let direction = '';
 
@@ -1042,7 +1042,9 @@ export default {
 
                     
                     try {
-                        let edgeName = _.find(this.graph.edges.list,{name:k.class}).remedy;
+                        //edge attrs
+                        let edgeAttr = `${k.attrs[0]['from']} - ${k.attrs[0]['to']}`;
+                        let edgeName = edgeAttr || _.find(this.graph.edges.list,{name:k.class}).remedy;
                         graph.insertEdge(parent, k.id, edgeName, source, target, baseEdgeStyle+direction);
                     } catch(err){
                         graph.insertEdge(parent, k.id, k.class, source, target, baseEdgeStyle+direction);

+ 1 - 1
src/components/graph/searchbar/AdvBar.vue

@@ -138,7 +138,7 @@ export default {
             }
 
             this.m3.callFS("/matrix/m3graph/graphService.js", encodeURIComponent(this.search.term)).then( res=>{
-            
+                
                 this.$emit("graph-data",res.message[0].graph);
 
                 this.search.loading = false;

+ 19 - 21
src/components/layout/Header.vue

@@ -7,7 +7,7 @@
             <span style="font-size:16px;vertical-align: top;">{{auth.Company.title}}</span>
         </el-col>
         <el-col :span="3" style="text-align: right;">
-            <MessageView></MessageView>
+            <!-- <MessageView></MessageView> -->
         </el-col>
         <el-col :span="1" style="text-align: right;">
             
@@ -20,42 +20,35 @@
                     @select="onSelect">
                 <el-submenu index="1">
                     <template slot="title">
-                        <svg-icon icon-class="user"/> {{ auth.username }}
+                        <i class="el-icon-user-solid"></i> {{ auth.username }}
                     </template>
                     <el-menu-item index="/matrix/user">
+                        <i class="el-icon-user"></i>
                         <template slot="title">
-                            <svg-icon icon-class="user2"/> 
-                            <span slot="title">用户
-                                <!--div>
-                                <el-button type="text" @click.stop="onToggleTheme('dark')" style="background:#252D47;padding: 5px;border-radius: 10px;"></el-button>
-                                <el-button type="text" @click.stop="onToggleTheme('light')" style="background: #1890ff;padding: 5px;border-radius: 10px;"></el-button>
-                                </div>
-                                <el-divider style="margin:0px;"></el-divider-->
-                            </span>
+                            <span slot="title">用户</span>
                         </template>
                     </el-menu-item>
-                    
                     <el-menu-item index="/matrix/system" divided v-if="auth.isadmin">
+                        <i class="el-icon-setting"></i>
                         <template slot="title">
-                            <svg-icon icon-class="system"/>
                             <span slot="title">系统管理</span>
                         </template>
                     </el-menu-item>
                     <el-menu-item index="/matrix/files" v-if="auth.isadmin">
+                        <i class="el-icon-folder"></i>
                         <template slot="title">
-                            <svg-icon icon-class="folder"/>
                             <span slot="title">我的文件</span>
                         </template>
                     </el-menu-item>
                     <el-menu-item index="home" v-if="auth.isadmin">
+                        <i class="el-icon-s-home"></i>
                         <template slot="title">
-                            <svg-icon icon-class="home"/>
                             <span slot="title">默认首页</span>
                         </template>
                     </el-menu-item>
                     <el-menu-item index="signout" divided>
+                        <i class="el-icon-s-unfold"></i>
                         <template slot="title">
-                            <svg-icon icon-class="logout"/> 
                             <span slot="title">注销</span>
                         </template>
                     </el-menu-item>
@@ -66,9 +59,9 @@
 </template>
 
 <script>
-import _ from 'lodash';
+import _startsWith from 'lodash/startsWith';
 import Cookies from 'js-cookie';
-import MessageView from '../../components/message/MessageView';
+//import MessageView from '../../components/message/MessageView';
 
 export default{
     name: "Header",
@@ -81,17 +74,17 @@ export default{
         }
     },
     components: {
-        MessageView
+        //MessageView
     },
     created(){
         this.initTheme();
     },
     mounted(){
-        this.m3.setTitle(this.auth);
+        this.m3.html.setTitle(this.auth);
     },
     methods: {
         onSelect(key) {
-            if(_.startsWith(key,'/matrix/')){
+            if(_startsWith(key,'/matrix/')){
                 window.open(key, '_blank');
             } else {
                 if(key === 'home'){
@@ -117,7 +110,12 @@ export default{
     }
 }
 </script>
-
+<style scoped>
+    .el-icon-user-solid{
+        color: #ffffff!important;
+        font-weight:500!important;
+    }
+</style>
 <style>
     .dark .m3 > .header{
         height: 50px!important;

+ 7 - 7
src/components/layout/SideBar.vue

@@ -21,21 +21,21 @@
         </el-menu-item> -->
         
         <el-menu-item index="/">
-            <img :src="preFixIcon+'home.png'+postFixIcon" style="width:16px;"></img>
+            <img :src="preFixIcon+'home.png'+postFixIcon" style="width:16px;">
             <span style="padding-left:5px;" slot="title">首页</span>
         </el-menu-item>
         
         <!-- 有模板情况-->
         <el-submenu :index="item.name" v-for="item in model.template" :key="item.name" v-show="sideBarStatus === 0">
             <template slot="title">
-                <img :src="item.icon | pickIcon" style="width:16px;"></img>
+                <img :src="item.icon | pickIcon" style="width:16px;">
                 <span style="padding-left:5px;font-size:12px;">{{ item.title }}【{{item.groups.length}}】</span>
             </template>
             
             <el-menu-item-group>
                 <span slot="title" style="font-size:12px;">{{ item.title }}【{{item.groups.length}}】</span>
                 <el-menu-item :class="subItem.status" :index="subItem.url" v-for="subItem in item.groups"  :key="subItem.name">
-                    <img :src="subItem.icon | pickIcon" style="width:16px;"></img>
+                    <img :src="subItem.icon | pickIcon" style="width:16px;">
                     <span slot="title">
                         <span style="padding-left:5px;" v-if="global.register.lanuage == 'zh_CN'">{{subItem.cnname}}</span>
                         <span style="padding-left:5px;" v-else>{{subItem.enname}}</span>
@@ -57,7 +57,7 @@
             <el-menu-item-group>
                 <span slot="title">应用</span>
                 <el-menu-item :class="item.status" :index="item.url" v-for="item in model.list" :key="item.name">
-                    <img :src="item.icon | pickIcon" style="width:16px;"></img>
+                    <img :src="item.icon | pickIcon" style="width:16px;">
                     <span slot="title">
                         <span style="padding-left:5px;" v-if="global.register.lanuage == 'zh_CN'">{{item.cnname}}</span>
                         <span style="padding-left:5px;" v-else>{{item.enname}}</span>
@@ -71,7 +71,7 @@
 
         <!-- 没有模板情况,且菜单项数量没超过阈值-->
         <el-menu-item :class="item.status" :index="item.url" v-for="item in model.list" :key="item.name" v-show="sideBarStatus === 2">
-            <img :src="item.icon | pickIcon" style="width:16px;"></img>
+            <img :src="item.icon | pickIcon" style="width:16px;">
             <span slot="title">
                 <span style="padding-left:5px;" v-if="global.register.lanuage == 'zh_CN'">{{item.cnname}}</span>
                 <span style="padding-left:5px;" v-else>{{item.enname}}</span>
@@ -84,7 +84,7 @@
         <!-- 没有分组的应用-->
         <el-submenu :class="item.status" :index="item.url" v-for="item in model.appListUnGrouped" :key="item.name">
             <template slot="title">
-                <img :src="item.icon | pickIcon" style="width:16px;"></img>
+                <img :src="item.icon | pickIcon" style="width:16px;">
                 <span style="padding-left:5px;" v-if="global.register.lanuage == 'zh_CN'">{{item.cnname}}</span>
                 <span style="padding-left:5px;" v-else>{{item.enname}}</span>
             </template>
@@ -185,7 +185,7 @@ export default{
         onToggle(){
             this.isCollapse = !this.isCollapse;
         },
-        onSelect(index,indexPath){
+        onSelect(index){
             if(index == 'toggle'){
                 this.onToggle();
             } else if(index == 'apps'){

+ 1 - 1
src/components/search/index.vue

@@ -18,7 +18,7 @@
                     </el-button>
                 </template>
             </div>
-            <el-container style="height: 95%;">
+            <el-container style="height: 95%;width:90%;">
                 <el-main style="padding:0px 0px 0px 0px;height:100%;overflow:auto;" ref="container">
                     <!-- <el-tabs value="view">
                         <el-tab-pane name="view" key="view">

+ 56 - 51
src/main.js

@@ -1,57 +1,62 @@
+// 静态加载依赖组件
 import Vue from 'vue'
-import App from './App.vue'
-import Cookies from 'js-cookie'
-import './plugins/element.js'
-import ElementUI from 'element-ui'
-//import enLang from 'element-ui/lib/locale/lang/en'
-const themeColor = {dark:'#252D47',light:'#409EFF'};
-const theme = Cookies.get("m3-theme")?themeColor[Cookies.get("m3-theme")]:'#252D47';// dark:#252D47 & blue:#409EFF  default theme is dark
-import(`./assets/theme/element-${theme}/index.css`)
-import moment from 'moment'
-import VueSplit from 'vue-split-panel'
-import './icons'
 
-Vue.use(VueSplit);
 
-Vue.prototype.moment = moment;
-Vue.prototype.eventHub = new Vue();
+// 开始动态加载依赖组件
+window.state && window.state("正在加载依赖组件...")
 
-Vue.config.productionTip = false;
-
-// ElementUI Setup
-ElementUI.Tooltip.props.openDelay.default = 1000;
-
-/* 
- * 测试环境
-*/
-const m3 = require("@wecise/m3js");
-Vue.prototype.m3 = m3;
-window.moment = moment;
-
-let init = function(){
-    window.global = m3.global;
-
-    Vue.prototype.$ELEMENT = { 
-      size: 'mini'
-    };
-
-    new Vue({
-      render: h => h(App)
-    }).$mount('#app')
-};
-
-
-if(process.env.NODE_ENV === "development"){
+// 动态加载模块依赖关系
+// auth,global,Vue... 为 m3 内部加载的模块, 这里的定义只为标明依赖关系时引用, 初始化时会自动替换为m3内部定义
+let mods = {auth:{}, global:{}, Vue:{}}
+// 定义应用所需动态加载模块
+mods.App = {
+    f: () => import(`@/App.vue`),  // 动态加载 App.vue
+    deps: [mods.global, mods.auth, mods.Vue] // App.vue 运行时依赖 global 和 auth
+}
 
-  m3.connect({company: process.env.VUE_APP_M3_COMPANY, username: process.env.VUE_APP_M3_USERNAME, password: process.env.VUE_APP_M3_PASSWORD }).then( ()=>{
-    setTimeout(()=>{
-      init();
-    },500)
-  }).catch((err)=>{
-    console.log(err);
-  });
-  
-} else {
-  m3.init();
-  init();
+// m3小应用开发框架配置信息
+let m3config = {
+    global: window,   //全局变量,默认为window
+    rootDivID: "app", //配合vue
+    lang: "zh-CN", 
+    theme: "", // 默认使用cookie中保存的信息或使用内置缺省值
+    displayLoadingState: true,
+    mods,
 }
+
+// 加载m3js
+import("@wecise/m3js").then((m3)=>{
+
+    // m3.go(m3config)
+    /*******************************************************************************************
+     **** m3.go 所做的操作如下。如需定制化处理,可以使用下面的代码代替 m3.go(m3config) ****
+     *******************************************************************************************
+     */
+    window.state && window.state("正在初始化小应用配置...")
+    // m3js加载完成,根据配置信息动态有序异步加载依赖组件,完成M3小应用初始化
+    m3.init(m3config).then(()=>{
+        window.state && window.state("正在设置页面...")
+        m3.pageSetting().then(()=>{
+            window.state && window.state("正在渲染页面...")
+            window.moment = require("moment");
+            // 设置基本样式
+            m3.utils.merge(Vue.prototype.$ELEMENT, {
+                size: m3.cookie.get('size') || 'mini',
+            })
+            // m3.render完成的工作是渲染Vue页面,也可以写成
+            new Vue({
+                render: h => h(window.App),
+                mounted: function(){
+                    window.state && window.state("页面渲染完成...")
+                    m3.completed() // 加载数据
+                }
+            }).$mount('#app')
+        }).catch((e)=>{
+            console.error(e)
+        })
+    }).catch((e)=>{
+        console.error(e)
+    })
+}).catch((e)=>{
+    console.error(e)
+});

+ 53 - 80
vue.config.js

@@ -1,92 +1,65 @@
-const webpack = require('webpack')
-const WebpackZipPlugin = require('webpack-zip-plugin')
-const CompressionPlugin = require('compression-webpack-plugin')
-const path = require('path')
-const IS_PROD = process.env.NODE_ENV === 'production'
-const productionGzipExtensions = ['html', 'js', 'css']
 
 function resolve(dir) {
     return path.join(__dirname, dir)
 }
 
-module.exports = {
+const path = require('path')
+
+// 从m3js模版加载vue cli配置信息
+const m3config = require("@wecise/m3js/mbase/vue.config")
+// 输出vue cli配置信息
+module.exports = m3config({
+    // 开发阶段本地web服务
     devServer: {
-        host: '0.0.0.0',
-        https: false, //false关闭https,true为开启
-        open: true, //自动打开浏览器
-        port: 8080,
-        /* proxy: {
-            '/static': {
-                target: 'http://47.92.151.165:8080/',
-                changeOrigin: true,  //允许跨域
-                pathRewrite: {   //重写路径,这种是没有我们定义的前缀
-                    '^/static': '/' 
-                }
+        port: 8080, // 开发阶段本地服务端口,当前端口被占用时按自动+1处理
+        proxy: {
+            "/static": {
+                target: `http://${process.env.VUE_APP_M3_HOST}`,
+            },
+            "/user": {
+                target: `http://${process.env.VUE_APP_M3_HOST}`,
+            },
+            "/matrix": {
+                target: `http://${process.env.VUE_APP_M3_HOST}`,
+            },
+            "/script": {
+                target: `http://${process.env.VUE_APP_M3_HOST}`,
+            },
+            "/web": {
+                target: `http://${process.env.VUE_APP_M3_HOST}`,
+            },
+            "/config": {
+                target: `http://${process.env.VUE_APP_M3_HOST}`,
+            },
+            "/fs": {
+                target: `http://${process.env.VUE_APP_M3_HOST}`,
+            },
+            "/help":{
+                target: `http://${process.env.VUE_APP_M3_HOST}/help`
+            },
+            "/mxobject":{
+                target: `http://${process.env.VUE_APP_M3_HOST}`
             }
-        } */
+        }
     },
-
-    outputDir: 'app/matrix/' + process.env.VUE_APP_M3_APP,
-    productionSourceMap: false,
-
-    configureWebpack: config => {
-        // 生产环境
-        if (IS_PROD) {
-
-            return {
-                
-                plugins: [
-                    
-                    new CompressionPlugin({
-                        test: new RegExp(
-                            '\\.(' + productionGzipExtensions.join('|') + ')$'
-                        ),
-                        threshold:10240,
-                        minRatio: 1,
-                        deleteOriginalAssets:false
-                    }),
-                    new WebpackZipPlugin({
-                        initialFile: 'app',
-                        endPath: './',
-                        zipName: process.env.VUE_APP_M3_APP+'.zip',
-                        //frontShell: 'sed -i \'\' \'s/src="/src="\\/static\\/app\\/matrix\\/m3event/g\; s/href="/href="\\/static\\/app\\/matrix\\/m3event/g\' ./app/matrix/m3event/index.html',
-                        //frontShell: 'sed -i \'\' \'s/src="/src="\\/static\\/app\\/matrix\\/m3event/g\; s/href="/href="\\/static\\/app\\/matrix\\/m3event/g\' ./app/matrix/m3event/index.html',
-                        behindShell: './deploy.sh ' + process.env.VUE_APP_M3_HOST + ' ' + process.env.VUE_APP_M3_COMPANY + ' ' + process.env.VUE_APP_M3_USERNAME + ' "' + process.env.VUE_APP_M3_PASSWORD + '" ' + process.env.VUE_APP_M3_APP + ' ' + process.env.VUE_APP_M3_TITLE
-                    })
-                ]
-            }
+    configureWebpack: {
+        entry: {
+            app: "./src/main.js"
         }
-      },
-
+    },
     chainWebpack(config) {
-      
-      // ============压缩图片 start============
-      config.module
-          .rule('images')
-          .use('image-webpack-loader')
-          .loader('image-webpack-loader')
-          .options({ bypassOnDebug: true })
-          .end()
-      // ============压缩图片 end============
-
-      // set svg-sprite-loader
-      config.module
-        .rule('svg')
-        .exclude.add(resolve('src/icons'))
-        .end()
-      config.module
-        .rule('icons')
-        .test(/\.svg$/)
-        .include.add(resolve('src/icons'))
-        .end()
-        .use('svg-sprite-loader')
-        .loader('svg-sprite-loader')
-        .options({
-          symbolId: 'icon-[name]'
-        })
-        .end()
-  },
 
-  publicPath: process.env.NODE_ENV === 'production'?'/static/app/matrix/'+process.env.VUE_APP_M3_APP:''
+        // ============压缩图片 start============
+        /* config.module
+            .rule('images')
+            .use('image-webpack-loader')
+            .loader('image-webpack-loader')
+            .options({ bypassOnDebug: true })
+            .end() */
+        // ============压缩图片 end============
 
-}
+          /* config
+            .plugin('webpack-bundle-analyzer')
+            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) */
+    }
+})