From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue | 128 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 128 insertions(+), 0 deletions(-)
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 0000000..6c671d3
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/components/CellProperty.vue
@@ -0,0 +1,128 @@
+<template>
+ <div class="h-40px flex items-center justify-center">
+ <MagicCubeEditor
+ v-model="cellList"
+ :cols="cellCount"
+ :cube-size="38"
+ :rows="1"
+ class="m-b-16px"
+ @hot-area-selected="handleHotAreaSelected"
+ />
+ <img v-if="isMp" alt="" class="h-30px w-76px" src="@/assets/imgs/diy/app-nav-bar-mp.png" />
+ </div>
+ <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" @change="handleHotAreaSelected(cell, cellIndex)">
+ <el-radio value="text">鏂囧瓧</el-radio>
+ <el-radio value="image">鍥剧墖</el-radio>
+ <el-radio value="search">鎼滅储妗�</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ <!-- 1. 鏂囧瓧 -->
+ <template v-if="cell.type === 'text'">
+ <el-form-item :prop="`cell[${cellIndex}].text`" label="鍐呭">
+ <el-input v-model="cell!.text" maxlength="10" show-word-limit />
+ </el-form-item>
+ <el-form-item :prop="`cell[${cellIndex}].text`" label="棰滆壊">
+ <ColorInput v-model="cell!.textColor" />
+ </el-form-item>
+ <el-form-item :prop="`cell[${cellIndex}].url`" label="閾炬帴">
+ <AppLinkInput v-model="cell.url" />
+ </el-form-item>
+ </template>
+ <!-- 2. 鍥剧墖 -->
+ <template v-else-if="cell.type === 'image'">
+ <el-form-item :prop="`cell[${cellIndex}].imgUrl`" label="鍥剧墖">
+ <UploadImg v-model="cell.imgUrl" :limit="1" height="56px" width="56px">
+ <template #tip>寤鸿灏哄 56*56</template>
+ </UploadImg>
+ </el-form-item>
+ <el-form-item :prop="`cell[${cellIndex}].url`" label="閾炬帴">
+ <AppLinkInput v-model="cell.url" />
+ </el-form-item>
+ </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"
+ :max="100"
+ :min="0"
+ :show-input-controls="false"
+ input-size="small"
+ show-input
+ />
+ </el-form-item>
+ </template>
+ </template>
+ </template>
+</template>
+
+<script lang="ts" setup>
+import { NavigationBarCellProperty } from '../config'
+import { useVModel } from '@vueuse/core'
+// 瀵艰埅鏍忓睘鎬ч潰鏉�
+defineOptions({ name: 'NavigationBarCellProperty' })
+
+const props = withDefaults(
+ defineProps<{
+ modelValue: NavigationBarCellProperty[]
+ isMp: boolean
+ }>(),
+ {
+ modelValue: () => [],
+ isMp: true
+ }
+)
+const emit = defineEmits(['update:modelValue'])
+const cellList = useVModel(props, 'modelValue', emit)
+
+// 鍗曞厓鏍兼暟閲忥細灏忕▼搴�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'
+ }
+ // 濡傛灉鐐瑰嚮鐨勬槸鎼滅储妗嗭紝鍒欏垵濮嬪寲鎼滅储妗嗙殑灞炴��
+ if (cellValue.type === 'search') {
+ cellValue.placeholderPosition = 'left'
+ cellValue.backgroundColor = '#EEEEEE'
+ cellValue.textColor = '#969799'
+ }
+}
+</script>
+
+<style lang="scss" scoped></style>
--
Gitblit v1.8.0