mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-06 18:36:55 +08:00
添加布尔类型配置项,支持固定歌曲列表高度功能;优化动态表单组件
This commit is contained in:
@@ -3,7 +3,8 @@
|
|||||||
import { QueryPostAPI } from '@/api/query';
|
import { QueryPostAPI } from '@/api/query';
|
||||||
import { ConfigItemDefinition, TemplateConfigImageItem } from '@/data/VTsuruTypes';
|
import { ConfigItemDefinition, TemplateConfigImageItem } from '@/data/VTsuruTypes';
|
||||||
import { FILE_BASE_URL, VTSURU_API_URL } from '@/data/constants';
|
import { FILE_BASE_URL, VTSURU_API_URL } from '@/data/constants';
|
||||||
import { NButton, NColorPicker, NEmpty, NForm, NFormItem, NGrid, NInput, NInputNumber, NSlider, NUpload, UploadFileInfo, useMessage } from 'naive-ui';
|
import { Info24Filled } from '@vicons/fluent';
|
||||||
|
import { NButton, NCheckbox, NColorPicker, NEmpty, NForm, NFormItem, NGrid, NInput, NInputNumber, NSlider, NTooltip, NUpload, UploadFileInfo, useMessage } from 'naive-ui';
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
|
|
||||||
const message = useMessage();
|
const message = useMessage();
|
||||||
@@ -117,8 +118,8 @@
|
|||||||
<NInput
|
<NInput
|
||||||
:value="configData[item.key]"
|
:value="configData[item.key]"
|
||||||
:placeholder="item.placeholder"
|
:placeholder="item.placeholder"
|
||||||
@update:value="configData[item.key] = $event"
|
|
||||||
:type="item.inputType"
|
:type="item.inputType"
|
||||||
|
@update:value="configData[item.key] = $event"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<NColorPicker
|
<NColorPicker
|
||||||
@@ -141,6 +142,22 @@
|
|||||||
:step="item.step"
|
:step="item.step"
|
||||||
@update:value="configData[item.key] = $event"
|
@update:value="configData[item.key] = $event"
|
||||||
/>
|
/>
|
||||||
|
<template v-else-if="item.type == 'boolean'">
|
||||||
|
<NCheckbox
|
||||||
|
:checked="configData[item.key]"
|
||||||
|
@update:checked="configData[item.key] = $event">
|
||||||
|
启用
|
||||||
|
</NCheckbox>
|
||||||
|
<NTooltip
|
||||||
|
v-if="item.description"
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<template #trigger>
|
||||||
|
<NIcon :component="Info24Filled" />
|
||||||
|
</template>
|
||||||
|
{{ item.description }}
|
||||||
|
</NTooltip>
|
||||||
|
</template>
|
||||||
<NUpload
|
<NUpload
|
||||||
v-else-if="item.type == 'image'"
|
v-else-if="item.type == 'image'"
|
||||||
v-model:file-list="fileList[item.key]"
|
v-model:file-list="fileList[item.key]"
|
||||||
|
|||||||
@@ -103,6 +103,10 @@ export type TemplateConfigSliderNumberItem<T = unknown> = TemplateConfigItemWith
|
|||||||
export type TemplateConfigNumberArrayItem<T = unknown> = TemplateConfigItemWithType<T, number[]> & {
|
export type TemplateConfigNumberArrayItem<T = unknown> = TemplateConfigItemWithType<T, number[]> & {
|
||||||
type: 'numberArray';
|
type: 'numberArray';
|
||||||
};
|
};
|
||||||
|
export type TemplateConfigBooleanItem<T = unknown> = TemplateConfigItemWithType<T, boolean> & {
|
||||||
|
type: 'boolean';
|
||||||
|
description?: string; // 可选的描述
|
||||||
|
};
|
||||||
|
|
||||||
export type TemplateConfigImageItem<T = unknown> = TemplateConfigItemWithType<T, string[]> & {
|
export type TemplateConfigImageItem<T = unknown> = TemplateConfigItemWithType<T, string[]> & {
|
||||||
type: 'image';
|
type: 'image';
|
||||||
@@ -159,6 +163,7 @@ export type ConfigItemDefinition =
|
|||||||
| TemplateConfigImageItem<any>
|
| TemplateConfigImageItem<any>
|
||||||
| TemplateConfigRenderItem<any> // 包含优化后的 render/onUploaded 方法
|
| TemplateConfigRenderItem<any> // 包含优化后的 render/onUploaded 方法
|
||||||
| TemplateConfigSliderNumberItem<any>
|
| TemplateConfigSliderNumberItem<any>
|
||||||
|
| TemplateConfigBooleanItem<any>
|
||||||
| TemplateConfigColorItem<any>;
|
| TemplateConfigColorItem<any>;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -293,6 +293,13 @@ export const Config = defineTemplateConfig([
|
|||||||
config.background = url;
|
config.background = url;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: '固定歌曲列表高度',
|
||||||
|
type: 'boolean',
|
||||||
|
key: 'fixedHeight',
|
||||||
|
default: true,
|
||||||
|
description: '如果不勾选,歌曲较多时会整个页面滚动, 否则只会滚动歌单部分',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: '标题',
|
name: '标题',
|
||||||
type: 'string',
|
type: 'string',
|
||||||
@@ -629,15 +636,18 @@ export const Config = defineTemplateConfig([
|
|||||||
<n-button
|
<n-button
|
||||||
class="refresh-button"
|
class="refresh-button"
|
||||||
size="small"
|
size="small"
|
||||||
@click="randomOrder"
|
|
||||||
ghost
|
ghost
|
||||||
|
@click="randomOrder"
|
||||||
>
|
>
|
||||||
随机点歌
|
随机点歌
|
||||||
</n-button>
|
</n-button>
|
||||||
</n-flex>
|
</n-flex>
|
||||||
|
|
||||||
<!-- Song Table -->
|
<!-- Song Table -->
|
||||||
<div class="song-table-wrapper">
|
<div
|
||||||
|
class="song-table-wrapper"
|
||||||
|
:style="{ height: props.config?.fixedHeight ? '55vh' : 'none' }"
|
||||||
|
>
|
||||||
<table class="song-list-table">
|
<table class="song-list-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -718,7 +728,7 @@ export const Config = defineTemplateConfig([
|
|||||||
size="small"
|
size="small"
|
||||||
checkable
|
checkable
|
||||||
:checked="selectedTag === tag"
|
:checked="selectedTag === tag"
|
||||||
@checked-change="selectTag(tag)"
|
@update:checked="selectTag(tag)"
|
||||||
>
|
>
|
||||||
{{ tag }}
|
{{ tag }}
|
||||||
</n-tag>
|
</n-tag>
|
||||||
@@ -936,7 +946,7 @@ html.dark .song-list-background-wrapper::before {
|
|||||||
z-index: 2; /* Place above the ::before blur layer */
|
z-index: 2; /* Place above the ::before blur layer */
|
||||||
background: transparent !important; /* Ensure no background color obscures the wrapper */
|
background: transparent !important; /* Ensure no background color obscures the wrapper */
|
||||||
border-radius: inherit; /* Inherit rounding for scrollbar area */
|
border-radius: inherit; /* Inherit rounding for scrollbar area */
|
||||||
|
min-width: 400px;
|
||||||
/* Keep scrollbar styles */
|
/* Keep scrollbar styles */
|
||||||
&::-webkit-scrollbar { width: 8px; }
|
&::-webkit-scrollbar { width: 8px; }
|
||||||
&::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; }
|
&::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 4px; }
|
||||||
@@ -1107,10 +1117,12 @@ html.dark .song-list-container {
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
/* Scrollbar styling specific to this inner table scroll if needed */
|
/* Scrollbar styling specific to this inner table scroll if needed */
|
||||||
/* ... */
|
/* ... */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.song-list-table {
|
.song-list-table {
|
||||||
width: 100%; border-collapse: collapse; font-size: 0.9em;
|
width: 100%; border-collapse: collapse; font-size: 0.9em;
|
||||||
|
min-width: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.song-list-table thead th {
|
.song-list-table thead th {
|
||||||
|
|||||||
Reference in New Issue
Block a user