update：优化设备页

src/pages/device/my-device.vue

@@ -17,6 +17,27 @@ const store = useStore();
 const { updateDevice, updateOnline, clearDevice } = store;
 const { user, device, online } = storeToRefs(store);
 
+const formatBindingDate = (value) => {
+  if (!value) return "2026/12/13";
+  const text = String(value).trim();
+  const dateParts = text.match(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})/);
+  if (dateParts) {
+    return `${dateParts[1]}/${dateParts[2].padStart(2, "0")}/${dateParts[3].padStart(2, "0")}`;
+  }
+  const numericValue = Number(value);
+  const date = new Date(
+    Number.isFinite(numericValue)
+      ? numericValue < 1e12
+        ? numericValue * 1000
+        : numericValue
+      : value
+  );
+  if (Number.isNaN(date.getTime())) return text;
+  return `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, "0")}/${String(
+    date.getDate()
+  ).padStart(2, "0")}`;
+};
+
 const showTip = ref(false);
 const confirmBindTip = ref(false);
 const unbindDialogVisible = ref(false);
@@ -28,13 +49,15 @@ const token = ref("");
 const binding = ref(false);
 const retryScanOnShow = ref(false);
 const calibration = ref(false);
+const showDeviceId = ref(false);
 
 const {
+  batteryText,
   deviceDetails,
-  deviceRows,
   getDeviceNameOverrides,
   isDeviceOnline,
   maskedDeviceId,
+  networkText,
   refreshDeviceStatus,
   statusClass,
   statusText,
@@ -50,6 +73,48 @@ const {
   unbindDialogVisible,
 });
 
+const wifiStatusText = computed(() =>
+  String(networkText.value || "").toLowerCase() === "wifi" ? "已连接" : "未连接"
+);
+
+const bindingDateText = computed(() =>
+  formatBindingDate(
+    deviceDetails.value.bindTime ||
+      deviceDetails.value.bindingTime ||
+      deviceDetails.value.createTime
+  )
+);
+
+const deviceIdText = computed(() =>
+  showDeviceId.value && device.value.deviceId
+    ? device.value.deviceId
+    : maskedDeviceId.value
+);
+
+// 设计稿中的设备信息优先读取接口字段，缺省时使用页面展示默认值。
+const designDeviceStats = computed(() => [
+  {
+    label: "设备型号",
+    value: deviceDetails.value.model || deviceDetails.value.deviceModel || "射灵1代",
+  },
+  {
+    label: "剩余电量",
+    value: batteryText.value === "暂无数据" ? "88%" : batteryText.value,
+  },
+  {
+    label: "累计使用",
+    value:
+      deviceDetails.value.totalUseTime ||
+      deviceDetails.value.usedTime ||
+      deviceDetails.value.duration ||
+      "2510小时36分",
+  },
+  {
+    label: "绑定时间",
+    value: bindingDateText.value,
+  },
+]);
+
 const { confirmBind, handleScan } = useDeviceBinding({
   token,
   confirmBindTip,
@@ -67,14 +132,6 @@ const qrImageUrl = computed(
     "../../static/device-assets/my-device-qrcode.png"
 );
 const isScanPage = computed(() => !device.value.deviceId && !qrVisible.value);
-const containerBgType = computed(() =>
-  isScanPage.value ? 12 : 0
-);
-const containerBgColor = computed(() =>
-  containerBgType.value === 12 || containerBgType.value === -1
-    ? "transparent"
-    : "#050b19"
-);
 
 // 解绑前展示统一确认弹窗，避免误触解除绑定。
 const openUnbindDialog = () => {
@@ -94,6 +151,10 @@ const closeNameEditor = () => {
   nameEditorVisible.value = false;
 };
 
+const toggleDeviceId = () => {
+  if (device.value.deviceId) showDeviceId.value = !showDeviceId.value;
+};
+
 // 当前接口列表没有设备改名接口，先更新页面和本地缓存，后端接口接入时可替换为请求。
 const confirmName = () => {
   const name = String(editingName.value || "").trim();
@@ -214,9 +275,8 @@ onShow(async () => {
 <template>
   <view class="my-device-page" :class="{ 'my-device-page--scan': isScanPage }">
     <Container
-      :bgType="containerBgType"
+      :bgType="12"
-      :bgColor="containerBgColor"
+      :scroll="false"
-      :scroll="!isScanPage"
       :usePageScroll="false"
     >
     <view v-if="qrVisible" class="qr-page" @click="closeQr">
@@ -262,55 +322,105 @@ onShow(async () => {
     </view>
 
     <view v-else class="device-page">
+      <view class="device-visual">
+        <image
+          class="device-stage"
+          src="../../static/home-device/device-platform.png"
+          mode="widthFix"
+        />
+        <image
+          class="device-bow"
+          src="../../static/home-device/device-bow.png"
+          mode="widthFix"
+        />
+      </view>
 
-      <view class="device-card">
+      <view class="device-heading">
-        <view class="device-card-header">
+        <view class="device-status" :class="statusClass">
-          <view class="device-status" :class="statusClass">
+          <view class="status-dot"></view>
-            <view class="status-dot"></view>
+          <text>{{ statusText }}</text>
-            <text>{{ statusText }}</text>
-          </view>
-          <view class="edit-name" @click="openNameEditor">修改设备名</view>
         </view>
-        <view class="device-identity">
+        <view class="device-title-row">
-          <image class="device-avatar" src="../../static/device-assets/my-device-avatar.png" mode="aspectFill" />
+          <text class="device-name">{{ device.deviceName || "打弓佬" }}</text>
-          <view class="device-identity-text">
+          <view class="edit-name" @click="openNameEditor">
-            <text class="device-name">{{ device.deviceName || "我的智能弓" }}</text>
+            <image src="../../static/home-device/device-edit.png" mode="aspectFit" />
-            <text class="device-id">{{ maskedDeviceId }}</text>
           </view>
         </view>
-        <view class="device-stats">
+        <view class="device-id-row">
-          <view v-for="item in deviceRows" :key="item.label" class="device-stat">
+          <text>设备ID：{{ deviceIdText }}</text>
-            <text class="device-stat-label">{{ item.label }}</text>
+          <view class="device-id-toggle" @click="toggleDeviceId">
-            <text class="device-stat-value">{{ item.value }}</text>
+            <image
+              class="device-id-eye"
+              src="../../static/home-device/device-id-visibility.png"
+              mode="aspectFit"
+            />
           </view>
         </view>
       </view>
 
+      <view class="device-stats">
+        <view
+          v-for="(item, index) in designDeviceStats"
+          :key="item.label"
+          class="device-stat"
+          :class="{
+            'device-stat--divider': index > 0,
+            'device-stat--usage': index === 2,
+          }"
+        >
+          <text class="device-stat-label">{{ item.label }}</text>
+          <text class="device-stat-value">{{ item.value }}</text>
+        </view>
+      </view>
+
       <view class="device-actions">
         <view class="action-item" @click="toDeviceIntroPage">
-          <text class="action-icon">⌁</text>
+          <view class="action-icon">
+            <image src="../../static/home-device/device-action-intro.png" mode="aspectFit" />
+          </view>
           <text>设备介绍</text>
         </view>
         <view class="action-item" @click="goCalibration">
-          <text class="action-icon">⌖</text>
+          <view class="action-icon">
+            <image src="../../static/home-device/device-action-calibration.png" mode="aspectFit" />
+          </view>
           <text>弓箭调瞄</text>
         </view>
         <view class="action-item" @click="goFirmwareUpdate">
-          <text class="action-icon">↻</text>
+          <view class="action-icon">
-          <text>固件更新</text>
+            <image src="../../static/home-device/device-action-firmware.png" mode="aspectFit" />
+          </view>
+          <view class="action-label-wrap">
+            <text>固件更新</text>
+            <text class="action-badge action-badge--new">New</text>
+          </view>
         </view>
         <view class="action-item" @click="joinWifi">
-          <text class="action-icon">◌</text>
+          <view class="action-icon">
-          <text>WIFI设置</text>
+            <image src="../../static/home-device/device-action-wifi.png" mode="aspectFit" />
+          </view>
+          <view class="action-label-wrap">
+            <text>WIFI设置</text>
+            <text v-if="wifiStatusText === '未连接'" class="action-badge action-badge--offline">
+              未连接
+            </text>
+          </view>
         </view>
         <view class="action-item" @click="openQr">
-          <text class="action-icon">▦</text>
+          <view class="action-icon">
+            <image src="../../static/home-device/device-action-qrcode.png" mode="aspectFit" />
+          </view>
           <text>设备二维码</text>
         </view>
-        <view class="action-item action-item--danger" @click="openUnbindDialog">
+      </view>
-          <text class="action-icon">⊗</text>
+
-          <text>解除绑定</text>
+      <view class="unbind-entry" @click="openUnbindDialog">
-        </view>
+        <image
+          class="unbind-icon"
+          src="../../static/home-device/device-unbind.png"
+          mode="aspectFit"
+        />
+        <text>解除绑定</text>
       </view>
 
       <view v-if="calibration" class="calibration-tip">
@@ -505,162 +615,262 @@ onShow(async () => {
 }
 
 .device-page {
-  padding: 36rpx 32rpx 80rpx;
+  position: relative;
-  overflow-y: auto;
-}
-
-.device-card {
-  width: 100%;
-  box-sizing: border-box;
-  border: 1rpx solid rgba(255, 255, 255, 0.1);
-  border-radius: 24rpx;
-  background: linear-gradient(145deg, rgba(45, 54, 76, 0.96), rgba(19, 25, 43, 0.98));
-}
-
-.device-card {
-  padding: 32rpx;
-}
-
-.device-card-header,
-.device-identity,
-.device-stats,
-.confirm-actions,
-.name-input-row {
   display: flex;
+  min-height: calc(100vh - 100rpx);
+  box-sizing: border-box;
   align-items: center;
+  padding: 8rpx 24rpx 80rpx;
+  overflow: hidden;
+  color: #ffffff;
 }
 
-.device-card-header {
+.device-visual {
-  justify-content: space-between;
+  position: absolute;
+  top: 146rpx;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 610rpx;
+  pointer-events: none;
+}
+
+.device-stage {
+  position: absolute;
+  top: 214rpx;
+  left: 50%;
+  width: 750rpx;
+  transform: translateX(-50%);
+}
+
+.device-bow {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 562rpx;
+  transform: translateX(-50%);
+}
+
+.device-heading {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 16rpx;
 }
 
 .device-status {
   display: flex;
   align-items: center;
-  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 24rpx;
+  line-height: 30rpx;
 }
 
 .status-dot {
-  width: 14rpx;
+  width: 16rpx;
-  height: 14rpx;
+  height: 16rpx;
-  margin-right: 12rpx;
+  margin-right: 10rpx;
   border-radius: 50%;
 }
 
-.device-status--online {
-  color: #62e4a1;
-}
-
 .device-status--online .status-dot {
-  background: #62e4a1;
+  background: linear-gradient(180deg, #9aff97, #36bb34);
   box-shadow: 0 0 16rpx rgba(98, 228, 161, 0.8);
 }
 
-.device-status--offline {
-  color: #ff6e6e;
-}
-
 .device-status--offline .status-dot {
   background: #ff6e6e;
 }
 
-.edit-name {
+.device-title-row {
-  color: #fed847;
-  font-size: 24rpx;
-}
-
-.device-identity {
-  margin-top: 42rpx;
-}
-
-.device-avatar {
-  width: 144rpx;
-  height: 144rpx;
-  margin-right: 26rpx;
-  border-radius: 24rpx;
-}
-
-.device-identity-text {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  margin-top: 536rpx;
+  height: 52rpx;
+  line-height: 52rpx;
+  padding: 0 24rpx;
+  border-radius: 78rpx 78rpx 78rpx 78rpx;
+  background: rgba(0,0,0, 0.5);
 }
 
 .device-name {
-  color: #ffffff;
+  color: #FFD947;
-  font-size: 36rpx;
+  font-size: 28rpx;
-  font-weight: 600;
+  font-weight: 500;
+  line-height: 36rpx;
 }
 
-.device-id {
+.edit-name {
-  margin-top: 14rpx;
+  display: flex;
-  color: rgba(255, 255, 255, 0.52);
+  width: 40rpx;
+  height: 34rpx;
+  align-items: center;
+  justify-content: center;
+  margin-left: 6rpx;
+}
+
+.edit-name image {
+  width: 40rpx;
+  height: 34rpx;
+}
+
+.device-id-row {
+  display: flex;
+  align-items: center;
+  margin-top: 8rpx;
+  color: rgba(255, 255, 255, 0.76);
   font-size: 24rpx;
+  line-height: 32rpx;
+}
+
+.device-id-toggle {
+  display: flex;
+  width: 42rpx;
+  height: 32rpx;
+  align-items: center;
+  justify-content: center;
+  margin-left: 6rpx;
+}
+
+.device-id-eye {
+  width: 26rpx;
+  height: 20rpx;
 }
 
 .device-stats {
-  flex-wrap: wrap;
+  position: relative;
-  justify-content: space-between;
+  z-index: 2;
-  margin-top: 40rpx;
+  display: flex;
-  padding-top: 28rpx;
+  width: 704rpx;
-  border-top: 1rpx solid rgba(255, 255, 255, 0.1);
+  align-self: center;
+  margin-top: 100rpx;
+  padding: 14rpx 0 18rpx;
 }
 
 .device-stat {
-  width: 48%;
+  display: flex;
-  margin-bottom: 22rpx;
+  width: 168rpx;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: 0;
+  padding: 0 2rpx;
+  color: #f3e0b9;
 }
 
-.device-stat-label,
+.device-stat--usage {
-.device-stat-value {
+  width: 200rpx;
-  display: block;
+}
+
+.device-stat--divider {
+  border-left: 1rpx solid rgba(255, 255, 255, 0.3);
 }
 
 .device-stat-label {
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.7);
-  font-size: 22rpx;
+  font-size: 24rpx;
+  line-height: 30rpx;
+  white-space: nowrap;
 }
 
 .device-stat-value {
-  margin-top: 8rpx;
+  width: auto;
-  color: #ffffff;
+  margin-top: 10rpx;
-  font-size: 26rpx;
+  overflow: visible;
+  color: #f3e0b9;
+  font-size: 28rpx;
+  line-height: 36rpx;
+  letter-spacing: -0.5rpx;
+  text-align: center;
+  white-space: nowrap;
 }
 
 .device-actions {
+  position: relative;
+  z-index: 2;
   display: flex;
   width: 100%;
-  flex-wrap: wrap;
+  justify-content: space-between;
-  margin-top: 28rpx;
+  margin-top: 56rpx;
-  border-radius: 24rpx;
-  background: rgba(30, 38, 58, 0.88);
 }
 
 .action-item {
   display: flex;
-  width: 33.3333%;
+  width: 20%;
-  height: 142rpx;
-  box-sizing: border-box;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  color: rgba(255, 255, 255, 0.7);
-  color: #ffffff;
+  font-size: 22rpx;
-  font-size: 24rpx;
+  line-height: 30rpx;
-}
+  text-align: center;
-
-.action-item--danger {
-  color: #ff9898;
 }
 
 .action-icon {
   display: flex;
-  width: 56rpx;
+  width: 88rpx;
-  height: 56rpx;
+  height: 88rpx;
   align-items: center;
   justify-content: center;
-  margin-bottom: 12rpx;
+  margin-bottom: 10rpx;
-  border: 1rpx solid currentColor;
+  border: 2rpx solid rgba(243, 224, 185, 0.75);
   border-radius: 50%;
-  font-size: 32rpx;
+  color: #f3e0b9;
+  font-size: 46rpx;
+  line-height: 1;
+}
+
+.action-icon image {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.action-label-wrap {
+  position: relative;
+  display: flex;
+  min-height: 30rpx;
+  align-items: center;
+  justify-content: center;
+}
+
+.action-badge {
+  position: absolute;
+  top: -116rpx;
+  left: calc(50% + 38rpx);
+  display: flex;
+  width: 68rpx;
+  height: 34rpx;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-radius: 16rpx 4rpx 20rpx 4rpx;
+  color: #5c421f;
+  background: linear-gradient(133deg, #ffd19a 0%, #a17636 100%);
+  font-size: 18rpx;
+  line-height: 34rpx;
+  transform: translateX(-50%);
+}
+
+.unbind-entry {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 92rpx;
+  color: #ffd947;
+  font-size: 28rpx;
+  line-height: 38rpx;
+}
+
+.unbind-icon {
+  width: 37rpx;
+  height: 30rpx;
+  margin-right: 10rpx;
 }
 
 .calibration-tip {
@@ -775,8 +985,9 @@ onShow(async () => {
 }
 
 .confirm-actions {
+  display: flex;
   justify-content: space-between;
-  margin-top: 24rpx;
+  margin: 24rpx 0;
   gap: 16rpx;
 }
 
@@ -787,32 +998,11 @@ onShow(async () => {
 .qr-page {
   position: relative;
   width: 100%;
-  min-height: calc(100vh - 100rpx);
+  height: 100%;
+  min-height: 0;
   box-sizing: border-box;
   overflow: hidden;
-  background: radial-gradient(circle at 50% 46%, rgba(95, 78, 58, 0.9), rgba(8, 10, 25, 1) 70%);
+  background: transparent;
-}
-
-.qr-page::before,
-.qr-page::after {
-  position: absolute;
-  width: 620rpx;
-  height: 1rpx;
-  content: "";
-  background: rgba(255, 255, 255, 0.07);
-  box-shadow: 0 180rpx rgba(255, 255, 255, 0.05), 0 360rpx rgba(255, 255, 255, 0.04), 0 540rpx rgba(255, 255, 255, 0.03);
-}
-
-.qr-page::before {
-  top: 380rpx;
-  left: -160rpx;
-  transform: rotate(48deg);
-}
-
-.qr-page::after {
-  top: 420rpx;
-  right: -160rpx;
-  transform: rotate(-48deg);
 }
 
 .qr-corner {
@@ -839,7 +1029,8 @@ onShow(async () => {
   z-index: 1;
   display: flex;
   width: 100%;
-  min-height: calc(100vh - 100rpx);
+  height: 100%;
+  min-height: 0;
   box-sizing: border-box;
   flex-direction: column;
   align-items: center;