如下述代码
1，是一个弹窗的代码页面（如图
1所示），调整一下左侧的"SQL查询"，当分辨率高变形的有点厉害了，请参照代码2中的样式所示，请优化"SQL查询"的样式，并完整的写出修改后的代码（不改变代码
1中的功能，即"sql查询"框中能够输入sql语句不变）
### 代码
1：src\views\handle\dataset\add\AddView
.vue
```vue
<template>
<div class="sql
-dataset
-container">
<el
-container class="layout
-container">
<!
-- 右侧SQL配置表单
-->
<el
-aside width="40%" class="config
-aside">
<div class="config
-section">
<div class="section
-header">
<h2><el
-icon><setting /></el
-icon> SQL数据集配置</h2>
</div>
<el
-form
:model="form"
:rules="rules"
label
-position="top"
class="config
-form"
ref="formRef"
>
<!
-- 数据集名称
- 修改为行内布局
-->
<el
-form
-item v
-if="props
.id===''" label="数据集名称" prop="name" class="form
-item
-card inline
-form
-item">
<el
-input
v
-model="form
.name"
pl
aceholder="例如: 用户行为分析数据集"
size="large"
:prefix
-icon="Document"
/>
</el
-form
-item>
<!
-- SQL编辑器
-->
<el
-form
-item label="SQL查询" prop="sql" class="form
-item
-card sql
-editor
-item">
<div class="sql
-editor
-container">
<V
AceEditor
v
-model:value="form
.sql"
lang="sql"
theme="github"
style="height: 300px; width:
100%"
:options="{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
highlightActiveLine: true,
showLineNumbers: true,
tabSize: 2,
}"
/>
<div class="sql
-tips">
<el
-tag type="info" size="small">
<el
-icon><info
-filled /></el
-icon>
提示: 请确保SQL语法正确且符合数据源规范
</el
-tag>
</div>
</div>
</el
-form
-item>
</el
-form>
</div>
</el
-aside>
<!
-- 左侧数据预览
-->
<el
-main class="preview
-main">
<div class="preview
-section">
<div class="section
-header">
<div class="header
-left">
<h2><el
-icon><data
-line /></el
-icon> 数据预览</h2>
</div>
<div class="header
-right">
<el
-button type="warning" plain size="small" @click="emit('cancel')" :icon="Close">取消</el
-button>
<el
-button type="success" plain size="small"
:disabled="!form
.sql" @click="fetchPreviewData" :icon="Refresh">执行SQL预览</el
-button>
<el
-button type="primary" plain size="small" @click="handleSave" :icon="Check">保存</el
-button>
</div>
</div>
<div class="preview
-content">
<zr
-table :tableModule="tableModule"
/>
</div>
</div>
</el
-main>
</el
-container>
</div>
</template>
<script setup>
import {ref, reactive, onMounted, getCurrentInstance} from 'vue'
import { V
AceEditor } from 'vue3
-ace-editor'
import '@/components/CodeEdit/
ace-config
.js'
import {
Setting,
DataLine,
Document,
Refresh,
Check,
Close,
InfoFilled, Edit, Download
} from '@element
-plus/icons
-vue'
import ZrTable from "@/components/ZrTable/index
.vue";
import {buildFilterSos} from "@/components/ZrTable/table
.js";
import {
handleDataSetCreate,
handleDataSetGet,
handleDataSetPreviewData,
handleDataSetReconstruct
} from "@/api/handle/dataset
.js";
const { proxy } = getCurrentInstance()
const props = defineProps({
sceneId:{
type: String,
default: '',
},
id:{
type: String,
default: '',
}
})
const emit = defineEmits(['saved', 'cancel'])
const form = ref({
id:props
.id,
name: '',
sceneId:props
.sceneId,
type:'view',
sql: '',
info:'',
})
//数据预览
const columnsData= ref([])
const queryData = ref([])
const state = reactive({
columns: columnsData, // 表格配置
query: queryData, // 查询条件配置
queryForm: {}, // 查询form表单
loading: false, // 加载状态
dataList: [], // 列表数据
pages:false,
})
const { loading, dataList, columns, pages, query, queryForm } = toRefs(state)
const formRef = ref(null)
// 预览数据
// 传给子组件的
const tableModule = ref({
callback: fetchPreviewData, // 回调，子组件中可以看到很多调用callback的，这里对应的是获取列表数据的方法
// 以下不说了，上面都给解释了
queryForm,
columns,
dataList,
loading,
pages,
query,
})
const rules = reactive({
name: [
{ required: true, message: '请输入数据集名称', trigger: 'blur' },
{ max: 50, message: '名称长度不能超过50个字符', trigger: 'blur' }
],
sql: [
{ required: true, message: '请输入SQL查询语句', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (!value || !value
.trim()) {
callback(new Error('SQL不能为空'))
} else if (!value
.toLowerCase()
.includes('select')) {
callback(new Error('SQL必须是SELECT查询语句'))
} else {
callback()
}
},
trigger: 'blur'
}
]
})
async function fetchPreviewData() {
state
.loading = true
const valid = await formRef
.value
.validate()
if (!valid) {
proxy
.$modal
.msgError("校验错误,请修改好再次执行")
return
}
// 掉自己的接口，切勿复制粘贴
handleDataSetPreviewData({
sql:form
.value
.sql
})
.then((res) => {
if (res
.success) {
if(res
.data
.pageData
.length>0){
for (let key in res
.data
.pageData[0]) {
columnsData
.value
.push({prop: key, label:key, align: 'center',show:
1})
}
}
state
.dataList = res
.data
.pageData
proxy
.$modal
.msgSuccess('SQL执行成功')
} else {
proxy
.$modal
.msgError(res
.message)
}
})
state
.loading = false
}
const handleSave = async () => {
const valid = await formRef
.value
.validate()
if (!valid) return
form
.value
.info=JSON
.stringify({
sql:form
.value
.sql
})
const method=form
.value
.id===""?handleDataSetCreate:handleDataSetReconstruct
method(form
.value)
.then((res) => {
if (res
.success) {
emit('saved',{id: res
.data })
} else {
proxy
.$modal
.msgError(res
.message)
}
})
}
watch(() => props
.id,
(newid, oldid) => {
if (newid !== oldid && newid!=="") { // 引用变化时触发
handleDataSetGet(newid)
.then((res) => {
if(res
.success){
form
.value
.sql=JSON
.parse(res
.data
.info)?
.sql;
}
})
}
},
{ immediate: true } // 注意：不要用 deep: true
);
</script>
<style scoped lang="s
css">
.sql
-dataset
-container {
height: calc(90vh
- 60px);
padding: 20px;
background
-color: #f5f7fa;
}
.layout
-container {
height:
100%;
background: #fff;
border
-radius:
12px;
box
-shadow: 0 2px
12px 0 rgba(0, 0, 0, 0
.05);
overflow: hidden;
display: flex;
}
.config
-aside {
background: #f9fafc;
border
-right:
1px solid var(
--el
-border
-color
-light);
padding: 24px;
display: flex;
flex
-direction: column;
}
.preview
-main {
padding: 24px;
background: #fff;
display: flex;
flex
-direction: column;
}
.section
-header {
display: flex;
justify
-content:
space-between;
align
-items: center;
margin
-bottom: 24px;
h2 {
margin: 0;
color: var(
--el
-text
-color
-primary);
font
-weight: 600;
font
-size:
18px;
display: flex;
align
-items: center;
gap: 8px;
}
.header
-left,
.header
-right {
display: flex;
align
-items: center;
}
}
.preview
-content {
flex:
1;
border:
1px solid var(
--el
-border
-color
-light);
border
-radius: 8px;
overflow: hidden;
display: flex;
flex
-direction: column;
}
.config
-form {
flex:
1;
display: flex;
flex
-direction: column;
:deep(
.el
-form
-item) {
margin
-bottom: 20px;
&
.inline
-form
-item {
:deep(
.el
-form
-item__label) {
display: inline
-flex;
align
-items: center;
width: auto;
margin
-right:
12px;
padding
-bottom: 0;
}
:deep(
.el
-form
-item__content) {
display: inline
-flex;
flex:
1;
}
}
.el
-form
-item__label {
font
-weight: 500;
padding
-bottom: 8px;
color: var(
--el
-text
-color
-regular);
font
-size:
14px;
}
}
}
.form
-item
-card {
background: #fff;
padding:
16px;
border
-radius: 8px;
border
-left: 3px solid var(
--el
-color
-primary);
box
-shadow: 0
1px 4px rgba(0, 0, 0, 0
.05);
}
.sql
-editor
-item {
flex:
1;
display: flex;
flex
-direction: column;
:deep(
.el
-form
-item__content) {
flex:
1;
display: flex;
flex
-direction: column;
}
}
.sql
-editor
-container {
flex:
1;
display: flex;
flex
-direction: column;
border:
1px solid var(
--el
-border
-color
-light);
border
-radius: 4px;
overflow: hidden;
}
.sql
-tips {
padding: 8px
12px;
background: var(
--el
-color
-info
-light
-9);
border
-top:
1px solid var(
--el
-border
-color
-light);
.el
-tag {
width:
100%;
justify
-content: flex
-start;
.el
-icon {
margin
-right: 6px;
}
}
}
.form
-actions {
margin
-top: 24px;
padding
-top:
16px;
display: flex;
justify
-content: flex
-end;
gap:
16px;
border
-top:
1px dashed var(
--el
-border
-color);
}
.refresh
-btn {
:deep(
.el
-icon) {
margin
-right: 6px;
}
}
@media (max
-width: 992px) {
.layout
-container {
flex
-direction: column;
}
.config
-aside {
width:
100% !important;
border
-right: none;
border
-bottom:
1px solid var(
--el
-border
-color
-light);
}
}
</style>
```
### 代码2：src\views\handle\dataset\add\AddView
.vue
```vue
<template>
<div class="sql
-dataset
-container">
<el
-container class="layout
-container">
<!
-- 左侧：数据集名称和SQL查询
-->
<el
-aside class="config
-aside">
<div class="config
-section">
<div class="section
-header">
<h2><el
-icon><setting /></el
-icon> SQL数据集配置</h2>
</div>
<el
-form
:model="form"
:rules="rules"
label
-position="top"
class="config
-form"
ref="formRef"
>
<!
-- 数据集名称
-->
<el
-form
-item v
-if="props
.id === ''" label="数据集名称" prop="name" class="form
-item
-card inline
-form
-item">
<el
-input
v
-model="form
.name"
pl
aceholder="例如: 用户行为分析数据集"
size="large"
:prefix
-icon="Document"
/>
</el
-form
-item>
<!
-- SQL编辑器
-->
<el
-form
-item label="SQL查询" prop="sql" class="form
-item
-card sql
-editor
-item">
<div class="sql
-editor
-container">
<V
AceEditor
v
-model:value="form
.sql"
lang="sql"
theme="github"
style="height:
100%; width:
100%"
:options="{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
highlightActiveLine: true,
showLineNumbers: true,
tabSize: 2,
}"
/>
<div class="sql
-tips">
<el
-tag type="info" size="small">
<el
-icon><info
-filled /></el
-icon>
提示: 请确保SQL语法正确且符合数据源规范
</el
-tag>
</div>
</div>
</el
-form
-item>
</el
-form>
</div>
</el
-aside>
<!
-- 右侧：数据预览
-->
<el
-main class="preview
-main">
<div class="preview
-section">
<div class="section
-header">
<div class="header
-left">
<h2><el
-icon><data
-line /></el
-icon> 数据预览</h2>
</div>
<div class="header
-right">
<el
-button type="warning" plain size="small" @click="emit('cancel')" :icon="Close">取消</el
-button>
<el
-button type="success" plain size="small"
:disabled="!form
.sql" @click="fetchPreviewData" :icon="Refresh">执行SQL预览</el
-button>
<el
-button type="primary" plain size="small" @click="handleSave" :icon="Check">保存</el
-button>
</div>
</div>
<div class="preview
-content">
<zr
-table :tableModule="tableModule"
/>
</div>
</div>
</el
-main>
</el
-container>
</div>
</template>
<script setup>
import {ref, reactive, onMounted, getCurrentInstance, watch} from 'vue'
import { V
AceEditor } from 'vue3
-ace-editor'
import '@/components/CodeEdit/
ace-config
.js'
import {
Setting,
DataLine,
Document,
Refresh,
Check,
Close,
InfoFilled, Edit, Download
} from '@element
-plus/icons
-vue'
import ZrTable from "@/components/ZrTable/index
.vue";
import {buildFilterSos} from "@/components/ZrTable/table
.js";
import {
handleDataSetCreate,
handleDataSetGet,
handleDataSetPreviewData,
handleDataSetReconstruct
} from "@/api/handle/dataset
.js";
const { proxy } = getCurrentInstance()
const props = defineProps({
sceneId:{
type: String,
default: '',
},
id:{
type: String,
default: '',
}
})
const emit = defineEmits(['saved', 'cancel'])
const form = ref({
id:props
.id,
name: '',
sceneId:props
.sceneId,
type:'view',
sql: '',
info:'',
})
//数据预览
const columnsData= ref([])
const queryData = ref([])
const state = reactive({
columns: columnsData, // 表格配置
query: queryData, // 查询条件配置
queryForm: {}, // 查询form表单
loading: false, // 加载状态
dataList: [], // 列表数据
pages:false,
})
const { loading, dataList, columns, pages, query, queryForm } = toRefs(state)
const formRef = ref(null)
// 预览数据
// 传给子组件的
const tableModule = ref({
callback: fetchPreviewData, // 回调，子组件中可以看到很多调用callback的，这里对应的是获取列表数据的方法
// 以下不说了，上面都给解释了
queryForm,
columns,
dataList,
loading,
pages,
query,
})
const rules = reactive({
name: [
{ required: true, message: '请输入数据集名称', trigger: 'blur' },
{ max: 50, message: '名称长度不能超过50个字符', trigger: 'blur' }
],
sql: [
{ required: true, message: '请输入SQL查询语句', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (!value || !value
.trim()) {
callback(new Error('SQL不能为空'))
} else if (!value
.toLowerCase()
.includes('select')) {
callback(new Error('SQL必须是SELECT查询语句'))
} else {
callback()
}
},
trigger: 'blur'
}
]
})
async function fetchPreviewData() {
state
.loading = true
const valid = await formRef
.value
.validate()
if (!valid) {
proxy
.$modal
.msgError("校验错误,请修改好再次执行")
return
}
// 掉自己的接口，切勿复制粘贴
handleDataSetPreviewData({
sql:form
.value
.sql
})
.then((res) => {
if (res
.success) {
columnsData
.value = []; // 重置列数据
if(res
.data
.pageData
.length>0){
for (let key in res
.data
.pageData[0]) {
columnsData
.value
.push({prop: key, label:key, align: 'center',show:
1})
}
}
state
.dataList = res
.data
.pageData
proxy
.$modal
.msgSuccess('SQL执行成功')
} else {
proxy
.$modal
.msgError(res
.message)
}
})
state
.loading = false
}
const handleSave = async () => {
const valid = await formRef
.value
.validate()
if (!valid) return
form
.value
.info=JSON
.stringify({
sql:form
.value
.sql
})
const method=form
.value
.id===""?handleDataSetCreate:handleDataSetReconstruct
method(form
.value)
.then((res) => {
if (res
.success) {
emit('saved',{id: res
.data })
} else {
proxy
.$modal
.msgError(res
.message)
}
})
}
watch(() => props
.id,
(newid, oldid) => {
if (newid !== oldid && newid!=="") { // 引用变化时触发
handleDataSetGet(newid)
.then((res) => {
if(res
.success){
form
.value
.sql=JSON
.parse(res
.data
.info)?
.sql;
}
})
}
},
{ immediate: true } // 注意：不要用 deep: true
);
</script>
<style scoped lang="s
css">
.sql
-dataset
-container {
height: calc(90vh
- 60px);
padding:
16px;
background
-color: #f5f7fa;
}
.layout
-container {
height:
100%;
background: #fff;
border
-radius: 8px;
box
-shadow: 0
1px 6px rgba(0, 0, 0, 0
.05);
overflow: hidden;
display: flex; /* 使用flex横向布局 */
flex
-direction: row; /* 横向排列 */
}
.config
-aside {
background: #f9fafc;
border
-right:
1px solid var(
--el
-border
-color
-light); /* 右侧边框分隔 */
padding:
18px;
display: flex;
flex
-direction: column;
width: 50%; /* 左侧占50%宽度 */
min-width: 300px; /* 最小宽度限制 */
}
.preview
-main {
padding:
18px;
background: #fff;
display: flex;
flex
-direction: column;
flex:
1; /* 右侧占剩余宽度 */
min-width: 300px; /* 最小宽度限制 */
}
.section
-header {
display: flex;
flex
-wrap: wrap;
justify
-content:
space-between;
align
-items: center;
margin
-bottom:
16px;
gap:
12px;
h2 {
margin: 0;
color: var(
--el
-text
-color
-primary);
font
-weight: 600;
font
-size:
16px;
display: flex;
align
-items: center;
gap: 6px;
white
-space: nowrap;
}
}
.preview
-content {
flex:
1;
border:
1px solid var(
--el
-border
-color
-light);
border
-radius: 6px;
overflow: hidden;
display: flex;
flex
-direction: column;
min-height: 250px;
}
.config
-form {
flex:
1;
display: flex;
flex
-direction: column;
:deep(
.el
-form
-item) {
margin
-bottom:
16px;
}
}
.form
-item
-card {
background: #fff;
padding:
12px;
border
-radius: 6px;
border
-left: 2px solid var(
--el
-color
-primary);
box
-shadow: 0
1px 3px rgba(0, 0, 0, 0
.03);
}
.sql
-editor
-container {
flex:
1;
display: flex;
flex
-direction: column;
border:
1px solid var(
--el
-border
-color
-light);
border
-radius: 4px;
overflow: hidden;
min-height: 220px;
max
-height: 400px;
}
.sql
-tips {
padding: 6px
10px;
background: var(
--el
-color
-info
-light
-9);
border
-top:
1px solid var(
--el
-border
-color
-light);
.el
-tag {
width:
100%;
justify
-content: flex
-start;
font
-size:
11px;
padding: 4px 8px;
}
}
/* 响应式调整 */
@media (max
-width: 992px) {
.layout
-container {
flex
-direction: column; /* 小屏幕下改为纵向布局 */
}
.config
-aside,
.preview
-main {
width:
100%; /* 占满宽度 */
min-width: auto; /* 取消最小宽度限制 */
}
.config
-aside {
border
-right: none;
border
-bottom:
1px solid var(
--el
-border
-color
-light); /* 底部边框分隔 */
max
-height: 50%; /* 限制最大高度 */
}
.sql
-dataset
-container {
padding:
12px;
height: auto;
min-height:
100vh;
}
.section
-header {
flex
-direction: column;
align
-items: stretch;
.header
-left,
.header
-right {
width:
100%;
}
.header
-right {
display: grid;
grid
-template
-columns: repeat(3,
1fr);
gap: 8px;
margin
-top: 8px;
}
}
.sql
-editor
-container {
max
-height: 250px;
min-height:
180px;
}
}
@media (max
-width: 768px) {
.preview
-content {
min-height: 200px;
}
.section
-header {
gap: 8px;
h2 {
font
-size:
15px;
}
}
.header
-right {
grid
-template
-columns: repeat(2,
1fr) !important;
.el
-button {
width:
100%;
margin: 0 !important;
}
.el
-button:last
-child {
grid
-column: span 2;
}
}
}
@media (max
-width: 480px) {
.sql
-dataset
-container {
padding: 8px;
}
.config
-aside,
.preview
-main {
padding:
12px;
}
.sql
-editor
-container {
min-height:
150px;
max
-height: 200px;
}
.form
-item
-card {
padding: 8px;
}
.el
-input,
.el
-button {
font
-size:
13px !important;
}
}
</style>
```
本文介绍了ACE框架中的一系列CSS样式，如.space和.vspace，用于在垂直方向上创建不同大小的间隔。这些样式通过设置max-height、min-height、overflow和margin实现，提供了从2px到32px的间距选择。然而，存在一个疑问：为何每个样式先设定margin:12px 0，再用另一个margin覆盖？同时，每个.space样式都有对应的.vspace，其作用是什么？
扫一扫
1132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
