feat: 组件抽取

public/index.html

@@ -7,25 +7,25 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>剑鱼标讯</title>
     <% if (process.env.NODE_ENV === 'development') { %>
-      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/bootstrap.min.css" rel="stylesheet">
-      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/bootswatch.min.css" rel="stylesheet">
-      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/font.css?v=6302" rel="stylesheet">
-      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/jy.css?v=6302" rel="stylesheet">
-      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/common.css?v=6302" rel="stylesheet">
-      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/animate.css" rel="stylesheet">
-      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/unicorn.main.css" rel="stylesheet" />
-      <link href="https://jybx2-webtest.jydev.jianyu360.com/css/unicorn.grey.css" rel="stylesheet" />
-      <script src="https://jybx2-webtest.jydev.jianyu360.com/js/jquery-3.2.1.min.js?v=6302"></script>
-      <script src="https://jybx2-webtest.jydev.jianyu360.com/js/jquery.cookie.js"></script>
-      <script src="https://jybx2-webtest.jydev.jianyu360.com/js/bootstrap.min.js"></script>
+      <link ignore href="https://jybx2-webtest.jydev.jianyu360.com/css/bootstrap.min.css" rel="stylesheet">
+      <link ignore href="https://jybx2-webtest.jydev.jianyu360.com/css/bootswatch.min.css" rel="stylesheet">
+      <link ignore href="https://jybx2-webtest.jydev.jianyu360.com/css/font.css?v=6302" rel="stylesheet">
+      <link ignore href="https://jybx2-webtest.jydev.jianyu360.com/css/jy.css?v=6302" rel="stylesheet">
+      <link ignore href="https://jybx2-webtest.jydev.jianyu360.com/css/common.css?v=6302" rel="stylesheet">
+      <link ignore href="https://jybx2-webtest.jydev.jianyu360.com/css/animate.css" rel="stylesheet">
+      <link ignore href="https://jybx2-webtest.jydev.jianyu360.com/css/unicorn.main.css" rel="stylesheet" />
+      <link ignore href="https://jybx2-webtest.jydev.jianyu360.com/css/unicorn.grey.css" rel="stylesheet" />
+      <script ignore src="https://jybx2-webtest.jydev.jianyu360.com/js/jquery-3.2.1.min.js?v=6302"></script>
+      <script ignore src="https://jybx2-webtest.jydev.jianyu360.com/js/jquery.cookie.js"></script>
+      <script ignore src="https://jybx2-webtest.jydev.jianyu360.com/js/bootstrap.min.js"></script>
 
-      <link href='https://jybx2-webtest.jydev.jianyu360.com/css/reset.css?v=6302' rel="stylesheet" type="text/css"/>
-      <link href='https://jybx2-webtest.jydev.jianyu360.com/pccss/reset_pc.css' rel="stylesheet" type="text/css"/>
-      <link href='https://jybx2-webtest.jydev.jianyu360.com/css/pc.css?v=6302' rel="stylesheet"/>
-      <link href='https://jybx2-webtest.jydev.jianyu360.com/pccss/public-nav-1200.css?v=6302' rel="stylesheet" type="text/css"/>
+      <link ignore href='https://jybx2-webtest.jydev.jianyu360.com/css/reset.css?v=6302' rel="stylesheet" type="text/css"/>
+      <link ignore href='https://jybx2-webtest.jydev.jianyu360.com/pccss/reset_pc.css' rel="stylesheet" type="text/css"/>
+      <link ignore href='https://jybx2-webtest.jydev.jianyu360.com/css/pc.css?v=6302' rel="stylesheet"/>
+      <link ignore href='https://jybx2-webtest.jydev.jianyu360.com/pccss/public-nav-1200.css?v=6302' rel="stylesheet" type="text/css"/>
 
       <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> -->
-      <script src="https://www.jianyu360.com/antiRes/js/mainHook.js"></script>
+      <script ignore src="https://www.jianyu360.com/antiRes/js/mainHook.js"></script>
     <% } %>
 
     <!-- 使用CDN的CSS文件 -->

src/api/modules/index.js

@@ -14,3 +14,4 @@ export * from './customer'
 export * from './dataExport'
 export * from './workspace'
 export * from './entbase'
+export * from './public'

src/api/modules/public.js

@@ -0,0 +1,10 @@
+import request from '@/api'
+
+export function getCommonAdList (data) {
+  return request({
+    baseURL: '/publicapply',
+    url: '/free/getJyAdList',
+    method: 'POST',
+    data
+  })
+}

src/store/workspace.js

@@ -8,6 +8,7 @@ import profile from './workspace/business-profile'
 import projectFollow from './workspace/project-follow'
 import entFollow from './workspace/ent-follow'
 import dataReport from './workspace/data-report'
+import asideOthers from './workspace/aside-others'
 
 export default {
   namespaced: true,
@@ -44,6 +45,7 @@ export default {
     projectFollow,
     entFollow,
     dataReport,
+    asideOthers,
     customerWatcher
   }
 }

src/store/workspace/aside-others.js

@@ -0,0 +1,59 @@
+import { getCommonAdList } from '@/api/modules'
+
+export default {
+  namespaced: true,
+  state: () => ({
+    loading: true,
+    loaded: false,
+    listMap: {}
+  }),
+  mutations: {
+    changeList (state, listMap = {}) {
+      if (listMap && Object.keys(listMap).length) {
+        Object.assign(state.listMap, listMap)
+      }
+    },
+    changeLoading (state, f = false) {
+      state.loading = f
+    },
+    changeLoaded (state, f = false) {
+      state.loaded = f
+    }
+  },
+  actions: {
+    async getList ({ commit }, payload) {
+      try {
+        commit('changeLoading', true)
+        commit('changeLoaded', false)
+        const { data = {}, error_code: code } = await getCommonAdList(payload)
+        if (code === 0 && data) {
+          const { List = [] } = data
+          const list = List.map(v => {
+            // const visited = this.pathVisited(
+            //   this.createPathItem(
+            //     '/article/content/*.html',
+            //     `id=${v.sid}`
+            //   )
+            // )
+            return {
+              ...v,
+              // visited,
+              _id: v.sid,
+              title: v.title,
+              unread: false,
+              time: v.l_lastpushtime ? v.l_lastpushtime * 1000 : 0
+            }
+          })
+          commit('changeList', list)
+        }
+        commit('changeLoading', false)
+        commit('changeLoaded', true)
+        return data || []
+      } catch (error) {
+        commit('changeLoading', false)
+        commit('changeLoaded', true)
+        console.log(error)
+      }
+    }
+  }
+}

src/views/workspace/components/AsideOthers.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="aside-others-container">
+    <AdContainer />
+    <div class="production-list">
+      <AdContainer />
+      <AdContainer />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+import AdContainer from '../ui/AdContainer'
+
+export default {
+  name: 'AsideOthers',
+  components: {
+    AdContainer
+  },
+  computed: {
+    ...mapState('workspace/asideOthers', [
+      'myLocationInEnt',
+      'overviewList'
+    ])
+  },
+  created () {
+    this.getEntInfo()
+  },
+  methods: {
+    ...mapActions('workspace/profile', [
+      'getEntInfo'
+    ]),
+    seeMore () {
+      window.open('/entpc/newBus/board?m1=3&m2=0')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/workspace/components/BusinessProfile.vue

@@ -22,7 +22,7 @@
 <script>
 import { mapActions, mapGetters } from 'vuex'
 import { Icon } from 'element-ui'
-import WorkspaceCard from './WorkspaceCard'
+import WorkspaceCard from '../ui/WorkspaceCard'
 
 export default {
   name: 'BusinessProfile',

src/views/workspace/components/CommonUse.vue

@@ -34,7 +34,7 @@
 <script>
 import { mapState, mapMutations, mapActions } from 'vuex'
 import { Dialog } from 'element-ui'
-import WorkspaceCard from './WorkspaceCard'
+import WorkspaceCard from '../ui/WorkspaceCard'
 import SelectorCard from '@/components/selector/SelectorCard'
 import Transfer from '@/components/work-desktop/Transfer'
 

src/views/workspace/components/CustomerWatcher.vue

@@ -14,7 +14,7 @@
 
 <script>
 import { mapState, mapActions } from 'vuex'
-import ListCard from './ListCard'
+import ListCard from '../ui/ListCard'
 
 export default {
   name: 'CustomerWatcher',

src/views/workspace/components/DataReport.vue

@@ -57,7 +57,7 @@
 
 <script>
 import { mapState, mapActions } from 'vuex'
-import ListCard from './ListCard'
+import ListCard from '../ui/ListCard'
 import Empty from '@/components/common/Empty.vue'
 import { dateFormatter } from '@/utils/'
 

src/views/workspace/components/EntFollow.vue

@@ -17,7 +17,7 @@
 
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex'
-import ListCard from './ListCard'
+import ListCard from '../ui/ListCard'
 
 export default {
   name: 'EntFollow',

src/views/workspace/components/MessageTips.vue

@@ -21,7 +21,7 @@
 <script>
 import { mapState, mapActions } from 'vuex'
 import { Icon } from 'element-ui'
-import WorkspaceCard from './WorkspaceCard'
+import WorkspaceCard from '../ui/WorkspaceCard'
 
 export default {
   name: 'MessageTips',

src/views/workspace/components/MyCollections.vue

@@ -15,7 +15,7 @@
 
 <script>
 import { mapState, mapActions } from 'vuex'
-import ListCard from './ListCard'
+import ListCard from '../ui/ListCard'
 
 export default {
   name: 'MyCollections',

src/views/workspace/components/MyCustomer.vue

@@ -13,7 +13,7 @@
 
 <script>
 import { mapState, mapActions } from 'vuex'
-import ListCard from './ListCard'
+import ListCard from '../ui/ListCard'
 
 export default {
   name: 'MyCustomer',

src/views/workspace/components/ProjectFollow.vue

@@ -17,7 +17,7 @@
 
 <script>
 import { mapState, mapActions } from 'vuex'
-import ListCard from './ListCard'
+import ListCard from '../ui/ListCard'
 
 export default {
   name: 'ProjectFollow',

src/views/workspace/components/SubscribeList.vue

@@ -22,7 +22,7 @@
 
 <script>
 import { mapState, mapActions } from 'vuex'
-import ListCard from './ListCard'
+import ListCard from '../ui/ListCard'
 
 export default {
   name: 'SubscribeList',

src/views/workspace/dashboard.vue

@@ -20,7 +20,8 @@
       </div>
     </el-main>
     <el-aside width="396px">
-      <MessageTips></MessageTips>
+      <MessageTips class="aside-module"></MessageTips>
+      <AsideOthers class="aside-module"></AsideOthers>
     </el-aside>
   </el-container>
 </template>
@@ -38,6 +39,7 @@ import MyCollections from './components/MyCollections.vue'
 import ProjectFollow from './components/ProjectFollow.vue'
 import EntFollow from './components/EntFollow.vue'
 import DataReport from './components/DataReport.vue'
+import AsideOthers from './components/AsideOthers.vue'
 export default {
   name: 'WorkspaceDashboard',
   components: {
@@ -53,6 +55,7 @@ export default {
     MyCollections,
     ProjectFollow,
     DataReport,
+    AsideOthers,
     EntFollow
   },
   computed: {
@@ -73,7 +76,8 @@ export default {
   padding: 0;
   margin-right: 16px;
 }
-.main-module {
+.main-module,
+.aside-module {
   &:not(:first-of-type) {
     margin-top: 16px;
   }

src/views/workspace/ui/AdContainer.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="ad-container">
+    <el-carousel class="carousel-list" :autoplay="true" :interval="interval" :arrow="arrow" :height="height">
+      <el-carousel-item v-for="(item, index) in list" :key="index">
+        <h3>{{ item }}</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+import { Carousel, CarouselItem } from 'element-ui'
+export default {
+  name: 'AdContainer',
+  components: {
+    [Carousel.name]: Carousel,
+    [CarouselItem.name]: CarouselItem
+  },
+  props: {
+    height: {
+      type: String,
+      default: ''
+    },
+    autoplay: {
+      type: Boolean,
+      default: true
+    },
+    interval: {
+      type: Number,
+      default: 5000
+    },
+    arrow: {
+      type: String,
+      default: 'never'
+    },
+    list: {
+      type: Array,
+      default () {
+        return [
+          {
+            // link: '',
+            // pic: '',
+            // remark: ''
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+  .el-carousel__button {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: rgba(255,255,255,.6);
+    border: 1px solid rgb(255,255,255,.6);
+  }
+  .is-active .el-carousel__button {
+    background-color: rgba(255,255,255,1);
+    border: 1px solid rgb(255,255,255,1);
+  }
+  .el-carousel__container {
+    height: 136px;
+  }
+}
+</style>

src/views/workspace/ui/ArticleItem.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    class="article-item"
+    :class="{ visited }"
+    v-on="$listeners">
+    <div class="article-item-l ellipsis visited-hd">{{ title }}</div>
+    <div class="article-item-r">
+      <span class="red-dot" v-if="read"></span>
+      <span class="r-time" v-if="time">{{ dateFormatter(time, 'yyyy-MM-dd') }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { dateFormatter } from '@/utils/'
+
+export default {
+  name: 'ArticleItem',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    time: {
+      type: Number,
+      default: 0
+    },
+    read: {
+      type: Boolean,
+      default: false
+    },
+    visited: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    dateFormatter
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.article-item {
+  padding: 12px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .article-item-l {
+    margin-right: 12px;
+    font-size: 14px;
+    color: #1d1d1d;
+    line-height: 22px;
+    cursor: pointer;
+    &:hover {
+      color: #2cb7ca!important;
+    }
+  }
+  .article-item-r {
+    display: flex;
+    align-items: center;
+  }
+  .r-time {
+    margin-left: 6px;
+    font-size: 12px;
+    line-height: 20px;
+    color: #999;
+    text-align: right;
+    white-space: nowrap;
+  }
+}
+</style>

src/views/workspace/components/ListCard.vue → src/views/workspace/ui/ListCard.vue

@@ -8,18 +8,16 @@
     </slot>
     <div class="list-container" v-loading="loading">
       <slot name="default">
-        <div
+        <ArticleItem
           class="list-item"
-          :class="{ visited: item.visited, last: index === list.length - 1 }"
+          :visited="item.visited"
+          :class="{ last: index === list.length - 1 }"
+          :title="item.title"
+          :time="item.time"
+          :read="item.unread && item.unread !== 0"
           v-for="(item, index) in list"
           @click="clickListItem(item)"
-          :key="index">
-          <div class="list-item-l ellipsis visited-hd">{{ item.title }}</div>
-          <div class="list-item-r">
-            <span class="red-dot" v-if="item.unread && item.unread !== 0"></span>
-            <span class="r-time" v-if="item.time">{{ dateFormatter(item.time, 'yyyy-MM-dd') }}</span>
-          </div>
-        </div>
+          :key="index" />
         <div class="empty-wrapper" v-show="list.length === 0 && loaded">
           <Empty class="empty-mini" direction="row" :mtb60="false">
             <slot name="empty-content">暂无数据</slot>
@@ -32,6 +30,7 @@
 
 <script>
 import WorkspaceCard from './WorkspaceCard'
+import ArticleItem from './ArticleItem'
 import Empty from '@/components/common/Empty.vue'
 import { dateFormatter } from '@/utils/'
 
@@ -39,6 +38,7 @@ export default {
   name: 'ListCard',
   components: {
     Empty,
+    ArticleItem,
     WorkspaceCard
   },
   props: {