fix: login i18n bug

--bug=1051922 --user=王孝刚 【国际化】扫码登录没有国际化 https://www.tapd.cn/57709429/s/1649970
This commit is contained in:
wxg0103 2025-01-22 18:55:11 +08:00 committed by wxg
parent bb77448231
commit 39e7119d9a
9 changed files with 359 additions and 348 deletions

View File

@ -18,7 +18,7 @@ export default {
ldap_filterPlaceholder: 'Please enter user filter',
ldap_mapping: 'LDAP Attribute Mapping',
ldap_mappingPlaceholder: 'Please enter LDAP attribute mapping',
enableAuthentication: 'Enable LDAP Authentication',
enableAuthentication: 'Enable LDAP Authentication'
},
cas: {
title: 'CAS Settings',
@ -85,7 +85,9 @@ export default {
appSecretPlaceholder: 'Please enter APP secret',
corpIdPlaceholder: 'Please enter corp ID',
agentIdPlaceholder: 'Please enter agent ID',
callbackWarning: 'Please enter a valid URL address'
callbackWarning: 'Please enter a valid URL address',
larkQrCode: 'Lark Scan Code Login',
dingtalkQrCode: 'DingTalk Scan Code Login'
}
},
theme: {
@ -143,6 +145,6 @@ export default {
smtpPassword: 'SMTP Password',
smtpPasswordPlaceholder: 'Please enter SMTP password',
enableSSL: 'Enable SSL (if the SMTP port is 465, you usually need to enable SSL)',
enableTLS: 'Enable TLS (if the SMTP port is 587, you usually need to enable TLS)',
enableTLS: 'Enable TLS (if the SMTP port is 587, you usually need to enable TLS)'
}
}

View File

@ -85,7 +85,9 @@ export default {
appSecretPlaceholder: '请输入 App Secret',
corpIdPlaceholder: '请输入 Corp Id',
agentIdPlaceholder: '请输入 Agent Id',
callbackWarning: '请输入有效的 URL 地址'
callbackWarning: '请输入有效的 URL 地址',
larkQrCode: '飞书扫码登录',
dingtalkQrCode: '钉钉扫码登录'
}
},
theme: {

View File

@ -19,7 +19,7 @@ export default {
ldap_filterPlaceholder: '請輸入使用者過濾器',
ldap_mapping: 'LDAP 屬性對應',
ldap_mappingPlaceholder: '請輸入 LDAP 屬性對應',
enableAuthentication: '啟用 LDAP 認證',
enableAuthentication: '啟用 LDAP 認證'
},
cas: {
title: 'CAS 設定',
@ -86,7 +86,9 @@ export default {
appSecretPlaceholder: '請輸入 App Secret',
corpIdPlaceholder: '請輸入 Corp Id',
agentIdPlaceholder: '請輸入 Agent Id',
callbackWarning: '請輸入有效的 URL 位址'
callbackWarning: '請輸入有效的 URL 位址',
larkQrCode: '飛書掃碼登錄',
dingtalkQrCode: '釘釘掃碼登錄'
}
},
theme: {
@ -142,6 +144,6 @@ export default {
smtpPassword: '發件人密碼',
smtpPasswordPlaceholder: '請輸入發件人密碼',
enableSSL: '啟用 SSL如果 SMTP 端口是 465通常需要啟用 SSL',
enableTLS: '啟用 TLS如果 SMTP 端口是 587通常需要啟用 TLS',
enableTLS: '啟用 TLS如果 SMTP 端口是 587通常需要啟用 TLS'
}
}

View File

@ -26,353 +26,345 @@
</div>
</template>
<el-row :gutter="8">
<el-col :span="12">
<div class="setting-preview border border-r-4 mr-16">
<div class="setting-preview-container">
<div class="setting-preview-header" :style="customStyle">
<div class="flex-between">
<div class="flex align-center">
<div class="mr-12 ml-24 flex">
<AppAvatar
v-if="isAppIcon(detail?.icon)"
shape="square"
:size="32"
style="background: none"
>
<img :src="detail?.icon" alt="" />
</AppAvatar>
<AppAvatar
v-else-if="detail?.name"
:name="detail?.name"
pinyinColor
shape="square"
:size="32"
/>
</div>
<div class="flex">
<div class="setting-preview border border-r-4 mr-16" style="min-width: 400px">
<div class="setting-preview-container">
<div class="setting-preview-header" :style="customStyle">
<div class="flex-between">
<div class="flex align-center">
<div class="mr-12 ml-24 flex">
<AppAvatar
v-if="isAppIcon(detail?.icon)"
shape="square"
:size="32"
style="background: none"
>
<img :src="detail?.icon" alt="" />
</AppAvatar>
<AppAvatar
v-else-if="detail?.name"
:name="detail?.name"
pinyinColor
shape="square"
:size="32"
/>
</div>
<h4>
{{ detail?.name || $t('views.application.applicationForm.form.appName.label') }}
</h4>
</div>
<div class="mr-16">
<el-button link>
<AppIcon
:iconName="'app-magnify'"
:style="{
color: xpackForm.custom_theme?.header_font_color
}"
style="font-size: 20px"
></AppIcon>
</el-button>
<el-button link>
<el-icon
:size="20"
class="color-secondary"
:style="{
color: xpackForm.custom_theme?.header_font_color
}"
>
<Close />
</el-icon>
</el-button>
</div>
<h4>
{{ detail?.name || $t('views.application.applicationForm.form.appName.label') }}
</h4>
</div>
</div>
<div>
<div class="p-16" style="position: relative">
<div class="flex">
<div class="avatar">
<el-image
v-if="imgUrl.avatar"
:src="imgUrl.avatar"
alt=""
fit="cover"
style="width: 35px; height: 35px; display: block"
/>
<LogoIcon
v-else
height="35px"
style="width: 35px; height: 35px; display: block"
/>
</div>
<img src="@/assets/display-bg2.png" alt="" width="270" />
</div>
<div class="flex-between">
<div class="avatar">
<el-image
v-if="imgUrl.user_avatar"
:src="imgUrl.user_avatar"
alt=""
fit="cover"
style="width: 35px; height: 35px; display: block"
/>
<AppAvatar v-else>
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
</AppAvatar>
</div>
<img src="@/assets/display-bg3.png" alt="" width="270" class="ml-8" />
</div>
</div>
<div
style="position: absolute; bottom: 0; padding-bottom: 8px; box-sizing: border-box"
class="p-16 text-center w-full"
>
<img src="@/assets/display-bg1.png" alt="" class="w-full" />
<el-text
type="info"
v-if="xpackForm.disclaimer"
class="mt-8"
style="font-size: 12px"
>
<auto-tooltip :content="xpackForm.disclaimer_value">
{{ xpackForm.disclaimer_value }}
</auto-tooltip>
</el-text>
<div class="mr-16">
<el-button link>
<AppIcon
:iconName="'app-magnify'"
:style="{
color: xpackForm.custom_theme?.header_font_color
}"
style="font-size: 20px"
></AppIcon>
</el-button>
<el-button link>
<el-icon
:size="20"
class="color-secondary"
:style="{
color: xpackForm.custom_theme?.header_font_color
}"
>
<Close />
</el-icon>
</el-button>
</div>
</div>
</div>
<div>
<div class="p-16" style="position: relative">
<div class="flex">
<div class="avatar">
<el-image
v-if="imgUrl.avatar"
:src="imgUrl.avatar"
alt=""
fit="cover"
style="width: 35px; height: 35px; display: block"
/>
<LogoIcon
v-else
height="35px"
style="width: 35px; height: 35px; display: block"
/>
</div>
<div class="float_icon">
<el-image
v-if="imgUrl.float_icon"
:src="imgUrl.float_icon"
alt=""
fit="cover"
style="width: 40px; height: 40px; display: block"
/>
<img
v-else
src="/MaxKB.gif"
height="50px"
style="width: 40px; height: 40px; display: block"
/>
<img src="@/assets/display-bg2.png" alt="" width="270" />
</div>
<div class="flex-between">
<div class="avatar">
<el-image
v-if="imgUrl.user_avatar"
:src="imgUrl.user_avatar"
alt=""
fit="cover"
style="width: 35px; height: 35px; display: block"
/>
<AppAvatar v-else>
<img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
</AppAvatar>
</div>
<img src="@/assets/display-bg3.png" alt="" width="270" class="ml-8" />
</div>
</div>
<div
style="position: absolute; bottom: 0; padding-bottom: 8px; box-sizing: border-box"
class="p-16 text-center w-full"
>
<img src="@/assets/display-bg1.png" alt="" class="w-full" />
<el-text type="info" v-if="xpackForm.disclaimer" class="mt-8" style="font-size: 12px">
<auto-tooltip :content="xpackForm.disclaimer_value">
{{ xpackForm.disclaimer_value }}
</auto-tooltip>
</el-text>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<el-form ref="displayFormRef" :model="form">
<el-row class="w-full mb-8">
<el-col :span="12">
<h5 class="mb-8">
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.customThemeColor') }}
</h5>
<div>
<el-color-picker v-model="form.custom_theme.theme_color" />
{{
!form.custom_theme.theme_color
? $t('views.applicationOverview.appInfo.SettingDisplayDialog.default')
: ''
}}
</div>
</el-col>
<el-col :span="12">
<h5 class="mb-8">
{{
$t('views.applicationOverview.appInfo.SettingDisplayDialog.headerTitleFontColor')
}}
</h5>
<el-color-picker v-model="form.custom_theme.header_font_color" />
</el-col>
</el-row>
<el-row class="w-full mb-8">
<div class="float_icon">
<el-image
v-if="imgUrl.float_icon"
:src="imgUrl.float_icon"
alt=""
fit="cover"
style="width: 40px; height: 40px; display: block"
/>
<img
v-else
src="/MaxKB.gif"
height="50px"
style="width: 40px; height: 40px; display: block"
/>
</div>
</div>
<el-form ref="displayFormRef" :model="form">
<el-row class="w-full mb-8">
<el-col :span="12">
<h5 class="mb-8">
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.languageLabel') }}
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.customThemeColor') }}
</h5>
<el-select v-model="form.language">
<el-option
v-for="item in langList"
:key="item.value"
:label="item.label"
:value="item.value"
<div>
<el-color-picker v-model="form.custom_theme.theme_color" />
{{
!form.custom_theme.theme_color
? $t('views.applicationOverview.appInfo.SettingDisplayDialog.default')
: ''
}}
</div>
</el-col>
<el-col :span="12">
<h5 class="mb-8">
{{
$t('views.applicationOverview.appInfo.SettingDisplayDialog.headerTitleFontColor')
}}
</h5>
<el-color-picker v-model="form.custom_theme.header_font_color" />
</el-col>
</el-row>
<el-row class="w-full mb-8">
<h5 class="mb-8">
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.languageLabel') }}
</h5>
<el-select v-model="form.language">
<el-option
v-for="item in langList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-row>
<el-card shadow="never" class="mb-8">
<div class="flex-between mb-8">
<span class="lighter">{{
$t('views.applicationOverview.appInfo.SettingDisplayDialog.askUserAvatar')
}}</span>
<el-upload
ref="uploadRef"
action="#"
:auto-upload="false"
:show-file-list="false"
accept="image/jpeg, image/png, image/gif"
:on-change="(file: any, fileList: any) => onChange(file, fileList, 'user_avatar')"
>
<el-button size="small">
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
</el-button>
</el-upload>
</div>
<el-text type="info" size="small"
>{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
</el-text>
</el-card>
<el-card shadow="never" class="mb-8">
<div class="flex-between mb-8">
<span class="lighter">{{
$t('views.applicationOverview.appInfo.SettingDisplayDialog.AIAvatar')
}}</span>
<el-upload
ref="uploadRef"
action="#"
:auto-upload="false"
:show-file-list="false"
accept="image/jpeg, image/png, image/gif"
:on-change="(file: any, fileList: any) => onChange(file, fileList, 'avatar')"
>
<el-button size="small">
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
</el-button>
</el-upload>
</div>
<el-text type="info" size="small">
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
</el-text>
</el-card>
<el-card shadow="never" class="mb-8">
<div class="flex-between mb-8">
<span class="lighter">{{
$t('views.applicationOverview.appInfo.SettingDisplayDialog.floatIcon')
}}</span>
<el-upload
ref="uploadRef"
action="#"
:auto-upload="false"
:show-file-list="false"
accept="image/jpeg, image/png, image/gif"
:on-change="(file: any, fileList: any) => onChange(file, fileList, 'float_icon')"
>
<el-button size="small">
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
</el-button>
</el-upload>
</div>
<el-text type="info" size="small">
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
</el-text>
<div class="border-t mt-8">
<div class="flex-between mb-8">
<span class="lighter">{{
$t('views.applicationOverview.appInfo.SettingDisplayDialog.iconDefaultPosition')
}}</span>
<el-checkbox
v-model="form.draggable"
:label="
$t('views.applicationOverview.appInfo.SettingDisplayDialog.draggablePosition')
"
/>
</el-select>
</el-row>
<el-card shadow="never" class="mb-8">
<div class="flex-between mb-8">
<span class="lighter">{{
$t('views.applicationOverview.appInfo.SettingDisplayDialog.askUserAvatar')
}}</span>
<el-upload
ref="uploadRef"
action="#"
:auto-upload="false"
:show-file-list="false"
accept="image/jpeg, image/png, image/gif"
:on-change="(file: any, fileList: any) => onChange(file, fileList, 'user_avatar')"
>
<el-button size="small">
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
</el-button>
</el-upload>
</div>
<el-text type="info" size="small"
>{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
</el-text>
</el-card>
<el-card shadow="never" class="mb-8">
<div class="flex-between mb-8">
<span class="lighter">{{
$t('views.applicationOverview.appInfo.SettingDisplayDialog.AIAvatar')
}}</span>
<el-upload
ref="uploadRef"
action="#"
:auto-upload="false"
:show-file-list="false"
accept="image/jpeg, image/png, image/gif"
:on-change="(file: any, fileList: any) => onChange(file, fileList, 'avatar')"
>
<el-button size="small">
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
</el-button>
</el-upload>
</div>
<el-text type="info" size="small">
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
</el-text>
</el-card>
<el-card shadow="never" class="mb-8">
<div class="flex-between mb-8">
<span class="lighter">{{
$t('views.applicationOverview.appInfo.SettingDisplayDialog.floatIcon')
}}</span>
<el-upload
ref="uploadRef"
action="#"
:auto-upload="false"
:show-file-list="false"
accept="image/jpeg, image/png, image/gif"
:on-change="(file: any, fileList: any) => onChange(file, fileList, 'float_icon')"
>
<el-button size="small">
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.replace') }}
</el-button>
</el-upload>
</div>
<el-text type="info" size="small">
{{ $t('views.applicationOverview.appInfo.SettingDisplayDialog.imageMessage') }}
</el-text>
<div class="border-t mt-8">
<div class="flex-between mb-8">
<span class="lighter">{{
$t('views.applicationOverview.appInfo.SettingDisplayDialog.iconDefaultPosition')
}}</span>
<el-checkbox
v-model="form.draggable"
:label="
$t('views.applicationOverview.appInfo.SettingDisplayDialog.draggablePosition')
"
/>
</div>
<el-row :gutter="8" class="w-full mb-8">
<el-col :span="12">
<div class="flex align-center">
<el-select v-model="form.float_location.x.type" style="width: 80px">
<el-option
:label="
$t(
'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.left'
)
"
value="left"
/>
<el-option
:label="
$t(
'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.right'
)
"
value="right"
/>
</el-select>
<el-input-number
v-model="form.float_location.x.value"
:min="0"
:step="1"
:precision="0"
:value-on-clear="0"
step-strictly
controls-position="right"
<el-row :gutter="8" class="w-full mb-8">
<el-col :span="12">
<div class="flex align-center">
<el-select v-model="form.float_location.x.type" style="width: 80px">
<el-option
:label="
$t(
'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.left'
)
"
value="left"
/>
<span class="ml-4">px</span>
</div>
</el-col>
<el-col :span="12">
<div class="flex align-center">
<el-select v-model="form.float_location.y.type" style="width: 80px">
<el-option
:label="
$t(
'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.top'
)
"
value="top"
/>
<el-option
:label="
$t(
'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.bottom'
)
"
value="bottom"
/>
</el-select>
<el-input-number
v-model="form.float_location.y.value"
:min="0"
:step="1"
:precision="0"
:value-on-clear="0"
step-strictly
controls-position="right"
<el-option
:label="
$t(
'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.right'
)
"
value="right"
/>
<span class="ml-4">px</span>
</div>
</el-col>
</el-row>
</div>
</el-card>
</el-select>
<el-input-number
v-model="form.float_location.x.value"
:min="0"
:step="1"
:precision="0"
:value-on-clear="0"
step-strictly
controls-position="right"
/>
<span class="ml-4">px</span>
</div>
</el-col>
<el-col :span="12">
<div class="flex align-center">
<el-select v-model="form.float_location.y.type" style="width: 80px">
<el-option
:label="
$t(
'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.top'
)
"
value="top"
/>
<el-option
:label="
$t(
'views.applicationOverview.appInfo.SettingDisplayDialog.iconPosition.bottom'
)
"
value="bottom"
/>
</el-select>
<el-input-number
v-model="form.float_location.y.value"
:min="0"
:step="1"
:precision="0"
:value-on-clear="0"
step-strictly
controls-position="right"
/>
<span class="ml-4">px</span>
</div>
</el-col>
</el-row>
</div>
</el-card>
<el-space direction="vertical" alignment="start" :size="2">
<el-checkbox
v-model="form.show_source"
:label="
isWorkFlow(detail.type)
? $t('views.applicationOverview.appInfo.SettingDisplayDialog.showExecutionDetail')
: $t('views.applicationOverview.appInfo.SettingDisplayDialog.showSourceLabel')
"
/>
<el-checkbox
v-model="form.show_history"
:label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.showHistory')"
/>
<el-checkbox
v-model="form.show_guide"
:label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.displayGuide')"
/>
<el-checkbox
v-model="form.disclaimer"
:label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.disclaimer')"
@change="changeDisclaimer"
/>
<span v-if="form.disclaimer"
><el-tooltip :content="form.disclaimer_value" placement="top">
<el-input
v-model="form.disclaimer_value"
style="width: 422px; margin-bottom: 10px"
@change="changeValue"
:maxlength="128"
/> </el-tooltip
></span>
</el-space>
</el-form>
</el-col>
</el-row>
<el-space direction="vertical" alignment="start" :size="2">
<el-checkbox
v-model="form.show_source"
:label="
isWorkFlow(detail.type)
? $t('views.applicationOverview.appInfo.SettingDisplayDialog.showExecutionDetail')
: $t('views.applicationOverview.appInfo.SettingDisplayDialog.showSourceLabel')
"
/>
<el-checkbox
v-model="form.show_history"
:label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.showHistory')"
/>
<el-checkbox
v-model="form.show_guide"
:label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.displayGuide')"
/>
<el-checkbox
v-model="form.disclaimer"
:label="$t('views.applicationOverview.appInfo.SettingDisplayDialog.disclaimer')"
@change="changeDisclaimer"
/>
<span v-if="form.disclaimer"
><el-tooltip :content="form.disclaimer_value" placement="top">
<el-input
v-model="form.disclaimer_value"
style="width: 422px; margin-bottom: 10px"
@change="changeValue"
:maxlength="128"
/> </el-tooltip
></span>
</el-space>
</el-form>
</div>
<template #footer>
<span class="dialog-footer">

View File

@ -1,7 +1,7 @@
<template>
<div class="flex-center mb-16">
<img src="@/assets/logo_dingtalk.svg" alt="" width="24px" class="mr-4" />
<h2>钉钉扫码登录</h2>
<h2>{{ $t('views.system.authentication.scanTheQRCode.dingtalkQrCode') }}</h2>
</div>
<div class="ding-talk-qrName">
<div id="ding-talk-qr"></div>
@ -14,6 +14,7 @@ import { useScriptTag } from '@vueuse/core'
import { ref, watch } from 'vue'
import useStore from '@/stores'
import { MsgError } from '@/utils/message'
import { t } from '@/locales'
// DTFrameLogin QRLogin
declare global {

View File

@ -1,7 +1,7 @@
<template>
<div class="flex-center mb-16">
<img src="@/assets/logo_lark.svg " alt="" width="24px" class="mr-4" />
<h2>飞书扫码登录</h2>
<h2>{{ $t('views.system.authentication.scanTheQRCode.larkQrCode') }}</h2>
</div>
<div id="lark-qr" class="lark-qrName"></div>
</template>

View File

@ -5,7 +5,12 @@
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import * as ww from '@wecom/jssdk'
import { WWLoginPanelSizeType, WWLoginRedirectType, WWLoginType } from '@wecom/jssdk'
import {
WWLoginLangType,
WWLoginPanelSizeType,
WWLoginRedirectType,
WWLoginType
} from '@wecom/jssdk'
import { ref, nextTick, defineProps } from 'vue'
import { MsgError } from '@/utils/message'
import useStore from '@/stores'
@ -31,6 +36,7 @@ const init = async () => {
corpId: props.config.corp_id,
agentId: props.config.agent_id
}
const lang = localStorage.getItem('MaxKB-locale') || 'zh-CN'
const redirectUri = window.location.origin
try {
wwLogin.value = ww.createWWLoginPanel({
@ -41,6 +47,7 @@ const init = async () => {
agentid: data.agentId,
redirect_uri: redirectUri,
state: 'fit2cloud-wecom-qr',
lang: lang === 'zh-CN' || lang === 'zh-Hant' ? WWLoginLangType.zh : WWLoginLangType.en,
redirect_type: WWLoginRedirectType.callback,
panel_size: WWLoginPanelSizeType.small
},

View File

@ -249,7 +249,12 @@ onMounted(() => {
QrList.value.forEach((item) => {
orgOptions.value.push({
key: item,
value: item === 'wecom' ? '企业微信' : item === 'dingtalk' ? '钉钉' : '飞书'
value:
item === 'wecom'
? t('views.system.authentication.scanTheQRCode.wecom')
: item === 'dingtalk'
? t('views.system.authentication.scanTheQRCode.dingtalk')
: t('views.system.authentication.scanTheQRCode.lark')
})
})
}

View File

@ -202,31 +202,31 @@
v-model="themeForm.showUserManual"
:label="$t('views.system.theme.showUserManual')"
/>
<div class="ml-16">
<div class="ml-24">
<el-input
v-model="themeForm.userManualUrl"
:placeholder="$t('views.system.theme.urlPlaceholder')"
/>
</div>
</div>
<div class="my-2">
<div class="mt-4">
<el-checkbox
v-model="themeForm.showForum"
:label="$t('views.system.theme.showForum')"
/>
<div class="ml-16">
<div class="ml-24">
<el-input
v-model="themeForm.forumUrl"
:placeholder="$t('views.system.theme.urlPlaceholder')"
/>
</div>
</div>
<div class="mt-2">
<div class="mt-4">
<el-checkbox
v-model="themeForm.showProject"
:label="$t('views.system.theme.showProject')"
/>
<div class="ml-16">
<div class="ml-24">
<el-input
v-model="themeForm.projectUrl"
:placeholder="$t('views.system.theme.urlPlaceholder')"