DataBuddyEngine/DataBuddy-vue
1
1
Fork 0
Code Issues Releases Activity

完善弹窗功能

Browse Source
This commit is contained in:
苏雨洛
2025-12-15 17:31:45 +08:00
parent 4bee473d98
commit d28e4e194c
20 changed files with 395 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/index/Components.vue
View File

@@ -1,28 +1,54 @@
<script setup>
import { defineAsyncComponent } from 'vue'
import { defineAsyncComponent, ref } from 'vue'
const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
const activeTab = ref('all')
const handleTabClick = (tabName) => {
activeTab.value = tabName
// 这里可以添加实际业务逻辑，例如：
// if (tabName === 'vue') {
// loadVueComponents()
// } else if (tabName === 'echarts') {
// loadEchartsComponents()
// } else {
// loadHtmlComponents()
// }
}
const emit = defineEmits(['show-modal'])
const handleCreate = () => {
emit('show-modal', {
title: '创建组件',
content: '开发中...',
theme: 'light'
})
}
</script>
<template>
<header class="header">
<div class="header-left">
<button class="header-button create-component"><i class="fa-solid fa-square-plus"></i> 创建组件</button>
<button class="header-button create-component" @click="handleCreate"><i class="fa-solid fa-square-plus"></i> 创建组件</button>
</div>
<div class="header-right">
<input type="text" placeholder="请输入名称" class="header-search"></input>
<button class="header-button search-button"><i class="fa-solid fa-magnifying-glass"></i></button>
</div>
<div class="header-components-list">
<button class="header-components-item header-button">VUE 组件</button>
<button class="header-components-item header-button">ECharts 组件</button>
<button class="header-components-item header-button">HTML 组件</button>
<button class="header-components-item header-button" :class="{ 'components-item-actived': activeTab === 'all' }" @click="handleTabClick('all')">全部组件</button>
<button class="header-components-item header-button" :class="{ 'components-item-actived': activeTab === 'vue' }" @click="handleTabClick('vue')">VUE 组件</button>
<button class="header-components-item header-button" :class="{ 'components-item-actived': activeTab === 'echarts' }" @click="handleTabClick('echarts')">ECharts 组件</button>
<button class="header-components-item header-button" :class="{ 'components-item-actived': activeTab === 'html' }" @click="handleTabClick('html')">HTML 组件</button>
</div>
</header>
<Nodata />
</template>
<style>
<style scoped>
.create-component {
color: #fff;
background-color: #00b7ff;
transition: background-color 0.2s ease;
}
.create-component:hover {
background-color: #00a2e2;
@@ -45,12 +71,13 @@ const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'
inset 0 4px 20px rgba(255,255,255,0.3);
color: #333;
text-shadow: 1px 1px 4px rgba(255,255,255,0.4);
transition: background-color 0.2s ease;
}
.header-components-item:hover {
background-color: rgba(255,255,255,0.25);
}
.components-item-actived,
.header-components-item:active {
background-color: rgba(255,255,255,0.5);
background-color: rgba(255,255,255,0.6);
}
</style>