webui: change v-bind model. add transition effect in mian page.

This commit is contained in:
EstrellaXD
2023-09-07 01:57:19 +08:00
parent 544dda81c4
commit 9953a76a39
7 changed files with 65 additions and 50 deletions

View File

@@ -89,6 +89,7 @@ class TorrentManager(Database):
)
def enable_rule(self, _id: str | int):
# TODO: to fix search_id
data = self.bangumi.search(int(_id))
if isinstance(data, Bangumi):
data.deleted = False

View File

@@ -79,7 +79,10 @@ def tmdb_parser(title, language) -> TMDBInfo | None:
original_title = info_content.get("original_name")
official_title = info_content.get("name")
year_number = info_content.get("first_air_date").split("-")[0]
poster_link = "https://image.tmdb.org/t/p/w300" + poster_path
if poster_path:
poster_link = "https://image.tmdb.org/t/p/w300" + poster_path
else:
poster_link = None
return TMDBInfo(
id,
official_title,

View File

@@ -12,6 +12,7 @@ def search_url(site: str, keywords: list[str]) -> RSSItem:
parser = "mikan" if site == "mikan" else "tmdb"
rss_item = RSSItem(
url=url,
aggregate=False,
parser=parser,
)
return rss_item

View File

@@ -18,6 +18,7 @@ SEARCH_KEY = [
BangumiJSON: TypeAlias = str
class SearchTorrent(RequestContent, RSSAnalyser):
def search_torrents(
self, rss_item: RSSItem, limit: int = 5
@@ -29,9 +30,11 @@ class SearchTorrent(RequestContent, RSSAnalyser):
rss_item = search_url(site, keywords)
torrents = self.search_torrents(rss_item)
# yield for EventSourceResponse (Server Send)
exist_list = []
for torrent in torrents:
bangumi = self.torrent_to_data(torrent=torrent, rss=rss_item)
if bangumi:
if bangumi and bangumi not in exist_list:
exist_list.append(bangumi)
yield json.dumps(bangumi.dict(), separators=(',', ':'))
def search_season(self, data: Bangumi):

View File

@@ -1,13 +1,11 @@
<script lang="ts" setup>
import {ErrorPicture, Write} from '@icon-park/vue-next';
import type {BangumiRule} from "#/bangumi";
withDefaults(
defineProps<{
type?: 'primary' | 'search' | 'mobile';
poster: string;
name: string;
season: number;
group?: string;
bangumi: BangumiRule;
}>(),
{
type: 'primary',
@@ -21,8 +19,8 @@ defineEmits(['click']);
<div v-if="type === 'primary'" w-150px is-btn @click="() => $emit('click')">
<div rounded-4px overflow-hidden poster-shandow rel>
<div w-full h-210px>
<template v-if="poster !== ''">
<img :src="poster" alt="poster" wh-full/>
<template v-if="bangumi.poster_link">
<img :src="bangumi.poster_link" alt="poster" wh-full/>
</template>
<template v-else>
@@ -62,9 +60,9 @@ defineEmits(['click']);
</div>
<div py-4px>
<div text-h3 truncate>{{ name }}</div>
<div text-h3 truncate>{{ bangumi.official_title }}</div>
<ab-tag
:title="`Season ${season}`"
:title="`Season ${bangumi.season}`"
type="primary"
/>
</div>
@@ -76,8 +74,8 @@ defineEmits(['click']);
space-x-16px>
<div w-400px space-x-16px fx-cer>
<div h-44px w-72px rounded-6px overflow-hidden>
<template v-if="poster !== ''">
<img :src="poster" alt="poster" w-full class="search-image"/>
<template v-if="bangumi.poster_link">
<img :src="bangumi.poster_link" alt="poster" w-full class="search-image"/>
</template>
<template v-else>
@@ -87,15 +85,15 @@ defineEmits(['click']);
</template>
</div>
<div flex-col space-y-4px>
<div w-300px text-h3 text-primary truncate>{{ name }}</div>
<div w-300px text-h3 text-primary truncate>{{ bangumi.official_title }}</div>
<div flex space-x-8px>
<ab-tag
:title="`Season ${season}`"
:title="`Season ${bangumi.season}`"
type="primary"
/>
<ab-tag
v-if="group !== ''"
:title="group"
v-if="bangumi.group_name !== ''"
:title="bangumi.group_name"
type="primary"
/>
</div>

View File

@@ -6,7 +6,7 @@ import {ref} from 'vue';
const inputValue = ref<string>('');
const selectingProvider = ref<boolean>(false);
const {input$, provider, providers, getProviders, bangumiList } = useSearchStore();
const {input$, provider, providers, getProviders, bangumiList} = useSearchStore();
/**
* - 输入中 debounce 600ms 后触发搜索
@@ -15,17 +15,17 @@ const {input$, provider, providers, getProviders, bangumiList } = useSearchStore
*/
function onInput (e: Event) {
function onInput(e: Event) {
const value = (e.target as HTMLInputElement).value;
input$.next(value);
inputValue.value = value;
}
function onSearch () {
function onSearch() {
input$.next(inputValue.value);
}
function onSelect (site: string) {
function onSelect(site: string) {
provider.value = site;
selectingProvider.value = !selectingProvider.value
onSearch();
@@ -105,18 +105,17 @@ onMounted(() => {
</div>
</div>
</div>
<div
abs top-84px left-200px z-98
>
<ab-bangumi-card
v-for="(item, index) in bangumiList"
:key="index"
:poster="item.poster_link ?? ''"
:name="item.official_title"
:season="item.season"
:group="item.group_name"
/>
</div>
<div
abs top-84px left-200px space-y-8px z-98
>
<ab-bangumi-card
v-for="(item, index) in bangumiList"
:key="index"
:bangumi="item"
type="search"
transition-all
/>
</div>
</template>
<style lang="scss" scoped>
@@ -125,4 +124,8 @@ onMounted(() => {
background: #4E2A94;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .3s;
}
</style>

View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
const { bangumi, editRule } = storeToRefs(useBangumiStore());
const { getAll, updateRule, enableRule, openEditPopup, ruleManage } =
useBangumiStore();
const {bangumi, editRule} = storeToRefs(useBangumiStore());
const {getAll, updateRule, enableRule, openEditPopup, ruleManage} =
useBangumiStore();
onActivated(() => {
getAll();
@@ -15,26 +15,32 @@ definePage({
<template>
<div overflow-auto mt-12px flex-grow>
<div flex="~ wrap" gap-y-12px gap-x-32px>
<ab-bangumi-card
v-for="i in bangumi"
:key="i.id"
:class="[i.deleted && 'grayscale']"
:poster="i.poster_link ?? ''"
:name="i.official_title"
:season="i.season"
type="primary"
@click="() => openEditPopup(i)"
></ab-bangumi-card>
<transition-group name="fade">
<ab-bangumi-card
v-for="i in bangumi"
:key="i.id"
:class="[i.deleted && 'grayscale']"
:bangumi="i"
type="primary"
@click="() => openEditPopup(i)"
></ab-bangumi-card>
</transition-group>
<ab-edit-rule
v-model:show="editRule.show"
v-model:rule="editRule.item"
@enable="(id) => enableRule(id)"
@delete-file="
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.id, rule)"
@apply="(rule) => updateRule(rule.id, rule)"
></ab-edit-rule>
</div>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .3s;
}
</style>