lanyuanxiaoyao/spring-boot-server-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加标题和图标

Browse Source
This commit is contained in:
兰缘小妖
2025-03-06 10:08:52 +08:00
parent ea685f1717
commit 93d5657d06
5 changed files with 59 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/index.html
View File

@@ -2,6 +2,7 @@
<html lang="zh">
<head>
<meta charset="UTF-8"/>
<link rel="icon" href="/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>API Client</title>
<style>

BIN
client/public/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

32
client/src/App.vue
View File

@@ -1,27 +1,31 @@
<script setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {ref} from "vue";
const router = useRouter()
const headerNav = ref(['home'])
function handleHeaderNavSelect({item, key, selectedKeys}) {
router.push({name: key})
}
const headerNavSelected = ref(['home'])
</script>
<template>
<a-layout class="container">
<a-layout-header class="header">
<div class="float-left">
<img class="icon w-12 h-12" src="/icon.png" alt="icon">
<span class="title mx-3 text-white text-xl">智能服务</span>
</div>
<a-menu
v-model:selectedKeys="headerNav"
@select="handleHeaderNavSelect"
v-model:selected-keys="headerNavSelected"
theme="dark"
mode="horizontal"
>
<a-menu-item key="home">首页</a-menu-item>
<a-menu-item key="management">管理台</a-menu-item>
<a-menu-item key="home">
<router-link to="/home">首页</router-link>
</a-menu-item>
<a-menu-item key="management">
<router-link to="/management">管理台</router-link>
</a-menu-item>
</a-menu>
<div class="float-right">
</div>
</a-layout-header>
<router-view/>
</a-layout>
@@ -31,4 +35,8 @@ function handleHeaderNavSelect({item, key, selectedKeys}) {
.container {
min-height: 100vh;
}
.header {
padding: 0 20px 0 20px;
}
</style>

64
client/src/main.js
View File

@@ -1,39 +1,39 @@
import {createApp} from 'vue'
import {createRouter, createWebHistory} from 'vue-router'
import {createMemoryHistory, createRouter, createWebHistory} from 'vue-router'
import App from './App.vue'
import {Layout, Menu} from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'
createApp(App)
.use(Layout)
.use(Menu)
.use(createRouter({
history: createWebHistory(),
routes: [
{path: '/', redirect: 'home'},
{
name: 'home',
path: '/home',
component: () => import('./views/Home.vue'),
},
{
name: 'management',
path: '/management',
component: () => import('./views/management/Index.vue'),
redirect: 'overview',
children: [
{
name: 'overview',
path: '/overview',
component: () => import('./views/management/Overview.vue'),
},
{
name: 'setting',
path: '/setting',
component: () => import('./views/management/Setting.vue'),
},
],
},
.use(Layout)
.use(Menu)
.use(createRouter({
history: createWebHistory(),
routes: [
{path: '/', redirect: 'home'},
{
name: 'home',
path: '/home',
component: () => import('./views/Home.vue'),
},
{
name: 'management',
path: '/management',
component: () => import('./views/management/Index.vue'),
redirect: '/management/overview',
children: [
{
name: 'overview',
path: 'overview',
component: () => import('./views/management/Overview.vue'),
},
{
name: 'setting',
path: 'setting',
component: () => import('./views/management/Setting.vue'),
},
],
}))
.mount('#app')
},
],
}))
.mount('#app')

15
client/src/views/management/Index.vue
View File

@@ -1,13 +1,7 @@
<script setup>
import {ref} from 'vue'
import {useRouter} from 'vue-router'
const router = useRouter()
const sideNav = ref(['overview'])
function handleSideNavSelect({item, key, selectedKeys}) {
router.push({name: key})
}
</script>
<template>
@@ -16,17 +10,20 @@ function handleSideNavSelect({item, key, selectedKeys}) {
<a-menu
class="h-full"
v-model:selectedKeys="sideNav"
@select="handleSideNavSelect"
mode="inline"
>
<a-menu-item key="overview">概览</a-menu-item>
<a-menu-item key="overview">
<router-link to="/management/overview">概览</router-link>
</a-menu-item>
<a-sub-menu key="system">
<template #title>
<span>
系统管理
</span>
</template>
<a-menu-item key="setting">设置</a-menu-item>
<a-menu-item key="setting">
<router-link to="/management/setting">设置</router-link>
</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>