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/connect/components/FormDialog.vue

@@ -79,7 +79,7 @@ const handleStepTwoNext = function () {
     class="connect-form"
     :title="props.data?.id ? '编辑链接' : '新建链接'"
     :close-on-click-modal="false"
-    width="800px"
+    width="1050px"
     @update:modelValue="$emit('update:modelValue')"
   >
     <el-tabs v-model="activeName" class="demo-tabs">

src/modules/home/views/Index.vue

 <script setup lang="ts">
 import { getExperimentData, getMembersList, getEventList } from '../api'
+import Icon from '@/components/ConnectionIcon.vue'
+// import { useMapStore } from '@/stores/map'
 
 // 左边展示数据
 let leftData = $ref<{
@@ -15,7 +17,7 @@ getExperimentData().then(res => {
 })
 
 // 最近活跃客户
-let userList = $ref<{ name: string; id: string; isActive: boolean }[]>()
+let userList = $ref<{ name: string; id: string; isActive: boolean; gender: string }[]>()
 getMembersList().then(res => {
   userList = res.data.map((element: any, index: number) => {
     element.isActive = index === 0
@@ -43,6 +45,11 @@ const handleUser = (item: any) => {
 const getDate = function (date: string) {
   return parseInt(date.slice(date.indexOf(' '), date.indexOf(' ') + 3)) > 12 ? '下午' : '上午'
 }
+
+// const experimentTypeList = useMapStore().getMapValuesByKey('experiment_connection_type')
+// const getIcon = function (id: any) {
+//   return experimentTypeList.find((item: any) => item.id === id)?.value as string
+// }
 </script>
 
 <template>
@@ -81,7 +88,14 @@ const getDate = function (date: string) {
             v-for="item in userList"
             @click="handleUser(item)"
           >
-            <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/dml_boy.png" />
+            <img
+              :src="
+                item?.gender === '1'
+                  ? 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/dml_boy.png'
+                  : 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/assa/dml_girl.png'
+              "
+              alt=""
+            />
             <div class="name">{{ item.name }}</div>
           </div>
         </div>
@@ -93,9 +107,11 @@ const getDate = function (date: string) {
               {{ 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>
+            <Icon :name="item.connection_type" w="30" h="30"></Icon>
             <div class="event">
-              在<span>"{{ item.connection_name }}"</span> 上 <span>"{{ item.event_name }}"</span>
+              <Icon class="icon" :name="item.type" :multicolour="true" w="24" h="24"></Icon>
+              在
+              <span>"{{ item.connection_name }}"</span> 上 <span>"{{ item.event_name }}"</span>
             </div>
           </div>
         </div>
@@ -174,6 +190,10 @@ const getDate = function (date: string) {
   align-items: center;
   // margin-bottom: 20px;
   flex-wrap: wrap;
+  .event {
+    display: flex;
+    align-items: center;
+  }
   .time {
     color: #ccc;
   }

src/modules/trip/template/components/BindConnection.vue

@@ -54,10 +54,28 @@ function handleSave() {
         v-for="item in connectionList"
         :key="item.id"
         :class="{ 'is-active': isActive(item) }"
-        @click="toggleSelection(item)">
+        @click="toggleSelection(item)"
+      >
         <el-checkbox @change="toggleSelection(item)" :model-value="isActive(item)" />
-        <div class="connection-item__icon"><ConnectionIcon :name="item.type + ''" /></div>
-        <p>{{ item.name }}</p>
+        <div :class="isActive(item) ? 'connection-item__icon active' : 'connection-item__icon'">
+          <ConnectionIcon
+            style="transform: translateY(3px)"
+            v-if="isActive(item)"
+            color="#fff"
+            :name="item.type + ''"
+            w="20"
+            h="20"
+          />
+          <ConnectionIcon
+            style="transform: translateY(3px)"
+            v-else
+            :multicolour="true"
+            :name="item.type + ''"
+            w="20"
+            h="20"
+          />
+        </div>
+        <p :style="`color: ${isActive(item) && '#ba143e'}`">{{ item.name }}</p>
       </div>
     </div>
     <template #footer>
@@ -70,6 +88,22 @@ function handleSave() {
 </template>
 
 <style lang="scss">
+.connection-item__icon {
+  display: flex;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
+  margin-bottom: 5px;
+  &.active {
+    background: #ba143e;
+    color: #ba143e;
+  }
+}
 .connection-list {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -85,9 +119,9 @@ function handleSave() {
   background-color: #fff;
   border: 1px dashed #bbb;
   cursor: pointer;
-  &.is-active {
-    background-color: rgb(204 247 131 / 38%);
-  }
+  // &.is-active {
+  //   background-color: rgb(204 247 131 / 38%);
+  // }
   .el-checkbox {
     position: absolute;
     left: 10px;

src/modules/user/views/Image.vue

@@ -2,7 +2,7 @@
 import { UserFilled } from '@element-plus/icons-vue'
 import { getMemberImage, getMemberFieldsList } from '../api'
 import type { MemberFieldsProp, ImageProp } from '../types'
-import Icon from '../components/Icon.vue'
+import Icon from '@/components/ConnectionIcon.vue'
 const route = useRoute()
 
 // 画像数据
@@ -89,7 +89,7 @@ const getDate = function (date: string) {
     </div>
   </AppCard>
   <div class="card-box">
-    <AppCard class="card" title="用户属性">
+    <AppCard class="card" style="overflow-y: scroll" title="用户属性">
       <div style="display: flex; justify-content: center; padding-right: 20px">
         <el-form label-suffix="：" label-width="auto">
           <el-form-item label="链接来源">{{ data?.connection_name }}</el-form-item>
@@ -148,7 +148,7 @@ const getDate = function (date: string) {
             {{ 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>
+          <Icon class="icon" :multicolour="true" :name="item.connection_type" w="20" h="20"></Icon>
           <div class="event">
             在<span>"{{ item.connection_name }}"</span> 上 <span>"{{ item.event_name }}"</span>
           </div>