feat(home): 工作台新增 FAB 快捷操作，优化 tabbar 扫码和微信登录

- index.vue：新增 FAB 按钮（选择区域巡检 + 新增工单），合并原工单和巡检列表的入口 - menu-section.vue：新增蓝牙调试快捷入口 - tabbar：扫码巡检改用 parseQrCode 解析，取消扫码不再跳转 - wechat-login-panel：手机号授权拒绝后 emit phone-refused，回退到账号密码登录 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-21 10:23:05 +08:00
parent 9f41790c86
commit 4d5ca8decf
5 changed files with 164 additions and 5 deletions
--- a/src/pages-core/auth/components/wechat-login-panel.vue
+++ b/src/pages-core/auth/components/wechat-login-panel.vue
@@ -43,6 +43,10 @@ const props = defineProps<{
  validateTenant: () => boolean
 }>()

+const emit = defineEmits<{
+  (e: 'phone-refused'): void
+}>()
+
 const toast = useToast()
 const loading = ref(false)
 const needPhoneAuth = ref(false)
@@ -79,7 +83,8 @@ async function handleWechatLogin() {
 /** 第二步：手机号授权后完成登录 */
 async function handleGetPhoneNumber(e: any) {
  if (e.detail.errMsg !== 'getPhoneNumber:ok') {
-    toast.warning('未获取到手机号授权，无法继续登录')
+    toast.warning('为方便工作，建议授权手机号')
+    emit('phone-refused')
    return
  }

--- a/src/pages-core/auth/login.vue
+++ b/src/pages-core/auth/login.vue
@@ -22,6 +22,7 @@
          :agreed="agreed"
          :redirect-url="redirectUrl"
          :validate-tenant="validateTenant"
+          @phone-refused="activeTab = 'username'"
        />
      </view>

--- a/src/pages/index/components/menu-section.vue
+++ b/src/pages/index/components/menu-section.vue
@@ -97,6 +97,7 @@ const quickApps = [
  { key: 'inspection', name: '巡检记录', icon: 'i-carbon-list-checked', color: '#8B5CF6', bgLight: '#F5F3FF', url: '/pages/scan/inspection/list' },
  { key: 'workOrderStats', name: '工单统计', icon: 'i-carbon-chart-bar', color: '#3B82F6', bgLight: '#EFF6FF', url: '/pages/scan/work-order/stats' },
  { key: 'trafficStats', name: '客流统计', icon: 'i-carbon-pedestrian', color: '#10B981', bgLight: '#ECFDF5', url: '/pages/scan/traffic/index' },
+  { key: 'bluetoothDebug', name: '蓝牙调试', icon: 'i-carbon-bluetooth', color: '#0EA5E9', bgLight: '#F0F9FF', url: '/pages/scan/bluetooth-debug/index' },
 ]

 function handleQuickApp(app: any) {
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -4,10 +4,46 @@
    <UserHeader />
    <!-- 常用应用 + 区域预警 + 菜单分组 -->
    <MenuSection />
+
+    <!-- FAB 遮罩 -->
+    <view v-if="showFabMenu" class="fab-overlay" @click="showFabMenu = false" />
+
+    <!-- FAB 展开菜单 -->
+    <view v-if="showFabMenu" class="fab-menu">
+      <view class="fab-menu-item" @click="handleManualInspection">
+        <view class="fab-menu-icon" style="background: #10B981">
+          <view class="i-carbon-list-checked text-18px text-white" />
+        </view>
+        <text class="fab-menu-label">选择区域巡检</text>
+      </view>
+      <view class="fab-menu-item" @click="handleCreateOrder">
+        <view class="fab-menu-icon" style="background: #F97316">
+          <view class="i-carbon-document-add text-18px text-white" />
+        </view>
+        <text class="fab-menu-label">新增工单</text>
+      </view>
+    </view>
+
+    <!-- FAB 按钮 -->
+    <view
+      class="fab-btn"
+      :class="{ 'fab-btn--active': showFabMenu }"
+      @click="showFabMenu = !showFabMenu"
+    >
+      <view
+        class="text-24px text-white transition-transform"
+        :class="showFabMenu ? 'i-carbon-close rotate-0' : 'i-carbon-add'"
+      />
+    </view>
+
+    <!-- 区域级联选择器 -->
+    <AreaPicker ref="areaPickerRef" @select="handleSelectArea" />
  </view>
 </template>

 <script lang="ts" setup>
+import { ref } from 'vue'
+import AreaPicker from '@/components/area-picker/index.vue'
 import MenuSection from './components/menu-section.vue'
 import UserHeader from './components/user-header.vue'

@@ -21,6 +57,26 @@ definePage({
    navigationStyle: 'custom',
  },
 })
+
+const showFabMenu = ref(false)
+const areaPickerRef = ref<InstanceType<typeof AreaPicker>>()
+
+/** 选择区域巡检 */
+function handleManualInspection() {
+  showFabMenu.value = false
+  areaPickerRef.value?.open()
+}
+
+/** 区域选择完成 → 跳转巡检页 */
+function handleSelectArea({ areaId, areaName }: { areaId: number, areaName: string }) {
+  uni.navigateTo({ url: `/pages/scan/inspection/index?areaId=${areaId}&areaName=${encodeURIComponent(areaName)}` })
+}
+
+/** 新增工单 */
+function handleCreateOrder() {
+  showFabMenu.value = false
+  uni.navigateTo({ url: '/pages/scan/work-order/create' })
+}
 </script>

 <style lang="scss">
@@ -39,4 +95,93 @@ page {
  height: 100%;
  overflow: hidden;
 }
+
+.fab-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 98;
+}
+
+.fab-menu {
+  position: fixed;
+  right: 40rpx;
+  bottom: 360rpx;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 24rpx;
+}
+
+.fab-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  animation: fabSlideUp 0.2s ease-out both;
+  &:nth-child(1) {
+    animation-delay: 0.05s;
+  }
+  &:nth-child(2) {
+    animation-delay: 0s;
+  }
+}
+
+.fab-menu-icon {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
+}
+
+.fab-menu-label {
+  background: #fff;
+  padding: 12rpx 24rpx;
+  border-radius: 16rpx;
+  font-size: 26rpx;
+  font-weight: 600;
+  color: #1f2937;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+  white-space: nowrap;
+}
+
+@keyframes fabSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fab-btn {
+  position: fixed;
+  right: 40rpx;
+  bottom: 230rpx;
+  width: 112rpx;
+  height: 112rpx;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #fb923c, #f97316);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 32rpx rgba(249, 115, 22, 0.4);
+  z-index: 100;
+  transition: transform 0.2s;
+  &:active {
+    transform: scale(0.92);
+  }
+  &--active {
+    background: linear-gradient(135deg, #6b7280, #4b5563);
+    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
+  }
+}
 </style>
--- a/src/tabbar/index.vue
+++ b/src/tabbar/index.vue
@@ -2,6 +2,7 @@
 /* eslint-disable brace-style */ // 原因：unibest 官方维护的代码，尽量不要大概，避免难以合并
 // i-carbon-code
 import type { CustomTabBarItem } from './types'
+import { parseQrCode } from '@/utils/qrcode'
 import { customTabbarEnable, needHideNativeTabbar, tabbarCacheEnable } from './config'
 import { tabbarList, tabbarStore } from './store'

@@ -25,12 +26,18 @@ function handleClickBulge() {
        uni.navigateTo({ url: fallbackUrl })
        return
      }
-      uni.navigateTo({
-        url: `/pages/scan/inspection/index?code=${encodeURIComponent(res.result)}`,
-      })
+      const parsed = parseQrCode(res.result)
+      if (parsed) {
+        uni.navigateTo({
+          url: `/pages/scan/inspection/index?areaId=${parsed.areaId}&areaName=${encodeURIComponent(parsed.areaName)}`,
+        })
+      }
+      else {
+        uni.showToast({ title: '无法识别该二维码', icon: 'none' })
+      }
    },
    fail: () => {
-      uni.navigateTo({ url: fallbackUrl })
+      // 用户取消扫码，不跳转（避免进入 scan/index 又自动触发一次扫码）
    },
  })
 }