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 = { ...@@ -8,7 +8,7 @@ const permission: AppRouteModule = {
component: LAYOUT, component: LAYOUT,
meta: { meta: {
orderNo: 10000, orderNo: 10000,
icon: 'icon:add-circle', icon: 'ion:build-outline',
title: '表单设计', title: '表单设计',
}, },
children: [ children: [
......
src/views/form-design/components/VFormDesign/index.vue
浏览文件 @ bce6cee5
<template> <template>
<!-- <div class="v-form-design-container"> -->
<!-- <header class="v-form-design-header">{{ title }}</header> -->
<Layout> <Layout>
<LayoutSider <LayoutSider
class="left" class="left sider"
theme="light"
collapsible collapsible
collapsedWidth="0" collapsedWidth="0"
width="270" width="270"
:zeroWidthTriggerStyle="{ 'margin-top': '-70px' }" :zeroWidthTriggerStyle="{
'margin-top': '-70px',
'background-color': 'gray',
}"
breakpoint="md" breakpoint="md"
> >
<CollapseContainer title="基础控件"> <CollapseContainer title="基础控件">
...@@ -53,16 +52,14 @@ ...@@ -53,16 +52,14 @@
/> />
</LayoutContent> </LayoutContent>
<LayoutSider <LayoutSider
class="right" class="right sider"
collapsible collapsible
:reverseArrow="true" :reverseArrow="true"
theme="light"
collapsedWidth="0" collapsedWidth="0"
width="270" width="270"
:zeroWidthTriggerStyle="{ 'margin-top': '-70px' }" :zeroWidthTriggerStyle="{ 'margin-top': '-70px', 'background-color': 'gray' }"
breakpoint="lg" breakpoint="lg"
> >
<!-- <div class="right" onselectstart="return false"> -->
<PropsPanel ref="propsPanel" :activeKey="formConfig.activeKey"> <PropsPanel ref="propsPanel" :activeKey="formConfig.activeKey">
<template v-for="item of formConfig.schemas" #[`${item.component}Props`]="data"> <template v-for="item of formConfig.schemas" #[`${item.component}Props`]="data">
<slot <slot
...@@ -71,7 +68,6 @@ ...@@ -71,7 +68,6 @@
></slot> ></slot>
</template> </template>
</PropsPanel> </PropsPanel>
<!-- </div> -->
</LayoutSider> </LayoutSider>
</Layout> </Layout>
...@@ -80,7 +76,6 @@ ...@@ -80,7 +76,6 @@
<ImportJsonModal ref="importJsonModal" /> <ImportJsonModal ref="importJsonModal" />
<VFormPreview ref="eFormPreview" :formConfig="formConfig" /> <VFormPreview ref="eFormPreview" :formConfig="formConfig" />
<VFormPreview2 ref="eFormPreview2" :formConfig="formConfig" /> <VFormPreview2 ref="eFormPreview2" :formConfig="formConfig" />
<!-- </div> -->
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
...@@ -100,13 +95,11 @@ ...@@ -100,13 +95,11 @@
import { ref, provide, Ref } from 'vue'; import { ref, provide, Ref } from 'vue';
import { Layout, LayoutContent, LayoutSider } from 'ant-design-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 { IVFormComponent, IFormConfig, PropsTabKey } from '../../typings/v-form-component';
import { formItemsForEach, generateKey } from '../../utils'; import { formItemsForEach, generateKey } from '../../utils';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import { baseComponents, customComponents, layoutComponents } from '../../core/formItemConfig'; import { baseComponents, customComponents, layoutComponents } from '../../core/formItemConfig';
import { useRefHistory, UseRefHistoryReturn } from '@vueuse/core'; import { useRefHistory, UseRefHistoryReturn } from '@vueuse/core';
// import { IAnyObject } from '../../typings/base-type';
import { globalConfigState } from './config/formItemPropsConfig'; import { globalConfigState } from './config/formItemPropsConfig';
import { IFormDesignMethods, IPropsPanel, IToolbarMethods } from '../../typings/form-type'; import { IFormDesignMethods, IPropsPanel, IToolbarMethods } from '../../typings/form-type';
...@@ -361,5 +354,8 @@ ...@@ -361,5 +354,8 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
// @import url(./styles/variable.less); .sider {
//需要设置背景色，让主题生效
background-color: @component-background;
}
</style> </style>
src/views/form-design/components/VFormDesign/styles/drag.less
浏览文件 @ bce6cee5
...@@ -4,27 +4,22 @@ ...@@ -4,27 +4,22 @@
:deep(.list-main) { :deep(.list-main) {
overflow: hidden; overflow: hidden;
min-height: 100%;
padding: 5px; padding: 5px;
position: relative; position: relative;
background: #fafafa;
// border : 1px #ccc dashed;
.moving { .moving {
// 拖放移动中 // 拖放移动中;
// outline-width: 0;
min-height: 35px; min-height: 35px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
padding: 0 !important; padding: 0 !important;
// margin : 3px 0;
position: relative; position: relative;
&::before { &::before {
content: ''; content: '';
height: 5px; height: 5px;
width: 100%; width: 100%;
background: @primary-color; background-color: @primary-color;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
...@@ -40,7 +35,7 @@ ...@@ -40,7 +35,7 @@
min-height: 60px; min-height: 60px;
&:hover { &:hover {
background: @primary-hover-bg-color; background-color: @primary-hover-bg-color;
} }
// 选择时 start // 选择时 start
...@@ -48,7 +43,7 @@ ...@@ -48,7 +43,7 @@
content: ''; content: '';
height: 5px; height: 5px;
width: 100%; width: 100%;
background: @primary-color; background-color: @primary-color;
position: absolute; position: absolute;
top: 0; top: 0;
right: -100%; right: -100%;
...@@ -56,7 +51,7 @@ ...@@ -56,7 +51,7 @@
} }
&.active { &.active {
background: @primary-hover-bg-color; background-color: @primary-hover-bg-color;
outline-offset: 0; outline-offset: 0;
&::before { &::before {
...@@ -77,7 +72,6 @@ ...@@ -77,7 +72,6 @@
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
// z-index: 888;
} }
.ant-form-item { .ant-form-item {
...@@ -122,12 +116,12 @@ ...@@ -122,12 +116,12 @@
.copy { .copy {
border-radius: 0 0 0 8px; border-radius: 0 0 0 8px;
right: 30px; right: 30px;
background: @primary-color; background-color: @primary-color;
} }
.delete { .delete {
right: 0; right: 0;
background: @primary-color; background-color: @primary-color;
} }
} }
...@@ -135,7 +129,7 @@ ...@@ -135,7 +129,7 @@
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: 5px; padding: 5px;
background: @layout-background-color; background-color: @layout-background-color;
width: 100%; width: 100%;
transition: all 0.3s; transition: all 0.3s;
overflow: hidden; overflow: hidden;
...@@ -152,14 +146,14 @@ ...@@ -152,14 +146,14 @@
} }
.grid-row { .grid-row {
background: @layout-background-color; background-color: @layout-background-color;
.grid-col { .grid-col {
.draggable-box { .draggable-box {
min-height: 80px; min-height: 80px;
min-width: 50px; min-width: 50px;
border: 1px #ccc dashed; border: 1px #ccc dashed;
background: #fff; // background: #fff;
.list-main { .list-main {
min-height: 83px; min-height: 83px;
...@@ -183,11 +177,11 @@ ...@@ -183,11 +177,11 @@
} }
&.active { &.active {
background: @layout-hover-bg-color; background-color: @layout-hover-bg-color;
outline-offset: 0; outline-offset: 0;
&::before { &::before {
background: @layout-color; background-color: @layout-color;
right: 0; right: 0;
} }
} }
...@@ -218,12 +212,12 @@ ...@@ -218,12 +212,12 @@
> .copy { > .copy {
border-radius: 0 0 0 8px; border-radius: 0 0 0 8px;
right: 30px; right: 30px;
background: @layout-color; background-color: @layout-color;
} }
> .delete { > .delete {
right: 0; 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.
先完成此消息的编辑！
想要评论请 注册 或