Skip to content

V
vue-vben-admin

啊嘞嘞EC / vue-vben-admin
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
V
vue-vben-admin

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

未验证 提交 bce6cee5 编写于 作者: W wwsheng009 提交者： GitHub
浏览文件
操作

fix: 修复form设计器在黑暗模式下的显示问题 (#2543)

上级 32daad61
展开全部 隐藏空白更改
内联 并排
Showing with 3593 addition and 4450 deletion
pnpm-lock.yaml
浏览文件 @ bce6cee5
此差异已折叠。
src/router/routes/modules/form-design/main.ts
浏览文件 @ bce6cee5
......@@ -8,7 +8,7 @@ const permission: AppRouteModule = {
component: LAYOUT,
meta: {
orderNo: 10000,
icon: 'icon:add-circle',
icon: 'ion:build-outline',
title: '表单设计',
},
children: [
......
src/views/form-design/components/VFormDesign/index.vue
浏览文件 @ bce6cee5
<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>
src/views/form-design/components/VFormDesign/styles/drag.less
浏览文件 @ bce6cee5
......@@ -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;
}
}
}
......
src/views/form-design/components/VFormDesign/styles/v-form-design.less 已删除 100644 → 0
浏览文件 @ 32daad61
.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;
}
}
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或