feat: enhance dialog styles and structure in ChatHistory and TaskOperationDialog components

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>
+