Skip to content

Commit

Permalink
feat: rating index ui
Browse files Browse the repository at this point in the history
Signed-off-by: Dup4 <lyuzhi.pan@gmail.com>
  • Loading branch information
Dup4 committed Jan 23, 2024
1 parent 95e6409 commit 207d583
Show file tree
Hide file tree
Showing 6 changed files with 280 additions and 5 deletions.
6 changes: 6 additions & 0 deletions packages/apps/board/src/auto-imports.d.ts
Expand Up @@ -13,6 +13,8 @@ declare global {
const EffectScope: typeof import('vue')['EffectScope']
const LastBlockDisplayType: typeof import('./composables/type')['LastBlockDisplayType']
const Pagination: typeof import('./composables/pagination')['Pagination']
const RATING_DATA_HOST: typeof import('./composables/constant')['RATING_DATA_HOST']
const RATING_TITLE_SUFFIX: typeof import('./composables/constant')['RATING_TITLE_SUFFIX']
const RESOLVER_TITLE_SUFFIX: typeof import('./composables/constant')['RESOLVER_TITLE_SUFFIX']
const TITLE_SUFFIX: typeof import('./composables/constant')['TITLE_SUFFIX']
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
Expand Down Expand Up @@ -335,6 +337,8 @@ declare module 'vue' {
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
readonly LastBlockDisplayType: UnwrapRef<typeof import('./composables/type')['LastBlockDisplayType']>
readonly Pagination: UnwrapRef<typeof import('./composables/pagination')['Pagination']>
readonly RATING_DATA_HOST: UnwrapRef<typeof import('./composables/constant')['RATING_DATA_HOST']>
readonly RATING_TITLE_SUFFIX: UnwrapRef<typeof import('./composables/constant')['RATING_TITLE_SUFFIX']>
readonly RESOLVER_TITLE_SUFFIX: UnwrapRef<typeof import('./composables/constant')['RESOLVER_TITLE_SUFFIX']>
readonly TITLE_SUFFIX: UnwrapRef<typeof import('./composables/constant')['TITLE_SUFFIX']>
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
Expand Down Expand Up @@ -643,6 +647,8 @@ declare module '@vue/runtime-core' {
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
readonly LastBlockDisplayType: UnwrapRef<typeof import('./composables/type')['LastBlockDisplayType']>
readonly Pagination: UnwrapRef<typeof import('./composables/pagination')['Pagination']>
readonly RATING_DATA_HOST: UnwrapRef<typeof import('./composables/constant')['RATING_DATA_HOST']>
readonly RATING_TITLE_SUFFIX: UnwrapRef<typeof import('./composables/constant')['RATING_TITLE_SUFFIX']>
readonly RESOLVER_TITLE_SUFFIX: UnwrapRef<typeof import('./composables/constant')['RESOLVER_TITLE_SUFFIX']>
readonly TITLE_SUFFIX: UnwrapRef<typeof import('./composables/constant')['TITLE_SUFFIX']>
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
Expand Down
1 change: 1 addition & 0 deletions packages/apps/board/src/components.d.ts
Expand Up @@ -35,6 +35,7 @@ declare module 'vue' {
ProblemBlock: typeof import('./components/board/ProblemBlock.vue')['default']
ProblemInfoModal: typeof import('./components/board/ProblemInfoModal.vue')['default']
Progress: typeof import('./components/board/Progress.vue')['default']
RatingIndexUI: typeof import('./components/RatingIndexUI.vue')['default']
RightArrowIcon: typeof import('./components/icon/RightArrowIcon.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
Expand Down
173 changes: 173 additions & 0 deletions packages/apps/board/src/components/RatingIndexUI.vue
@@ -0,0 +1,173 @@
<script setup lang="ts">
import { useElementVisibility } from "@vueuse/core";
import type { IRatingIndex } from "@xcpcio/types/index";
const props = defineProps<{
ratingIndex: IRatingIndex
}>();
const ratingIndex = computed(() => props.ratingIndex);
const el = ref(null);
const isVisible = useElementVisibility(el);
const link = computed(() => {
return `/rating/${ratingIndex.value.id}`;
});
</script>

<template>
<div ref="el">
<div h-22>
<div
v-if="isVisible"
>
<div
w-238
flex flex-col justify-center
font-serif pb-2
border="b-2 gray-200 dark:gray-700"
>
<div
w-full flex
>
<div
class="title"
w-inherit
>
<Tooltip>
<div
overflow-hidden
text-2xl truncate
>
{{ ratingIndex.name }}
</div>

<template #popper>
<div
text-lg
>
{{ ratingIndex.name }}
</div>
</template>
</Tooltip>
</div>

<div float-right>
<RouterLink
class="go MuiIconButton-root"
:to="link"
>
<span class="MuiIconButton-label">
<RightArrowIcon />
</span>
</RouterLink>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<style scoped>
.logo {
float: left;
text-align: left;
font-size: 16px;
padding-top: 12px;
padding-right: 8px;
}
.title {
--scroll-bar: 0;
font-variant: tabular-nums;
line-height: 1.5715;
box-sizing: border-box;
position: relative;
text-align: left;
font-weight: 400;
padding-left: 0px;
padding-right: 16px;
padding-top: 12px;
padding-bottom: 12px;
}
.MuiIconButton-root {
-webkit-font-smoothing: antialiased;
font-weight: 400;
line-height: 1.43;
letter-spacing: 0.01071em;
box-sizing: inherit;
border: 0;
cursor: pointer;
margin: 0;
display: inline-flex;
outline: 0;
position: relative;
align-items: center;
user-select: none;
vertical-align: middle;
justify-content: center;
text-decoration: none;
background-color: transparent;
-webkit-tap-highlight-color: transparent;
flex: 0 0 auto;
color: rgba(0, 0, 0, 0.54);
padding: 12px;
overflow: visible;
font-size: 1.5rem;
text-align: center;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
border-radius: 50%;
}
.MuiIconButton-label {
-webkit-font-smoothing: antialiased;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
line-height: 1.43;
letter-spacing: 0.01071em;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
color: rgba(0, 0, 0, 0.54);
font-size: 1.5rem;
text-align: center;
box-sizing: inherit;
width: 100%;
display: flex;
align-items: inherit;
justify-content: inherit;
}
.go {
text-decoration: none;
color: #121314;
position: relative;
}
.go:after {
content: "";
position: absolute;
z-index: -1;
top: 60%;
left: -0.1em;
right: -0.1em;
bottom: 0;
transition: top 200ms cubic-bezier(0, 0.8, 0.13, 1);
background-color: #91d5ff;
}
.go:hover:after {
top: 0%;
}
.loading {
height: calc(100vh);
display: flex;
justify-content: center;
align-items: center;
}
</style>
6 changes: 6 additions & 0 deletions packages/apps/board/src/composables/constant.ts
@@ -1,4 +1,5 @@
export const TITLE_SUFFIX = "Board - XCPCIO";
export const RATING_TITLE_SUFFIX = "Rating - XCPCIO";
export const BALLOON_TITLE_SUFFIX = "Balloon - XCPCIO";
export const RESOLVER_TITLE_SUFFIX = "Resolver - XCPCIO";
export const COUNTDOWN_TITLE_SUFFIX = "Countdown - XCPCIO";
Expand All @@ -19,6 +20,11 @@ export const DATA_HOST = computed(() => {
return window.DATA_HOST;
});

export const RATING_DATA_HOST = computed(() => {
const dataHost = DATA_HOST.value;
return dataHost.replace("/data/", "/rating-data/");
});

export const DATA_REGION = computed(() => {
if (!window) {
return "";
Expand Down
86 changes: 86 additions & 0 deletions packages/apps/board/src/pages/rating/index.vue
@@ -0,0 +1,86 @@
<script setup lang="ts">
import { useFetch } from "@vueuse/core";
import type { IRatingIndex } from "@xcpcio/types";
const { t } = useI18n();
useTitle(RATING_TITLE_SUFFIX);
function genURL() {
return `${RATING_DATA_HOST.value}index/index.json`;
}
const url = ref(genURL());
const indexList = ref([] as IRatingIndex[]);
const {
error,
isFetching,
isFinished,
} = useFetch(url, {
refetch: true,
afterFetch: (ctx) => {
indexList.value = JSON.parse(ctx.data) as IRatingIndex[];
return ctx;
},
}).get();
</script>

<template>
<div
class="sm:w-[1024px] lg:w-screen"
lg:of-x-hidden
flex flex-col justify-center items-center
>
<div>
<div
v-if="isFetching || error"
mt-4 mb-4
class="sm:w-[1000px] lg:w-screen"
flex justify-center items-center
>
<div
v-if="isFetching"
>
{{ t("common.loading") }}...
</div>

<div
v-if="error"
>
{{ error }}
</div>
</div>

<div
v-if="isFinished"
class="sm:w-[1000px] lg:w-screen min-h-120"
flex flex-col items-center
>
<div
v-if="indexList.length"
mt-4
>
<template
v-for="item in indexList"
:key="item.id"
>
<RatingIndexUI
:rating-index="item"
/>
</template>
</div>

<div v-else p10>
<div op40 italic mb5>
No result found
</div>
</div>
</div>
</div>
</div>
</template>

<route lang="yaml">
meta:
layout: index-layout
</route>
13 changes: 8 additions & 5 deletions packages/apps/board/vite.config.ts
Expand Up @@ -20,6 +20,12 @@ import { createHtmlPlugin } from "vite-plugin-html";

import packageJSON from "./package.json";

const proxyConfig = {
// target: "https://board.xcpcio.com",
target: "http://127.0.0.1:8080",
changeOrigin: true,
};

export default defineConfig({
resolve: {
alias: {
Expand Down Expand Up @@ -185,11 +191,8 @@ export default defineConfig({
server: {
host: true,
proxy: {
"/data": {
// target: "https://board.xcpcio.com",
target: "http://127.0.0.1:8080",
changeOrigin: true,
},
"/data": proxyConfig,
"/rating-data": proxyConfig,
},
},

Expand Down

0 comments on commit 207d583

Please sign in to comment.