Bilibili-Evolved/registry/lib/components/feeds/extend-live/ExtraOptions.vue
2025-05-28 19:58:05 +08:00

58 lines
1.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="extend-feeds-live-extra-options">
<div class="extend-feeds-live-extra-option">
<div class="extend-feeds-live-extra-option-header">置顶列表</div>
<div class="extend-feeds-live-extra-option-description">
配置直播信息扩充要展示的置顶列表置顶列表中的用户会排序到上方
</div>
<FollowingListSelect :value="pinnedListID" @change="handlePinnedListChange" />
</div>
<div class="extend-feeds-live-extra-option">
<div class="extend-feeds-live-extra-option-header">隐藏列表</div>
<div class="extend-feeds-live-extra-option-description">
配置直播信息扩充要展示的隐藏列表隐藏列表中的用户会被隐藏优先级高于置顶列表
</div>
<FollowingListSelect :value="hiddenListID" @change="handleHiddenListChange" />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import FollowingListSelect from './FollowingListSelect.vue'
import { getComponentSettings } from '@/core/settings'
import { ExtendFeedsLiveOptions } from './options'
import { FollowingListID } from './types'
const { options } = getComponentSettings<ExtendFeedsLiveOptions>('extendFeedsLive')
const pinnedListID = ref(options.pinnedListID)
const handlePinnedListChange = (value: FollowingListID) => {
options.pinnedListID = value
pinnedListID.value = value
}
const hiddenListID = ref(options.hiddenListID)
const handleHiddenListChange = (value: FollowingListID) => {
options.hiddenListID = value
hiddenListID.value = value
}
</script>
<style lang="scss">
@import 'common';
.extend-feeds-live-extra-options {
margin-top: 8px;
@include v-stretch(12px);
.extend-feeds-live-extra-option {
@include v-stretch(8px);
&-header {
@include semi-bold();
}
&-description {
font-size: 12px;
opacity: 0.75;
}
}
}
</style>