mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-05 23:56:42 +08:00
优化示例UI
This commit is contained in:
jxxghp
@@ -1,74 +1,88 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="plugin-config">
|
<div class="plugin-config">
|
||||||
<v-card>
|
<v-card>
|
||||||
<v-card-title>插件配置</v-card-title>
|
<v-card-item>
|
||||||
<v-card-text>
|
<v-card-title>插件配置</v-card-title>
|
||||||
|
<template #append>
|
||||||
|
<v-btn color="primary" variant="text" @click="notifyClose">
|
||||||
|
<v-icon left>mdi-close</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
</v-card-item>
|
||||||
|
<v-card-text class="overflow-y-auto">
|
||||||
<v-alert v-if="error" type="error" class="mb-4">{{ error }}</v-alert>
|
<v-alert v-if="error" type="error" class="mb-4">{{ error }}</v-alert>
|
||||||
|
|
||||||
<v-form ref="form" v-model="isFormValid" @submit.prevent="saveConfig">
|
<v-form ref="form" v-model="isFormValid" @submit.prevent="saveConfig">
|
||||||
<!-- 基本设置区域 -->
|
<!-- 基本设置区域 -->
|
||||||
<div class="text-subtitle-1 font-weight-bold mt-4 mb-2">基本设置</div>
|
<div class="text-subtitle-1 font-weight-bold mt-4 mb-2">基本设置</div>
|
||||||
|
<v-row>
|
||||||
<v-text-field
|
<v-col cols="12">
|
||||||
v-model="config.name"
|
<v-text-field
|
||||||
label="插件名称"
|
v-model="config.name"
|
||||||
variant="outlined"
|
label="插件名称"
|
||||||
:rules="[v => !!v || '名称不能为空']"
|
variant="outlined"
|
||||||
hint="显示在插件列表中的名称"
|
:rules="[v => !!v || '名称不能为空']"
|
||||||
></v-text-field>
|
hint="显示在插件列表中的名称"
|
||||||
|
></v-text-field>
|
||||||
<v-textarea
|
</v-col>
|
||||||
v-model="config.description"
|
<v-col cols="12">
|
||||||
label="插件描述"
|
<v-textarea
|
||||||
variant="outlined"
|
v-model="config.description"
|
||||||
rows="3"
|
label="插件描述"
|
||||||
hint="简要说明插件的功能和用途"
|
variant="outlined"
|
||||||
></v-textarea>
|
rows="3"
|
||||||
|
hint="简要说明插件的功能和用途"
|
||||||
|
></v-textarea>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
<!-- 功能配置区域 -->
|
<!-- 功能配置区域 -->
|
||||||
<div class="text-subtitle-1 font-weight-bold mt-4 mb-2">功能配置</div>
|
<div class="text-subtitle-1 font-weight-bold mt-4 mb-2">功能配置</div>
|
||||||
|
<v-row>
|
||||||
<v-switch
|
<v-col cols="12">
|
||||||
v-model="config.enable_notifications"
|
<v-switch
|
||||||
label="启用通知"
|
v-model="config.enable_notifications"
|
||||||
color="primary"
|
label="启用通知"
|
||||||
inset
|
color="primary"
|
||||||
hint="接收插件状态变更通知"
|
inset
|
||||||
persistent-hint
|
hint="接收插件状态变更通知"
|
||||||
></v-switch>
|
persistent-hint
|
||||||
|
></v-switch>
|
||||||
<v-select
|
</v-col>
|
||||||
v-model="config.update_interval"
|
<v-col cols="12">
|
||||||
label="更新频率"
|
<v-select
|
||||||
:items="updateIntervalOptions"
|
v-model="config.update_interval"
|
||||||
variant="outlined"
|
label="更新频率"
|
||||||
item-title="text"
|
:items="updateIntervalOptions"
|
||||||
item-value="value"
|
variant="outlined"
|
||||||
></v-select>
|
item-title="text"
|
||||||
|
item-value="value"
|
||||||
|
></v-select>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
<!-- API配置区域 -->
|
<!-- API配置区域 -->
|
||||||
<div class="text-subtitle-1 font-weight-bold mt-4 mb-2">API设置</div>
|
<div class="text-subtitle-1 font-weight-bold mt-4 mb-2">API设置</div>
|
||||||
|
<v-row>
|
||||||
<v-text-field
|
<v-col cols="12" md="6">
|
||||||
v-model="config.api_url"
|
<v-text-field
|
||||||
label="API地址"
|
v-model="config.api_url"
|
||||||
variant="outlined"
|
label="API地址"
|
||||||
hint="外部服务API地址"
|
variant="outlined"
|
||||||
:rules="[v => !v || v.startsWith('http') || '请输入有效的URL']"
|
hint="外部服务API地址"
|
||||||
></v-text-field>
|
:rules="[v => !v || v.startsWith('http') || '请输入有效的URL']"
|
||||||
|
></v-text-field>
|
||||||
<v-text-field
|
</v-col>
|
||||||
v-model="config.api_key"
|
<v-col cols="12" md="6">
|
||||||
label="API密钥"
|
<v-text-field
|
||||||
variant="outlined"
|
v-model="config.api_key"
|
||||||
:append-inner-icon="showApiKey ? 'mdi-eye-off' : 'mdi-eye'"
|
label="API密钥"
|
||||||
:type="showApiKey ? 'text' : 'password'"
|
variant="outlined"
|
||||||
@click:append-inner="showApiKey = !showApiKey"
|
:append-inner-icon="showApiKey ? 'mdi-eye-off' : 'mdi-eye'"
|
||||||
></v-text-field>
|
:type="showApiKey ? 'text' : 'password'"
|
||||||
|
@click:append-inner="showApiKey = !showApiKey"
|
||||||
|
></v-text-field>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
<!-- 高级选项区域 -->
|
<!-- 高级选项区域 -->
|
||||||
<div class="text-subtitle-1 font-weight-bold mt-4 mb-2">高级选项</div>
|
|
||||||
|
|
||||||
<v-expansion-panels variant="accordion">
|
<v-expansion-panels variant="accordion">
|
||||||
<v-expansion-panel>
|
<v-expansion-panel>
|
||||||
<v-expansion-panel-title>高级选项</v-expansion-panel-title>
|
<v-expansion-panel-title>高级选项</v-expansion-panel-title>
|
||||||
@@ -96,10 +110,9 @@
|
|||||||
</v-form>
|
</v-form>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
|
<v-btn color="secondary" @click="resetForm">重置</v-btn>
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
<v-btn color="secondary" variant="outlined" @click="resetForm">重置</v-btn>
|
|
||||||
<v-btn color="primary" :disabled="!isFormValid" @click="saveConfig" :loading="saving">保存配置</v-btn>
|
<v-btn color="primary" :disabled="!isFormValid" @click="saveConfig" :loading="saving">保存配置</v-btn>
|
||||||
<v-btn color="primary" @click="notifyClose">关闭</v-btn>
|
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
</v-card>
|
</v-card>
|
||||||
</div>
|
</div>
|
||||||
@@ -208,4 +221,4 @@ function resetForm() {
|
|||||||
function notifyClose() {
|
function notifyClose() {
|
||||||
emit('close')
|
emit('close')
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,7 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="plugin-page">
|
<div class="plugin-page">
|
||||||
<v-card>
|
<v-card>
|
||||||
<v-card-title>{{ title }}</v-card-title>
|
<v-card-item>
|
||||||
|
<v-card-title>{{ title }}</v-card-title>
|
||||||
|
<template #append>
|
||||||
|
<v-btn color="primary" variant="text" @click="notifyClose">
|
||||||
|
<v-icon left>mdi-close</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
</v-card-item>
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
<v-alert v-if="error" type="error" class="mb-4">{{ error }}</v-alert>
|
<v-alert v-if="error" type="error" class="mb-4">{{ error }}</v-alert>
|
||||||
<v-skeleton-loader v-if="loading" type="card"></v-skeleton-loader>
|
<v-skeleton-loader v-if="loading" type="card"></v-skeleton-loader>
|
||||||
@@ -50,19 +57,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
<v-spacer></v-spacer>
|
|
||||||
<v-btn color="primary" @click="refreshData" :loading="loading">
|
<v-btn color="primary" @click="refreshData" :loading="loading">
|
||||||
<v-icon left>mdi-refresh</v-icon>
|
<v-icon left>mdi-refresh</v-icon>
|
||||||
刷新数据
|
刷新数据
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
<v-btn color="primary" @click="notifySwitch">
|
<v-btn color="primary" @click="notifySwitch">
|
||||||
<v-icon left>mdi-cog</v-icon>
|
<v-icon left>mdi-cog</v-icon>
|
||||||
配置
|
配置
|
||||||
</v-btn>
|
</v-btn>
|
||||||
<v-btn color="primary" @click="notifyClose">
|
|
||||||
<v-icon left>mdi-close</v-icon>
|
|
||||||
关闭
|
|
||||||
</v-btn>
|
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
</v-card>
|
</v-card>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user