|
88 | 88 | :show-file-list="false" |
89 | 89 | class="upload-demo" |
90 | 90 | accept=".jpeg,.jpg,.png,.gif,.svg" |
91 | | - :before-upload="(e: any) => beforeUpload(e, ele.type)" |
| 91 | + :before-upload="(e: any) => beforeUpload(e, ele)" |
92 | 92 | :http-request="uploadImg" |
93 | 93 | > |
94 | 94 | <el-button secondary>{{ t('system.replace_image') }}</el-button> |
|
103 | 103 | :rules="rules" |
104 | 104 | require-asterisk-position="right" |
105 | 105 | label-width="120px" |
106 | | - class="page-Form" |
| 106 | + class="page-Form form-content_error_a" |
107 | 107 | > |
108 | 108 | <el-form-item :label="t('system.website_name')" prop="name"> |
109 | | - <el-input v-model="loginForm.name" maxlength="20" /> |
| 109 | + <el-input |
| 110 | + v-model="loginForm.name" |
| 111 | + :placeholder=" |
| 112 | + $t('datasource.please_enter') + |
| 113 | + $t('common.empty') + |
| 114 | + $t('system.website_name') |
| 115 | + " |
| 116 | + maxlength="20" |
| 117 | + /> |
110 | 118 | <div class="form-tips">{{ t('system.on_webpage_tabs') }}</div> |
111 | 119 | </el-form-item> |
112 | 120 | <el-form-item :label="$t('system.welcome_message')" prop="slogan"> |
113 | 121 | <el-input v-model="loginForm.slogan" maxlength="50" /> |
114 | | - <div class="form-tips"> |
115 | | - {{ t('system.the_product_logo') }} |
116 | | - </div> |
117 | 122 | </el-form-item> |
118 | 123 | <!-- <el-form-item :label="t('system.footer')" prop="foot"> |
119 | 124 | <el-switch v-model="loginForm.foot" active-value="true" inactive-value="false" /> |
@@ -234,8 +239,7 @@ import icon_side_fold_outlined from '@/assets/svg/icon_side-fold_outlined.svg' |
234 | 239 | import { useAppearanceStoreWithOut } from '@/stores/appearance' |
235 | 240 | import LoginPreview from './LoginPreview.vue' |
236 | 241 | import Person from './Person.vue' |
237 | | -import colorFunctions from 'less/lib/less/functions/color.js' |
238 | | -import colorTree from 'less/lib/less/tree/color.js' |
| 242 | +import { setCurrentColor } from '@/utils/utils' |
239 | 243 | // import TinymceEditor from '@/components/rich-text/TinymceEditor.vue' |
240 | 244 | import { cloneDeep } from 'lodash-es' |
241 | 245 | const appearanceStore = useAppearanceStoreWithOut() |
@@ -288,7 +292,13 @@ const defaultLoginForm = reactive<LoginForm>({ |
288 | 292 | const loginForm = reactive<LoginForm>(cloneDeep(defaultLoginForm)) |
289 | 293 |
|
290 | 294 | const rules = reactive<FormRules>({ |
291 | | - name: [{ required: true, message: t('system.the_website_name'), trigger: 'blur' }], |
| 295 | + name: [ |
| 296 | + { |
| 297 | + required: true, |
| 298 | + message: t('datasource.please_enter') + t('common.empty') + t('system.website_name'), |
| 299 | + trigger: 'blur', |
| 300 | + }, |
| 301 | + ], |
292 | 302 | foot: [ |
293 | 303 | { |
294 | 304 | required: true, |
@@ -318,16 +328,19 @@ const configList = [ |
318 | 328 | logo: t('system.website_logo'), |
319 | 329 | type: 'web', |
320 | 330 | tips: t('system.larger_than_200kb'), |
| 331 | + size: 200 * 1024, |
321 | 332 | }, |
322 | 333 | { |
323 | 334 | logo: t('system.login_logo'), |
324 | 335 | type: 'login', |
325 | 336 | tips: t('system.larger_than_200kb_de'), |
| 337 | + size: 200 * 1024, |
326 | 338 | }, |
327 | 339 | { |
328 | 340 | logo: t('system.login_background_image'), |
329 | 341 | type: 'bg', |
330 | 342 | tips: t('system.larger_than_5mb'), |
| 343 | + size: 1024 * 1024 * 5, |
331 | 344 | }, |
332 | 345 | ] |
333 | 346 |
|
@@ -477,25 +490,7 @@ const customColorChange = (val: any) => { |
477 | 490 | } |
478 | 491 | const setPageCustomColor = (val: any) => { |
479 | 492 | const ele = document.getElementsByClassName('appearance-table__content')[0] as HTMLElement |
480 | | -
|
481 | | - ele.style.setProperty('--ed-color-primary', val) |
482 | | - ele.style.setProperty('--van-blue', val) |
483 | | - ele.style.setProperty( |
484 | | - '--ed-color-primary-light-5', |
485 | | - colorFunctions.mix(new colorTree('ffffff'), new colorTree(val.substr(1)), { value: 40 }).toRGB() |
486 | | - ) |
487 | | - ele.style.setProperty( |
488 | | - '--ed-color-primary-light-3', |
489 | | - colorFunctions.mix(new colorTree('ffffff'), new colorTree(val.substr(1)), { value: 15 }).toRGB() |
490 | | - ) |
491 | | - ele.style.setProperty('--ed-color-primary-1a', `${val}1a`) |
492 | | - ele.style.setProperty('--ed-color-primary-14', `${val}14`) |
493 | | - ele.style.setProperty('--ed-color-primary-33', `${val}33`) |
494 | | - ele.style.setProperty('--ed-color-primary-99', `${val}99`) |
495 | | - ele.style.setProperty( |
496 | | - '--ed-color-primary-dark-2', |
497 | | - colorFunctions.mix(new colorTree('000000'), new colorTree(val.substr(1)), { value: 15 }).toRGB() |
498 | | - ) |
| 493 | + setCurrentColor(val, ele) |
499 | 494 | } |
500 | 495 | const resetLoginForm = (reset2Default?: boolean) => { |
501 | 496 | for (const key in loginForm) { |
@@ -549,7 +544,11 @@ const uploadImg = (options: any) => { |
549 | 544 | mobileLoginBg.value = URL.createObjectURL(file) |
550 | 545 | } |
551 | 546 | } |
552 | | -const beforeUpload = (file: any, type: any) => { |
| 547 | +const beforeUpload = (file: any, { type, size, tips }: any) => { |
| 548 | + if (file.size > size) { |
| 549 | + ElMessage.error(tips) |
| 550 | + return false |
| 551 | + } |
553 | 552 | addChangeArray(type, file.uid, 'file') |
554 | 553 | let len = fileList.value?.length |
555 | 554 | let match = false |
@@ -876,9 +875,6 @@ onUnmounted(() => { |
876 | 875 | color: #8f959e; |
877 | 876 | } |
878 | 877 |
|
879 | | - .ed-form-item { |
880 | | - margin-bottom: 8px; |
881 | | - } |
882 | 878 | .appearance-radio-item { |
883 | 879 | :deep(.ed-form-item__content) { |
884 | 880 | line-height: 22px; |
|
0 commit comments