【需求 20520】 perf: 加入配置提示

src/views/backend/settingsMenu/luckyWheelManage/index.vue

@@ -32,6 +32,10 @@
         <el-icon class="mr-2"><IEpSetting /></el-icon>
         抽奖配置
       </el-button>
+      <el-button class="config-tip-button" @click="configTipVisible = true">
+        <el-icon class="mr-2"><IEpInfoFilled /></el-icon>
+        配置提示
+      </el-button>
     </div>
 
     <!-- 表格区域 -->
@@ -141,6 +145,57 @@
       </template>
     </el-dialog>
 
+    <el-dialog v-model="configTipVisible" width="620px" top="18vh" class="config-tip-dialog">
+      <div class="config-tip-panel">
+        <div class="config-tip-hero">
+          <div class="config-tip-icon">
+            <el-icon><IEpInfoFilled /></el-icon>
+          </div>
+          <div>
+            <div class="config-tip-title">转盘配置建议</div>
+            <p class="config-tip-subtitle">
+              为了保证抽奖逻辑和页面展示效果正常，建议在配置前先确认以下规则。
+            </p>
+          </div>
+        </div>
+
+        <div class="config-tip-list">
+          <div class="config-tip-item">
+            <div class="config-tip-index">01</div>
+            <div class="config-tip-content">
+              <div class="config-tip-item-title">中奖概率总和不能超过 100%</div>
+              <p>
+                所有已启用奖品的中奖概率相加后不得超过 100%。如果总概率小于
+                100%，剩余概率将自动落到“祝福语”上，也就是“谢谢参与”。
+              </p>
+            </div>
+          </div>
+
+          <div class="config-tip-item">
+            <div class="config-tip-index">02</div>
+            <div class="config-tip-content">
+              <div class="config-tip-item-title">建议总配置项保持为偶数</div>
+              <p>
+                “已启用奖品”加上“谢谢参与”后的总数量，建议保持为偶数（如图1）；如果是奇数，转盘分区在页面上的展示会不够协调，视觉效果会受影响（如图2）。
+              </p>
+              <div class="config-tip-example">
+                <el-image
+                  v-for="(image, index) in configTipImages"
+                  :key="`${image}-${index}`"
+                  :src="image"
+                  :preview-src-list="configTipImages"
+                  :initial-index="index"
+                  fit="cover"
+                  preview-teleported
+                  class="config-tip-example-image"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
     <WheelConfig ref="wheelConfigRef" />
   </div>
 </template>
@@ -162,6 +217,11 @@ const { loading, list, total, reset, goToPage, changePageSize, refresh, searchPa
   usePageSearch(getWheelPrizeList)
 
 const dialogVisible = ref(false)
+const configTipVisible = ref(false)
+const configTipImages = [
+  'https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/readName/png/2026/04/03/Common/1775212125999.png',
+  'https://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/readName/png/2026/04/03/Common/1775212079319.png',
+]
 const dialogTitle = computed(() => (form.value.id ? '编辑' : '新增'))
 const formRef = ref<FormInstance>()
 
@@ -290,4 +350,141 @@ const handleWheelConfig = () => {
 .btn-icon {
   margin-right: 4px;
 }
+
+.config-tip-button {
+  border-color: #c9d7ff;
+  color: #3b6ff5;
+  background: linear-gradient(135deg, #f7faff 0%, #eef4ff 100%);
+}
+
+.config-tip-button:hover {
+  border-color: #9db7ff;
+  color: #2f5de0;
+  background: linear-gradient(135deg, #eef4ff 0%, #e4edff 100%);
+}
+
+.config-tip-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.config-tip-hero {
+  display: flex;
+  gap: 16px;
+  padding: 18px 20px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #f5f8ff 0%, #eef3ff 100%);
+  border: 1px solid #dbe6ff;
+}
+
+.config-tip-icon {
+  width: 44px;
+  height: 44px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 14px;
+  font-size: 22px;
+  color: #3b6ff5;
+  background: #fff;
+  box-shadow: 0 10px 24px rgba(59, 111, 245, 0.12);
+}
+
+.config-tip-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f2a44;
+  line-height: 1.4;
+}
+
+.config-tip-subtitle {
+  margin: 6px 0 0;
+  font-size: 13px;
+  line-height: 1.7;
+  color: #5b6475;
+}
+
+.config-tip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.config-tip-item {
+  display: flex;
+  gap: 14px;
+  padding: 18px 20px;
+  border-radius: 16px;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  box-shadow: 0 8px 24px rgba(31, 42, 68, 0.05);
+}
+
+.config-tip-index {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+
+.config-tip-content {
+  flex: 1;
+}
+
+.config-tip-item-title {
+  margin-bottom: 6px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f2a44;
+}
+
+.config-tip-content p {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.8;
+  color: #5b6475;
+}
+
+.config-tip-example {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.config-tip-example-image {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid #e5eaf3;
+  box-shadow: 0 8px 20px rgba(31, 42, 68, 0.08);
+  cursor: zoom-in;
+}
+
+:deep(.config-tip-dialog .el-dialog) {
+  border-radius: 20px;
+  overflow: hidden;
+}
+
+:deep(.config-tip-dialog .el-dialog__header) {
+  margin-right: 0;
+  padding: 22px 24px 0;
+}
+
+:deep(.config-tip-dialog .el-dialog__body) {
+  padding: 18px 24px 8px;
+}
+
+:deep(.config-tip-dialog .el-dialog__footer) {
+  padding: 0 24px 24px;
+}
 </style>