mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-11 21:06:56 +08:00
Megghy
07948e6777
- 完成弹幕机功能 - 在 .editorconfig 中新增对 vine.ts 文件的支持。 - 更新 package.json 中多个依赖的版本，提升稳定性和性能。 - 在 vite.config.mts 中引入 @guolao/vue-monaco-editor 插件，增强代码编辑功能。 - 在 App.vue 中调整内容填充的样式，优化界面布局。 - 新增获取配置文件哈希的 API 方法，提升配置管理能力。 - 在多个组件中优化了样式和逻辑，提升用户交互体验。
107 lines
2.9 KiB
Vue
107 lines
2.9 KiB
Vue
<template>
|
|
<yt-live-chat-paid-message-renderer
|
|
class="style-scope yt-live-chat-item-list-renderer"
|
|
allow-animations
|
|
:show-only-header="!content || undefined"
|
|
:style="{
|
|
'--yt-live-chat-paid-message-primary-color': color.contentBg,
|
|
'--yt-live-chat-paid-message-secondary-color': color.headerBg,
|
|
'--yt-live-chat-paid-message-header-color': color.header,
|
|
'--yt-live-chat-paid-message-author-name-color': color.authorName,
|
|
'--yt-live-chat-paid-message-timestamp-color': color.time,
|
|
'--yt-live-chat-paid-message-color': color.content
|
|
}"
|
|
:blc-price-level="priceConfig.priceLevel"
|
|
>
|
|
<div
|
|
id="card"
|
|
class="style-scope yt-live-chat-paid-message-renderer"
|
|
>
|
|
<div
|
|
id="header"
|
|
class="style-scope yt-live-chat-paid-message-renderer"
|
|
>
|
|
<img-shadow
|
|
id="author-photo"
|
|
height="40"
|
|
width="40"
|
|
class="style-scope yt-live-chat-paid-message-renderer"
|
|
:img-url="avatarUrl"
|
|
/>
|
|
<div
|
|
id="header-content"
|
|
class="style-scope yt-live-chat-paid-message-renderer"
|
|
>
|
|
<div
|
|
id="header-content-primary-column"
|
|
class="style-scope yt-live-chat-paid-message-renderer"
|
|
>
|
|
<div
|
|
id="author-name"
|
|
class="style-scope yt-live-chat-paid-message-renderer"
|
|
>
|
|
{{ authorName }}
|
|
</div>
|
|
<div
|
|
id="purchase-amount"
|
|
class="style-scope yt-live-chat-paid-message-renderer"
|
|
>
|
|
{{ showPriceText }}
|
|
</div>
|
|
</div>
|
|
<span
|
|
id="timestamp"
|
|
class="style-scope yt-live-chat-paid-message-renderer"
|
|
>{{ timeText }}</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="content"
|
|
class="style-scope yt-live-chat-paid-message-renderer"
|
|
>
|
|
<div
|
|
id="message"
|
|
dir="auto"
|
|
class="style-scope yt-live-chat-paid-message-renderer"
|
|
>
|
|
{{ content }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</yt-live-chat-paid-message-renderer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import ImgShadow from './ImgShadow.vue'
|
|
import * as constants from './constants'
|
|
import * as utils from './utils'
|
|
|
|
const props = defineProps({
|
|
avatarUrl: String,
|
|
authorName: String,
|
|
price: Number, // 价格，人民币
|
|
priceText: String,
|
|
time: Date,
|
|
content: String
|
|
})
|
|
|
|
const priceConfig = computed(() => {
|
|
return constants.getPriceConfig(props.price)
|
|
})
|
|
|
|
const color = computed(() => {
|
|
return priceConfig.value.colors
|
|
})
|
|
|
|
const showPriceText = computed(() => {
|
|
return props.priceText || `CN¥${utils.formatCurrency(props.price)}`
|
|
})
|
|
|
|
const timeText = computed(() => {
|
|
return utils.getTimeTextHourMin(props.time)
|
|
})
|
|
</script>
|
|
|
|
<style src="@/assets/css/youtube/yt-live-chat-paid-message-renderer.css"></style>
|