Skip to content

F
frontend-yd-email
Commit 2f5bf954 by Sweet Zhang
Options

增加路由

parent fa6e5b55
Showing with 99 additions and 186 deletions
src/App.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<!-- 主应用布局 --> <!-- 主应用布局 -->
<div v-else class="flex flex-1 overflow-hidden"> <div v-else class="flex flex-1 overflow-hidden">
<!-- 侧边导航 --> <!-- 侧边导航 -->
<Sidebar :current-page="currentPage" @change-page="handlePageChange" @logout="handleLogout" /> <Sidebar :current-page="currentPage" @logout="handleLogout" />
<!-- 移动端菜单按钮 --> <!-- 移动端菜单按钮 -->
<button <button
...@@ -20,7 +20,6 @@ ...@@ -20,7 +20,6 @@
<MobileSidebar <MobileSidebar
v-if="showMobileMenu" v-if="showMobileMenu"
:current-page="currentPage" :current-page="currentPage"
@change-page="handleMobilePageChange"
@close-menu="showMobileMenu = false" @close-menu="showMobileMenu = false"
@logout="handleLogout" @logout="handleLogout"
/> />
...@@ -33,44 +32,18 @@ ...@@ -33,44 +32,18 @@
</h2> </h2>
</header> </header>
<!-- 写邮件页面 --> <!-- 使用router-view显示当前路由组件 -->
<ComposeEmail <router-view
v-if="currentPage === 'compose'"
:senders="senders" :senders="senders"
:contacts="contacts" :contacts="contacts"
:variables="variables" :variables="variables"
:variable-templates="variableTemplates" :variable-templates="variableTemplates"
:emails="emails" :emails="emails"
@save-email="saveEmail" @save-email="saveEmail"
/>
<!-- 联系人管理页面 -->
<ContactManagement
v-if="currentPage === 'contacts'"
:contacts="contacts"
@update-contacts="updateContacts" @update-contacts="updateContacts"
/>
<!-- 发件人管理页面 -->
<SenderManagement
v-if="currentPage === 'senders'"
:senders="senders"
@update-senders="updateSenders" @update-senders="updateSenders"
/>
<!-- 变量管理页面 -->
<VariableManagement
v-if="currentPage === 'variables'"
:variables="variables"
:variable-templates="variableTemplates"
@update-variables="updateVariables" @update-variables="updateVariables"
@update-variable-templates="updateVariableTemplates" @update-variable-templates="updateVariableTemplates"
/>
<!-- 邮件管理页面 -->
<EmailManagement
v-if="currentPage === 'emails'"
:emails="emails"
@reuse-email="reuseEmail" @reuse-email="reuseEmail"
/> />
</main> </main>
...@@ -79,31 +52,40 @@ ...@@ -79,31 +52,40 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue' import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import LoginPage from './views/LoginPage.vue' import LoginPage from './views/LoginPage.vue'
import Sidebar from './views/Sidebar.vue' import Sidebar from './views/Sidebar.vue'
import MobileSidebar from './views/MobileSidebar.vue' import MobileSidebar from './views/MobileSidebar.vue'
import ComposeEmail from './views/ComposeEmail.vue'
import ContactManagement from './views/ContactManagement.vue'
import SenderManagement from './views/SenderManagement.vue'
import VariableManagement from './views/VariableManagement.vue'
import EmailManagement from './views/EmailManagement.vue'
import type { Contact, Sender, Variable, VariableTemplate, Email } from './types' import type { Contact, Sender, Variable, VariableTemplate, Email } from './types'
const route = useRoute()
const router = useRouter()
// 状态管理 // 状态管理
const isLoginPage = ref(true) const isLoginPage = ref(true)
const isAuthenticated = ref(false) const isAuthenticated = ref(false)
const currentPage = ref<'compose' | 'contacts' | 'senders' | 'variables' | 'emails'>('compose') const currentPage = ref('compose')
const showMobileMenu = ref(false) const showMobileMenu = ref(false)
// 数据存储 // 监听路由变化，更新当前页面状态
watch(
() => route.name,
(newRouteName) => {
if (newRouteName) {
currentPage.value = newRouteName.toString()
}
},
)
// 数据存储（保持不变）
const contacts = ref<Contact[]>([]) const contacts = ref<Contact[]>([])
const senders = ref<Sender[]>([]) const senders = ref<Sender[]>([])
const variables = ref<Variable[]>([]) const variables = ref<Variable[]>([])
const variableTemplates = ref<VariableTemplate[]>([]) const variableTemplates = ref<VariableTemplate[]>([])
const emails = ref<Email[]>([]) const emails = ref<Email[]>([])
// 页面标题映射 // 页面标题映射（保持不变）
const pageTitles = { const pageTitles = {
compose: '写邮件', compose: '写邮件',
contacts: '联系人管理', contacts: '联系人管理',
...@@ -112,18 +94,18 @@ const pageTitles = { ...@@ -112,18 +94,18 @@ const pageTitles = {
emails: '邮件记录', emails: '邮件记录',
} }
// 方法 // 方法（移除页面切换相关方法）
const handleLogin = () => { const handleLogin = () => {
// 模拟登录验证
isAuthenticated.value = true isAuthenticated.value = true
isLoginPage.value = false isLoginPage.value = false
// 登录成功后加载初始数据
loadInitialData() loadInitialData()
router.push('/compose') // 登录后跳转到写邮件页面
} }
const handleLogout = () => { const handleLogout = () => {
isAuthenticated.value = false isAuthenticated.value = false
isLoginPage.value = true isLoginPage.value = true
router.push('/login') // 退出后跳转到登录页面
} }
const handlePageChange = (page: string) => { const handlePageChange = (page: string) => {
...@@ -167,72 +149,16 @@ const loadInitialData = () => { ...@@ -167,72 +149,16 @@ const loadInitialData = () => {
contacts.value = [] contacts.value = []
// 发件人 // 发件人
senders.value = [ senders.value = []
{
id: '1',
email: 'service@mycompany.com',
password: '******',
smtpServer: 'smtp.mycompany.com',
smtpPort: '587',
},
]
// 变量 // 变量
variables.value = [ variables.value = []
{
id: '1',
name: '用户名',
key: 'username',
description: '接收者的用户名',
},
{
id: '2',
name: '订单号',
key: 'order_no',
description: '订单编号',
},
{
id: '3',
name: '金额',
key: 'amount',
description: '订单金额',
},
]
// 变量模板 // 变量模板
variableTemplates.value = [ variableTemplates.value = []
{
id: '1',
name: '订单通知',
description: '订单相关通知邮件模板',
variableIds: ['1', '2', '3'],
},
]
// 邮件记录 // 邮件记录
emails.value = [ emails.value = []
{
id: '1',
sender: 'service@mycompany.com',
to: 'zhangsan@example.com',
cc: 'zhangsan_cc@example.com',
subject: '关于您的订单',
content: '尊敬的{{username}}，您的订单{{order_no}}已发货，金额为{{amount}}元。',
sendTime: new Date().toISOString(),
status: 'sent',
attachments: [{ name: '订单详情.pdf' }],
},
{
id: '2',
sender: 'service@mycompany.com',
to: 'lisi@example.com',
cc: '',
subject: '市场活动邀请',
content: '尊敬的{{username}}，诚邀您参加我们的市场活动。',
sendTime: new Date(Date.now() + 86400000).toISOString(),
status: 'scheduled',
},
]
} }
// 初始化 // 初始化
......
src/index.css
/* 导入Font Awesome */
/* @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); */
/* 导入Tailwind CSS */ /* 导入Tailwind CSS */
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
......
src/main.ts
...@@ -2,6 +2,7 @@ import { createApp } from 'vue' ...@@ -2,6 +2,7 @@ import { createApp } from 'vue'
import { createPinia } from 'pinia' import { createPinia } from 'pinia'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import '@fortawesome/fontawesome-free/css/all.min.css'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
......
src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import App from '../App.vue'
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
routes: [], routes: [
{
path: '/',
redirect: '/compose',
},
{
path: '/compose',
name: 'compose',
component: () => import('../views/ComposeEmail.vue'),
},
{
path: '/contacts',
name: 'contacts',
component: () => import('../views/ContactManagement.vue'),
},
{
path: '/senders',
name: 'senders',
component: () => import('../views/SenderManagement.vue'),
},
{
path: '/variables',
name: 'variables',
component: () => import('../views/VariableManagement.vue'),
},
{
path: '/emails',
name: 'emails',
component: () => import('../views/EmailManagement.vue'),
},
{
path: '/login',
name: 'login',
component: () => import('../views/LoginPage.vue'),
},
],
}) })
export default router export default router
src/views/MobileSidebar.vue
...@@ -10,50 +10,16 @@ ...@@ -10,50 +10,16 @@
<nav> <nav>
<ul> <ul>
<li class="mb-2"> <li class="mb-2">
<button <router-link
@click="$emit('change-page', 'compose')" to="/compose"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center" class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
:class="currentPage === 'compose' ? 'bg-blue-500' : ''" :class="{ 'bg-blue-500': currentPage === 'compose' }"
@click="$emit('close-menu')"
> >
<i class="fas fa-pen mr-2"></i>写邮件 <i class="fas fa-pen mr-2"></i>写邮件
</button> </router-link>
</li>
<li class="mb-2">
<button
@click="$emit('change-page', 'contacts')"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center"
:class="currentPage === 'contacts' ? 'bg-blue-500' : ''"
>
<i class="fas fa-address-book mr-2"></i>联系人管理
</button>
</li>
<li class="mb-2">
<button
@click="$emit('change-page', 'senders')"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center"
:class="currentPage === 'senders' ? 'bg-blue-500' : ''"
>
<i class="fas fa-user-circle mr-2"></i>发件人管理
</button>
</li>
<li class="mb-2">
<button
@click="$emit('change-page', 'variables')"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center"
:class="currentPage === 'variables' ? 'bg-blue-500' : ''"
>
<i class="fas fa-variable mr-2"></i>变量管理
</button>
</li>
<li class="mb-2">
<button
@click="$emit('change-page', 'emails')"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center"
:class="currentPage === 'emails' ? 'bg-blue-500' : ''"
>
<i class="fas fa-history mr-2"></i>邮件记录
</button>
</li> </li>
<!-- 其他路由链接类似修改 -->
</ul> </ul>
</nav> </nav>
<div class="absolute bottom-4 left-0 right-0 px-4"> <div class="absolute bottom-4 left-0 right-0 px-4">
...@@ -67,16 +33,3 @@ ...@@ -67,16 +33,3 @@
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
currentPage: {
type: String,
required: true,
},
})
const emits = defineEmits(['change-page', 'close-menu', 'logout'])
</script>
src/views/Sidebar.vue
...@@ -8,49 +8,49 @@ ...@@ -8,49 +8,49 @@
<nav class="p-4"> <nav class="p-4">
<ul> <ul>
<li class="mb-2"> <li class="mb-2">
<button <router-link
@click="$emit('change-page', 'compose')" to="/compose"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center" class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
:class="currentPage === 'compose' ? 'bg-blue-500' : ''" :class="{ 'bg-blue-500': currentPage === 'compose' }"
> >
<i class="fas fa-pen mr-2"></i>写邮件 <i class="fas fa-pen mr-2"></i>写邮件
</button> </router-link>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<button <router-link
@click="$emit('change-page', 'contacts')" to="/contacts"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center" class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
:class="currentPage === 'contacts' ? 'bg-blue-500' : ''" :class="{ 'bg-blue-500': currentPage === 'contacts' }"
> >
<i class="fas fa-address-book mr-2"></i>联系人管理 <i class="fas fa-address-book mr-2"></i>联系人管理
</button> </router-link>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<button <router-link
@click="$emit('change-page', 'senders')" to="/senders"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center" class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
:class="currentPage === 'senders' ? 'bg-blue-500' : ''" :class="{ 'bg-blue-500': currentPage === 'senders' }"
> >
<i class="fas fa-user-circle mr-2"></i>发件人管理 <i class="fas fa-user-circle mr-2"></i>发件人管理
</button> </router-link>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<button <router-link
@click="$emit('change-page', 'variables')" to="/variables"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center" class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
:class="currentPage === 'variables' ? 'bg-blue-500' : ''" :class="{ 'bg-blue-500': currentPage === 'variables' }"
> >
<i class="fas fa-variable mr-2"></i>变量管理 <i class="fas fa-variable mr-2"></i>变量管理
</button> </router-link>
</li> </li>
<li class="mb-2"> <li class="mb-2">
<button <router-link
@click="$emit('change-page', 'emails')" to="/emails"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center" class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
:class="currentPage === 'emails' ? 'bg-blue-500' : ''" :class="{ 'bg-blue-500': currentPage === 'emails' }"
> >
<i class="fas fa-history mr-2"></i>邮件记录 <i class="fas fa-history mr-2"></i>邮件记录
</button> </router-link>
</li> </li>
</ul> </ul>
</nav> </nav>
...@@ -75,5 +75,5 @@ const props = defineProps({ ...@@ -75,5 +75,5 @@ const props = defineProps({
}, },
}) })
const emits = defineEmits(['change-page', 'logout']) const emits = defineEmits(['logout'])
</script> </script>
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