Skip to content

Commit

Permalink
fix some detail styles in the plugins (#831)
Browse files Browse the repository at this point in the history 
* fix: panel组件间距调整

* feat: page management ui redesign

* feat: block ui redesign

* fix: 去掉选择区块高亮

* feat: 数据源样式调整

* feat: 数据源交互调整

* feat: 帮助样式整改

* feat: AI功能样式调整

* feat: 资源管理、状态管理样式整改

* feat: 国际化样式调整

* feat: 头部、按钮、图标细节调整

* feat: 样式细节调整

* feat: 样式细节调整

* fix:面包屑区分区块和页面

* fix:调整帮助面板间距颜色

* fix: 页面管理间距调整

* fix: 历史备份样式调整

* fix： 数据源/状态管理下拉调整

* fix: 全屏图标位置调整

* fix：去掉工具栏左侧面包屑边框

* fix: fix review

* fix: fix pageInputOutput review

* fix: fix review

* fix: codeEditor添加插槽

* fix: 物料样式调整

* fix: 部分bug修复

* feat: 调整区块设置编辑交互

* fix: 全屏后图标游离

* fix: 调整区块列表高度

* fix: 调整AI输入框边框

* feat: 调整添加区块搜索框

* fix: 调整暂无数据样式

* feat: 调整添加区块样式

* fix: 调整合并公共组件后的区块间距

* fix: 调整合并组件后的页面区块间距

* fix: 调整数据源间距

* fix: 调整数据源静态数据样式

* fix: fix review

* feat:图标更新

* fix:修复区块遮挡

* fix: fix review

* fix: 点击编辑区块

* fix: 修改tiny-tree空数据字体颜色

* fix: 调整notify图标文字上下居中

* fix: 点击更多面板，保存下拉面板收起

* fix:调整tooltip样式

* fix:调整保存按钮气泡显示方式

* fix: 调整tooltips阴影

* fix:调整色值变量

* fix:修改编辑器全屏层级

* fix；去掉svg多余注释

* fix: fix review

* fix:fix review
  • Loading branch information
@lichunn
lichunn authored Oct 22, 2024
1 parent 399b9ad commit 6a736b6
Show file tree
Hide file tree
Showing 225 changed files with 2,599 additions and 1,617 deletions.
1 change: 0 additions & 1 deletion packages/common/component/BlockHistoryList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,6 @@ defineEmits(['preview', 'restore'])
}
.empty {
margin-left: 12px;
color: var(--ti-lowcode-common-empty-text-color);
}
</style>
4 changes: 1 addition & 3 deletions packages/common/component/LifeCycles.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,8 +243,6 @@ export default {
<style lang="less" scoped>
.life-cycle {
display: flex; // 决定了鼠标移入后的弹窗位置
padding: 0 12px;
margin-top: 10px;
svg {
outline: none;
}
Expand All @@ -263,7 +261,7 @@ export default {
}
.life-cycle-tips {
color: var(--ti-lowcode-life-cycle-alert-color);
margin: 4px 0 12px 20px;
margin: 4px 0 12px 0;
height: 16px;
line-height: 16px;
}
Expand Down
3 changes: 2 additions & 1 deletion packages/common/component/MonacoEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ export default {
bottom: 0;
left: calc(var(--base-nav-panel-width) + var(--base-left-panel-width));
right: var(--base-left-panel-width);
z-index: 10;
z-index: 100;
padding: 10px 16px 16px 16px;
background-color: var(--ti-lowcode-common-component-bg);
height: auto !important;
Expand All @@ -159,6 +159,7 @@ export default {
}
}
.fullscreen {
display: flex;
margin-right: 20px;
}
}
Expand Down
186 changes: 80 additions & 106 deletions packages/common/component/PluginBlockList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,17 @@
:class="['block-list', 'lowcode-scrollbar', { 'is-small-list': blockStyle === 'mini' }, { isShortcutPanel }]"
@mouseleave="state.hover = false"
>
<li v-if="showAddButton" class="block-item block-plus" @click="$emit('add')">
<span class="block-plus-icon"><icon-plus></icon-plus></span>
<div class="item-text">添加区块</div>
</li>
<li
v-for="(item, index) in state.data"
:key="item.blockName"
:draggable="!isBlockManage && showSettingIcon"
:class="['block-item', { 'is-disabled': showBlockDetail }, { 'block-item-small-list': blockStyle === 'mini' }]"
:title="getTitle(item)"
@mousedown.stop.left="blockClick({ item, index })"
@mousedown.stop.left="blockClick({ event: $event, item, index })"
@mouseover.stop="openBlockShotPanel(item, $event)"
@mouseleave="handleBlockItemLeave"
>
Expand All @@ -23,7 +27,7 @@
draggable="false"
@error="$event.target.src = defaultImg"
/>
<svg-icon v-else class="item-image item-default-img" name="block-default-img"></svg-icon>
<svg-icon v-else class="item-image item-default-img" name="block-default"></svg-icon>
</div>
<div class="item-text">
<div class="item-name">{{ item.name_cn || item.label || item.content?.fileName }}</div>
Expand All @@ -42,81 +46,44 @@
<div v-if="isBlockManage && !item.is_published" class="publish-flag">未发布</div>

<div v-if="isBlockManage" class="block-detail">
<tiny-popover
placement="bottom-end"
width="120"
append-to-body
trigger="manual"
:modelValue="state.hoverItemId === item.id && state.currentShowMenuId === item.id"
:visible-arrow="false"
popper-class="popper-options block-setting-popover"
>
<template #reference>
<svg-button
name="ellipsis"
class="block-detail-icon"
@click="handleShowVersionMenu(item)"
@mouseover.stop="iconSettingMove"
@mousedown.stop.prevent=""
></svg-button>
</template>

<template #default>
<div class="setting-menu" @mouseover.stop="handleSettingMouseOver" @mouseleave="handleBlockItemLeave">
<ul class="list">
<li
class="list-item"
@mouseover.stop="iconSettingMove"
@mousedown.stop.prevent="iconClick({ event: $event, item, index })"
>
<svg-button class="list-item-svg" name="text-source-setting"> </svg-button>
<span>设置</span>
</li>
<li class="list-item" @mousedown.stop.left="editBlock({ event: $event, item, index })">
<svg-button class="list-item-svg" name="to-edit"> </svg-button><span>编辑</span>
</li>
</ul>
</div>
</template>
</tiny-popover>
<div class="setting-menu" @mouseover.stop="handleSettingMouseOver" @mouseleave="handleBlockItemLeave">
<ul class="list">
<tiny-tooltip content="编辑" placement="top">
<li class="list-item" @mousedown.stop.left="editBlock({ event: $event, item, index })">
<svg-button class="list-item-svg" name="to-edit"> </svg-button>
</li>
</tiny-tooltip>
<tiny-tooltip content="设置" placement="top">
<li
class="list-item"
@mouseover.stop="iconSettingMove"
@mousedown.stop.prevent="iconClick({ event: $event, item, index })"
>
<svg-button class="list-item-svg" name="text-source-setting"> </svg-button>
</li>
</tiny-tooltip>
</ul>
</div>
</div>
<div
v-else-if="showSettingIcon"
:class="['block-setting', { 'is-current-visible-icon': state.hoverItemId === item.id }]"
title=" "
>
<tiny-popover
v-if="!item.isDefaultGroup"
placement="bottom-end"
width="151"
append-to-body
trigger="manual"
:modelValue="state.hoverItemId === item.id && state.currentShowMenuId === item.id"
:visible-arrow="false"
popper-class="popper-options block-setting-popover"
>
<template #reference>
<svg-button
name="ellipsis"
class="block-detail-icon"
@click="handleShowVersionMenu(item)"
@mouseover.stop="iconSettingMove"
@mousedown.stop.prevent=""
></svg-button>
</template>
<template #default>
<div class="setting-menu" @mouseover.stop="handleSettingMouseOver" @mouseleave="handleBlockItemLeave">
<ul class="list">
<li class="list-item" @click="$emit('openVersionPanel', { item, index })">
<span>版本列表</span>
</li>
<li class="list-item" @click="$emit('deleteBlock', item)">
<span>移除</span>
</li>
</ul>
</div>
</template>
</tiny-popover>
<div class="setting-menu" @mouseover.stop="handleSettingMouseOver" @mouseleave="handleBlockItemLeave">
<ul class="list">
<tiny-tooltip content="版本列表" placement="top">
<li class="list-item" @click.stop="$emit('openVersionPanel', { item, index })">
<svg-button class="list-item-svg" name="versions"> </svg-button>
</li>
</tiny-tooltip>
<tiny-tooltip content="移除" placement="top">
<li class="list-item" @click.stop="$emit('deleteBlock', item)">
<svg-button class="list-item-svg" name="remove"> </svg-button>
</li>
</tiny-tooltip>
</ul>
</div>
</div>
<div
v-if="item.isAnimation"
Expand All @@ -133,9 +100,6 @@
</div>
</slot>
</li>
<li v-if="showAddButton" class="block-item block-plus" @click="$emit('add')">
<span class="block-plus-icon"><icon-plus></icon-plus></span>
</li>
<div v-if="showBlockShot && state.hover && state.currentBlock.screenshot" class="block-shortcut">
<div class="block-shortcut-title">{{ state.currentBlock.label }}预览图</div>
<div v-if="state.currentBlock.description" class="block-shortcut-description">
Expand All @@ -156,7 +120,7 @@
<script>
import { computed, watch, inject, reactive } from 'vue'
import { iconPlus } from '@opentiny/vue-icon'
import { Progress, Popover } from '@opentiny/vue'
import { Progress, Tooltip } from '@opentiny/vue'
import SearchEmpty from './SearchEmpty.vue'
import SvgButton from './SvgButton.vue'
Expand All @@ -167,7 +131,7 @@ export default {
components: {
TinyProgress: Progress,
IconPlus: iconPlus(),
TinyPopover: Popover,
TinyTooltip: Tooltip,
SvgButton,
SearchEmpty
},
Expand Down Expand Up @@ -263,20 +227,22 @@ export default {
}
}
const blockClick = ({ item }) => {
emit('click', item)
}
const editBlock = ({ event, item, index }) => {
if (props.isBlockManage) {
state.activeIndex = index
}
state.activeIndex = index
emit('editBlock', item)
// 点击区块并不打开设置面板
emit('iconClick', { event, item, index, isOpen: false })
}
const blockClick = ({ event, item, index }) => {
if (props.isBlockManage) {
editBlock({ event, item, index })
}
emit('click', item)
}
const iconClick = ({ event, item, index }) => {
state.activeIndex = index
Expand Down Expand Up @@ -408,13 +374,12 @@ export default {
.block-list {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: repeat(auto-fill, 96px);
position: relative;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
color: var(--ti-lowcode-common-secondary-text-color);
margin: 12px 0 0 12px;
margin: 12px;
&.is-small-list {
grid-template-columns: 100%;
Expand All @@ -425,15 +390,15 @@ export default {
flex-direction: column;
align-items: center;
position: relative;
height: 105px;
height: 110px;
text-align: center;
user-select: none;
margin-right: 12px;
margin-right: 6px;
margin-bottom: 12px;
.block-item-img {
line-height: 82px;
width: 106px;
height: 82px;
line-height: 86px;
width: 100%;
height: 86px;
border-radius: 4px;
background-color: var(--ti-lowcode-component-block-list-item-active-bg);
}
Expand Down Expand Up @@ -534,9 +499,18 @@ export default {
}
&.block-plus {
display: flex;
justify-content: center;
align-items: center;
.block-plus-icon {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 86px;
border: 1px dashed var(--te-common-border-hover);
border-radius: 4px;
}
.item-text {
font-size: 12px;
}
.tiny-svg {
font-size: 24px;
color: var(--ti-lowcode-component-svg-button-color);
Expand All @@ -555,8 +529,9 @@ export default {
object-fit: cover;
}
.item-default-img {
width: 50px;
width: 84px;
height: 50px;
color: var(--te-common-bg-default);
}
.item-text {
Expand All @@ -580,8 +555,8 @@ export default {
.block-setting {
visibility: hidden;
position: absolute;
top: 4px;
right: 8px;
top: 1px;
right: 6px;
z-index: 9;
&.is-current-visible-icon {
visibility: visible;
Expand All @@ -600,7 +575,10 @@ export default {
top: 0;
}
}
.block-item:nth-child(even) {
margin-right: 0;
margin-left: 6px;
}
.deploy {
position: absolute;
top: 10px;
Expand Down Expand Up @@ -734,25 +712,21 @@ export default {
font-size: 12px;
color: var(--ti-lowcode-component-block-setting-item-text-color);
.list {
margin-top: 6px;
display: flex;
}
.list-item {
box-sizing: border-box;
padding: 16px 18px;
height: 30px;
line-height: 30px;
cursor: pointer;
span {
margin-left: 8px;
}
display: flex;
align-items: center;
&:hover {
background-color: var(--ti-lowcode-component-block-setting-item-hover-bg);
color: var(--ti-lowcode-common-primary-text-color);
}
.list-item-icon {
font-size: 14px;
color: var(--te-common-icon-secondary);
}
.list-item-svg {
color: var(--te-common-icon-secondary);
}
.list-item-svg:hover {
background-color: var(--ti-lowcode-component-block-setting-item-hover-bg);
Expand Down
3 changes: 1 addition & 2 deletions packages/common/component/PluginSetting.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,6 @@ export default {
color: var(--ti-lowcode-plugin-panel-title-color);
padding: 0 12px;
border-bottom: 1px solid var(--ti-lowcode-plugin-panel-header-border-bottom-color);
margin-bottom: -6px;
.plugin-setting-header-title {
font-size: 12px;
font-weight: 700;
Expand All @@ -187,7 +186,7 @@ export default {
height: calc(100% - 46px);
overflow-y: auto;
overflow-x: hidden;
padding: 16px 20px;
padding: 12px;
}
.button-group-wrap {
Expand Down
Loading

0 comments on commit 6a736b6

Please sign in to comment.