From 74bdeb7a11c418b8a9e24aa3fee554a2f6698815 Mon Sep 17 00:00:00 2001
From: zhaichao <zhaichao@fengyingkj.top>
Date: Wed, 23 Sep 2026 19:10:16 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=9A=E8=AE=AF=E5=BD=95=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/tabs/contacts.vue | 161 +++++++++++++++++++++++++++++-----------
 1 file changed, 116 insertions(+), 45 deletions(-)

diff --git a/pages/tabs/contacts.vue b/pages/tabs/contacts.vue
index 36ec9ec..f8ab75e 100644
--- a/pages/tabs/contacts.vue
+++ b/pages/tabs/contacts.vue
@@ -6,29 +6,42 @@
       </template>
     </fy-header>
     <fy-scroll class="edge-scroll" dock @refresh="reload">
-    <wd-search v-model="q" placeholder="搜索同事、部门或手机号" hide-cancel placeholder-left />
-    <view class="org" @click="goGroups">
-      <view class="obox">👥</view>
-      <view class="ometa">
-        <text class="on">群聊</text>
-        <text class="os">{{ groupCount }} 个群</text>
+    <view class="finder">
+      <wd-icon name="search" size="28rpx" color="#9CA3AF" />
+      <input v-model="q" class="finder-input" placeholder="搜索同事、部门或手机号" placeholder-class="finder-ph" confirm-type="search" />
+      <view v-if="q" class="finder-clear" @click="q = ''">
+        <wd-icon name="close-bold" size="22rpx" color="#9CA3AF" />
       </view>
-      <text class="arr">›</text>
     </view>
-    <view class="org" @click="goSearch">
-      <view class="obox">🏛</view>
-      <view class="ometa">
-        <text class="on">全员架构</text>
-        <text class="os">共 {{ deptCount }} 个部门 · {{ peopleCount }} 位在职成员</text>
+    <view class="shortcuts">
+      <view class="org" @click="goGroups">
+        <view class="obox group">
+          <wd-icon name="usergroup" size="36rpx" color="#1677FF" />
+        </view>
+        <view class="ometa">
+          <text class="on">群聊</text>
+          <text class="os">{{ groupCount }} 个群</text>
+        </view>
+        <wd-icon name="arrow-right" size="28rpx" color="#D1D5DB" />
+      </view>
+      <view class="org" @click="goSearch">
+        <view class="obox orgn">
+          <wd-icon name="layers" size="36rpx" color="#16A34A" />
+        </view>
+        <view class="ometa">
+          <text class="on">全员架构</text>
+          <text class="os">{{ deptCount }} 个部门 · {{ peopleCount }} 位在职</text>
+        </view>
+        <wd-icon name="arrow-right" size="28rpx" color="#D1D5DB" />
       </view>
-      <text class="arr">›</text>
     </view>
     <view v-for="g in groups" :key="g.name" class="block">
       <view class="dept" @click="toggle(g.name)">
-        <text>{{ g.name }}</text>
-        <text class="cnt">({{ g.people.length }})</text>
+        <text class="dept-name">{{ g.name }}</text>
+        <text class="cnt">{{ g.people.length }}</text>
+        <wd-icon class="chev" :name="open[g.name] === false ? 'arrow-right' : 'arrow-down'" size="24rpx" color="#9CA3AF" />
       </view>
-      <view v-if="open[g.name] !== false" class="card">
+      <view v-if="open[g.name] !== false" class="card people">
         <view v-for="p in g.people" :key="p.id" class="item" @click="openPerson(p)">
           <view class="av-wrap">
             <image v-if="p.avatar" class="av" :src="p.avatar" mode="aspectFill" />
@@ -37,16 +50,21 @@
           </view>
           <view class="meta">
             <text class="name">{{ p.name }}</text>
-            <text class="sub">{{ p.online ? '在线' : '离线' }} · {{ p.title }}</text>
+            <text class="sub">{{ p.title || (p.online ? '在线' : '离线') }}</text>
+          </view>
+          <view class="acts">
+            <view class="mini" @click.stop="chat(p)">
+              <wd-icon name="chat" size="34rpx" color="#1677FF" />
+            </view>
+            <view class="mini" @click.stop="call(p)">
+              <wd-icon name="phone" size="34rpx" color="#1677FF" />
+            </view>
           </view>
-          <text class="chip">{{ p.title }}</text>
-          <text class="mini" @click.stop="chat(p)">💬</text>
-          <text class="mini" @click.stop="call(p)">☎</text>
         </view>
       </view>
     </view>
     <view v-if="!groups.length" class="empty">没有匹配的同事</view>
-    <text class="foot">仅显示当前所属企业成员 · 数据实时同步</text>
+    <text class="foot">仅显示当前所属企业成员</text>
     </fy-scroll>
   </view>
 </template>
@@ -132,28 +150,81 @@ export default {
 </script>
 
 <style scoped>
-.search { padding: 16rpx 24rpx; }
-.search input { height: 80rpx; background: #fff; border-radius: 20rpx; padding: 0 28rpx; font-size: 28rpx; border: 1rpx solid rgba(17,24,39,0.06); }
-.org { margin: 0 24rpx 16rpx; background: #fff; border-radius: 16rpx; padding: 20rpx; display: flex; align-items: center; }
-.obox { width: 64rpx; height: 64rpx; border-radius: 12rpx; background: #E8ECF2; display: flex; align-items: center; justify-content: center; }
-.ometa { flex: 1; margin-left: 16rpx; }
-.on { display: block; font-size: 28rpx; font-weight: 700; }
-.os { font-size: 22rpx; color: #6B7280; }
-.arr { color: #D1D5DB; }
-.block { margin: 8rpx 24rpx 24rpx; }
-.dept { display: flex; align-items: center; padding: 16rpx 12rpx; font-size: 26rpx; font-weight: 600; background: #F3F6FB; border-radius: 12rpx 12rpx 0 0; }
-.cnt { color: #6B7280; font-weight: 400; font-size: 22rpx; margin-left: 8rpx; }
-.item { display: flex; align-items: center; padding: 20rpx 20rpx; }
-.av-wrap { position: relative; width: 72rpx; height: 72rpx; }
-.av { width: 72rpx; height: 72rpx; border-radius: 50%; }
-.av.txt { background: #E8ECF2; color: #4B5563; display: flex; align-items: center; justify-content: center; font-weight: 600; }
-.dot { position: absolute; right: 0; bottom: 0; width: 16rpx; height: 16rpx; border-radius: 50%; background: #006c49; border: 2rpx solid #fff; }
-.meta { flex: 1; margin-left: 16rpx; min-width: 0; }
-.name { display: block; font-size: 28rpx; font-weight: 600; }
-.sub { font-size: 22rpx; color: #6B7280; }
-.chip { font-size: 20rpx; color: #1677FF; background: #E8F1FF; padding: 4rpx 12rpx; border-radius: 999rpx; margin-right: 8rpx; }
-.mini { width: 56rpx; text-align: center; font-size: 28rpx; color: #1677FF; }
-.empty { text-align: center; color: #6B7280; padding: 80rpx; }
-.foot { display: block; text-align: center; color: #6B7280; font-size: 22rpx; padding: 20rpx 0 40rpx; }
-.ico { padding: 8rpx 16rpx; color: #1677FF; font-size: 26rpx; }
+.finder {
+  margin: 8rpx 24rpx 12rpx;
+  height: 56rpx;
+  padding: 0 20rpx;
+  border-radius: 12rpx;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  color: #9CA3AF;
+}
+.finder-input {
+  flex: 1;
+  height: 56rpx;
+  margin-left: 8rpx;
+  font-size: 26rpx;
+  line-height: 56rpx;
+  color: #111827;
+}
+.finder-ph { color: #9CA3AF; font-size: 26rpx; }
+.finder-clear {
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.shortcuts {
+  margin: 0 24rpx 8rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  border: 1rpx solid rgba(17, 24, 39, 0.06);
+  overflow: hidden;
+}
+.org {
+  padding: 22rpx 24rpx;
+  display: flex;
+  align-items: center;
+}
+.org + .org { border-top: 1rpx solid #F0F2F5; }
+.obox {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.obox.group { background: #E8F1FF; }
+.obox.orgn { background: #E8F8EF; }
+.ometa { flex: 1; margin: 0 16rpx; min-width: 0; }
+.on { display: block; font-size: 30rpx; font-weight: 600; color: #111827; }
+.os { display: block; margin-top: 4rpx; font-size: 22rpx; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.block { margin: 20rpx 24rpx 0; }
+.dept {
+  display: flex;
+  align-items: center;
+  padding: 8rpx 8rpx 12rpx;
+}
+.dept-name { font-size: 24rpx; font-weight: 600; color: #6B7280; }
+.cnt { margin-left: 8rpx; font-size: 22rpx; color: #9CA3AF; }
+.chev { margin-left: auto; }
+.people { overflow: hidden; }
+.item { display: flex; align-items: center; padding: 0 20rpx 0 24rpx; }
+.item + .item .meta { border-top: 1rpx solid #F0F2F5; }
+.av-wrap { position: relative; width: 80rpx; height: 80rpx; flex-shrink: 0; margin: 18rpx 0; }
+.av { width: 80rpx; height: 80rpx; border-radius: 18rpx; }
+.av.txt { background: #E8F1FF; color: #1677FF; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 30rpx; }
+.dot { position: absolute; right: -2rpx; bottom: -2rpx; width: 16rpx; height: 16rpx; border-radius: 50%; background: #16A34A; border: 3rpx solid #fff; }
+.meta { flex: 1; margin-left: 20rpx; min-width: 0; padding: 22rpx 0; }
+.name { display: block; font-size: 30rpx; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sub { display: block; margin-top: 4rpx; font-size: 22rpx; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.acts { display: flex; align-items: center; flex-shrink: 0; margin-left: 8rpx; }
+.mini { width: 64rpx; height: 64rpx; display: flex; align-items: center; justify-content: center; }
+.empty { text-align: center; color: #6B7280; padding: 120rpx 40rpx; font-size: 28rpx; }
+.foot { display: block; text-align: center; color: #9CA3AF; font-size: 22rpx; padding: 28rpx 0 48rpx; }
+.ico { padding: 8rpx 4rpx; color: #1677FF; font-size: 28rpx; font-weight: 600; }
 </style>