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"> <html lang="zh">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<link rel="icon" href="/icon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>API Client</title> <title>API Client</title>
<style> <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> <script setup>
import {ref} from 'vue' import {ref} from "vue";
import {useRouter} from 'vue-router'
const router = useRouter() const headerNavSelected = ref(['home'])
const headerNav = ref(['home'])
function handleHeaderNavSelect({item, key, selectedKeys}) {
router.push({name: key})
}
</script> </script>
<template> <template>
<a-layout class="container"> <a-layout class="container">
<a-layout-header class="header"> <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 <a-menu
v-model:selectedKeys="headerNav" v-model:selected-keys="headerNavSelected"
@select="handleHeaderNavSelect"
theme="dark" theme="dark"
mode="horizontal" mode="horizontal"
> >
<a-menu-item key="home">首页</a-menu-item> <a-menu-item key="home">
<a-menu-item key="management">管理台</a-menu-item> <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> </a-menu>
<div class="float-right">
</div>
</a-layout-header> </a-layout-header>
<router-view/> <router-view/>
</a-layout> </a-layout>
@@ -31,4 +35,8 @@ function handleHeaderNavSelect({item, key, selectedKeys}) {
.container { .container {
min-height: 100vh; min-height: 100vh;
} }
.header {
padding: 0 20px 0 20px;
}
</style> </style>

64
client/src/main.js
View File

@@ -1,39 +1,39 @@
import {createApp} from 'vue' import {createApp} from 'vue'
import {createRouter, createWebHistory} from 'vue-router' import {createMemoryHistory, createRouter, createWebHistory} from 'vue-router'
import App from './App.vue' import App from './App.vue'
import {Layout, Menu} from 'ant-design-vue' import {Layout, Menu} from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css' import 'ant-design-vue/dist/reset.css'
createApp(App) createApp(App)
.use(Layout) .use(Layout)
.use(Menu) .use(Menu)
.use(createRouter({ .use(createRouter({
history: createWebHistory(), history: createWebHistory(),
routes: [ routes: [
{path: '/', redirect: 'home'}, {path: '/', redirect: 'home'},
{ {
name: 'home', name: 'home',
path: '/home', path: '/home',
component: () => import('./views/Home.vue'), component: () => import('./views/Home.vue'),
}, },
{ {
name: 'management', name: 'management',
path: '/management', path: '/management',
component: () => import('./views/management/Index.vue'), component: () => import('./views/management/Index.vue'),
redirect: 'overview', redirect: '/management/overview',
children: [ children: [
{ {
name: 'overview', name: 'overview',
path: '/overview', path: 'overview',
component: () => import('./views/management/Overview.vue'), component: () => import('./views/management/Overview.vue'),
}, },
{ {
name: 'setting', name: 'setting',
path: '/setting', path: 'setting',
component: () => import('./views/management/Setting.vue'), 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> <script setup>
import {ref} from 'vue' import {ref} from 'vue'
import {useRouter} from 'vue-router'
const router = useRouter()
const sideNav = ref(['overview']) const sideNav = ref(['overview'])
function handleSideNavSelect({item, key, selectedKeys}) {
router.push({name: key})
}
</script> </script>
<template> <template>
@@ -16,17 +10,20 @@ function handleSideNavSelect({item, key, selectedKeys}) {
<a-menu <a-menu
class="h-full" class="h-full"
v-model:selectedKeys="sideNav" v-model:selectedKeys="sideNav"
@select="handleSideNavSelect"
mode="inline" 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"> <a-sub-menu key="system">
<template #title> <template #title>
<span> <span>
系统管理 系统管理
</span> </span>
</template> </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-sub-menu>
</a-menu> </a-menu>
</a-layout-sider> </a-layout-sider>