From c5b1ad480fe69c0081cc60be4d3e094663cf7620 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Thu, 14 Mar 2024 00:13:40 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=82=E9=85=8D=E9=A1=B6=E9=83=A8=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/imgs/diy/app-nav-bar-mp.png        | Bin 0 -> 3595 bytes
 .../NavigationBar/components/CellProperty.vue |  90 ++++++++++++++++++
 .../components/mobile/NavigationBar/config.ts |  84 ++++++++++++----
 .../components/mobile/NavigationBar/index.vue |  80 +++++++++++-----
 .../mobile/NavigationBar/property.vue         |  85 +++++++++++------
 src/components/MagicCubeEditor/index.vue      |   2 +-
 6 files changed, 263 insertions(+), 78 deletions(-)
 create mode 100644 src/assets/imgs/diy/app-nav-bar-mp.png
 create mode 100644 src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue

diff --git a/src/assets/imgs/diy/app-nav-bar-mp.png b/src/assets/imgs/diy/app-nav-bar-mp.png
new file mode 100644
index 0000000000000000000000000000000000000000..c982804c7287c904468dad6252fd393c6cbd271f
GIT binary patch
literal 3595
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
RVWI#4002ovPDHLkV1jf&x=a87

literal 0
HcmV?d00001

diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue b/src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue
new file mode 100644
index 00000000..edc85f1a
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="h-40px flex items-center justify-center">
+    <MagicCubeEditor
+      v-model="cellList"
+      class="m-b-16px"
+      :rows="1"
+      :cols="cellCount"
+      :cube-size="38"
+      @hot-area-selected="handleHotAreaSelected"
+    />
+    <img src="@/assets/imgs/diy/app-nav-bar-mp.png" alt="" class="h-30px w-76px" v-if="isMp" />
+  </div>
+  <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
+    <template v-if="selectedHotAreaIndex === cellIndex">
+      <el-form-item label="类型" :prop="`cell[${cellIndex}].type`">
+        <el-radio-group v-model="cell.type">
+          <el-radio label="text">文字</el-radio>
+          <el-radio label="image">图片</el-radio>
+          <el-radio label="search">搜索框</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <!-- 1. 文字 -->
+      <template v-if="cell.type === 'text'">
+        <el-form-item label="内容" :prop="`cell[${cellIndex}].text`">
+          <el-input v-model="cell!.text" maxlength="10" show-word-limit />
+        </el-form-item>
+        <el-form-item label="颜色" :prop="`cell[${cellIndex}].text`">
+          <ColorInput v-model="cell!.textColor" />
+        </el-form-item>
+      </template>
+      <!-- 2. 图片 -->
+      <template v-else-if="cell.type === 'image'">
+        <el-form-item label="图片" :prop="`cell[${cellIndex}].imgUrl`">
+          <UploadImg v-model="cell.imgUrl" :limit="1" height="56px" width="56px">
+            <template #tip>建议尺寸 56*56</template>
+          </UploadImg>
+        </el-form-item>
+        <el-form-item label="链接" :prop="`cell[${cellIndex}].url`">
+          <AppLinkInput v-model="cell.url" />
+        </el-form-item>
+      </template>
+      <!-- 3. 搜索框 -->
+      <template v-else>
+        <el-form-item label="提示文字" :prop="`cell[${cellIndex}].placeholder`">
+          <el-input v-model="cell.placeholder" maxlength="10" show-word-limit />
+        </el-form-item>
+        <el-form-item label="圆角" :prop="`cell[${cellIndex}].borderRadius`">
+          <el-slider
+            v-model="cell.borderRadius"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+        </el-form-item>
+      </template>
+    </template>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { NavigationBarCellProperty } from '../config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+// 导航栏属性面板
+defineOptions({ name: 'NavigationBarCellProperty' })
+
+const props = defineProps<{
+  modelValue: NavigationBarCellProperty[]
+  isMp: boolean
+}>()
+const emit = defineEmits(['update:modelValue'])
+const { formData: cellList } = usePropertyForm(props.modelValue, emit)
+if (!cellList.value) cellList.value = []
+
+// 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
+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'
+  }
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/config.ts b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
index f722d525..36612a3f 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
@@ -2,22 +2,53 @@ import { DiyComponent } from '@/components/DiyEditor/util'
 
 /** 顶部导航栏属性 */
 export interface NavigationBarProperty {
-  // 页面标题
-  title: string
-  // 页面描述
-  description: string
-  // 顶部导航高度
-  navBarHeight: number
-  // 页面背景颜色
-  backgroundColor: string
-  // 页面背景图片
-  backgroundImage: string
+  // 背景类型
+  bgType: 'color' | 'img'
+  // 背景颜色
+  bgColor: string
+  // 图片链接
+  bgImg: string
   // 样式类型：默认 | 沉浸式
-  styleType: 'default' | 'immersion'
+  styleType: 'normal' | 'inner'
   // 常驻显示
   alwaysShow: boolean
-  // 是否显示返回按钮
-  showGoBack: boolean
+  // 小程序单元格列表
+  mpCells: NavigationBarCellProperty[]
+  // 其它平台单元格列表
+  otherCells: NavigationBarCellProperty[]
+  // 本地变量
+  _local: {
+    // 预览顶部导航（小程序）
+    previewMp: boolean
+    // 预览顶部导航（非小程序）
+    previewOther: boolean
+  }
+}
+
+/** 顶部导航栏 - 单元格 属性 */
+export interface NavigationBarCellProperty {
+  // 类型：文字 | 图片 | 搜索框
+  type: 'text' | 'image' | 'search'
+  // 宽度
+  width: number
+  // 高度
+  height: number
+  // 顶部位置
+  top: number
+  // 左侧位置
+  left: number
+  // 文字内容
+  text: string
+  // 文字颜色
+  textColor: string
+  // 图片地址
+  imgUrl: string
+  // 图片链接
+  url: string
+  // 搜索框：提示文字
+  placeholder: string
+  // 搜索框：边框圆角半径
+  borderRadius: number
 }
 
 // 定义组件
@@ -26,13 +57,26 @@ export const component = {
   name: '顶部导航栏',
   icon: 'tabler:layout-navbar',
   property: {
-    title: '页面标题',
-    description: '',
-    navBarHeight: 35,
-    backgroundColor: '#fff',
-    backgroundImage: '',
-    styleType: 'default',
+    bgType: 'color',
+    bgColor: '#fff',
+    bgImg: '',
+    styleType: 'normal',
     alwaysShow: true,
-    showGoBack: true
+    mpCells: [
+      {
+        type: 'text',
+        textColor: '#111111'
+      }
+    ],
+    otherCells: [
+      {
+        type: 'text',
+        textColor: '#111111'
+      }
+    ],
+    _local: {
+      previewMp: true,
+      previewOther: false
+    }
   }
 } as DiyComponent<NavigationBarProperty>
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
index f5cfff8c..c684aee7 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
@@ -1,45 +1,73 @@
 <template>
-  <div
-    class="navigation-bar"
-    :style="{
-      height: `${property.navBarHeight}px`,
-      backgroundColor: property.backgroundColor,
-      backgroundImage: `url(${property.backgroundImage})`
-    }"
-  >
-    <!-- 左侧 -->
-    <div class="left">
-      <Icon icon="ep:arrow-left" v-show="property.showGoBack" />
+  <div class="navigation-bar" :style="bgStyle">
+    <div class="h-full w-full flex items-center">
+      <div v-for="(cell, cellIndex) in cellList" :key="cellIndex" :style="getCellStyle(cell)">
+        <span v-if="cell.type === 'text'">{{ cell.text }}</span>
+        <img v-else-if="cell.type === 'image'" :src="cell.imgUrl" alt="" class="h-full w-full" />
+        <SearchBar v-else :property="getSearchProp" />
+      </div>
     </div>
-    <!-- 中间 -->
-    <div
-      class="center"
-      :style="{
-        height: `${property.navBarHeight}px`,
-        lineHeight: `${property.navBarHeight}px`
-      }"
-    >
-      {{ property.title }}
-    </div>
-    <!-- 右侧 -->
-    <div class="right"></div>
+    <img
+      v-if="property._local?.previewMp"
+      src="@/assets/imgs/diy/app-nav-bar-mp.png"
+      alt=""
+      class="h-30px w-86px"
+    />
   </div>
 </template>
 <script setup lang="ts">
-import { NavigationBarProperty } from './config'
+import { NavigationBarCellProperty, NavigationBarProperty } from './config'
+import SearchBar from '@/components/DiyEditor/components/mobile/SearchBar/index.vue'
+import { StyleValue } from 'vue'
+import { SearchProperty } from '@/components/DiyEditor/components/mobile/SearchBar/config'
 
 /** 页面顶部导航栏 */
 defineOptions({ name: 'NavigationBar' })
 
-defineProps<{ property: NavigationBarProperty }>()
+const props = defineProps<{ property: NavigationBarProperty }>()
+
+// 背景
+const bgStyle = computed(() => {
+  const background =
+    props.property.bgType === 'img' && props.property.bgImg
+      ? `url(${props.property.bgImg}) no-repeat top center / 100% 100%`
+      : props.property.bgColor
+  return { background }
+})
+// 单元格列表
+const cellList = computed(() =>
+  props.property._local?.previewMp ? props.property.mpCells : props.property.otherCells
+)
+// 单元格宽度
+const cellWidth = computed(() => {
+  return props.property._local?.previewMp ? (375 - 80 - 86) / 6 : (375 - 90) / 8
+})
+// 获得单元格样式
+const 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 = (cell: NavigationBarCellProperty) => {
+  return {
+    height: 30,
+    showScan: false,
+    placeholder: cell.placeholder,
+    borderRadius: cell.borderRadius
+  } as SearchProperty
+}
 </script>
 <style lang="scss" scoped>
 .navigation-bar {
   display: flex;
-  height: 35px;
+  height: 50px;
   background: #fff;
   justify-content: space-between;
   align-items: center;
+  padding: 0 6px;
 
   /* 左边 */
   .left {
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/property.vue b/src/components/DiyEditor/components/mobile/NavigationBar/property.vue
index c4ca4588..b2bc8c15 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/property.vue
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/property.vue
@@ -1,53 +1,73 @@
 <template>
   <el-form label-width="80px" :model="formData" :rules="rules">
-    <el-form-item label="页面标题" prop="title">
-      <el-input v-model="formData!.title" placeholder="页面标题" maxlength="25" show-word-limit />
-    </el-form-item>
-    <el-form-item label="页面描述" prop="description">
-      <el-input
-        type="textarea"
-        v-model="formData!.description"
-        placeholder="用户通过微信分享给朋友时，会自动显示页面描述"
-      />
-    </el-form-item>
     <el-form-item label="样式" prop="styleType">
       <el-radio-group v-model="formData!.styleType">
-        <el-radio label="default">默认</el-radio>
-        <el-radio label="immersion">沉浸式</el-radio>
+        <el-radio label="normal">标准</el-radio>
+        <el-tooltip
+          content="沉侵式头部仅支持微信小程序、APP，建议页面第一个组件为图片展示类组件"
+          placement="top"
+        >
+          <el-radio label="inner">沉浸式</el-radio>
+        </el-tooltip>
       </el-radio-group>
     </el-form-item>
-    <el-form-item label="常驻显示" prop="alwaysShow" v-if="formData.styleType === 'immersion'">
+    <el-form-item label="常驻显示" prop="alwaysShow" v-if="formData.styleType === 'inner'">
       <el-radio-group v-model="formData!.alwaysShow">
         <el-radio :label="false">关闭</el-radio>
-        <el-radio :label="true">开启</el-radio>
+        <el-tooltip content="常驻显示关闭后,头部小组件将在页面滑动时淡入" placement="top">
+          <el-radio :label="true">开启</el-radio>
+        </el-tooltip>
       </el-radio-group>
     </el-form-item>
-    <el-form-item label="高度" prop="navBarHeight">
-      <el-slider
-        v-model="formData!.navBarHeight"
-        :max="100"
-        :min="35"
-        show-input
-        input-size="small"
-      />
+    <el-form-item label="背景类型" prop="bgType">
+      <el-radio-group v-model="formData.bgType">
+        <el-radio label="color">纯色</el-radio>
+        <el-radio label="img">图片</el-radio>
+      </el-radio-group>
     </el-form-item>
-    <el-form-item label="返回按钮" prop="showGoBack">
-      <el-switch v-model="formData!.showGoBack" />
+    <el-form-item label="背景颜色" prop="bgColor" v-if="formData.bgType === 'color'">
+      <ColorInput v-model="formData.bgColor" />
     </el-form-item>
-    <el-form-item label="背景颜色" prop="backgroundColor">
-      <ColorInput v-model="formData!.backgroundColor" />
-    </el-form-item>
-    <el-form-item label="背景图片" prop="backgroundImage">
-      <UploadImg v-model="formData!.backgroundImage" :limit="1">
-        <template #tip>建议宽度 750px</template>
-      </UploadImg>
+    <el-form-item label="背景图片" prop="bgImg" v-else>
+      <UploadImg v-model="formData.bgImg" :limit="1" width="56px" height="56px" />
     </el-form-item>
+    <el-card class="property-group" shadow="never">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <span>内容（小程序）</span>
+          <el-form-item prop="_local.previewMp" class="m-b-0!">
+            <el-checkbox
+              v-model="formData._local.previewMp"
+              @change="formData._local.previewOther = !formData._local.previewMp"
+              >预览</el-checkbox
+            >
+          </el-form-item>
+        </div>
+      </template>
+      <NavigationBarCellProperty v-model="formData.mpCells" is-mp />
+    </el-card>
+    <el-card class="property-group" shadow="never">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <span>内容（非小程序）</span>
+          <el-form-item prop="_local.previewOther" class="m-b-0!">
+            <el-checkbox
+              v-model="formData._local.previewOther"
+              @change="formData._local.previewMp = !formData._local.previewOther"
+              >预览</el-checkbox
+            >
+          </el-form-item>
+        </div>
+      </template>
+      <NavigationBarCellProperty v-model="formData.otherCells" :is-mp="false" />
+    </el-card>
   </el-form>
 </template>
 
 <script setup lang="ts">
 import { NavigationBarProperty } from './config'
 import { usePropertyForm } from '@/components/DiyEditor/util'
+import NavigationBarCellProperty from '@/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue'
 // 导航栏属性面板
 defineOptions({ name: 'NavigationBarProperty' })
 // 表单校验
@@ -58,6 +78,9 @@ const rules = {
 const props = defineProps<{ modelValue: NavigationBarProperty }>()
 const emit = defineEmits(['update:modelValue'])
 const { formData } = usePropertyForm(props.modelValue, emit)
+if (!formData.value._local) {
+  formData.value._local = { previewMp: true, previewOther: false }
+}
 </script>
 
 <style scoped lang="scss"></style>
diff --git a/src/components/MagicCubeEditor/index.vue b/src/components/MagicCubeEditor/index.vue
index 26ea179d..9b9a43cc 100644
--- a/src/components/MagicCubeEditor/index.vue
+++ b/src/components/MagicCubeEditor/index.vue
@@ -189,7 +189,7 @@ const emit = defineEmits(['update:modelValue', 'hotAreaSelected'])
 const emitUpdateModelValue = () => emit('update:modelValue', hotAreas)
 
 // 热区选中
-const selectedHotAreaIndex = ref(-1)
+const selectedHotAreaIndex = ref(0)
 const handleHotAreaSelected = (hotArea: Rect, index: number) => {
   selectedHotAreaIndex.value = index
   emit('hotAreaSelected', hotArea, index)