From 0191969a1b0f0afbd019b11fff817b2d18f67c55 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Wed, 15 Apr 2026 22:36:25 +0800
Subject: [PATCH] feat: enhance dialog styles and structure in ChatHistory and
 TaskOperationDialog components

---
 src/pages/home/ChatHistory.vue                | 126 +++++++++++++++++-
 .../home/components/TaskOperationDialog.vue   | 108 ++++++++++++++-
 2 files changed, 227 insertions(+), 7 deletions(-)

diff --git a/src/pages/home/ChatHistory.vue b/src/pages/home/ChatHistory.vue
index bce7de6..57a9fa7 100644
--- a/src/pages/home/ChatHistory.vue
+++ b/src/pages/home/ChatHistory.vue
@@ -59,11 +59,11 @@
 	</aside>
 
 	<!-- 重命名对话框 -->
-	<el-dialog v-model="renameDialogFormVisible" title="重命名对话" width="500">
+	<el-dialog v-model="renameDialogFormVisible" title="重命名对话" width="500" class="custom-history-dialog">
 		<template #title>
 			<span>温馨提示</span>
 		</template>
-		<el-form class="pt-5 pl-5 pr-5" :model="newMessageName">
+		<el-form class="pt-5 pl-5 pr-5 rename-form" :model="newMessageName">
 			<el-form-item>
 				<template #label>
 					<span>对话名称</span>
@@ -73,21 +73,21 @@
 		</el-form>
 		<template #footer>
 			<div class="dialog-footer">
-				<el-button @click="renameDialogFormVisible = false">取消</el-button>
+				<el-button class="cancel-btn" @click="renameDialogFormVisible = false">取消</el-button>
 				<el-button type="primary" @click="submitNameChange">确定</el-button>
 			</div>
 		</template>
 	</el-dialog>
 
 	<!-- 删除确认对话框 -->
-	<el-dialog v-model="deleteDialogVisible" width="500">
+	<el-dialog v-model="deleteDialogVisible" width="500" class="custom-history-dialog">
 		<template #title>
 			<span>温馨提示</span>
 		</template>
-		<div class="pt-3 pl-5">您确定删除该会话吗？删除后将无法恢复！</div>
+		<div class="pt-3 pl-5 pr-5 delete-content">您确定删除该会话吗？删除后将无法恢复！</div>
 		<template #footer>
 			<div class="dialog-footer">
-				<el-button @click="deleteDialogVisible = false">取消</el-button>
+				<el-button class="cancel-btn" @click="deleteDialogVisible = false">取消</el-button>
 				<el-button type="primary" @click="submitDelete">确定</el-button>
 			</div>
 		</template>
@@ -218,3 +218,117 @@ onBeforeUnmount(() => {
 	if (timer) clearInterval(timer)
 })
 </script>
+
+<style scoped>
+.custom-history-dialog {
+	background-color: #F4F3EB !important;
+	border-radius: 20px !important;
+	overflow: hidden;
+	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
+}
+
+.dark .custom-history-dialog {
+	background-color: #1f1f22 !important;
+}
+
+.custom-history-dialog :deep(.el-dialog__header) {
+	margin-right: 0;
+	padding: 20px 24px 16px;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.dark .custom-history-dialog :deep(.el-dialog__header) {
+	border-bottom-color: rgba(255, 255, 255, 0.06);
+}
+
+.custom-history-dialog :deep(.el-dialog__title) {
+	font-size: 18px;
+	font-weight: 600;
+	color: #171717;
+}
+
+.dark .custom-history-dialog :deep(.el-dialog__title) {
+	color: #f3f4f6;
+}
+
+.custom-history-dialog :deep(.el-dialog__body) {
+	padding: 0 !important;
+}
+
+.rename-form :deep(.el-form-item__label) {
+	font-weight: 500;
+	color: #4B4B4B !important;
+}
+
+.dark .rename-form :deep(.el-form-item__label) {
+	color: #9ca3af !important;
+}
+
+.custom-history-dialog :deep(.el-input__wrapper) {
+	background-color: #EDECE4 !important;
+	border-radius: 12px !important;
+	box-shadow: none !important;
+	border: 1px solid transparent !important;
+}
+
+.dark .custom-history-dialog :deep(.el-input__wrapper) {
+	background-color: #222225 !important;
+}
+
+.custom-history-dialog :deep(.el-input__wrapper.is-focus) {
+	border-color: #3B6DE8 !important;
+}
+
+.custom-history-dialog :deep(.el-input__inner) {
+	color: #171717 !important;
+}
+
+.dark .custom-history-dialog :deep(.el-input__inner) {
+	color: #f3f4f6 !important;
+}
+
+.custom-history-dialog :deep(.el-input__inner::placeholder) {
+	color: #99A0AE !important;
+}
+
+.dark .custom-history-dialog :deep(.el-input__inner::placeholder) {
+	color: #6b7280 !important;
+}
+
+.delete-content {
+	font-size: 15px;
+	color: #171717;
+}
+
+.dark .delete-content {
+	color: #f3f4f6;
+}
+
+.dialog-footer {
+	padding: 16px 24px 20px;
+	display: flex;
+	justify-content: flex-end;
+	gap: 12px;
+}
+
+.cancel-btn {
+	background-color: #EDECE4 !important;
+	border-color: transparent !important;
+	color: #4B4B4B !important;
+}
+
+.cancel-btn:hover {
+	background-color: #E5E4DC !important;
+	color: #171717 !important;
+}
+
+.dark .cancel-btn {
+	background-color: #222225 !important;
+	color: #9ca3af !important;
+}
+
+.dark .cancel-btn:hover {
+	background-color: #2a2a2d !important;
+	color: #f3f4f6 !important;
+}
+</style>
diff --git a/src/pages/home/components/TaskOperationDialog.vue b/src/pages/home/components/TaskOperationDialog.vue
index 13ca075..3af0794 100644
--- a/src/pages/home/components/TaskOperationDialog.vue
+++ b/src/pages/home/components/TaskOperationDialog.vue
@@ -32,7 +32,7 @@
     </el-form>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="cancel">取消</el-button>
+        <el-button class="cancel-btn" @click="cancel">取消</el-button>
         <el-button type="primary" @click="confirm">确认</el-button>
       </div>
     </template>
@@ -136,3 +136,109 @@ defineExpose({
   close,
 })
 </script>
+
+<style scoped>
+.dark-dialog {
+  background-color: #F4F3EB !important;
+  border-radius: 20px !important;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
+}
+
+.dark .dark-dialog {
+  background-color: #1f1f22 !important;
+}
+
+.dark-dialog :deep(.el-dialog__header) {
+  margin-right: 0;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.dark .dark-dialog :deep(.el-dialog__header) {
+  border-bottom-color: rgba(255, 255, 255, 0.06);
+}
+
+.dark-dialog :deep(.el-dialog__title) {
+  font-size: 18px;
+  font-weight: 600;
+  color: #171717;
+}
+
+.dark .dark-dialog :deep(.el-dialog__title) {
+  color: #f3f4f6;
+}
+
+.dark-dialog :deep(.el-dialog__body) {
+  padding: 0 !important;
+}
+
+.dark-form :deep(.el-form-item__label) {
+  font-weight: 500;
+  color: #4B4B4B !important;
+}
+
+.dark .dark-form :deep(.el-form-item__label) {
+  color: #9ca3af !important;
+}
+
+.dark-form :deep(.el-input__wrapper) {
+  background-color: #EDECE4 !important;
+  border-radius: 12px !important;
+  box-shadow: none !important;
+  border: 1px solid transparent !important;
+}
+
+.dark .dark-form :deep(.el-input__wrapper) {
+  background-color: #222225 !important;
+}
+
+.dark-form :deep(.el-input__wrapper.is-focus) {
+  border-color: #3B6DE8 !important;
+}
+
+.dark-form :deep(.el-input__inner) {
+  color: #171717 !important;
+}
+
+.dark .dark-form :deep(.el-input__inner) {
+  color: #f3f4f6 !important;
+}
+
+.dark-form :deep(.el-input__inner::placeholder) {
+  color: #99A0AE !important;
+}
+
+.dark .dark-form :deep(.el-input__inner::placeholder) {
+  color: #6b7280 !important;
+}
+
+.dialog-footer {
+  padding: 16px 24px 20px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.cancel-btn {
+  background-color: #EDECE4 !important;
+  border-color: transparent !important;
+  color: #4B4B4B !important;
+}
+
+.cancel-btn:hover {
+  background-color: #E5E4DC !important;
+  color: #171717 !important;
+}
+
+.dark .cancel-btn {
+  background-color: #222225 !important;
+  color: #9ca3af !important;
+}
+
+.dark .cancel-btn:hover {
+  background-color: #2a2a2d !important;
+  color: #f3f4f6 !important;
+}
+</style>
+