starred/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2026-09-22 16:00:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Watermark differentiation for light and dark themes (#10669)

Browse Source
This commit is contained in:
ssongliu
2025-10-17 10:10:54 +08:00
committed by GitHub
parent 16e2ad64a2
commit 613f8c2b57
3 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/layout/index.vue
+1 -1
View File
@@ -28,7 +28,7 @@
:content="loadContent()"
:font="{
fontSize: globalStore.watermark.fontSize,
color: globalStore.watermark.color,
color: globalStore.isDarkTheme ? globalStore.watermark.darkColor : globalStore.watermark.lightColor,
textBaseline: 'top',
}"
:rotate="globalStore.watermark.rotate"
frontend/src/store/interface/index.ts
+2 -1
View File
@@ -18,7 +18,8 @@ export interface ThemeConfigProp {
}
export interface Watermark {
color: string;
lightColor: string;
darkColor: string;
fontSize: number;
content: string;
rotate: number;
frontend/src/views/setting/panel/watermark/index.vue
+12 -6
View File
@@ -5,7 +5,7 @@
:content="loadContent()"
:font="{
fontSize: form.fontSize,
color: form.color,
color: globalStore.isDarkTheme ? form.darkColor : form.lightColor,
textBaseline: 'top',
}"
:rotate="form.rotate"
@@ -23,8 +23,11 @@
<el-input clearable v-model.trim="form.content" />
<span class="input-help">{{ $t('setting.contentHelper') }}</span>
</el-form-item>
<el-form-item :label="$t('setting.watermarkColor')" prop="color">
<el-color-picker v-model="form.color" show-alpha />
<el-form-item :label="$t('setting.light')" prop="lightColor">
<el-color-picker v-model="form.lightColor" show-alpha />
</el-form-item>
<el-form-item :label="$t('setting.dark')" prop="darkColor">
<el-color-picker v-model="form.darkColor" show-alpha />
</el-form-item>
<el-form-item :label="$t('setting.watermarkFont')" prop="fontSize">
<el-slider v-model="form.fontSize" :min="12" :max="100" />
@@ -62,7 +65,8 @@ const drawerVisible = ref();
const loading = ref();
let form = reactive({
color: globalStore.isDarkTheme ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)',
lightColor: 'rgba(0, 0, 0, 0.15)',
darkColor: 'rgba(255, 255, 255, 0.15)',
fontSize: 16,
content: '${nodeName} - ${nodeAddr}',
rotate: -22,
@@ -92,7 +96,8 @@ const loadContent = () => {
};
const setDefault = () => {
form.color = globalStore.isDarkTheme ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)';
form.lightColor = 'rgba(0, 0, 0, 0.15)';
form.darkColor = 'rgba(255, 255, 255, 0.15)';
form.fontSize = 16;
form.content = '${nodeName} - ${nodeAddr}';
form.rotate = -22;
@@ -115,7 +120,8 @@ const onSave = async (formEl: FormInstance | undefined) => {
loading.value = false;
MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
globalStore.watermark = {
color: form.color,
lightColor: form.lightColor,
darkColor: form.darkColor,
fontSize: form.fontSize,
content: form.content,
rotate: form.rotate,