Skip to content

I
integrate-admin
提交 52409c2a authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

同步代码

上级 49a5dfda
隐藏空白字符变更
内嵌 并排
正在显示 包含 610 行增加 和 477 行删除
src/services/config/index.ts
浏览文件 @ 52409c2a
......@@ -16,8 +16,8 @@ const menuConfig: IModules = {
/** @type {http请求地址} */
const urlConfig: IUrl = {
importUrl:'import',
test:'test'
importUrl: 'import',
test: 'test'
}
/** @type {http请求地址} */
......@@ -31,21 +31,21 @@ const userUrlConfig: IUrl = {
//获取当前用户信息
getUserInfo: "user/getUserInfo",
//注册
register:"user/register",
register: "user/register",
//添加用户
addUser:'message/add',
addUser: 'message/add',
//获取用户
getUser:'/message/list',
getUser: 'message/list',
//编辑用户
editUser:'message/edit',
editUser: 'message/edit',
//删除用户
deleteUser:'message/delete',
deleteUser: 'message/delete',
}
/** @type {http请求地址} */
const authUrlConfig: IUrl = {
//查询账号角色
findRoleByUser:'userAccount/findRoleByUser',
findRoleByUser: 'userAccount/findRoleByUser',
//添加菜单
addMenu: "permission/add",
//删除菜单
......@@ -53,46 +53,46 @@ const authUrlConfig: IUrl = {
//编辑菜单
editMenu: "permission/edit",
//获取菜单路由
getMenuTree:'permission/getMenuTree',
getMenuTree: 'permission/getMenuTree',
//获取权限树
getPermissionTree: "permission/list",
//查询角色授权
queryRoleMenu:"permission/queryRolePermission",
queryRoleMenu: "permission/queryRolePermission",
//查询所有权限树
queryTreeList: "permission/queryTreeList",
//保存角色授权
saveRolePermission:'permission/saveRolePermission',
saveRolePermission: 'permission/saveRolePermission',
//角色分页查询
getRoleList:'role/list',
getRoleList: 'role/list',
//添加角色
addRole:'role/add',
addRole: 'role/add',
//删除角色
deleteRole:'role/delete',
deleteRole: 'role/delete',
//编辑角色
editRole:'role/edit',
editRole: 'role/edit',
//获取全部角色
getAllRole:'role/queryAll',
getAllRole: 'role/queryAll',
}
/** @type {http请求地址} */
const tableCreatorUrlConfig: IUrl = {
//创建表
createTable:'starbos_codegenerator/generatetable/create',
createTable: 'starbos_codegenerator/generatetable/create',
//查询表
queryTable:'starbos_codegenerator/generatetable/list',
queryTable: 'starbos_codegenerator/generatetable/list',
//获取文件类型
getFiledType:'starbos_codegenerator/generatetable/getFiledType',
getFiledType: 'starbos_codegenerator/generatetable/getFiledType',
}
const projectUrlConfig: IUrl = {
//创建项目
addProject:'starbos_project/project/add',
addProject: 'starbos_project/project/add',
//删除项目
deleteProject:'starbos_project/project/delete',
deleteProject: 'starbos_project/project/delete',
//编辑项目
editProject:'starbos_project/project/edit',
editProject: 'starbos_project/project/edit',
//分页查询项目
projectList:'starbos_project/project/list'
projectList: 'starbos_project/project/list'
}
......
src/views/system/userManage.vue
浏览文件 @ 52409c2a
......@@ -2,7 +2,7 @@
<div class="router" style="padding: 20px;">
<el-form :inline="true">
<el-form-item>
<el-button type="primary" size="small" @click="handleAdd">添加用户</el-button>
<el-button type="primary" size="small" icon="plus" @click="handleAdd">添加用户</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" border scrollbar-always-on>
......
src/vueFormCreate/components/ComponentGroup.vue
浏览文件 @ 52409c2a
<template>
<div class="widget-cate">{{ title }}</div>
<!-- group 两组名要相同， pull: 'clone' 以克隆的方式拖出，这个组的数据不会有问题， put: false 禁止拖入-->
<Draggable tag="ul" item-key="type" ghostClass="ghost" :group="{ name: 'people', pull: 'clone', put: false }"
:sort="false" :list="list">
<template #item="{ element }">
......
src/vueFormCreate/components/SvgIcon.vue
浏览文件 @ 52409c2a
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$attrs" />
<svg v-else :class="svgClass" arig-hidden="true" v-on="$attrs">
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="attrs" />
<svg v-else :class="svgClass" arig-hidden="true" v-on="attrs">
<use :href="iconName" />
</svg>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { computed, useAttrs } from 'vue'
import * as utils from '../utils'
const attrs = useAttrs()
const props = defineProps({
iconClass: {
type: String,
......
src/vueFormCreate/config/element.ts
浏览文件 @ 52409c2a
......@@ -47,10 +47,6 @@ export const widgetForm: WidgetForm = {
formId: ''
}
}
export const put = () => {
console.log('widgetForm', widgetForm);
}
export const basicComponents = [
{
......
src/vueFormCreate/core/element/ElCustomHeader.vue
浏览文件 @ 52409c2a
<template>
<el-header class="btn-bar">
<slot></slot>
<el-button v-if="$attrs.uploadJson" type="text" @click="$emit('uploadJson')">
<el-button v-if="$attrs.uploadJson" type="text" @click="emits('uploadJson')">
<template #icon>
<SvgIcon iconClass="upload" />
</template>
导入JSON
</el-button>
<el-button v-if="$attrs.clearable" type="text" @click="$emit('clearable')">
<el-button v-if="$attrs.clearable" type="text" @click="emits('clearable')">
<template #icon>
<SvgIcon iconClass="clearable" />
</template>
清空
</el-button>
<el-button v-if="$attrs.preview" type="text" @click="$emit('preview')">
<el-button v-if="$attrs.preview" type="text" @click="emits('preview')">
<template #icon>
<SvgIcon iconClass="preview" />
</template>
预览
</el-button>
<el-button v-if="$attrs.generateJson" type="text" @click="$emit('generateJson')">
<el-button v-if="$attrs.generateJson" type="text" @click="emits('generateJson')">
<template #icon>
<SvgIcon iconClass="generate-json" />
</template>
生成JSON
</el-button>
<el-button v-if="$attrs.generateCode" type="text" @click="$emit('generateCode')">
<el-button v-if="$attrs.generateCode" type="text" @click="emits('generateCode')">
<template #icon>
<SvgIcon iconClass="generate-code" />
</template>
......
src/vueFormCreate/core/element/ElDesignForm.vue
浏览文件 @ 52409c2a
......@@ -11,7 +11,7 @@
</div>
</el-aside>
<el-main class="center-container">
<ElCustomHeader v-bind="$props" @preview="() => (state.previewVisible = true)"
<ElCustomHeader v-bind="props" @preview="() => (state.previewVisible = true)"
@uploadJson="() => (state.uploadJsonVisible = true)" @generateJson="handleGenerateJson"
@generateCode="handleGenerateCode" @clearable="handleClearable">
<slot name="header"></slot>
......@@ -79,7 +79,7 @@
</template>
</el-dialog>
<el-dialog v-model="state.dataCodeVisible" title="生产代码" :width="800">
<el-dialog v-model="state.dataCodeVisible" title="生成代码" :width="800">
<el-tabs type="card" v-model="state.codeLanguage" :tabBarStyle="{ margin: 0 }">
<el-tab-pane label="Vue Component" :name="state.codeType.Vue">
<CodeEditor :value="state.dataCodeTemplate" language="html" readonly />
......@@ -99,7 +99,7 @@
</template>
<script lang="ts" setup>
import { reactive, PropType, toRefs, watchEffect, ref, nextTick } from 'vue'
import { reactive, watchEffect, ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { defaultsDeep } from 'lodash'
import CodeEditor from '../../components/CodeEditor.vue'
......@@ -135,6 +135,11 @@ const props = defineProps({
clearable: {
type: Boolean,
default: true
},
// 设置盒子的最小高度
height: {
type: Number,
default: 400
}
})
......@@ -143,7 +148,6 @@ const state = reactive({
codeType: CodeType,
widgetForm: JSON.parse(JSON.stringify(element.widgetForm)),
widgetFormSelect: undefined,
generateFormRef: null as any,
configTab: 'widget',
previewVisible: false,
uploadJsonVisible: false,
......@@ -161,6 +165,7 @@ const state = reactive({
})
const formConfigRef = ref()
const generateFormRef = ref()
const showPreviewVisible = () => {
state.previewVisible = true
......@@ -200,15 +205,13 @@ const handleCopyClick = (text: string) => {
}
// 获取数据
const handleGetData = () => {
state.generateFormRef.getData().then((res: any) => {
generateFormRef.value.getData().then((res: any) => {
const dataForm = {
id: '',
list: res,
formid: state.widgetForm.config.formField
}
console.log('Object数据', dataForm);
state.dataJsonTemplate = JSON.stringify(dataForm, null, 2)
console.log('json数据', state.dataJsonTemplate);
state.dataJsonVisible = true
})
}
......@@ -231,8 +234,9 @@ const handleGenerateJson1 = () => {
))
}
// 生成代码
const handleGenerateCode = () => {
state.codeLanguage = CodeType.Vue
state.codeLanguage = CodeType.Vue // vue
state.dataCodeVisible = true
}
......@@ -246,6 +250,7 @@ watchEffect(() => {
}
})
// 清空数据
const handleClearable = () => {
state.widgetForm.list = []
nextTick(() => defaultsDeep(
......@@ -255,7 +260,7 @@ const handleClearable = () => {
state.widgetFormSelect = undefined
}
const handleReset = () => state.generateFormRef.reset()
const handleReset = () => generateFormRef.value.reset()
const getJson = () => state.widgetForm
......@@ -270,6 +275,7 @@ const setJson = (json: WidgetForm) => {
const getTemplate = (codeType: CodeType) =>
generateCode(state.widgetForm, codeType, PlatformType.Element)
// 使用最新数据
const clear = () => {
handleClearable()
formConfigRef.value.updataNewData(element.widgetForm)
......@@ -282,3 +288,6 @@ defineExpose({
clear
})
</script>
<style lang="scss" scoped>
</style>
src/vueFormCreate/core/element/ElGenerateForm.vue
浏览文件 @ 52409c2a
......@@ -22,7 +22,7 @@
</template>
<script lang="ts" setup>
import { onMounted, reactive, toRefs, watch } from 'vue'
import { onMounted, reactive, toRefs, watch, ref } from 'vue'
import { ElMessage } from 'element-plus'
import ElGenerateFormItem from './ElGenerateFormItem.vue'
import { element } from '../../config'
......@@ -42,8 +42,9 @@ const props = defineProps({
}
})
const generateForm = ref()
const state = reactive({
generateForm: null as any,
model: {} as any,
rules: {} as any,
widgetForm:
......@@ -112,25 +113,22 @@ onMounted(() => {
const getData = () => {
return new Promise((resolve, reject) => {
state.generateForm
.validate()
.then((validate: boolean) => {
if (validate) {
// console.log('成功', state.generateForm);
resolve(state.model)
} else {
// console.log('失败');
ElMessage.error('验证失败')
}
})
.catch((error: Error) => {
reject(error)
})
generateForm.value.validate().then((validate: boolean) => {
if (validate) {
// console.log('成功', state.generateForm);
resolve(state.model)
} else {
// console.log('失败');
ElMessage.error('验证失败')
}
}).catch((error: Error) => {
reject(error)
})
})
}
const reset = () => {
state.generateForm.resetFields()
generateForm.value.resetFields()
}
defineExpose({
......
src/vueFormCreate/core/element/ElWidgetForm.vue
浏览文件 @ 52409c2a
......@@ -4,6 +4,10 @@
<el-form label-suffix=":" :size="widgetForm.config.size" :label-position="widgetForm.config.labelPosition"
:label-width="`${widgetForm.config.labelWidth}px`"
:hide-required-asterisk="widgetForm.config.hideRequiredAsterisk">
<!-- ghostClass 拖拽中的css样式 handle 只有当鼠标移动到css为mover类的元素上才能拖动 -->
<!-- group 分组 同一组的不同的list可以拖动 -->
<!-- transition-group 用于列表的过渡效果 默认为key，可以用tag转换-->
<!-- 当拖拽为 栅格布局时 -->
<Draggable class="widget-form-list" item-key="key" ghostClass="ghost" handle=".drag-widget" :animation="200"
:group="{ name: 'people' }" :list="widgetForm.list" @add="handleMoveAdd">
<template #item="{ element, index }">
......@@ -158,11 +162,16 @@ const handleDeleteClick = (index: number, list: any[]) => {
})
}
// 添加单元时的回调
const handleMoveAdd = (event: any) => {
// console.log(event, 'event');
// 添加单元的索引
const { newIndex } = event
// 随机产生一个可以
const key = v4().replaceAll('-', '')
const list = JSON.parse(JSON.stringify(props.widgetForm.list))
// console.log(list, 'liss');
list[newIndex] = {
...list[newIndex],
......@@ -198,6 +207,7 @@ const handleMoveAdd = (event: any) => {
emits('update:widgetFormSelect', list[newIndex])
}
// 拖拽到栅格布局中
const handleColMoveAdd = (
event: any,
row: any,
......
src/vueFormCreate/core/element/ElWidgetFormItem.vue
浏览文件 @ 52409c2a
......@@ -142,8 +142,8 @@
</template>
</el-form-item>
<div class="widget-view-action" v-if="selectWidget?.key === element.key">
<SvgIcon iconClass="copy" @click.stop="$emit('copy')" />
<SvgIcon iconClass="delete" @click.stop="$emit('delete')" />
<SvgIcon iconClass="copy" @click.stop="emits('copy')" />
<SvgIcon iconClass="delete" @click.stop="emits('delete')" />
</div>
<div class="widget-view-drag" v-if="selectWidget?.key === element.key">
......@@ -153,7 +153,7 @@
</template>
<script lang="ts" setup>
import { defineComponent, PropType } from 'vue'
import { PropType } from 'vue'
import SvgIcon from '../../components/SvgIcon.vue'
import RichTextEditor from '../../components/RichTextEditor.vue'
import { WidgetForm } from '../../config/element'
......
src/vueFormCreate/styles/element.styl
浏览文件 @ 52409c2a
.fc-style
.el-main
padding 0
.el-dialog__header
border-bottom 1px solid #f0f0f0
.el-dialog__body
padding 15px 20px
.el-dialog__footer
border-top 1px solid #F2F6FC
padding 10px 15px
.config-content
.el-radio-group
margin-top 10px
vertical-align super
.el-radio
margin-bottom 10px
.el-rate
margin-top 6px
.el-checkbox
line-height 32px
\ No newline at end of file
.fc-style {
.el-main {
padding: 0;
}
.el-dialog__header {
border-bottom: 1px solid #f0f0f0;
}
.el-dialog__body {
padding: 15px 20px;
}
.el-dialog__footer {
border-top: 1px solid #F2F6FC;
padding: 10px 15px;
}
.config-content {
.el-radio-group {
margin-top: 10px;
vertical-align: super;
}
.el-radio {
margin-bottom: 10px;
}
}
.el-rate {
margin-top: 6px;
}
.el-checkbox {
line-height: 32px;
}
}
\ No newline at end of file
src/vueFormCreate/styles/index.styl
浏览文件 @ 52409c2a
@import './scrollbar.styl'
@import './element.styl'
$primary-color = #409EFF
$primary-background-color = #ecf5ff
html, body
height 100%
margin 0
#app
font-family 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
color #2c3e50
min-height 100%
height 100%
.fc-style
height 100%
*, :after, :before
-webkit-box-sizing border-box
-moz-box-sizing border-box
box-sizing border-box
.fc-container
background #fff
height 100%
.ant-layout, .el-container
height 100% !important
&>.ant-layout, .el-container
background #fff
.fc-main
position relative
&>.ant-layout, .el-container
position absolute
top 0
bottom 0
left 0
right 0
.center-container
border-left 1px solid #e0e0e0
border-right 1px solid #e0e0e0
.btn-bar
height 45px !important
line-height 45px
font-size 18px
border-bottom 2px solid #e4e7ed
text-align right
background-color white
padding 0 10px
.svg-icon
font-size 16px
margin-right 5px
.ant-layout-content, .el-main
height calc(100% - 45px)
padding 0
position relative
background #fafafa
.components
padding 8px 0
width 100%
height 100%
.widget-cate
padding 8px 12px
font-size 13px
ul
position relative
overflow hidden
padding 0 10px 10px
margin 0
.form-edit-widget-label
font-size 12px
display block
width 48%
line-height 26px
position relative
float left
left 0
overflow hidden
text-overflow ellipsis
white-space nowrap
margin 1%
border 1px solid #F4F6FC
&:hover
border 1px dashed $primary-color
&>a
color $primary-color
&>a
color #333
display block
cursor move
background #f4f6fc
border 1px solid #f4f6fc
.svg-icon
margin-right 6px
margin-left 8px
font-size 14px
display inline-block
vertical-align middle
span
display inline-block
vertical-align middle
.widget-form-container
position absolute
top 0
left 0
right 0
bottom 0
.widget-form-list
background #fff
border 1px dashed #999
min-height calc(100vh - 65px)
margin 10px
.widget-item-container
position relative
.widget-view-action
position absolute
right 0
bottom -2px
height 28px
line-height 28px
background $primary-color
z-index 10
.svg-icon
font-size 14px
color #fff
margin 0 5px
cursor pointer
.widget-view-drag
position absolute
height 28px
left 0
top -2px
line-height 28px
background $primary-color
z-index 10
.svg-icon
font-size 14px
color #fff
margin 0 5px
cursor move
.widget-col-list
min-height 50px
border 1px dashed #ccc
background #fff
.widget-view
padding-bottom 18px
position relative
border 1px dashed rgba(170, 170, 170, 0.7)
background-color rgba(236, 245, 255, 0.3)
margin 2px
.widget-view-description
height 15px
line-height 15px
font-size 13px
margin-top 6px
color #909399
&:after
position absolute
left 0
right 0
top 0
bottom 0
display block
&:hover
background $primary-background-color
outline 1px solid $primary-color
outline-offset 0
&.active
outline 2px solid $primary-color
border 1px solid $primary-color
outline-offset 0
.widget-view-drag
display block
&.active
outline 2px solid $primary-color
border 1px solid $primary-color
&.ghost
background #f56c6c
border 2px solid #f56c6c
outline-width 0
height 3px
box-sizing border-box
font-size 0
content ''
overflow hidden
padding 0
.widget-col
padding 5px
background-color rgba(253, 246, 236, 0.3)
&.active
outline 2px solid #e6a23c
border 1px solid #e6a23c
&:hover
background #fdf6ec
outline 1px solid #e6a23c
outline-offset 0px
&.active
outline 2px solid #e6a23c
border 1px solid #e6a23c
outline-offset 0
&.ghost
background #f56c6c
border 2px solid #f56c6c
outline-width 0
height 3px
box-sizing border-box
font-size 0
content ''
overflow hidden
padding 0
.widget-view-action.widget-col-action
position absolute
height 28px
right -2px
bottom -2px
line-height 28px
background #e6a23c
z-index 10
.svg-icon
font-size 14px
color #fff
margin 0 5px
cursor move
.widget-view-drag.widget-col-drag
position absolute
height 28px
left -2px
top -2px
line-height 28px
background #e6a23c
z-index 10
.svg-icon
font-size 14px
color #fff
margin 0 5px
cursor move
&::after
display none
.ghost
background #f56c6c
border 2px solid #f56c6c
outline-width 0
height 3px
box-sizing border-box
font-size 0
content ''
overflow hidden
padding 0
.ghost
background #f56c6c
border 2px solid #f56c6c
position relative
&::after
background #f56c6c
li.ghost
height 5px
list-style none
font-size 0
overflow hidden
.widget-config-container
position relative
.ant-layout-header, .el-header
border-bottom 2px solid #e4e7ed
padding 0 5px
height 45px !important
line-height 45px !important
background-color #fff
.config-tab
height 41px
line-height 41px
display inline-block
width 145px
text-align center
font-size 14px
font-weight 500
position relative
cursor pointer
&.active
border-bottom 2px solid $primary-color
.config-content
padding 10px
background #fff
overflow auto
.ant-form-item-label, .el-form-item__label
font-weight 500
.el-form-item__label
padding 0
.ant-form-item, .el-form-item, h4
padding-bottom 10px
border-bottom 1px solid #e1e1e1
.label
font-size 14px
font-weight 500
margin 0 5px
&:first-child
margin-left 0
.drag-item
font-size 16px
margin 0 5px
cursor move
.ghost
background #fff
border 1px dashed $primary-color
&::after
background #fff
display block
content ''
position absolute
top 0
left 0
right 0
bottom 0
ul
margin 0
padding 0
li.ghost
list-style none
font-size 0
display block
position relative
.form-empty
position absolute
text-align center
width 300px
font-size 20px
top 200px
left 50%
margin-left -150px
color #ccc
.widget-empty
background-position 50%
@import './scrollbar.styl';
@import './element.styl';
$primary-color = #409EFF;
$primary-background-color = #ecf5ff;
html, body {
height: 100%;
margin: 0;
}
#app {
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
min-height: 100%;
height: 100%;
}
.fc-style {
height: 100%;
*, :after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fc-container {
background: #fff;
height: 100%;
.ant-layout, .el-container {
height: 100% !important;
}
&>.ant-layout, .el-container {
background: #fff;
}
.fc-main {
position: relative;
&>.ant-layout, .el-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
}
.center-container {
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
.btn-bar {
height: 45px !important;
line-height: 45px;
font-size: 18px;
border-bottom: 2px solid #e4e7ed;
text-align: right;
background-color: white;
padding: 0 10px;
.svg-icon {
font-size: 16px;
margin-right: 5px;
}
}
.ant-layout-content, .el-main {
height: calc(100% - 45px);
padding: 0;
position: relative;
background: #fafafa;
}
}
.components {
padding: 8px 0;
width: 100%;
height: 100%;
.widget-cate {
padding: 8px 12px;
font-size: 13px;
}
ul {
position: relative;
overflow: hidden;
padding: 0 10px 10px;
margin: 0;
}
.form-edit-widget-label {
font-size: 12px;
display: block;
width: 48%;
line-height: 26px;
position: relative;
float: left;
left: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 1%;
border: 1px solid #F4F6FC;
&:hover {
border: 1px dashed $primary-color;
&>a {
color: $primary-color;
}
}
&>a {
color: #333;
display: block;
cursor: move;
background: #f4f6fc;
border: 1px solid #f4f6fc;
.svg-icon {
margin-right: 6px;
margin-left: 8px;
font-size: 14px;
display: inline-block;
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle;
}
}
}
}
.widget-form-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
.widget-form-list {
background: #fff;
border: 1px dashed #999;
min-height: calc(100vh - 65px);
margin: 10px;
.widget-item-container {
position: relative;
.widget-view-action {
position: absolute;
right: 0;
bottom: -2px;
height: 28px;
line-height: 28px;
background: $primary-color;
z-index: 10;
.svg-icon {
font-size: 14px;
color: #fff;
margin: 0 5px;
cursor: pointer;
}
}
.widget-view-drag {
position: absolute;
height: 28px;
left: 0;
top: -2px;
line-height: 28px;
background: $primary-color;
z-index: 10;
.svg-icon {
font-size: 14px;
color: #fff;
margin: 0 5px;
cursor: move;
}
}
}
.widget-col-list {
min-height: 50px;
border: 1px dashed #ccc;
background: #fff;
}
.widget-view {
padding-bottom: 18px;
position: relative;
border: 1px dashed rgba(170, 170, 170, 0.7);
background-color: rgba(236, 245, 255, 0.3);
margin: 2px;
.widget-view-description {
height: 15px;
line-height: 15px;
font-size: 13px;
margin-top: 6px;
color: #909399;
}
&:after {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
}
&:hover {
background: $primary-background-color;
outline: 1px solid $primary-color;
outline-offset: 0;
&.active {
outline: 2px solid $primary-color;
border: 1px solid $primary-color;
outline-offset: 0;
}
.widget-view-drag {
display: block;
}
}
&.active {
outline: 2px solid $primary-color;
border: 1px solid $primary-color;
}
&.ghost {
background: #f56c6c;
border: 2px solid #f56c6c;
outline-width: 0;
height: 3px;
box-sizing: border-box;
font-size: 0;
content: '';
overflow: hidden;
padding: 0;
}
}
.widget-col {
padding: 5px;
background-color: rgba(253, 246, 236, 0.3);
&.active {
outline: 2px solid #e6a23c;
border: 1px solid #e6a23c;
}
&:hover {
background: #fdf6ec;
outline: 1px solid #e6a23c;
outline-offset: 0px;
&.active {
outline: 2px solid #e6a23c;
border: 1px solid #e6a23c;
outline-offset: 0;
}
}
&.ghost {
background: #f56c6c;
border: 2px solid #f56c6c;
outline-width: 0;
height: 3px;
box-sizing: border-box;
font-size: 0;
content: '';
overflow: hidden;
padding: 0;
}
.widget-view-action.widget-col-action {
position: absolute;
height: 28px;
right: -2px;
bottom: -2px;
line-height: 28px;
background: #e6a23c;
z-index: 10;
.svg-icon {
font-size: 14px;
color: #fff;
margin: 0 5px;
cursor: move;
}
}
.widget-view-drag.widget-col-drag {
position: absolute;
height: 28px;
left: -2px;
top: -2px;
line-height: 28px;
background: #e6a23c;
z-index: 10;
.svg-icon {
font-size: 14px;
color: #fff;
margin: 0 5px;
cursor: move;
}
}
&::after {
display: none;
}
}
.ghost {
background: #f56c6c;
border: 2px solid #f56c6c;
outline-width: 0;
height: 3px;
box-sizing: border-box;
font-size: 0;
content: '';
overflow: hidden;
padding: 0;
}
}
.ghost {
background: #f56c6c;
border: 2px solid #f56c6c;
position: relative;
&::after {
background: #f56c6c;
}
}
li.ghost {
height: 5px;
list-style: none;
font-size: 0;
overflow: hidden;
}
}
.widget-config-container {
position: relative;
.ant-layout-header, .el-header {
border-bottom: 2px solid #e4e7ed;
padding: 0 5px;
height: 45px !important;
line-height: 45px !important;
background-color: #fff;
}
.config-tab {
height: 41px;
line-height: 41px;
display: inline-block;
width: 145px;
text-align: center;
font-size: 14px;
font-weight: 500;
position: relative;
cursor: pointer;
&.active {
border-bottom: 2px solid $primary-color;
}
}
.config-content {
padding: 10px;
background: #fff;
overflow: auto;
.ant-form-item-label, .el-form-item__label {
font-weight: 500;
}
.el-form-item__label {
padding: 0;
}
.ant-form-item, .el-form-item, h4 {
padding-bottom: 10px;
border-bottom: 1px solid #e1e1e1;
}
.label {
font-size: 14px;
font-weight: 500;
margin: 0 5px;
&:first-child {
margin-left: 0;
}
}
.drag-item {
font-size: 16px;
margin: 0 5px;
cursor: move;
}
}
.ghost {
background: #fff;
border: 1px dashed $primary-color;
&::after {
background: #fff;
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
ul {
margin: 0;
padding: 0;
}
li.ghost {
list-style: none;
font-size: 0;
display: block;
position: relative;
}
}
.form-empty {
position: absolute;
text-align: center;
width: 300px;
font-size: 20px;
top: 200px;
left: 50%;
margin-left: -150px;
color: #ccc;
}
.widget-empty {
background-position: 50%;
}
}
src/vueFormCreate/styles/scrollbar.styl
浏览文件 @ 52409c2a
::-webkit-scrollbar
width 5px
height 5px
::-webkit-scrollbar-thumb
border-radius 1em
background-color rgba(50, 50, 50, 0.3)
::-webkit-scrollbar-track
border-radius 1em
background-color rgba(50, 50, 50, 0.1)
\ No newline at end of file
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.3);
}
::-webkit-scrollbar-track {
border-radius: 1em;
background-color: rgba(50, 50, 50, 0.1);
}
\ No newline at end of file
vite.config.ts
浏览文件 @ 52409c2a
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// vite 提供的操作env配置变量的方法loadEnv
import { loadEnv } from "vite";
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
// nodejs写法，获取项目目录
import path from "path";
//按需要加载
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";
// import AutoImport from "unplugin-auto-import/vite";
// import Components from "unplugin-vue-components/vite";
// import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// import Icons from "unplugin-icons/vite";
// import IconsResolver from "unplugin-icons/resolver";
import Inspect from "vite-plugin-inspect";
// import { viteMockServe } from "vite-plugin-mock";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
......@@ -31,49 +30,6 @@ export default ({ command, mode }) => {
// 指定symbolId格式
symbolId: "icon-[dir]-[name]",
}),
// viteMockServe({
// // default
// mockPath: "mock",
// }),
// AutoImport({
// // Auto import functions from Vue, e.g. ref, reactive, toRef...
// // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
// imports: ['vue'],
// // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
// // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
// resolvers: [
// ElementPlusResolver(),
// // Auto import icon components
// // 自动导入图标组件
// IconsResolver({
// prefix: 'Icon',
// }),
// ],
// dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
// }),
// Components({
// resolvers: [
// // Auto register icon components
// // 自动注册图标组件
// IconsResolver({
// enabledCollections: ['ep'],
// }),
// // Auto register Element Plus components
// // 自动导入 Element Plus 组件
// ElementPlusResolver(),
// ],
// dts: path.resolve(pathSrc, 'components.d.ts'),
// }),
// Icons({
// autoInstall: true,
// }),
Inspect(),
],
// 服务器配置
......@@ -89,7 +45,7 @@ export default ({ command, mode }) => {
// '/foo': '',
// 选项写法
"/integrate": {
target: "http://localhost:8090",
target: "http://192.168.0.60",
// rewrite: (path) => path.replace(/^\/api/, '')
},
// 正则表达式写法
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论