添加饿了么

.env

@@ -1,32 +1,25 @@
 # 通用环境变量
-
 # 前端接口
 VITE_API_FRONT_BASE_URL =  http://localhost:18081
 #后端接口
 VITE_ADMIN_API_BASE_URL = http://localhost:18080
-
 VITE_LOGIN_BG = "/login/e36341619bf8f04dcbdc6b01105a85a.png"
 
 # 标题
 VITE_APP_TITLE = 后台
 
-
 # markdown 渲染支持
 VITE_APP_MARKDOWN = true
 
-
 # 开发时的开发面板
 VITE_APP_DEV_TOOLS = false
 
-
 # 生产时 mock 支持
 VITE_APP_MOCK_IN_PRODUCTION = false
 
-
 # 生产时压缩算法，可选 gzip, brotliCompress, deflate, deflateRaw
 VITE_APP_COMPRESSINON_ALGORITHM = gzip
 
-
 # api 自动按需引入
 # 注意设置关闭时，其他的 api 自动按需引入也将自动关闭
 VITE_APP_API_AUTO_IMPORT = true

src/components/Navigation.vue

@@ -1,32 +0,0 @@
-
-<template>
-	<nav
-		class="mx-auto h-80px max-w-3xl flex items-center justify-between p-4"
-	>
-		<ul class="flex items-center gap-2 text-sm font-medium">
-			<li v-for="r of routes" :key="r.path" class="hidden !block">
-				<RouterLink
-					class="rounded-lg px-3 py-2 hover:text-blue-700"
-					:class="$route.path === r.path ? 'text-blue-700' : ''"
-					:to="r.path"
-				>
-					{{ r.name }}
-				</RouterLink>
-			</li>
-
-		</ul>
-	</nav>
-</template>
-
-<script setup lang="ts">
-
-const routes = [
-	{
-		"path": "/",
-		"name": "首页"
-	},
-
-]
-console.log(routes)
-const $route = useRoute()
-</script>

src/components/nav/Navigation1.vue

@@ -0,0 +1,70 @@
+<!--前端样式1-->
+<template>
+	<el-row  justify="space-between">
+		<el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
+		<el-col :span="12">
+			<el-menu
+				:default-active="activeIndex"
+				mode="horizontal"
+				@select="handleSelect"
+				router
+			>
+				<el-menu-item
+					v-for="r of getFrontList()" :key="r.path"
+					:index="r.path">{{ r.name }}</el-menu-item>
+			</el-menu>
+		</el-col>
+		<el-col :span="3">
+					<el-dropdown>
+						<el-row :gutter="20">
+							<el-col :span="8">
+								<el-avatar
+									:src="userStore().adminUserInfo.avatar"
+								/>
+							</el-col>
+							<el-col :span="16">
+								<h6>{{ userStore().adminUserInfo.username }}</h6>
+							</el-col>
+						</el-row>
+						<template #dropdown>
+							<el-dropdown-menu slot="dropdown">
+								<el-dropdown-item >个人中心</el-dropdown-item>
+								<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
+							</el-dropdown-menu>
+						</template>
+					</el-dropdown>
+		</el-col>
+	</el-row>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { getFrontList } from '~/utils/utils'
+const router = useRouter();
+const activeIndex = ref('1')
+const handleSelect = (key: string, keyPath: string[]) => {
+	console.log(key, keyPath)
+}
+/**
+ * 退出登录
+ */
+const logout = () => {
+	logoutAdmin().then(()=>{
+		toast.success("退出成功~")
+		router.push('/login');
+	})
+}
+</script>
+<style scoped>
+
+:deep(.el-menu--horizontal) {
+	border-bottom: none;
+}
+h6{
+	font-weight: 700;
+	font-size: 16px;
+	padding-top: 15px;
+	letter-spacing: 0.5px;
+}
+
+</style>

src/layouts/admin.vue

@@ -0,0 +1,11 @@
+
+<!--后台模板-->
+<template>
+
+</template>
+<script setup lang="ts">
+
+</script>
+<style scoped>
+
+</style>

src/layouts/front.vue

@@ -1,14 +1,24 @@
+
+<!--前端模板-->
 <template>
-	<Navigation />
+	<div class="common-layout">
-	<div class="w-screen flex flex-col items-center justify-center">
+		<el-container>
-		<router-view v-slot="{ Component }">
+			<el-header>
-			<transition name="fade" mode="out-in">
+			<nav-navigation1></nav-navigation1>
-				<component :is="Component" />
+			</el-header>
-			</transition>
+			<el-main>
-		</router-view>
+				<router-view></router-view>
+			</el-main>
+		</el-container>
 	</div>
 </template>
 
-<style>
+
+<script setup lang="ts">
+</script>
+<style scoped>
+
+
+
 
 </style>

src/pages/index.vue

@@ -11,3 +11,10 @@ import FoundationLine from '~/components/view/foundation-line.vue'
 
 
 </script>
+<route lang="json">
+{
+"meta": {
+"layout": "front"
+}
+}
+</route>

src/pages/login.vue

@@ -4,7 +4,6 @@
 	</div>
 </template>
 <script setup lang="ts">
-import {userInfoFront } from '~/api/user/frontUserApi'
 const state = reactive({
 	captchaUrl: '',
 	loginFrom: {}
@@ -12,9 +11,7 @@ const state = reactive({
 const login = reactive({ username: '18796357645', password: '18796357645', captcha: '', uuid: '' })
 
 function init() {
-
 }
-
 init()
 </script>
 
@@ -23,8 +20,6 @@ init()
 	width: 100%;
 	height: 100vh;
 }
-
-
 </style>
 <route lang="json">
 {

src/stores/userStore.ts

@@ -3,9 +3,18 @@ import { defineStore } from 'pinia'
 export default defineStore('userStore', {
 	state() {
 		return {
-			isLogin: false,
+			isLogin: true,
 			adminToken: "",
 			frontToken: "",
+			adminUserInfo:{
+				id: 0,
+        username: "18796357645",
+        email: "",
+        avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
+        role: "",
+        createTime: 0,
+        updateTime: 0,
+			}
 		}
 	},
 	actions: {

src/utils/utils.ts

@@ -8,3 +8,29 @@ export const getUuid = (): string => {
 		return v.toString(16);
 	});
 };
+
+
+
+export const getFrontList = () => {
+	const routes = [
+		{
+			"path": "/",
+			"name": "首页"
+		},
+		{
+			"path": "/",
+			"name": "首页"
+		},
+		{
+			"path": "/",
+			"name": "首页"
+		},
+		{
+			"path": "/",
+			"name": "首页"
+		},
+
+	]
+
+	return routes;
+}