update

.eslintrc-auto-import.json

@@ -115,7 +115,6 @@
     "useArrayFilter": true,
     "useArrayFind": true,
     "useArrayFindIndex": true,
-    "useArrayFindLast": true,
     "useArrayJoin": true,
     "useArrayMap": true,
     "useArrayReduce": true,

auto-imports.d.ts

-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-auto-import
+// Generated by 'unplugin-auto-import'
 export {}
 declare global {
   const $$: typeof import('vue/macros')['$$']
@@ -112,7 +109,6 @@ declare global {
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
-  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
@@ -280,5 +276,5 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+  export type { Component,ComponentPublicInstance,ComputedRef,InjectionKey,PropType,Ref,VNode } from 'vue'
 }

src/modules/home/api.ts

+import httpRequest from '@/utils/axios'
+
+// 左侧实验数据
+export function getExperimentData() {
+  return httpRequest.get('/api/lab/v1/experiment/index/index')
+}
+
+// 用户
+export function getMembersList() {
+  return httpRequest.get('/api/lab/v1/experiment/index/members')
+}
+
+// 事件
+export function getEventList(params: { member_id: string }) {
+  return httpRequest.get('/api/lab/v1/experiment/index/events', { params })
+}
\ No newline at end of file

src/modules/home/views/Index.vue

-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { getExperimentData, getMembersList, getEventList } from '../api'
+let leftData = $ref<{
+  members: string
+  tags: string
+  groups: string
+  files: string
+  itineraries: string
+  connections: string
+}>()
+
+getExperimentData().then(res => {
+  leftData = res.data
+})
+
+let userList = $ref<{ name: string; id: string; isActive: boolean }[]>()
+getMembersList().then(res => {
+  userList = res.data.map((element: any, index: number) => {
+    element.isActive = index === 0
+    return element
+  })
+  if (userList) getEvent(userList[0]?.id)
+})
+
+let eventData = $ref<{ list: any }>()
+const handleUser = (item: any) => {
+  userList?.map(item => (item.isActive = false && item))
+  item.isActive = true
+  getEvent(item.id)
+}
+
+const getEvent = function (id: string) {
+  getEventList({ member_id: id }).then(res => {
+    eventData = res.data
+  })
+}
+
+// 获取上下午
+const getDate = function (date: string) {
+  return parseInt(date.slice(date.indexOf(' '), date.indexOf(' ') + 3)) > 12 ? '下午' : '上午'
+}
+</script>
 
 <template>
-  <div></div>
+  <div class="home">
+    <div class="home-left_content">
+      <div class="content-card">
+        <AppCard class="card" title="我的客户："
+          ><p>{{ leftData?.members }}</p></AppCard
+        >
+        <AppCard class="card" style="margin: 0 10px" title="我的标签："
+          ><p>{{ leftData?.tags }}</p></AppCard
+        >
+        <AppCard class="card" title="我的群组："
+          ><p>{{ leftData?.groups }}</p></AppCard
+        >
+      </div>
+      <div class="content-card">
+        <AppCard class="card" title="我的营销资料："
+          ><p>{{ leftData?.files }}</p></AppCard
+        >
+        <AppCard class="card" style="margin: 0 10px" title="我的旅程："
+          ><p>{{ leftData?.itineraries }}</p></AppCard
+        >
+        <AppCard class="card" title="我的链接："
+          ><p>{{ leftData?.connections }}</p></AppCard
+        >
+      </div>
+      <AppCard title="当前用户旅程模板数量："><el-empty :image-size="120" /></AppCard>
+      <AppCard title="旅程转化目标分析："><el-empty :image-size="120" /></AppCard>
+    </div>
+    <div class="home-right_content">
+      <AppCard class="card" title="最近活跃用户跟踪">
+        <div class="content-user">
+          <div
+            :class="item.isActive ? 'content-user_item active' : 'content-user_item'"
+            v-for="item in userList"
+            @click="handleUser(item)"
+          >
+            <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/dml_boy.png" />
+            <div class="name">{{ item.name }}</div>
+          </div>
+        </div>
+        <el-empty v-if="!eventData?.list || !eventData?.list.length" description="暂无数据" :image-size="80" />
+        <div class="event-box" v-for="item in eventData?.list" v-else>
+          <div class="date">{{ item.updated_time?.slice(0, item.updated_time.indexOf(' ')) }}</div>
+          <div class="event-content">
+            <div class="time">
+              {{ item.updated_time?.slice(item.updated_time.indexOf(' '), item.updated_time.length - 3) }}
+              {{ getDate(item.updated_time) }}
+            </div>
+            <Icon class="icon" :name="item.connection_type" w="30" h="30"></Icon>
+            <div class="event">
+              在<span>"{{ item.connection_name }}"</span> 上 <span>"{{ item.event_name }}"</span>
+            </div>
+          </div>
+        </div>
+      </AppCard>
+    </div>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.home {
+  display: flex;
+  .home-left_content {
+    flex: 1;
+    .content-card {
+      display: flex;
+      margin-bottom: 10px;
+      .card {
+        flex: 1;
+        margin: 0;
+        p {
+          line-height: 100px;
+          text-align: center;
+          font-size: 28px;
+          color: #aa1941;
+        }
+      }
+    }
+  }
+  .home-right_content {
+    width: 40%;
+    margin-left: 10px;
+    .card {
+      height: 100%;
+      .content-user {
+        background: #efefef;
+        padding: 20px;
+        border-radius: 5px;
+        display: flex;
+        flex-wrap: wrap;
+        .content-user_item {
+          width: 60px;
+          // background-color: #fff;
+          padding: 10px;
+          border-radius: 10px;
+          margin-right: 12px;
+          cursor: pointer;
+          &.active {
+            background-color: #fff;
+          }
+        }
+        img {
+          width: 50px;
+          height: 50px;
+          margin: 0 auto;
+          display: block;
+        }
+        .name {
+          text-align: center;
+          font-size: 14px;
+          margin-top: 10px;
+        }
+      }
+    }
+  }
+}
+.event-box {
+  border-bottom: 1px solid #ccc;
+  padding: 20px 0 5px;
+  .date {
+    font-size: 14px;
+  }
+}
+.event-content {
+  display: flex;
+  font-size: 12px;
+  align-items: center;
+  // margin-bottom: 20px;
+  flex-wrap: wrap;
+  .time {
+    color: #ccc;
+  }
+  .icon {
+    margin: 0 5px;
+  }
+  span {
+    color: #ba143e;
+    font-weight: bold;
+  }
+}
+</style>

src/modules/trip/template/views/Setting.vue

@@ -96,7 +96,7 @@ function handleConfig() {
         </el-row>
       </el-form>
     </el-card>
-    <TripFlow v-model="elements" action="edit" role="teacher" :templateType="detail?.type" :score="score">
+    <TripFlow v-model="elements" action="view" role="teacher" :templateType="detail?.type" :score="score">
       <template #left-panel>
         <TripFlowSidebar :connectionIds="connectionIds" />
       </template>