营销：适配商城装修组件【列表导航】

src/components/DiyEditor/components/mobile/MenuList/config.ts

+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 列表导航属性 */
+export interface MenuListProperty {
+  // 导航菜单列表
+  list: MenuListItemProperty[]
+  // 组件样式
+  style: ComponentStyle
+}
+/** 列表导航项目属性 */
+export interface MenuListItemProperty {
+  // 图标链接
+  iconUrl: string
+  // 标题
+  title: string
+  // 标题颜色
+  titleColor: string
+  // 副标题
+  subtitle: string
+  // 副标题颜色
+  subtitleColor: string
+  // 链接
+  url: string
+}
+
+// 定义组件
+export const component = {
+  id: 'MenuList',
+  name: '列表导航',
+  icon: 'fa-solid:list',
+  property: {
+    list: [],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<MenuListProperty>

src/components/DiyEditor/components/mobile/MenuList/index.vue

+<template>
+  <div class="min-h-42px flex flex-col">
+    <div
+      v-for="(item, index) in property.list"
+      :key="index"
+      class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px"
+    >
+      <div class="flex flex-1 flex-row items-center gap-8px">
+        <el-image v-if="item.iconUrl" class="h-16px w-16px" :src="item.iconUrl" />
+        <span class="text-16px" :style="{ color: item.titleColor }">{{ item.title }}</span>
+      </div>
+      <div class="item-center flex flex-row justify-center gap-4px">
+        <span class="text-12px" :style="{ color: item.subtitleColor }">{{ item.subtitle }}</span>
+        <Icon icon="ep-arrow-right" color="#000" :size="16" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MenuListProperty } from './config'
+/** 列表导航 */
+defineOptions({ name: 'MenuList' })
+defineProps<{ property: MenuListProperty }>()
+</script>
+
+<style scoped lang="scss">
+.item + .item {
+  border-top: 1px solid #eee;
+}
+</style>

src/components/DiyEditor/components/mobile/MenuList/property.vue

+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-text tag="p"> 菜单设置 </el-text>
+    <el-text type="info" size="small"> 拖动左侧的小圆点可以调整顺序 </el-text>
+
+    <!-- 表单 -->
+    <el-form label-width="60px" :model="formData" class="m-t-8px">
+      <div v-if="formData.list.length">
+        <VueDraggable
+          :list="formData.list"
+          item-key="index"
+          handle=".drag-icon"
+          :forceFallback="true"
+          :animation="200"
+        >
+          <template #item="{ element, index }">
+            <div class="mb-4px flex flex-col gap-4px rounded bg-gray-100 p-8px">
+              <div class="flex flex-row justify-between">
+                <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
+                <Icon icon="ep:delete" class="text-red-500" @click="handleDeleteMenu(index)" />
+              </div>
+              <el-form-item label="图标" prop="iconUrl">
+                <UploadImg v-model="element.iconUrl" height="80px" width="80px">
+                  <template #tip> 建议尺寸：44 * 44 </template>
+                </UploadImg>
+              </el-form-item>
+              <el-form-item label="标题" prop="title">
+                <InputWithColor v-model="element.title" v-model:color="element.titleColor" />
+              </el-form-item>
+              <el-form-item label="副标题" prop="subtitle">
+                <InputWithColor v-model="element.subtitle" v-model:color="element.subtitleColor" />
+              </el-form-item>
+              <el-form-item label="链接" prop="url">
+                <el-input v-model="element.url" />
+              </el-form-item>
+            </div>
+          </template>
+        </VueDraggable>
+      </div>
+      <el-form-item label-width="0">
+        <el-button @click="handleAddMenu" type="primary" plain class="m-t-8px w-full">
+          <Icon icon="ep:plus" class="mr-5px" /> 添加菜单
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import VueDraggable from 'vuedraggable'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+import { MenuListProperty } from '@/components/DiyEditor/components/mobile/MenuList/config'
+
+/** 列表导航属性面板 */
+defineOptions({ name: 'MenuListProperty' })
+
+const props = defineProps<{ modelValue: MenuListProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+
+/* 添加菜单 */
+const handleAddMenu = () => {
+  formData.value.list.push({
+    titleColor: '#333',
+    subtitleColor: '#bbb'
+  })
+}
+/* 删除菜单 */
+const handleDeleteMenu = (index: number) => {
+  formData.value.list.splice(index, 1)
+}
+</script>
+
+<style scoped lang="scss"></style>

src/components/DiyEditor/util.ts

@@ -103,8 +103,9 @@ export const PAGE_LIBS = [
     components: [
     components: [
       'SearchBar',
       'SearchBar',
       'NoticeBar',
       'NoticeBar',
-      'GridNavigation',
-      'ListNavigation',
+      'MenuSwiper',
+      'MenuGrid',
+      'MenuList',
       'Divider',
       'Divider',
       'TitleBar'
       'TitleBar'
     ]
     ]

src/components/InputWithColor/index.vue

+<template>
+  <el-input v-model="valueRef" v-bind="$attrs">
+    <template #append>
+      <el-color-picker v-model="colorRef" :predefine="COLORS" />
+    </template>
+  </el-input>
+</template>
+
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+
+/**
+ * 带颜色选择器输入框
+ */
+defineOptions({ name: 'InputWithColor' })
+
+const props = defineProps({
+  modelValue: propTypes.string.def('').isRequired,
+  color: propTypes.string.def('').isRequired
+})
+
+watch(
+  () => props.modelValue,
+  (val: string) => {
+    if (val === unref(valueRef)) return
+    valueRef.value = val
+  }
+)
+
+const emit = defineEmits(['update:modelValue', 'update:color'])
+
+// 输入框的值
+const valueRef = ref(props.modelValue)
+watch(
+  () => valueRef.value,
+  (val: string) => {
+    emit('update:modelValue', val)
+  }
+)
+// 颜色
+const colorRef = ref(props.color)
+watch(
+  () => colorRef.value,
+  (val: string) => {
+    emit('update:color', val)
+  }
+)
+</script>
+<style scoped lang="scss">
+:deep(.el-input-group__append) {
+  padding: 0;
+  .el-color-picker__trigger {
+    padding: 0;
+    border-left: none;
+    border-radius: 0 var(--el-input-border-radius) var(--el-input-border-radius) 0;
+  }
+}
+</style>