Skip to content

F
frontend-yd-email
Commit dfe752b2 by kyle
Options

样式修改

parent 1e271c18
Showing with 33 additions and 20 deletions
src/views/ComposeEmail.vue
<template>
<div class="bg-white rounded-lg shadow-md p-6" v-loading="loading">
<!-- 发件人和变量模板区域保持不变 -->
<div class="flex gap-4 mb-4">
<div class="flex-1">
<label class="block text-gray-700 mb-2 font-medium">发件人</label>
......@@ -26,7 +27,7 @@
</div>
<div class="flex-1">
<label class="block text-gray-700 mb-2 font-medium">变量模板</label>
<div class="flex flex-col sm:flex-row gap-2">
<div class="flex gap-2">
<el-select
v-model="selectedVariableTemplate"
value-key="variableGroupBizId"
......@@ -48,10 +49,9 @@
:label="template.groupName"
/>
</el-select>
<!-- 当选择模版有值时，显示导入数据按钮 -->
<button
@click="((showImportContacts = true), (importSource = 1))"
class="bg-blue-50 hover:bg-blue-100 text-blue-600 px-4 py-2 rounded-md border border-blue-200 transition-colors flex-none items-center"
class="bg-blue-50 hover:bg-blue-100 text-blue-600 px-4 py-2 rounded-md border border-blue-200 transition-colors flex-none items-center whitespace-nowrap"
v-if="selectedVariableTemplate"
>
<i class="fas fa-address-book mr-1"></i> 导入数据
......@@ -59,10 +59,11 @@
</div>
</div>
</div>
<!-- 收件人区域 -->
<div class="mb-4">
<label class="block text-gray-700 mb-2 font-medium">收件人</label>
<div class="flex flex-col sm:flex-row gap-2">
<!-- 多个邮箱用tag的样式展示 -->
<div class="flex gap-2">
<div
v-if="emailForm.receiveEmail"
class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
......@@ -77,20 +78,19 @@
</div>
<div
v-else
class="flex-1 px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
class="flex-1 px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-500"
>
暂无收件人
</div>
<!-- 当选择模版有值时，不显示选择联系人按钮 -->
<button
@click="((showContactSelector = true), (importSource = 0))"
class="bg-blue-50 hover:bg-blue-100 text-blue-600 px-4 py-2 rounded-md border border-blue-200 transition-colors flex items-center"
class="bg-blue-50 hover:bg-blue-100 text-blue-600 px-4 py-2 rounded-md border border-blue-200 transition-colors flex items-center whitespace-nowrap"
>
<i class="fas fa-address-book mr-1"></i> 选择联系人
</button>
<button
@click="showImportRecordManager = true"
class="bg-green-50 hover:bg-green-100 text-green-600 px-4 py-2 rounded-md border border-green-200 transition-colors flex items-center"
class="bg-green-50 hover:bg-green-100 text-green-600 px-4 py-2 rounded-md border border-green-200 transition-colors flex items-center whitespace-nowrap"
v-if="importRecords.length > 0"
>
<i class="fas fa-cog mr-1"></i> 编辑数据
......@@ -98,6 +98,7 @@
</div>
</div>
<!-- 抄送人区域 -->
<div class="mb-4">
<label class="block text-gray-700 mb-2 font-medium">抄送人</label>
<div
......@@ -131,6 +132,7 @@
</div>
</div>
<!-- 主题区域 -->
<div class="mb-4">
<label class="block text-gray-700 mb-2 font-medium">主题</label>
<input
......@@ -140,6 +142,8 @@
placeholder="邮件主题"
/>
</div>
<!-- 正文区域 - 扩大 -->
<div class="mb-4">
<label class="block text-gray-700 mb-2 font-medium">正文</label>
<div class="border border-gray-300 rounded-md overflow-hidden">
......@@ -151,13 +155,19 @@
<i class="fas fa-plus"></i> 插入字段
</button>
</div>
<!-- 设置正文最小高度为 300px -->
<div class="min-h-[300px]">
<RichTextEditor v-model="emailForm.content" />
</div>
</div>
</div>
<div class="mb-4">
<!-- 附件和签名放在同一行，各占一半，都缩小 -->
<div class="flex gap-4 mb-4">
<!-- 附件区域 - 缩小 -->
<div class="flex-1">
<label class="block text-gray-700 mb-2 font-medium">附件</label>
<div class="mb-10 p-6 bg-white rounded-lg shadow-md">
<div class="bg-white rounded-lg border border-gray-200 p-3">
<FileUploadComponent
v-model="uploadedFiles"
:config="uploadConfig"
......@@ -165,13 +175,17 @@
/>
</div>
</div>
<div class="mb-4">
<!-- 签名区域 - 缩小 -->
<div class="flex-1">
<label class="block text-gray-700 mb-2 font-medium">签名</label>
<div class="mb-10 p-6 bg-white rounded-lg shadow-md">
<div class="bg-white rounded-lg border border-gray-200 p-3">
<RichTextEditor v-model="emailForm.customContent" />
</div>
</div>
</div>
<!-- 发送设置 -->
<div class="mb-4">
<label class="block text-gray-700 mb-2 font-medium">发送设置</label>
<div class="flex items-center">
......@@ -188,6 +202,7 @@
</div>
</div>
<!-- 按钮区域 -->
<div class="flex justify-end gap-3 mt-6">
<button
@click="sendSelfEmail"
......@@ -202,7 +217,8 @@
发送
</button>
</div>
<!-- 编辑数据管理弹窗 -->
<!-- 弹窗组件保持不变 -->
<ImportRecordManager
v-if="showImportRecordManager"
:records="importRecords"
......@@ -211,7 +227,6 @@
@close="showImportRecordManager = false"
/>
<!-- 导入数据弹窗 -->
<ImportDialog
v-model:visible="showImportContacts"
title="导入数据"
......@@ -221,7 +236,7 @@
@close="showImportContacts = false"
@cancel="showImportContacts = false"
/>
<!-- 联系人选择弹窗 -->
<ContactSelector
v-if="showContactSelector"
:contacts="contacts"
......@@ -231,20 +246,18 @@
@cancel="showContactSelector = false"
/>
<!-- 变量选择弹窗 -->
<VariableSelector
v-if="showVariableSelector"
:variables="variables"
@insert-variable="insertVariable"
@close="showVariableSelector = false"
/>
<!-- 发送邮件弹窗 -->
<el-dialog v-model="dialogVisible" title="提示" width="500" :z-index="99999">
<span>邮件发送任务已提交，请前往邮件记录中查看发送状态</span>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">暂不前往</el-button>
<!-- 路由导航到邮件记录 -->
<el-button type="primary" @click="navigateToEmailRecords"> 前往邮件记录 </el-button>
</div>
</template>
......
src/views/VariableSelector.vue
<template>
<div class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
<div style="z-index:99999" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl w-full max-w-md max-h-[80vh] flex flex-col">
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-lg font-semibold">插入变量</h3>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment