From f607b549577a484a0e54a527f39b0f2bc0626059 Mon Sep 17 00:00:00 2001 From: tim Date: Wed, 2 Jul 2025 22:34:13 +0800 Subject: [PATCH] feat: add menu ui --- open-isle-cli/public/index.html | 3 ++ open-isle-cli/src/assets/global.css | 10 ++-- .../src/components/HeaderComponent.vue | 37 +++++++++++++- .../src/components/MenuComponent.vue | 49 +++++++++++++++++-- 4 files changed, 89 insertions(+), 10 deletions(-) diff --git a/open-isle-cli/public/index.html b/open-isle-cli/public/index.html index 3e5a13962..ed3c2de70 100644 --- a/open-isle-cli/public/index.html +++ b/open-isle-cli/public/index.html @@ -1,5 +1,8 @@ + diff --git a/open-isle-cli/src/assets/global.css b/open-isle-cli/src/assets/global.css index ddcaad32c..2f180ae08 100644 --- a/open-isle-cli/src/assets/global.css +++ b/open-isle-cli/src/assets/global.css @@ -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; } \ No newline at end of file diff --git a/open-isle-cli/src/components/HeaderComponent.vue b/open-isle-cli/src/components/HeaderComponent.vue index f6dbae795..e60bed5ae 100644 --- a/open-isle-cli/src/components/HeaderComponent.vue +++ b/open-isle-cli/src/components/HeaderComponent.vue @@ -1,7 +1,14 @@ @@ -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; +} + diff --git a/open-isle-cli/src/components/MenuComponent.vue b/open-isle-cli/src/components/MenuComponent.vue index 4c466d805..262866f8d 100644 --- a/open-isle-cli/src/components/MenuComponent.vue +++ b/open-isle-cli/src/components/MenuComponent.vue @@ -1,9 +1,20 @@ @@ -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; }