fix(系统设置): 外观设置漏掉的样式

This commit is contained in:
dataeaseShu 2024-03-04 16:09:29 +08:00
parent e6f5d35c90
commit 6bef13f437
10 changed files with 85 additions and 40 deletions

View File

@ -24,7 +24,7 @@
"axios": "^1.3.3", "axios": "^1.3.3",
"crypto-js": "^4.1.1", "crypto-js": "^4.1.1",
"dayjs": "^1.11.9", "dayjs": "^1.11.9",
"element-plus-secondary": "^0.5.1", "element-plus-secondary": "^0.5.2",
"element-resize-detector": "^1.2.4", "element-resize-detector": "^1.2.4",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"html-to-image": "^1.11.11", "html-to-image": "^1.11.11",

View File

@ -488,7 +488,7 @@ watch(
font-size: 16px !important; font-size: 16px !important;
} }
.bar-main-background { .bar-main-background {
background-color: var(--primary, #3370ff); background-color: var(--ed-color-primary, #3370ff);
} }
.bar-main-right { .bar-main-right {

View File

@ -2,6 +2,8 @@ import { defineStore } from 'pinia'
import { store } from '@/store/index' import { store } from '@/store/index'
import { uiLoadApi } from '@/api/login' import { uiLoadApi } from '@/api/login'
import { useCache } from '@/hooks/web/useCache' import { useCache } from '@/hooks/web/useCache'
import colorFunctions from 'less/lib/less/functions/color.js'
import colorTree from 'less/lib/less/tree/color.js'
const basePath = import.meta.env.VITE_API_BASEPATH const basePath = import.meta.env.VITE_API_BASEPATH
const baseUrl = basePath + '/appearance/image/' const baseUrl = basePath + '/appearance/image/'
interface AppearanceState { interface AppearanceState {
@ -135,6 +137,24 @@ export const useAppearanceStore = defineStore('appearanceStore', {
this.customColor = data.customColor this.customColor = data.customColor
if (this.themeColor === 'custom' && this.customColor) { if (this.themeColor === 'custom' && this.customColor) {
document.documentElement.style.setProperty('--ed-color-primary', this.customColor) document.documentElement.style.setProperty('--ed-color-primary', this.customColor)
document.documentElement.style.setProperty(
'--ed-color-primary-light-5',
colorFunctions
.mix(new colorTree('ffffff'), new colorTree(this.customColor.substr(1)), { value: 40 })
.toRGB()
)
document.documentElement.style.setProperty(
'--ed-color-primary-light-3',
colorFunctions
.mix(new colorTree('ffffff'), new colorTree(this.customColor.substr(1)), { value: 15 })
.toRGB()
)
document.documentElement.style.setProperty(
'--ed-color-primary-dark-2',
colorFunctions
.mix(new colorTree('000000'), new colorTree(this.customColor.substr(1)), { value: 15 })
.toRGB()
)
} else if (document.documentElement.style.getPropertyValue('--ed-color-primary')) { } else if (document.documentElement.style.getPropertyValue('--ed-color-primary')) {
document.documentElement.style.setProperty('--ed-color-primary', '#3370FF') document.documentElement.style.setProperty('--ed-color-primary', '#3370FF')
} }

View File

@ -1041,7 +1041,7 @@ const mousedownDrag = () => {
.de-Exec-result, .de-Exec-result,
.de-Underway-pre { .de-Underway-pre {
&::before { &::before {
background: var(--primary, #3370ff); background: var(--ed-color-primary, #3370ff);
} }
} }
@ -1058,7 +1058,7 @@ const mousedownDrag = () => {
} }
.ed-icon-s-order { .ed-icon-s-order {
color: var(--primary, #3370ff); color: var(--ed-color-primary, #3370ff);
cursor: pointer; cursor: pointer;
} }
} }
@ -1245,7 +1245,7 @@ const mousedownDrag = () => {
top: 10.6px; top: 10.6px;
left: 16px; left: 16px;
font-size: 14px; font-size: 14px;
color: var(--primary, #3370ff); color: var(--ed-color-primary, #3370ff);
} }
margin-bottom: 16px; margin-bottom: 16px;

View File

@ -547,7 +547,7 @@ initFunction()
} }
.item-dimension:hover { .item-dimension:hover {
border-color: var(--primary, #3370ff); border-color: var(--ed-color-primary, #3370ff);
background: rgba(51, 112, 255, 0.1); background: rgba(51, 112, 255, 0.1);
cursor: pointer; cursor: pointer;
} }
@ -576,7 +576,7 @@ initFunction()
} }
.function-style:hover { .function-style:hover {
border-color: var(--primary, #3370ff); border-color: var(--ed-color-primary, #3370ff);
cursor: pointer; cursor: pointer;
} }
.function-height { .function-height {

View File

@ -7,12 +7,13 @@ import { guid } from './util'
import { HandleMore } from '@/components/handle-more' import { HandleMore } from '@/components/handle-more'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import UnionFieldList from './UnionFieldList.vue' import UnionFieldList from './UnionFieldList.vue'
import type { Node } from './UnionEdit.vue' import type { Node, Field } from './util'
import { getTableField } from '@/api/dataset' import { getTableField } from '@/api/dataset'
import type { Field } from './UnionFieldList.vue'
import type { SqlNode } from './AddSql.vue' import type { SqlNode } from './AddSql.vue'
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
import type { Table } from '@/api/dataset' import type { Table } from '@/api/dataset'
import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
const appearanceStore = useAppearanceStoreWithOut()
const state = reactive({ const state = reactive({
nodeList: [], nodeList: [],
pathList: [], pathList: [],
@ -28,6 +29,10 @@ const props = defineProps({
getDsName: propTypes.func getDsName: propTypes.func
}) })
const primaryColor = computed(() => {
return appearanceStore.themeColor === 'custom' ? appearanceStore.customColor : '#3370FF'
})
const iconName = { const iconName = {
left: 'icon_left-association', left: 'icon_left-association',
right: 'icon_right-association', right: 'icon_right-association',
@ -803,7 +808,7 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
v-for="ele in flatPathList" v-for="ele in flatPathList"
:d="ele.d" :d="ele.d"
:stroke-dasharray="ele.isShadow ? '4,4' : '0'" :stroke-dasharray="ele.isShadow ? '4,4' : '0'"
:stroke="ele.isShadow ? '#3370ff' : '#BBBFC4'" :stroke="ele.isShadow ? primaryColor : '#BBBFC4'"
stroke-width="1" stroke-width="1"
fill="none" fill="none"
/> />
@ -1036,6 +1041,7 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #fff; background: #fff;
color: var(--ed-color-primary);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
border-color: var(--ed-color-primary); border-color: var(--ed-color-primary);

View File

@ -2,29 +2,10 @@
import { ref, reactive } from 'vue' import { ref, reactive } from 'vue'
import UnionFieldList from './UnionFieldList.vue' import UnionFieldList from './UnionFieldList.vue'
import UnionItemEdit from './UnionItemEdit.vue' import UnionItemEdit from './UnionItemEdit.vue'
import type { Field } from './UnionFieldList.vue' import type { Field, NodeType, UnionType, Node } from './util'
import { getTableField } from '@/api/dataset' import { getTableField } from '@/api/dataset'
import { cloneDeep } from 'lodash-es' import { cloneDeep } from 'lodash-es'
interface UnionField {
currentField: Field
parentField: Field
}
type NodeType = 'db' | 'sql'
type UnionType = 'left' | 'right' | 'inner'
export interface Node {
tableName: string
type: NodeType
datasourceId: string
id: string
unionType: UnionType
unionFields: UnionField[]
info: string
sqlVariableDetails: string
currentDsFields: Field[]
children?: Node[]
}
const changeParentFields = val => { const changeParentFields = val => {
parent.currentDsFields = val parent.currentDsFields = val
} }

View File

@ -4,15 +4,7 @@ import { useI18n } from '@/hooks/web/useI18n'
import { propTypes } from '@/utils/propTypes' import { propTypes } from '@/utils/propTypes'
import { ElTable } from 'element-plus-secondary' import { ElTable } from 'element-plus-secondary'
import { fieldType } from '@/utils/attr' import { fieldType } from '@/utils/attr'
export interface Field { import { type Field } from './util'
checked: boolean
deExtractType: number
deType: number
name: string
type: string
originName: string
id: string
}
const { t } = useI18n() const { t } = useI18n()
const props = defineProps({ const props = defineProps({

View File

@ -644,6 +644,11 @@ const tabChange = val => {
ele.deType === 1 && ele.deExtractType === 0 ele.deType === 1 && ele.deExtractType === 0
? [ele.deType, ele.dateFormatType] ? [ele.deType, ele.dateFormatType]
: [ele.deType] : [ele.deType]
} else {
const [type] = ele.deTypeArr
if (ele.deTypeArr.length && type !== ele.deType) {
ele.deTypeArr.splice(0, 1, ele.deType)
}
} }
}) })
} }

View File

@ -120,4 +120,45 @@ const timeTypes = [
'custom' 'custom'
] ]
export { timestampFormatDate, defaultValueScopeList, fieldOptions, guid, getFieldName, timeTypes } type NodeType = 'db' | 'sql'
type UnionType = 'left' | 'right' | 'inner'
interface UnionField {
currentField: Field
parentField: Field
}
interface Node {
tableName: string
type: NodeType
datasourceId: string
id: string
unionType: UnionType
unionFields: UnionField[]
info: string
sqlVariableDetails: string
currentDsFields: Field[]
children?: Node[]
}
interface Field {
checked: boolean
deExtractType: number
deType: number
name: string
type: string
originName: string
id: string
}
export {
NodeType,
UnionType,
UnionField,
Node,
Field,
timestampFormatDate,
defaultValueScopeList,
fieldOptions,
guid,
getFieldName,
timeTypes
}