ui md

src/assets/icons/icon-logout.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15.0000703px" height="15px" viewBox="0 0 15.0000703 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-退出登录</title>
+    <g id="SOP管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="10.2-教务处SOP管理-服务单元" transform="translate(-97.25, -729.5)">
+            <g id="icon-退出登录" transform="translate(96, 727)">
+                <rect id="login-(Background)" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <path d="M7.78957844,6.5677619 L8.67346227,5.68387866 L12.6360205,9.64644619 C12.8312824,9.84170855 12.8312821,10.158291 12.6360197,10.353553 C12.6360197,10.353553 12.6360197,10.353553 12.6360196,10.353553 L8.67346168,14.3161011 L8.67346168,14.3161011 L7.78957844,13.4322178 L10.5968088,10.6249875 L1.25,10.624969 L1.25,9.37496841 L10.5968034,9.37498748 L7.78957844,6.5677619 Z M5.00007033,3.75 L15.0000703,3.75 L15.0000703,16.25 L5.00007033,16.25 L5.00007033,13.75 L3.75007033,13.75 L3.75007033,16.875 C3.75007033,17.2201777 4.02989268,17.5 4.37507063,17.5 L15.6250703,17.5 C15.970248,17.5 16.2500703,17.2201777 16.2500703,16.875 L16.2500703,3.125 C16.2500703,2.77982205 15.970248,2.5 15.6250703,2.5 L4.37507033,2.5 C4.02989239,2.5 3.75007033,2.77982235 3.75007033,3.1250003 L3.75007033,6.25 L5.00007033,6.25 L5.00007033,3.75 Z" id="login" fill="#262626"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/icon-modify-pwd.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="13.75px" height="15.6364238px" viewBox="0 0 13.75 15.6364238" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-修改密码</title>
+    <g id="SOP管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="10.2-教务处SOP管理-服务单元" transform="translate(-99.125, -686.8636)">
+            <g id="icon-修改密码" transform="translate(96, 685)">
+                <rect id="lock-on-(Background)" opacity="0" x="0" y="0" width="20" height="20"></rect>
+                <path d="M7.5,13.7499797 L12.5,13.7499797 L12.5,12.4999797 L7.5,12.4999797 L7.5,13.7499797 Z M5.625,7.49997735 L3.75,7.49997735 C3.40482205,7.49997735 3.125,7.7797997 3.125,8.12497735 L3.125,16.8749797 C3.125,17.2201574 3.40482228,17.4999797 3.75000022,17.4999797 L16.25,17.4999797 C16.5951777,17.4999797 16.875,17.2201574 16.875,16.8749797 L16.875,8.12497735 C16.875,7.7797997 16.5951777,7.49997735 16.25,7.49997735 L14.375,7.49997735 L14.375,6.23855263 C14.375,3.82230699 12.4162459,1.86355591 10,1.86355591 C7.58375436,1.86355591 5.625,3.82230699 5.625,6.23855263 L5.625,7.49997735 Z M13.125,6.23855263 C13.125,4.51266289 11.72589,3.1135527 10,3.1135527 C8.27411056,3.1135527 6.875,4.51266289 6.875,6.23855263 L6.875,7.49997735 L13.125,7.49997735 L13.125,6.23855263 Z M15.625,8.74997735 L15.625,16.2499797 L4.375,16.2499797 L4.375,8.74997735 L15.625,8.74997735 Z" id="lock-on" fill="#165DFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/global/more-content/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="more-content">
+    <div class="more-body">{{ content }}</div>
+    <transition name="fade-slide" mode="out-in" appear>
+      <div class="more-action" @click="emit('action')">{{ actionText }}</div>
+    </transition>
+  </div>
+</template>
+
+<script setup name="MoreContent">
+const props = defineProps({
+  content: {
+    type: String,
+    required: true,
+  },
+  actionText: {
+    type: String,
+    default: '查看详情',
+  },
+});
+const emit = defineEmits(['action']);
+</script>
+
+<style lang="less" scoped>
+.more-content {
+  color: @dark-text-color;
+  line-height: 22px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .more-body {
+    flex-flow: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .more-action {
+    flex-shrink: 0;
+    flex-flow: 0;
+    background-color: #fff;
+    padding-left: 8px;
+    color: @light-text-color;
+    cursor: pointer;
+    display: none;
+
+    &:hover {
+      color: @brand-color;
+    }
+  }
+
+  &:hover {
+    .more-action {
+      display: block;
+    }
+  }
+}
+</style>

src/layout/index.vue

@@ -24,9 +24,11 @@
       <left-menu class="app-submenu-body"></left-menu>
       <div class="app-submenu-footer">
         <t-dropdown
-          trigger="hover"
-          :options="userOptions"
           :minColumnWidth="203"
+          trigger="hover"
+          :popupProps="{
+            overlayInnerClassName: 'app-submenu-dropdown',
+          }"
           @click="clickHandler"
         >
           <div class="app-submenu-user">
@@ -39,6 +41,20 @@
             </div>
             <svg-icon name="more"></svg-icon>
           </div>
+          <t-dropdown-menu>
+            <t-dropdown-item :value="1">
+              <template #prefixIcon>
+                <svg-icon name="modify-pwd"></svg-icon>
+              </template>
+              修改密码
+            </t-dropdown-item>
+            <t-dropdown-item :value="2">
+              <template #prefixIcon>
+                <svg-icon name="logout"></svg-icon>
+              </template>
+              退出登录
+            </t-dropdown-item>
+          </t-dropdown-menu>
         </t-dropdown>
       </div>
     </t-aside>
@@ -76,14 +92,11 @@ const setModuleByPath = () => {
 onMounted(() => {
   setModuleByPath();
 });
-const userOptions = ref([
-  { content: '修改密码', value: '1' },
-  { content: '退出', value: '2' },
-]);
+
 const clickHandler = (data) => {
-  if (data.content === '修改密码') {
+  if (data.value === 1) {
     router.push({ name: 'PasswordModify' });
-  } else if (data.content === '退出') {
+  } else if (data.value === 2) {
     userStore.logout();
   }
 };
@@ -134,10 +147,10 @@ watch(
       }
       &.is-active {
         background-color: #e5e6eb;
-        color: #165dff;
+        color: var(--td-brand-color);
 
         :deep(.svg-icon use) {
-          fill: #165dff;
+          fill: var(--td-brand-color);
         }
       }
 
@@ -239,8 +252,12 @@ watch(
     :deep(.t-menu__item:not(.t-is-active)) {
       color: #262626;
     }
+    :deep(.t-menu__item.t-is-active) {
+      color: var(--td-brand-color);
+      background-color: #e8f3ff;
+    }
     :deep(.t-menu__item.t-is-active .svg-icon use) {
-      fill: #165dff;
+      fill: var(--td-brand-color);
     }
     :deep(.t-menu__item.t-is-disabled) {
       color: rgb(140, 140, 140);
@@ -248,3 +265,18 @@ watch(
   }
 }
 </style>
+<style lang="less">
+.app-submenu-dropdown {
+  .t-dropdown__item {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    &:hover {
+      color: var(--td-brand-color);
+      background-color: #e8f3ff;
+      .svg-icon use {
+        fill: var(--td-brand-color);
+      }
+    }
+  }
+}
+</style>

src/style/color.less

@@ -2,3 +2,8 @@
 @dark-text-color-2: #595959;
 @light-text-color: #8c8c8c;
 @light-border-color: #e5e5e5;
+
+@brand-color: #165dff;
+@warning-color: #ff7d00;
+@error-color: #f53f3f;
+@success-color: #00b42a;

src/views/resource-guard/person-guard/person-allocate/index.vue

@@ -58,6 +58,12 @@
         :selected-row-keys="selectedRowKeys"
         @select-change="selectChange"
       >
+        <template #crmno="{ col, row }">
+          <more-content
+            :content="row[col.colKey]"
+            @action="handleDetail(row)"
+          ></more-content>
+        </template>
         <template #custom-type="{ col, row }">
           {{ customerTypeFilter(row[col.colKey]) }}
         </template>
@@ -200,7 +206,7 @@ const columns = [
     fixed: 'left',
   },
   { colKey: 'serviceUnitName', title: '服务单元', width: 160 },
-  { colKey: 'crmNo', title: '项目单号', width: 200 },
+  { colKey: 'crmNo', title: '项目单号', width: 200, cell: 'crmno' },
   { colKey: 'customName', title: '客户名称', width: 120 },
   { colKey: 'customType', title: '客户类型', cell: 'custom-type', width: 120 },
   { colKey: 'province', title: '省份' },
@@ -327,4 +333,8 @@ const handleCancelSubmitSop = (row) => {
     },
   });
 };
+
+const handleDetail = (row) => {
+  console.log(row);
+};
 </script>

src/views/system/config-manage/customer-manage/index.vue

@@ -150,7 +150,7 @@ const params = reactive({
 const columns = [
   { colKey: 'id', title: '客户ID', width: 200 },
   { colKey: 'name', title: '客户名称', width: 120 },
-  { colKey: 'type', title: '客户类型', cell: 'type', width: 100 },
+  { colKey: 'type', title: '客户类型', cell: 'type', width: 120 },
   { colKey: 'province', title: '省份', width: 100 },
   { colKey: 'city', title: '城市', width: 100 },
   { colKey: 'area', title: '县区', width: 100 },