Skip to content

Commit 848c423

Browse files
NeserCodeNeserCode
committed
add categories
1 parent 9e3b4cf commit 848c423

File tree

4 files changed

+214
-31
lines changed

4 files changed

+214
-31
lines changed

‎src/components/SearchFilter.vue‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts" setup>
22
import { ref, inject, watch } from "vue"
33
import { UpdateSearchFunctionalKey } from "../tokens"
4+
import { useStorage } from "@vueuse/core"
45
const innerValue = ref("")
56
67
const { searchUpdateFn } = inject<{
@@ -14,6 +15,17 @@ watch(innerValue, (value) => {
1415
function submitChangetoTop() {
1516
searchUpdateFn(innerValue.value)
1617
}
18+
19+
const category = useStorage("roco-categroy", "angels")
20+
const categoryNameMap = new Map([
21+
["angels", "精灵"],
22+
["skills", "技能"],
23+
["items", "物品"],
24+
])
25+
26+
function getMatchPlaceHolder() {
27+
return `键入${categoryNameMap.get(category.value)}编号、名称等回车以查找`
28+
}
1729
</script>
1830

1931
<template>
@@ -23,7 +35,7 @@ function submitChangetoTop() {
2335
v-model="innerValue"
2436
@keyup.enter="submitChangetoTop"
2537
type="text"
26-
placeholder="键入宠物编号、名称等"
38+
:placeholder="getMatchPlaceHolder()"
2739
/>
2840
</div>
2941
</template>

‎src/components/TopLinks.vue‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,42 @@
11
<script lang="ts" setup>
2+
import { BookOpenIcon, QuestionMarkCircleIcon } from "@heroicons/vue/20/solid"
23
import Menu from "./native/Menu.vue"
3-
import { onActivated, ref } from "vue"
4-
import { RouterLink } from "vue-router"
5-
import { HomeIcon, QuestionMarkCircleIcon } from "@heroicons/vue/20/solid"
6-
7-
const hasActivedLink = ref(true)
8-
onActivated(() => {
9-
hasActivedLink.value = !!document.querySelector(
10-
".link.router-link-exact-active"
4+
import { computed } from "vue"
5+
import { RouterLink, useRoute } from "vue-router"
6+
import { useStorage } from "@vueuse/core"
7+
8+
const $route = useRoute()
9+
const shouldShowLinksPath = ["home", "about"]
10+
const hasActivedLink = computed(() => {
11+
return shouldShowLinksPath.includes(
12+
(($route.name as string) ?? "home").toLowerCase()
1113
)
1214
})
15+
16+
const category = useStorage("roco-categroy", "angels")
17+
const categoryNameMap = new Map([
18+
["angels", "精灵"],
19+
["skills", "技能"],
20+
["items", "物品"],
21+
])
22+
23+
function getMatchCategroyName() {
24+
return categoryNameMap.get(category.value)
25+
}
1326
</script>
1427

1528
<template>
1629
<div id="top-links" v-show="hasActivedLink">
30+
<Menu class="links-menu" />
31+
1732
<RouterLink draggable="false" class="link" to="/">
18-
<HomeIcon class="icon" />
19-
<span>图鉴</span>
33+
<BookOpenIcon class="icon" />
34+
<span class="text">{{ getMatchCategroyName() }}</span>
2035
</RouterLink>
2136
<RouterLink draggable="false" class="link" to="/about">
2237
<QuestionMarkCircleIcon class="icon" />
23-
<span>关于</span>
38+
<span class="text">关于</span>
2439
</RouterLink>
25-
<Menu />
2640
</div>
2741
</template>
2842

@@ -34,7 +48,7 @@ onActivated(() => {
3448
.link {
3549
@apply inline-flex justify-center items-center mx-1 px-2.5 py-1
3650
bg-slate-200 dark:bg-slate-800
37-
font-semibold shadow
51+
text-base font-black shadow
3852
rounded transition-all select-none;
3953
}
4054
.link.router-link-exact-active {
@@ -45,4 +59,8 @@ onActivated(() => {
4559
.link .icon {
4660
@apply w-4 h-4 mr-1;
4761
}
62+
63+
.links-menu {
64+
@apply fixed left-4 z-10;
65+
}
4866
</style>

‎src/components/native/Menu.vue‎

Lines changed: 143 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,26 @@
11
<script lang="ts" setup>
22
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue"
3+
import {
4+
EllipsisHorizontalIcon,
5+
ArrowsRightLeftIcon,
6+
} from "@heroicons/vue/20/solid"
7+
import { useStorage } from "@vueuse/core"
8+
9+
const category = useStorage("roco-categroy", "angels")
10+
function isMatchCategoryOption(key: string): boolean {
11+
return category.value === key
12+
}
13+
function turnToCategory(key: "angels" | "skills" | "items") {
14+
category.value = key
15+
}
316
</script>
417

518
<template>
619
<div class="navigation-menu">
7-
<Menu as="div">
8-
<MenuButton>bbut</MenuButton>
20+
<Menu as="div" class="menu-main">
21+
<MenuButton class="menu-button">
22+
<EllipsisHorizontalIcon class="icon" />
23+
</MenuButton>
924
<transition
1025
enter-active-class="transition duration-100 ease-out"
1126
enter-from-class="transform scale-95 opacity-0"
@@ -14,13 +29,135 @@ import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue"
1429
leave-from-class="transform scale-100 opacity-100"
1530
leave-to-class="transform scale-95 opacity-0"
1631
>
17-
<MenuItems>
18-
<MenuItem>1</MenuItem>
19-
<MenuItem>2</MenuItem>
32+
<MenuItems class="menu-items">
33+
<div class="category-options">
34+
<MenuItem
35+
as="div"
36+
class="menu-item"
37+
v-slot="{ disabled, active }"
38+
:disabled="isMatchCategoryOption('angels')"
39+
@click="turnToCategory('angels')"
40+
>
41+
<ArrowsRightLeftIcon class="icon" />
42+
<span
43+
:class="[
44+
'text',
45+
disabled ? 'disabled' : null,
46+
active ? 'active' : null,
47+
]"
48+
title="切换至精灵图鉴"
49+
>切换至精灵图鉴</span
50+
>
51+
</MenuItem>
52+
<MenuItem
53+
as="div"
54+
class="menu-item"
55+
v-slot="{ disabled, active }"
56+
:disabled="isMatchCategoryOption('skills')"
57+
@click="turnToCategory('skills')"
58+
>
59+
<ArrowsRightLeftIcon class="icon" />
60+
<span
61+
:class="[
62+
'text',
63+
disabled ? 'disabled' : null,
64+
active ? 'active' : null,
65+
]"
66+
title="切换至技能图鉴"
67+
>切换至技能图鉴</span
68+
>
69+
</MenuItem>
70+
<MenuItem
71+
as="div"
72+
class="menu-item"
73+
v-slot="{ disabled, active }"
74+
:disabled="isMatchCategoryOption('items')"
75+
@click="turnToCategory('items')"
76+
>
77+
<ArrowsRightLeftIcon class="icon" />
78+
<span
79+
:class="[
80+
'text',
81+
disabled ? 'disabled' : null,
82+
active ? 'active' : null,
83+
]"
84+
title="切换至物品图鉴"
85+
>切换至物品图鉴</span
86+
>
87+
</MenuItem>
88+
</div>
89+
<MenuItem as="div" class="menu-item" v-slot="{ disabled, active }">
90+
<ArrowsRightLeftIcon class="icon" />
91+
<span
92+
:class="[
93+
'text',
94+
disabled ? 'disabled' : null,
95+
active ? 'active' : null,
96+
]"
97+
title="切换浏览模式"
98+
>总是打开新页面</span
99+
>
100+
</MenuItem>
20101
</MenuItems>
21102
</transition>
22103
</Menu>
23104
</div>
24105
</template>
25106

26-
<style lang="postcss" scoped></style>
107+
<style lang="postcss" scoped>
108+
.menu-main {
109+
@apply relative;
110+
}
111+
112+
.menu-button {
113+
@apply py-1 px-1.5
114+
bg-slate-200 dark:bg-slate-600
115+
focus:ring-2 ring-green-400 dark:ring-green-500
116+
rounded transition-all outline-none shadow-md;
117+
}
118+
.menu-button .icon {
119+
@apply w-6 h-6;
120+
}
121+
122+
.menu-items {
123+
@apply absolute left-0 top-full flex flex-col w-40 mt-2 p-1
124+
border-2 rounded border-slate-300 dark:border-slate-500
125+
focus:ring-2 ring-green-300 dark:ring-green-500
126+
bg-sky-50 dark:bg-sky-900
127+
select-none transition-all outline-none;
128+
}
129+
.menu-item {
130+
@apply w-full inline-flex items-center p-1
131+
rounded
132+
cursor-pointer;
133+
}
134+
.menu-item .icon {
135+
@apply w-4 h-4 mr-1;
136+
}
137+
.menu-item .text {
138+
@apply inline-block max-w-[6.75rem] text-sm
139+
truncate font-bold;
140+
}
141+
142+
.menu-item:has(.text.disabled) {
143+
@apply cursor-not-allowed;
144+
}
145+
.menu-item:has(.text.disabled) .icon,
146+
.menu-item:has(.text.disabled) .text {
147+
@apply opacity-40;
148+
}
149+
.menu-item:has(.text.active) {
150+
@apply text-green-600 dark:text-green-300;
151+
}
152+
153+
.menu-item:not(:has(.text.disabled)) {
154+
@apply hover:bg-green-300 dark:hover:bg-green-600
155+
transition-all;
156+
}
157+
158+
.category-options {
159+
@apply mb-1 pb-1 border-b-2
160+
border-slate-200 dark:border-slate-600
161+
transition-all;
162+
}
163+
</style>

‎src/views/Angel.vue‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -193,15 +193,17 @@ function log() {
193193
class="skill-item"
194194
:key="skill.id"
195195
>
196-
<img
197-
class="feature icon"
198-
:src="getFeatureIconSrc(skill.property)"
199-
alt="skill property"
200-
/>
196+
<span class="id">#{{ skill.id }}</span>
201197
<span class="name">{{ skill.name }}</span>
202-
<span class="skill-details"
203-
>{{ skill.ppMax }}·{{ skill.power }}</span
204-
>
198+
<span class="skill-details">
199+
<img
200+
class="feature icon"
201+
:src="getFeatureIconSrc(skill.property)"
202+
alt="skill property"
203+
/>
204+
<span class="pp">{{ skill.ppMax }}</span> ·
205+
<span class="power">{{ skill.power }}</span>
206+
</span>
205207
</span>
206208
</div>
207209
</TabPanel>
@@ -295,10 +297,24 @@ function log() {
295297
}
296298
297299
.skill-item .icon {
298-
@apply inline-block w-4 h-4 mr-0.5;
300+
@apply inline-block w-3 h-3 mr-0.5;
299301
}
300-
.skill-details {
301-
@apply inline-block ml-0.5
302+
.skill-item .id {
303+
@apply inline-block mr-0.5
302304
text-xs;
303305
}
306+
.skill-details {
307+
@apply inline-flex items-center ml-0.5 px-1 py-px
308+
border border-green-500 bg-green-200 dark:bg-green-700
309+
rounded-sm box-content
310+
text-xs font-black transition-all;
311+
}
312+
.skill-details .pp {
313+
@apply text-blue-600 dark:text-blue-200
314+
transition-all;
315+
}
316+
.skill-details .power {
317+
@apply text-red-500 dark:text-red-300
318+
transition-all;
319+
}
304320
</style>

0 commit comments

Comments
 (0)