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 @@
<!-- 主应用布局 -->
<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
......@@ -20,7 +20,6 @@
<MobileSidebar
v-if="showMobileMenu"
:current-page="currentPage"
@change-page="handleMobilePageChange"
@close-menu="showMobileMenu = false"
@logout="handleLogout"
/>
......@@ -33,44 +32,18 @@
</h2>
</header>
<!-- 写邮件页面 -->
<ComposeEmail
v-if="currentPage === 'compose'"
<!-- 使用router-view显示当前路由组件 -->
<router-view
:senders="senders"
:contacts="contacts"
:variables="variables"
:variable-templates="variableTemplates"
:emails="emails"
@save-email="saveEmail"
/>
<!-- 联系人管理页面 -->
<ContactManagement
v-if="currentPage === 'contacts'"
:contacts="contacts"
@update-contacts="updateContacts"
/>
<!-- 发件人管理页面 -->
<SenderManagement
v-if="currentPage === 'senders'"
:senders="senders"
@update-senders="updateSenders"
/>
<!-- 变量管理页面 -->
<VariableManagement
v-if="currentPage === 'variables'"
:variables="variables"
:variable-templates="variableTemplates"
@update-variables="updateVariables"
@update-variable-templates="updateVariableTemplates"
/>
<!-- 邮件管理页面 -->
<EmailManagement
v-if="currentPage === 'emails'"
:emails="emails"
@reuse-email="reuseEmail"
/>
</main>
......@@ -79,31 +52,40 @@
</template>
<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 Sidebar from './views/Sidebar.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'
const route = useRoute()
const router = useRouter()
// 状态管理
const isLoginPage = ref(true)
const isAuthenticated = ref(false)
const currentPage = ref<'compose' | 'contacts' | 'senders' | 'variables' | 'emails'>('compose')
const currentPage = ref('compose')
const showMobileMenu = ref(false)
// 数据存储
// 监听路由变化，更新当前页面状态
watch(
() => route.name,
(newRouteName) => {
if (newRouteName) {
currentPage.value = newRouteName.toString()
}
},
)
// 数据存储（保持不变）
const contacts = ref<Contact[]>([])
const senders = ref<Sender[]>([])
const variables = ref<Variable[]>([])
const variableTemplates = ref<VariableTemplate[]>([])
const emails = ref<Email[]>([])
// 页面标题映射
// 页面标题映射（保持不变）
const pageTitles = {
compose: '写邮件',
contacts: '联系人管理',
......@@ -112,18 +94,18 @@ const pageTitles = {
emails: '邮件记录',
}
// 方法
// 方法（移除页面切换相关方法）
const handleLogin = () => {
// 模拟登录验证
isAuthenticated.value = true
isLoginPage.value = false
// 登录成功后加载初始数据
loadInitialData()
router.push('/compose') // 登录后跳转到写邮件页面
}
const handleLogout = () => {
isAuthenticated.value = false
isLoginPage.value = true
router.push('/login') // 退出后跳转到登录页面
}
const handlePageChange = (page: string) => {
......@@ -167,72 +149,16 @@ const loadInitialData = () => {
contacts.value = []
// 发件人
senders.value = [
{
id: '1',
email: 'service@mycompany.com',
password: '******',
smtpServer: 'smtp.mycompany.com',
smtpPort: '587',
},
]
senders.value = []
// 变量
variables.value = [
{
id: '1',
name: '用户名',
key: 'username',
description: '接收者的用户名',
},
{
id: '2',
name: '订单号',
key: 'order_no',
description: '订单编号',
},
{
id: '3',
name: '金额',
key: 'amount',
description: '订单金额',
},
]
variables.value = []
// 变量模板
variableTemplates.value = [
{
id: '1',
name: '订单通知',
description: '订单相关通知邮件模板',
variableIds: ['1', '2', '3'],
},
]
variableTemplates.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',
},
]
emails.value = []
}
// 初始化
......
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 base;
@tailwind components;
......
src/main.ts
......@@ -2,6 +2,7 @@ import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import '@fortawesome/fontawesome-free/css/all.min.css'
import App from './App.vue'
import router from './router'
......
src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import App from '../App.vue'
const router = createRouter({
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
src/views/MobileSidebar.vue
......@@ -10,50 +10,16 @@
<nav>
<ul>
<li class="mb-2">
<button
@click="$emit('change-page', 'compose')"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center"
:class="currentPage === 'compose' ? 'bg-blue-500' : ''"
<router-link
to="/compose"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
:class="{ 'bg-blue-500': currentPage === 'compose' }"
@click="$emit('close-menu')"
>
<i class="fas fa-pen mr-2"></i>写邮件
</button>
</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>
</router-link>
</li>
<!-- 其他路由链接类似修改 -->
</ul>
</nav>
<div class="absolute bottom-4 left-0 right-0 px-4">
......@@ -67,16 +33,3 @@
</div>
</div>
</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 @@
<nav class="p-4">
<ul>
<li class="mb-2">
<button
@click="$emit('change-page', 'compose')"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center"
:class="currentPage === 'compose' ? 'bg-blue-500' : ''"
<router-link
to="/compose"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
:class="{ 'bg-blue-500': currentPage === 'compose' }"
>
<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' : ''"
<router-link
to="/contacts"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
:class="{ 'bg-blue-500': currentPage === 'contacts' }"
>
<i class="fas fa-address-book mr-2"></i>联系人管理
</button>
</router-link>
</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' : ''"
<router-link
to="/senders"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
:class="{ 'bg-blue-500': currentPage === 'senders' }"
>
<i class="fas fa-user-circle mr-2"></i>发件人管理
</button>
</router-link>
</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' : ''"
<router-link
to="/variables"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
:class="{ 'bg-blue-500': currentPage === 'variables' }"
>
<i class="fas fa-variable mr-2"></i>变量管理
</button>
</router-link>
</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' : ''"
<router-link
to="/emails"
class="w-full text-left px-4 py-2 rounded hover:bg-blue-500 transition-colors flex items-center block"
:class="{ 'bg-blue-500': currentPage === 'emails' }"
>
<i class="fas fa-history mr-2"></i>邮件记录
</button>
</router-link>
</li>
</ul>
</nav>
......@@ -75,5 +75,5 @@ const props = defineProps({
},
})
const emits = defineEmits(['change-page', 'logout'])
const emits = defineEmits(['logout'])
</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