From bb02444af1f3ab2d94e37f8a7ab8ccacdc36627e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E8=B6=8A?= <552369664@qq.com>
Date: Thu, 24 Jul 2025 16:56:45 +0800
Subject: [PATCH] =?UTF-8?q?new:=20=E3=80=90=E5=95=86=E5=9F=8E=E8=A3=85?=
 =?UTF-8?q?=E4=BF=AE=E3=80=91=E5=AF=BC=E8=88=AA=E6=A0=8F=E4=B8=AD=E7=9A=84?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A1=86=E6=B7=BB=E5=8A=A0=E6=9B=B4=E5=A4=9A?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../NavigationBar/components/CellProperty.vue | 32 ++++++++++++++++++-
 .../components/mobile/NavigationBar/config.ts |  6 ++++
 .../components/mobile/NavigationBar/index.vue |  7 ++--
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue b/src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue
index ea0e7ca9..6c671d3f 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue
@@ -13,7 +13,7 @@
   <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
     <template v-if="selectedHotAreaIndex === cellIndex">
       <el-form-item :prop="`cell[${cellIndex}].type`" label="类型">
-        <el-radio-group v-model="cell.type">
+        <el-radio-group v-model="cell.type" @change="handleHotAreaSelected(cell, cellIndex)">
           <el-radio value="text">文字</el-radio>
           <el-radio value="image">图片</el-radio>
           <el-radio value="search">搜索框</el-radio>
@@ -44,9 +44,32 @@
       </template>
       <!-- 3. 搜索框 -->
       <template v-else>
+        <el-form-item label="框体颜色" prop="backgroundColor">
+          <ColorInput v-model="cell.backgroundColor" />
+        </el-form-item>
+        <el-form-item class="lef" label="文本颜色" prop="textColor">
+          <ColorInput v-model="cell.textColor" />
+        </el-form-item>
         <el-form-item :prop="`cell[${cellIndex}].placeholder`" label="提示文字">
           <el-input v-model="cell.placeholder" maxlength="10" show-word-limit />
         </el-form-item>
+        <el-form-item label="文本位置" prop="placeholderPosition">
+          <el-radio-group v-model="cell!.placeholderPosition">
+            <el-tooltip content="居左" placement="top">
+              <el-radio-button value="left">
+                <Icon icon="ant-design:align-left-outlined" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip content="居中" placement="top">
+              <el-radio-button value="center">
+                <Icon icon="ant-design:align-center-outlined" />
+              </el-radio-button>
+            </el-tooltip>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="扫一扫" prop="showScan">
+          <el-switch v-model="cell!.showScan" />
+        </el-form-item>
         <el-form-item :prop="`cell[${cellIndex}].borderRadius`" label="圆角">
           <el-slider
             v-model="cell.borderRadius"
@@ -88,10 +111,17 @@ const cellCount = computed(() => (props.isMp ? 6 : 8))
 const selectedHotAreaIndex = ref(0)
 const 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>
 
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/config.ts b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
index 36612a3f..4fb5e7c9 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
@@ -45,8 +45,14 @@ export interface NavigationBarCellProperty {
   imgUrl: string
   // 图片链接
   url: string
+  // 搜索框：框体颜色
+  backgroundColor: string
   // 搜索框：提示文字
   placeholder: string
+  // 搜索框：提示文字位置
+  placeholderPosition: string
+  // 搜索框：是否显示扫一扫
+  showScan: boolean
   // 搜索框：边框圆角半径
   borderRadius: number
 }
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
index c5a92b31..104c6002 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
@@ -54,9 +54,12 @@ const getCellStyle = (cell: NavigationBarCellProperty) => {
 const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
   return {
     height: 30,
-    showScan: false,
+    backgroundColor: cell.backgroundColor,
+    showScan: cell.showScan,
     placeholder: cell.placeholder,
-    borderRadius: cell.borderRadius
+    borderRadius: cell.borderRadius,
+    textColor: cell.textColor,
+    placeholderPosition: cell.placeholderPosition
   } as SearchProperty
 })
 </script>