public/dataease
1
0
Fork 0
mirror of https://github.com/dataease/dataease.git synced 2026-05-14 21:12:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 样式优化

Browse Source
This commit is contained in:
dataeaseShu
2026-02-03 15:41:11 +08:00
committed by dataeaseShu
parent 039dcb23f0
commit 5ae801b599
5 changed files with 114 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/core-frontend/src/store/modules/appearance.ts
View File

@@ -300,6 +300,12 @@ export const useAppearanceStore = defineStore('appearanceStore', {
.mix(new colorTree('ffffff'), new colorTree(this.customColor.substr(1)), { value: 15 })
.toRGB()
)
document.documentElement.style.setProperty(
'--ed-color-primary-dark-20',
colorFunctions
.mix(new colorTree('000000'), new colorTree(this.customColor.substr(1)), { value: 20 })
.toRGB()
)
document.documentElement.style.setProperty('--ed-color-primary-1a', `${this.customColor}1a`)
document.documentElement.style.setProperty('--ed-color-primary-33', `${this.customColor}33`)
document.documentElement.style.setProperty('--ed-color-primary-99', `${this.customColor}99`)
@@ -317,6 +323,7 @@ export const useAppearanceStore = defineStore('appearanceStore', {
document.documentElement.style.removeProperty('--ed-color-primary-33')
document.documentElement.style.removeProperty('--ed-color-primary-99')
document.documentElement.style.removeProperty('--ed-color-primary-dark-2')
document.documentElement.style.removeProperty('--ed-color-primary-dark-20')
}
this.bg = data.bg
this.login = data.login

33
core/core-frontend/src/style/index.less
View File

@@ -725,3 +725,36 @@ strong {
.ed-menu--vertical.ed-menu--light .ed-menu-item.is-active.is-active.is-active {
background-color: var(--ed-color-primary-1a, #3370ff1a) !important;
}
.utree-popover {
padding-bottom: 0 !important;
.pagination-count {
height: auto !important;
}
.ed-pager li.number {
&:hover {
background-color: #1f23291a;
}
&:active {
background-color: #1f232933;
}
}
.btn-quicknext,
.btn-quickprev {
svg {
path[fill='#245BDB'],
path[fill='currentColor'] {
fill: var(--ed-color-primary, #3370ff);
}
}
&:active {
svg {
path {
fill: var(--ed-color-primary-dark-20, #245bdb);
}
}
}
}
}

1
core/core-frontend/src/views/common/DeResourceCreateOptV2.vue
View File

@@ -37,6 +37,7 @@ defineExpose({
<style lang="less">
.market-create-dialog {
border-radius: 4px !important;
padding: 0;
overflow: hidden;
.ed-dialog__body {

76
core/core-frontend/src/views/common/DeResourceTree.vue
View File

@@ -684,7 +684,14 @@ defineExpose({
<div class="icon-methods" v-show="showPosition === 'preview'">
<span class="title"> {{ resourceLabel }} </span>
<div v-if="rootManage" class="flex-align-center">
<el-tooltip :content="t('work_branch.new_folder')" placement="top" effect="dark">
<el-tooltip
offset="14"
:content="t('work_branch.new_folder')"
placement="top"
popper-class="new-folder_tip"
effect="dark"
arrow-offset="10"
>
<el-icon
class="custom-icon btn"
style="margin-right: 20px"
@@ -694,31 +701,27 @@ defineExpose({
</el-icon>
</el-tooltip>
<el-tooltip :content="newResourceLabel" placement="top" effect="dark">
<el-dropdown popper-class="menu-outer-dv_popper" trigger="hover">
<el-icon class="custom-icon btn" @click="addOperation('newLeaf', null, 'leaf', true)">
<Icon name="icon_file-add_outlined"
><icon_fileAdd_outlined class="svg-icon"
/></Icon>
</el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="addOperation('newLeaf', null, 'leaf', true)">
<el-icon :class="`handle-icon color-${curCanvasType}`">
<Icon><component class="svg-icon" :is="dvSvgType"></component></Icon>
</el-icon>
{{ t('work_branch.new_empty') }}
</el-dropdown-item>
<el-dropdown-item @click="addOperation('newFromTemplate', null, 'leaf', true)">
<el-icon class="handle-icon">
<Icon name="dv-use-template"><dvUseTemplate class="svg-icon" /></Icon>
</el-icon>
{{ t('work_branch.new_using_template') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-tooltip>
<el-dropdown placement="bottom-start" popper-class="menu-outer-dv_popper" trigger="hover">
<el-icon class="custom-icon btn" @click="addOperation('newLeaf', null, 'leaf', true)">
<Icon name="icon_file-add_outlined"><icon_fileAdd_outlined class="svg-icon" /></Icon>
</el-icon>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="addOperation('newLeaf', null, 'leaf', true)">
<el-icon :class="`handle-icon color-${curCanvasType}`">
<Icon><component class="svg-icon" :is="dvSvgType"></component></Icon>
</el-icon>
{{ t('work_branch.new_empty') }}
</el-dropdown-item>
<el-dropdown-item @click="addOperation('newFromTemplate', null, 'leaf', true)">
<el-icon class="handle-icon">
<Icon name="dv-use-template"><dvUseTemplate class="svg-icon" /></Icon>
</el-icon>
{{ t('work_branch.new_using_template') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<el-input
@@ -915,11 +918,24 @@ defineExpose({
}
.custom-icon {
font-size: 20px;
position: relative;
outline: none;
&.btn {
color: var(--ed-color-primary);
}
&:hover {
cursor: pointer;
&::after {
content: '';
background-color: var(--ed-color-primary-1a, #3370ff1a);
width: 28px;
height: 28px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 4px;
transform: translate(-50%, -50%);
}
}
}
}
@@ -1004,13 +1020,19 @@ defineExpose({
<style lang="less">
.menu-outer-dv_popper {
min-width: 140px;
margin-top: -2px !important;
margin-top: 6px !important;
.ed-icon {
border-radius: 4px;
}
}
.new-folder_tip {
.ed-popper__arrow {
transform: translate(46px, 0px) !important;
}
}
.sort-type-normal {
i {
display: none;

50
core/core-frontend/src/views/template-market/index.vue
View File

@@ -13,7 +13,7 @@
@templateApply="templateApply"
/>
<el-row v-if="previewModel === 'createPreview'" class="main-container">
<el-row class="market-head" style="padding: 0 0 12px">
<el-row class="market-head">
<el-icon class="custom-back-icon hover-icon" @click="previewModel = 'full'"
><ArrowLeft
/></el-icon>
@@ -96,25 +96,28 @@
</el-row>
</el-row>
<el-row class="template-area">
<div class="template-left">
<el-tree
v-if="state.treeShow"
menu
class="custom-market-tree"
v-model="state.marketActiveTab"
:data="categoriesComputed"
:props="state.treeProps"
node-key="label"
default-expand-all
highlight-current
:current-node-key="state.marketActiveTab"
@node-click="nodeClick"
>
<template #default="{ data }">
<span :title="data.label" class="ed-tree-node__label">{{ data.label }}</span>
</template>
</el-tree>
</div>
<el-scrollbar>
<div class="template-left">
<el-tree
v-if="state.treeShow"
menu
class="custom-market-tree"
v-model="state.marketActiveTab"
:data="categoriesComputed"
:props="state.treeProps"
node-key="label"
default-expand-all
highlight-current
:current-node-key="state.marketActiveTab"
@node-click="nodeClick"
>
<template #default="{ data }">
<span :title="data.label" class="ed-tree-node__label">{{ data.label }}</span>
</template>
</el-tree>
</div>
</el-scrollbar>
<div
v-show="state.networkStatus && state.hasResult"
id="template-show-area"
@@ -645,10 +648,6 @@ defineExpose({
padding: 12px 24px;
border-bottom: 1px solid rgba(31, 35, 41, 0.15);
&.create-preview {
padding: 0;
padding-bottom: 12px;
}
span {
font-size: 16px;
color: #1f2329;
@@ -670,10 +669,8 @@ defineExpose({
height: calc(100vh - 135px);
.template-left {
padding: 8px;
padding-left: 0;
width: 204px;
height: 100%;
overflow-y: auto;
background: #ffffff;
}
.template-right {
@@ -799,5 +796,6 @@ defineExpose({
background: rgba(31, 35, 41, 0.15);
border: 0;
height: 1px;
margin-left: 24px;
}
</style>