Skip to content

Commit d0f1877

Browse files
NeserCodeNeserCode
committed
title update and global shortcut addon
1 parent b6b79e9 commit d0f1877

File tree

13 files changed

+184
-36
lines changed

13 files changed

+184
-36
lines changed

‎src/App.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import TitleBar from "./components/native/TitleBar.vue"
33
import Dialog from "./components/Dialog.vue"
44
import TopLinks from "./components/TopLinks.vue"
55
6-
import { ref, onMounted } from "vue"
6+
import { ref, onMounted, provide } from "vue"
77
import { useStorage } from "@vueuse/core"
88
import { nextTickToShow } from "./composables/useLocal"
9+
import { UpdateTitleFunctionalKey } from "./tokens"
910
1011
const isOpenModelDialog = ref(false)
1112
const slideDirection = useStorage(
@@ -18,11 +19,17 @@ onMounted(() => {
1819
nextTickToShow()
1920
}, 0)
2021
})
22+
23+
const title = ref("RocoKindom Codex")
24+
function titleUpdateFn(change: string) {
25+
title.value = change
26+
}
27+
provide(UpdateTitleFunctionalKey, { titleUpdateFn })
2128
</script>
2229

2330
<template>
2431
<div id="app-main">
25-
<TitleBar />
32+
<TitleBar :titleText="title" />
2633
<Dialog v-model:isOpen="isOpenModelDialog" />
2734
<TopLinks />
2835

‎src/components/SearchFilter.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function submitChangetoTop() {
1616
searchUpdateFn(innerValue.value)
1717
}
1818
19-
const category = useStorage("rocox-categroy", "angels")
19+
const category = useStorage("rocox-category", "angels")
2020
const categoryNameMap = new Map([
2121
["angels", "精灵"],
2222
["skills", "技能"],

‎src/components/SkillList.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,19 +64,19 @@ watch(listData, (val: any[]) => {
6464
const $router = useRouter()
6565
const alwaysTargetNewWindow = useStorage("rocox-new-window-target", false)
6666
const skillPageTitle = useStorage("rocox-skill-page-title", "")
67-
const AngelWindow: Ref<WindowCreator | null> = ref(null)
67+
const SkillWindow: Ref<WindowCreator | null> = ref(null)
6868
6969
function setupWindowParams(id: string, name: string, hash: string) {
7070
skillPageTitle.value = `#${id} ${name}`
71-
AngelWindow.value = new WindowCreator(id, {
71+
SkillWindow.value = new WindowCreator(id, {
7272
url: `/#/skill/${hash}`,
7373
title: skillPageTitle.value,
7474
})
7575
76-
goAngelView(hash)
76+
goSkillView(hash)
7777
}
78-
function goAngelView(hash: string) {
79-
if (alwaysTargetNewWindow.value) AngelWindow.value!.setup()
78+
function goSkillView(hash: string) {
79+
if (alwaysTargetNewWindow.value) SkillWindow.value!.setup()
8080
else
8181
$router.push({
8282
name: "Skill",

‎src/components/TopLinks.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ const hasActivedLink = computed(() => {
1414
)
1515
})
1616
17-
const category = useStorage("rocox-categroy", "angels")
17+
const category = useStorage("rocox-category", "angels")
1818
const categoryNameMap = new Map([
1919
["angels", "精灵"],
2020
["skills", "技能"],
2121
["items", "物品"],
2222
])
23-
function getMatchCategroyName() {
23+
function getMatchCategoryName() {
2424
return categoryNameMap.get(category.value)
2525
}
2626
</script>
@@ -32,7 +32,7 @@ function getMatchCategroyName() {
3232
<GoBack />
3333
<RouterLink draggable="false" class="link" to="/">
3434
<BookOpenIcon class="icon" />
35-
<span class="text">{{ getMatchCategroyName() }}</span>
35+
<span class="text">{{ getMatchCategoryName() }}</span>
3636
</RouterLink>
3737
<RouterLink draggable="false" class="link" to="/about">
3838
<QuestionMarkCircleIcon class="icon" />

‎src/components/native/Menu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from "@heroicons/vue/20/solid"
99
import { useStorage } from "@vueuse/core"
1010
11-
const category = useStorage("rocox-categroy", "angels")
11+
const category = useStorage("rocox-category", "angels")
1212
function isMatchCategoryOption(key: string): boolean {
1313
return category.value === key
1414
}

‎src/components/native/TitleBar.vue‎

Lines changed: 69 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,75 @@ import {
66
MoonIcon,
77
PaperClipIcon,
88
} from "@heroicons/vue/20/solid"
9-
import { ref, onMounted } from "vue"
9+
import { ref, onMounted, onBeforeUnmount, toRefs, watch } from "vue"
10+
import { useRoute } from "vue-router"
1011
import { useStorage, useThrottleFn } from "@vueuse/core"
12+
1113
import { appWindow } from "@tauri-apps/api/window"
14+
1215
import { useDarkMode } from "../../composables/useDarkMode"
16+
import { register, unregisterAll } from "@tauri-apps/api/globalShortcut"
17+
18+
const $props = withDefaults(
19+
defineProps<{
20+
titleText?: string
21+
}>(),
22+
{
23+
titleText: "Rocox Codex",
24+
}
25+
)
26+
const { titleText } = toRefs($props)
27+
const $route = useRoute()
1328
1429
const title = ref("Rocox Codex")
30+
const titleStack = useStorage<string[]>("rocox-title-stack", [])
1531
const isAlwaysonTop = useStorage("rocox-always-on-top", false)
32+
const category = useStorage("rocox-category", "angels")
33+
const categoryNameMap = new Map([
34+
["angels", "精灵"],
35+
["skills", "技能"],
36+
["items", "物品"],
37+
])
38+
const routeNameMap = new Map([
39+
["Angel", "精灵"],
40+
["Skill", "技能"],
41+
])
42+
43+
function updateTitle() {
44+
if (!!$route.meta.titleStorageKey)
45+
title.value =
46+
routeNameMap.get($route.name as string)! +
47+
localStorage.getItem($route.meta.titleStorageKey as string)!
48+
else
49+
title.value =
50+
$route.name === "Home" ? categoryNameMap.get(category.value)! : "关于"
51+
}
52+
53+
watch(
54+
titleText,
55+
(value) => {
56+
title.value = value
57+
},
58+
{
59+
immediate: true,
60+
}
61+
)
62+
63+
watch($route, (_route) => {
64+
updateTitle()
65+
})
66+
watch(category, (_route) => {
67+
updateTitle()
68+
})
1669
1770
function getIspinnedClass() {
1871
return isAlwaysonTop.value ? "pinned" : null
1972
}
73+
2074
// Initial top
2175
onMounted(async () => {
2276
await appWindow.setAlwaysOnTop(isAlwaysonTop.value)
77+
titleStack.value = []
2378
})
2479
2580
async function toggleIspinned() {
@@ -50,6 +105,16 @@ function removeMoveClass(event: MouseEvent) {
50105
}
51106
52107
const { isDarkMode, toggleDarkMode } = useDarkMode()
108+
109+
onMounted(async () => {
110+
await unregisterAll()
111+
await register("CommandOrControl+D", () => {
112+
toggleDarkMode()
113+
})
114+
await register("CommandOrControl+P", () => {
115+
throttleToggleIspinned()
116+
})
117+
})
53118
</script>
54119

55120
<template>
@@ -58,7 +123,7 @@ const { isDarkMode, toggleDarkMode } = useDarkMode()
58123
<!-- <span class="icon" data-tauri-drag-region>
59124
<img src="../../assets/hf.jpg" alt="!@" />
60125
</span> -->
61-
<span data-tauri-drag-region>{{ title }}</span>
126+
<span data-tauri-drag-region>{{ title }} · RoCoX Codex</span>
62127
</span>
63128
<div class="buttons" data-tauri-drag-region>
64129
<span
@@ -108,7 +173,8 @@ const { isDarkMode, toggleDarkMode } = useDarkMode()
108173
}
109174
110175
.title {
111-
@apply absolute inline-flex items-center top-1/2 left-2 text-sm
176+
@apply absolute inline-flex items-center top-1/2 left-2
177+
text-sm font-bold
112178
-translate-y-1/2;
113179
}
114180

‎src/composables/useApi.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const damageTypeStaticMap = new Map([
3636
],
3737
])
3838
const talentStaticURL = "https://res.17roco.qq.com/res/talent/"
39+
3940
const rocoApi = axios.create({
4041
baseURL,
4142
headers,
@@ -152,6 +153,7 @@ export const useApi = () => {
152153
const response = await rocoApi.post("/Skilllist/", params, { signal })
153154
return response.data.data
154155
}
156+
155157
// Skill Detail
156158
async function getSkill(params: { hash: string }, signal?: Signal) {
157159
const response = await rocoApi.post("/detail/skill/", params, { signal })

‎src/router.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,29 @@ const routes: Array<RouteRecordRaw> = [
55
{
66
path: "/",
77
name: "Home",
8+
meta: {},
89
component: () => import("./views/Home.vue"),
910
},
1011
{
1112
path: "/about",
1213
name: "About",
14+
meta: {},
1315
component: () => import("./views/About.vue"),
1416
},
1517
{
1618
path: "/angel/:hash",
1719
name: "Angel",
20+
meta: {
21+
titleStorageKey: "rocox-angel-page-title",
22+
},
1823
component: () => import("./views/Angel.vue"),
1924
},
2025
{
2126
path: "/skill/:hash",
2227
name: "Skill",
28+
meta: {
29+
titleStorageKey: "rocox-skill-page-title",
30+
},
2331
component: () => import("./views/Skill.vue"),
2432
},
2533
]

‎src/tokens.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,7 @@ export const UpdateFeatureFunctionalKey: Symbol = Symbol(
55
export const UpdateSearchFunctionalKey: Symbol = Symbol(
66
"UpdateSearchFunctionalKey"
77
)
8+
9+
export const UpdateTitleFunctionalKey: Symbol = Symbol(
10+
"UpdateTitleFunctionalKey"
11+
)

‎src/views/About.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ onActivated(async () => {
7070
<span class="api-provide">
7171
API -
7272
<a draggable="false" target="_blank" href="https://rocotime.com/"
73-
>洛克时光团队-RocoTime</a
73+
>洛克时光团队 RocoTime</a
7474
>
7575
</span>
7676
<span class="res-provide">
@@ -141,7 +141,8 @@ img {
141141
}
142142
143143
.avatar-container {
144-
@apply w-full flex flex-col justify-center items-center mt-4;
144+
@apply w-full flex flex-col justify-center items-center mt-4
145+
font-semibold;
145146
}
146147
147148
.avatar {
@@ -159,7 +160,7 @@ img {
159160
160161
.api-provide,
161162
.res-provide {
162-
@apply text-sm;
163+
@apply text-sm font-semibold;
163164
}
164165
165166
.separate {
@@ -175,8 +176,9 @@ img {
175176
}
176177
177178
.versions {
178-
@apply inline-flex flex-col items-center justify-center
179-
font-black text-xs;
179+
@apply inline-flex flex-col items-center justify-center px-2 py-1
180+
rounded bg-green-200 dark:bg-green-700
181+
font-mono text-xs transition-all;
180182
}
181183
182184
.warn-massage,

0 commit comments

Comments
 (0)