From 333c365c6f90743002fe7af2973af86dc4fb76f9 Mon Sep 17 00:00:00 2001
From: let5sne <let5sne@gmail.com>
Date: Thu, 23 Jul 2026 00:42:51 +0800
Subject: [PATCH] =?UTF-8?q?style(mobile-uni):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=91=98=E5=B7=A5=E7=AB=AF=E9=A6=96=E9=A1=B5=E4=B8=8E=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5UI=E4=BA=A4=E4=BA=92=EF=BC=8C=E6=9B=B4?=
 =?UTF-8?q?=E5=90=8D=E4=B8=BA=E9=93=B6=E5=9F=8E=E5=B8=AE=E9=81=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mobile-uni/src/pages/auth/login/index.vue    | 307 +++++++----
 mobile-uni/src/pages/auth/position/index.vue |   2 +-
 mobile-uni/src/pages/user/today/index.vue    | 503 ++++++++++++++-----
 3 files changed, 591 insertions(+), 221 deletions(-)

diff --git a/mobile-uni/src/pages/auth/login/index.vue b/mobile-uni/src/pages/auth/login/index.vue
index fb20bb3e..3596fa22 100644
--- a/mobile-uni/src/pages/auth/login/index.vue
+++ b/mobile-uni/src/pages/auth/login/index.vue
@@ -4,7 +4,7 @@
       <view class="brand-lockup">
         <image class="login-logo" src="/static/brand-logo.png" mode="aspectFit" />
         <view class="brand-copy">
-          <text class="brand-name">银城物业</text>
+          <text class="brand-name">银城帮道</text>
           <text class="brand-divider">·</text>
           <text class="login-eyebrow">数字师傅</text>
         </view>
@@ -12,8 +12,8 @@
 
       <view class="mentor-block">
         <image class="mentor-image" src="/static/mentor-female-bust.png" mode="aspectFit" />
-        <view class="mentor-bubble">
-          <text class="mentor-bubble-text">手机号登录，一分钟上手</text>
+        <view class="mentor-bubble spring-pop">
+          <text class="mentor-bubble-text">手机号登录，立刻上手</text>
         </view>
       </view>
 
@@ -63,15 +63,27 @@
                   :styles="inputStyles"
                 />
               </view>
-              <button class="secondary-button code-button" :disabled="sending" @click="sendCode">
-                {{ sending ? '发送中' : '获取验证码' }}
+              <button
+                class="secondary-button code-button"
+                :disabled="sending || countdown > 0"
+                @click="sendCode"
+              >
+                {{ sending ? '发送中' : countdown > 0 ? `${countdown}s 后重发` : '获取验证码' }}
               </button>
             </view>
           </uni-forms-item>
         </uni-forms>
+
+        <view class="dev-hint-pill" @click="fillDevCredentials">
+          <uni-icons type="info-filled" size="14" color="#d97706" />
+          <text class="dev-hint-text">测试验证码: 123456</text>
+          <text class="dev-fill-btn">快捷填入</text>
+        </view>
+
         <button class="primary-button login-submit" :disabled="loggingIn" @click="login">
-          {{ loggingIn ? '登录中' : '登录' }}
+          {{ loggingIn ? '登录中…' : '登录' }}
         </button>
+
         <uni-notice-bar
           v-if="message"
           :text="message"
@@ -81,14 +93,19 @@
         />
       </view>
 
-      <text class="agreement">登录即同意《服务协议》与《隐私政策》</text>
+      <view class="agreement-row" @click="agreed = !agreed">
+        <view class="checkbox-box" :class="{ checked: agreed }">
+          <uni-icons v-if="agreed" type="checkmarkempty" size="12" color="#ffffff" />
+        </view>
+        <text class="agreement-text">已阅读并同意《服务协议》与《隐私政策》</text>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
-import { onShow } from '@dcloudio/uni-app';
+import { reactive, ref, onUnmounted } from 'vue';
+import { onHide, onShow, onUnload } from '@dcloudio/uni-app';
 import type { LoginResult } from '@/types/api';
 import { apiRequest } from '@/services/api';
 import { consumeLoginRedirect, getAuth, isLoggedIn, phoneKey, saveAuth } from '@/services/auth';
@@ -117,13 +134,42 @@ const formRules = {
 };
 const sending = ref(false);
 const loggingIn = ref(false);
+const countdown = ref(0);
+const agreed = ref(true);
 const message = ref('');
+let timer: ReturnType<typeof setInterval> | null = null;
+
 const inputStyles = {
   color: '#25282d',
   borderColor: 'transparent',
   backgroundColor: 'transparent'
 };
 
+const stopTimer = () => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+};
+
+const startCountdown = () => {
+  stopTimer();
+  countdown.value = 60;
+  timer = setInterval(() => {
+    if (countdown.value > 1) {
+      countdown.value -= 1;
+    } else {
+      countdown.value = 0;
+      stopTimer();
+    }
+  }, 1000);
+};
+
+const fillDevCredentials = () => {
+  formData.smsCode = '123456';
+  message.value = '已自动填入测试验证码 123456';
+};
+
 const normalizeDigits = (value: string | number, maxLength: number) =>
   String(value || '')
     .replace(/\D/g, '')
@@ -143,7 +189,7 @@ const goAfterLogin = async () => {
 };
 
 const sendCode = async () => {
-  if (sending.value) return;
+  if (sending.value || countdown.value > 0) return;
   try {
     await loginForm.value?.validateField(['phone']);
   } catch {
@@ -159,6 +205,7 @@ const sendCode = async () => {
       auth: false
     });
     message.value = '验证码已发送';
+    startCountdown();
   } catch (error) {
     message.value = error instanceof Error ? error.message : '验证码发送失败';
   } finally {
@@ -168,6 +215,10 @@ const sendCode = async () => {
 
 const login = async () => {
   if (loggingIn.value) return;
+  if (!agreed.value) {
+    message.value = '请先勾选同意《服务协议》与《隐私政策》';
+    return;
+  }
   try {
     await loginForm.value?.validate();
   } catch {
@@ -205,6 +256,18 @@ onShow(() => {
     void goAfterLogin();
   }
 });
+
+onHide(() => {
+  stopTimer();
+});
+
+onUnload(() => {
+  stopTimer();
+});
+
+onUnmounted(() => {
+  stopTimer();
+});
 </script>
 
 <style scoped>
@@ -299,6 +362,7 @@ onShow(() => {
   width: 128px;
   height: 130px;
   flex: none;
+  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.08));
 }
 
 .mentor-bubble {
@@ -306,14 +370,23 @@ onShow(() => {
   margin-top: 20px;
   padding: 12px 16px;
   border: 1px solid rgba(225, 227, 232, 0.9);
-  border-radius: 14px;
+  border-radius: 16px;
   background: #ffffff;
-  box-shadow: 0 6px 16px rgba(29, 31, 35, 0.08);
+  box-shadow: 0 6px 18px rgba(29, 31, 35, 0.08);
+}
+
+.mentor-bubble.spring-pop {
+  animation: springPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes springPop {
+  0% { transform: scale(0.85); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
 }
 
 .mentor-bubble::before {
   position: absolute;
-  top: 22px;
+  top: 20px;
   left: -6px;
   width: 10px;
   height: 10px;
@@ -326,9 +399,9 @@ onShow(() => {
 
 .mentor-bubble-text {
   color: #25282d;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.5;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.4;
 }
 
 .login-card {
@@ -338,18 +411,18 @@ onShow(() => {
   gap: 18px;
   max-width: 720px;
   margin: 0 auto;
-  padding: 28px 20px 28px;
+  padding: 24px 20px 24px;
   border: 1px solid rgba(225, 227, 232, 0.95);
   border-top: 4px solid #e60012;
-  border-radius: 18px;
+  border-radius: 20px;
   background: rgba(255, 255, 255, 0.96);
-  box-shadow: 0 12px 28px rgba(29, 31, 35, 0.12), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
+  box-shadow: 0 12px 32px rgba(29, 31, 35, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
 }
 
 .login-card::before {
   position: absolute;
   inset: 0;
-  border-radius: 18px;
+  border-radius: 20px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 26%);
   content: '';
   pointer-events: none;
@@ -365,40 +438,40 @@ onShow(() => {
 }
 
 .login-form :deep(.uni-forms-item) {
-  margin-bottom: 22px;
+  margin-bottom: 18px;
 }
 
 .login-form :deep(.uni-forms-item:last-child) {
-  margin-bottom: 7px;
+  margin-bottom: 4px;
 }
 
 .login-form :deep(.uni-forms-item__label) {
-  padding-bottom: 4px;
+  padding-bottom: 6px;
   color: #20242b;
   font-size: 15px;
   font-weight: 700;
 }
 
 .login-form :deep(.uni-forms-item__error) {
-  margin-top: 9px;
-  font-size: 13px;
+  margin-top: 6px;
+  font-size: 12px;
 }
 
 .field-shell {
   display: flex;
   align-items: center;
-  min-height: 56px;
+  min-height: 52px;
   padding: 0 14px;
   border: 1px solid #d8dce3;
-  border-radius: 8px;
+  border-radius: 12px;
   background: #ffffff;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
   transition: border-color 160ms ease, box-shadow 160ms ease;
 }
 
 .field-shell:focus-within {
   border-color: #e60012;
-  box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.08);
+  box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.12);
 }
 
 .field-shell :deep(.uni-easyinput) {
@@ -425,75 +498,114 @@ onShow(() => {
 
 .field-shell :deep(.uni-easyinput__placeholder-class) {
   color: #b5b8c1;
-  font-size: 15px;
+  font-size: 14px;
 }
 
 .field-icon {
-  margin-right: 12px;
+  margin-right: 10px;
   flex: none;
 }
 
 .code-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 84px;
-  align-items: stretch;
-  gap: 12px;
-}
-
-.code-shell,
-.code-input {
-  flex: 1;
-  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
 }
 
 .code-shell {
-  padding-right: 10px;
+  flex: 1;
+  min-width: 0;
+  padding-right: 8px;
   padding-left: 12px;
 }
 
-.code-shell .field-icon {
-  margin-right: 9px;
-}
-
-.code-shell :deep(.uni-easyinput__content-input),
-.code-shell :deep(.uni-easyinput__placeholder-class) {
-  font-size: 13px;
-}
-
 .code-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  min-height: 56px;
-  padding: 0 4px;
+  width: 116px;
+  min-width: 116px;
+  height: 52px;
+  flex: 0 0 116px;
+  padding: 0 6px;
   border: 1px solid #e60012;
-  border-radius: 8px;
-  background: linear-gradient(180deg, #ffffff 0%, #fffdfd 100%);
+  border-radius: 12px;
+  background: #ffffff;
   color: #e60012;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 700;
   line-height: 1;
   white-space: nowrap;
-  box-shadow: 0 6px 14px rgba(242, 11, 26, 0.06);
+  box-shadow: 0 4px 12px rgba(230, 0, 18, 0.08);
+  transition: transform 0.15s ease, background 0.15s ease;
+}
+
+.code-button:active {
+  transform: scale(0.96);
+  background: #fff8f8;
+}
+
+.code-button:disabled {
+  border-color: #e5e7eb;
+  background: #f9fafb;
+  color: #9ca3af;
+  box-shadow: none;
+}
+
+.dev-hint-pill {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 20px;
+  background: #fffdf5;
+  border: 1px dashed #f59e0b;
+  cursor: pointer;
+  transition: transform 0.15s ease, background 0.15s ease;
+}
+
+.dev-hint-pill:active {
+  transform: scale(0.96);
+  background: #fff8e6;
+}
+
+.dev-hint-text {
+  color: #b45309;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.dev-fill-btn {
+  color: var(--employee-primary, #e60012);
+  font-size: 12px;
+  font-weight: 800;
+  text-decoration: underline;
 }
 
 .login-submit {
   display: flex;
   width: 100%;
-  min-height: 60px;
+  min-height: 54px;
   margin-top: 4px;
   align-items: center;
   justify-content: center;
   align-self: stretch;
   padding: 0 20px;
   border-radius: 14px;
-  background: #e60012;
+  background: linear-gradient(135deg, #ff4d4f 0%, #e60012 100%);
   color: #ffffff;
-  font-size: 22px;
+  font-size: 20px;
   font-weight: 800;
   letter-spacing: 2px;
-  box-shadow: 0 8px 18px rgba(230, 0, 18, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.24);
+  box-shadow: 0 8px 20px rgba(230, 0, 18, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.login-submit:active {
+  transform: scale(0.97);
+  box-shadow: 0 4px 10px rgba(230, 0, 18, 0.2);
 }
 
 .login-card :deep(.uni-noticebar) {
@@ -501,50 +613,51 @@ onShow(() => {
   border-radius: 10px;
 }
 
-.agreement {
-  display: block;
+.agreement-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
   max-width: 720px;
-  margin: 16px auto 0;
-  color: #a4a8b0;
+  margin: 18px auto 0;
+  cursor: pointer;
+}
+
+.checkbox-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 1.5px solid #bdc1c9;
+  border-radius: 5px;
+  background: #ffffff;
+  transition: all 0.15s ease;
+  flex: none;
+}
+
+.checkbox-box.checked {
+  border-color: var(--employee-primary, #e60012);
+  background: var(--employee-primary, #e60012);
+}
+
+.agreement-text {
+  color: #8c9098;
   font-size: 12px;
-  line-height: 1.5;
-  text-align: center;
+  font-weight: 500;
+  line-height: 1.4;
 }
 
 @media (max-width: 375px) {
   .login-shell {
-    padding-right: 32px;
-    padding-left: 32px;
-  }
-
-  .brand-name,
-  .brand-divider,
-  .login-eyebrow {
-    font-size: 17px;
-  }
-
-  .mentor-image {
-    width: 112px;
-    height: 114px;
-  }
-
-  .code-row {
-    grid-template-columns: minmax(0, 1fr) 80px;
-    gap: 10px;
+    padding-right: 20px;
+    padding-left: 20px;
   }
 
   .code-button {
-    width: 100%;
-    min-height: 56px;
+    width: 104px;
+    min-width: 104px;
+    flex-basis: 104px;
   }
 }
-
-html[data-aihr-font-size='extra-large'] .code-row {
-  grid-template-columns: minmax(0, 1fr);
-}
-
-html[data-aihr-font-size='extra-large'] .code-button {
-  min-height: 52px;
-  font-size: 15px;
-}
 </style>
diff --git a/mobile-uni/src/pages/auth/position/index.vue b/mobile-uni/src/pages/auth/position/index.vue
index 93fa8cf5..a87ea1a5 100644
--- a/mobile-uni/src/pages/auth/position/index.vue
+++ b/mobile-uni/src/pages/auth/position/index.vue
@@ -2,7 +2,7 @@
   <view class="page position-page">
     <view class="brand-bar">
       <image class="brand-logo" src="/static/brand-logo.png" mode="aspectFit" />
-      <text class="brand-name">银城员工端</text>
+      <text class="brand-name">银城帮道</text>
     </view>
 
     <view class="position-head">
diff --git a/mobile-uni/src/pages/user/today/index.vue b/mobile-uni/src/pages/user/today/index.vue
index 696cfc45..553cbd78 100644
--- a/mobile-uni/src/pages/user/today/index.vue
+++ b/mobile-uni/src/pages/user/today/index.vue
@@ -3,12 +3,16 @@
     <view class="brand-bar">
       <view class="brand-left">
         <image class="brand-logo" src="/static/brand-logo.png" mode="aspectFit" />
-        <text class="brand-name">银城员工端</text>
-      </view>
-      <view class="brand-bell" @click="openBuilding('消息通知')">
-        <uni-icons class="bell-icon" type="notification" size="28" color="#16191f" />
-        <view class="bell-dot" />
+        <text class="brand-name">银城帮道</text>
+        <view class="brand-status-badge">
+          <view class="status-dot-live"></view>
+          <text class="status-text">AI 在线</text>
+        </view>
       </view>
+      <button class="brand-bell" :aria-label="broadcastBellLabel" @click="openBroadcast">
+        <uni-icons class="bell-icon" type="notification" size="26" color="#16191f" />
+        <view v-if="hasUnreadBroadcast" class="bell-dot pulse" />
+      </button>
     </view>
 
     <view v-if="message" class="status-message">{{ message }}</view>
@@ -17,12 +21,14 @@
       <image class="hero-bg" src="/static/community-hero-bg.webp" mode="aspectFill" />
       <view class="hero-scrim" />
       <view class="hero-copy">
-        <text class="hero-role">{{ positionProfile.value }}</text>
+        <view class="hero-role-pill">
+          <text class="hero-role-text">{{ positionProfile.value }}</text>
+        </view>
         <text class="hero-title">{{ positionProfile.heroTitle }}</text>
         <text class="hero-sub">有问题，随时问老师傅</text>
       </view>
       <view class="hero-stage">
-        <view class="mentor-bubble">
+        <view class="mentor-bubble spring-enter">
           <text>{{ mentorBubbleText }}</text>
         </view>
         <image class="mentor-image" src="/static/mentor-female.png" mode="aspectFit" />
@@ -30,20 +36,24 @@
     </view>
 
     <view class="voice-card employee-card">
-      <button
-        class="voice-mic"
-        :class="{ recording, cancelling }"
-        aria-label="按住说话"
-        @touchstart.prevent="startHold"
-        @touchmove.prevent="moveHold"
-        @touchend.prevent="endHold"
-        @touchcancel.prevent="cancelHold"
-        @mousedown.prevent="startHold"
-        @mouseup.prevent="endHold"
-        @mouseleave="cancelHold"
-      >
-        <uni-icons type="mic" size="40" color="#ffffff" />
-      </button>
+      <view class="mic-ripple-container">
+        <view class="mic-ripple ripple-1" :class="{ active: recording }"></view>
+        <view class="mic-ripple ripple-2" :class="{ active: recording }"></view>
+        <button
+          class="voice-mic"
+          :class="{ recording, cancelling }"
+          aria-label="按住说话"
+          @touchstart.prevent="startHold"
+          @touchmove.prevent="moveHold"
+          @touchend.prevent="endHold"
+          @touchcancel.prevent="cancelHold"
+          @mousedown.prevent="startHold"
+          @mouseup.prevent="endHold"
+          @mouseleave="cancelHold"
+        >
+          <uni-icons type="mic" size="40" color="#ffffff" />
+        </button>
+      </view>
       <text class="voice-title">{{ voiceTitle }}</text>
       <text class="voice-sub">{{ voiceSub }}</text>
     </view>
@@ -57,12 +67,14 @@
           :class="`chip-${index}`"
           @click="ask(item)"
         >
-          <uni-icons
-            class="chip-icon"
-            :type="chipIcon(index)"
-            size="22"
-            :color="chipColor(index)"
-          />
+          <view class="chip-icon-box" :style="{ background: chipBg(index) }">
+            <uni-icons
+              class="chip-icon"
+              :type="chipIcon(index)"
+              size="16"
+              :color="chipIconColor(index)"
+            />
+          </view>
           <text class="chip-text">{{ item }}</text>
           <text class="chip-arrow">›</text>
         </button>
@@ -91,18 +103,22 @@
 
       <view class="schedule-list">
         <view class="schedule-row" v-if="primaryScheduleTitle">
-          <text class="schedule-num">1</text>
+          <view class="schedule-tag" :class="primaryAssignmentTagClass">
+            <text class="schedule-tag-text">{{ primaryAssignmentTagText }}</text>
+          </view>
           <view class="schedule-copy">
-            <text class="schedule-title">{{ primaryDisplayTitle }}</text>
+            <text class="schedule-title">{{ primaryScheduleTitle }}</text>
             <text class="schedule-desc">{{ primaryScheduleDesc }}</text>
           </view>
-          <button class="schedule-action" @click="openPrimarySchedule">
+          <button class="schedule-action primary-gradient-btn" @click="openPrimarySchedule">
             {{ primaryAssignment?.source === 'daily' ? '去作答' : '开始练习' }}
           </button>
         </view>
 
         <view class="schedule-row" v-if="home?.review">
-          <text class="schedule-num">2</text>
+          <view class="schedule-tag tag-review">
+            <text class="schedule-tag-text">SOP复习</text>
+          </view>
           <view class="schedule-copy">
             <text class="schedule-title">{{ home?.review?.title }}</text>
             <text class="schedule-desc">{{ home?.review?.desc }}</text>
@@ -120,29 +136,37 @@
         </view>
       </view>
       <view class="tools-grid">
-        <button class="tool-cell" @click="openLearning">
-          <view class="tool-icon">学</view>
+        <button class="tool-cell tool-learn" @click="openLearning">
+          <view class="tool-icon-badge badge-learn">
+            <uni-icons type="staff-filled" size="22" color="#6366f1" />
+          </view>
           <view class="tool-copy">
             <text class="tool-name">学习中心</text>
             <text class="tool-sub">课程·三题</text>
           </view>
         </button>
-        <button class="tool-cell" @click="openWorkResults">
-          <view class="tool-icon">果</view>
+        <button class="tool-cell tool-results" @click="openWorkResults">
+          <view class="tool-icon-badge badge-results">
+            <uni-icons type="medal-filled" size="22" color="#10b981" />
+          </view>
           <view class="tool-copy">
             <text class="tool-name">今日成果</text>
             <text class="tool-sub">记录·待跟进</text>
           </view>
         </button>
-        <button class="tool-cell" @click="openReport">
-          <view class="tool-icon">报</view>
+        <button class="tool-cell tool-report" @click="openReport">
+          <view class="tool-icon-badge badge-report">
+            <uni-icons type="paperplane-filled" size="22" color="#f59e0b" />
+          </view>
           <view class="tool-copy">
             <text class="tool-name">成果投稿</text>
             <text class="tool-sub">案例·SOP·知识</text>
           </view>
         </button>
-        <button class="tool-cell" @click="openQuestions">
-          <view class="tool-icon">榜</view>
+        <button class="tool-cell tool-questions" @click="openQuestions">
+          <view class="tool-icon-badge badge-questions">
+            <uni-icons type="chatboxes-filled" size="22" color="#e60012" />
+          </view>
           <view class="tool-copy">
             <text class="tool-name">问题榜</text>
             <text class="tool-sub">大家帮你答</text>
@@ -152,7 +176,7 @@
     </view>
 
     <button class="tip-card" @click="ask(primaryTipQuestion)">
-      <uni-icons class="tip-mark" type="help" size="22" color="#d98200" />
+      <uni-icons class="tip-mark" type="help-filled" size="20" color="#d98200" />
       <text class="tip-label">小贴士</text>
       <text class="tip-divider">|</text>
       <text class="tip-text">{{ tipBody }}</text>
@@ -173,12 +197,20 @@ import { chooseSpeechAudio, transcribeSpeechBlob, transcribeSpeechFile } from '@
 import { stripInternalCodes } from '@/services/text';
 import { ensureEmployeePosition } from '@/services/position';
 import { createPageRequestScope, currentAccountKey } from '@/services/request-scope';
+import { getBroadcastUnreadCount } from '@/services/broadcast';
 
 const home = ref<RoleHome | null>(null);
 const assignments = ref<PracticeAssignment[]>([]);
 const message = ref('');
 const loggedIn = ref(false);
 const positionProfile = ref(getSelectedPositionProfile());
+const unreadBroadcastCount = ref<number | null>(null);
+const hasUnreadBroadcast = computed(() => typeof unreadBroadcastCount.value === 'number' && unreadBroadcastCount.value > 0);
+const broadcastBellLabel = computed(() => unreadBroadcastCount.value === null
+  ? '银城大喇叭，未读状态暂不可用'
+  : unreadBroadcastCount.value > 0
+    ? `银城大喇叭，${unreadBroadcastCount.value} 条未读消息`
+    : '银城大喇叭，无未读消息');
 const quickQuestions = computed(() => positionProfile.value.quickQuestions);
 const primaryTipQuestion = computed(() => quickQuestions.value[0] || '岗位SOP');
 const pendingSopQueryKey = 'aihr_sop_pending_query';
@@ -186,9 +218,27 @@ const pendingAssignmentKey = 'aihr_pending_assignment_id';
 const requests = createPageRequestScope();
 let visibleAccountKey = '';
 
-const chipIcons = ['chatbubble', 'help', 'wallet'];
-const chipIcon = (index: number) => chipIcons[index] || 'chatbubble';
-const chipColor = (_index: number) => '#e60012';
+const chipIcons = ['chatbubble-filled', 'help-filled', 'wallet-filled'];
+const chipIcon = (index: number) => chipIcons[index] || 'chatbubble-filled';
+const chipBgs = ['rgba(230, 0, 18, 0.08)', 'rgba(45, 128, 255, 0.08)', 'rgba(245, 158, 11, 0.08)'];
+const chipBg = (index: number) => chipBgs[index % chipBgs.length];
+const chipColors = ['#e60012', '#2d80ff', '#f59e0b'];
+const chipIconColor = (index: number) => chipColors[index % chipColors.length];
+
+const primaryAssignmentTagText = computed(() => {
+  const source = primaryAssignment.value?.source;
+  if (source === 'daily') return '每日三题';
+  if (source === 'retry') return '错题再练';
+  if (source === 'camp') return '训练营';
+  return '专项训练';
+});
+
+const primaryAssignmentTagClass = computed(() => {
+  const source = primaryAssignment.value?.source;
+  if (source === 'daily') return 'tag-daily';
+  if (source === 'retry') return 'tag-retry';
+  return 'tag-practice';
+});
 
 
 const primaryAssignment = computed(() =>
@@ -272,6 +322,7 @@ const loadHome = async () => {
   assignments.value = [];
   if (!loggedIn.value) {
     home.value = null;
+    unreadBroadcastCount.value = null;
     return;
   }
   if (!(await ensureEmployeePosition('/pages/user/today/index')) || !requests.isCurrent(request)) {
@@ -302,6 +353,21 @@ const loadHome = async () => {
   }
 };
 
+const loadBroadcastUnreadCount = async () => {
+  const request = requests.begin('broadcast-unread');
+  unreadBroadcastCount.value = null;
+  if (!isLoggedIn()) {
+    return;
+  }
+  try {
+    const count = await getBroadcastUnreadCount();
+    if (requests.isCurrent(request)) unreadBroadcastCount.value = count;
+  } catch {
+    // The red dot is shown only for a confirmed unread count.
+    if (requests.isCurrent(request)) unreadBroadcastCount.value = null;
+  }
+};
+
 const recording = ref(false);
 const cancelling = ref(false);
 const transcribing = ref(false);
@@ -467,8 +533,14 @@ const openQuestions = () => {
   uni.navigateTo({ url: '/pages/user/questions/index' });
 };
 
-const openBuilding = (title: string) => {
-  uni.navigateTo({ url: `/pages/common/building/index?title=${encodeURIComponent(title)}` });
+const openBroadcast = () => {
+  const path = '/pages/user/broadcast/index';
+  if (!isLoggedIn()) {
+    rememberLoginRedirect(path);
+    uni.navigateTo({ url: '/pages/auth/login/index' });
+    return;
+  }
+  uni.navigateTo({ url: path });
 };
 
 const goPractice = () => {
@@ -482,11 +554,13 @@ onShow(() => {
     home.value = null;
     assignments.value = [];
     message.value = '';
+    unreadBroadcastCount.value = null;
   }
   visibleAccountKey = nextAccountKey;
   requests.activate();
   resetPageScroll();
   void loadHome();
+  void loadBroadcastUnreadCount();
 });
 
 onHide(() => {
@@ -534,15 +608,53 @@ onUnload(() => {
   letter-spacing: 0.02em;
 }
 
+.brand-status-badge {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 8px;
+  border-radius: 12px;
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.2);
+}
+
+.status-dot-live {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #10b981;
+  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
+  animation: pulseDot 2s infinite ease-in-out;
+}
+
+.status-text {
+  font-size: 11px;
+  font-weight: 700;
+  color: #059669;
+}
+
+@keyframes pulseDot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.2); }
+}
+
 .brand-bell {
   position: relative;
   display: flex;
   width: 42px;
   height: 42px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
   align-items: center;
   justify-content: center;
 }
 
+.brand-bell::after {
+  border: 0;
+}
+
 .bell-icon {
   line-height: 1;
 }
@@ -558,6 +670,15 @@ onUnload(() => {
   background: #e70014;
 }
 
+.bell-dot.pulse {
+  animation: bellPulse 1.8s infinite ease-in-out;
+}
+
+@keyframes bellPulse {
+  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 0, 18, 0.4); }
+  50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(230, 0, 18, 0); }
+}
+
 .status-message {
   margin: 4px 0 8px;
   padding: 10px 12px;
@@ -586,9 +707,9 @@ onUnload(() => {
   inset: 0;
   background: linear-gradient(
     90deg,
-    rgba(255, 255, 255, 0.92) 0%,
-    rgba(255, 255, 255, 0.62) 34%,
-    rgba(255, 255, 255, 0) 64%
+    rgba(255, 255, 255, 0.94) 0%,
+    rgba(255, 255, 255, 0.68) 36%,
+    rgba(255, 255, 255, 0) 66%
   );
 }
 
@@ -599,22 +720,37 @@ onUnload(() => {
   width: 54%;
   max-width: 54%;
   flex-direction: column;
-  padding: 26px 0 0 24px;
+  padding: 24px 0 0 24px;
+}
+
+.hero-role-pill {
+  display: inline-flex;
+  align-self: flex-start;
+  padding: 2px 8px;
+  border-radius: 8px;
+  background: rgba(230, 0, 18, 0.08);
+  margin-bottom: 4px;
+}
+
+.hero-role-text {
+  color: var(--employee-primary);
+  font-size: 13px;
+  font-weight: 700;
 }
 
-.hero-role,
 .hero-title {
   color: #111111;
-  font-size: 30px;
-  font-weight: 500;
-  line-height: 1.5;
-  letter-spacing: 0;
+  font-size: 28px;
+  font-weight: 800;
+  line-height: 1.35;
+  letter-spacing: -0.02em;
 }
 
 .hero-sub {
-  margin-top: 2px;
+  margin-top: 4px;
   color: #4b5058;
-  font-size: 14px;
+  font-size: 13px;
+  font-weight: 500;
   white-space: nowrap;
   line-height: 1.4;
 }
@@ -646,7 +782,16 @@ onUnload(() => {
   padding: 10px 12px;
   border-radius: 18px;
   background: #ffffff;
-  box-shadow: 0 8px 20px rgba(20, 24, 32, 0.1);
+  box-shadow: 0 8px 24px rgba(20, 24, 32, 0.12);
+}
+
+.mentor-bubble.spring-enter {
+  animation: springPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes springPop {
+  0% { transform: scale(0.85); opacity: 0; }
+  100% { transform: scale(1); opacity: 1; }
 }
 
 .mentor-bubble::after {
@@ -663,8 +808,8 @@ onUnload(() => {
 
 .mentor-bubble text {
   color: #33363c;
-  font-size: 15px;
-  font-weight: 600;
+  font-size: 14px;
+  font-weight: 700;
   line-height: 1.45;
 }
 
@@ -677,9 +822,44 @@ onUnload(() => {
   gap: 8px;
   margin: -48px 4px 0;
   padding: 22px 16px 16px;
-  border-radius: 22px;
+  border-radius: 24px;
   background: #ffffff;
-  box-shadow: 0 14px 34px rgba(24, 28, 36, 0.1);
+  box-shadow: 0 14px 34px rgba(24, 28, 36, 0.08);
+}
+
+.mic-ripple-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 96px;
+  height: 96px;
+}
+
+.mic-ripple {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 2px solid var(--employee-primary);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.mic-ripple.ripple-1.active {
+  animation: rippleWave 1.4s infinite cubic-bezier(0, 0.2, 0.8, 1);
+}
+
+.mic-ripple.ripple-2.active {
+  animation: rippleWave 1.4s infinite cubic-bezier(0, 0.2, 0.8, 1);
+  animation-delay: 0.5s;
+}
+
+@keyframes rippleWave {
+  0% { transform: scale(1); opacity: 0.8; }
+  100% { transform: scale(1.6); opacity: 0; }
 }
 
 .voice-mic {
@@ -692,9 +872,10 @@ onUnload(() => {
   padding: 0;
   border: 0;
   border-radius: 50%;
-  background: var(--employee-primary);
+  background: linear-gradient(135deg, #ff4d4f 0%, #e60012 100%);
   box-shadow: 0 10px 24px rgba(230, 0, 18, 0.28);
   line-height: 1;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
 
 .voice-mic::after {
@@ -703,8 +884,8 @@ onUnload(() => {
 
 .voice-mic.recording {
   background: var(--brand-pressed);
-  box-shadow: 0 6px 16px rgba(184, 0, 15, 0.3);
-  transform: scale(0.95);
+  box-shadow: 0 6px 16px rgba(184, 0, 15, 0.35);
+  transform: scale(0.94);
 }
 
 .voice-mic.cancelling {
@@ -740,30 +921,34 @@ onUnload(() => {
 .chip {
   display: flex;
   width: 100%;
-  min-height: 40px;
+  min-height: 44px;
   align-items: center;
   justify-content: center;
-  gap: 4px;
-  padding: 0 6px;
-  border: 1px solid #ececee;
-  border-radius: 12px;
+  gap: 6px;
+  padding: 0 8px;
+  border: 1px solid #f0f0f2;
+  border-radius: 14px;
   background: #ffffff;
-  color: var(--employee-primary);
+  color: #1a1a1a;
   font-size: 13px;
   font-weight: 700;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
+  transition: transform 0.15s ease, background 0.15s ease;
 }
 
-.chip-1 {
-  color: var(--employee-primary);
+.chip:active {
+  transform: scale(0.96);
+  background: #fdfdfd;
 }
 
-.chip-2 {
-  color: var(--employee-primary);
-}
-
-.chip-icon {
-  font-size: 13px;
-  line-height: 1;
+.chip-icon-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  flex: none;
 }
 
 .chip-text {
@@ -774,18 +959,18 @@ onUnload(() => {
 }
 
 .chip-arrow {
-  color: #f0717c;
+  color: #c0c3c8;
   font-size: 14px;
   font-weight: 500;
 }
 
 .section-card {
-  margin-top: 10px;
-  padding: 16px;
+  margin-top: 12px;
+  padding: 18px;
   border: 0;
   border-radius: 22px;
   background: #ffffff;
-  box-shadow: 0 8px 24px rgba(24, 28, 36, 0.05);
+  box-shadow: 0 8px 24px rgba(24, 28, 36, 0.04);
 }
 
 .login-section {
@@ -835,7 +1020,7 @@ onUnload(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 12px;
+  margin-bottom: 14px;
 }
 
 .section-title {
@@ -843,13 +1028,13 @@ onUnload(() => {
   align-items: center;
   gap: 8px;
   color: #1a1a1a;
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 800;
 }
 
 .section-bar {
   width: 4px;
-  height: 22px;
+  height: 20px;
   border-radius: 2px;
   background: var(--employee-primary);
 }
@@ -879,26 +1064,46 @@ onUnload(() => {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 12px 10px;
+  padding: 14px 12px;
   border-radius: 16px;
-  background: #fafafa;
+  background: #f9f9fb;
 }
 
-.schedule-num {
+.schedule-tag {
   display: flex;
-  width: 30px;
-  height: 30px;
-  flex: none;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
-  background: var(--employee-primary);
-  color: #ffffff;
-  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 10px;
+  flex: none;
+}
+
+.schedule-tag-text {
+  font-size: 12px;
   font-weight: 800;
   line-height: 1;
 }
 
+.tag-daily {
+  background: rgba(45, 128, 255, 0.1);
+  color: #2d80ff;
+}
+
+.tag-retry {
+  background: rgba(245, 158, 11, 0.1);
+  color: #d97706;
+}
+
+.tag-practice {
+  background: rgba(230, 0, 18, 0.1);
+  color: var(--employee-primary);
+}
+
+.tag-review {
+  background: rgba(16, 185, 129, 0.1);
+  color: #059669;
+}
+
 .schedule-copy {
   display: flex;
   min-width: 0;
@@ -909,36 +1114,46 @@ onUnload(() => {
 
 .schedule-title {
   color: #1a1a1a;
-  font-size: 17px;
+  font-size: 16px;
   font-weight: 800;
-  line-height: 1.25;
+  line-height: 1.3;
 }
 
 .schedule-desc {
   color: #8a8d93;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 1.4;
 }
 
 .schedule-action {
   display: flex;
   width: auto;
-  min-width: 88px;
-  min-height: 52px;
+  min-width: 84px;
+  min-height: 44px;
   flex: none;
   align-items: center;
   justify-content: center;
-  padding: 0 10px;
+  padding: 0 12px;
   border-radius: 12px;
   background: var(--employee-primary);
-  box-shadow: 0 8px 16px rgba(230, 0, 18, 0.18);
   color: #ffffff;
-  font-size: 17px;
+  font-size: 15px;
   font-weight: 800;
   line-height: 1.2;
   white-space: nowrap;
 }
 
+.primary-gradient-btn {
+  background: linear-gradient(135deg, #ff4d4f 0%, #e60012 100%) !important;
+  box-shadow: 0 6px 16px rgba(230, 0, 18, 0.25) !important;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.primary-gradient-btn:active {
+  transform: scale(0.96);
+  box-shadow: 0 3px 8px rgba(230, 0, 18, 0.2) !important;
+}
+
 .review-action {
   border: 1.5px solid var(--employee-primary);
   background: #ffffff;
@@ -949,39 +1164,57 @@ onUnload(() => {
 .tools-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
+  gap: 12px;
 }
 
 .tool-cell {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
+  align-items: center;
+  gap: 12px;
   margin: 0;
-  padding: 12px;
+  padding: 14px;
   border: 0;
-  border-radius: 16px;
-  background: #fafafa;
+  border-radius: 18px;
+  background: #f9f9fb;
   box-shadow: none;
   text-align: left;
   line-height: 1.3;
+  transition: transform 0.15s ease, background 0.15s ease;
+}
+
+.tool-cell:active {
+  transform: scale(0.97);
+  background: #f2f2f5;
 }
 
 .tool-cell::after {
   border: 0;
 }
 
-.tool-icon {
+.tool-icon-badge {
   display: flex;
-  width: 40px;
-  height: 40px;
+  width: 44px;
+  height: 44px;
   align-items: center;
   justify-content: center;
-  border-radius: 12px;
-  background: var(--employee-primary-soft);
-  color: var(--employee-primary);
-  font-size: 18px;
-  font-weight: 900;
+  border-radius: 14px;
+  flex: none;
+}
+
+.badge-learn {
+  background: rgba(99, 102, 241, 0.1);
+}
+
+.badge-results {
+  background: rgba(16, 185, 129, 0.1);
+}
+
+.badge-report {
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.badge-questions {
+  background: rgba(230, 0, 18, 0.1);
 }
 
 .tool-copy {
@@ -1005,17 +1238,41 @@ onUnload(() => {
 }
 
 .tip-card {
+  position: relative;
+  overflow: hidden;
   display: flex;
   margin-top: 18px;
-  min-height: 58px;
+  min-height: 54px;
   align-items: center;
   gap: 6px;
   padding: 14px 16px;
   border: 0;
-  border-radius: 14px;
-  background: #fff6e8;
-  box-shadow: none;
+  border-radius: 16px;
+  background: #fff8ef;
+  box-shadow: 0 4px 14px rgba(217, 130, 0, 0.06);
   text-align: left;
+  transition: transform 0.15s ease;
+}
+
+.tip-card:active {
+  transform: scale(0.98);
+}
+
+.tip-card::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 50%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
+  transform: skewX(-20deg);
+  animation: shimmerLight 4s infinite ease-in-out;
+}
+
+@keyframes shimmerLight {
+  0%, 75% { left: -100%; }
+  100% { left: 200%; }
 }
 
 .tip-mark {