From 0d7845e56b9a0bfa7abb4c3845a6c512fb09a895 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=97=B5=E5=AE=AA=E7=91=9E?=
 <9198107+min-xianrui@user.noreply.gitee.com>
Date: Wed, 8 Jan 2025 12:19:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A5=BF=E4=BA=86=E4=B9=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                               |  7 ---
 src/components/Navigation.vue      | 32 --------------
 src/components/nav/Navigation1.vue | 70 ++++++++++++++++++++++++++++++
 src/layouts/admin.vue              | 11 +++++
 src/layouts/front.vue              | 26 +++++++----
 src/pages/index.vue                |  7 +++
 src/pages/login.vue                |  5 ---
 src/stores/userStore.ts            | 11 ++++-
 src/utils/utils.ts                 | 26 +++++++++++
 9 files changed, 142 insertions(+), 53 deletions(-)
 delete mode 100644 src/components/Navigation.vue
 create mode 100644 src/components/nav/Navigation1.vue
 create mode 100644 src/layouts/admin.vue

diff --git a/.env b/.env
index 43b614c..5d1c91c 100644
--- a/.env
+++ b/.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
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
deleted file mode 100644
index 0fa48f2..0000000
--- a/src/components/Navigation.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/nav/Navigation1.vue b/src/components/nav/Navigation1.vue
new file mode 100644
index 0000000..5325c43
--- /dev/null
+++ b/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>
diff --git a/src/layouts/admin.vue b/src/layouts/admin.vue
new file mode 100644
index 0000000..114f722
--- /dev/null
+++ b/src/layouts/admin.vue
@@ -0,0 +1,11 @@
+
+<!--后台模板-->
+<template>
+
+</template>
+<script setup lang="ts">
+
+</script>
+<style scoped>
+
+</style>
diff --git a/src/layouts/front.vue b/src/layouts/front.vue
index 42966cf..f3a6d2f 100644
--- a/src/layouts/front.vue
+++ b/src/layouts/front.vue
@@ -1,14 +1,24 @@
+
+<!--前端模板-->
 <template>
-	<Navigation />
-	<div class="w-screen flex flex-col items-center justify-center">
-		<router-view v-slot="{ Component }">
-			<transition name="fade" mode="out-in">
-				<component :is="Component" />
-			</transition>
-		</router-view>
+	<div class="common-layout">
+		<el-container>
+			<el-header>
+			<nav-navigation1></nav-navigation1>
+			</el-header>
+			<el-main>
+				<router-view></router-view>
+			</el-main>
+		</el-container>
 	</div>
 </template>
 
-<style>
+
+<script setup lang="ts">
+</script>
+<style scoped>
+
+
+
 
 </style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 7e397a4..763b2de 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -11,3 +11,10 @@ import FoundationLine from '~/components/view/foundation-line.vue'
 
 
 </script>
+<route lang="json">
+{
+"meta": {
+"layout": "front"
+}
+}
+</route>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index f761a37..1f70635 100644
--- a/src/pages/login.vue
+++ b/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">
 {
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
index b879cd4..98d3aa6 100644
--- a/src/stores/userStore.ts
+++ b/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: {
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 76cf1d7..9ab8601 100644
--- a/src/utils/utils.ts
+++ b/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;
+}