mirror of
https://gitee.com/bootx/dax-pay-ui.git
synced 2025-09-11 06:29:21 +00:00
fix: 修复form设计器在黑暗模式下的显示问题 (#2543)
This commit is contained in:
wwsheng009
7429
pnpm-lock.yaml
generated
7429
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -8,7 +8,7 @@ const permission: AppRouteModule = {
|
||||
component: LAYOUT,
|
||||
meta: {
|
||||
orderNo: 10000,
|
||||
icon: 'icon:add-circle',
|
||||
icon: 'ion:build-outline',
|
||||
title: '表单设计',
|
||||
},
|
||||
children: [
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<!-- <div class="v-form-design-container"> -->
|
||||
<!-- <header class="v-form-design-header">{{ title }}</header> -->
|
||||
|
||||
<Layout>
|
||||
<LayoutSider
|
||||
class="left"
|
||||
theme="light"
|
||||
class="left sider"
|
||||
collapsible
|
||||
collapsedWidth="0"
|
||||
width="270"
|
||||
:zeroWidthTriggerStyle="{ 'margin-top': '-70px' }"
|
||||
:zeroWidthTriggerStyle="{
|
||||
'margin-top': '-70px',
|
||||
'background-color': 'gray',
|
||||
}"
|
||||
breakpoint="md"
|
||||
>
|
||||
<CollapseContainer title="基础控件">
|
||||
@@ -53,16 +52,14 @@
|
||||
/>
|
||||
</LayoutContent>
|
||||
<LayoutSider
|
||||
class="right"
|
||||
class="right sider"
|
||||
collapsible
|
||||
:reverseArrow="true"
|
||||
theme="light"
|
||||
collapsedWidth="0"
|
||||
width="270"
|
||||
:zeroWidthTriggerStyle="{ 'margin-top': '-70px' }"
|
||||
:zeroWidthTriggerStyle="{ 'margin-top': '-70px', 'background-color': 'gray' }"
|
||||
breakpoint="lg"
|
||||
>
|
||||
<!-- <div class="right" onselectstart="return false"> -->
|
||||
<PropsPanel ref="propsPanel" :activeKey="formConfig.activeKey">
|
||||
<template v-for="item of formConfig.schemas" #[`${item.component}Props`]="data">
|
||||
<slot
|
||||
@@ -71,7 +68,6 @@
|
||||
></slot>
|
||||
</template>
|
||||
</PropsPanel>
|
||||
<!-- </div> -->
|
||||
</LayoutSider>
|
||||
</Layout>
|
||||
|
||||
@@ -80,7 +76,6 @@
|
||||
<ImportJsonModal ref="importJsonModal" />
|
||||
<VFormPreview ref="eFormPreview" :formConfig="formConfig" />
|
||||
<VFormPreview2 ref="eFormPreview2" :formConfig="formConfig" />
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -100,13 +95,11 @@
|
||||
import { ref, provide, Ref } from 'vue';
|
||||
import { Layout, LayoutContent, LayoutSider } from 'ant-design-vue';
|
||||
|
||||
// import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
|
||||
import { IVFormComponent, IFormConfig, PropsTabKey } from '../../typings/v-form-component';
|
||||
import { formItemsForEach, generateKey } from '../../utils';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import { baseComponents, customComponents, layoutComponents } from '../../core/formItemConfig';
|
||||
import { useRefHistory, UseRefHistoryReturn } from '@vueuse/core';
|
||||
// import { IAnyObject } from '../../typings/base-type';
|
||||
import { globalConfigState } from './config/formItemPropsConfig';
|
||||
import { IFormDesignMethods, IPropsPanel, IToolbarMethods } from '../../typings/form-type';
|
||||
|
||||
@@ -361,5 +354,8 @@
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// @import url(./styles/variable.less);
|
||||
.sider {
|
||||
//需要设置背景色，让主题生效
|
||||
background-color: @component-background;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,27 +4,22 @@
|
||||
|
||||
:deep(.list-main) {
|
||||
overflow: hidden;
|
||||
min-height: 100%;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
background: #fafafa;
|
||||
// border : 1px #ccc dashed;
|
||||
|
||||
.moving {
|
||||
// 拖放移动中
|
||||
// outline-width: 0;
|
||||
// 拖放移动中;
|
||||
min-height: 35px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
padding: 0 !important;
|
||||
// margin : 3px 0;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background: @primary-color;
|
||||
background-color: @primary-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -40,7 +35,7 @@
|
||||
min-height: 60px;
|
||||
|
||||
&:hover {
|
||||
background: @primary-hover-bg-color;
|
||||
background-color: @primary-hover-bg-color;
|
||||
}
|
||||
|
||||
// 选择时 start
|
||||
@@ -48,7 +43,7 @@
|
||||
content: '';
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background: @primary-color;
|
||||
background-color: @primary-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
@@ -56,7 +51,7 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: @primary-hover-bg-color;
|
||||
background-color: @primary-hover-bg-color;
|
||||
outline-offset: 0;
|
||||
|
||||
&::before {
|
||||
@@ -77,7 +72,6 @@
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
// z-index: 888;
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
@@ -122,12 +116,12 @@
|
||||
.copy {
|
||||
border-radius: 0 0 0 8px;
|
||||
right: 30px;
|
||||
background: @primary-color;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
|
||||
.delete {
|
||||
right: 0;
|
||||
background: @primary-color;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -135,7 +129,7 @@
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
background: @layout-background-color;
|
||||
background-color: @layout-background-color;
|
||||
width: 100%;
|
||||
transition: all 0.3s;
|
||||
overflow: hidden;
|
||||
@@ -152,14 +146,14 @@
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
background: @layout-background-color;
|
||||
background-color: @layout-background-color;
|
||||
|
||||
.grid-col {
|
||||
.draggable-box {
|
||||
min-height: 80px;
|
||||
min-width: 50px;
|
||||
border: 1px #ccc dashed;
|
||||
background: #fff;
|
||||
// background: #fff;
|
||||
|
||||
.list-main {
|
||||
min-height: 83px;
|
||||
@@ -183,11 +177,11 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: @layout-hover-bg-color;
|
||||
background-color: @layout-hover-bg-color;
|
||||
outline-offset: 0;
|
||||
|
||||
&::before {
|
||||
background: @layout-color;
|
||||
background-color: @layout-color;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@@ -218,12 +212,12 @@
|
||||
> .copy {
|
||||
border-radius: 0 0 0 8px;
|
||||
right: 30px;
|
||||
background: @layout-color;
|
||||
background-color: @layout-color;
|
||||
}
|
||||
|
||||
> .delete {
|
||||
right: 0;
|
||||
background: @layout-color;
|
||||
background-color: @layout-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,522 +0,0 @@
|
||||
.v-form-design-container {
|
||||
// height: 100%;
|
||||
width: 100%;
|
||||
// overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > .v-form-design-header {
|
||||
height: @header-height;
|
||||
line-height: @header-height;
|
||||
background: @primary-color;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:deep(.icon) {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentcolor;
|
||||
// overflow: hidden;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
// margin-top: 5px;
|
||||
display: flex;
|
||||
// flex-flow: row nowrap;
|
||||
// height: 100%;
|
||||
// overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left,
|
||||
.right {
|
||||
width: @left-right-width;
|
||||
box-shadow: 0 0 1px 1px #ccc;
|
||||
// overflow: hidden;
|
||||
// height: 100%;
|
||||
// height: 600px;
|
||||
//
|
||||
border: 1px solid green;
|
||||
// overflow-y: auto;
|
||||
// :deep(.ant-tabs) {
|
||||
// height: 100%;
|
||||
// .ant-tabs-content-holder {
|
||||
// // display: flex;
|
||||
// // flex-flow: column;
|
||||
// height: 100%;
|
||||
// .ant-tabs-content {
|
||||
// // flex:1;
|
||||
// // height: 0;
|
||||
// // overflow-y: auto;
|
||||
// // overflow-x: hidden;
|
||||
// display: flex;
|
||||
// flex-flow: column;
|
||||
// height: 100%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
:deep(.right) {
|
||||
// & > div {
|
||||
// height: 100%;
|
||||
// }
|
||||
// overflow: hidden;
|
||||
// & > div {
|
||||
// height: 100%;
|
||||
// .ant-tabs-content-holder{
|
||||
// height: 100%;
|
||||
// .ant-tabs-content{
|
||||
// height: 100%;
|
||||
// .ant-tabs-tabpane{
|
||||
// height: 100%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.ant-tabs {
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
// overflow: hidden;
|
||||
|
||||
.ant-tabs-content-holder {
|
||||
// display: flex;
|
||||
// flex-flow: column;
|
||||
// height: 100%;
|
||||
// overflow: hidden;
|
||||
|
||||
.ant-tabs-content {
|
||||
// flex:1;
|
||||
// height: 0;
|
||||
// overflow-y: auto;
|
||||
// overflow-x: hidden;
|
||||
|
||||
height: 100%;
|
||||
// overflow: hidden;
|
||||
.ant-tabs-tabpane {
|
||||
.properties-content {
|
||||
// height: 100%;
|
||||
|
||||
// overflow: auto;
|
||||
// overflow: hidden;
|
||||
|
||||
// background: #fff;
|
||||
.properties-body {
|
||||
box-sizing: border-box;
|
||||
// height: 100%;
|
||||
|
||||
// display: flex;
|
||||
// flex-flow: column;
|
||||
|
||||
form {
|
||||
position: absolute;
|
||||
// height: 400px;
|
||||
height: calc(100% - 50px);
|
||||
// height: 100%;
|
||||
// flex: 1;
|
||||
// height: 0;
|
||||
margin-right: 10px;
|
||||
// overflow: auto;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
// overflow: auto;
|
||||
}
|
||||
// overflow: auto;
|
||||
// height: 100%;
|
||||
// padding: 8px 16px;
|
||||
.hint-box {
|
||||
margin-top: 200px;
|
||||
}
|
||||
|
||||
.ant-form-item,
|
||||
.ant-slider-with-marks {
|
||||
margin-left: 10px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
// box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
// padding: 2px 0;
|
||||
border-bottom: 1px solid @border-color;
|
||||
|
||||
.ant-form-item-label {
|
||||
line-height: 2;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.left) {
|
||||
.ant-collapse {
|
||||
border: 0;
|
||||
|
||||
.ant-collapse-header {
|
||||
padding: 7px 0 7px 40px;
|
||||
}
|
||||
|
||||
.ant-collapse-content-box {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 5px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
margin-bottom: 0;
|
||||
flex-wrap: wrap;
|
||||
// background: #efefef;
|
||||
|
||||
li {
|
||||
padding: 8px 12px;
|
||||
transition: all 0.3s;
|
||||
width: calc(50% - 6px);
|
||||
margin: 2.7px;
|
||||
height: 36px;
|
||||
line-height: 20px;
|
||||
cursor: move;
|
||||
border: 1px solid @border-color;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
border: 1px solid @primary-color;
|
||||
position: relative;
|
||||
// z-index: 1;
|
||||
box-shadow: 0 2px 6px @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.node-panel) {
|
||||
box-shadow: 0 0 1px 1px #ccc;
|
||||
flex: 1;
|
||||
margin: 0 8px;
|
||||
overflow: hidden;
|
||||
|
||||
.draggable-box {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.list-main {
|
||||
overflow: hidden;
|
||||
min-height: 100%;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
background: #fafafa;
|
||||
// border : 1px #ccc dashed;
|
||||
|
||||
.moving {
|
||||
// 拖放移动中
|
||||
// outline-width: 0;
|
||||
min-height: 35px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
padding: 0 !important;
|
||||
// margin : 3px 0;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background: @primary-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.drag-move-box {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 8px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
min-height: 60px;
|
||||
|
||||
&:hover {
|
||||
background: @primary-hover-bg-color;
|
||||
}
|
||||
|
||||
// 选择时 start
|
||||
&::before {
|
||||
content: '';
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background: @primary-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: @primary-hover-bg-color;
|
||||
outline-offset: 0;
|
||||
|
||||
&::before {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 选择时 end
|
||||
.form-item-box {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
word-wrap: break-word;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
// z-index: 888;
|
||||
}
|
||||
|
||||
.ant-form-item {
|
||||
// 修改ant form-item的margin为padding
|
||||
margin: 0;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.show-key-box {
|
||||
// 显示key
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
right: 5px;
|
||||
font-size: 14px;
|
||||
// z-index: 999;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.copy,
|
||||
.delete {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
// z-index: 989;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.unactivated {
|
||||
opacity: 0 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.copy {
|
||||
border-radius: 0 0 0 8px;
|
||||
right: 30px;
|
||||
background: @primary-color;
|
||||
}
|
||||
|
||||
.delete {
|
||||
right: 0;
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-box {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
background: @layout-background-color;
|
||||
width: 100%;
|
||||
transition: all 0.3s;
|
||||
overflow: hidden;
|
||||
|
||||
.form-item-box {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
.ant-form-item {
|
||||
// 修改ant form-item的margin为padding
|
||||
margin: 0;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
background: @layout-background-color;
|
||||
|
||||
.grid-col {
|
||||
.draggable-box {
|
||||
min-height: 80px;
|
||||
min-width: 50px;
|
||||
border: 1px #ccc dashed;
|
||||
background: #fff;
|
||||
|
||||
.list-main {
|
||||
min-height: 83px;
|
||||
position: relative;
|
||||
border: 1px #ccc dashed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 选择时 start
|
||||
&::before {
|
||||
content: '';
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: @layout-hover-bg-color;
|
||||
outline-offset: 0;
|
||||
|
||||
&::before {
|
||||
background: @layout-color;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
// 选择时 end
|
||||
> .copy-delete-box {
|
||||
> .copy,
|
||||
> .delete {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
// z-index: 989;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.unactivated {
|
||||
opacity: 0 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .copy {
|
||||
border-radius: 0 0 0 8px;
|
||||
right: 30px;
|
||||
background: @layout-color;
|
||||
}
|
||||
|
||||
> .delete {
|
||||
right: 0;
|
||||
background: @layout-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
/* 滚动条整体样式 */
|
||||
width: 6px;
|
||||
|
||||
/* 高宽分别对应横竖滚动条的尺寸 */
|
||||
height: 6px;
|
||||
scrollbar-arrow-color: red;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
/* 滚动条里面小方块 */
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
|
||||
background: rgb(0 0 0 / 20%);
|
||||
scrollbar-arrow-color: red;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
/* 滚动条里面轨道 */
|
||||
box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
|
||||
border-radius: 0;
|
||||
background: rgb(0 0 0 / 10%);
|
||||
}
|
||||
}
|
||||
|
||||
// code盒子样式
|
||||
.v-json-box {
|
||||
height: 570px;
|
||||
overflow: auto;
|
||||
|
||||
.vue-codemirror-wrap {
|
||||
height: 100%;
|
||||
|
||||
.CodeMirror-wrap {
|
||||
height: 100%;
|
||||
background: #f6f6f6;
|
||||
|
||||
.CodeMirror-scroll {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
pre.CodeMirror-line,
|
||||
.CodeMirror-linenumber {
|
||||
min-height: 21px;
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// code-modal盒子样式
|
||||
.v-code-modal {
|
||||
.ant-modal-body {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.v-form-container {
|
||||
// 内联布局样式
|
||||
.ant-form-inline {
|
||||
.list-main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
|
||||
.layout-width {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-item-control-wrapper {
|
||||
min-width: 175px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user