From f2492d5e403574e5735d9302bb2b154d2df30d07 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sat, 23 May 2026 15:02:53 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B7=A6=E4=BE=A7=E6=82=AC?=
 =?UTF-8?q?=E6=B5=AE=E6=98=BE=E7=A4=BA=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mobile/MobileSellerListingCreateView.css  | 76 ++++++++++++++++++-
 .../mobile/MobileSellerListingCreateView.vue  | 36 +++++++--
 2 files changed, 106 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/mobile/MobileSellerListingCreateView.css b/frontend/src/views/mobile/MobileSellerListingCreateView.css
index e418296..3afec6e 100644
--- a/frontend/src/views/mobile/MobileSellerListingCreateView.css
+++ b/frontend/src/views/mobile/MobileSellerListingCreateView.css
@@ -69,7 +69,7 @@
   margin-bottom: 8px;
   border-radius: 8px;
   background: #f8fafc;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .publish-field :deep(.van-field__label) {
@@ -84,6 +84,80 @@
   font-size: 14px;
 }
 
+.hint-label,
+.backend-hint-target.has-hint,
+.upload-title.has-hint {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  line-height: 1.35;
+  cursor: help;
+  outline: none;
+}
+
+.hint-label::before,
+.backend-hint-target.has-hint::before,
+.upload-title.has-hint::before,
+.hint-label::after,
+.backend-hint-target.has-hint::after,
+.upload-title.has-hint::after {
+  position: absolute;
+  z-index: 20;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.16s ease, visibility 0.16s ease;
+}
+
+.hint-label::before,
+.backend-hint-target.has-hint::before,
+.upload-title.has-hint::before {
+  content: "";
+  top: 50%;
+  left: calc(100% + 2px);
+  transform: translateY(-50%);
+  border: 6px solid transparent;
+  border-right-color: rgba(32, 36, 42, 0.96);
+}
+
+.hint-label::after,
+.backend-hint-target.has-hint::after,
+.upload-title.has-hint::after {
+  content: attr(data-hint);
+  top: 50%;
+  left: calc(100% + 14px);
+  width: min(242px, calc(100vw - 136px));
+  max-height: 156px;
+  overflow: auto;
+  transform: translateY(-50%);
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(32, 36, 42, 0.96);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.45;
+  white-space: normal;
+}
+
+.hint-label:hover::before,
+.hint-label:focus-visible::before,
+.backend-hint-target.has-hint:hover::before,
+.backend-hint-target.has-hint:focus-visible::before,
+.upload-title.has-hint:hover::before,
+.upload-title.has-hint:focus-visible::before,
+.hint-label:hover::after,
+.hint-label:focus-visible::after,
+.backend-hint-target.has-hint:hover::after,
+.backend-hint-target.has-hint:focus-visible::after,
+.upload-title.has-hint:hover::after,
+.upload-title.has-hint:focus-visible::after {
+  opacity: 1;
+  visibility: visible;
+}
+
 .radio-group,
 .multi-chip-group {
   display: flex;
diff --git a/frontend/src/views/mobile/MobileSellerListingCreateView.vue b/frontend/src/views/mobile/MobileSellerListingCreateView.vue
index c46ca36..f6dfe03 100644
--- a/frontend/src/views/mobile/MobileSellerListingCreateView.vue
+++ b/frontend/src/views/mobile/MobileSellerListingCreateView.vue
@@ -690,7 +690,14 @@ function readError(error: unknown, fallback: string) {
         <div v-for="item in quantityItems" :key="item.key" class="quantity-row">
           <div class="quantity-card">
             <div class="quantity-meta">
-              <strong><span>*</span>{{ item.label }}</strong>
+              <strong
+                class="backend-hint-target"
+                :class="{ 'has-hint': Boolean(item.placeholder) }"
+                :data-hint="item.placeholder"
+                :tabindex="item.placeholder ? 0 : -1"
+              >
+                <span>*</span>{{ item.label }}
+              </strong>
               <small>{{ item.price }}</small>
             </div>
             <input
@@ -832,7 +839,14 @@ function readError(error: unknown, fallback: string) {
         <div class="upload-list">
           <div v-for="slot in screenshotSlots" :key="slot.key" class="upload-line">
             <div class="upload-meta">
-              <strong>{{ slot.label }}<span v-if="isScreenshotRequired(slot)">*</span></strong>
+              <strong
+                class="upload-title"
+                :class="{ 'has-hint': Boolean(slot.hint) }"
+                :data-hint="slot.hint"
+                :tabindex="slot.hint ? 0 : -1"
+              >
+                {{ slot.label }}<span v-if="isScreenshotRequired(slot)">*</span>
+              </strong>
               <small>{{ slot.hint }}</small>
             </div>
             <div v-if="screenshotFiles[slot.key]" class="upload-preview">
@@ -871,7 +885,11 @@ function readError(error: unknown, fallback: string) {
           :placeholder="priceConfig.deposit_placeholder"
           suffix="元"
           class="publish-field"
-        />
+        >
+          <template #label>
+            <span class="hint-label" :data-hint="priceConfig.deposit_placeholder" tabindex="0">押金</span>
+          </template>
+        </van-field>
         <div class="result-grid">
           <van-field
             :model-value="calculatedRatioText"
@@ -879,7 +897,11 @@ function readError(error: unknown, fallback: string) {
             readonly
             :placeholder="priceConfig.ratio_description"
             class="publish-field result-field"
-          />
+          >
+            <template #label>
+              <span class="hint-label" :data-hint="priceConfig.ratio_description" tabindex="0">比例</span>
+            </template>
+          </van-field>
           <van-field
             :model-value="calculatedFinalPrice ? `¥${calculatedFinalPrice}` : ''"
             label="价格"
@@ -887,7 +909,11 @@ function readError(error: unknown, fallback: string) {
             required
             :placeholder="priceConfig.price_placeholder"
             class="publish-field result-field"
-          />
+          >
+            <template #label>
+              <span class="hint-label" :data-hint="priceConfig.price_placeholder" tabindex="0">价格</span>
+            </template>
+          </van-field>
         </div>
 
         <van-field