jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-02-21 14:30:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add menu ui

Browse Source
This commit is contained in:
tim
2025-07-02 22:34:13 +08:00
parent ce2ff8c94a
commit f607b54957
4 changed files with 89 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
open-isle-cli/public/index.html
View File

@@ -1,5 +1,8 @@
<!DOCTYPE html>
<html lang="">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
referrerpolicy="no-referrer" />
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

10
open-isle-cli/src/assets/global.css
View File

@@ -1,8 +1,11 @@
:root {
--header-height: 60px;
--header-background-color: gray;
--menu-background-color: darkgray;
--normal-background-color: lightgray;
--header-background-color: white;
--header-border-color: lightgray;
--menu-background-color: white;
--menu-border-color: lightgray;
--menu-selected-background-color: rgba(208, 250, 255, 0.659);
--normal-background-color: lightgrrgb(208, 246, 255)
--menu-width: 200px;
--page-max-width: 1200px;
}
@@ -10,4 +13,5 @@
body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}

37
open-isle-cli/src/components/HeaderComponent.vue
View File

@@ -1,7 +1,14 @@
<template>
<header class="header">
<div class="logo">🌴</div>
<button class="menu-btn" @click="$emit('toggle-menu')">☰</button>
<div class="header-content">
<button class="menu-btn" @click="$emit('toggle-menu')">
<i class="fas fa-bars"></i>
</button>
<div class="logo-container">
<img alt="OpenIsle" src="https://openisle-1307107697.cos.ap-guangzhou.myqcloud.com/assert/image.png" width="60" height="60">
<div class="logo-text">OpenIsle</div>
</div>
</div>
</header>
</template>
@@ -19,12 +26,38 @@ export default {
height: var(--header-height);
background-color: var(--header-background-color);
color: var(--header-text-color);
border-bottom: 1px solid var(--header-border-color);
}
.logo-container {
display: flex;
align-items: center;
font-size: 20px;
font-weight: bold;
}
.header-content {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 100%;
margin: 0 auto;
max-width: var(--page-max-width);
}
.menu-btn {
font-size: 24px;
background: none;
border: none;
color: inherit;
cursor: pointer;
opacity: 0.4;
margin-right: 10px;
}
.menu-btn:hover {
opacity: 0.8;
}
</style>

49
open-isle-cli/src/components/MenuComponent.vue
View File

@@ -1,9 +1,20 @@
<template>
<transition name="slide">
<nav v-if="visible" class="menu">
<ul>
<li><router-link to="/">Home</router-link></li>
</ul>
<div class="menu-item-container">
<div class="menu-item selected">
<i class="menu-item-icon fas fa-hashtag"></i>
<router-link class="menu-item-text" to="/">话题</router-link>
</div>
<div class="menu-item">
<i class="menu-item-icon fas fa-envelope"></i>
<router-link class="menu-item-text" to="/">我的消息</router-link>
</div>
<div class="menu-item">
<i class="menu-item-icon fas fa-info-circle"></i>
<router-link class="menu-item-text" to="/">关于</router-link>
</div>
</div>
</nav>
</transition>
</template>
@@ -25,7 +36,37 @@ export default {
width: 200px;
background-color: var(--menu-background-color);
height: calc(100vh - var(--header-height));
border-right: 1px solid var(--menu-border-color);
}
.menu-item-container {
padding: 10px;
}
.menu-item {
display: block;
padding: 4px 10px;
text-decoration: none;
color: var(--menu-text-color);
border-radius: 10px;
}
.menu-item.selected {
font-weight: bold;
background-color: var(--menu-selected-background-color);
}
.menu-item-text {
font-size: 16px;
text-decoration: none;
color: var(--menu-text-color);
}
.menu-item-icon {
margin-right: 10px;
opacity: 0.5;
}
.slide-enter-active, .slide-leave-active {
transition:
transform 0.3s ease,
@@ -35,11 +76,9 @@ export default {
.slide-enter-from, .slide-leave-to {
transform: translateX(-100%);
opacity: 0;
width: 0;
}
.slide-enter-to, .slide-leave-from {
transform: translateX(0);
opacity: 1;
width: 200px;
}
</style>