feat: 布局优化
This commit is contained in:
@@ -1,237 +0,0 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
BasicLayout,
|
||||
CardLayout,
|
||||
TabLayout,
|
||||
FullWidthLayout,
|
||||
FormLayout
|
||||
} from './components'
|
||||
|
||||
// Tab Layout 示例数据
|
||||
const tabs = ref([
|
||||
{
|
||||
key: 'tab1',
|
||||
tab: '标签页1',
|
||||
forceRender: true
|
||||
},
|
||||
{
|
||||
key: 'tab2',
|
||||
tab: '标签页2',
|
||||
forceRender: true
|
||||
},
|
||||
{
|
||||
key: 'tab3',
|
||||
tab: '标签页3',
|
||||
forceRender: false
|
||||
}
|
||||
])
|
||||
|
||||
const activeTabKey = ref('tab1')
|
||||
|
||||
// Form Layout 示例
|
||||
const formData = ref({
|
||||
name: '',
|
||||
email: '',
|
||||
description: ''
|
||||
})
|
||||
|
||||
const submitLoading = ref(false)
|
||||
|
||||
const handleFormSubmit = () => {
|
||||
submitLoading.value = true
|
||||
setTimeout(() => {
|
||||
submitLoading.value = false
|
||||
console.log('表单提交:', formData.value)
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
const handleFormCancel = () => {
|
||||
console.log('表单取消')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout-examples">
|
||||
<h2>布局组件使用示例</h2>
|
||||
|
||||
<!-- 1. BasicLayout 示例 -->
|
||||
<h3>1. BasicLayout - 基础布局</h3>
|
||||
<BasicLayout
|
||||
title="基础布局页面"
|
||||
subtitle="这是一个基础布局的示例，适用于大部分页面"
|
||||
:show-back="true"
|
||||
@back="console.log('返回')"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button type="primary">额外操作</a-button>
|
||||
</template>
|
||||
|
||||
<div class="example-content">
|
||||
<p>这里放置页面内容...</p>
|
||||
<a-table :columns="[]" :data-source="[]" />
|
||||
</div>
|
||||
</BasicLayout>
|
||||
|
||||
<!-- 2. CardLayout 示例 -->
|
||||
<h3>2. CardLayout - 卡片布局</h3>
|
||||
<CardLayout
|
||||
title="卡片布局页面"
|
||||
subtitle="这是一个卡片布局的示例"
|
||||
:show-back="true"
|
||||
:show-padding="true"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button type="primary">操作</a-button>
|
||||
</template>
|
||||
|
||||
<div class="example-content">
|
||||
<p>卡片内容...</p>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="名称">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入名称" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</CardLayout>
|
||||
|
||||
<!-- 3. TabLayout 示例 -->
|
||||
<h3>3. TabLayout - 标签页布局</h3>
|
||||
<TabLayout
|
||||
:tabs="tabs"
|
||||
v-model:active-key="activeTabKey"
|
||||
:show-back="true"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button type="primary">标签页操作</a-button>
|
||||
</template>
|
||||
|
||||
<template #tab1>
|
||||
<div class="tab-content">
|
||||
<h4>标签页1的内容</h4>
|
||||
<p>这是第一个标签页的内容...</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #tab2>
|
||||
<div class="tab-content">
|
||||
<h4>标签页2的内容</h4>
|
||||
<p>这是第二个标签页的内容...</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #tab3>
|
||||
<div class="tab-content">
|
||||
<h4>标签页3的内容</h4>
|
||||
<p>这是第三个标签页的内容...</p>
|
||||
</div>
|
||||
</template>
|
||||
</TabLayout>
|
||||
|
||||
<!-- 4. FullWidthLayout 示例 -->
|
||||
<h3>4. FullWidthLayout - 全宽布局</h3>
|
||||
<FullWidthLayout
|
||||
:show-back="true"
|
||||
:show-padding="true"
|
||||
>
|
||||
<template #header>
|
||||
<div class="custom-header">
|
||||
<h2>自定义头部</h2>
|
||||
<p>这是全宽布局的自定义头部</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #extra>
|
||||
<a-button type="primary">全宽操作</a-button>
|
||||
</template>
|
||||
|
||||
<div class="example-content">
|
||||
<p>全宽内容...</p>
|
||||
<a-table :columns="[]" :data-source="[]" />
|
||||
</div>
|
||||
</FullWidthLayout>
|
||||
|
||||
<!-- 5. FormLayout 示例 -->
|
||||
<h3>5. FormLayout - 表单布局</h3>
|
||||
<FormLayout
|
||||
title="表单布局页面"
|
||||
subtitle="这是一个表单布局的示例"
|
||||
:show-back="true"
|
||||
:submit-loading="submitLoading"
|
||||
@submit="handleFormSubmit"
|
||||
@cancel="handleFormCancel"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="名称">
|
||||
<a-input v-model:value="formData.name" placeholder="请输入名称" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="邮箱">
|
||||
<a-input v-model:value="formData.email" placeholder="请输入邮箱" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="描述">
|
||||
<a-textarea
|
||||
v-model:value="formData.description"
|
||||
placeholder="请输入描述"
|
||||
:rows="4"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</FormLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.layout-examples {
|
||||
padding: 24px;
|
||||
background: var(--color-bg);
|
||||
min-height: 100vh;
|
||||
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin: 32px 0 16px 0;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.example-content {
|
||||
padding: 24px;
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-card);
|
||||
border: 1px solid var(--color-border);
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 24px;
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius-card);
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.custom-header {
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 14px;
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user