90 lines
2.8 KiB
Vue
90 lines
2.8 KiB
Vue
<script setup lang="ts">
|
||
import { ref, watch } from 'vue'
|
||
import type { ThemeFields } from '../types'
|
||
const model = defineModel<ThemeFields>({ required: true })
|
||
defineProps<{ requireFile?: boolean; preview?: string }>()
|
||
const emit = defineEmits<{ file: [file: File | null]; preview: [file: File | null] }>()
|
||
const tags = ref(model.value.tags.join(', '))
|
||
watch(tags, (value) => {
|
||
model.value.tags = [
|
||
...new Set(
|
||
value
|
||
.split(/[,，]/)
|
||
.map((v) => v.trim())
|
||
.filter(Boolean),
|
||
),
|
||
]
|
||
})
|
||
function selected(event: Event, kind: 'file' | 'preview') {
|
||
const file = (event.target as HTMLInputElement).files?.[0] || null
|
||
if (kind === 'file') emit('file', file)
|
||
else emit('preview', file)
|
||
}
|
||
</script>
|
||
<template>
|
||
<div class="form-stack">
|
||
<div class="form-columns">
|
||
<label>
|
||
主题名称
|
||
<input v-model="model.name" required maxlength="80" placeholder="为你的主题起个名字" />
|
||
</label>
|
||
<label>
|
||
外观模式
|
||
<select v-model="model.need_theme" required>
|
||
<option value="both">深浅通用</option>
|
||
<option value="dark">深色</option>
|
||
<option value="light">浅色</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<label>
|
||
一句话介绍
|
||
<span class="caption">{{ model.brief.length }}/50</span>
|
||
<input v-model="model.brief" required maxlength="50" placeholder="这个主题有什么特别之处？" />
|
||
</label>
|
||
<label>
|
||
详细说明
|
||
<span class="caption">{{ model.description.length }}/100</span>
|
||
<textarea
|
||
v-model="model.description"
|
||
rows="4"
|
||
maxlength="100"
|
||
placeholder="介绍你的设计，也可以说明使用方法。"
|
||
/>
|
||
</label>
|
||
<div class="form-columns">
|
||
<label>
|
||
主题版本
|
||
<input v-model="model.version" required maxlength="40" placeholder="1.0.0" />
|
||
</label>
|
||
<label>
|
||
最低兼容版本
|
||
<input v-model="model.compat_version" required maxlength="40" placeholder="1.0.0" />
|
||
</label>
|
||
</div>
|
||
<label>
|
||
标签
|
||
<span class="muted">（用逗号分隔）</span>
|
||
<input v-model="tags" maxlength="200" placeholder="简约, 护眼, 绿色" />
|
||
</label>
|
||
<div class="form-columns">
|
||
<label>
|
||
主题文件
|
||
<span class="caption">.qss</span>
|
||
<input
|
||
type="file"
|
||
accept=".qss"
|
||
:required="requireFile"
|
||
@change="selected($event, 'file')"
|
||
/>
|
||
</label>
|
||
<label>
|
||
预览图片
|
||
<span class="caption">PNG / JPG，可选</span>
|
||
<input type="file" accept="image/png,image/jpeg" @change="selected($event, 'preview')" />
|
||
</label>
|
||
</div>
|
||
<img v-if="preview" class="editor-preview" :src="preview" alt="当前预览图片" />
|
||
</div>
|
||
</template>
|