引入Wot UI组件库

App.vue

@@ -10,6 +10,8 @@ export default {
 
 <style>
 page {
+  --wot-color-theme: #1677FF;
+  --wot-button-primary-bg-color: #1677FF;
   --color-primary: #1677FF;
   --color-success: #16A34A;
   --color-warning: #EA8C00;

pages.json

@@ -1,4 +1,10 @@
 {
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
+    }
+  },
   "pages": [
     { "path": "pages/login/login", "style": { "navigationStyle": "custom", "navigationBarTitleText": "登录" } },
     { "path": "pages/password/password", "style": { "navigationStyle": "custom", "navigationBarTitleText": "修改密码" } },

pages/apply/form.vue

@@ -51,7 +51,7 @@
         <text class="lab">审批链</text>
         <text class="hint">{{ suggestedLabel || '将按固定审批链流转' }}</text>
       </view>
-      <view class="btn-primary" @click="submit">提交申请</view>
+      <wd-button type="primary" block size="large" @click="submit">提交申请</wd-button>
     </view>
   </view>
 </template>

pages/login/login.vue

@@ -35,7 +35,7 @@
         <text class="ag">我已阅读并同意《企业信息安全保密协议》及《员工使用守则》</text>
       </view>
 
-      <view class="btn-primary" :class="{ dim: busy }" @click="submit">{{ busy ? '校验中…' : '安全登录' }}</view>
+      <wd-button type="primary" block size="large" :loading="busy" @click="submit">安全登录</wd-button>
       <text v-if="error" class="err">{{ error }}</text>
     </view>
   </view>

pages/notice/list.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page">
     <fy-header title="公告" back />
-    <view v-if="!rows.length" class="empty">暂无公告</view>
+    <wd-status-tip v-if="!rows.length" image="content" tip="暂无公告" />
     <view v-for="r in rows" :key="r.id" class="card item">
       <text class="t">{{ r.title }}</text>
       <text class="s">{{ r.createdAt || r.publishAt || '' }}</text>

pages/search/search.vue

@@ -1,10 +1,10 @@
 <template>
   <view class="page">
     <fy-header title="搜索" back />
-    <view class="search">
+    <wd-search v-model="q" placeholder="搜索同事、会话或待办" hide-cancel focus placeholder-left />
-      <input v-model="q" placeholder="搜索同事 / 会话 / 聊天记录" confirm-type="search" focus />
+    <view v-if="!q.trim()">
+      <wd-status-tip image="search" tip="搜索同事、会话或待办" />
     </view>
-    <view v-if="!q.trim()" class="empty">搜索同事、会话或待办</view>
     <view v-else>
       <view v-if="people.length" class="sec">同事</view>
       <view v-for="p in people" :key="'p' + p.id" class="item" @click="openPerson(p)">
@@ -38,7 +38,7 @@
           <text class="n">{{ t.title || t.no }}</text>
         </view>
       </view>
-      <view v-if="!people.length && !convs.length && !hits.length && !todos.length" class="empty">没有找到相关内容</view>
+      <wd-status-tip v-if="!people.length && !convs.length && !hits.length && !todos.length" image="search" tip="没有找到相关内容" />
     </view>
   </view>
 </template>

pages/tabs/clock.vue

@@ -19,7 +19,7 @@
           <text class="tiny">{{ outRec ? (outRec.status || '正常') : '待打卡' }}</text>
         </view>
       </view>
-      <view class="btn-primary" @click="doPunch">{{ punching ? '定位中…' : (outRec ? '更新打卡' : '打卡') }}</view>
+      <wd-button type="primary" block size="large" :loading="punching" @click="doPunch">{{ outRec ? '更新打卡' : '打卡' }}</wd-button>
       <text class="geo">将使用手机定位校验打卡范围</text>
       <view class="quick">
         <text class="q" @click="goKind('card')">补卡</text>
@@ -112,6 +112,7 @@ export default {
 .val.ok { color: #16A34A; font-weight: 650; }
 .tiny { font-size: 20rpx; color: #6B7280; }
 .geo { display: block; text-align: center; font-size: 22rpx; color: #4B5563; margin: 16rpx 0 24rpx; }
+.body :deep(.wd-button) { margin-top: 8rpx; }
 .quick { display: flex; gap: 12rpx; }
 .q { flex: 1; height: 72rpx; background: #fff; border-radius: 12rpx; text-align: center; line-height: 72rpx; font-size: 24rpx; }
 .sec { margin: 32rpx 0 12rpx; font-size: 28rpx; font-weight: 600; }

pages/tabs/contacts.vue

@@ -5,9 +5,7 @@
         <text class="ico" @click="goGroup">建群</text>
       </template>
     </fy-header>
-    <view class="search">
+    <wd-search v-model="q" placeholder="搜索同事、部门或手机号" hide-cancel placeholder-left />
-      <input v-model="q" placeholder="搜索同事 / 部门 / 手机号" />
-    </view>
     <view class="org" @click="goGroups">
       <view class="obox">👥</view>
       <view class="ometa">

pages/tabs/me.vue

@@ -9,7 +9,7 @@
           <view class="info">
             <view class="nm">
               <text class="name">{{ me ? me.name : '' }}</text>
-              <text class="st">在职</text>
+              <wd-tag type="success" plain>在职</wd-tag>
             </view>
             <text class="dept">{{ me ? (me.department + ' · ' + me.title) : '' }}</text>
             <text class="ph">{{ phone }}{{ job }}</text>
@@ -32,23 +32,18 @@
       </view>
 
       <view class="card menu">
-        <view v-for="a in menus" :key="a.id" class="mi" @click="open(a)">
+        <wd-cell-group border>
-          <text class="ii">{{ a.icon }}</text>
+          <wd-cell v-for="a in menus" :key="a.id" :title="a.title" is-link @click="open(a)" />
-          <text class="it">{{ a.title }}</text>
+        </wd-cell-group>
-          <text class="arr">›</text>
-        </view>
       </view>
 
       <view class="card menu">
-        <view class="mi" @click="goPwd">
+        <wd-cell-group border>
-          <text class="ii">🔑</text>
+          <wd-cell title="修改密码" is-link @click="goPwd" />
-          <text class="it">修改密码</text>
+          <wd-cell is-link @click="logout">
-          <text class="arr">›</text>
+            <template #title><text class="danger">退出登录</text></template>
-        </view>
+          </wd-cell>
-        <view class="mi danger" @click="logout">
+        </wd-cell-group>
-          <text class="ii">⎋</text>
-          <text class="it">退出登录</text>
-        </view>
       </view>
     </view>
   </view>
@@ -131,5 +126,5 @@ export default {
 .ii { width: 48rpx; color: #1677FF; font-weight: 650; }
 .it { flex: 1; font-size: 28rpx; }
 .arr { color: #C4C9D4; font-size: 32rpx; }
-.danger .it { color: #DC2626; }
+.danger { color: #DC2626; }
 </style>

pages/tabs/workbench.vue

@@ -79,17 +79,14 @@
         </view>
         <text class="more" @click="goTodo">查看全部</text>
       </view>
-      <view v-if="!pending.length" class="empty-card">
+      <wd-status-tip v-if="!pending.length" image="content" tip="暂无待办" />
-        <text class="et">暂无待办</text>
-        <text class="es">需要处理的审批和协同会出现在这里</text>
-      </view>
       <view v-for="t in pending" :key="pendKey(t)" class="card todo" @click="openPending(t)">
         <view class="tm">
           <text class="tag">{{ t.tag || t.typeLabel || t.type || '流程审批' }}</text>
           <text class="tn">{{ t.title || t.no }}</text>
           <text class="ts">{{ t.submitter || '—' }}</text>
         </view>
-        <text class="chip">{{ t.btn || '去办理' }}</text>
+        <wd-tag type="primary" plain>{{ t.btn || '去办理' }}</wd-tag>
         <text class="arr">›</text>
       </view>
     </view>

pages/todo/detail.vue

@@ -51,8 +51,8 @@
           <view class="box"><textarea v-model="comment" placeholder="选填" /></view>
         </view>
         <view class="btns">
-          <view class="btn no" @click="audit('reject')">驳回</view>
+          <wd-button plain type="error" @click="audit('reject')">驳回</wd-button>
-          <view class="btn-primary yes" @click="audit('approve')">通过</view>
+          <wd-button type="primary" custom-class="yes" @click="audit('approve')">通过</wd-button>
         </view>
       </view>
     </view>
@@ -186,6 +186,7 @@ export default {
   border-top: 1rpx solid #E8ECF2; padding: 16rpx 28rpx calc(16rpx + env(safe-area-inset-bottom));
 }
 .btns { display: flex; gap: 16rpx; }
+.btns :deep(.wd-button) { flex: 1; }
 .btn { flex: 1; height: 88rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 600; }
 .no { background: #fff; color: #DC2626; border: 1rpx solid #FECACA; }
 .yes { flex: 1.4; }

pages/todo/list.vue

@@ -3,23 +3,20 @@
     <fy-header title="待办审批" back />
     <view v-if="!can" class="deny">当前账号没有审批或申请权限</view>
     <view v-else>
-      <scroll-view scroll-x class="tabs" :show-scrollbar="false">
+      <wd-tabs v-model="tab" slidable="always" @change="onTab">
-        <text v-for="t in tabs" :key="t.id" class="tab" :class="{ on: tab === t.id }" @click="switchTab(t.id)">{{ t.title }}</text>
+        <wd-tab v-for="t in tabs" :key="t.id" :title="t.title" :name="t.id" />
-      </scroll-view>
+      </wd-tabs>
       <view v-if="loading" class="empty">
-        <view class="sk" /><view class="sk short" />
+        <wd-skeleton theme="paragraph" />
-      </view>
-      <view v-else-if="!rows.length" class="empty">
-        <text class="et">暂无事项</text>
-        <text class="es">当前分类下没有需要处理的记录</text>
       </view>
+      <wd-status-tip v-else-if="!rows.length" image="content" tip="暂无事项" />
       <view v-for="r in rows" :key="r.no || r.id" class="card item" @click="open(r)">
         <view class="main">
           <text class="type">{{ r.typeLabel || r.type || '审批' }}</text>
           <text class="t">{{ r.title || r.no }}</text>
           <text class="s">{{ r.submitter || r.assigneeName || '' }}</text>
         </view>
-        <text class="chip">{{ r.status || '待处理' }}</text>
+        <wd-tag type="primary" plain>{{ r.status || '待处理' }}</wd-tag>
         <text class="arr">›</text>
       </view>
     </view>
@@ -55,6 +52,10 @@ export default {
   },
   onShow() { if (this.can) this.load() },
   methods: {
+    onTab(e) {
+      const id = (e && e.name) || this.tab
+      this.switchTab(id)
+    },
     switchTab(id) {
       this.tab = id
       this.load()