From e72750235d663b46ebeef9118a6b47b56e68ae20 Mon Sep 17 00:00:00 2001 From: yanweidong Date: Tue, 4 Aug 2026 21:50:20 +0800 Subject: [PATCH] feat(frontend): improve admin usability and light theme --- .../src/assets/style/global.less | 9 +++++ frontend/delivery_admin/src/plugins/http.ts | 28 ++++++++++--- .../src/views/dashboard/DashboardPage.vue | 38 ++++++++++++++---- .../src/views/login/components/login-form.vue | 20 ++++++---- .../src/views/shared/CrudListPage.vue | 16 ++++++++ .../gas_admin/src/assets/style/global.less | 9 +++++ frontend/gas_admin/src/plugins/http.ts | 28 ++++++++++--- .../src/views/dashboard/DashboardPage.vue | 39 ++++++++++++++----- .../src/views/login/components/login-form.vue | 20 ++++++---- .../src/views/shared/CrudListPage.vue | 16 ++++++++ .../src/assets/style/global.less | 9 +++++ frontend/platform_admin/src/plugins/http.ts | 28 ++++++++++--- .../src/views/dashboard/DashboardPage.vue | 20 ++++++++-- .../src/views/login/components/login-form.vue | 20 ++++++---- .../src/views/shared/CrudListPage.vue | 16 ++++++++ 15 files changed, 256 insertions(+), 60 deletions(-) diff --git a/frontend/delivery_admin/src/assets/style/global.less b/frontend/delivery_admin/src/assets/style/global.less index f90b206..ba4c2ab 100644 --- a/frontend/delivery_admin/src/assets/style/global.less +++ b/frontend/delivery_admin/src/assets/style/global.less @@ -14,6 +14,15 @@ body { -webkit-font-smoothing: antialiased; } +body:not([arco-theme='dark']) { + --color-text-1: #172033; + --color-text-2: #344054; + --color-text-3: #566176; + --color-text-4: #737e91; + + color: var(--color-text-1); +} + .echarts-tooltip-diy { background: linear-gradient( 304.17deg, diff --git a/frontend/delivery_admin/src/plugins/http.ts b/frontend/delivery_admin/src/plugins/http.ts index 944073e..d37d2b3 100644 --- a/frontend/delivery_admin/src/plugins/http.ts +++ b/frontend/delivery_admin/src/plugins/http.ts @@ -12,6 +12,14 @@ export interface HttpResponse { } let initialized = false; +let sessionExpiredDialogVisible = false; + +function networkErrorMessage(error: unknown) { + if (!axios.isAxiosError(error)) return '网络请求失败,请稍后重试'; + if (!error.response) return '无法连接服务器,请检查网络后重试'; + if (error.response.status === 403) return '当前账号无权执行此操作'; + return error.response.data?.msg || `请求失败(${error.response.status})`; +} export function setupHttp() { if (initialized) { @@ -47,27 +55,35 @@ export function setupHttp() { [50008, 50012, 50014].includes(res.code) && response.config.url !== '/api/user/info' ) { - Modal.error({ + if (!sessionExpiredDialogVisible) { + sessionExpiredDialogVisible = true; + Modal.error({ title: '登录已失效', - content: '当前登录状态已失效,请重新登录。', + content: '当前登录状态已失效。重新登录后将返回当前页面。', okText: '重新登录', async onOk() { const userStore = useUserStore(); + sessionStorage.setItem('auth-redirect', `${window.location.pathname}${window.location.search}`); await userStore.logout(); - window.location.reload(); + window.location.assign('/login'); }, - }); + onCancel() { + sessionExpiredDialogVisible = false; + }, + }); + } } return Promise.reject(new Error(res.msg || '请求失败')); } return res as unknown as AxiosResponse; }, (error) => { + const content = networkErrorMessage(error); Message.error({ - content: error.msg || '网络请求失败', + content, duration: 5 * 1000, }); - return Promise.reject(error); + return Promise.reject(new Error(content)); }, ); } diff --git a/frontend/delivery_admin/src/views/dashboard/DashboardPage.vue b/frontend/delivery_admin/src/views/dashboard/DashboardPage.vue index de52b4b..4a25373 100644 --- a/frontend/delivery_admin/src/views/dashboard/DashboardPage.vue +++ b/frontend/delivery_admin/src/views/dashboard/DashboardPage.vue @@ -1,8 +1,16 @@ + + 请从详情中的专用操作推进流程。操作结果以服务端状态、设备回执或审核记录为准,并会保留审计记录。 + @@ -223,6 +232,9 @@ + + 这是高风险操作,可能改变业务状态且无法直接撤销。请确认目标记录和填写内容准确。 + @@ -1122,6 +1134,10 @@ function optionLabel(option: Row) { .filters { margin-bottom: 16px; } +.workflow-alert, +.action-alert { + margin-bottom: 16px; +} .pagination { display: flex; justify-content: flex-end; diff --git a/frontend/gas_admin/src/assets/style/global.less b/frontend/gas_admin/src/assets/style/global.less index f90b206..ba4c2ab 100644 --- a/frontend/gas_admin/src/assets/style/global.less +++ b/frontend/gas_admin/src/assets/style/global.less @@ -14,6 +14,15 @@ body { -webkit-font-smoothing: antialiased; } +body:not([arco-theme='dark']) { + --color-text-1: #172033; + --color-text-2: #344054; + --color-text-3: #566176; + --color-text-4: #737e91; + + color: var(--color-text-1); +} + .echarts-tooltip-diy { background: linear-gradient( 304.17deg, diff --git a/frontend/gas_admin/src/plugins/http.ts b/frontend/gas_admin/src/plugins/http.ts index 944073e..d37d2b3 100644 --- a/frontend/gas_admin/src/plugins/http.ts +++ b/frontend/gas_admin/src/plugins/http.ts @@ -12,6 +12,14 @@ export interface HttpResponse { } let initialized = false; +let sessionExpiredDialogVisible = false; + +function networkErrorMessage(error: unknown) { + if (!axios.isAxiosError(error)) return '网络请求失败,请稍后重试'; + if (!error.response) return '无法连接服务器,请检查网络后重试'; + if (error.response.status === 403) return '当前账号无权执行此操作'; + return error.response.data?.msg || `请求失败(${error.response.status})`; +} export function setupHttp() { if (initialized) { @@ -47,27 +55,35 @@ export function setupHttp() { [50008, 50012, 50014].includes(res.code) && response.config.url !== '/api/user/info' ) { - Modal.error({ + if (!sessionExpiredDialogVisible) { + sessionExpiredDialogVisible = true; + Modal.error({ title: '登录已失效', - content: '当前登录状态已失效,请重新登录。', + content: '当前登录状态已失效。重新登录后将返回当前页面。', okText: '重新登录', async onOk() { const userStore = useUserStore(); + sessionStorage.setItem('auth-redirect', `${window.location.pathname}${window.location.search}`); await userStore.logout(); - window.location.reload(); + window.location.assign('/login'); }, - }); + onCancel() { + sessionExpiredDialogVisible = false; + }, + }); + } } return Promise.reject(new Error(res.msg || '请求失败')); } return res as unknown as AxiosResponse; }, (error) => { + const content = networkErrorMessage(error); Message.error({ - content: error.msg || '网络请求失败', + content, duration: 5 * 1000, }); - return Promise.reject(error); + return Promise.reject(new Error(content)); }, ); } diff --git a/frontend/gas_admin/src/views/dashboard/DashboardPage.vue b/frontend/gas_admin/src/views/dashboard/DashboardPage.vue index be89b95..1b3a887 100644 --- a/frontend/gas_admin/src/views/dashboard/DashboardPage.vue +++ b/frontend/gas_admin/src/views/dashboard/DashboardPage.vue @@ -1,9 +1,15 @@ + + 请从详情中的专用操作推进流程。操作结果以服务端状态、设备回执或审核记录为准,并会保留审计记录。 + @@ -223,6 +232,9 @@ + + 这是高风险操作,可能改变业务状态且无法直接撤销。请确认目标记录和填写内容准确。 + @@ -1122,6 +1134,10 @@ function optionLabel(option: Row) { .filters { margin-bottom: 16px; } +.workflow-alert, +.action-alert { + margin-bottom: 16px; +} .pagination { display: flex; justify-content: flex-end; diff --git a/frontend/platform_admin/src/assets/style/global.less b/frontend/platform_admin/src/assets/style/global.less index f90b206..ba4c2ab 100644 --- a/frontend/platform_admin/src/assets/style/global.less +++ b/frontend/platform_admin/src/assets/style/global.less @@ -14,6 +14,15 @@ body { -webkit-font-smoothing: antialiased; } +body:not([arco-theme='dark']) { + --color-text-1: #172033; + --color-text-2: #344054; + --color-text-3: #566176; + --color-text-4: #737e91; + + color: var(--color-text-1); +} + .echarts-tooltip-diy { background: linear-gradient( 304.17deg, diff --git a/frontend/platform_admin/src/plugins/http.ts b/frontend/platform_admin/src/plugins/http.ts index 944073e..d37d2b3 100644 --- a/frontend/platform_admin/src/plugins/http.ts +++ b/frontend/platform_admin/src/plugins/http.ts @@ -12,6 +12,14 @@ export interface HttpResponse { } let initialized = false; +let sessionExpiredDialogVisible = false; + +function networkErrorMessage(error: unknown) { + if (!axios.isAxiosError(error)) return '网络请求失败,请稍后重试'; + if (!error.response) return '无法连接服务器,请检查网络后重试'; + if (error.response.status === 403) return '当前账号无权执行此操作'; + return error.response.data?.msg || `请求失败(${error.response.status})`; +} export function setupHttp() { if (initialized) { @@ -47,27 +55,35 @@ export function setupHttp() { [50008, 50012, 50014].includes(res.code) && response.config.url !== '/api/user/info' ) { - Modal.error({ + if (!sessionExpiredDialogVisible) { + sessionExpiredDialogVisible = true; + Modal.error({ title: '登录已失效', - content: '当前登录状态已失效,请重新登录。', + content: '当前登录状态已失效。重新登录后将返回当前页面。', okText: '重新登录', async onOk() { const userStore = useUserStore(); + sessionStorage.setItem('auth-redirect', `${window.location.pathname}${window.location.search}`); await userStore.logout(); - window.location.reload(); + window.location.assign('/login'); }, - }); + onCancel() { + sessionExpiredDialogVisible = false; + }, + }); + } } return Promise.reject(new Error(res.msg || '请求失败')); } return res as unknown as AxiosResponse; }, (error) => { + const content = networkErrorMessage(error); Message.error({ - content: error.msg || '网络请求失败', + content, duration: 5 * 1000, }); - return Promise.reject(error); + return Promise.reject(new Error(content)); }, ); } diff --git a/frontend/platform_admin/src/views/dashboard/DashboardPage.vue b/frontend/platform_admin/src/views/dashboard/DashboardPage.vue index d7d7bcc..99b38da 100644 --- a/frontend/platform_admin/src/views/dashboard/DashboardPage.vue +++ b/frontend/platform_admin/src/views/dashboard/DashboardPage.vue @@ -1,6 +1,11 @@