From a242242d4980edfd5c58805344ab8a557a51957e Mon Sep 17 00:00:00 2001 From: wangdan-fit2cloud Date: Thu, 17 Oct 2024 16:18:32 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E5=AF=86=E7=A0=81=E9=AA=8C=E8=AF=81?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/api/application.ts | 11 ++- ui/src/stores/modules/application.ts | 5 +- ui/src/views/chat/embed/index.vue | 86 +++++++++++------- ui/src/views/chat/pc/index.vue | 91 +++++++++++-------- .../team/component/PermissionSetting.vue | 4 +- ui/src/views/template/index.vue | 2 +- 6 files changed, 116 insertions(+), 83 deletions(-) diff --git a/ui/src/api/application.ts b/ui/src/api/application.ts index c32f232df..290e5d359 100644 --- a/ui/src/api/application.ts +++ b/ui/src/api/application.ts @@ -390,11 +390,12 @@ const updatePlatformStatus: (application_id: string, data: any) => Promise Promise> = ( - application_id, - password -) => { - return get(`/application/${application_id}/auth/${password}`, undefined) +const validatePassword: ( + application_id: string, + password: string, + loading?: Ref +) => Promise> = (application_id, password, loading) => { + return get(`/application/${application_id}/auth/${password}`, undefined, loading) } export default { diff --git a/ui/src/stores/modules/application.ts b/ui/src/stores/modules/application.ts index 742374d81..5c04650ec 100644 --- a/ui/src/stores/modules/application.ts +++ b/ui/src/stores/modules/application.ts @@ -1,10 +1,9 @@ import { defineStore } from 'pinia' import applicationApi from '@/api/application' import applicationXpackApi from '@/api/application-xpack' -import { type Ref, type UnwrapRef } from 'vue' +import { type Ref } from 'vue' import useUserStore from './user' -import type { ApplicationFormType } from '@/api/type/application' const useApplicationStore = defineStore({ id: 'application', @@ -123,7 +122,7 @@ const useApplicationStore = defineStore({ async validatePassword(id: string, password: string, loading?: Ref) { return new Promise((resolve, reject) => { applicationApi - .validatePassword(id, password) + .validatePassword(id, password, loading) .then((data) => { resolve(data) }) diff --git a/ui/src/views/chat/embed/index.vue b/ui/src/views/chat/embed/index.vue index 527205b10..5a6353ee3 100644 --- a/ui/src/views/chat/embed/index.vue +++ b/ui/src/views/chat/embed/index.vue @@ -2,9 +2,8 @@
- - {{ passwordError }} - 确定 + + + + + 确定 + -
@@ -131,6 +128,7 @@ import { ref, onMounted, reactive, nextTick, computed } from 'vue' import { useRoute } from 'vue-router' import { isAppIcon } from '@/utils/application' +import type { FormInstance, FormRules } from 'element-plus' import useStore from '@/stores' const route = useRoute() const { @@ -150,11 +148,47 @@ const applicationDetail = ref({}) const applicationAvailable = ref(true) const chatLogeData = ref([]) const show = ref(false) + +const FormRef = ref() + const isPasswordDialogVisible = ref(false) -const password = ref('') -const passwordError = ref('') +const validateLoading = ref(false) + +const form = ref({ + password: '' +}) + const isAuthenticated = ref(false) +const validateName = (rule: any, value: string, callback: any) => { + if (value === '') { + callback(new Error('密码不能为空')) + } else { + application + .validatePassword(applicationDetail?.value.id, form.value.password, validateLoading) + .then((res: any) => { + if (res?.data.is_valid) { + callback() + } else { + callback(new Error('密码错误')) + } + }) + } +} +const rules = reactive({ + password: [{ required: true, validator: validateName, trigger: 'blur' }] +}) + +const submitHandle = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid) => { + if (valid) { + isAuthenticated.value = true + isPasswordDialogVisible.value = false + } + }) +} + const paginationConfig = reactive({ current_page: 1, page_size: 20, @@ -204,20 +238,6 @@ function newChat() { currentRecordList.value = [] currentChatId.value = 'new' } -function validatePassword() { - if (!password.value) { - passwordError.value = '密码不能为空' - return // 终止后续执行 - } - application.validatePassword(applicationDetail?.value.id, password.value).then((res: any) => { - if (res?.data.is_valid) { - isAuthenticated.value = true - isPasswordDialogVisible.value = false - } else { - passwordError.value = '密码错误' - } - }) -} function getAccessToken(token: string) { application diff --git a/ui/src/views/chat/pc/index.vue b/ui/src/views/chat/pc/index.vue index 9ba66d76d..a45b3ffcf 100644 --- a/ui/src/views/chat/pc/index.vue +++ b/ui/src/views/chat/pc/index.vue @@ -2,9 +2,8 @@
- - {{ passwordError }} - 确定 + + + + + 确定 +
@@ -160,8 +158,6 @@ import useStore from '@/stores' import useResize from '@/layout/hooks/useResize' import type { FormInstance, FormRules } from 'element-plus' import { t } from '@/locales' -import authApi from '@/api/auth-setting' -import { MsgSuccess } from '@/utils/message' useResize() const route = useRoute() @@ -176,12 +172,48 @@ const isDefaultTheme = computed(() => { return user.isDefaultTheme() }) +const FormRef = ref() + const isCollapse = ref(false) const isPasswordDialogVisible = ref(false) -const password = ref('') -const passwordError = ref('') +const validateLoading = ref(false) + +const form = ref({ + password: '' +}) + const isAuthenticated = ref(false) +const validateName = (rule: any, value: string, callback: any) => { + if (value === '') { + callback(new Error('密码不能为空')) + } else { + application + .validatePassword(applicationDetail?.value.id, form.value.password, validateLoading) + .then((res: any) => { + if (res?.data.is_valid) { + callback() + } else { + callback(new Error('密码错误')) + } + }) + } +} +const rules = reactive({ + password: [{ required: true, validator: validateName, trigger: 'blur' }] +}) + + +const submitHandle = async (formEl: FormInstance | undefined) => { + if (!formEl) return + await formEl.validate((valid) => { + if (valid) { + isAuthenticated.value = true + isPasswordDialogVisible.value = false + } + }) +} + const classObj = computed(() => { return { mobile: common.isMobile(), @@ -376,21 +408,6 @@ async function exportHTML(): Promise { saveAs(blob, suggestedName) } -function validatePassword() { - if (!password.value) { - passwordError.value = '密码不能为空' - return // 终止后续执行 - } - application.validatePassword(applicationDetail?.value.id, password.value).then((res: any) => { - if (res?.data.is_valid) { - isAuthenticated.value = true - isPasswordDialogVisible.value = false - } else { - passwordError.value = '密码错误' - } - }) -} - onMounted(() => { user.changeUserType(2) getAccessToken(accessToken) @@ -510,8 +527,4 @@ onMounted(() => { } } } -.input-error { - color: red; - display: block; -} diff --git a/ui/src/views/team/component/PermissionSetting.vue b/ui/src/views/team/component/PermissionSetting.vue index 668adabc6..8c72f371c 100644 --- a/ui/src/views/team/component/PermissionSetting.vue +++ b/ui/src/views/team/component/PermissionSetting.vue @@ -45,12 +45,12 @@ /> - + diff --git a/ui/src/views/template/index.vue b/ui/src/views/template/index.vue index ddf75d511..f6f884d16 100644 --- a/ui/src/views/template/index.vue +++ b/ui/src/views/template/index.vue @@ -320,7 +320,7 @@ onMounted(() => { border-bottom: none !important; :deep(.el-collapse-item__header) { border-bottom: none !important; - padding: 10px 0 10px 16px; + padding-left: 16px; font-size: 14px; &:hover { background: var(--app-text-color-light-1);