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/TabBar/property.vue | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 103 insertions(+), 0 deletions(-)
diff --git a/src/components/DiyEditor/components/mobile/TabBar/property.vue b/src/components/DiyEditor/components/mobile/TabBar/property.vue
new file mode 100644
index 0000000..e435012
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/TabBar/property.vue
@@ -0,0 +1,103 @@
+<template>
+ <div class="tab-bar">
+ <!-- 琛ㄥ崟 -->
+ <el-form :model="formData" label-width="80px">
+ <el-form-item label="涓婚" prop="theme">
+ <el-select v-model="formData!.theme" @change="handleThemeChange">
+ <el-option
+ v-for="(theme, index) in THEME_LIST"
+ :key="index"
+ :label="theme.name"
+ :value="theme.id"
+ >
+ <template #default>
+ <div class="flex items-center justify-between">
+ <Icon :icon="theme.icon" :color="theme.color" />
+ <span>{{ theme.name }}</span>
+ </div>
+ </template>
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item label="榛樿棰滆壊">
+ <ColorInput v-model="formData!.style.color" />
+ </el-form-item>
+ <el-form-item label="閫変腑棰滆壊">
+ <ColorInput v-model="formData!.style.activeColor" />
+ </el-form-item>
+ <el-form-item label="瀵艰埅鑳屾櫙">
+ <el-radio-group v-model="formData!.style.bgType">
+ <el-radio-button value="color">绾壊</el-radio-button>
+ <el-radio-button value="img">鍥剧墖</el-radio-button>
+ </el-radio-group>
+ </el-form-item>
+ <el-form-item label="閫夋嫨棰滆壊" v-if="formData!.style.bgType === 'color'">
+ <ColorInput v-model="formData!.style.bgColor" />
+ </el-form-item>
+ <el-form-item label="閫夋嫨鍥剧墖" v-if="formData!.style.bgType === 'img'">
+ <UploadImg v-model="formData!.style.bgImg" width="100%" height="50px" class="min-w-200px">
+ <template #tip> 寤鸿灏哄 375 * 50 </template>
+ </UploadImg>
+ </el-form-item>
+
+ <el-text tag="p">鍥炬爣璁剧疆</el-text>
+ <el-text type="info" size="small"> 鎷栧姩宸︿笂瑙掔殑灏忓渾鐐瑰彲瀵瑰叾鎺掑簭, 鍥炬爣寤鸿灏哄 44*44 </el-text>
+ <Draggable v-model="formData.items" :limit="5">
+ <template #default="{ element }">
+ <div class="m-b-8px flex items-center justify-around">
+ <div class="flex flex-col items-center justify-between">
+ <UploadImg
+ v-model="element.iconUrl"
+ width="40px"
+ height="40px"
+ :show-delete="false"
+ :show-btn-text="false"
+ />
+ <el-text size="small">鏈�変腑</el-text>
+ </div>
+ <div>
+ <UploadImg
+ v-model="element.activeIconUrl"
+ width="40px"
+ height="40px"
+ :show-delete="false"
+ :show-btn-text="false"
+ />
+ <el-text>宸查�変腑</el-text>
+ </div>
+ </div>
+ <el-form-item prop="text" label="鏂囧瓧" label-width="48px" class="m-b-8px!">
+ <el-input v-model="element.text" placeholder="璇疯緭鍏ユ枃瀛�" />
+ </el-form-item>
+ <el-form-item prop="url" label="閾炬帴" label-width="48px" class="m-b-0!">
+ <AppLinkInput v-model="element.url" />
+ </el-form-item>
+ </template>
+ </Draggable>
+ </el-form>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { TabBarProperty, component, THEME_LIST } from './config'
+import { useVModel } from '@vueuse/core'
+// 搴曢儴瀵艰埅鏍�
+defineOptions({ name: 'TabBarProperty' })
+
+const props = defineProps<{ modelValue: TabBarProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const formData = useVModel(props, 'modelValue', emit)
+
+// 灏嗘暟鎹簱鐨勫�兼洿鏂板埌鍙充晶灞炴�ф爮
+component.property.items = formData.value.items
+
+// 瑕佺殑涓婚
+const handleThemeChange = () => {
+ const theme = THEME_LIST.find((theme) => theme.id === formData.value.theme)
+ if (theme?.color) {
+ formData.value.style.activeColor = theme.color
+ }
+}
+</script>
+
+<style lang="scss" scoped></style>
--
Gitblit v1.8.0