161 lines
3.3 KiB
Vue
161 lines
3.3 KiB
Vue
<template>
|
||
<div class="ui-plugins-demo">
|
||
<h1>UI库插件系统演示</h1>
|
||
|
||
<!-- 图表插件示例 -->
|
||
<section class="demo-section">
|
||
<h2>📊 图表插件</h2>
|
||
<div class="demo-container">
|
||
<ChartPlugin
|
||
type="bar"
|
||
:data="chartData"
|
||
:options="chartOptions"
|
||
/>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 编辑器插件示例 -->
|
||
<section class="demo-section">
|
||
<h2>📝 代码编辑器插件</h2>
|
||
<div class="demo-container">
|
||
<EditorPlugin
|
||
v-model="codeContent"
|
||
language="javascript"
|
||
theme="vs-dark"
|
||
:options="editorOptions"
|
||
/>
|
||
</div>
|
||
<p><strong>当前代码:</strong></p>
|
||
<pre>{{ codeContent }}</pre>
|
||
</section>
|
||
|
||
<!-- 基础UI组件 -->
|
||
<section class="demo-section">
|
||
<h2>🎨 基础组件</h2>
|
||
<DtButton @click="showMessage">点击测试</DtButton>
|
||
<DtModal v-model="showModal" title="插件系统演示">
|
||
<p>这是通过插件系统扩展的基础UI组件！</p>
|
||
</DtModal>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from 'vue'
|
||
import { ChartPlugin, EditorPlugin } from '@deotaland/ui'
|
||
import { DtButton, DtModal } from '@deotaland/ui'
|
||
|
||
// 图表数据
|
||
const chartData = reactive({
|
||
labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
||
datasets: [{
|
||
label: '销售数据',
|
||
data: [65, 59, 80, 81, 56, 55],
|
||
backgroundColor: [
|
||
'rgba(255, 99, 132, 0.2)',
|
||
'rgba(54, 162, 235, 0.2)',
|
||
'rgba(255, 205, 86, 0.2)',
|
||
'rgba(75, 192, 192, 0.2)',
|
||
'rgba(153, 102, 255, 0.2)',
|
||
'rgba(255, 159, 64, 0.2)'
|
||
],
|
||
borderColor: [
|
||
'rgba(255, 99, 132, 1)',
|
||
'rgba(54, 162, 235, 1)',
|
||
'rgba(255, 205, 86, 1)',
|
||
'rgba(75, 192, 192, 1)',
|
||
'rgba(153, 102, 255, 1)',
|
||
'rgba(255, 159, 64, 1)'
|
||
],
|
||
borderWidth: 1
|
||
}]
|
||
})
|
||
|
||
const chartOptions = {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: {
|
||
position: 'top'
|
||
},
|
||
title: {
|
||
display: true,
|
||
text: '月度销售图表'
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: true
|
||
}
|
||
}
|
||
}
|
||
|
||
// 编辑器内容
|
||
const codeContent = ref(`// 欢迎使用UI插件系统
|
||
import { ChartPlugin, EditorPlugin } from '@deotaland/ui'
|
||
|
||
const myChart = {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['A', 'B', 'C'],
|
||
datasets: [{
|
||
label: '数据集',
|
||
data: [1, 2, 3]
|
||
}]
|
||
}
|
||
}
|
||
|
||
// 编辑器支持多种语言和主题
|
||
export default myChart`)
|
||
|
||
const editorOptions = {
|
||
fontSize: 14,
|
||
minimap: { enabled: true },
|
||
wordWrap: 'on'
|
||
}
|
||
|
||
// 模态框状态
|
||
const showModal = ref(false)
|
||
|
||
// 方法
|
||
const showMessage = () => {
|
||
showModal.value = true
|
||
console.log('UI插件系统运行正常！')
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.ui-plugins-demo {
|
||
padding: 20px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.demo-section {
|
||
margin-bottom: 40px;
|
||
padding: 20px;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 8px;
|
||
background: #f9fafb;
|
||
}
|
||
|
||
.demo-section h2 {
|
||
margin-top: 0;
|
||
color: #374151;
|
||
border-bottom: 2px solid #3b82f6;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.demo-container {
|
||
margin-top: 16px;
|
||
min-height: 300px;
|
||
}
|
||
|
||
pre {
|
||
background: #1f2937;
|
||
color: #f9fafb;
|
||
padding: 16px;
|
||
border-radius: 6px;
|
||
overflow-x: auto;
|
||
margin-top: 8px;
|
||
}
|
||
</style> |