wfz/fauto-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2

Browse Source
This commit is contained in:
wfz
2025-12-21 20:58:34 +08:00
parent 83bafa4e1e
commit c6077ff2ad
22 changed files with 2004 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
draggable-panels/src/views/TestPage1.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<div class="test-page">
<h2>测试页面 1</h2>
<el-row :gutter="20">
<el-col :span="12">
<div class="grid-content">左侧内容区域</div>
</el-col>
<el-col :span="12">
<div class="grid-content">右侧内容区域</div>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="8">
<div class="grid-content">列 1</div>
</el-col>
<el-col :span="8">
<div class="grid-content">列 2</div>
</el-col>
<el-col :span="8">
<div class="grid-content">列 3</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const message = ref('这是测试页面1')
</script>
<style scoped>
.test-page {
padding: 20px;
background: #f5f5f5;
min-height: 100vh;
}
h2 {
color: #333;
margin-bottom: 20px;
}
.grid-content {
background: #409eff;
color: white;
padding: 30px;
text-align: center;
border-radius: 4px;
}
</style>

64
draggable-panels/src/views/TestPage2.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="test-page">
<h2>测试页面 2 - 表单布局</h2>
<el-row :gutter="20">
<el-col :span="24">
<div class="grid-content">表单标题区域</div>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="6">
<div class="grid-content">标签</div>
</el-col>
<el-col :span="18">
<div class="grid-content">输入框</div>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="6">
<div class="grid-content">标签</div>
</el-col>
<el-col :span="18">
<div class="grid-content">输入框</div>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="24">
<div class="grid-content">提交按钮</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const formData = ref({
name: '',
email: ''
})
</script>
<style scoped>
.test-page {
padding: 20px;
background: #fafafa;
min-height: 100vh;
}
h2 {
color: #333;
margin-bottom: 20px;
}
.grid-content {
background: #67c23a;
color: white;
padding: 20px;
text-align: center;
border-radius: 4px;
}
</style>

95
draggable-panels/src/views/dashboard/Overview.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<div class="overview-page">
<h2>仪表板概览</h2>
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content stat-card">
<div class="stat-title">总用户</div>
<div class="stat-value">1,234</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content stat-card">
<div class="stat-title">活跃用户</div>
<div class="stat-value">856</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content stat-card">
<div class="stat-title">订单数</div>
<div class="stat-value">432</div>
</div>
</el-col>
<el-col :span="6">
<div class="grid-content stat-card">
<div class="stat-title">收入</div>
<div class="stat-value">¥12,345</div>
</div>
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="16">
<div class="grid-content chart-area">图表区域</div>
</el-col>
<el-col :span="8">
<div class="grid-content">侧边栏信息</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const stats = ref({
users: 1234,
active: 856,
orders: 432,
revenue: 12345
})
</script>
<style scoped>
.overview-page {
padding: 20px;
background: #f0f2f5;
min-height: 100vh;
}
h2 {
color: #333;
margin-bottom: 20px;
}
.grid-content {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.stat-card {
text-align: center;
}
.stat-title {
color: #666;
font-size: 14px;
margin-bottom: 10px;
}
.stat-value {
color: #333;
font-size: 24px;
font-weight: bold;
}
.chart-area {
height: 300px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
}
</style>

93
draggable-panels/src/views/user/Profile.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<div class="profile-page">
<h2>用户资料</h2>
<el-row :gutter="20">
<el-col :span="8">
<div class="grid-content avatar-section">
<div class="avatar">头像</div>
</div>
</el-col>
<el-col :span="16">
<div class="grid-content info-section">
<el-row :gutter="10">
<el-col :span="12">
<div class="info-item">姓名: 张三</div>
</el-col>
<el-col :span="12">
<div class="info-item">邮箱: zhang@example.com</div>
</el-col>
</el-row>
<el-row :gutter="10" style="margin-top: 10px;">
<el-col :span="12">
<div class="info-item">电话: 138****8888</div>
</el-col>
<el-col :span="12">
<div class="info-item">部门: 技术部</div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const userInfo = ref({
name: '张三',
email: 'zhang@example.com',
phone: '138****8888',
department: '技术部'
})
</script>
<style scoped>
.profile-page {
padding: 20px;
background: #f5f5f5;
min-height: 100vh;
}
h2 {
color: #333;
margin-bottom: 20px;
}
.grid-content {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.avatar-section {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.avatar {
width: 120px;
height: 120px;
background: #409eff;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.info-section {
height: 200px;
}
.info-item {
padding: 10px;
background: #f9f9f9;
border-radius: 4px;
color: #666;
}
</style>