1.0.19npm版本应用测试

babel.config.js

@@ -20,6 +20,7 @@ module.exports = {
   plugins: [
     // 可以添加其他Babel插件
     '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-optional-chaining',
     '@babel/plugin-transform-runtime'
   ],
 };

package.json

@@ -8,13 +8,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@zhicheng1012/zhicheng-components": "^1.0.18",
     "axios": "^1.8.3",
-    "core-js": "^3.40.0",
-    "element-ui": "^2.15.14",
+    "core-js": "3.40.0",
+    "element-ui": "2.15.14",
     "lottie-web": "^5.12.2",
     "qrcode": "^1.5.4",
     "regenerator-runtime": "^0.14.1",
-    "vue": "^2.6.14",
+    "vue": "2.6.14",
     "vue-clickaway": "^2.2.2",
     "vue-router": "^3.5.1",
     "vuedraggable": "^2.24.3",
@@ -37,6 +39,12 @@
     "eslint-plugin-vue": "^8.0.3",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
-    "vue-template-compiler": "^2.6.14"
+    "vue-loader": "15.9.8",
+    "vue-template-compiler": "2.6.14"
+  },
+  "resolutions": {
+    "core-js": "3.40.0",
+    "vue": "2.6.14",
+    "vue-template-compiler": "2.6.14"
   }
 }

src/App.vue

@@ -31,7 +31,7 @@
 import SliderMenu from '@/components/SliderMenu.vue';
 import { mapState } from 'vuex';
 import Header from './components/Header.vue';
-import Breadcrumb from './components/Breadcrumb.vue';
+// import Breadcrumb from './components/Breadcrumb.vue';
 // import loadingAnimation from '@/assets/loadingAni.json' // 导入JSON文件
 import GlobalLoading from '@/components/GlobalLoading1.vue'
 import SliderScond from '@/components/SliderScond.vue'
@@ -49,7 +49,7 @@ export default {
     SliderMenu,
     // Footer,
     Header,
-    Breadcrumb
+    // Breadcrumb
   },
   computed: {
     ...mapState(['showSidebar','showSecondSide','secondMenu','showHeader','slidermenu','customize']) // 从Vuex映射showSidebar状态到组件的计算属性中

src/components/GuipTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-table ref="guiptable" v-bind="$attrs" :data="tableData"  v-on="$listeners" :border="border" @selection-change="handleSelectionChange"
+    <el-table  class="guip-table" ref="guiptable" v-bind="$attrs" :data="tableData"  v-on="$listeners" :border="border" @selection-change="handleSelectionChange"
       :style="{ width: width ? width : '100%', height: height ? height : '100%' }" v-loading="loading">
       <!-- 多选 -->
       <template v-if="multiple">
@@ -82,29 +82,31 @@ export default {
   }
 }
 </script>
-<style scoped>
-.custom-empty {
+<style scoped lang="scss">
+.guip-table{
+  .custom-empty {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
-}
+  }
   
-.empty-image {
+  .empty-image {
     width: 160px;
     height: 160px;
-}
+  }
   
-.empty-text {
+  .empty-text {
     color: #626573;
     letter-spacing: 0.08em;
     height: 18px;
     line-height: 18px;
-}
-.el-empty{
+  }
+  .el-empty{
     padding: 0;
+  }
 }
-::v-deep .el-empty__description{
+.guip-table ::v-deep .el-empty__description{
   line-height: 20px;
   margin-top: 0;
 }

src/components/HoverButton.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import SvgIcon1 from './SvgIcon1.vue';
+// import SvgIcon1 from './SvgIcon1.vue';
 
 export default {
   name: 'HoverButton',
@@ -113,7 +113,7 @@ export default {
     }
   },
   components:{
-    SvgIcon1
+    // SvgIcon1
   },
   data() {
     return {

src/components/SetLeftMenu.vue

@@ -58,6 +58,7 @@ export default {
   },
   mounted() {
     this.activeFloor = this.menuList[this.curIndex]?.list?.[0]?.desc;
+    console.log(this.activeFloor,'this.activeFloor=====');
     this.componentsName = this.menuList[this.curIndex]?.list?.[0]?.componentsName;
     this.$nextTick(() => {
       // 更可靠的获取滚动容器方式

src/components/SliderMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <transition :name="customize ? '' : 'menu-collapse'">
     <el-menu v-if="!customize" class="el-menu-vertical-demo custom-menu" @open="handleOpen"
-    :default-active="currentMenuItem?.index"
+    :default-active="currentMenuItem && currentMenuItem.index"
       @close="handleClose" @select="handleSelect" :collapse="isCollapse" :collapse-transition="true"
       >
       <div style="height: 100%;padding: 0 0 20px;box-sizing: border-box;">
@@ -18,7 +18,7 @@
           <el-submenu v-if="item.children"  :key="item.index" :index="item.index">
             <template slot="title">
               <SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099"
-                activeColor="#006AFF" :isActive="item.index == currentMenuItem?.index?.substring(0,1) && isCollapse" />
+                activeColor="#006AFF" :isActive="item.index == currentMenuItem && currentMenuItem[index].substring(0,1) && isCollapse" />
               <span class="title_text" >{{ item.title }}</span>
             </template>
             <el-menu-item style="padding: 0 22px 0 32px;" v-for="subItem in item.children" :key="subItem.index"
@@ -29,7 +29,7 @@
           <el-menu-item v-else :index="item.index"  :key="item.index" @click="handleSelect(item.index, [item.index], item)">
               <div class="flex">
                 <SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099"
-                  activeColor="#006AFF" :isActive="item.index == currentMenuItem?.index" />
+                  activeColor="#006AFF" :isActive="item.index == currentMenuItem[index]" />
                 <span class="title_text" slot="title">{{ item.title }}</span>
               </div>
           </el-menu-item>
@@ -43,13 +43,13 @@
 </template>
 <script>
 import SetLeftMenu from '@/components/SetLeftMenu.vue'
-import SvgIcon1 from '@/components/SvgIcon1.vue';
-import GuipToolTip from '@/components/GuipToolTip.vue';
+// import SvgIcon1 from '@/components/SvgIcon1.vue';
+// import GuipToolTip from '@/components/GuipToolTip.vue';
 export default {
   name: 'SliderMenu',
   components: {
-    SvgIcon1,
-    GuipToolTip,
+    // SvgIcon1,
+    // GuipToolTip,
     SetLeftMenu
   },
   props: {
@@ -92,7 +92,6 @@ export default {
     //   // 找到被点击的 menu 项对应的 path
     //   const allItems = this.menuData.flatMap(menu => menu.children);
     //   const targetItem = allItems.find(item => item.index === index);
-
     //   if (targetItem && this.$route.path !== targetItem.path) {
     //     this.$router.push(targetItem.path);
     //   }
@@ -269,7 +268,6 @@ export default {
 // .el-submenu .el-menu {
 //   transition: all 0.3s ease;
 // }
-
 // .el-menu--collapse .el-submenu > .el-menu {
 //   display: block !important;
 //   overflow: hidden;
@@ -278,8 +276,8 @@ export default {
 //   height: 0;
 //   transform: translateY(-10px);
 // }
-
 // .el-menu--collapse .el-submenu.is-opened > .el-menu {
 //   opacity: 0;
 //   height: 0;
-// }</style>
+// }
+</style>

src/main.js

@@ -3,10 +3,12 @@ import router from './router'
 import store from './store'
 import App from './App.vue'
 import ElementUI from 'element-ui';
+import ZhichengUI from '@zhicheng1012/zhicheng-components'
 import request from "./utils/request";
-import 'element-ui/lib/theme-chalk/index.css';
-import './style/theme/index.css'
-import './style/theme/common.scss'
+// import 'element-ui/lib/theme-chalk/index.css';
+// import './style/theme/index.css' 
+// import './style/theme/common.scss'
+import '@zhicheng1012/zhicheng-components/dist/css/zhicheng-components.css';
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import '@/assets/css/fonts.css';
@@ -24,6 +26,7 @@ Vue.config.productionTip = false;
 // 请求
 Vue.prototype.$http = request;
 Vue.use(ElementUI);
+Vue.use(ZhichengUI)
 Vue.use(GuipMessage)
 Vue.use(clipboard);
 

src/router/index.js

@@ -69,7 +69,7 @@ const routes = [{
     component: () => import( /* webpackChunkName: "ui" */ '../views/elementGroups.vue'),
     meta: {
       title: '公共组件示例',
-      hideBreadcrumb: true, // 一级页面不显示面包屑
+      // hideBreadcrumb: true, // 一级页面不显示面包屑
       // breadcrumbParent:'首页'
     }
   },

src/store/index.js

@@ -619,3 +619,5 @@ export default new Vuex.Store({
 
   modules: {}
 })
+
+

src/style/theme/index.css

@@ -27431,7 +27431,9 @@ border-color:#006AFF !important;
 }
 
 .el-empty__description {
-    margin-top: 20px
+    /* margin-top: 20px */
+    line-height: 20px;
+    margin-top: 0;
 }
 
 .el-empty__description p {

src/views/agent/siteBaseSetting.vue

@@ -488,6 +488,7 @@ export default {
     },
     created() {
         store.commit('SET_CUSTOMIZE', true);
+        store.commit('SET_BREADRIGHTTEXT', '了卡斯蒂略了解了');
         store.commit('SET_SLIDER_MENU', 'siteSettingData');
     },
     mounted() {

src/views/agent/siteList.vue

@@ -109,7 +109,7 @@
 
 <script>
 
-import GuipTable from '@/components/GuipTable.vue';
+// import GuipTable from '@/components/GuipTable.vue';
 import SvgIcon from '@/components/SvgIcon.vue';
 import GuipSelect from '@/components/GuipSelect.vue';
 import GuipButton from '@/components/GuipButton.vue';
@@ -120,7 +120,7 @@ import HoverButton from '@/components/HoverButton.vue'
 export default {
     name: 'siteList',
     components: {
-        GuipTable,
+        // GuipTable,
         SvgIcon,
         GuipSelect,
         GuipButton,

src/views/elementGroups.vue

@@ -28,7 +28,6 @@
             </PromptText>
 
             
-            
             <div class="ele-item">
                 <label for="">实时预览外层嵌套</label>
                 <!-- 默认 显示电脑端、手机端 -->
@@ -490,6 +489,7 @@
                         </template>
                     </CustomDropdown>
                 </div>
+                <SvgIcon1 :iconPath="require(`@/assets/menu/home-bread.svg`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"/>
 
                 <el-button type="primary" @click="submitForm">Submit</el-button>
 
@@ -594,39 +594,40 @@ import { rules } from "../assets/vabForm";
 import CustomDropdown from '@/components/CustomDropdown.vue';
 import GuipSwitch from '@/components/GuipSwitch.vue';
 import GuipDialog from '@/components/GuipDialog.vue';
-import GuipRadio from '@/components/GuipRadio.vue';
-import GuipButton from '@/components/GuipButton.vue';
-import GuipInput from '@/components/GuipInput.vue';
-import GuipSelect from '@/components/GuipSelect.vue';
-import GuipTable from '@/components/GuipTable.vue';
+// import GuipRadio from '@/components/GuipRadio.vue';
+// import GuipButton from '@/components/GuipButton.vue';
+// import { GuipButton } from '@zhicheng1012/zhicheng-components'
+// import GuipInput from '@/components/GuipInput.vue';
+// import GuipSelect from '@/components/GuipSelect.vue';
+// import GuipTable from '@/components/GuipTable.vue';
 import GuipTextarea from '@/components/GuipTextarea.vue'
-import GuipToolTip from '@/components/GuipToolTip.vue'
+// import GuipToolTip from '@/components/GuipToolTip.vue'
 import HoverButton from '@/components/HoverButton.vue'
 import GuipFormItem from '@/components/GuipFormItem.vue'
-import SvgIcon from '@/components/SvgIcon.vue';
-import PromptText from "@/components/PromptText.vue";
-import DevicePreview from "@/components/PreviewTab.vue";
+// import SvgIcon from '@/components/SvgIcon.vue';
+// import PromptText from "@/components/PromptText.vue";
+// import DevicePreview from "@/components/PreviewTab.vue";
 import domainBind from "@/components/domainBind.vue";
 
 
 export default {
     name: 'HomeView',
     components: {
+        // PromptText,
         domainBind,
-        PromptText,
         GuipTextarea,
-        GuipTable,
+        // GuipTable,
         GuipSwitch,
         GuipDialog,
-        GuipRadio,
-        GuipButton,
-        GuipInput,
-        GuipSelect,
-        GuipToolTip,
+        // GuipRadio,
+        // GuipButton,
+        // GuipInput,
+        // GuipSelect,
+        // GuipToolTip,
         HoverButton,
-        SvgIcon,
+        // SvgIcon,
         GuipFormItem,
-        DevicePreview,
+        // DevicePreview,
         CustomDropdown
     },
     data() {
@@ -1270,6 +1271,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+
 .elementWrap {
     /* width: 100%; */
     padding: 30px 40px;

vue.config.js

@@ -1,7 +1,8 @@
-const path = require('path');
-const TerserPlugin = require('terser-webpack-plugin');
+
+const path = require('path')
+const TerserPlugin = require('terser-webpack-plugin')
+
 module.exports = {
-  // publicPath: '/new/',
   devServer: {
     proxy: {
       '/supernew': {
@@ -23,7 +24,7 @@ module.exports = {
           use: {
             loader: 'babel-loader',
           },
-        },
+        }
       ],
     },
     optimization: {
@@ -31,10 +32,10 @@ module.exports = {
         new TerserPlugin({
           terserOptions: {
             format: {
-              comments: /^\**!|@preserve|@license|@cc_on/i // 保留特定注释
+              comments: /^\**!|@preserve|@license|@cc_on/i
             }
           },
-          extractComments: false // 不提取注释到单独文件
+          extractComments: false
         })
       ]
     },
@@ -42,10 +43,24 @@ module.exports = {
       filename: '[name].[contenthash:8].js',
       chunkFilename: '[name].[contenthash:8].js'
     },
-    resolve:{
-      alias:{
-        '@':path.resolve(__dirname, 'src/')
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src/')
       }
     }
   },
-};
+  chainWebpack: config => {
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .loader('vue-loader')
+      .tap(options => {
+        options.compilerOptions = {
+          ...(options.compilerOptions || {}),
+          whitespace: 'preserve',
+          preserveWhitespace: false
+        }
+        return options
+      })
+  }
+}