webui: add story in bangumi card.

This commit is contained in:
EstrellaXD
2023-09-01 17:10:02 +08:00
parent f8fdd16010
commit f204bcd6b6
4 changed files with 72 additions and 33 deletions

View File

@@ -60,7 +60,9 @@ async function addRss() {
window.loading = true;
const data = await apiDownload.analysis(rss.value);
window.loading = false;
const response = await apiRSS.add(rss.value);
message.success(response.msg_en);
console.log('rss', response);
rule.value = data;
window.next = true;
window.rule = true;

View File

@@ -0,0 +1,28 @@
import type { Meta, StoryObj} from "@storybook/vue3";
import AbBangumiCard from "./ab-bangumi-card.vue";
const meta: Meta<typeof AbBangumiCard> = {
title: "components/ab-bangumi-card",
component: AbBangumiCard,
}
export default meta;
type Story = StoryObj<typeof AbBangumiCard>;
export const Template: Story = {
render: (args) => ({
components: { AbBangumiCard },
setup() {
return { args };
},
template: '<ab-bangumi-card v-bind="args" />',
}),
args: {
poster: "images/Bangumi/202306/b56b49ea.jpg",
name: "魔法少女小圆",
season: 1,
}
}

View File

@@ -1,13 +1,14 @@
<script lang="ts" setup>
import { ErrorPicture, Write } from '@icon-park/vue-next';
import {ErrorPicture, Write} from '@icon-park/vue-next';
withDefaults(
defineProps<{
poster: string;
name: string;
season: number;
}>(),
{}
defineProps<{
poster: string;
name: string;
season: number;
group: string;
}>(),
{}
);
defineEmits(['click']);
@@ -18,48 +19,55 @@ defineEmits(['click']);
<div rounded-4px overflow-hidden poster-shandow rel>
<div w-full h-210px>
<template v-if="poster !== ''">
<img :src="`https://mikanani.me${poster}`" alt="poster" wh-full />
<img :src="`https://mikanani.me${poster}`" alt="poster" wh-full/>
</template>
<template v-else>
<div wh-full f-cer border="1 white">
<ErrorPicture theme="outline" size="24" fill="#333" />
<ErrorPicture theme="outline" size="24" fill="#333"/>
</div>
</template>
</div>
<div
abs
f-cer
z-1
inset-0
opacity-0
transition-all
duration-300
hover:backdrop-blur-2px
hover:bg-white
hover:bg-opacity-30
hover:opacity-100
active:duration-0
active:bg-opacity-60
class="group"
abs
f-cer
z-1
inset-0
opacity-0
transition-all
duration-300
hover:backdrop-blur-2px
hover:bg-white
hover:bg-opacity-30
hover:opacity-100
active:duration-0
active:bg-opacity-60
class="group"
>
<div
text-white
rounded="1/2"
wh-44px
f-cer
bg-theme-row
class="group-active:poster-pen-active"
text-white
rounded="1/2"
wh-44px
f-cer
bg-theme-row
class="group-active:poster-pen-active"
>
<Write size="20" />
<Write size="20"/>
</div>
</div>
</div>
<div px-4px py-8px>
<div px-4px py-4px>
<div text-h3 truncate>{{ name }}</div>
<div text-main>Season {{ season }}</div>
<div flex space-x-4px>
<ab-tag
:title="`Season ${season}`"
/>
<ab-tag
:title="group"
/>
</div>
</div>
</div>
</template>

View File

@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
AbContainer: typeof import('./../../src/components/ab-container.vue')['default']
AbEditRule: typeof import('./../../src/components/ab-edit-rule.vue')['default']
AbFoldPanel: typeof import('./../../src/components/ab-fold-panel.vue')['default']
AbInfoCard: typeof import('./../../src/components/ab-info-card.vue')['default']
AbLabel: typeof import('./../../src/components/ab-label.vue')['default']
AbPageTitle: typeof import('./../../src/components/basic/ab-page-title.vue')['default']
AbPopup: typeof import('./../../src/components/ab-popup.vue')['default']