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 21:26:20 +08:00
parent c6077ff2ad
commit 3c38f1bee9
13 changed files with 933 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
draggable-panels/src/views/TestPage1.vue
View File

@@ -1,52 +1,43 @@
<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>
<el-row class="page-container" :gutter="20">
<el-col :span="12">
<div class="design-component">左侧内容区域</div>
</el-col>
<el-col :span="12">
<el-row :gutter="10">
<el-col :span="24">
<div class="design-component">右侧标题</div>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<div class="design-component">右侧列1</div>
</el-col>
<el-col :span="12">
<div class="design-component">右侧列2</div>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const message = ref('这是测试页面1')
// 测试页面1 - 基础布局
</script>
<style scoped>
.test-page {
.page-container {
padding: 20px;
background: #f5f5f5;
min-height: 100vh;
min-height: 100%;
}
h2 {
color: #333;
margin-bottom: 20px;
}
.grid-content {
.design-component {
background: #409eff;
color: white;
padding: 30px;
text-align: center;
border-radius: 4px;
margin-bottom: 10px;
}
</style>

81
draggable-panels/src/views/TestPage2.vue
View File

@@ -1,64 +1,53 @@
<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>
<el-row class="page-container" :gutter="20">
<el-col :span="24">
<div class="design-component form-title">表单标题区域</div>
</el-col>
<el-col :span="6">
<div class="design-component">用户名</div>
</el-col>
<el-col :span="18">
<div class="design-component">输入框占位</div>
</el-col>
<el-col :span="6">
<div class="design-component">密码</div>
</el-col>
<el-col :span="18">
<div class="design-component">密码框占位</div>
</el-col>
<el-col :span="24">
<div class="design-component submit-btn">提交按钮</div>
</el-col>
</el-row>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const formData = ref({
name: '',
email: ''
})
// 测试页面2 - 表单布局
</script>
<style scoped>
.test-page {
.page-container {
padding: 20px;
background: #fafafa;
min-height: 100vh;
min-height: 100%;
}
h2 {
color: #333;
margin-bottom: 20px;
}
.grid-content {
.design-component {
background: #67c23a;
color: white;
padding: 20px;
text-align: center;
border-radius: 4px;
margin-bottom: 10px;
}
.form-title {
background: #409eff;
font-size: 18px;
font-weight: bold;
}
.submit-btn {
background: #e6a23c;
}
</style>

97
draggable-panels/src/views/dashboard/Overview.vue
View File

@@ -1,72 +1,55 @@
<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>
<el-row class="page-container" :gutter="20">
<el-col :span="6">
<div class="design-component stat-card">
<div class="stat-title">总用户</div>
<div class="stat-value">1,234</div>
</div>
</el-col>
<el-col :span="6">
<div class="design-component stat-card">
<div class="stat-title">活跃用户</div>
<div class="stat-value">856</div>
</div>
</el-col>
<el-col :span="6">
<div class="design-component stat-card">
<div class="stat-title">订单数</div>
<div class="stat-value">432</div>
</div>
</el-col>
<el-col :span="6">
<div class="design-component stat-card">
<div class="stat-title">收入</div>
<div class="stat-value">¥12,345</div>
</div>
</el-col>
<el-col :span="16">
<div class="design-component chart-area">图表区域占位</div>
</el-col>
<el-col :span="8">
<div class="design-component sidebar">侧边栏信息</div>
</el-col>
</el-row>
</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 {
.page-container {
padding: 20px;
background: #f0f2f5;
min-height: 100vh;
min-height: 100%;
}
h2 {
color: #333;
margin-bottom: 20px;
}
.grid-content {
.design-component {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.stat-card {
@@ -91,5 +74,11 @@ h2 {
align-items: center;
justify-content: center;
color: #999;
background: #e8f4ff;
}
.sidebar {
height: 300px;
background: #f0f9ff;
}
</style>

81
draggable-panels/src/views/user/Profile.vue
View File

@@ -1,64 +1,46 @@
<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>
<el-row class="page-container" :gutter="20">
<el-col :span="8">
<div class="design-component avatar-section">
<div class="avatar">头像</div>
</div>
</el-col>
<el-col :span="16">
<el-row :gutter="10">
<el-col :span="12">
<div class="design-component info-item">姓名: 张三</div>
</el-col>
<el-col :span="12">
<div class="design-component info-item">邮箱: zhang@example.com</div>
</el-col>
<el-col :span="12">
<div class="design-component info-item">电话: 138****8888</div>
</el-col>
<el-col :span="12">
<div class="design-component info-item">部门: 技术部</div>
</el-col>
</el-row>
</el-col>
</el-row>
</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 {
.page-container {
padding: 20px;
background: #f5f5f5;
min-height: 100vh;
min-height: 100%;
}
h2 {
color: #333;
margin-bottom: 20px;
}
.grid-content {
.design-component {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}
.avatar-section {
@@ -80,14 +62,9 @@ h2 {
font-size: 18px;
}
.info-section {
height: 200px;
}
.info-item {
padding: 10px;
padding: 15px;
background: #f9f9f9;
border-radius: 4px;
color: #666;
}
</style>