Merge branch '12_4_dangyunlong' into dev

.env.mock

@@ -0,0 +1,7 @@
+# just a flag
+ENV = 'mock'
+
+# base api
+VUE_APP_BASE_API = 'http://127.0.0.1:4523/m1/4987755-4646495-default'
+# base websocket
+VUE_APP_BASE_WEBSOCKET = 'ws://127.0.0.1:4523/m1/4987755-4646495-default'

.env.production

@@ -1,8 +1,15 @@
 # just a flag
 ENV = 'production'
 
-# base websocket
-VUE_APP_BASE_WEBSOCKET = 'ws://admin.bjzxtw.org.cn:9506'
+# 测试环境,当你需要打包到正式环境且需要开启Gzip的时候,你需要使用下面那个
 # base api
-VUE_APP_BASE_API = 'https://admin.bjzxtw.org.cn/zxtapi'
+VUE_APP_BASE_API = 'http://183.131.25.186:9501'
+# base websocket
+VUE_APP_BASE_WEBSOCKET = 'ws://183.131.25.186:9506'
+
+# 正式环境,当你需要打包到测试环境且需要开启Gzip的时候,你需要使用上面那个
+# base websocket
+# VUE_APP_BASE_WEBSOCKET = 'ws://admin.bjzxtw.org.cn:9506'
+# # base api
+# VUE_APP_BASE_API = 'https://admin.bjzxtw.org.cn/zxtapi'
 

package.json

@@ -15,6 +15,7 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
     "test:unit": "jest --clearCache && vue-cli-service test:unit",
     "test:ci": "npm run lint && npm run test:unit",
+    "mock": "cross-env NODE_ENV=development vue-cli-service serve --mode mock",
     "liujian": "cross-env NODE_ENV=development vue-cli-service serve --mode liujian",
     "liujiawei": "cross-env NODE_ENV=development vue-cli-service serve --mode liujiawei",
     "fengrui": "cross-env NODE_ENV=development vue-cli-service serve --mode fengrui",
@@ -24,6 +25,7 @@
     "axios": "0.18.1",
     "clipboard": "2.0.4",
     "codemirror": "5.45.0",
+    "compression-webpack-plugin": "^6.1.1",
     "core-js": "3.6.5",
     "driver.js": "0.9.5",
     "dropzone": "5.5.1",

src/api/template.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+//mock
+//添加模板基本信息
+export function addBasic(data) {
+  return request({
+    url: '/template/addBasic',
+    method: 'post',
+    data
+  })
+}

src/layout/components/template/componentMenu.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="componentMenuBox" id="componentMenuBox">
+    <div class="componentMenuTitle">
+      <div v-if="type == 'sector'">可选板块：</div>
+      <div v-if="type == 'component'">可选组件：</div>
+    </div>
+    <div v-if="type == 'sector'">
+      <el-scrollbar wrap-class="scrollbar-wrapper">
+        <div class="sectorBox">
+          <div class="sectorItemBox">
+            <div class="sectorItem">
+              <img src="@/assets/template/sector/demo.png" />
+            </div>
+            <div class="sectorItemTitle">页头板块</div>
+          </div>
+          <div class="sectorItemBox">
+            <div class="sectorItem">
+              <img src="@/assets/template/sector/demo.png" />
+            </div>
+            <div class="sectorItemTitle">导航板块</div>
+          </div>
+          <div class="sectorItemBox">
+            <div class="sectorItem">
+              <img src="@/assets/template/sector/demo.png" />
+            </div>
+            <div class="sectorItemTitle">页尾板块</div>
+          </div>
+          <div class="sectorItemBox">
+            <div class="sectorItem">
+              <img src="@/assets/template/sector/demo.png" />
+            </div>
+            <div class="sectorItemTitle">页尾板块</div>
+          </div>
+          <div class="sectorItemBox">
+            <div class="sectorItem">
+              <img src="@/assets/template/sector/demo.png" />
+            </div>
+            <div class="sectorItemTitle">页尾板块</div>
+          </div>
+        </div>
+        
+      </el-scrollbar>
+    </div>
+    <!-- <div v-if="type == 'component'" class="componentBox">
+      组件
+    </div> -->
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'componentMenu',
+  props: {
+    type: {
+      type: String, //sector component
+      required: true
+    },
+  },
+  data() {
+    return {
+      data: null
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .componentMenuBox {
+    transition: width 0.28s;
+    width: 290px !important;
+    background: #2F2F2F;
+    height: 100%;
+    position: fixed;
+    font-size: 0px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1001;
+    overflow: hidden;
+    .sectorBox {
+      height: 100%;
+    }
+    .el-scrollbar {
+      height: calc(100vh - 100px);
+    }
+    .componentMenuTitle {
+      padding: 37px 0 30px 0;
+      color: #fff;
+      font-size: 18px;
+      div {
+        border-left: 3px solid #5570F1;
+        padding-left: 25px;
+      }
+    }
+    .sectorItemBox {
+      box-sizing: border-box;
+      padding: 0 20px 40px 20px;
+      height: 130px;
+      cursor: pointer;
+      .sectorItem {
+        border: 1px solid #333644;
+        padding: 10px;
+        border-radius: 8px;
+        &:hover {
+          background: #333644;
+          transform: scale(1.1);
+          transition: all 0.2s ease-in-out;
+        }
+        img {
+          display: block;
+          width: 100%;
+        }
+      }
+      .sectorItemTitle {
+        color: #fff;
+        font-size: 14px;
+        padding: 10px 0 0 0;
+        text-align: center;
+      }
+    }
+  }
+</style>

src/layout/creatWebsite.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="classObj" class="app-wrapper">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <!-- <sidebar class="sidebar-container" /> -->
+    <componentMenu :type="this.$store.state.template.menuType"/>
     <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <navbar />
@@ -18,6 +18,7 @@ import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
+import componentMenu from './components/template/componentMenu.vue'
 
 export default {
   name: 'Layout',
@@ -28,7 +29,8 @@ export default {
     Settings,
     Sidebar,
     TagsView,
-    Breadcrumb
+    Breadcrumb,
+    componentMenu
   },
   mixins: [ResizeMixin],
   computed: {

src/router/modules/dangyunlong.js

@@ -325,5 +325,21 @@ const dangyunlongRouter= [
       }
     ]
   },
+  {
+    path: '/templateList',
+    component: Layout,
+    children: [
+      {
+        name: '',
+        path: '',
+        component: () => import('@/views/template/templateList'),
+        meta: {
+          title: '网站模板',
+          hidden: true,
+          breadcrumb: true
+        }
+      }
+    ]
+  },
 ]
 export default dangyunlongRouter

src/store/modules/template.js

@@ -0,0 +1,38 @@
+import {addBasic} from '@/api/template'
+
+const state = {
+  stepStatus: true,//true显示步骤 false不显示
+  menuType: "sector" //sector板块 component组件
+}
+
+const mutations = {
+  //展示步骤
+  showStepStatus(state){
+    state.stepStatus = true;
+  },
+  //隐藏步骤
+  hiddenStepStatus(state){
+    state.stepStatus = false;
+  }
+}
+
+const actions = {
+  //添加模板基本信息
+  addBasic({commit},data) {
+    return new Promise((resolve, reject) => {
+      addBasic(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+}
+
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/styles/global.less

@@ -71,7 +71,7 @@
   align-items: center;
   justify-content: center;
 }
-.listDeleteBtn,.listEditBtn,.listMainBtn {
+.listDeleteBtn,.listEditBtn,.listMainBtn,.listSaveBtn {
   width:70px;
   height:28px;
   line-height:28px;
@@ -104,6 +104,13 @@
 .listMainBtn:hover {
   background:#CAD9CB;
 }
+.listSaveBtn{
+  color:#fff;
+  background:#2F2F2F;
+}
+.listSaveBtn:hover {
+  background:#646464;
+}
 
 //表单样式微调
 //1.网站列表
@@ -267,6 +274,8 @@
   }
 }
 
+
+
 /*页面布局 end------------------------------------------------------------>*/
 
 /*quill汉化 start------------------------------------------------------------>*/
@@ -344,3 +353,8 @@
 /*quill汉化 end------------------------------------------------------------>*/
 
 
+/*自助建站左侧菜单 el-scrollbar start------------------------------------------------------------>*/
+.el-scrollbar__wrap {
+  overflow-x: hidden !important; /* 强制隐藏横向滚动条 */
+}
+/*自助建站左侧菜单 el-scrollbar end------------------------------------------------------------>*/

src/views/chat/hall.vue

@@ -976,7 +976,7 @@
           </div>
           <div class="searchWindowFooter">
             <el-button type="info" @click="cancelEditGroupMember">取消</el-button>
-            <el-button type="primary" @click="saveEditGroupMember" :disabled="groupUserList.filter(item=>item.status).length<2">完成</el-button>
+            <el-button type="primary" @click="saveEditGroupMember" :disabled="groupUserList.filter(item=>item.status).length<=2">完成</el-button>
           </div>
         </div>
       </div>

src/views/chat/topic.vue

@@ -67,6 +67,7 @@
               <template slot-scope="scope">
                 <div v-if="scope.row.type==1">科研</div>
                 <div v-if="scope.row.type==2">维权</div>
+                <div v-if="scope.row.type==3">讨论</div>
               </template>
             </el-table-column>
             <el-table-column prop="user_name" label="作者" width=""></el-table-column>

src/views/template/components/creatWebsite/indexComponents.vue → src/views/template/public/indexComponents.vue

@@ -108,36 +108,36 @@ export default {
 
 /* 背景图样式 */
 .itemMenuBg1 {
-  background: url('../../../../assets/creatWebsite/menu/default/top_menu.png') no-repeat 10px #f0f2f5;
+  background: url('../../../assets/creatWebsite/menu/default/top_menu.png') no-repeat 10px #f0f2f5;
 }
 .itemMenuBg2 {
-  background: url('../../../../assets/creatWebsite/menu/default/logo.png') no-repeat 10px #f0f2f5;
+  background: url('../../../assets/creatWebsite/menu/default/logo.png') no-repeat 10px #f0f2f5;
 }
 .itemMenuBg3 {
-  background: url('../../../../assets/creatWebsite/menu/default/nav_menu.png') no-repeat 10px #f0f2f5;
+  background: url('../../../assets/creatWebsite/menu/default/nav_menu.png') no-repeat 10px #f0f2f5;
 }
 .itemMenuBg4 {
-  background: url('../../../../assets/creatWebsite/menu/default/banner.png') no-repeat 10px #f0f2f5;
+  background: url('../../../assets/creatWebsite/menu/default/banner.png') no-repeat 10px #f0f2f5;
 }
 .itemMenuBg5 {
-  background: url('../../../../assets/creatWebsite/menu/default/class_list.png') no-repeat 10px #f0f2f5;
+  background: url('../../../assets/creatWebsite/menu/default/class_list.png') no-repeat 10px #f0f2f5;
 }
 .itemMenuBg6 {
-  background: url('../../../../assets/creatWebsite/menu/default/img_list.png') no-repeat 10px #f0f2f5;
+  background: url('../../../assets/creatWebsite/menu/default/img_list.png') no-repeat 10px #f0f2f5;
 }
 .itemMenuBg7 {
-  background: url('../../../../assets/creatWebsite/menu/default/text_list.png') no-repeat 10px #f0f2f5;
+  background: url('../../../assets/creatWebsite/menu/default/text_list.png') no-repeat 10px #f0f2f5;
 }
 .itemMenuBg8 {
-  background: url('../../../../assets/creatWebsite/menu/default/img_text_list.png') no-repeat 10px #f0f2f5;
+  background: url('../../../assets/creatWebsite/menu/default/img_text_list.png') no-repeat 10px #f0f2f5;
 }
 .itemMenuBg9 {
-  background: url('../../../../assets/creatWebsite/menu/default/level.png') no-repeat 10px #f0f2f5;
+  background: url('../../../assets/creatWebsite/menu/default/level.png') no-repeat 10px #f0f2f5;
 }
 .itemMenuBg10 {
-  background: url('../../../../assets/creatWebsite/menu/default/link.png') no-repeat 10px #f0f2f5;
+  background: url('../../../assets/creatWebsite/menu/default/link.png') no-repeat 10px #f0f2f5;
 }
 .itemMenuBg11 {
-  background: url('../../../../assets/creatWebsite/menu/default/text.png') no-repeat 10px #f0f2f5;
+  background: url('../../../assets/creatWebsite/menu/default/text.png') no-repeat 10px #f0f2f5;
 }
 </style>

src/views/template/public/step.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="stepBox">
+    <div class="stepBoxText" @click="hiddenStepStatus"><i class="el-icon-close"></i></div>
+    <el-steps :active="activeNumber" align-center>
+      <el-step title="填写模板基本信息" description="类型和网站底部信息" />
+      <el-step title="选择模板风格" description="网站整体风格和样式" />
+      <el-step title="配置网站模块" description="展示哪些模块到网页" />
+      <el-step title="应用网站模板" description="应用该模板到您的站点" />
+    </el-steps>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    activeNumber: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+  methods: {
+    //隐藏步骤
+    hiddenStepStatus() {
+      console.log(123)
+      console.log(this.$store.state.template.stepStatus)
+      this.$store.commit('template/hiddenStepStatus');
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .stepBox {
+    margin: 30px 30px 20px 30px;
+    position: relative;
+    .stepBoxText {
+      position: absolute;
+      right: -30px;
+      top: -70px;
+      color: #1C1D22;
+      background: #FFF2E2;
+      border-radius: 8px;
+      width: 28px;
+      height: 28px;
+      line-height: 28px;
+      text-align: center;
+      font-size: 18px;
+      cursor: pointer;
+    }
+  }
+</style>

src/views/template/templateBase.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="mainBox">
-    <div class="stepBox">
-      <el-steps :active="1" align-center>
-        <el-step title="填写模板基本信息" description="设置类型和网站底部信息" />
-        <el-step title="选择模板风格" description="确定网站整体风格和样式" />
-        <el-step title="配置网站模块" description="选择展示哪些模块到网页" />
-        <el-step title="应用网站模板" description="应用该模板到您的站点" />
-      </el-steps>
+    <div class="layerBox" v-if="this.$store.state.template.stepStatus">
+      <tableTitle :name="templateStepTitle"/>
+      <step :activeNumber="1"/>
     </div>
     <el-form ref="form" :model="form" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" label-width="120px">
       <div class="layerBox">
@@ -22,11 +18,17 @@
               </el-checkbox-group>
             </div>
           </el-form-item>
-          <el-form-item label="单页模板类型：" :label-width="formLabelWidth" class="custom-align-right">
+          <el-form-item :label="null" :label-width="formLabelWidth" class="custom-align-right">
             <div class="formLabelFloatBox">
+              <div class="labelTitleStyle">
+                单页模板类型：
+                <el-tooltip class="item" effect="dark" content="说明文字" placement="top">
+                  <i class="el-icon-question"></i>
+                </el-tooltip>
+              </div>
               <el-checkbox-group v-model="form.template_special_type">
                 <el-checkbox label="1">自定义列表页</el-checkbox>
-                <el-checkbox label="2">自定义详情页</el-checkbox>
+                <el-checkbox label="2" disabled>自定义详情页</el-checkbox>
               </el-checkbox-group>
             </div>
           </el-form-item>
@@ -119,14 +121,19 @@
           <el-form-item label="网站备案号：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
             <div class="formLabelFloatBox">
               <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
-            </div>
+            </div>  
           </el-form-item>
           <el-form-item label="网安备案号：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
             <div class="formLabelFloatBox">
               <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
             </div>
           </el-form-item>
-          <el-form-item label="客服QQ号：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+          <el-form-item label="客服QQ号1：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
+            <div class="formLabelFloatBox">
+              <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
+            </div>
+          </el-form-item>
+          <el-form-item label="客服QQ号2：" :label-width="formLabelWidth" prop="website_statement" class="custom-align-right">
             <div class="formLabelFloatBox">
               <el-input type="text" v-model="form.website_statement" placeholder="请输入.."></el-input>
             </div>
@@ -145,11 +152,14 @@
 // 引入公用样式
 import '@/styles/global.less';
 //表格标题
-import tableTitle from './components/tableTitle';
+import tableTitle from './public/tableTitle';
+//步骤条
+import step from './public/step';
 
 export default {
   components: {
     tableTitle,//表格标题
+    step//步骤条
   },
   data() {
     // 配置验证规则：用于表单验证
@@ -168,13 +178,14 @@ export default {
       }
     }
     return {
+      templateStepTitle:"仅需四步，即可完成模板创建",
       templateBaseTitle:"模板类型设置",
       templateInfoTitle:"模板信息设置",
       formLabelWidth:"120px",
       editId:"",
       form:{
         template_base_type:["1"],//常规类型
-        template_special_type:[],//特殊类型
+        template_special_type:["2"],//特殊类型
         website_statement:"",//网站声明
         project_img_src:"",
       },
@@ -185,38 +196,42 @@ export default {
     };
   },
   methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //上一步
+    goToWebsite(){
+      this.$router.push({
+        path: '/webSite'
+      });
+    },
+    //下一步
+    goToStyle(){
+      this.$router.push({
+        path: '/templateStyle',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
     //1.提交表单 start ------------------------------------------------------------>
     //提交表单
     addData(){
       console.log(this.form);
       //1.先验证用户是否已经存在
-      this.$store.dispatch('userMember/verifyUserInfo',{user_name:this.form.user_name}).then(res=>{
-        if(res.code==0){
-          //如果code为0表示用户不存在，提交表单
-          this.$store.dispatch('userMember/createUser',this.form).then(res=>{
-            console.log(res);
-            this.$message({
-              type: 'success',
-              message: '用户添加成功！'
-            });
-            this.goList();
-          })
-        }else if(res.code==200){
-          //如果code==200 表示用户存在，阻止进一步提交
-          this.$message({
-            type: 'warning',
-            message: '该账号已被注册，请更换其他账号！'
-          });
+      this.$store.dispatch('template/addBasic',this.form).then(res=>{
+        if(res.code==200){
+          this.$message.success('基本信息添加成功！请选择模板风格');
+          //进入下一步
+          this.goToStyle();
         }
       }).catch(error=>{
-        this.$message({
-          type: 'info',
-          message: '网络错误，请重试！'
-        });
+        this.$message.error('网络错误，请重试！');
       })
     },
     //提交表单 start ------------------------------------------------------------>
-    //3.编辑表单 start ------------------------------------------------------------>
+
+    //2.编辑表单 start ------------------------------------------------------------>
     //获得用户信息
     getUserInfo(){
       this.$store.dispatch('userMember/getUser',{id:this.editId}).then(res=>{
@@ -267,36 +282,32 @@ export default {
       })
     },
     //编辑表单 end ------------------------------------------------------------>
-    
-    goToWebsite(){
-      this.$router.push({
-        path: '/webSite',
-      });
-    },
-    goToStyle(){
-      this.$router.push({
-        path: '/templateStyle',
-      });
-    },
+
   },
   mounted(){
-    //判断是新建还是回显
+    //1.展示步骤
+    this.$store.commit('template/showStepStatus');
+    //2.判断是新建还是回显
     if(this.$route.query.id!=undefined){
       this.editId = this.$route.query.id;
-      console.log("编辑用户！")
-      this.getUserInfo();
+      console.log("编辑模板！")
     }else{
-      console.log("添加用户！")
+      console.log("添加模板基本信息！")
     }
-
   }
 };
 </script>
 
 <style scoped lang="less">
-  .stepBox {
-    margin: 30px 30px 20px 30px;
+  .labelTitleStyle{
+    font-size: 14px;
+    color: #606266;
+    font-weight: bold;
+  }
+  .exampleBox {
+    border: 1px solid #ccc;
   }
+
   .formDiv{
     background: #F5F7FB;
     padding: 10px 20px 10px 20px;

src/views/template/templateCreat.vue

@@ -1,19 +1,42 @@
 <template>
   <div class="mainBox">
-    <div class="layerTabsBox">
+    <div class="topMenuBox">
+      <div>
+        <el-button icon="el-icon-refresh" type="warning" size="small">随机生成模板</el-button>
+      </div>
+      <div>
+        <el-button icon="el-icon-right" type="primary" size="small" @click="gotoList">首页</el-button>
+        <el-button icon="el-icon-right" type="primary" size="small" @click="gotoList">分类页</el-button>
+        <el-button icon="el-icon-right" type="primary" size="small" @click="gotoList">列表页</el-button>
+        <el-button icon="el-icon-right" type="primary" size="small" @click="gotoList">详情页</el-button>
+      </div>
+      <div>
+        <el-button type="primary" size="small" @click="gotoList">保存</el-button>
+        <el-button icon="el-icon-view" type="warning" size="small">预览</el-button>
+        <el-button icon="el-icon-circle-close" type="info" size="small" @click="goStyle">退出编辑</el-button>
+      </div>
+    </div>
+    <div class="pageTabsBox">
+      <div>首页<i class="el-icon-circle-check"></i></div>
+      <div>分类页<i class="el-icon-circle-check"></i></div>
+      <div>列表页<i class="el-icon-circle-check"></i></div>
+      <div>详情页<i class="el-icon-circle-check"></i></div>
+    </div>
+
+    <!-- <div class="layerTabsBox">
       <div class="layerTabsItem active">配置首页</div>
       <div class="layerTabsItem">配置列表页</div>
       <div class="layerTabsItem">配置详情页</div>
-    </div>
+    </div> -->
+
     <!-- 工具栏 start ---------------------------------------->
-    <div class="menuPostionBox">
+    <!-- <div class="menuPostionBox">
       <MenuTopBox @add-module="addModule"/>
-    </div>
+    </div> -->
     <!-- 工具栏 end ---------------------------------------->
 
     <!-- 栅格布局 预览模式 start ---------------------------------------->
-    <div class="layerBox">
-      <tableTitle :name="websiteTitle"/>
+    <div class="websiteBox">
       <div class="grid-layout-demo">
         <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true">
           <grid-item
@@ -241,9 +264,8 @@
       </div>
     </div>
     <!-- 栅格布局 预览模式 end ---------------------------------------->
-    <div class="bottomBtnBox">
-      <el-button type="primary">保存配置</el-button>
-    </div>
+
+
     <!--弹出框 start------------------------------------------------------------>
     <el-dialog title="编辑模块" :visible.sync="windowStatus">
       <el-form :model="form" ref="form" autocomplete="off" label-position="left">
@@ -273,23 +295,26 @@ import '@/styles/global.less';
 //引入vue-grid-layout
 import { GridLayout, GridItem } from 'vue-grid-layout';
 //标题
-import tableTitle from './components/tableTitle';
+import tableTitle from './public/tableTitle';
 //导入新组件
-import MenuTopBox from './components/creatWebsite/indexComponents.vue'; 
+//import MenuTopBox from './public/indexComponents.vue'; 
+
+
+
 
 export default {
   components: {
     GridLayout,
     GridItem,
     tableTitle,
-    MenuTopBox
+    //MenuTopBox
   },
   data() {
     return {
       //页面 start------------------------------------------------------------>
       headerTitle: '模块',
-      websiteTitle: '预览',
       windowStatus: false,
+      editPageStatus:0,//当前正在配置的页面 0 首页 1 分类页 2 列表页 3 详情页
       //页面 end------------------------------------------------------------>
 
       //弹出框 start------------------------------------------------------------>
@@ -358,11 +383,49 @@ export default {
         // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""},
         // { i: "2", x: 3, y: 0, w: 3, h: 2, content:""},
         // { i: "3", x: 6, y: 0, w: 3, h: 2, content:""}
-      ]
+      ],
       //预览 end------------------------------------------------------------>
+
+      //保存页面信息
+      pageData:{
+        page_index:{
+          
+        },
+        page_theme:{
+          
+        },
+        page_list:{
+          
+        },
+        page_article:{
+          
+        }
+      }
+
     }
   },
   methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //上一步  
+    goStyle(){
+      this.$router.push({
+        path: '/templateStyle',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    nextPage(){
+      //保存页面信息
+      this.pageData.page_theme = 1;
+    },
+    gotoList(){
+      this.$router.push({
+        path: '/templateList'
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
     //添加模块
     addModule(type) {
       // 计算当前布局的最大 y 值
@@ -475,7 +538,6 @@ export default {
           content:""
         });
       }
-
     },
     //删除模块
     deleteModule(item) {
@@ -520,35 +582,77 @@ export default {
 </script>
 
 <style scoped lang="less">
-  //菜单 start------------------------------------------------------------> 
-  .layerTabsBox {
-    margin: 30px;
-    border-radius: 20px;
-    background: #fff;
-    border: 1px solid #d3d3d3;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
+  //顶部菜单
+  .topMenuBox {
+    padding: 20px 30px 20px 30px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    overflow: hidden;
-    .layerTabsItem {
-      width: 33.33%; /* 每个占3分之一的空间 */
-      padding: 10px 20px;
-      cursor: pointer;
-      text-align: center;
-      font-size: 14px;
-      border-right: 1px solid #d3d3d3;
-      background: #fff;
+    background: #fff
+  }
+  //当前步骤
+  .pageTabsBox {
+    border-top: 1px solid #E9EDF7;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-items: flex-start;
+    font-size:12px;
+    padding:10px 30px;
+    div {
+      margin-right: 30px;
+      color: #999;
+      i {
+        margin-left: 5px;
+      }
     }
     .active {
-      background: #5570F1;
-      color: #fff;
+      color: #5570F1;
     }
   }
-  .layerBox {
-    padding-bottom: 10px;
+  //页面容器
+  .websiteBox {
+    margin: 30px;
+    background: #fff;
+    border: 1px solid #E9EDF7;
+    padding: 20px 20px 20px 20px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
   }
+
+
+
+
+
+  //菜单 start------------------------------------------------------------> 
+  // .layerTabsBox {
+  //   margin: 30px;
+  //   border-radius: 20px;
+  //   background: #fff;
+  //   border: 1px solid #d3d3d3;
+  //   -webkit-box-sizing: border-box;
+  //   box-sizing: border-box;
+  //   display: flex;
+  //   align-items: center;
+  //   justify-content: space-between;
+  //   overflow: hidden;
+  //   .layerTabsItem {
+  //     width: 33.33%; /* 每个占3分之一的空间 */
+  //     padding: 10px 20px;
+  //     cursor: pointer;
+  //     text-align: center;
+  //     font-size: 14px;
+  //     border-right: 1px solid #d3d3d3;
+  //     background: #fff;
+  //   }
+  //   .active {
+  //     background: #5570F1;
+  //     color: #fff;
+  //   }
+  // }
+  // .layerBox {
+  //   padding-bottom: 10px;
+  // }
   //菜单 end------------------------------------------------------------> 
 
   //模块 start------------------------------------------------------------> 

src/views/template/templateList.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="mainBox">
+    <!--搜索功能 start------------------------------------------------------------>
+    <div class="layerBox_search">
+      <div class="layerBoxLine">
+        <el-row>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">网站名称：</div>
+              <el-input v-model="getApiData.website_name" placeholder="请输入网站名称"></el-input>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBox">
+              <div class="searchTitle">应用状态：</div>
+              <el-select v-model="getApiData.website_status" placeholder="请选择应用状态..">
+                <el-option label="全部" value="2"></el-option>
+                <el-option label="已应用" value="1"></el-option>
+                <el-option label="未应用" value="0"></el-option>
+              </el-select>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="searchBtnBox">
+              <el-button>重置</el-button>
+              <el-button type="primary" @click="getData('search')">搜索</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <!--搜索功能 end------------------------------------------------------------>
+    <!--表格内容 start------------------------------------------------------------>
+    <div class="layerBox">
+      <tableTitle :name="tableDivTitle"/>
+      <el-row>
+        <template>
+          <el-table :data="tableData" style="width: 100%">
+            <el-table-column fixed prop="id" label="编号" width="50"></el-table-column>
+            <el-table-column prop="website_name" label="网站名称"></el-table-column>
+            <el-table-column prop="template_name" label="风格名称" width="100">
+              <template slot-scope="scope">
+                <div v-if="scope.row.template_name==''">无</div>
+                <div v-else>{{scope.row.template_name}}</div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="template_page" label="模板页面"></el-table-column>
+            <el-table-column prop="created_at" label="创建时间"></el-table-column>
+            <el-table-column prop="updated_at" label="更新时间"></el-table-column>
+            <el-table-column prop="status" label="状态" width="100">
+              <template slot-scope="scope">
+                <div v-if="scope.row.status==0">未应用</div>
+                <div v-if="scope.row.status==1">已应用</div>
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" header-align="center" width="180">
+              <template slot-scope="scope">
+                <div class="listBtnBox">
+                  <div class="listEditBtn" @click="getDataMain(scope.row.id)" v-if="scope.row.status==1"><i class="el-icon-edit-outline"></i>编辑</div>
+                  <div class="listMainBtn" @click="creatWebsite(scope.row.id)" v-if="scope.row.status==0"><i class="el-icon-brush"></i>构建</div>
+                  <div class="listSaveBtn"><i class="el-icon-finished"></i>应用</div>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
+      </el-row>
+    </div>
+    <div class="alignBox">
+      <el-row>
+        <el-col :span="24">
+          <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper" :total="allCount"></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './public/tableTitle';
+//引入公用样式
+import '@/styles/global.less';
+//步骤条
+import step from './public/step';
+
+export default {
+  components: {
+    tableTitle,//表格标题
+    step//步骤条
+  },
+  data() {
+    return {
+      //1.列表和分页相关 start ------------------------------------------------------------>
+      templateStepTitle:"仅需四步，即可完成模板创建",
+      tableDivTitle:"模板列表",
+      useTemplateName:"已选择风格",
+      windowStatus:false,//弹出框
+      tableData:[
+        {id:1,website_name:"中国三农市场网",template_name:"",template_page:"首页,分类页,列表页,详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:0},
+        {id:2,website_name:"中农兴业网",template_name:"怒火蔓延",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:3,website_name:"中农兴业市场网",template_name:"毒舌律师",template_page:"首页,分类页,列表页,详情页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:4,website_name:"中农兴业网",template_name:"",template_page:"首页,分类页,列表页,详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:0},
+        {id:5,website_name:"金政网",template_name:"存亡之战",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:6,website_name:"三农资讯网",template_name:"老无所依",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:7,website_name:"农民网",template_name:"金刚川",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:8,website_name:"中国三农市场网",template_name:"八佰",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:9,website_name:"中农兴业网",template_name:"破地狱",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:10,website_name:"中国金政网",template_name:"慕然回首",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1}
+      ],//内容
+      getApiData:{  
+        page:1,//当前是第几页
+        pageSize:10,//一共多少条
+      },
+      allCount:20,//总条数
+      //分页相关 end ------------------------------------------------------------>
+    }
+  },
+  methods: {
+    //0.全局操作 start ------------------------------------------------------------>
+    //上一步  
+    goBase(){
+      this.$router.push({
+        path: '/templateBase',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //下一步
+    goCreat(id){
+      let data = {
+        id:id
+      }
+      this.$router.push({
+        path: '/templateCreat',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
+    //1.请求数据 start ------------------------------------------------------------>
+    //1.1 开始请求列表信息方法
+    getData(){
+      this.$store.dispatch('pool/getWebList',this.getApiData).then(res=> {
+        let newData = [];
+        for(let item of res.data.rows){
+          if(item.city_name==null){item.city_name="--"}
+          newData.push(item)
+        }
+        this.tableData = newData; //给与内容
+        this.allCount = res.data.count; //给与总条数
+      }).catch(() => {
+        this.$message({
+          type: 'warning',
+          message: '网络错误，请重试！'
+        });
+      })
+    },
+    
+    //选择风格
+    useIt(id){
+      console.log(id)
+      this.tableData.forEach(item=>{
+        item.status = 0;
+      })
+      this.tableData.find(item=>item.id==id).status = 1;
+    },
+
+    //1.4 列表内容分页
+    //直接跳转
+    handleSizeChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //1.5 点击分页
+    handleCurrentChange(val) {
+      this.getApiData.page = val;
+      this.getData();
+    },
+    //列表和分页相关 end ------------------------------------------------------------>
+
+    //构建网站
+    creatWebsite(){
+      this.$router.push({
+        path: '/templateBase',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+
+    //编辑网站
+    getDataMain(){
+      this.$router.push({
+        path: '/templateCreat',
+        query: {
+          id: this.editId
+        }
+      });
+    }
+  },
+  mounted(){
+    //this.getData();
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .searchBtnBox {
+    padding-top: 26px;
+    text-align: right;
+  }
+  .paginationBox {
+    padding: 20px 0 0 0;
+    text-align: center;
+  }
+  .btnBox {
+    padding:0 0 40px 0;
+    text-align: center;
+  }
+</style>
+

src/views/template/templateStyle.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="mainBox">
-    <div class="stepBox">
-      <el-steps :active="2" align-center>
-        <el-step title="填写模板基本信息" description="设置类型和网站底部信息" />
-        <el-step title="选择模板风格" description="确定网站整体风格和样式" />
-        <el-step title="配置网站模块" description="选择展示哪些模块到网页" />
-        <el-step title="应用网站模板" description="应用该模板到您的站点" />
-      </el-steps>
+    <div class="layerBox" v-if="this.$store.state.template.stepStatus">
+      <tableTitle :name="templateStepTitle"/>
+      <step :activeNumber="2"/>
     </div>
     <!--搜索功能 start------------------------------------------------------------>
     <div class="layerBox_search">
@@ -55,7 +51,7 @@
     <div class="layerBox">
       <tableTitle :name="useTemplateName"/>
       <div class="thumbnailBox">
-        <div class="thumbnailItem">
+        <div class="thumbnailItem" @click="showImg">
           <div class="thumbnailItemBox">
             <img src="@/assets/template/style1.png">
             <div class="thumbnailItemTitle">首页</div>
@@ -88,24 +84,45 @@
     </div>
     <!--步骤按钮 end------------------------------------------------------------>
     <!--表格内容 end------------------------------------------------------------>
+
+
+    <!--弹出框 start------------------------------------------------------------>
+    <el-dialog title="模板详情" :visible.sync="windowStatus" :close-on-click-modal="false">
+      <el-form :model="form" ref="form" :rules="formRules" label-position="left">
+        <div class="imgZoomBox">
+          <img src="@/assets/template/style1.png">
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <div>
+          <el-button @click="windowStatus=false">关闭</el-button>
+        </div>
+      </div>
+    </el-dialog>
+    <!--弹出框 end------------------------------------------------------------>
   </div>
 </template>
 
 <script>
 //表格标题
-import tableTitle from './components/tableTitle';
+import tableTitle from './public/tableTitle';
 //引入公用样式
 import '@/styles/global.less';
+//步骤条
+import step from './public/step';
 
 export default {
   components: {
     tableTitle,//表格标题
+    step//步骤条
   },
   data() {
     return {
       //1.列表和分页相关 start ------------------------------------------------------------>
+      templateStepTitle:"仅需四步，即可完成模板创建",
       tableDivTitle:"模板列表",
       useTemplateName:"已选择风格",
+      windowStatus:false,//弹出框
       tableData:[
         {id:1,img:require("@/assets/template/style1.png"),title:"廉政风云",status:1},
         {id:2,img:require("@/assets/template/style2.png"),title:"误判",status:0},
@@ -118,20 +135,41 @@ export default {
       ],//内容
       editId:0,//要修改的网站id
       getApiData:{
-        title:"",//标题
-        category_name:"",//导航池id
-        author:"",//作者
-        islink:"",//是否使用外链
-        status:"",//资讯状态
-        page:1,//当前是第几页
-        pageSize:10,//一共多少条
+        
       },
       allCount:0,//总条数
       //分页相关 end ------------------------------------------------------------>
     }
   },
   methods: {
-    //1.列表和分页相关 start ------------------------------------------------------------>
+    //0.全局操作 start ------------------------------------------------------------>
+    //上一步  
+    goBase(){
+      this.$router.push({
+        path: '/templateBase',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //下一步
+    goCreat(id){
+      let data = {
+        id:id
+      }
+      this.$router.push({
+        path: '/templateCreat',
+        query: {
+          id: this.editId
+        }
+      });
+    },
+    //放大缩略图
+    showImg(img){
+      this.windowStatus = true;
+    },
+    //0.全局操作 end ------------------------------------------------------------>
+
     //1.1 开始请求列表信息方法
     getData(type){
       if(type=="search"){
@@ -166,8 +204,6 @@ export default {
         item.status = 0;
       })
       this.tableData.find(item=>item.id==id).status = 1;
-
-      
     },
 
 
@@ -193,49 +229,20 @@ export default {
       this.getApiData.page = val;
       this.getData();
     },
-    //1.6 重置按钮
-    clearSearchList(){
-      this.tableData = [];
-      this.getApiData.title = "";
-      this.getApiData.category_name = "";
-      this.getApiData.author = "";
-      this.getApiData.islink = "";
-      this.getApiData.status = "";
-      this.getApiData.page = 1;
-      this.getApiData.pageSize = 10;
-      this.getData();
-    },
     //列表和分页相关 end ------------------------------------------------------------>
-
-    //2.添加新闻 start ------------------------------------------------------------>
-    //跳转到资讯发布页面
-    goBase(){
-      this.$router.push({
-        path: '/templateBase',
-      });
-    },
-    goCreat(id){
-      let data = {
-        id:id
-      }
-      this.$router.push({
-        path: '/templateCreat',
-        query: data
-      });
-    }
-    //添加新闻 end ------------------------------------------------------------>
   },
   mounted(){
-    //1.获得初始数据
-    //this.getData();
+    if(this.$route.query.id!=undefined){
+      this.editId = this.$route.query.id;
+      console.log("编辑风格！")
+    }else{
+      console.log("选择风格！")
+    }
   }
 }
 </script>
 
 <style scoped lang="less">
-  .stepBox {
-    margin: 30px 30px 20px 30px;
-  }
   .searchBtnBox {
     padding-top: 26px;
     text-align: right;
@@ -325,5 +332,10 @@ export default {
       }
     }
   }
+  .imgZoomBox {
+    img {
+      width: 100%;
+    }
+  }
 </style>
 

src/views/website/WebsiteList.vue

@@ -61,7 +61,7 @@
                 <div class="listBtnBox">
                   <div class="listDeleteBtn" @click="deleteData(scope.row.id, tableData)"><i class="el-icon-delete"></i>移除</div>
                   <div class="listEditBtn" @click="getDataMain(scope.row.id, tableData)"><i class="el-icon-edit-outline"></i>编辑</div>
-                  <!-- <div class="listMainBtn" @click="creatWebsite(scope.row.id)"><i class="el-icon-brush"></i>搭建</div> -->
+                  <!-- <div class="listMainBtn" @click="creatWebsite(scope.row.id)"><i class="el-icon-brush"></i>模板</div> -->
                 </div>
                 <!-- <div class="listMainBtn"><i class="el-icon-view"></i>详情</div> -->
                 <!-- <el-button @click.native.prevent="deleteData(scope.row.id, tableData)" type="text" size="small">移除</el-button>
@@ -148,7 +148,7 @@
           <el-form-item label="上级网系：" :label-width="formLabelWidth" prop="website_column_arr_id" class="custom-align-right">
             <el-cascader v-model="form.website_column_arr_id" :props="{checkStrictly:true}" :options="website_column_arr"></el-cascader>
           </el-form-item>
-          <el-form-item label="城市：" :label-width="formLabelWidth" class="custom-align-right">
+          <el-form-item label="城市：" :label-width="formLabelWidth" prop="city_arr_id" class="custom-align-right">
             <CityCascader v-model="form.city_arr_id" @update-city-id="updateFormCityId"></CityCascader>
           </el-form-item>
           <el-form-item label="网站logo：" prop="logo" :label-width="formLabelWidth" :class="['custom-form-item']" class="custom-align-right">
@@ -219,9 +219,8 @@
             </template>
             <el-input type="textarea" v-model="form.description" class="custom-textarea" placeholder="请输入网站描述"></el-input>
           </el-form-item>
-          <el-form-item label="模板：" :label-width="formLabelWidth" class="custom-align-right" prop="template_id">
+          <!-- <el-form-item label="模板：" :label-width="formLabelWidth" class="custom-align-right" prop="template_id">
             <div class="webSiteTemplate" @click="getTemplateList">
-              <!-- <div class="webSiteTitle"></div> -->
               <div class="webSiteTemplateImg">
                 <div>
                   <img v-if="TemplateImg" :src="TemplateImg" class="selectWebSiteTemplateImg">
@@ -233,7 +232,7 @@
                 </div>
               </div>
             </div>
-          </el-form-item>
+          </el-form-item> -->
         </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -282,7 +281,7 @@ export default {
     }
     const validateColumn = (rule,value,callback) => {
       if (value.length === 0) {
-          callback(new Error('必须选择一个上级网系！'))
+          callback(new Error('该项不能为空！'))
       } else {
           callback()
       }
@@ -328,7 +327,7 @@ export default {
         title:"",//需要提交的网站标题
         keywords:"",//需要提交的网站标题
         description:"",//需要提交的网站描述
-        template_id:""//选择的网站皮肤
+        //template_id:""//选择的网站皮肤
       },
       //3.2 表单验证规则
       formRules: {
@@ -342,12 +341,13 @@ export default {
         //网系不能为空 注意，因为是select框，只有提交的时候才会验证
         website_column_arr_id: [{type:'array',required:true,trigger:'change',message:'必须选择一个网系！',validator:validateColumn}],
         //网站标题，关键词，描述不能为空
+        city_arr_id:[{required:true,trigger:'blur',validator:validateColumn}],
         title:[{required:true,trigger:'blur',validator:validateEmpty}],
         keywords:[{required:true,trigger:'blur',validator:validateEmpty}],
         description:[{required:true,trigger:'blur',validator:validateEmpty}],
         logo:[{required:true,trigger:'blur',validator:validateEmpty}],
         logoUrl:[{required:true,trigger:'blur',validator:validateEmpty}],
-        template_id:[{required:true,trigger:'blur',validator:validateEmpty}],
+        //template_id:[{required:true,trigger:'blur',validator:validateEmpty}],
       },
       //3.3 通过api获的的数据 弹窗
       website_column_arr:[],//api获得的网系列表

vue.config.js

@@ -1,30 +1,17 @@
 'use strict'
 const path = require('path')
 const defaultSettings = require('./src/settings.js')
-const webpack = require('webpack');
+const webpack = require('webpack')
+const CompressionWebpackPlugin = require('compression-webpack-plugin') // 引入 Gzip 压缩插件
 
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
 
 const name = defaultSettings.title || 'vue Element Admin' // page title
-
-// If your port is set to 80,
-// use administrator privileges to execute the command line.
-// For example, Mac: sudo npm run
-// You can change the port by the following method:
-// port = 9527 npm run dev OR npm run dev --port = 9527
 const port = process.env.port || process.env.npm_config_port || 9527 // dev port
 
-// All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
-  /**
-   * You will need to set publicPath if you plan to deploy your site under a sub path,
-   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
-   * then publicPath should be set to "/bar/".
-   * In most cases please use '/' !!!
-   * Detail: https://cli.vuejs.org/config/#publicpath
-   */
   publicPath: '/',
   outputDir: 'dist',
   assetsDir: 'static',
@@ -37,58 +24,60 @@ module.exports = {
     overlay: {
       warnings: false,
       errors: true
-    },
-    //before: require('./mock/mock-server.js')
-    // proxy: {
-    //   '/authority/getRecursionMenu': {
-    //     target: 'http://192.168.1.201:9501',
-    //     changeOrigin: true,
-    //     logLevel: 'debug',
-    //     onProxyReq: (proxyReq) => {
-    //       proxyReq.setHeader('Origin', 'http://192.168.1.201:8099');
-    //       console.log('Origin header set to http://192.168.1.201:8099');
-    //     },
-    //     pathRewrite: { '^http://192.168.1.201:9501': '' } // 重写完整路径
-    //   }
-    // }
+    }
+    // 如有需要，可在此处配置代理
   },
-  configureWebpack: {
-    // provide the app's title in webpack's name field, so that
-    // it can be accessed in index.html to inject the correct title.
-    name: name,
-    resolve: {
-      alias: {
-        '@': resolve('src')
-      }
-    },
-    plugins: [
+  configureWebpack: config => {
+    const plugins = [
       new webpack.ProvidePlugin({
         'window.Quill': 'quill/dist/quill.js',  // 确保 Quill 在全局作用域内可用
-        Quill: 'quill/dist/quill.js'  // 手动引入 Quill
+        Quill: 'quill/dist/quill.js'            // 手动引入 Quill
       })
     ]
+
+    if (process.env.NODE_ENV === 'production') {
+      console.log('正在执行Gzip极限压缩！')
+      // 在生产环境中加入 Gzip 压缩插件
+      plugins.push(
+        new CompressionWebpackPlugin({
+          filename: '[path].gz[query]',
+          algorithm: 'gzip',
+          test: /\.(js|css|html|svg)$/, // 需要压缩的文件类型
+          threshold: 10240, // 大于10KB的文件才进行压缩
+          minRatio: 0.8     // 压缩比低于0.8才进行压缩
+        })
+      )
+    }
+
+    return {
+      name: name,
+      resolve: {
+        alias: {
+          '@': resolve('src')
+        }
+      },
+      plugins
+    }
   },
   chainWebpack(config) {
-    // it can improve the speed of the first screen, it is recommended to turn on preload
-    // it can improve the speed of the first screen, it is recommended to turn on preload
+    // 预加载配置
     config.plugin('preload').tap(() => [
       {
         rel: 'preload',
-        // to ignore runtime.js
-        // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
         fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
         include: 'initial'
       }
     ])
 
-    // when there are many pages, it will cause too many meaningless requests
+    // 删除 prefetch 插件，减少无用请求
     config.plugins.delete('prefetch')
 
-    // set svg-sprite-loader
+    // 设置 svg-sprite-loader
     config.module
       .rule('svg')
       .exclude.add(resolve('src/icons'))
       .end()
+
     config.module
       .rule('icons')
       .test(/\.svg$/)
@@ -101,44 +90,39 @@ module.exports = {
       })
       .end()
 
-    config
-      .when(process.env.NODE_ENV !== 'development',
-        config => {
-          config
-            .plugin('ScriptExtHtmlWebpackPlugin')
-            .after('html')
-            .use('script-ext-html-webpack-plugin', [{
-            // `runtime` must same as runtimeChunk name. default is `runtime`
-              inline: /runtime\..*\.js$/
-            }])
-            .end()
-          config
-            .optimization.splitChunks({
-              chunks: 'all',
-              cacheGroups: {
-                libs: {
-                  name: 'chunk-libs',
-                  test: /[\\/]node_modules[\\/]/,
-                  priority: 10,
-                  chunks: 'initial' // only package third parties that are initially dependent
-                },
-                elementUI: {
-                  name: 'chunk-elementUI', // split elementUI into a single package
-                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
-                },
-                commons: {
-                  name: 'chunk-commons',
-                  test: resolve('src/components'), // can customize your rules
-                  minChunks: 3, //  minimum common number
-                  priority: 5,
-                  reuseExistingChunk: true
-                }
-              }
-            })
-          // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
-          config.optimization.runtimeChunk('single')
+    config.when(process.env.NODE_ENV !== 'development', config => {
+      config
+        .plugin('ScriptExtHtmlWebpackPlugin')
+        .after('html')
+        .use('script-ext-html-webpack-plugin', [{
+          inline: /runtime\..*\.js$/
+        }])
+        .end()
+
+      config.optimization.splitChunks({
+        chunks: 'all',
+        cacheGroups: {
+          libs: {
+            name: 'chunk-libs',
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10,
+            chunks: 'initial' // 仅打包初始依赖的第三方
+          },
+          elementUI: {
+            name: 'chunk-elementUI', // 将 elementUI 单独拆分
+            priority: 20,
+            test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // 为适应 cnpm
+          },
+          commons: {
+            name: 'chunk-commons',
+            test: resolve('src/components'), 
+            minChunks: 3, 
+            priority: 5,
+            reuseExistingChunk: true
+          }
         }
-      )
+      })
+      config.optimization.runtimeChunk('single')
+    })
   }
 }