Skip to content

Commit 82d6866

Browse files
NeserCodeNeserCode
committed
update comps
1 parent 0f06b3f commit 82d6866

File tree

10 files changed

+269
-50
lines changed

10 files changed

+269
-50
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="referrer" content="no-referrer" />
78
<title>Roco Codex</title>
89
</head>
910

‎src/App.vue‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,10 @@
11
<script setup lang="ts">
2-
import { ref, provide } from "vue"
2+
import { ref } from "vue"
33
import TitleBar from "./components/native/TitleBar.vue"
44
import Dialog from "./components/Dialog.vue"
55
import TopLinks from "./components/TopLinks.vue"
66
7-
import { UpdateFeatureFunctionalKey } from "./tokens"
8-
97
const isOpenModelDialog = ref(false)
10-
const selectedFeature = ref("")
11-
12-
const featureUpdateFn = (featureIndex: string) => {
13-
selectedFeature.value = featureIndex
14-
console.log("Top: feature change to", featureIndex)
15-
}
16-
17-
provide(UpdateFeatureFunctionalKey, { featureUpdateFn })
188
</script>
199

2010
<template>
@@ -31,12 +21,18 @@ provide(UpdateFeatureFunctionalKey, { featureUpdateFn })
3121
</div>
3222
</template>
3323

34-
<style scoped lang="postcss">
24+
<style>
25+
html.dark {
26+
color-scheme: dark;
27+
}
28+
3529
@font-face {
3630
src: url("./assets/SourceHanSerifCN-VF.ttf");
3731
font-family: "SourceHanSerifCN";
3832
}
33+
</style>
3934

35+
<style scoped lang="postcss">
4036
#app-main {
4137
@apply relative w-[500px] min-h-[600px]
4238
border border-slate-400

‎src/assets/roco.dimo.png‎

35.7 KB
Loading

‎src/components/FeatureFilter.vue‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,7 @@ import {
66
PopoverButton,
77
PopoverPanel,
88
} from "@headlessui/vue"
9-
import {
10-
NoSymbolIcon,
11-
ChevronDownIcon,
12-
FunnelIcon,
13-
} from "@heroicons/vue/20/solid"
9+
import { NoSymbolIcon, ChevronDownIcon } from "@heroicons/vue/20/solid"
1410
import { nextTick, onMounted, ref, watch, inject } from "vue"
1511
import type { Ref } from "vue"
1612
import { useApi } from "../composables/useApi"
@@ -46,6 +42,7 @@ function delayAccept(fn: () => void) {
4642
const { featureUpdateFn } = inject<{
4743
featureUpdateFn: (index: string) => void
4844
}>(UpdateFeatureFunctionalKey, { featureUpdateFn: () => {} })
45+
4946
watch(checkedOption, (value) => {
5047
console.log("Component: Feature Change to", value)
5148
getMatchText(value)
@@ -54,12 +51,11 @@ watch(checkedOption, (value) => {
5451
</script>
5552

5653
<template>
57-
<Popover as="div" class="self-end" v-slot="{ open, close }">
58-
<PopoverButton class="shadow-lg">
54+
<Popover as="div" v-slot="{ open, close }">
55+
<PopoverButton class="transition-all shadow-lg outline-none">
5956
<div class="btn-context">
60-
<FunnelIcon class="icon" />
6157
<img
62-
v-show="checkedOption !== ''"
58+
v-if="checkedOption !== ''"
6359
draggable="false"
6460
class="icon"
6561
:src="getFeatureIcon(checkedOption)"
@@ -77,9 +73,9 @@ watch(checkedOption, (value) => {
7773
leave-from-class="translate-y-0 opacity-100"
7874
leave-to-class="translate-y-1 opacity-0"
7975
>
80-
<PopoverPanel class="absolute z-10 max-w-sm transform right-7">
76+
<PopoverPanel class="absolute z-10 max-w-sm transform right-8">
8177
<RadioGroup
82-
class="w-[340px] flex flex-row flex-wrap items-center transition-all border-2 select-none justify-end rounded-md translate-x-0.5 translate-y-3 bg-white dark:bg-stone-800 border-slate-200 dark:border-slate-500"
78+
class="w-[340px] flex flex-row flex-wrap items-center transition-all border-2 select-none justify-end rounded-md translate-x-0.5 translate-y-3 bg-neutral-200 dark:bg-neutral-500 border-slate-200 dark:border-slate-500"
8379
v-model="checkedOption"
8480
>
8581
<RadioGroupOption

‎src/components/SearchFilter.vue‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,27 @@
11
<script lang="ts" setup>
2-
import { ref } from "vue"
2+
import { ref, inject, watch } from "vue"
3+
import { UpdateSearchFunctionalKey } from "../tokens"
34
const innerValue = ref("")
5+
6+
const { searchUpdateFn } = inject<{
7+
searchUpdateFn: (index: string) => void
8+
}>(UpdateSearchFunctionalKey, { searchUpdateFn: () => {} })
9+
10+
watch(innerValue, (value) => {
11+
console.log("Component: Search Change to", value)
12+
})
13+
14+
function submitChangetoTop() {
15+
searchUpdateFn(innerValue.value)
16+
}
417
</script>
518

619
<template>
720
<div class="search-filter-main">
821
<input
922
class="filter-body"
1023
v-model="innerValue"
24+
@keyup.enter="submitChangetoTop"
1125
type="text"
1226
placeholder="键入宠物编号、名称等"
1327
/>
@@ -23,7 +37,7 @@ const innerValue = ref("")
2337
.filter-body {
2438
@apply w-full inline-flex items-center py-1 px-2
2539
text-base font-bold
26-
border-2 border-gray-300 dark:border-gray-500
40+
border-2 border-gray-300 dark:border-gray-500 caret-slate-400
2741
bg-slate-100 dark:bg-slate-600
2842
focus:ring-2 focus:border-green-300 dark:focus:border-green-500 ring-green-300 dark:ring-green-500
2943
outline-none shadow-lg transition-all rounded;

‎src/components/SpiritList.vue‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<script lang="ts" setup>
2+
import { toRefs, watch } from "vue"
3+
import { useApi } from "../composables/useApi"
4+
import { computedAsync } from "@vueuse/core"
5+
6+
import { CubeTransparentIcon } from "@heroicons/vue/20/solid"
7+
8+
const $props = withDefaults(
9+
defineProps<{
10+
id?: string
11+
search?: string
12+
feature?: string
13+
page?: number
14+
}>(),
15+
{
16+
id: "",
17+
search: "",
18+
feature: "",
19+
page: 1,
20+
}
21+
)
22+
23+
const { id, search, feature, page } = toRefs($props)
24+
const { getAngelList, iconStaticURL, featureStaticURL } = useApi()
25+
26+
const listData = computedAsync(async (onCancel) => {
27+
const abortController = new AbortController()
28+
29+
onCancel(() => abortController.abort())
30+
return await getAngelList(
31+
{
32+
id: id.value,
33+
search: search.value,
34+
feature: feature.value,
35+
page: page.value,
36+
},
37+
abortController.signal
38+
)
39+
})
40+
41+
watch(listData, (val) => {
42+
console.log(val)
43+
})
44+
45+
function getFeatureIconSrc(featureIndex: string) {
46+
return `${featureStaticURL}${featureIndex}.png`
47+
}
48+
function getAngelIconSrc(iconSrc: string) {
49+
return `${iconStaticURL}${iconSrc}`
50+
}
51+
</script>
52+
53+
<template>
54+
<div class="angel-list-main">
55+
<div class="angel-card" v-for="angel in listData" :key="angel.hash">
56+
<span class="details">
57+
<span class="name-text">#{{ angel.id }} · {{ angel.name }}</span>
58+
<span class="features">
59+
<img
60+
draggable="false"
61+
class="feature-icon icon"
62+
referrerPolicy="no-referrer"
63+
v-for="key in angel.features"
64+
:key="key"
65+
:src="getFeatureIconSrc(key)"
66+
loading="lazy"
67+
/>
68+
</span>
69+
<img
70+
draggable="false"
71+
class="angel-icon icon"
72+
v-show="angel.img"
73+
:src="getAngelIconSrc(angel.iconSrc)"
74+
alt="angel icon"
75+
referrerPolicy="no-referrer"
76+
loading="lazy"
77+
/>
78+
<CubeTransparentIcon
79+
v-show="!angel.img"
80+
draggable="false"
81+
class="icon-palceholder icon"
82+
/>
83+
</span>
84+
</div>
85+
</div>
86+
</template>
87+
88+
<style lang="postcss" scoped>
89+
.angel-list-main::-webkit-scrollbar {
90+
@apply w-3;
91+
}
92+
.angel-list-main::-webkit-scrollbar-track {
93+
@apply bg-slate-200 dark:bg-slate-600;
94+
}
95+
.angel-list-main::-webkit-scrollbar-thumb {
96+
@apply bg-slate-400 shadow;
97+
}
98+
.angel-list-main {
99+
@apply relative w-80 mt-8 h-80 flex flex-col items-center
100+
overflow-auto snap-y snap-mandatory;
101+
}
102+
.angel-card {
103+
@apply w-72 h-12 flex flex-col mb-1
104+
border-2 border-slate-200 dark:border-slate-600
105+
hover:bg-slate-100 active:bg-slate-200 active:border-slate-300
106+
dark:hover:bg-slate-600 dark:active:bg-slate-800 dark:active:border-slate-600
107+
rounded select-none transition-all snap-start cursor-pointer;
108+
}
109+
110+
.details {
111+
@apply relative w-full h-12 inline-flex items-center justify-start;
112+
}
113+
114+
.name-text {
115+
@apply inline-block w-36 mx-2
116+
text-sm font-black border-r
117+
border-gray-300 dark:border-gray-500
118+
truncate transition-all;
119+
}
120+
121+
.features {
122+
@apply inline-flex justify-center items-center;
123+
}
124+
.features .icon {
125+
@apply w-8 h-8 inline-block p-1.5;
126+
}
127+
128+
.details .angel-icon {
129+
@apply absolute right-0 w-11 h-11 inline-block
130+
rounded-r;
131+
}
132+
.icon-palceholder {
133+
@apply absolute right-0 w-11 h-11 inline-block p-2
134+
text-slate-600 dark:text-slate-300
135+
rounded-r transition-all;
136+
}
137+
</style>

‎src/components/native/Paganation.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts" setup>
2+
import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/vue/20/solid"
3+
</script>
4+
5+
<template>
6+
<div class="paganation">
7+
<span class="prev operation">
8+
<ArrowLeftIcon class="icon" />
9+
</span>
10+
<span class="next operation">
11+
<ArrowRightIcon class="icon" />
12+
</span>
13+
</div>
14+
</template>
15+
16+
<style lang="postcss" scoped>
17+
.paganation {
18+
@apply inline-flex justify-center items-center flex-wrap;
19+
}
20+
.operation {
21+
@apply w-8 h-8 inline-flex justify-center items-center;
22+
}
23+
</style>

0 commit comments

Comments
 (0)