klinsmaya/SQLBot
1
0
Fork 0
mirror of https://gh-proxy.org/https://github.com/klinsmaya/SQLBot.git synced 2026-11-08 01:06:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(Appearance Settings): The ratio of the sample image is inconsistent with the actual login logo ratio

Browse Source
This commit is contained in:
dataeaseShu
2025-08-28 15:42:09 +08:00
parent 79f7630537
commit e753d2c1c3
9 changed files with 93 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/embedded.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite-sqlbot.svg" />
<link rel="icon" type="image/svg+xml"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SQLBot</title>
</head>
frontend/index.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite-sqlbot.svg" />
<link rel="icon" type="image/svg+xml" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SQLBot</title>
</head>
frontend/src/assets/svg/avatar_personal.svg
+2 -2
View File
@@ -1,5 +1,5 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="14" cy="14" r="14" fill="#1CBA90"/>
<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
<circle cx="14" cy="14" r="14" class="icon-primary"/>
<path d="M15.75 14.5832H12.25C10.6392 14.5832 8.75 15.7099 8.75 17.7332V19.3082C8.75 19.5981 9.01117 19.8332 9.33333 19.8332H18.6667C18.9888 19.8332 19.25 19.5981 19.25 19.3082V17.7332C19.25 15.7082 17.3608 14.5832 15.75 14.5832Z" fill="white"/>
<path d="M11.0833 11.0832C11.0833 12.694 12.3892 13.9998 14 13.9998C15.6108 13.9998 16.9167 12.694 16.9167 11.0832C16.9167 9.47234 15.6108 8.1665 14 8.1665C12.3892 8.1665 11.0833 9.47234 11.0833 11.0832Z" fill="white"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 617 B

After

Width:  |  Height:  |  Size: 611 B

frontend/src/components/layout/LayoutDsl.vue
+1 -1
View File
@@ -70,7 +70,7 @@ const showSysmenu = computed(() => {
:class="collapse && 'collapse'"
@click="toWorkspace"
>
<el-icon size="16">
<el-icon size="18">
<icon_moments_categories_outlined></icon_moments_categories_outlined>
</el-icon>
{{ collapse ? '' : $t('workspace.return_to_workspace') }}
frontend/src/style.less
+10
View File
@@ -185,6 +185,16 @@ body {
}
}
.form-content_error_a {
.ed-form-item--default {
margin-bottom: 8px;
&.is-error {
margin-bottom: 12px;
}
}
}
.ed-dialog {
border-radius: 12px !important;
}
frontend/src/utils/utils.ts
+48 -4
View File
@@ -107,10 +107,54 @@ export const setTitle = (title?: string) => {
document.title = title || 'SQLBot'
}
export const setCurrentColor = (
currentColor: any,
element: HTMLElement = document.documentElement
) => {
function rgbToHex(r: any, g: any, b: any) {
// 确保数值在0-255范围内
r = Math.max(0, Math.min(255, r))
g = Math.max(0, Math.min(255, g))
b = Math.max(0, Math.min(255, b))
// 转换为16进制并补零
const hexR = r.toString(16).padStart(2, '0')
const hexG = g.toString(16).padStart(2, '0')
const hexB = b.toString(16).padStart(2, '0')
return `#${hexR}${hexG}${hexB}`.toUpperCase()
}
function rgbaToHex(r: any, g: any, b: any, a: any) {
// 处理RGB部分
const hexR = Math.max(0, Math.min(255, r)).toString(16).padStart(2, '0')
const hexG = Math.max(0, Math.min(255, g)).toString(16).padStart(2, '0')
const hexB = Math.max(0, Math.min(255, b)).toString(16).padStart(2, '0')
// 处理透明度（可选）
const hexA =
a !== undefined
? Math.round(Math.max(0, Math.min(1, a)) * 255)
.toString(16)
.padStart(2, '0')
: ''
return `#${hexR}${hexG}${hexB}${hexA}`.toUpperCase()
}
export function colorStringToHex(colorStr: any) {
if (colorStr.startsWith('#')) return colorStr
// 提取颜色值
const rgbRegex =
/^(rgb|rgba)\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)$/
const match = colorStr.match(rgbRegex)
if (!match) return null
const r = parseInt(match[2])
const g = parseInt(match[3])
const b = parseInt(match[4])
const a = match[5] ? parseFloat(match[5]) : undefined
return a !== undefined ? rgbaToHex(r, g, b, a) : rgbToHex(r, g, b)
}
export const setCurrentColor = (color: any, element: HTMLElement = document.documentElement) => {
const currentColor = colorStringToHex(color) as any
element.style.setProperty('--ed-color-primary', currentColor)
element.style.setProperty('--van-blue', currentColor)
element.style.setProperty(
frontend/src/views/login/index.vue
+1 -1
View File
@@ -5,7 +5,7 @@
</div>
<div class="login-content">
<div class="login-right">
<img width="227" height="52" :src="loginBg" alt="" />
<img width="auto" height="52" :src="loginBg" alt="" />
<div class="welcome">
{{ appearanceStore.slogan || $t('common.intelligent_questioning_platform') }}
</div>
frontend/src/views/system/appearance/index.vue
+28 -32
View File
@@ -88,7 +88,7 @@
:show-file-list="false"
class="upload-demo"
accept=".jpeg,.jpg,.png,.gif,.svg"
:before-upload="(e: any) => beforeUpload(e, ele.type)"
:before-upload="(e: any) => beforeUpload(e, ele)"
:http-request="uploadImg"
>
<el-button secondary>{{ t('system.replace_image') }}</el-button>
@@ -103,17 +103,22 @@
:rules="rules"
require-asterisk-position="right"
label-width="120px"
class="page-Form"
class="page-Form form-content_error_a"
>
<el-form-item :label="t('system.website_name')" prop="name">
<el-input v-model="loginForm.name" maxlength="20" />
<el-input
v-model="loginForm.name"
:placeholder="
$t('datasource.please_enter') +
$t('common.empty') +
$t('system.website_name')
"
maxlength="20"
/>
<div class="form-tips">{{ t('system.on_webpage_tabs') }}</div>
</el-form-item>
<el-form-item :label="$t('system.welcome_message')" prop="slogan">
<el-input v-model="loginForm.slogan" maxlength="50" />
<div class="form-tips">
{{ t('system.the_product_logo') }}
</div>
</el-form-item>
<!-- <el-form-item :label="t('system.footer')" prop="foot">
<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'
import { useAppearanceStoreWithOut } from '@/stores/appearance'
import LoginPreview from './LoginPreview.vue'
import Person from './Person.vue'
import colorFunctions from 'less/lib/less/functions/color.js'
import colorTree from 'less/lib/less/tree/color.js'
import { setCurrentColor } from '@/utils/utils'
// import TinymceEditor from '@/components/rich-text/TinymceEditor.vue'
import { cloneDeep } from 'lodash-es'
const appearanceStore = useAppearanceStoreWithOut()
@@ -288,7 +292,13 @@ const defaultLoginForm = reactive<LoginForm>({
const loginForm = reactive<LoginForm>(cloneDeep(defaultLoginForm))
const rules = reactive<FormRules>({
name: [{ required: true, message: t('system.the_website_name'), trigger: 'blur' }],
name: [
{
required: true,
message: t('datasource.please_enter') + t('common.empty') + t('system.website_name'),
trigger: 'blur',
},
],
foot: [
{
required: true,
@@ -318,16 +328,19 @@ const configList = [
logo: t('system.website_logo'),
type: 'web',
tips: t('system.larger_than_200kb'),
size: 200 * 1024,
},
{
logo: t('system.login_logo'),
type: 'login',
tips: t('system.larger_than_200kb_de'),
size: 200 * 1024,
},
{
logo: t('system.login_background_image'),
type: 'bg',
tips: t('system.larger_than_5mb'),
size: 1024 * 1024 * 5,
},
]
@@ -477,25 +490,7 @@ const customColorChange = (val: any) => {
}
const setPageCustomColor = (val: any) => {
const ele = document.getElementsByClassName('appearance-table__content')[0] as HTMLElement
ele.style.setProperty('--ed-color-primary', val)
ele.style.setProperty('--van-blue', val)
ele.style.setProperty(
'--ed-color-primary-light-5',
colorFunctions.mix(new colorTree('ffffff'), new colorTree(val.substr(1)), { value: 40 }).toRGB()
)
ele.style.setProperty(
'--ed-color-primary-light-3',
colorFunctions.mix(new colorTree('ffffff'), new colorTree(val.substr(1)), { value: 15 }).toRGB()
)
ele.style.setProperty('--ed-color-primary-1a', `${val}1a`)
ele.style.setProperty('--ed-color-primary-14', `${val}14`)
ele.style.setProperty('--ed-color-primary-33', `${val}33`)
ele.style.setProperty('--ed-color-primary-99', `${val}99`)
ele.style.setProperty(
'--ed-color-primary-dark-2',
colorFunctions.mix(new colorTree('000000'), new colorTree(val.substr(1)), { value: 15 }).toRGB()
)
setCurrentColor(val, ele)
}
const resetLoginForm = (reset2Default?: boolean) => {
for (const key in loginForm) {
@@ -549,7 +544,11 @@ const uploadImg = (options: any) => {
mobileLoginBg.value = URL.createObjectURL(file)
}
}
const beforeUpload = (file: any, type: any) => {
const beforeUpload = (file: any, { type, size, tips }: any) => {
if (file.size > size) {
ElMessage.error(tips)
return false
}
addChangeArray(type, file.uid, 'file')
let len = fileList.value?.length
let match = false
@@ -876,9 +875,6 @@ onUnmounted(() => {
color: #8f959e;
}
.ed-form-item {
margin-bottom: 8px;
}
.appearance-radio-item {
:deep(.ed-form-item__content) {
line-height: 22px;
frontend/src/views/system/professional/index.vue
+1
View File
@@ -540,6 +540,7 @@ const deleteHandlerItem = (idx: number) => {
<el-icon
class="hover-icon_with_bg"
size="16"
style="color: #646a73"
@click.stop="deleteHandlerItem(index)"
>
<IconOpeDelete></IconOpeDelete>