feat: enhance dialog styles and structure in ChatHistory and TaskOperationDialog components
This commit is contained in:
duanshuwen
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user