Skip to content

Commit 9cfe91f

Browse files
NeserCodeNeserCode
committed
update window api
and spell error.
1 parent 4346152 commit 9cfe91f

File tree

8 files changed

+163
-25
lines changed

8 files changed

+163
-25
lines changed

‎src-tauri/tauri.conf.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"withGlobalTauri": false
88
},
99
"package": {
10-
"productName": "Roco-Codex",
10+
"productName": "Roco Codex",
1111
"version": "0.0.1"
1212
},
1313
"tauri": {

‎src/components/SpiritList.vue‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script lang="ts" setup>
2-
import { toRefs, watch } from "vue"
2+
import { Ref, ref, toRefs, watch } from "vue"
33
import { useApi } from "../composables/useApi"
44
import { computedAsync, useStorage } from "@vueuse/core"
55
66
import { CubeTransparentIcon, BugAntIcon } from "@heroicons/vue/20/solid"
7+
import { WindowCreator } from "../composables/useWindow"
78
89
const $props = withDefaults(
910
defineProps<{
@@ -61,11 +62,28 @@ function getFeatureIconSrc(featureIndex: string) {
6162
function getAngelIconSrc(iconSrc: string) {
6263
return `${iconStaticURL}${iconSrc}`
6364
}
65+
66+
const angelPageTitle = useStorage("roco-angel-page-title", "一只迪莫小可爱")
67+
const AngelWindow: Ref<WindowCreator | null> = ref(null)
68+
69+
function setupWindowParams(id: string, name: string, hash: string) {
70+
angelPageTitle.value = `#${id} ${name}`
71+
AngelWindow.value = new WindowCreator(id, {
72+
url: `/#/angel/${hash}`,
73+
title: angelPageTitle.value,
74+
})
75+
AngelWindow.value.setup()
76+
}
6477
</script>
6578

6679
<template>
6780
<div class="angel-list-main">
68-
<div class="angel-card" v-for="angel in listData" :key="angel.hash">
81+
<div
82+
class="angel-card"
83+
v-for="angel in listData"
84+
:key="angel.hash"
85+
@click="setupWindowParams(angel.id, angel.name, angel.hash)"
86+
>
6987
<span class="details">
7088
<span class="name-text">#{{ angel.id }} · {{ angel.name }}</span>
7189
<span class="features">

‎src/components/TopLinks.vue‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
<script lang="ts" setup>
2+
import { onActivated, ref } from "vue"
23
import { RouterLink } from "vue-router"
34
import { HomeIcon, QuestionMarkCircleIcon } from "@heroicons/vue/20/solid"
5+
6+
const hasActivedLink = ref(true)
7+
onActivated(() => {
8+
hasActivedLink.value = !!document.querySelector(
9+
".link.router-link-exact-active"
10+
)
11+
})
412
</script>
513

614
<template>
7-
<div id="top-links">
15+
<div id="top-links" v-show="hasActivedLink">
816
<RouterLink draggable="false" class="link" to="/">
917
<HomeIcon class="icon" />
1018
<span>图鉴</span>
@@ -13,6 +21,9 @@ import { HomeIcon, QuestionMarkCircleIcon } from "@heroicons/vue/20/solid"
1321
<QuestionMarkCircleIcon class="icon" />
1422
<span>关于</span>
1523
</RouterLink>
24+
<RouterLink draggable="false" class="link" to="/angel/04bca0fe">
25+
<span>Testing</span>
26+
</RouterLink>
1627
</div>
1728
</template>
1829

src/components/native/Paganation.vue renamed to src/components/native/Pagination.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const throttleSubmitPageChangeWithProgress = (change?: "plus" | "minus") => {
5656
</script>
5757

5858
<template>
59-
<div class="paganation">
59+
<div class="pagination">
6060
<span
6161
:class="['prev', 'operation', getDisabledClass(!hasPrev)]"
6262
@click="throttleSubmitPageChangeWithProgress('minus')"
@@ -86,7 +86,7 @@ const throttleSubmitPageChangeWithProgress = (change?: "plus" | "minus") => {
8686
</template>
8787

8888
<style lang="postcss" scoped>
89-
.paganation {
89+
.pagination {
9090
@apply relative inline-flex justify-center items-center flex-wrap mt-4;
9191
}
9292
.operation {

‎src/composables/useWindow.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { WebviewWindow, WindowOptions } from "@tauri-apps/api/window"
2+
3+
export class WindowCreator {
4+
private label: string = "DefaultLabel"
5+
private options: WindowOptions = {
6+
url: "/",
7+
decorations: false,
8+
height: 600,
9+
width: 500,
10+
fullscreen: false,
11+
title: this.label,
12+
resizable: false,
13+
}
14+
private window: WebviewWindow | null = null
15+
16+
constructor(label: string, options: WindowOptions) {
17+
this.label = label
18+
this.options = Object.assign(this.options, options)
19+
}
20+
21+
setup() {
22+
let label = this.label
23+
let options = this.options
24+
this.window = new WebviewWindow(label, options)
25+
this.window.once("tauri://created", function () {
26+
// webview window successfully created
27+
console.log("Window Creator Setup Success", label, options)
28+
})
29+
this.window.once("tauri://error", function (e) {
30+
// an error happened creating the webview window
31+
console.log("Window Creator Setup Error", e)
32+
})
33+
}
34+
}

‎src/router.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ const routes: Array<RouteRecordRaw> = [
1212
name: "About",
1313
component: () => import("./views/About.vue"),
1414
},
15+
{
16+
path: "/angel/:hash",
17+
name: "Angel",
18+
component: () => import("./views/Angel.vue"),
19+
},
1520
]
1621

1722
const router = createRouter({

‎src/views/Angel.vue‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script lang="ts" setup>
2+
import { ref, watch } from "vue"
3+
import { computedAsync } from "@vueuse/core"
4+
import { useRoute } from "vue-router"
5+
import { useApi } from "../composables/useApi"
6+
7+
const $route = useRoute()
8+
const { getAngel } = useApi()
9+
10+
const angelData = computedAsync(async (onCancel) => {
11+
const abortController = new AbortController()
12+
13+
onCancel(() => abortController.abort())
14+
15+
return await getAngel(
16+
{ hash: $route.params.hash as string },
17+
abortController.signal
18+
)
19+
})
20+
21+
const isLoadingData = ref(true)
22+
watch(angelData, (val) => {
23+
isLoadingData.value = false
24+
console.log(val)
25+
})
26+
27+
function log() {
28+
console.log(angelData.value)
29+
}
30+
</script>
31+
32+
<template>
33+
<div @click="log">
34+
<div class="details" v-if="!isLoadingData">
35+
<img
36+
class="angel-img"
37+
:src="angelData.angel.img"
38+
alt="Angel Image"
39+
loading="lazy"
40+
/>
41+
<span class="powers">
42+
<span class="id power-item">{{ angelData.angel.id }}</span>
43+
<span class="addtion power-item">{{ angelData.angel.add }}</span>
44+
<span class="health power-item">{{ angelData.angel.sm }}</span>
45+
<span class="physicalAttack power-item">{{ angelData.angel.wg }}</span>
46+
<span class="physicalDefend power-item">{{ angelData.angel.fy }}</span>
47+
<span class="magicAttack power-item">{{ angelData.angel.mg }}</span>
48+
<span class="magicDefend power-item">{{ angelData.angel.mk }}</span>
49+
<span class="speed power-item">{{ angelData.angel.sd }}</span>
50+
</span>
51+
</div>
52+
</div>
53+
</template>
54+
55+
<style lang="postcss" scoped>
56+
.details {
57+
@apply w-full inline-flex justify-center items-center mt-4;
58+
}
59+
60+
.angel-img {
61+
@apply w-1/2 p-4;
62+
}
63+
64+
.powers {
65+
@apply w-1/2 inline-flex items-center justify-between flex-wrap p-4;
66+
}
67+
.power-item {
68+
@apply w-1/3 mx-2;
69+
}
70+
</style>

‎src/views/Home.vue‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useStorage } from "@vueuse/core"
44
import SearchFilter from "../components/SearchFilter.vue"
55
import FeatureFilter from "../components/FeatureFilter.vue"
66
import SpiritList from "../components/SpiritList.vue"
7-
import Paganation from "../components/native/Paganation.vue"
7+
import Pagination from "../components/native/Pagination.vue"
88
99
import {
1010
UpdateFeatureFunctionalKey,
@@ -21,15 +21,15 @@ onActivated(() => {
2121
2222
const selectedFeature = ref("")
2323
const inputSearch = ref("")
24-
const paganationProps = ref({
24+
const paginationProps = ref({
2525
listSize: 0,
2626
pageSize: 0,
2727
total: 0,
2828
})
29-
const paganationPage = ref(1)
30-
const hasPrev = computed(() => !(paganationPage.value === 1))
29+
const paginationPage = ref(1)
30+
const hasPrev = computed(() => !(paginationPage.value === 1))
3131
const hasNext = computed(
32-
() => paganationProps.value.listSize === paganationProps.value.pageSize
32+
() => paginationProps.value.listSize === paginationProps.value.pageSize
3333
)
3434
const canJump = computed(
3535
() => selectedFeature.value === "" && inputSearch.value === ""
@@ -38,33 +38,33 @@ const canJump = computed(
3838
const featureUpdateFn = (featureIndex: string) => {
3939
if (selectedFeature.value === featureIndex) return false
4040
selectedFeature.value = featureIndex
41-
paganationPage.value = 1
41+
paginationPage.value = 1
4242
console.log("Home: Feature Change to", featureIndex)
4343
}
4444
const searchUpdateFn = (searchString: string) => {
4545
if (inputSearch.value === searchString) return false
4646
inputSearch.value = searchString
47-
paganationPage.value = 1
47+
paginationPage.value = 1
4848
console.log("Home: Search Change to", searchString)
4949
}
5050
5151
provide(UpdateFeatureFunctionalKey, { featureUpdateFn })
5252
provide(UpdateSearchFunctionalKey, { searchUpdateFn })
5353
54-
function updatePaganationSize(data: {
54+
function updatePaginationSize(data: {
5555
listSize: number
5656
pageSize: number
5757
total: number
5858
}) {
59-
paganationProps.value.listSize = data.listSize
60-
paganationProps.value.pageSize = data.pageSize
61-
paganationProps.value.total = data.total
59+
paginationProps.value.listSize = data.listSize
60+
paginationProps.value.pageSize = data.pageSize
61+
paginationProps.value.total = data.total
6262
}
6363
function pageUpdateFn(page: number) {
6464
let totalPage = Math.round(
65-
paganationProps.value.total / paganationProps.value.pageSize
65+
paginationProps.value.total / paginationProps.value.pageSize
6666
)
67-
if (page <= totalPage && page > 0) paganationPage.value = page
67+
if (page <= totalPage && page > 0) paginationPage.value = page
6868
}
6969
</script>
7070

@@ -77,8 +77,8 @@ function pageUpdateFn(page: number) {
7777
<SpiritList
7878
:search="inputSearch"
7979
:feature="selectedFeature"
80-
:page="paganationPage"
81-
@update:sizes="updatePaganationSize"
80+
:page="paginationPage"
81+
@update:sizes="updatePaginationSize"
8282
/>
8383
<div class="footer-image">
8484
<img
@@ -88,13 +88,13 @@ function pageUpdateFn(page: number) {
8888
alt="Roco Dimo"
8989
/>
9090
</div>
91-
<Paganation
91+
<Pagination
9292
:can-jump="canJump"
9393
:has-prev="hasPrev"
9494
:has-next="hasNext"
95-
:total="paganationProps.total"
96-
:page-size="paganationProps.pageSize"
97-
:page="paganationPage"
95+
:total="paginationProps.total"
96+
:page-size="paginationProps.pageSize"
97+
:page="paginationPage"
9898
:page-update-fn="pageUpdateFn"
9999
/>
100100
</div>

0 commit comments

Comments
 (0)