Dol0res
/
tiny-engine
forked from opentiny/tiny-engine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(setting-stylePanel): 样式面板编辑全局样式新UI与交互 (#238) 

* feat(setting-stylePanel): 样式面板编辑全局样式新UI与交互

* feat(setting-stylePanel): 样式面板编辑全局样式新UI与交互

* feat(setting-stylePanel): 样式面板编辑全局样式新UI与交互-细节优化

* feat(setting-stylePanel): 样式面板编辑全局样式新UI与交互-细节优化

* fix(settingPanel-style): 样式面板新交互细节调整

* fix(setting-stylePanel): 修复样式选择器颜色不对的 bug

* fix(setting-stylePanel): 样式选择器间距调整

* fix(setting-stylePanel): 调整样式选择器距离顶部距离与下拉列表滚动条颜色

* feat(setting-style): add help link button

* fix(setting-style): delete empty row by code review
This commit is contained in:
chilingling 2024-01-24 17:35:08 +08:00 committed by GitHub
parent dec9334eb8
commit 28ee851b2a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 328 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/common/component/MetaCodeEditor.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div class="editor-wrap"> <div class="editor-wrap">
<slot> <slot :open="open">
<div v-if="buttonShowContent" :class="['full-width', { 'empty-color': value === '' }]" @click="open"> <div v-if="buttonShowContent" :class="['full-width', { 'empty-color': value === '' }]" @click="open">
<span>{{ value === '' ? buttonLabel : value?.slice(0, 30) }}</span> <span class="text-content text-ellipsis-multiple">{{ value === '' ? buttonLabel : value }}</span>
<svg-icon class="edit-icon" name="flow-edit"></svg-icon> <svg-icon class="edit-icon" name="edit"></svg-icon>
</div> </div>
<tiny-button v-else class="edit-btn" @click="open"> <tiny-button v-else class="edit-btn" @click="open">
{{ buttonLabel }} {{ buttonLabel }}
@ -15,6 +15,7 @@
width="50vw" width="50vw"
class="meta-code-editor-dialog-box" class="meta-code-editor-dialog-box"
append-to-body append-to-body
:close-on-click-modal="false"
> >
<div class="source-code"> <div class="source-code">
<div v-if="editorTipsTitle" class="header-tips-container"> <div v-if="editorTipsTitle" class="header-tips-container">
@ -45,7 +46,13 @@
</div> </div>
<template #footer> <template #footer>
<div class="btn-box"> <div class="btn-box">
<tiny-button plain type="danger" v-if="language === 'json' && showFormatBtn" @click="formatCode"> <tiny-button
v-if="language === 'json' && showFormatBtn"
class="format-btn"
plain
type="danger"
@click="formatCode"
>
{{ $t('common.format') }} {{ $t('common.format') }}
</tiny-button> </tiny-button>
<div> <div>
@ -269,20 +276,32 @@ export default {
} }
.btn-box { .btn-box {
display: flex; display: flex;
justify-content: space-between; justify-content: flex-end;
&:has(.format-btn) {
justify-content: space-between;
}
} }
.full-width { .full-width {
border: 1px solid #adb0b8;
border-radius: 6px;
padding: 4px 8px;
height: 32px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%;
height: 32px;
padding: 4px 8px;
border: 1px solid var(--ti-lowcode-meta-codeEditor-border-color);
border-radius: 6px;
&:hover {
border-color: var(--ti-lowcode-meta-codeEditor-border-hover-color);
}
.text-content {
--ellipsis-line: 1;
}
&.empty-color { &.empty-color {
color: var(--ti-lowcode-common-text-desc-color); color: var(--ti-lowcode-common-text-desc-color);
} }
.edit-icon { .edit-icon {
margin-left: 4px;
flex-shrink: 0;
cursor: pointer; cursor: pointer;
color: var(--ti-lowcode-common-text-main-color); color: var(--ti-lowcode-common-text-main-color);
} }

3
packages/controller/src/useHelp.js
View File

@ -20,7 +20,8 @@ const helpState = {
datasource: 11, datasource: 11,
i18n: 12, i18n: 12,
page: 2, page: 2,
script: 8 script: 8,
stylePanel: 6
} }
} }

4
packages/design-core/assets/error.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" xml:space="preserve" isSvg="true">
<path d="M14 7c0 3.87-3.13 7-7 7s-7-3.13-7-7 3.13-7 7-7 7 3.13 7 7z" style="fill-rule: evenodd; clip-rule: evenodd;"></path>
<path d="M9.96 9.29c.09.09.14.21.14.34 0 .13-.05.25-.14.33a.47.47 0 0 1-.67 0L7 7.67 4.71 9.96c-.18.18-.49.18-.67 0a.483.483 0 0 1 0-.67L6.33 7 4.04 4.71c-.09-.09-.14-.21-.14-.34s.05-.25.14-.34c.18-.18.49-.18.67 0L7 6.33l2.29-2.29c.19-.18.49-.18.67 0 .09.09.14.21.14.34s-.05.25-.14.34L7.67 7l2.29 2.29z" style="fill: rgb(255, 255, 255);"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 576 B

4
packages/design-core/src/DesignSettings.vue
View File

@ -47,10 +47,6 @@ export default {
padding-top: 20px; padding-top: 20px;
background-color: var(--ti-lowcode-setting-panel-bg-color); background-color: var(--ti-lowcode-setting-panel-bg-color);
::-webkit-scrollbar {
display: none;
}
.tiny-tabs { .tiny-tabs {
height: 100%; height: 100%;
} }

71
packages/settings/styles/src/Main.vue
View File

@ -1,24 +1,17 @@
<template> <template>
<div class="style-editor"> <div class="style-editor">
<meta-code-editor
:modelValue="state.cssContent"
title="Css 编辑"
button-text="编辑全局样式"
language="css"
single
@save="save(CSS_TYPE.Css, $event)"
/>
<div class="line-style"> <div class="line-style">
<span class="line-text"> 行内样式 </span> <span class="line-text"> 行内样式 </span>
<div class="inline-style"> <div class="inline-style">
<meta-code-editor <meta-code-editor
v-if="state.lineStyleDisable" v-if="state.lineStyleDisable"
:buttonShowContent="true"
:modelValue="state.styleContent" :modelValue="state.styleContent"
title="编辑行内样式" title="编辑行内样式"
:button-text="state.inlineBtnText" :button-text="state.inlineBtnText"
language="css" language="css"
single single
@save="save(CSS_TYPE.Style, $event)" @save="save"
/> />
<div v-if="!state.lineStyleDisable"> <div v-if="!state.lineStyleDisable">
<tiny-input v-model="state.propertiesList" class="inline-bind-style"> </tiny-input> <tiny-input v-model="state.propertiesList" class="inline-bind-style"> </tiny-input>
@ -75,7 +68,7 @@
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
import { Collapse, CollapseItem, Input } from '@opentiny/vue' import { Collapse, CollapseItem, Input } from '@opentiny/vue'
import { useHistory, useCanvas, useProperties } from '@opentiny/tiny-engine-controller' import { useHistory, useCanvas, useProperties } from '@opentiny/tiny-engine-controller'
import { setPageCss, getSchema as getCanvasPageSchema } from '@opentiny/tiny-engine-canvas' import { getSchema as getCanvasPageSchema, updateRect } from '@opentiny/tiny-engine-canvas'
import { MetaCodeEditor, MetaBindVariable } from '@opentiny/tiny-engine-common' import { MetaCodeEditor, MetaBindVariable } from '@opentiny/tiny-engine-common'
import { formatString } from '@opentiny/tiny-engine-common/js/ast' import { formatString } from '@opentiny/tiny-engine-common/js/ast'
import { import {
@ -125,43 +118,33 @@ export default {
'borders', 'borders',
'effects' 'effects'
]) ])
const { getCurrentSchema, getPageSchema } = useCanvas() const { getCurrentSchema } = useCanvas()
// 获取当前节点 style 对象 // 获取当前节点 style 对象
const { state, updateStyle } = useStyle() // updateStyle const { state, updateStyle } = useStyle() // updateStyle
const { addHistory } = useHistory() const { addHistory } = useHistory()
const { getSchema } = useProperties() const { getSchema } = useProperties()
// 打开编辑器
// 保存编辑器内容，并回写到 schema // 保存编辑器内容，并回写到 schema
const save = (type, { content }) => { const save = ({ content }) => {
if (type === CSS_TYPE.Style) { const pageSchema = getCanvasPageSchema()
const pageSchema = getCanvasPageSchema() const schema = getSchema() || pageSchema
const schema = getSchema() || pageSchema const styleString = formatString(styleStrRemoveRoot(content), 'css')
const styleString = formatString(styleStrRemoveRoot(content), 'css') const currentSchema = getCurrentSchema() || pageSchema
const currentSchema = getCurrentSchema() || pageSchema
state.styleContent = content state.styleContent = content
schema.props = schema.props || {} schema.props = schema.props || {}
schema.props.style = styleString schema.props.style = styleString
currentSchema.props = currentSchema.props || {} currentSchema.props = currentSchema.props || {}
if (styleString) { if (styleString) {
currentSchema.props.style = styleString currentSchema.props.style = styleString
} else { } else {
delete currentSchema.props.style delete currentSchema.props.style
}
addHistory()
} else if (type === CSS_TYPE.Css) {
const cssString = formatString(content.replace(/"/g, "'"), 'css')
getPageSchema().css = cssString
getCanvasPageSchema().css = cssString
setPageCss(cssString)
state.schemaUpdateKey++
addHistory()
} }
addHistory()
updateRect()
} }
const setConfig = (value) => { const setConfig = (value) => {
@ -181,6 +164,8 @@ export default {
state.lineStyleDisable = true state.lineStyleDisable = true
addHistory() addHistory()
} }
updateRect()
} }
watch( watch(
@ -218,21 +203,22 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.style-editor { .style-editor {
justify-content: space-around; justify-content: space-around;
padding: 8px 16px 12px; padding: 8px 16px 0;
column-gap: 8px; column-gap: 8px;
.line-style { .line-style {
display: block; display: block;
margin-top: 16px;
margin-bottom: 8px;
color: var(--ti-lowcode-setting-style-font-color); color: var(--ti-lowcode-setting-style-font-color);
font-size: 12px; font-size: 12px;
.line-text { .line-text {
margin-bottom: 8px;
display: block; display: block;
margin-bottom: 8px;
font-size: 14px;
color: var(--ti-lowcode-setting-style-title-color);
} }
} }
.inline-style { .inline-style {
display: flex; display: flex;
align-items: center;
:deep(.editor-wrap) { :deep(.editor-wrap) {
display: flex; display: flex;
.tiny-button { .tiny-button {
@ -257,8 +243,5 @@ export default {
} }
} }
} }
:deep(.svg-icon) {
margin-top: 5px;
}
} }
</style> </style>

462
packages/settings/styles/src/components/classNamesContainer/index.vue
View File

@ -1,113 +1,113 @@
<template> <template>
<div class="className-container"> <div class="className-container">
<h6 class="title">样式选择器</h6> <h6 class="title">
<span>全局样式</span>
<link-button :href="docsUrl" class="help-link"></link-button>
</h6>
<div class="selector-container"> <div class="selector-container">
<div class="className-selector-wrap"> <meta-code-editor
<div :modelValue="state.cssContent"
:class="['className-selector-container', { 'has-error': classNameState.selectorHasError }]" title="Css 编辑"
@click="handleFocusInput" language="css"
> v-slot="scope"
<div v-if="classNameState.curSelector || classNameState.curSelectorIsEditing" class="current-selector"> single
<div class="current-selector-label"> @save="save"
<span >
ref="selectorTextRef" <div class="edit-global-css" title="编辑全局样式" @click="scope.open">
:contenteditable="classNameState.curSelectorIsEditing" <svg-icon name="edit"></svg-icon>
:class="['selector-label-text', { 'text-editing': classNameState.curSelectorIsEditing }]" </div>
:key="classNameState.curSelectorIsEditing" </meta-code-editor>
@click.stop="handleEditCurSelector" <div class="selector-right-container">
@input="handleCurSelectorChange" <div class="selector-right-container-wrap">
@blur="handleCompleteEditCurSelector" <div
@keyup.enter="handleCompleteEditCurSelector" :class="['className-selector-container', { 'has-error': classNameState.selectorHasError }]"
@keyup.esc="handleCompleteEditCurSelector" @click="handleFocusInput"
> >
{{ classNameState.curSelector }} <div v-if="classNameState.curSelector || classNameState.curSelectorIsEditing" class="current-selector">
</span> <div class="current-selector-label">
<div v-if="!classNameState.curSelectorIsEditing && classNameState.curSelectorEditable" class="edit-wrap"> <span
<svg-icon name="edit" title="编辑" class="edit-btn" @click.stop="handleEditCurSelector"></svg-icon> ref="selectorTextRef"
<tiny-popover :contenteditable="classNameState.curSelectorIsEditing"
v-model="classNameState.showDelConfirm" :class="['selector-label-text', { 'text-editing': classNameState.curSelectorIsEditing }]"
trigger="manual" :key="classNameState.curSelectorIsEditing"
class="del-selector-popover" :title="classNameState.curSelector"
popper-class="del-selector-popper-wrapper" @click.stop="handleEditCurSelector"
@input="handleCurSelectorChange"
@blur="handleCompleteEditCurSelector"
@keyup.enter="handleCompleteEditCurSelector"
@keyup.esc="handleCompleteEditCurSelector"
> >
<div class="popper-confirm" @mousedown.stop=""> {{ classNameState.curSelector }}
<div class="popper-confirm-header"> </span>
<svg-icon class="icon" name="warning"></svg-icon> <div
<span class="title">您确定删除该选择器吗？</span> v-if="!classNameState.curSelectorIsEditing && classNameState.curSelectorEditable"
</div> class="edit-wrap"
<div class="popper-confirm-footer"> >
<tiny-button class="confirm-btn" size="small" type="primary" @click="handleDelSelector"> <svg-icon name="edit" title="编辑" class="edit-btn" @click.stop="handleEditCurSelector"></svg-icon>
确定 <svg-icon name="close" title="删除" class="delete-btn" @click.stop="handleDelSelector"></svg-icon>
</tiny-button> </div>
<tiny-button size="small" class="cancel-btn" @click="handleTriggerDelConfirm(false)">
取消
</tiny-button>
</div>
</div>
<template #reference>
<svg-icon
name="delete"
title="删除"
class="delete-btn"
@click.stop="handleTriggerDelConfirm(true)"
></svg-icon>
</template>
</tiny-popover>
</div> </div>
</div> </div>
<span v-else class="empty-tips">请选择或创建类名</span>
<input
ref="newSelectorInputRef"
type="text"
v-model="classNameState.newSelector"
class="selector-input"
@change="handleInputChange"
@blur="handleCreateNewClass"
@keyup.enter="handleCreateNewClass"
@keydown.delete="handleDeleteCurSelector"
/>
</div> </div>
<span v-else class="empty-tips">请选择或创建类名</span> <tiny-select v-model="state.className.mouseState" :options="stateOptions" class="state-selector">
<input </tiny-select>
ref="newSelectorInputRef" </div>
type="text" <div v-if="classNameState.selectorHasError" class="error-tips">
v-model="classNameState.newSelector" <svg-icon name="error"></svg-icon>
class="selector-input" <span class="error-tips-text">{{ classNameState.selectorHasError }}</span>
@change="handleInputChange" </div>
@blur="handleCreateNewClass" <div v-if="classNameState.showDropdownList" class="selector-drop-down-list lowcode-scrollbar-thin">
@keyup.enter="handleCreateNewClass" <span class="selector-dropdown-list-tips">输入并回车创建新选择器</span>
/> <span v-if="currentSelectorList.length" class="selector-dropdown-list-tips">选择已有选择器编辑</span>
<div v-if="classNameState.showDropdownList" class="selector-drop-down-list"> <ul class="exist-class-list">
<span class="selector-dropdown-list-tips">输入并回车创建新选择器</span> <li
<span v-if="currentSelectorList.length" class="selector-dropdown-list-tips">选择已有选择器编辑</span> v-for="item in currentSelectorList"
<ul class="exist-class-list"> :key="item"
<li :title="item"
v-for="item in currentSelectorList" class="exist-class-item"
:key="item" @mousedown="handleSelectExistingClass(item)"
:title="item" >
class="exist-class-item" <span>{{ item }}</span>
@mousedown="handleSelectExistingClass(item)" </li>
> </ul>
<span>{{ item }}</span> <span v-if="state.selectors.length" class="selector-dropdown-list-tips add-global-class-tips">
</li> 添加全局类到当前组件并编辑
</ul> </span>
<span v-if="state.selectors.length" class="selector-dropdown-list-tips add-global-class-tips"> <ul class="exist-class-list">
添加全局类到当前组件并编辑 <li
</span> v-for="item in state.selectors"
<ul class="exist-class-list"> :key="item"
<li :title="item"
v-for="item in state.selectors" class="exist-class-item"
:key="item" @mousedown="handleSelectExistingClass(item)"
:title="item" >
class="exist-class-item" <span>{{ item }}</span>
@mousedown="handleSelectExistingClass(item)" </li>
> </ul>
<span>{{ item }}</span>
</li>
</ul>
</div>
</div> </div>
<div v-if="classNameState.selectorHasError" class="error-tips">{{ classNameState.selectorHasError }}</div>
</div> </div>
<tiny-select v-model="state.className.mouseState" :options="stateOptions" class="state-selector"> </tiny-select>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed, reactive, ref, nextTick, watch, watchEffect } from 'vue' import { computed, reactive, ref, nextTick, watch, watchEffect } from 'vue'
import { Select as TinySelect, Popover as TinyPopover, Button as TinyButton } from '@opentiny/vue' import { Select as TinySelect } from '@opentiny/vue'
import { getSchema as getCanvasPageSchema } from '@opentiny/tiny-engine-canvas' import { setPageCss, getSchema as getCanvasPageSchema, updateRect } from '@opentiny/tiny-engine-canvas'
import { useProperties } from '@opentiny/tiny-engine-controller' import { useProperties, useCanvas, useHistory, useHelp } from '@opentiny/tiny-engine-controller'
import { MetaCodeEditor, LinkButton } from '@opentiny/tiny-engine-common'
import { formatString } from '@opentiny/tiny-engine-common/js/ast'
import useStyle, { updateGlobalStyleStr } from '../../js/useStyle' import useStyle, { updateGlobalStyleStr } from '../../js/useStyle'
import { stringify, getSelectorArr } from '../../js/parser' import { stringify, getSelectorArr } from '../../js/parser'
@ -131,6 +131,8 @@ const OPTION_TYPE = {
EDIT: 'edit' EDIT: 'edit'
} }
const docsUrl = useHelp().getDocsUrl('stylePanel')
const classNameState = reactive({ const classNameState = reactive({
curSelector: '', curSelector: '',
curSelectorEditable: false, curSelectorEditable: false,
@ -182,7 +184,14 @@ const setSelectorProps = (type, value) => {
// 编辑 className 新增、删除、或修改 // 编辑 className 新增、删除、或修改
const editClassName = (curClassName, optionType = OPTION_TYPE.ADD, oldSelector = '') => { const editClassName = (curClassName, optionType = OPTION_TYPE.ADD, oldSelector = '') => {
const schema = getSchema() || getCanvasPageSchema() const schema = getSchema() || getCanvasPageSchema()
const type = curClassName.startsWith('.') ? SELECTOR_TYPE.CLASS_NAME : SELECTOR_TYPE.ID let type = ''
if (curClassName.startsWith('.')) {
type = SELECTOR_TYPE.CLASS_NAME
} else if (curClassName.startsWith('#')) {
type = SELECTOR_TYPE.ID
}
const classNames = schema.props.className || '' const classNames = schema.props.className || ''
const ids = schema.props.id || '' const ids = schema.props.id || ''
const typeMap = { const typeMap = {
@ -396,25 +405,12 @@ const handleCompleteEditCurSelector = () => {
updateGlobalStyleStr(newStyleStr) updateGlobalStyleStr(newStyleStr)
} }
const listener = () => {
classNameState.showDelConfirm = false
}
// 删除确认弹窗
const handleTriggerDelConfirm = (visible) => {
classNameState.showDelConfirm = visible
if (visible) {
window.addEventListener('click', listener)
} else {
window.removeEventListener('click', listener)
}
}
const handleDelSelector = () => { const handleDelSelector = () => {
// 删除选择器，仅从当前选中组件中删除类名, 不删除全局 css 中的 css 类名和样式 // 删除选择器，仅从当前选中组件中删除类名, 不删除全局 css 中的 css 类名和样式
// 后期需要可以拿到全局组件的类名，如果只有当前组件使用该类名，从全局样式中删除之 // 后期需要可以拿到全局组件的类名，如果只有当前组件使用该类名，从全局样式中删除之
editClassName(classNameState.curSelector, OPTION_TYPE.REMOVE) editClassName(classNameState.curSelector, OPTION_TYPE.REMOVE)
state.className.classNameList = ''
state.className.mouseState = ''
} }
const handleFocusInput = () => { const handleFocusInput = () => {
@ -436,46 +432,104 @@ const handleCurSelectorChange = (event) => {
watchEffect(() => { watchEffect(() => {
selectorValidator(classNameState.newSelector) selectorValidator(classNameState.newSelector)
}) })
const save = ({ content }) => {
const cssString = formatString(content.replace(/"/g, "'"), 'css')
const { getPageSchema } = useCanvas()
const { addHistory } = useHistory()
getPageSchema().css = cssString
getCanvasPageSchema().css = cssString
setPageCss(cssString)
state.schemaUpdateKey++
addHistory()
updateRect()
}
// 监听回车删除键，如果当前输入为空，则解绑当前选择器
const handleDeleteCurSelector = () => {
// 当前新建的选择器不为空，则在编辑当前选择器
if (classNameState.newSelector) {
return
}
// 在编辑当前选择器则不做更改
if (classNameState.curSelectorIsEditing) {
return
}
// 解绑当前选择器
handleDelSelector()
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.className-container { .className-container {
padding: 10px; ::-webkit-scrollbar {
display: block;
}
padding: 16px 16px 8px;
}
.title {
margin: 0;
font-size: 14px;
color: var(--ti-lowcode-className-selector-title-color);
font-weight: normal;
.help-link {
vertical-align: middle;
}
} }
.selector-container { .selector-container {
display: flex; display: flex;
margin-top: 10px; margin-top: 10px;
color: var(--ti-lowcode-className-selector-container-color); color: var(--ti-lowcode-className-selector-container-color);
.selector-right-container {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
position: relative;
margin-left: 8px;
}
.selector-right-container-wrap {
display: flex;
}
.className-selector-wrap { .className-selector-wrap {
.error-tips { max-width: 180px;
margin-top: 8px; min-width: 0;
font-size: 12px; }
color: var(--ti-lowcode-className-selector-error-tips-color); :deep(.editor-wrap) {
} width: 30px;
}
.edit-global-css {
display: flex;
padding: 7px;
border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
border-radius: 6px;
cursor: pointer;
} }
.className-selector-container { .className-selector-container {
flex: 7;
border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
border-radius: 6px;
padding: 2px 10px;
display: flex; display: flex;
max-width: 180px;
row-gap: 2px; row-gap: 2px;
align-items: center; align-items: center;
position: relative;
overflow: visible;
flex-wrap: wrap; flex-wrap: wrap;
max-width: 180px;
min-width: 0;
padding: 1px 10px;
border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
border-radius: 6px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
font-size: 12px;
&:hover { &:hover {
border-color: var(--ti-lowcode-className-selector-container-hover-border-color); border-color: var(--ti-lowcode-className-selector-container-hover-border-color);
} }
&.has-error { &.has-error {
border-color: var(--ti-lowcode-className-selector-container-error-border-color); border-color: var(--ti-lowcode-className-selector-container-error-border-color);
background-color: var(--ti-lowcode-className-selector-container-error-bg-color); background-color: var(--ti-lowcode-className-selector-container-error-bg-color);
.selector-drop-down-list {
top: calc(100% + 30px);
}
} }
&:has(.selector-input:focus) { &:has(.selector-input:focus) {
.empty-tips { .empty-tips {
@ -484,7 +538,6 @@ watchEffect(() => {
} }
.empty-tips { .empty-tips {
position: absolute; position: absolute;
font-size: 14px;
color: var(--ti-lowcode-className-selector-container-empty-tips-color); color: var(--ti-lowcode-className-selector-container-empty-tips-color);
z-index: 0; z-index: 0;
} }
@ -494,10 +547,10 @@ watchEffect(() => {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: var(--ti-lowcode-className-selector-container-label-bg-color); background-color: var(--ti-lowcode-className-selector-container-label-bg-color);
color: #fff; color: var(--ti-lowcode-className-selector-container-label-color);
padding: 1px 4px; padding: 1px 4px;
border-radius: 2px; border-radius: 4px;
line-height: 30px; line-height: 26px;
.selector-label-text { .selector-label-text {
outline: none; outline: none;
overflow: hidden; overflow: hidden;
@ -531,7 +584,7 @@ watchEffect(() => {
color: var(--ti-lowcode-className-selector-container-color); color: var(--ti-lowcode-className-selector-container-color);
min-width: 0; min-width: 0;
flex: 0 0 0; flex: 0 0 0;
line-height: 30px; line-height: 28px;
z-index: 1; z-index: 1;
border: none; border: none;
outline: none; outline: none;
@ -542,95 +595,82 @@ watchEffect(() => {
padding: 1px 2px; padding: 1px 2px;
} }
} }
}
.selector-drop-down-list { .error-tips {
box-sizing: border-box; display: flex;
position: absolute; align-items: center;
margin-top: 8px;
font-size: 12px;
color: var(--ti-lowcode-className-selector-error-tips-color);
.error-tips-text {
margin-left: 4px;
}
}
.selector-drop-down-list {
box-sizing: border-box;
position: absolute;
display: flex;
width: 100%;
max-height: 200px;
top: calc(100% + 10px);
left: 0;
padding: 8px 0;
background-color: var(--ti-lowcode-className-selector-dropdown-list-bg-color);
border: 1px solid transparent;
border-radius: 6px;
z-index: 1;
flex-direction: column;
overflow: scroll;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
.selector-dropdown-list-tips {
font-size: 12px;
padding: 0 10px;
line-height: 32px;
color: var(--ti-lowcode-className-selector-dropdown-list-tips-color);
}
.selector-dropdown-list-tips + .selector-dropdown-list-tips {
margin-top: 10px;
}
.add-global-class-tips {
margin-top: 10px;
}
.exist-class-item {
cursor: pointer;
height: 32px;
padding: 0 16px;
display: flex; display: flex;
width: 100%; align-items: center;
max-height: 200px; font-size: 12px;
top: calc(100% + 10px); > span {
left: 0; overflow: hidden;
padding: 8px 0; text-overflow: ellipsis;
background-color: var(--ti-lowcode-className-selector-dropdown-list-bg-color);
border: 1px solid transparent;
z-index: 1;
flex-direction: column;
overflow: scroll;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
.selector-dropdown-list-tips {
font-size: 12px;
padding: 0 10px;
} }
&.active,
.selector-dropdown-list-tips + .selector-dropdown-list-tips { &:hover {
margin-top: 10px; background-color: var(--ti-lowcode-className-selector-dropdown-list-item-active-bg-color);
} color: var(--ti-lowcode-className-selector-dropdown-list-item-color);
.add-global-class-tips {
margin-top: 10px;
}
.exist-class-item {
cursor: pointer;
height: 32px;
padding: 0 16px;
display: flex;
align-items: center;
font-size: 14px;
> span {
overflow: hidden;
text-overflow: ellipsis;
}
&.active,
&:hover {
background-color: var(--ti-lowcode-className-selector-dropdown-list-item-active-bg-color);
color: var(--ti-lowcode-className-selector-dropdown-list-item-color);
}
} }
} }
} }
.state-selector { .state-selector {
flex: 4; flex: 4;
flex-shrink: 0; min-width: 84px;
margin-left: 4px; border: 1px solid var(--ti-lowcode-className-selector-container-border-color);
} border-radius: 6px;
} border-left: none;
border-top-left-radius: 0;
.title { border-bottom-left-radius: 0;
margin: 0; :deep(input) {
color: var(--ti-lowcode-className-selector-title-color); padding-right: 30px;
} border: none;
</style> font-size: 12px;
<style lang="less">
.tiny-popover.tiny-popper.del-selector-popper-wrapper {
width: 220px;
height: 108px;
box-sizing: border-box;
background-color: var(--ti-lowcode-className-selector-del-popover-bg-color);
padding: 6px;
.popper-confirm {
padding: 20px;
}
.popper-confirm-header {
font-size: 12px;
color: var(--ti-lowcode-className-selector-del-popover-title-color);
.icon {
color: var(--ti-lowcode-warning-color);
width: 16px;
height: 16px;
} }
.title {
margin-left: 4px;
}
}
.popper-confirm-footer {
text-align: center;
margin-top: 22px;
} }
} }
</style> </style>

2
packages/settings/styles/src/js/useStyle.js
View File

@ -166,7 +166,7 @@ watch(
state.style = {} state.style = {}
} }
state.styleContent = `:root {\n ${schema?.props?.style || ''}\n}` state.styleContent = formatString(`:root {\n ${schema?.props?.style || ''}\n}`, 'css')
}, },
{ {
immediate: true, immediate: true,

1
packages/theme/dark/setting-style.less
View File

@ -4,4 +4,5 @@
--ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0); --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0);
--ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-base-gray-40); --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-base-gray-40);
--ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-base-blue-6); --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-base-blue-6);
--ti-lowcode-setting-style-title-color: var(--ti-lowcode-base-text-color);
} }

6
packages/theme/dark/settings.less
View File

@ -30,12 +30,14 @@
--ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40); --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40);
--ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-primary-color-2); --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-primary-color-2);
--ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1); --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1);
--ti-lowcode-className-selector-container-label-bg-color: var(--ti-lowcode-base-blue-6); --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1);
--ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-gray-0); --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-blue-6);
--ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-blue-6);
--ti-lowcode-className-selector-dropdown-list-bg-color: #202020; --ti-lowcode-className-selector-dropdown-list-bg-color: #202020;
--ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color); --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color);
--ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-bg-2); --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-bg-2);
--ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color); --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color);
--ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3);
} }
:root { :root {

2
packages/theme/light/base.less
View File

@ -3,7 +3,7 @@
--ti-lowcode-base-gray-0: #fff; --ti-lowcode-base-gray-0: #fff;
--ti-lowcode-base-gray-5: #fafafa; --ti-lowcode-base-gray-5: #fafafa;
--ti-lowcode-base-gray-10: #f5f5f5; --ti-lowcode-base-gray-10: #f5f5f5;
--ti-lowcode-base-gray-20: #ebebeb; --ti-lowcode-base-gray-20: #f0f0f0;
--ti-lowcode-base-gray-30: #dbdbdb; --ti-lowcode-base-gray-30: #dbdbdb;
--ti-lowcode-base-gray-40: #c2c2c2; --ti-lowcode-base-gray-40: #c2c2c2;
--ti-lowcode-base-gray-50: #808080; --ti-lowcode-base-gray-50: #808080;

4
packages/theme/light/metaComponent.less
View File

@ -9,9 +9,9 @@
// MetaCodeEditor // MetaCodeEditor
--ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-base-text-color); --ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-base-text-color);
--ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-base-secondary-button-border-color);
--ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-base-text-color); --ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-base-text-color);
--ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-base-secondary-button-border-hover-color); --ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-base-default-button-border-color);
--ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-base-default-button-border-hover-color);
} }
// config-item label popover tips // config-item label popover tips

3
packages/theme/light/setting-style.less
View File

@ -1,7 +1,8 @@
:root { :root {
--ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6); --ti-lowcode-setting-style-input-bg: var(--ti-lowcode-base-blue-6);
--ti-lowcode-setting-style-font-color: var(--ti-lowcode-base-gray-60); --ti-lowcode-setting-style-font-color: var(--ti-lowcode-base-text-color);
--ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0); --ti-lowcode-setting-style-input-font-color: var(--ti-lowcode-base-gray-0);
--ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-base-gray-50); --ti-lowcode-setting-style-btn-font-color: var(--ti-lowcode-base-gray-50);
--ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-base-gray-90); --ti-lowcode-setting-style-btn-border-color: var(--ti-lowcode-base-gray-90);
--ti-lowcode-setting-style-title-color: var(--ti-lowcode-base-text-color);
} }

8
packages/theme/light/settings.less
View File

@ -30,12 +30,14 @@
--ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40); --ti-lowcode-className-selector-container-border-color: var(--ti-lowcode-base-gray-40);
--ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-gray-90); --ti-lowcode-className-selector-container-hover-border-color: var(--ti-lowcode-base-gray-90);
--ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1); --ti-lowcode-className-selector-container-empty-tips-color: var(--ti-lowcode-base-text-color-1);
--ti-lowcode-className-selector-container-label-bg-color: var(--ti-lowcode-base-blue-6); --ti-lowcode-className-selector-container-label-bg-color: rgba(20, 118, 255, 0.1);
--ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-gray-0); --ti-lowcode-className-selector-container-label-color: var(--ti-lowcode-base-primary-color-2);
--ti-lowcode-className-selector-container-option-btn-color: var(--ti-lowcode-base-primary-color-2);
--ti-lowcode-className-selector-dropdown-list-bg-color: var(--ti-lowcode-base-gray-0); --ti-lowcode-className-selector-dropdown-list-bg-color: var(--ti-lowcode-base-gray-0);
--ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color); --ti-lowcode-className-selector-dropdown-list-item-color: var(--ti-lowcode-base-text-color);
--ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-bg-2); --ti-lowcode-className-selector-dropdown-list-item-active-bg-color: var(--ti-lowcode-base-gray-20);
--ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color); --ti-lowcode-className-selector-title-color: var(--ti-lowcode-base-text-color);
--ti-lowcode-className-selector-dropdown-list-tips-color: var(--ti-lowcode-base-text-color-3);
} }
:root { :root {

5
packages/theme/light/variable.less
View File

@ -50,11 +50,6 @@
--ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-base-text-color); --ti-lowcode-component-svg-button-active-color: var(--ti-lowcode-base-text-color);
--ti-lowcode-component-svg-button-active-bg-color: rgba(0, 0, 0, 0.05); --ti-lowcode-component-svg-button-active-bg-color: rgba(0, 0, 0, 0.05);
--ti-lowcode-meta-codeEditor-color: var(--ti-lowcode-component-btn-default-color);
--ti-lowcode-meta-codeEditor-border-color: var(--ti-lowcode-component-btn-default-border-color);
--ti-lowcode-meta-codeEditor-hover-color: var(--ti-lowcode-component-btn-default-hover-color);
--ti-lowcode-meta-codeEditor-border-hover-color: var(--ti-lowcode-component-btn-default-border-hover-color);
// 关闭按钮 // 关闭按钮
--ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-base-text-color); // 关闭按钮默认颜色 --ti-lowcode-component-close-icon-text-color: var(--ti-lowcode-base-text-color); // 关闭按钮默认颜色
--ti-lowcode-component-close-icon-text-hover-color: var( --ti-lowcode-component-close-icon-text-hover-color: var(