koishi-plugin-media-luna 0.0.6 → 0.0.7

package/client/components/GenerateView.vue

@@ -24,14 +24,7 @@
 
               <div class="form-item">
                 <div class="label">预设模板</div>
-                <el-select v-model="presetId" placeholder="选择预设模板 (可选)" style="width: 100%" clearable @change="applyPreset">
-                  <el-option
-                    v-for="preset in presets"
-                    :key="preset.id"
-                    :label="preset.name"
-                    :value="preset.id"
-                  />
-                </el-select>
+                <PresetPicker v-model="presetId" :presets="presets" />
               </div>
             </div>
 
@@ -213,6 +206,7 @@ import { ChannelConfig, PresetData, GenerationResult, ClientFileData } from '../
 import { channelApi, presetApi, generateApi, taskApi } from '../api'
 import HistoryGallery from './HistoryGallery.vue'
 import ImageLightbox from './ImageLightbox.vue'
+import PresetPicker from './PresetPicker.vue'
 
 /** 本地文件项 */
 interface LocalFile {
@@ -303,12 +297,6 @@ const fetchData = async () => {
   }
 }
 
-const applyPreset = () => {
-  // Logic to pre-fill prompt or params based on preset could go here
-  // But mostly the backend handles preset logic via ID or name
-  // The API 'media-luna/generate' accepts parameters.preset name
-}
-
 // 文件转 base64
 const fileToBase64 = (file: File): Promise<string> => {
   return new Promise((resolve, reject) => {
@@ -551,7 +539,7 @@ onUnmounted(() => {
 }
 
 .config-panel {
-  width: 380px;
+  width: 320px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
@@ -559,7 +547,7 @@ onUnmounted(() => {
 }
 
 .config-card {
-  padding: 1.5rem;
+  padding: 1.25rem;
   flex: 1 1 0;
   min-height: 0;
   overflow-y: auto;
@@ -598,7 +586,11 @@ onUnmounted(() => {
 }
 
 .form-section {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1.25rem;
+}
+
+.form-section:last-of-type {
+  margin-bottom: 0;
 }
 
 .form-section.flex-grow {
@@ -617,12 +609,12 @@ onUnmounted(() => {
 
 .section-title {
   font-weight: 600;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
   color: var(--k-color-text);
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.4rem;
 }
 
 .section-title .k-icon {
@@ -630,23 +622,29 @@ onUnmounted(() => {
 }
 
 .form-item {
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+.form-item:last-child {
+  margin-bottom: 0;
 }
 
 .label {
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   color: var(--k-color-text-description);
-  margin-bottom: 0.35rem;
+  margin-bottom: 0.25rem;
 }
 
 .form-actions {
-  margin-top: 1.5rem;
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--k-color-border);
 }
 
 .generate-btn {
   width: 100%;
-  height: 44px;
-  font-size: 1rem;
+  height: 40px;
+  font-size: 0.95rem;
   font-weight: 600;
   transition: all 0.2s;
   background: linear-gradient(135deg, var(--k-color-primary) 0%, var(--k-color-primary-dark, var(--k-color-primary)) 100%);
@@ -939,7 +937,7 @@ onUnmounted(() => {
 
 /* Upload Area */
 .upload-area {
-  margin-top: 0.5rem;
+  margin-top: 0.25rem;
 }
 
 .upload-list {
@@ -951,9 +949,9 @@ onUnmounted(() => {
 
 .upload-item {
   position: relative;
-  width: 64px;
-  height: 64px;
-  border-radius: 8px;
+  width: 56px;
+  height: 56px;
+  border-radius: 6px;
   overflow: hidden;
   border: 1px solid var(--k-color-border);
   background-color: var(--k-color-bg-2);
@@ -983,10 +981,10 @@ onUnmounted(() => {
 }
 
 .upload-trigger {
-  width: 64px;
-  height: 64px;
+  width: 56px;
+  height: 56px;
   border: 2px dashed var(--k-color-border);
-  border-radius: 8px;
+  border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1011,9 +1009,10 @@ onUnmounted(() => {
 }
 
 .upload-tip {
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   color: var(--k-color-text-description);
-  margin-top: 0.5rem;
+  margin-top: 0.35rem;
+  opacity: 0.8;
 }
 
 /* Text output */