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 MaterialComponent from './src/meta/component'
import MaterialHeader from './src/components/header/Main.vue' import MaterialHeader from './src/components/header/Main.vue'
import { basePropertyOptions } from './src/js/options' import { basePropertyOptions } from './src/js/options'
import './src/styles/vars.less'
export default { export default {
...metaData, ...metaData,

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

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

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

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

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

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

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

@ -74,7 +74,7 @@ export default {
.icon-wrap { .icon-wrap {
width: 20px; width: 20px;
height: 20px; height: 20px;
color: var(--ti-lowcode-text-color); color: var(--te-materials-block-group-arrange-icon-color);
font-size: 16px; font-size: 16px;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
@ -83,10 +83,10 @@ export default {
align-items: center; align-items: center;
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
color: var(--te-common-text-checked); color: var(--te-materials-block-group-arrange-icon-color-hover);
} }
&.active { &.active {
color: var(--te-common-text-checked); color: var(--te-materials-block-group-arrange-icon-color-active);
} }
} }
.icon-wrap + .icon-wrap { .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> <style lang="less" scoped>
.block-add-filters { .block-add-filters {
color: var(--ti-lowcode-materials-block-filter-text-color); color: var(--te-materials-block-filter-text-color);
& > div { & > div {
min-height: 24px; min-height: 24px;
} }
@ -117,13 +117,13 @@ export default {
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
width: 76px; width: 76px;
color: var(--te-common-text-secondary); color: var(--te-materials-block-filter-text-color);
border-radius: 2px; border-radius: 2px;
} }
.block-filters-item-value { .block-filters-item-value {
flex: 1; flex: 1;
color: var(--te-common-text-primary); color: var(--te-materials-block-filter-value-text-color);
.block-filters-value-item { .block-filters-value-item {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@ -139,7 +139,7 @@ export default {
:deep(.tiny-select.tiny-select .tiny-select__tags) { :deep(.tiny-select.tiny-select .tiny-select__tags) {
max-width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important;
.tiny-tag { .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> <style lang="less" scoped>
.sort-text { .sort-text {
color: var(--te-common-text-secondary); color: var(--te-materials-block-sort-text-color);
margin-right: 6px; margin-right: 6px;
} }
.sort-caret { .sort-caret {
color: var(--te-common-text-secondary); color: var(--te-materials-block-sort-text-color);
cursor: pointer; cursor: pointer;
} }

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

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

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

@ -173,7 +173,7 @@ export default {
flex-direction: column; flex-direction: column;
.tiny-search { .tiny-search {
padding: 0 12px 12px 12px; 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) { :deep(.tiny-input__inner) {
height: 30px; height: 30px;
} }

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

@ -140,23 +140,3 @@ export default {
} }
} }
</script> </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 { .component-group {
display: grid; display: grid;
width: 100%; width: 100%;
color: var(--ti-lowcode-materials-component-list-color); color: var(--te-materials-component-list-text-color);
.component-item { .component-item {
padding: var(--te-common-vertical-form-label-spacing) 0 var(--te-common-vertical-form-label-spacing); 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; text-align: center;
user-select: none; user-select: none;
cursor: move; cursor: move;
background: var(--te-common-bg-default); background: var(--te-materials-component-list-item-bg-color);
&:hover { &:hover {
background: var(--te-common-bg-container); background: var(--te-materials-component-list-item-bg-color-hover);
border-radius: 4px; border-radius: 4px;
} }
@ -164,7 +164,7 @@ export default {
svg { svg {
font-size: 40px; font-size: 40px;
vertical-align: middle; vertical-align: middle;
color: var(--te-common-icon-secondary); color: var(--te-materials-component-list-item-icon-color);
overflow: hidden; 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 metaData from './meta.js'
import { PageService } from './src/composable' import { PageService } from './src/composable'
import PageGeneral from './src/PageGeneral.vue' import PageGeneral from './src/PageGeneral.vue'
import './src/styles/vars.less'
export default { export default {
...metaData, ...metaData,

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

@ -1,5 +1,5 @@
<template> <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> <template #header>
<svg-button <svg-button
class="add-folder-icon" class="add-folder-icon"

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

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

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

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

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

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

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

@ -431,7 +431,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
svg { svg {
color: var(--te-common-icon-secondary); color: var(--te-page-manage-icon-color);
outline: none; outline: none;
} }
.auto-hidden { .auto-hidden {
@ -462,7 +462,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
&:hover { &:hover {
background-color: var(--te-common-bg-container); background-color: var(--te-page-manage-operation-list-item-bg-color-hover);
} }
} }
.divider { .divider {
@ -474,11 +474,11 @@ export default {
display: block; display: block;
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: var(--te-common-border-divider); background-color: var(--te-page-manage-operation-list-item-border-color-divider);
} }
} }
.danger { .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; cursor: pointer;
} }
&:hover { &:hover {
background-color: var(--te-common-bg-container); background-color: var(--te-page-manage-draggable-row-bg-color-hover);
} }
.content { .content {
@ -283,14 +283,14 @@ const handleContainerDragLeave = (event) => {
align-items: center; align-items: center;
margin-right: 8px; margin-right: 8px;
svg { svg {
color: var(--te-common-icon-secondary); color: var(--te-page-manage-draggable-icon-color);
} }
} }
&.active { &.active {
background-color: var(--te-common-bg-container); background-color: var(--te-page-manage-draggable-row-bg-color-hover);
color: var(--te-common-text-primary); color: var(--te-page-manage-draggable-text-color);
svg { 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; border: 1px solid transparent;
} }
.hover-border-color { .hover-border-color {
border-color: var(--te-common-border-checked); border-color: var(--te-page-manage-draggable-border-color);
overflow: hidden; overflow: hidden;
} }
</style> </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 entry from './src/Main.vue'
import metaData from './meta.js' import metaData from './meta.js'
import './src/styles/vars.less'
export default { export default {
...metaData, ...metaData,

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

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

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

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

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

@ -190,7 +190,7 @@ export default {
padding: 12px; padding: 12px;
.error-tip { .error-tip {
color: var(--te-common-color-error); color: var(--te-state-common-error-color);
margin-top: 4px; margin-top: 4px;
font-size: 12px; font-size: 12px;
} }
@ -239,25 +239,25 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 8px 12px; padding: 8px 12px;
background: var(--ti-lowcode-toolbar-bg); background: var(--te-state-tip-bg-color);
border-top: 1px solid var(--te-common-border-default); border-top: 1px solid var(--te-state-common-border-color);
border-bottom: 1px solid var(--te-common-border-default); border-bottom: 1px solid var(--te-state-common-border-color);
color: var(--te-common-text-secondary); color: var(--te-state-common-label-text-color);
} }
.use-service { .use-service {
color: var(--te-common-text-secondary); color: var(--te-state-common-label-text-color);
font-size: 12px; font-size: 12px;
margin-top: 10px; margin-top: 10px;
span { span {
color: var(--te-common-color-error); color: var(--te-state-common-error-color);
} }
} }
.send-service { .send-service {
text-align: right; 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; padding: 20px 10px;
margin-bottom: 10px; margin-bottom: 10px;
@ -290,14 +290,14 @@ export default {
.icon-plus { .icon-plus {
cursor: pointer; cursor: pointer;
color: var(--ti-lowcode-toolbar-icon-color); color: var(--te-state-remote-icon-color);
outline: none; outline: none;
} }
.icon { .icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
color: var(--te-common-text-secondary); color: var(--te-state-common-label-text-color);
font-size: 16px; font-size: 16px;
border-radius: 2px; border-radius: 2px;
margin-right: 8px; margin-right: 8px;
@ -308,8 +308,8 @@ export default {
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
color: var(--ti-lowcode-toolbar-icon-color); color: var(--te-state-common-icon-color-hover);
background: var(--ti-lowcode-icon-hover-bg); 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; justify-content: space-between;
align-items: center; align-items: center;
padding: 8px 12px; padding: 8px 12px;
background: var(--ti-lowcode-toolbar-bg); background: var(--te-state-common-bg-color-hover);
color: var(--ti-lowcode-toolbar-icon-color); color: var(--te-state-remote-icon-color);
margin-top: 12px; margin-top: 12px;
.icon-del { .icon-del {
cursor: pointer; 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) { :deep(.tiny-form-item__label) {
color: var(--ti-lowcode-toolbar-icon-color); color: var(--te-state-common-label-text-color);
} }
.label-left-wrap { .label-left-wrap {
color: var(--ti-lowcode-toolbar-icon-color); color: var(--te-state-common-label-text-color);
display: flex; display: flex;
} }
:deep(.tiny-collapse-item__wrap) { :deep(.tiny-collapse-item__wrap) {
@ -310,7 +310,7 @@ export default {
.create-content-description { .create-content-description {
font-size: 12px; font-size: 12px;
color: var(--te-common-text-emphasize); color: var(--te-state-common-text-color-emphasize);
margin-left: 8px; margin-left: 8px;
cursor: pointer; cursor: pointer;
} }

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

@ -439,8 +439,8 @@ export default {
margin-top: 8px; margin-top: 8px;
border-radius: 4px; border-radius: 4px;
padding: 8px 14px; padding: 8px 14px;
background: var(--te-common-bg-container); background: var(--te-state-tip-bg-color);
color: var(--te-common-text-weaken); color: var(--te-state-tip-text-color);
& > pre { & > pre {
font-family: Consolas, 'Courier New', monospace; font-family: Consolas, 'Courier New', monospace;
} }
@ -461,11 +461,11 @@ export default {
} }
:deep(.tiny-form-item__label) { :deep(.tiny-form-item__label) {
color: var(--ti-lowcode-toolbar-icon-color); color: var(--te-state-common-label-text-color);
} }
.label-left-wrap { .label-left-wrap {
color: var(--ti-lowcode-toolbar-icon-color); color: var(--te-state-common-label-text-color);
display: flex; display: flex;
} }
:deep(.tiny-collapse-item__wrap) { :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 { .create-content-description {
font-size: 12px; font-size: 12px;
color: var(--te-common-text-emphasize); color: var(--te-state-common-text-color-emphasize);
margin-left: 8px; margin-left: 8px;
cursor: pointer; cursor: pointer;
} }
@ -522,13 +489,4 @@ export default {
.variable-editor { .variable-editor {
height: 270px; 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> </style>

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

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

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

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

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

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

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

@ -18,7 +18,7 @@
margin-top: 8px; margin-top: 8px;
border-radius: 4px; border-radius: 4px;
padding: 8px 14px; padding: 8px 14px;
background: var(--te-common-bg-container); background: var(--te-state-tip-bg-color);
color: var(--te-common-text-weaken); color: var(--te-state-tip-text-color);
} }
</style> </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 entry from './src/Main.vue'
import metaData from './meta.js' import metaData from './meta.js'
import './src/styles/vars.less'
export default { export default {
...metaData, ...metaData,

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

@ -308,12 +308,12 @@ export default {
height: calc(100% - 38px); height: calc(100% - 38px);
overflow-y: scroll; overflow-y: scroll;
padding-top: 12px; padding-top: 12px;
border-top: 1px solid var(--ti-lowcode-tree-border-color); border-top: 1px solid var(--te-tree-border-color);
.tree-handle { .tree-handle {
font-size: var(--te-base-font-size-2); font-size: var(--te-base-font-size-2);
svg { svg {
fill: var(--te-common-icon-secondary); fill: var(--te-tree-icon-color);
} }
} }
} }
@ -340,14 +340,14 @@ export default {
line-height: inherit; line-height: inherit;
} }
:deep(.high-light-node) { :deep(.high-light-node) {
background: var(--te-common-bg-container) !important; background: var(--te-tree-bg-color-active) !important;
:deep(.eyeOpen) { :deep(.eyeOpen) {
display: block !important; display: block !important;
} }
} }
:deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__column) { :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; padding: 0 12px;
height: 24px !important; height: 24px !important;
line-height: 24px; line-height: 24px;
@ -355,7 +355,7 @@ export default {
font-size: 12px; font-size: 12px;
} }
.node-isblock { .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 entry, { api } from './src/Main.vue'
import metaData from './meta.js' import metaData from './meta.js'
import './src/styles/vars.less'
export default { export default {
...metaData, ...metaData,

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

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

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

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