fix：【antd】【mall】diy-editor 的 navigation-bar 的 radio 不正确

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue

@@ -1,18 +1,18 @@
 <script lang="ts" setup>
 import type { NavigationBarCellProperty } from '../config';
 
-import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/util';
-
 import { computed, ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
 import {
   FormItem,
-  Image,
   Input,
   Radio,
+  RadioButton,
   RadioGroup,
   Slider,
+  Switch,
+  Tooltip,
 } from 'ant-design-vue';
 
 import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
@@ -51,16 +51,23 @@ const cellCount = computed(() => (props.isMp ? 6 : 8));
 const selectedHotAreaIndex = ref(0); // 选中的热区
 
 /** 处理热区被选中事件 */
-const handleHotAreaSelected = (
+function handleHotAreaSelected(
   cellValue: NavigationBarCellProperty,
   index: number,
-) => {
+) {
   selectedHotAreaIndex.value = index;
+  // 默认设置为选中文字，并设置属性
   if (!cellValue.type) {
     cellValue.type = 'text';
     cellValue.textColor = '#111111';
   }
-};
+  // 如果点击的是搜索框，则初始化搜索框的属性
+  if (cellValue.type === 'search') {
+    cellValue.placeholderPosition = 'left';
+    cellValue.backgroundColor = '#EEEEEE';
+    cellValue.textColor = '#969799';
+  }
+}
 </script>
 
 <template>
@@ -73,12 +80,20 @@ const handleHotAreaSelected = (
       class="m-b-16px"
       @hot-area-selected="handleHotAreaSelected"
     />
-    <Image v-if="isMp" alt="" class="w-19 h-8" :src="appNavBarMp" />
+    <img
+      v-if="isMp"
+      alt=""
+      style="width: 76px; height: 30px"
+      :src="appNavBarMp"
+    />
   </div>
   <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
     <template v-if="selectedHotAreaIndex === Number(cellIndex)">
-      <FormItem label="类型">
-        <RadioGroup v-model:value="cell.type">
+      <FormItem :prop="`cell[${cellIndex}].type`" label="类型">
+        <RadioGroup
+          v-model:value="cell.type"
+          @change="handleHotAreaSelected(cell, cellIndex)"
+        >
           <Radio value="text">文字</Radio>
           <Radio value="image">图片</Radio>
           <Radio value="search">搜索框</Radio>
@@ -86,38 +101,69 @@ const handleHotAreaSelected = (
       </FormItem>
       <!-- 1. 文字 -->
       <template v-if="cell.type === 'text'">
-        <FormItem label="内容">
+        <FormItem :prop="`cell[${cellIndex}].text`" label="内容">
           <Input v-model:value="cell!.text" :maxlength="10" show-count />
         </FormItem>
-        <FormItem label="颜色">
+        <FormItem :prop="`cell[${cellIndex}].text`" label="颜色">
           <ColorInput v-model="cell!.textColor" />
         </FormItem>
-        <FormItem label="链接">
+        <FormItem :prop="`cell[${cellIndex}].url`" label="链接">
           <AppLinkInput v-model="cell.url" />
         </FormItem>
       </template>
       <!-- 2. 图片 -->
       <template v-else-if="cell.type === 'image'">
-        <FormItem label="图片">
+        <FormItem :prop="`cell[${cellIndex}].imgUrl`" label="图片">
           <UploadImg
             v-model="cell.imgUrl"
             :limit="1"
+            height="56px"
+            width="56px"
             :show-description="false"
-            class="size-14"
           />
           <span class="text-xs text-gray-500">建议尺寸 56*56</span>
         </FormItem>
-        <FormItem label="链接">
+        <FormItem :prop="`cell[${cellIndex}].url`" label="链接">
           <AppLinkInput v-model="cell.url" />
         </FormItem>
       </template>
       <!-- 3. 搜索框 -->
       <template v-else>
-        <FormItem label="提示文字">
+        <FormItem label="框体颜色" prop="backgroundColor">
+          <ColorInput v-model="cell.backgroundColor" />
+        </FormItem>
+        <FormItem class="lef" label="文本颜色" prop="textColor">
+          <ColorInput v-model="cell.textColor" />
+        </FormItem>
+        <FormItem :prop="`cell[${cellIndex}].placeholder`" label="提示文字">
           <Input v-model:value="cell.placeholder" :maxlength="10" show-count />
         </FormItem>
-        <FormItem label="圆角">
-          <Slider v-model:value="cell.borderRadius" :max="100" :min="0" />
+        <FormItem label="文本位置" prop="placeholderPosition">
+          <RadioGroup v-model:value="cell!.placeholderPosition">
+            <Tooltip content="居左" placement="top">
+              <RadioButton value="left">
+                <IconifyIcon icon="ant-design:align-left-outlined" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip content="居中" placement="top">
+              <RadioButton value="center">
+                <IconifyIcon icon="ant-design:align-center-outlined" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="扫一扫" prop="showScan">
+          <Switch v-model:checked="cell!.showScan" />
+        </FormItem>
+        <FormItem :prop="`cell[${cellIndex}].borderRadius`" label="圆角">
+          <Slider
+            v-model:value="cell.borderRadius"
+            :max="100"
+            :min="0"
+            :show-input-controls="false"
+            input-size="small"
+            show-input
+          />
         </FormItem>
       </template>
     </template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue

@@ -42,13 +42,13 @@ const cellWidth = computed(() => {
 });
 
 /** 获取单元格样式 */
-const getCellStyle = (cell: NavigationBarCellProperty) => {
+function getCellStyle(cell: NavigationBarCellProperty) {
   return {
     width: `${cell.width * cellWidth.value + (cell.width - 1) * 10}px`,
     left: `${cell.left * cellWidth.value + (cell.left + 1) * 10}px`,
     position: 'absolute',
   } as StyleValue;
-};
+}
 
 /** 获取搜索框属性配置 */
 const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
@@ -61,7 +61,10 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
 });
 </script>
 <template>
-  <div class="navigation-bar" :style="bgStyle">
+  <div
+    class="flex h-[50px] items-center justify-between bg-white px-[6px]"
+    :style="bgStyle"
+  >
     <div class="flex h-full w-full items-center">
       <div
         v-for="(cell, cellIndex) in cellList"
@@ -82,35 +85,7 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
       v-if="property._local?.previewMp"
       :src="appNavbarMp"
       alt=""
-      class="w-22 h-8"
+      style="width: 86px; height: 30px"
     />
   </div>
 </template>
-<style lang="scss" scoped>
-.navigation-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 50px;
-  padding: 0 6px;
-  background: #fff;
-
-  /* 左边 */
-  .left {
-    margin-left: 8px;
-  }
-
-  .center {
-    flex: 1;
-    font-size: 14px;
-    line-height: 35px;
-    color: #333;
-    text-align: center;
-  }
-
-  /* 右边 */
-  .right {
-    margin-right: 8px;
-  }
-}
-</style>