Initialize AutoLibrary website with Gitea deployment

frontend/src/components/ThemeEditor.vue

@@ -0,0 +1,89 @@
+<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>