opentiny
/
tiny-engine
0
0
Fork 9
Code Issues Pull Requests 3 Packages Projects Releases Wiki Activity

feat: variable convergence(materials, page, schema, script, state, tree, tutorial) (#1087)

This commit is contained in:
xuanlid 2025-02-13 01:31:11 -08:00 committed by GitHub
parent fdfc1bb0b6
commit 60d0b2cdf8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
46 changed files with 281 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/plugins/materials/index.js
View File

@ -18,6 +18,7 @@ import MaterialBlock from './src/meta/block'
import MaterialComponent from './src/meta/component'
import MaterialHeader from './src/components/header/Main.vue'
import { basePropertyOptions } from './src/js/options'
import './src/styles/vars.less'
export default {
...metaData,

2
packages/plugins/materials/src/Main.vue
View File

@ -1,5 +1,5 @@
<template>
<component :is="layout.entry" :registryData="registryData"></component>
<component :is="layout.entry" :registryData="registryData" class="plugin-materials"></component>
</template>
<script>

22
packages/plugins/materials/src/meta/block/src/BlockDetail.vue
View File

@ -114,24 +114,22 @@ export default {
<style lang="less" scoped>
.block-detail-panel {
width: 228px;
background-color: var(--te-common-bg-container);
background-color: var(--te-materials-block-detail-bg-color);
border-radius: 3px;
.block-detail-title {
font-size: 14px;
color: var(--ti-lowcode-toolbar-icon-color);
color: var(--te-materials-block-detail-text-color);
padding: 10px 8px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--te-common-border-default);
border-bottom: 1px solid var(--te-materials-block-detail-border-color);
.block-detail-icon {
width: 20px;
height: 20px;
color: var(--ti-lowcode-toolbar-title-color);
background: var(--te-common-bg-container);
border: 1px solid var(--te-common-border-default);
color: var(--te-materials-block-detail-icon-color);
font-size: 12px;
cursor: pointer;
display: inline-flex;
@ -143,15 +141,15 @@ export default {
right: 10px;
&:hover {
color: var(--ti-lowcode-toolbar-icon-color);
background: var(--ti-lowcode-icon-hover-bg);
color: var(--te-materials-block-detail-icon-color-hover);
background: var(--te-materials-block-detail-icon-bg-color-hover);
}
}
}
.block-detail-content {
&:not(:last-child) {
border-bottom: 1px solid var(--te-common-border-default);
border-bottom: 1px solid var(--te-materials-block-detail-border-color);
}
.block-detail-history {
@ -160,20 +158,20 @@ export default {
.block-detail-item {
padding: 8px 12px;
color: var(--te-common-text-primary);
color: var(--te-materials-block-detail-text-color);
font-size: 12px;
span {
margin-right: 4px;
}
.block-item-history {
color: var(--ti-lowcode-toolbar-title-color);
color: var(--te-materials-block-detail-text-color);
margin-top: 4px;
}
}
.block-detail-show-more {
color: var(--ti-lowcode-node-current-bg);
color: var(--te-materials-block-detail-text-color-emphasize);
cursor: pointer;
}

20
packages/plugins/materials/src/meta/block/src/BlockGroup.vue
View File

@ -408,7 +408,7 @@ export default {
}
&.block-editing-option {
padding: 0;
border-bottom: 1px solid var(--ti-lowcode-materials-block-group-item-border-color);
border-bottom: 1px solid var(--te-materials-block-group-item-border-color);
:deep(.tiny-input__inner) {
border-color: transparent;
width: 180px;
@ -419,14 +419,14 @@ export default {
margin-left: 0;
}
:deep(svg) {
color: var(--ti-lowcode-component-svg-button-color);
color: var(--te-materials-block-group-icon-color);
}
:deep(.tiny-button) {
padding: 0 2px;
}
}
&.show-underline {
border-bottom: 1px solid var(--ti-lowcode-materials-block-group-item-border-color);
border-bottom: 1px solid var(--te-materials-block-group-item-border-color);
}
.block-option-content {
display: flex;
@ -462,27 +462,17 @@ export default {
width: 220px;
height: 108px;
box-sizing: border-box;
background-color: var(--ti-lowcode-materials-block-group-delete-popover-bg-color);
padding: 6px;
&[x-placement^='right'] {
.popper__arrow {
&,
&::after {
border-right-color: var(--te-common-bg-container);
}
}
}
.popper-confirm-header {
font-size: var(--te-base-font-size-1);
color: var(--te-common-text-primary);
color: var(--te-materials-block-group-popper-title-text-color);
font-weight: var(--te-base-font-weight-7);
margin-bottom: 12px;
}
.popper-confirm-content {
font-size: 12px;
color: var(--te-common-text-secondary);
color: var(--te-materials-block-group-popper-content-text-color);
}
.popper-confirm-footer {
text-align: right;

6
packages/plugins/materials/src/meta/block/src/BlockGroupArrange.vue
View File

@ -74,7 +74,7 @@ export default {
.icon-wrap {
width: 20px;
height: 20px;
color: var(--ti-lowcode-text-color);
color: var(--te-materials-block-group-arrange-icon-color);
font-size: 16px;
border-radius: 2px;
cursor: pointer;
@ -83,10 +83,10 @@ export default {
align-items: center;
transition: 0.3s;
&:hover {
color: var(--te-common-text-checked);
color: var(--te-materials-block-group-arrange-icon-color-hover);
}
&.active {
color: var(--te-common-text-checked);
color: var(--te-materials-block-group-arrange-icon-color-active);
}
}
.icon-wrap + .icon-wrap {

8
packages/plugins/materials/src/meta/block/src/BlockGroupFilters.vue
View File

@ -98,7 +98,7 @@ export default {
<style lang="less" scoped>
.block-add-filters {
color: var(--ti-lowcode-materials-block-filter-text-color);
color: var(--te-materials-block-filter-text-color);
& > div {
min-height: 24px;
}
@ -117,13 +117,13 @@ export default {
align-items: center;
justify-content: flex-start;
width: 76px;
color: var(--te-common-text-secondary);
color: var(--te-materials-block-filter-text-color);
border-radius: 2px;
}
.block-filters-item-value {
flex: 1;
color: var(--te-common-text-primary);
color: var(--te-materials-block-filter-value-text-color);
.block-filters-value-item {
cursor: pointer;
display: inline-block;
@ -139,7 +139,7 @@ export default {
:deep(.tiny-select.tiny-select .tiny-select__tags) {
max-width: calc(100% - 24px) !important;
.tiny-tag {
background-color: var(--te-common-bg-disabled);
background-color: var(--te-materials-block-filter-tag-bg-color);
}
}
}

4
packages/plugins/materials/src/meta/block/src/BlockGroupSort.vue
View File

@ -78,11 +78,11 @@ export default {
<style lang="less" scoped>
.sort-text {
color: var(--te-common-text-secondary);
color: var(--te-materials-block-sort-text-color);
margin-right: 6px;
}
.sort-caret {
color: var(--te-common-text-secondary);
color: var(--te-materials-block-sort-text-color);
cursor: pointer;
}

2
packages/plugins/materials/src/meta/block/src/BlockGroupTransfer.vue
View File

@ -194,7 +194,7 @@ export default {
margin-left: 8px;
}
.footer-text {
color: var(--te-common-text-secondary);
color: var(--te-materials-block-transfer-footer-text-color);
}
}
}

8
packages/plugins/materials/src/meta/block/src/BlockGroupTransferPanel.vue
View File

@ -44,17 +44,17 @@ export default {
<style lang="less" scoped>
.block-add-transfer-panel {
height: 100%;
border: 1px solid var(--te-common-border-default);
border: 1px solid var(--te-materials-block-transfer-border-color);
border-radius: 6px;
overflow: hidden;
background-color: var(--ti-lowcode-materials-block-transfer-bg-color);
background-color: var(--te-materials-block-transfer-bg-color);
.panel-header {
color: var(--ti-lowcode-materials-block-transfer-header-text-color);
color: var(--te-materials-block-transfer-header-text-color);
padding: 10px;
display: flex;
justify-content: space-between;
background-color: var(--ti-lowcode-materials-block-transfer-header-bg-color);
background-color: var(--te-materials-block-transfer-header-bg-color);
}
.panel-body {

2
packages/plugins/materials/src/meta/block/src/BlockPanel.vue
View File

@ -173,7 +173,7 @@ export default {
flex-direction: column;
.tiny-search {
padding: 0 12px 12px 12px;
border-bottom: 1px solid var(--ti-lowcode-plugin-panel-header-border-bottom-color);
border-bottom: 1px solid var(--te-materials-block-panel-border-color);
:deep(.tiny-input__inner) {
height: 30px;
}

20
packages/plugins/materials/src/meta/block/src/BlockVersionSelect.vue
View File

@ -140,23 +140,3 @@ export default {
}
}
</script>
<style lang="less" scoped>
.version-list-panel {
:deep(.plugin-setting-header) {
color: var(--ti-lowcode-component-block-version-list-panel-title-color);
}
}
.close-icon {
margin-left: 16px;
}
.tiny-button.tiny-button {
&.fallback-btn {
min-width: unset;
padding: 0;
}
&.tiny-button--text.is-disabled {
color: var(--ti-button-text-color-disabled);
}
}
</style>

8
packages/plugins/materials/src/meta/component/src/Main.vue
View File

@ -143,7 +143,7 @@ export default {
.component-group {
display: grid;
width: 100%;
color: var(--ti-lowcode-materials-component-list-color);
color: var(--te-materials-component-list-text-color);
.component-item {
padding: var(--te-common-vertical-form-label-spacing) 0 var(--te-common-vertical-form-label-spacing);
@ -151,10 +151,10 @@ export default {
text-align: center;
user-select: none;
cursor: move;
background: var(--te-common-bg-default);
background: var(--te-materials-component-list-item-bg-color);
&:hover {
background: var(--te-common-bg-container);
background: var(--te-materials-component-list-item-bg-color-hover);
border-radius: 4px;
}
@ -164,7 +164,7 @@ export default {
svg {
font-size: 40px;
vertical-align: middle;
color: var(--te-common-icon-secondary);
color: var(--te-materials-component-list-item-icon-color);
overflow: hidden;
}
}

44
packages/plugins/materials/src/styles/vars.less Normal file
View File

@ -0,0 +1,44 @@
.plugin-materials {
// 组件列表 组件名称颜色
--te-materials-component-list-text-color: var(--te-common-text-primary);
--te-materials-component-list-item-bg-color: var(--te-common-bg-default);
--te-materials-component-list-item-bg-color-hover: var(--te-common-bg-container);
--te-materials-component-list-item-icon-color: var(--te-common-icon-secondary);
// 区块详情
--te-materials-block-detail-bg-color: var(--te-common-bg-default);
--te-materials-block-detail-text-color: var(--te-common-text-primary);
--te-materials-block-detail-border-color: var(--te-common-border-divider);
--te-materials-block-detail-icon-color: var(--te-common-icon-primary);
--te-materials-block-detail-icon-color-hover: var(--te-common-icon-primary);
--te-materials-block-detail-icon-bg-color-hover: var(--te-common-bg-prompt);
--te-materials-block-detail-text-color-emphasize: var(--te-common-text-emphasize);
// 区块分组
--te-materials-block-group-item-border-color: var(--te-common-border-active);
--te-materials-block-group-popper-title-text-color: var(--te-common-text-primary);
--te-materials-block-group-popper-content-text-color: var(--te-common-text-secondary);
--te-materials-block-group-icon-color: var(--te-common-icon-primary);
--te-materials-block-group-arrange-icon-color: var(--te-common-icon-secondary);
--te-materials-block-group-arrange-icon-color-hover: var(--te-common-text-checked);
--te-materials-block-group-arrange-icon-color-active: var(--te-common-text-checked);
// 添加区块筛选模块字体颜色
--te-materials-block-filter-text-color: var(--te-common-text-secondary);
--te-materials-block-filter-value-text-color: var(--te-common-text-primary);
--te-materials-block-filter-tag-bg-color: var(--te-common-bg-disabled);
--te-materials-block-sort-text-color: var(--te-common-text-secondary);
// 添加区块穿梭框面板背景颜色
--te-materials-block-transfer-bg-color: var(--te-common-bg-default);
--te-materials-block-transfer-border-color: var(--te-common-border-default);
// 添加区块穿梭框面板头部字体颜色
--te-materials-block-transfer-header-text-color: var(--te-common-text-primary);
// 添加区块穿梭框面板头部背景颜色
--te-materials-block-transfer-header-bg-color: var(--te-common-bg-container);
--te-materials-block-transfer-footer-text-color: var(--te-common-text-secondary);
--te-materials-block-panel-border-color: var(--te-common-border-divider);
}

1
packages/plugins/page/index.js
View File

@ -14,6 +14,7 @@ import entry, { api } from './src/Main.vue'
import metaData from './meta.js'
import { PageService } from './src/composable'
import PageGeneral from './src/PageGeneral.vue'
import './src/styles/vars.less'
export default {
...metaData,

2
packages/plugins/page/src/Main.vue
View File

@ -1,5 +1,5 @@
<template>
<plugin-panel :title="title" @close="pluginPanelClosed" :docsUrl="docsUrl" :isShowDocsIcon="true">
<plugin-panel :title="title" @close="pluginPanelClosed" :docsUrl="docsUrl" :isShowDocsIcon="true" class="page-manage">
<template #header>
<svg-button
class="add-folder-icon"

20
packages/plugins/page/src/PageGeneral.vue
View File

@ -258,27 +258,27 @@ export default {
.general-config {
.general-config-form {
.input-head {
color: var(--ti-lowcode-page-manage-input-head-text-color);
color: var(--te-page-manage-input-head-text-color);
}
:deep(.tiny-form-item) {
margin-bottom: 16px;
.tiny-input-group__prepend {
border: 1px solid var(--te-common-border-default);
background: var(--te-common-bg-default);
border: 1px solid var(--te-page-manage-input-border-color);
background: var(--te-page-manage-input-bg-color);
}
.page-type-radio {
color: var(--ti-lowcode-page-manage-title-background-text-color);
color: var(--te-page-manage-title-text-color);
}
.tiny-form-item__label {
height: 24px;
line-height: 18px;
font-size: 12px;
color: var(--ti-lowcode-page-manage-text-color);
color: var(--te-page-manage-text-color);
}
}
}
.tip {
color: var(--ti-lowcode-page-manage-tip-text-color);
color: var(--te-page-manage-tip-color);
font-size: 12px;
border-radius: 3px;
display: flex;
@ -286,10 +286,10 @@ export default {
height: 16px;
margin-top: 4px;
.text {
color: var(--te-common-text-weaken);
color: var(--te-page-manage-tip-text-color);
}
.text-dim {
color: var(--ti-lowcode-plugin-panel-title-color);
color: var(--te-page-manage-tip-dim-text-color);
}
}
}
@ -301,9 +301,9 @@ export default {
.tiny-tree-node {
.tiny-tree-node__content {
padding: 0;
background-color: var(--te-common-bg-default);
background-color: var(--te-page-manage-tree-node-bg-color);
&:hover {
background-color: var(--te-common-bg-container);
background-color: var(--te-page-manage-tree-node-bg-color-hover);
}
// 移除子节点的的背景色，才能保证鼠标hover到.tiny-tree-node__content节点任意位置时，整行都有hover状态的背景色
.tiny-tree-node__content-left,

6
packages/plugins/page/src/PageHome.vue
View File

@ -98,7 +98,7 @@ export default {
<style lang="less" scoped>
.home {
color: var(--ti-lowcode-page-manage-text-color);
color: var(--te-page-manage-text-color);
line-height: 24px;
.homeTitle {
margin: 10px 0 0 5px;
@ -106,13 +106,13 @@ export default {
}
.tip {
color: var(--te-common-text-weaken);
color: var(--te-page-manage-tip-text-color);
margin-top: 4px;
margin-bottom: 12px;
font-size: 11px;
line-height: 16px;
span {
color: var(--te-common-text-weaken);
color: var(--te-page-manage-tip-text-color);
}
.home-page {
display: inline-block;

8
packages/plugins/page/src/PageInputOutput.vue
View File

@ -101,9 +101,9 @@ export default {
<style lang="less" scoped>
.input-or-output {
color: var(--te-common-text-secondary);
color: var(--te-page-manage-input-or-output-text-color);
.life-cycle-alert {
color: var(--ti-lowcode-life-cycle-alert-color);
color: var(--te-page-manage-life-cycle-alert-text-color);
height: 28px;
padding: 6px;
border: 0;
@ -116,7 +116,7 @@ export default {
.input-output-tips,
.input-output-div {
color: var(--ti-lowcode-life-cycle-alert-color);
color: var(--te-page-manage-life-cycle-alert-text-color);
margin-top: 4px;
height: 16px;
line-height: 16px;
@ -128,7 +128,7 @@ export default {
margin-top: 12px;
}
.edit-btn-icon {
color: var(--te-common-text-secondary);
color: var(--te-page-manage-icon-color);
margin-right: 6px;
}
:deep(.edit-btn) {

8
packages/plugins/page/src/PageTree.vue
View File

@ -431,7 +431,7 @@ export default {
display: flex;
align-items: center;
svg {
color: var(--te-common-icon-secondary);
color: var(--te-page-manage-icon-color);
outline: none;
}
.auto-hidden {
@ -462,7 +462,7 @@ export default {
display: flex;
align-items: center;
&:hover {
background-color: var(--te-common-bg-container);
background-color: var(--te-page-manage-operation-list-item-bg-color-hover);
}
}
.divider {
@ -474,11 +474,11 @@ export default {
display: block;
width: 100%;
height: 1px;
background-color: var(--te-common-border-divider);
background-color: var(--te-page-manage-operation-list-item-border-color-divider);
}
}
.danger {
color: var(--te-common-color-error);
color: var(--te-page-manage-operation-list-text-color-error);
}
}
}

12
packages/plugins/page/src/Tree.vue
View File

@ -261,7 +261,7 @@ const handleContainerDragLeave = (event) => {
cursor: pointer;
}
&:hover {
background-color: var(--te-common-bg-container);
background-color: var(--te-page-manage-draggable-row-bg-color-hover);
}
.content {
@ -283,14 +283,14 @@ const handleContainerDragLeave = (event) => {
align-items: center;
margin-right: 8px;
svg {
color: var(--te-common-icon-secondary);
color: var(--te-page-manage-draggable-icon-color);
}
}
&.active {
background-color: var(--te-common-bg-container);
color: var(--te-common-text-primary);
background-color: var(--te-page-manage-draggable-row-bg-color-hover);
color: var(--te-page-manage-draggable-text-color);
svg {
color: var(--te-common-icon-secondary);
color: var(--te-page-manage-draggable-icon-color);
}
}
}
@ -299,7 +299,7 @@ const handleContainerDragLeave = (event) => {
border: 1px solid transparent;
}
.hover-border-color {
border-color: var(--te-common-border-checked);
border-color: var(--te-page-manage-draggable-border-color);
overflow: hidden;
}
</style>

23
packages/plugins/page/src/styles/vars.less Normal file
View File

@ -0,0 +1,23 @@
.page-manage {
--te-page-manage-title-text-color: var(--te-common-text-primary);
--te-page-manage-input-bg-color: var(--te-common-bg-default);
--te-page-manage-input-border-color: var(--te-common-border-default);
--te-page-manage-tip-color: var(--te-common-text-primary);
--te-page-manage-tip-text-color: var(--te-common-text-weaken);
--te-page-manage-tip-dim-text-color: var(--te-common-text-primary);
--te-page-manage-tree-text-bg-color: var(--te-common-bg-default);
--te-page-manage-tree-node-bg-color: var(--te-common-bg-default);
--te-page-manage-tree-node-bg-color-hover: var(--te-common-bg-container);
--te-page-manage-text-color: var(--te-common-text-secondary);
--te-page-manage-input-head-text-color: var(--te-common-text-primary);
--te-page-manage-input-or-output-text-color: var(--te-common-text-secondary);
--te-page-manage-life-cycle-alert-text-color: var(--te-common-text-weaken);
--te-page-manage-icon-color: var(--te-common-icon-secondary);
--te-page-manage-operation-list-item-bg-color-hover: var(--te-common-bg-container);
--te-page-manage-operation-list-item-border-color-divider: var(--te-common-border-divider);
--te-page-manage-operation-list-text-color-error: var(--te-common-color-error);
--te-page-manage-draggable-row-bg-color-hover: var(--te-common-bg-container);
--te-page-manage-draggable-text-color: var(--te-common-text-primary);
--te-page-manage-draggable-icon-color: var(--te-common-icon-secondary);
--te-page-manage-draggable-border-color: var(--te-common-border-checked);
}

1
packages/plugins/schema/index.js
View File

@ -12,6 +12,7 @@
import entry from './src/Main.vue'
import metaData from './meta.js'
import './src/styles/vars.less'
export default {
...metaData,

18
packages/plugins/schema/src/Main.vue
View File

@ -174,20 +174,20 @@ export default {
position: fixed;
top: var(--base-top-panel-height);
left: 41px;
background: var(--te-common-bg-default);
box-shadow: 6px 0px 3px 0px var(--te-base-box-shadow-rgba-3);
background: var(--te-schema-panel-bg-color);
box-shadow: 6px 0px 3px 0px var(--te-schema-panel-shadow-color);
z-index: 1000;
.source-code-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--te-common-border-divider);
border-bottom: 1px solid var(--te-schema-common-border-color);
margin-bottom: 12px;
padding: 0 12px 12px;
}
.title {
color: var(--ti-lowcode-plugin-panel-title-color);
font-weight: var(--ti-lowcode-plugin-panel-title-font-weight);
color: var(--te-schema-panel-title-text-color);
font-weight: var(--te-base-font-weight-bold);
}
.header-title {
display: flex;
@ -205,7 +205,7 @@ export default {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--te-common-color-error);
background-color: var(--te-schema-dot-color);
display: block;
z-index: 100;
position: absolute;
@ -219,7 +219,7 @@ export default {
}
.source-code-content {
height: calc(100% - 42px);
border: 1px solid var(--te-common-border-divider);
border: 1px solid var(--te-schema-common-border-color);
border-radius: 4px;
margin: 0 12px;
}
@ -234,8 +234,8 @@ export default {
padding: 12px;
border: none;
border-radius: 4px;
color: var(--ti-lowcode-toolbar-icon-color);
background: var(--ti-lowcode-icon-bind-color);
color: var(--te-schema-btn-color);
background: var(--te-schema-btn-bg-color);
cursor: pointer;
}
}

11
packages/plugins/schema/src/styles/vars.less Normal file
View File

@ -0,0 +1,11 @@
#source-code {
--te-schema-panel-shadow-color: var(--te-common-shadow-panel);
--te-schema-panel-bg-color: var(--te-common-bg-default);
--te-schema-common-border-color: var(--te-common-border-divider);
// 面板标题色
--te-schema-panel-title-text-color: var(--te-common-text-primary);
--te-schema-dot-color: var(--te-common-color-error);
--te-schema-btn-text-color: var(--te-common-text-inverse);
--te-schema-btn-bg-color: var(--te-common-bg-primary);
}

1
packages/plugins/script/index.js
View File

@ -12,6 +12,7 @@
import entry, { api } from './src/Main.vue'
import metaData from './meta.js'
import './src/styles/vars.less'
export default {
...metaData,

14
packages/plugins/script/src/Main.vue
View File

@ -109,8 +109,8 @@ export default {
.plugin-page-js-container {
width: 50vw;
height: 100%;
background: var(--ti-lowcode-plugin-js-bg);
box-shadow: 6px 0px 3px 0px var(--te-base-box-shadow-rgba-3);
background: var(--te-plugin-js-panel-bg-color);
box-shadow: 6px 0px 3px 0px var(--te-plugin-js-panel-shadow-color);
position: absolute;
left: 0;
top: 0;
@ -121,7 +121,7 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--te-common-border-divider);
border-bottom: 1px solid var(--te-plugin-js-common-border-color);
padding: 12px 0;
.head-left {
@ -129,8 +129,8 @@ export default {
display: flex;
align-items: center;
.title {
color: var(--ti-lowcode-plugin-panel-title-color);
font-weight: var(--ti-lowcode-plugin-panel-title-font-weight);
color: var(--te-plugin-js-panel-title-text-color);
font-weight: var(--te-base-font-weight-bold);
}
}
@ -147,7 +147,7 @@ export default {
.dots {
width: 6px;
height: 6px;
background: var(--te-common-color-error);
background: var(--te-plugin-js-dot-color);
border-radius: 50%;
position: absolute;
top: 9px;
@ -162,7 +162,7 @@ export default {
height: calc(100% - 54px);
& > div {
border: 1px solid var(--te-common-border-divider);
border: 1px solid var(--te-plugin-js-common-border-color);
border-radius: 4px;
height: 100%;
}

9
packages/plugins/script/src/styles/vars.less Normal file
View File

@ -0,0 +1,9 @@
.plugin-page-js-container {
--te-plugin-js-panel-shadow-color: var(--te-common-shadow-panel);
--te-plugin-js-panel-bg-color: var(--te-common-bg-default);
--te-plugin-js-common-border-color: var(--te-common-border-divider);
// 面板标题色
--te-plugin-js-panel-title-text-color: var(--te-common-text-primary);
--te-plugin-js-dot-color: var(--te-common-color-error);
}

1
packages/plugins/state/index.js
View File

@ -12,6 +12,7 @@
import entry from './src/Main.vue'
import metaData from './meta.js'
import './src/styles/vars.less'
export default {
...metaData,

24
packages/plugins/state/src/CreateRemoteAPI.vue
View File

@ -190,7 +190,7 @@ export default {
padding: 12px;
.error-tip {
color: var(--te-common-color-error);
color: var(--te-state-common-error-color);
margin-top: 4px;
font-size: 12px;
}
@ -239,25 +239,25 @@ export default {
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: var(--ti-lowcode-toolbar-bg);
border-top: 1px solid var(--te-common-border-default);
border-bottom: 1px solid var(--te-common-border-default);
color: var(--te-common-text-secondary);
background: var(--te-state-tip-bg-color);
border-top: 1px solid var(--te-state-common-border-color);
border-bottom: 1px solid var(--te-state-common-border-color);
color: var(--te-state-common-label-text-color);
}
.use-service {
color: var(--te-common-text-secondary);
color: var(--te-state-common-label-text-color);
font-size: 12px;
margin-top: 10px;
span {
color: var(--te-common-color-error);
color: var(--te-state-common-error-color);
}
}
.send-service {
text-align: right;
border-top: 1px solid var(--te-common-border-default);
border-top: 1px solid var(--te-state-common-border-color);
padding: 20px 10px;
margin-bottom: 10px;
@ -290,14 +290,14 @@ export default {
.icon-plus {
cursor: pointer;
color: var(--ti-lowcode-toolbar-icon-color);
color: var(--te-state-remote-icon-color);
outline: none;
}
.icon {
width: 20px;
height: 20px;
color: var(--te-common-text-secondary);
color: var(--te-state-common-label-text-color);
font-size: 16px;
border-radius: 2px;
margin-right: 8px;
@ -308,8 +308,8 @@ export default {
transition: 0.3s;
&:hover {
color: var(--ti-lowcode-toolbar-icon-color);
background: var(--ti-lowcode-icon-hover-bg);
color: var(--te-state-common-icon-color-hover);
background: var(--te-state-common-bg-color-hover);
}
}
}

6
packages/plugins/state/src/CreateRemoteFunction.vue
View File

@ -58,13 +58,13 @@ export default {
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: var(--ti-lowcode-toolbar-bg);
color: var(--ti-lowcode-toolbar-icon-color);
background: var(--te-state-common-bg-color-hover);
color: var(--te-state-remote-icon-color);
margin-top: 12px;
.icon-del {
cursor: pointer;
color: var(--ti-lowcode-toolbar-icon-color);
color: var(--te-state-remote-icon-color);
}
}

6
packages/plugins/state/src/CreateStore.vue
View File

@ -290,11 +290,11 @@ export default {
}
:deep(.tiny-form-item__label) {
color: var(--ti-lowcode-toolbar-icon-color);
color: var(--te-state-common-label-text-color);
}
.label-left-wrap {
color: var(--ti-lowcode-toolbar-icon-color);
color: var(--te-state-common-label-text-color);
display: flex;
}
:deep(.tiny-collapse-item__wrap) {
@ -310,7 +310,7 @@ export default {
.create-content-description {
font-size: 12px;
color: var(--te-common-text-emphasize);
color: var(--te-state-common-text-color-emphasize);
margin-left: 8px;
cursor: pointer;
}

52
packages/plugins/state/src/CreateVariable.vue
View File

@ -439,8 +439,8 @@ export default {
margin-top: 8px;
border-radius: 4px;
padding: 8px 14px;
background: var(--te-common-bg-container);
color: var(--te-common-text-weaken);
background: var(--te-state-tip-bg-color);
color: var(--te-state-tip-text-color);
& > pre {
font-family: Consolas, 'Courier New', monospace;
}
@ -461,11 +461,11 @@ export default {
}
:deep(.tiny-form-item__label) {
color: var(--ti-lowcode-toolbar-icon-color);
color: var(--te-state-common-label-text-color);
}
.label-left-wrap {
color: var(--ti-lowcode-toolbar-icon-color);
color: var(--te-state-common-label-text-color);
display: flex;
}
:deep(.tiny-collapse-item__wrap) {
@ -479,42 +479,9 @@ export default {
}
}
.tips-content {
padding: 12px;
.create-content-head {
display: flex;
flex: 1;
font-size: 12px;
.icon-info-circle {
font-size: 14px;
margin-right: 4px;
color: var(--ti-lowcode-toolbar-icon-color);
}
}
.create-content-tip {
font-size: 14px;
}
.create-content-demo {
font-size: 14px;
.ml20 {
margin-left: 20px;
}
li {
margin-top: 8px;
}
}
.create-content-foot {
margin-top: 4px;
font-size: 14px;
line-height: 22px;
}
}
.create-content-description {
font-size: 12px;
color: var(--te-common-text-emphasize);
color: var(--te-state-common-text-color-emphasize);
margin-left: 8px;
cursor: pointer;
}
@ -522,13 +489,4 @@ export default {
.variable-editor {
height: 270px;
}
.show-advanced {
font-size: 12px;
color: var(--ti-lowcode-data-advanced-text-color);
&:hover {
color: var(--ti-lowcode-data-advanced-text-hover-color);
cursor: pointer;
}
}
</style>

16
packages/plugins/state/src/DataSourceList.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="data-source-list">
<div class="data-source-list lowcode-scrollbar">
<ul>
<li v-for="key in filteredKey" :key="key" :class="['data-source-list-item', { selected: key === selectedKey }]">
<div class="item-head">
@ -117,12 +117,12 @@ export default {
<style lang="less" scoped>
.data-source-list {
padding-top: 12px;
border-top: 1px solid var(--te-common-border-divider);
border-top: 1px solid var(--te-state-common-border-color-divider);
overflow-y: scroll;
.data-source-list-item {
&.selected,
&:hover {
background: var(--te-common-bg-container);
background: var(--te-state-common-bg-color-hover);
.item-head-right {
display: flex;
justify-content: flex-end;
@ -134,7 +134,7 @@ export default {
.item-head {
height: 24px;
padding: 0 10px;
color: var(--ti-lowcode-data-list-color);
color: var(--te-state-data-list-text-color);
display: flex;
justify-content: space-between;
align-items: center;
@ -148,7 +148,7 @@ export default {
margin-right: 4px;
cursor: pointer;
transition: 0.3s;
color: var(--ti-lowcode-toolbar-icon-color);
color: var(--te-state-data-list-left-icon-color);
flex-shrink: 0;
&.is-expand {
@ -172,7 +172,7 @@ export default {
text-overflow: ellipsis;
}
.item-head-left-icon {
color: var(--te-common-icon-secondary);
color: var(--te-state-data-list-left-icon-color);
margin-right: 8px;
}
}
@ -191,11 +191,11 @@ export default {
p span {
&:first-child {
font-size: 14;
color: var(--te-common-text-secondary);
color: var(--te-state-common-label-text-color);
}
&:last-child {
color: var(--te-common-text-primary);
color: var(--te-state-common-text-color);
}
}
}

10
packages/plugins/state/src/DataSourceRightPanel.vue
View File

@ -113,8 +113,8 @@ export default {
.data-source-right-panel {
width: 442px;
height: 100%;
border-right: 1px solid var(--te-common-border-divider);
background: var(--ti-lowcode-toolbar-bg);
border-right: 1px solid var(--te-state-common-border-color-divider);
background: var(--te-state-right-panel-bg-color);
position: absolute;
left: calc(var(--base-left-panel-width) - 6px);
top: 0;
@ -125,9 +125,9 @@ export default {
align-items: center;
height: 45px;
padding: 0 12px;
color: var(--ti-lowcode-toolbar-icon-color);
background: var(--te-common-bg-container);
border-bottom: 1px solid var(--te-common-border-divider);
color: var(--te-state-right-panel-icon-color);
background: var(--te-state-right-panel-bg-color);
border-bottom: 1px solid var(--te-state-common-border-color-divider);
}
}
</style>

2
packages/plugins/state/src/EditorI18nTool.vue
View File

@ -150,7 +150,7 @@ export default {
}
.tiny-button.tiny-button.tiny-button.tiny-button--default {
margin-right: 4px;
border-color: var(--te-common-border-secondary);
border-color: var(--te-state-editor-btn-border-color);
}
}
.buttons {

25
packages/plugins/state/src/Main.vue
View File

@ -404,16 +404,15 @@ export default {
width: 100%;
.tiny-button {
width: 100%;
border-color: var(--te-common-border-default);
border-color: var(--te-state-add-btn-border-color);
&:hover {
border-color: var(--te-common-border-hover);
border-color: var(--te-state-add-btn-border-color-hover);
}
}
.add-btn-icon {
margin-right: 4px;
font-size: 16px;
stroke: var(--ti-lowcode-chat-model-button-text);
color: var(--te-common-icon-secondary);
color: var(--te-state-add-btn-icon-color);
vertical-align: sub;
}
.add-btn-text {
@ -425,9 +424,9 @@ export default {
padding: 10px;
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
color: var(--ti-lowcode-plugin-panel-title-color);
font-weight: var(--ti-lowcode-plugin-panel-title-font-weight);
border-bottom: 1px solid var(--ti-lowcode-data-header-border-bottom-color);
color: var(--te-state-common-text-color);
font-weight: var(--te-base-font-weight-bold);
border-bottom: 1px solid var(--te-state-common-border-color-divider);
display: flex;
justify-content: space-between;
align-items: center;
@ -456,9 +455,9 @@ export default {
.data-source-right-panel {
width: 492px;
height: 100%;
box-shadow: 6px 0px 3px 0px var(--te-base-box-shadow-rgba-3);
border-right: 1px solid var(--te-common-border-divider);
background: var(--te-common-bg-default);
box-shadow: 6px 0px 3px 0px var(--te-state-panel-shadow-color);
border-right: 1px solid var(--te-state-common-border-color-divider);
background: var(--te-state-common-bg-color);
position: absolute;
left: var(--base-left-panel-width);
top: 0;
@ -471,9 +470,9 @@ export default {
padding: 0 12px;
font-size: 12px;
font-weight: 700;
color: var(--te-common-text-primary);
background: var(--te-common-bg-default);
border-bottom: 1px solid var(--ti-lowcode-data-header-border-bottom-color);
color: var(--te-state-common-text-color);
background: var(--te-state-common-bg-color);
border-bottom: 1px solid var(--te-state-common-border-color-divider);
.options-wrap {
display: flex;
column-gap: 8px;

4
packages/plugins/state/src/StateFullscreenHead.vue
View File

@ -31,7 +31,7 @@ export default {
<style lang="less" scoped>
.fullscreen-head-content {
font-size: 12px;
color: var(--te-common-text-primary);
color: var(--te-state-common-text-color);
height: 30px;
line-height: 20px;
width: 100%;
@ -39,7 +39,7 @@ export default {
justify-content: space-between;
.title {
font-size: var(--te-base-font-size-base);
color: var(--te-common-text-primary);
color: var(--te-state-common-text-color);
font-weight: var(--te-base-font-weight-7);
}
}

4
packages/plugins/state/src/StateTips.vue
View File

@ -18,7 +18,7 @@
margin-top: 8px;
border-radius: 4px;
padding: 8px 14px;
background: var(--te-common-bg-container);
color: var(--te-common-text-weaken);
background: var(--te-state-tip-bg-color);
color: var(--te-state-tip-text-color);
}
</style>

32
packages/plugins/state/src/styles/vars.less Normal file
View File

@ -0,0 +1,32 @@
#data-source {
--te-state-add-btn-border-color: var(--te-common-border-default);
--te-state-add-btn-border-color-hover: var(--te-common-border-hover);
--te-state-add-btn-icon-color: var(--te-common-icon-secondary);
--te-state-common-text-color: var(--te-common-text-primary);
--te-state-common-border-color-divider: var(--te-common-border-divider);
--te-state-common-border-color: var(--te-common-border-default);
--te-state-common-bg-color: var(--te-common-bg-default);
--te-state-common-bg-color-hover: var(--te-common-bg-container);
--te-state-common-label-text-color: var(--te-common-text-secondary);
--te-state-common-text-color-emphasize: var(--te-common-text-emphasize);
--te-state-common-icon-color-hover: var(--te-common-icon-hover);
--te-state-common-error-color: var(--te-common-color-error);
--te-state-tip-bg-color: var(--te-common-bg-container);
--te-state-tip-text-color: var(--te-common-text-weaken);
--te-state-data-list-text-color: var(--te-common-text-secondary);
--te-state-data-list-left-icon-color: var(--te-common-icon-secondary);
--te-state-editor-btn-border-color: var(--te-common-border-secondary);
--te-state-panel-shadow-color: var(--te-common-shadow-panel);
--te-state-remote-icon-color: var(--te-common-icon-hover);
--te-state-remote-bg-color: var(--te-common-bg-container);
--te-state-right-panel-icon-color: var(--te-common-icon-hover);
--te-state-right-panel-bg-color: var(--te-common-bg-container);
}

1
packages/plugins/tree/index.js
View File

@ -12,6 +12,7 @@
import entry from './src/Main.vue'
import metaData from './meta.js'
import './src/styles/vars.less'
export default {
...metaData,

10
packages/plugins/tree/src/Main.vue
View File

@ -308,12 +308,12 @@ export default {
height: calc(100% - 38px);
overflow-y: scroll;
padding-top: 12px;
border-top: 1px solid var(--ti-lowcode-tree-border-color);
border-top: 1px solid var(--te-tree-border-color);
.tree-handle {
font-size: var(--te-base-font-size-2);
svg {
fill: var(--te-common-icon-secondary);
fill: var(--te-tree-icon-color);
}
}
}
@ -340,14 +340,14 @@ export default {
line-height: inherit;
}
:deep(.high-light-node) {
background: var(--te-common-bg-container) !important;
background: var(--te-tree-bg-color-active) !important;
:deep(.eyeOpen) {
display: block !important;
}
}
:deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__column) {
color: var(--te-common-text-primary);
color: var(--te-tree-text-color);
padding: 0 12px;
height: 24px !important;
line-height: 24px;
@ -355,7 +355,7 @@ export default {
font-size: 12px;
}
.node-isblock {
color: var(--te-common-color-prompt-secondary);
color: var(--te-tree-block-text-color);
}
}
}

7
packages/plugins/tree/src/styles/vars.less Normal file
View File

@ -0,0 +1,7 @@
.outlinebox {
--te-tree-border-color: var(--te-common-border-divider);
--te-tree-icon-color: var(--te-common-icon-secondary);
--te-tree-bg-color-active: var(--te-common-bg-container);
--te-tree-text-color: var(--te-common-text-primary);
--te-tree-block-text-color: var(--te-common-color-prompt-secondary);
}

1
packages/plugins/tutorial/index.js
View File

@ -12,6 +12,7 @@
import entry, { api } from './src/Main.vue'
import metaData from './meta.js'
import './src/styles/vars.less'
export default {
...metaData,

8
packages/plugins/tutorial/src/Main.vue
View File

@ -1,5 +1,5 @@
<template>
<plugin-panel title="TinyEngine 教程">
<plugin-panel title="TinyEngine 教程" class="tutorial">
<template #header>
<svg-button
class="item icon-sidebar"
@ -127,13 +127,13 @@ export default {
}
.video-item {
.video-item-content {
color: var(--ti-lowcode-tutorial-primary-text-color);
color: var(--te-tutorial-text-color);
.video-item-content-tutorial {
padding: 0 8px;
display: grid;
grid-template-columns: 20px 1fr 20px;
column-gap: 4px;
background: var(--ti-lowcode-tutorial-primary-bg-color);
background: var(--te-tutorial-bg-color);
height: 32px;
line-height: 32px;
align-items: center;
@ -144,7 +144,7 @@ export default {
&.active,
&:hover {
background: var(--ti-lowcode-tutorial-hover-bg-color);
background: var(--te-tutorial-bg-color-hover);
cursor: pointer;
svg.icon-chevron {

4
packages/plugins/tutorial/src/TutorialVideoPanel.vue
View File

@ -95,13 +95,13 @@ export default {
}
.content {
color: var(--te-common-text-secondary);
color: var(--te-tutorial-text-color);
line-height: 25px;
text-indent: 24px;
padding-top: 20px;
}
:deep(.md) {
color: var(--te-common-text-secondary);
color: var(--te-tutorial-text-color);
ul {
padding-left: 20px;
}

5
packages/plugins/tutorial/src/styles/vars.less Normal file
View File

@ -0,0 +1,5 @@
.tutorial {
--te-tutorial-text-color: var(--te-common-text-secondary);
--te-tutorial-bg-color: var(--te-common-bg-default);
--te-tutorial-bg-color-hover: var(--te-common-bg-container);
}