mirror of
https://github.com/EstrellaXD/Auto_Bangumi.git
synced 2026-11-05 23:18:56 +08:00
Change Vue page with route name as page title
研究了下发现$route.name不能用i18n给的变量赋值，于是把index.vue里的title部分挪到各个文件里，并微调了下缩进保持格式一致（显示修改很多，实际只有几行） I don't think using route.name as H1 title is a good choice since variable from i18n cannot be assigned to $route.name. So I move title part of index.vue to separate files and adjust indentation to make it looks clear.
This commit is contained in:
umbor
@@ -13,15 +13,12 @@ definePage({
|
||||
<ab-sidebar />
|
||||
|
||||
<div layout-content>
|
||||
<ab-page-title :title="$route.name"></ab-page-title>
|
||||
|
||||
<div overflow-auto mt-12px flex-grow>
|
||||
<RouterView v-slot="{ Component }">
|
||||
<KeepAlive>
|
||||
<component :is="Component" />
|
||||
</KeepAlive>
|
||||
</RouterView>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -93,25 +93,28 @@ definePage({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex="~ wrap" gap-y-12px gap-x-50px>
|
||||
<ab-bangumi-card
|
||||
v-for="i in data"
|
||||
:key="i.id"
|
||||
:class="[i.deleted && 'grayscale']"
|
||||
:poster="i.poster_link ?? ''"
|
||||
:name="i.official_title"
|
||||
:season="i.season"
|
||||
@click="() => open(i)"
|
||||
></ab-bangumi-card>
|
||||
|
||||
<ab-edit-rule
|
||||
v-model:show="editRule.show"
|
||||
v-model:rule="editRule.item"
|
||||
@enable="(id) => enableRule(id)"
|
||||
@delete-file="
|
||||
(type, { id, deleteFile }) => ruleManage(type, id, deleteFile)
|
||||
"
|
||||
@apply="(rule) => updateRule(rule)"
|
||||
></ab-edit-rule>
|
||||
<ab-page-title :title="$t('homepage.title')"></ab-page-title>
|
||||
<div overflow-auto mt-12px flex-grow>
|
||||
<div flex="~ wrap" gap-y-12px gap-x-50px>
|
||||
<ab-bangumi-card
|
||||
v-for="i in data"
|
||||
:key="i.id"
|
||||
:class="[i.deleted && 'grayscale']"
|
||||
:poster="i.poster_link ?? ''"
|
||||
:name="i.official_title"
|
||||
:season="i.season"
|
||||
@click="() => open(i)"
|
||||
></ab-bangumi-card>
|
||||
|
||||
<ab-edit-rule
|
||||
v-model:show="editRule.show"
|
||||
v-model:rule="editRule.item"
|
||||
@enable="(id) => enableRule(id)"
|
||||
@delete-file="
|
||||
(type, { id, deleteFile }) => ruleManage(type, id, deleteFile)
|
||||
"
|
||||
@apply="(rule) => updateRule(rule)"
|
||||
></ab-edit-rule>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
<script lang="ts">
|
||||
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { string } from 'yargs';
|
||||
import { thisTypeAnnotation } from '@babel/types';
|
||||
|
||||
const { getConfig, setConfig } = useConfigStore();
|
||||
|
||||
getConfig();
|
||||
@@ -9,30 +15,33 @@ definePage({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div h-full flex="~ col">
|
||||
<div grid="~ cols-2" gap-20px mb-auto>
|
||||
<div space-y-20px>
|
||||
<config-normal></config-normal>
|
||||
|
||||
<config-parser></config-parser>
|
||||
|
||||
<config-download></config-download>
|
||||
|
||||
<config-manage></config-manage>
|
||||
<ab-page-title :title="$t('config.title')"></ab-page-title>
|
||||
<div overflow-auto mt-12px flex-grow>
|
||||
<div h-full flex="~ col">
|
||||
<div grid="~ cols-2" gap-20px mb-auto>
|
||||
<div space-y-20px>
|
||||
<config-normal></config-normal>
|
||||
|
||||
<config-parser></config-parser>
|
||||
|
||||
<config-download></config-download>
|
||||
|
||||
<config-manage></config-manage>
|
||||
</div>
|
||||
|
||||
<div space-y-20px>
|
||||
<config-notification></config-notification>
|
||||
|
||||
<config-proxy></config-proxy>
|
||||
|
||||
<config-player></config-player>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div space-y-20px>
|
||||
<config-notification></config-notification>
|
||||
|
||||
<config-proxy></config-proxy>
|
||||
|
||||
<config-player></config-player>
|
||||
|
||||
<div fx-cer justify-end gap-8px mt-20px>
|
||||
<ab-button type="warn" @click="getConfig">{{$t('config.cancel')}}</ab-button>
|
||||
<ab-button @click="setConfig">{{$t('config.apply')}}</ab-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div fx-cer justify-end gap-8px mt-20px>
|
||||
<ab-button type="warn" @click="getConfig">Cancel</ab-button>
|
||||
<ab-button @click="setConfig">Apply</ab-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -16,96 +16,99 @@ definePage({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div flex="~ wrap" gap-12px>
|
||||
<ab-container title="Log" w-660px grow>
|
||||
<div
|
||||
rounded-10px
|
||||
border="1px solid black"
|
||||
overflow-auto
|
||||
p-10px
|
||||
max-h-60vh
|
||||
>
|
||||
<pre text-main>{{ log }}</pre>
|
||||
</div>
|
||||
|
||||
<div flex="~ justify-end" space-x-10px mt-12px>
|
||||
<ab-button type="warn" size="small" @click="reset">Reset</ab-button>
|
||||
<ab-button size="small" @click="copy">Copy</ab-button>
|
||||
</div>
|
||||
</ab-container>
|
||||
|
||||
<div grow w-500px space-y-20px>
|
||||
<ab-container title="Contact Infomation">
|
||||
<div space-y-12px>
|
||||
<ab-label label="Github">
|
||||
<ab-button
|
||||
size="small"
|
||||
link="https://github.com/EstrellaXD/Auto_Bangumi"
|
||||
target="_blank"
|
||||
>
|
||||
Go
|
||||
</ab-button>
|
||||
</ab-label>
|
||||
|
||||
<ab-label label="WebUI Repo">
|
||||
<ab-button
|
||||
size="small"
|
||||
link="https://github.com/Rewrite0/Auto_Bangumi_WebUI"
|
||||
target="_blank"
|
||||
>
|
||||
Go
|
||||
</ab-button>
|
||||
</ab-label>
|
||||
|
||||
<div line></div>
|
||||
|
||||
<ab-label label="Twitter">
|
||||
<ab-button
|
||||
size="small"
|
||||
link="https://twitter.com/Estrella_Pan"
|
||||
target="_blank"
|
||||
>
|
||||
Go
|
||||
</ab-button>
|
||||
</ab-label>
|
||||
|
||||
<ab-label label="Telegram Group">
|
||||
<ab-button
|
||||
size="small"
|
||||
link="https://t.me/autobangumi"
|
||||
target="_blank"
|
||||
>
|
||||
Join
|
||||
</ab-button>
|
||||
</ab-label>
|
||||
</div>
|
||||
</ab-container>
|
||||
|
||||
<ab-container title="Bug Report">
|
||||
<div space-y-12px>
|
||||
<ab-button
|
||||
mx-auto
|
||||
text-16px
|
||||
w-300px
|
||||
h-46px
|
||||
rounded-10px
|
||||
link="https://github.com/EstrellaXD/Auto_Bangumi/issues"
|
||||
>Github Issue</ab-button
|
||||
>
|
||||
|
||||
<div line></div>
|
||||
|
||||
<ab-button
|
||||
mx-auto
|
||||
text-16px
|
||||
w-300px
|
||||
h-46px
|
||||
rounded-10px
|
||||
link="mailto:estrellaxd05@gmail.com"
|
||||
>Email Contact</ab-button
|
||||
>
|
||||
<ab-page-title :title="$t('log.title')"></ab-page-title>
|
||||
<div overflow-auto mt-12px flex-grow>
|
||||
<div flex="~ wrap" gap-12px>
|
||||
<ab-container :title="$t('log.title')" w-660px grow>
|
||||
<div
|
||||
rounded-10px
|
||||
border="1px solid black"
|
||||
overflow-auto
|
||||
p-10px
|
||||
max-h-60vh
|
||||
>
|
||||
<pre text-main>{{ log }}</pre>
|
||||
</div>
|
||||
|
||||
<div flex="~ justify-end" space-x-10px mt-12px>
|
||||
<ab-button type="warn" size="small" @click="reset">{{$t('log.reset')}}</ab-button>
|
||||
<ab-button size="small" @click="copy">{{$t('log.copy')}}</ab-button>
|
||||
</div>
|
||||
</ab-container>
|
||||
|
||||
<div grow w-500px space-y-20px>
|
||||
<ab-container :title="$t('log.contactinfo')">
|
||||
<div space-y-12px>
|
||||
<ab-label label="Github">
|
||||
<ab-button
|
||||
size="small"
|
||||
link="https://github.com/EstrellaXD/Auto_Bangumi"
|
||||
target="_blank"
|
||||
>
|
||||
{{$t('log.go')}}
|
||||
</ab-button>
|
||||
</ab-label>
|
||||
|
||||
<ab-label label="WebUI Repo">
|
||||
<ab-button
|
||||
size="small"
|
||||
link="https://github.com/Rewrite0/Auto_Bangumi_WebUI"
|
||||
target="_blank"
|
||||
>
|
||||
{{$t('log.go')}}
|
||||
</ab-button>
|
||||
</ab-label>
|
||||
|
||||
<div line></div>
|
||||
|
||||
<ab-label label="Twitter">
|
||||
<ab-button
|
||||
size="small"
|
||||
link="https://twitter.com/Estrella_Pan"
|
||||
target="_blank"
|
||||
>
|
||||
{{$t('log.go')}}
|
||||
</ab-button>
|
||||
</ab-label>
|
||||
|
||||
<ab-label label="Telegram Group">
|
||||
<ab-button
|
||||
size="small"
|
||||
link="https://t.me/autobangumi"
|
||||
target="_blank"
|
||||
>
|
||||
{{$t('log.join')}}
|
||||
</ab-button>
|
||||
</ab-label>
|
||||
</div>
|
||||
</ab-container>
|
||||
|
||||
<ab-container :title="$t('log.bugrepo')">
|
||||
<div space-y-12px>
|
||||
<ab-button
|
||||
mx-auto
|
||||
text-16px
|
||||
w-300px
|
||||
h-46px
|
||||
rounded-10px
|
||||
link="https://github.com/EstrellaXD/Auto_Bangumi/issues"
|
||||
>Github Issue</ab-button
|
||||
>
|
||||
|
||||
<div line></div>
|
||||
|
||||
<ab-button
|
||||
mx-auto
|
||||
text-16px
|
||||
w-300px
|
||||
h-46px
|
||||
rounded-10px
|
||||
link="mailto:estrellaxd05@gmail.com"
|
||||
>Email Contact</ab-button
|
||||
>
|
||||
</div>
|
||||
</ab-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -7,22 +7,24 @@ const { url } = storeToRefs(usePlayerStore());
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<template v-if="url === ''">
|
||||
<div wh-full f-cer text-h1 text-primary>
|
||||
<RouterLink to="/config" hover:underline
|
||||
>Please set up the media player</RouterLink
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<iframe
|
||||
v-else
|
||||
:src="url"
|
||||
frameborder="0"
|
||||
allowfullscreen="true"
|
||||
w-full
|
||||
h-full
|
||||
flex-1
|
||||
rounded-12px
|
||||
></iframe>
|
||||
<ab-page-title :title="$t('player.title')"></ab-page-title>
|
||||
<div overflow-auto mt-12px flex-grow>
|
||||
<template v-if="url === ''">
|
||||
<div wh-full f-cer text-h1 text-primary>
|
||||
<RouterLink to="/config" hover:underline
|
||||
>{{ $t('player.hit')}}</RouterLink
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<iframe
|
||||
v-else
|
||||
:src="url"
|
||||
frameborder="0"
|
||||
allowfullscreen="true"
|
||||
w-full
|
||||
h-full
|
||||
flex-1
|
||||
rounded-12px
|
||||
></iframe>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user