实现首页KAM Mapping功能

src/views/Layout/src/components/Header/HeaderView.vue

@@ -10,6 +10,7 @@ import { useThemeStore } from '@/stores/modules/theme'
 import { useNotificationMessage } from '@/stores/modules/notificationMessage'
 import NotificationDrawer from './components/NotificationDrawer.vue'
 import TrainingCard from './components/TrainingCard.vue'
+import KAMMapping from './components/KAMMapping.vue'
 import emitter from '@/utils/bus'
 
 const notificationMsgStore = useNotificationMessage()
@@ -233,6 +234,7 @@ const handleDemoVideo = () => {
           <span style="margin-top: -1px" class="font_family icon-icon_search_b"></span>
         </template>
       </el-input>
+      <KAMMapping></KAMMapping>
       <div class="notice-icon" v-if="userStore.isLogin">
         <span v-if="notificationMsgStore.hasNewMsg" class="unread-tip-icon"></span>
         <el-button

src/views/Layout/src/components/Header/components/KAMMapping.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+const customer = ref('')
+const isShowMapping = ref(true)
+const visible = ref(false)
+const myPopover = ref()
+
+const customerList = ref([
+  'alice@dummy customer.com',
+  'bob@dummy customer.com',
+  'charlie@dummy customer.com',
+  'dave@dummy customer.com'
+])
+
+const changeShowMapping = () => {
+  customer.value = ''
+}
+const changeCustomer = (cust: string) => {
+  customer.value = cust
+  myPopover.value?.hide()
+}
+</script>
+
+<template>
+  <div
+    class="kam-mapping-container"
+    :class="{ focus: visible }"
+    :style="{ 'justify-content': !isShowMapping ? 'center' : 'space-between' }"
+  >
+    <span style="margin-right: 5px" v-if="!isShowMapping">View as Customer</span>
+
+    <el-popover
+      @show="visible = true"
+      @hide="visible = false"
+      v-else
+      ref="myPopover"
+      trigger="click"
+      placement="bottom-start"
+      width="400px"
+      :hide-after="0"
+      popper-style="border-radius: 12px"
+    >
+      <template #reference>
+        <div class="select-customer">
+          <span
+            :style="{ color: customer ? 'var(--color-neutral-1)' : 'var(--color-neutral-3)' }"
+            >{{ customer || 'Select customer' }}</span
+          >
+          <span class="font_family icon-icon_dropdown_b"></span></div
+      ></template>
+      <div style="padding: 8px">
+        <el-input class="customer-input" placeholder="Search customer">
+          <template #suffix>
+            <span class="font_family icon-icon_search_b"></span>
+          </template>
+        </el-input>
+        <div class="select-customer-list">
+          <div
+            class="customer-item"
+            v-for="cust in customerList"
+            :key="cust"
+            @click="changeCustomer(cust)"
+          >
+            {{ cust }}
+          </div>
+        </div>
+      </div>
+    </el-popover>
+    <el-switch v-model="isShowMapping" @change="changeShowMapping" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.kam-mapping-container {
+  display: flex;
+  align-items: center;
+  width: 280px;
+  height: 32px;
+  margin-left: 20px;
+  padding: 0 8px;
+  border-radius: 32px;
+  line-height: 32px;
+  border: 1px solid var(--color-email-border);
+  background-color: var(--color-table-header-bg);
+  &.focus {
+    background-color: var(--color-mode) !important;
+    border-color: var(--color-theme) !important;
+  }
+}
+.select-customer {
+  cursor: pointer;
+}
+.customer-input {
+  height: 32px;
+  padding: 0 8px;
+  margin-bottom: 8px;
+  :deep(.el-input__wrapper) {
+    border-radius: 6px;
+  }
+}
+.select-customer-list {
+  height: 160px;
+  .customer-item {
+    height: 40px;
+    padding: 0 8px;
+    line-height: 40px;
+    &:hover {
+      background-color: var(--color-mune-active-bg);
+      border-radius: 6px;
+      cursor: pointer;
+    }
+  }
+}
+</style>