param builder component is ready

web/src/views/admin/settings/PrivacyConfig.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="privacy-config container" v-loading="loading">
-    <div class="container">
+  <div class="privacy-config container w-full" v-loading="loading">
+    <div class="w-full">
       <md-editor
         class="mgb20"
         v-model="privacy"

web/src/views/test/Test.vue

@@ -1,237 +1,65 @@
 <template>
   <div class="audio-chat-page">
-    <!-- 图像特效 -->
-    <div class="jimeng-create__function-panel">
-      <div class="jimeng-create__param-line">
-        <span class="jimeng-create__param-label">上传图片：</span>
-      </div>
-      <div class="jimeng-create__param-line">
-        <div class="jimeng-create__upload">
-          <input
-            ref="imageEffectsInput"
-            type="file"
-            accept=".jpg,.png,.jpeg"
-            @change="
-              (e) =>
-                jimengStore.onImageUpload({
-                  file: e.target.files[0],
-                  name: e.target.files[0]?.name,
-                })
-            "
-            class="hidden"
-          />
-          <div @click="$refs.imageEffectsInput?.click()" class="jimeng-create__upload-content">
-            <i
-              v-if="!jimengStore.imageEffectsParams.image_input1.length"
-              class="jimeng-create__upload-icon iconfont icon-upload"
-            ></i>
-            <span
-              v-if="!jimengStore.imageEffectsParams.image_input1.length"
-              class="jimeng-create__upload-text"
-              >上传图片</span
-            >
-            <div v-else class="jimeng-create__upload-preview">
-              <el-image
-                :src="
-                  jimengStore.imageEffectsParams.image_input1[0]?.url ||
-                  jimengStore.imageEffectsParams.image_input1[0]?.content
-                "
-                fit="cover"
-                class="w-32 h-32 rounded"
-              />
-              <button
-                @click.stop="jimengStore.imageEffectsParams.image_input1 = []"
-                class="jimeng-create__upload-remove-btn"
-              >
-                <i class="iconfont icon-close"></i>
-              </button>
-            </div>
+    <div class="flex m-3">
+      <el-select v-model="currentFunction" placeholder="请选择功能" popper-class="custom-select">
+        <template #prefix>
+          <i
+            class="iconfont !text-xl"
+            :class="functions.find((f) => f.key === currentFunction).icon"
+          ></i>
+        </template>
+        <el-option v-for="f in functions" :value="f.key" :key="f.key" :label="f.name">
+          <div class="flex items-center space-x-2">
+            <i class="iconfont !text-xl" :class="f.icon"></i>
+            <span>{{ f.name }}</span>
           </div>
-        </div>
-      </div>
-
-      <div class="jimeng-create__param-line">
-        <span class="jimeng-create__param-label">特效模板：</span>
-      </div>
-      <div class="jimeng-create__param-line">
-        <CustomSelect
-          v-model="jimengStore.imageEffectsParams.template_id"
-          :options="
-            jimengStore.imageEffectsTemplateOptions.map((opt) => ({
-              label: opt.label,
-              value: opt.value,
-            }))
-          "
-          label="特效模板"
-          title="选择特效模板"
-          @update:modelValue="handleTemplateChange"
-        />
-      </div>
-
-      <div class="jimeng-create__param-line">
-        <span class="jimeng-create__param-label">输出尺寸：</span>
-      </div>
-      <div class="jimeng-create__param-line">
-        <CustomSelect
-          v-model="jimengStore.imageEffectsParams.size"
-          :options="
-            jimengStore.imageSizeOptions.map((opt) => ({
-              label: opt.label,
-              value: opt.value,
-            }))
-          "
-          label="输出尺寸"
-          title="选择尺寸"
-        />
-      </div>
+        </el-option>
+      </el-select>
     </div>
 
-    <!-- 文生视频 -->
-    <div
-      v-if="jimengStore.activeFunction === 'text_to_video'"
-      class="jimeng-create__function-panel"
-    >
-      <div class="jimeng-create__param-line">
-        <span class="jimeng-create__param-label">提示词：</span>
-      </div>
-      <div class="jimeng-create__param-line">
-        <textarea
-          v-model="jimengStore.currentPrompt"
-          placeholder="描述你想要的视频内容"
-          class="jimeng-create__form-section-textarea"
-          rows="4"
-          maxlength="2000"
-        />
-        <div class="jimeng-create__form-section-counter">
-          <span>{{ jimengStore.currentPrompt.length }}/2000</span>
+    <div class="p-3">
+      <param-builder
+        v-model="formData"
+        :items="params[currentFunction]"
+        :progress="progress[currentFunction]"
+      />
+
+      <!-- 调试信息 -->
+      <div class="mt-6 p-4 bg-gray-100 rounded-lg">
+        <h3 class="text-lg font-bold mb-2">调试信息</h3>
+        <div class="text-sm">
+          <p><strong>当前功能:</strong> {{ currentFunction }}</p>
+          <p><strong>表单数据:</strong></p>
+          <pre class="bg-white p-2 rounded mt-1 overflow-auto">{{
+            JSON.stringify(formData, null, 2)
+          }}</pre>
         </div>
       </div>
-
-      <div class="jimeng-create__param-line">
-        <span class="jimeng-create__param-label">视频比例：</span>
-      </div>
-      <div class="jimeng-create__param-line">
-        <CustomSelect
-          v-model="jimengStore.textToVideoParams.aspect_ratio"
-          :options="
-            jimengStore.videoAspectRatioOptions.map((opt) => ({
-              label: opt.label,
-              value: opt.value,
-            }))
-          "
-          label="视频比例"
-          title="选择比例"
-        />
-      </div>
-    </div>
-
-    <!-- 图生视频 -->
-    <div
-      v-if="jimengStore.activeFunction === 'image_to_video'"
-      class="jimeng-create__function-panel"
-    >
-      <div class="jimeng-create__param-line">
-        <span class="jimeng-create__param-label">上传图片：</span>
-      </div>
-      <div class="jimeng-create__param-line">
-        <div class="jimeng-create__upload">
-          <input
-            ref="imageToVideoInput"
-            type="file"
-            accept=".jpg,.png,.jpeg"
-            multiple
-            @change="(e) => jimengStore.handleMultipleImageUpload(e)"
-            class="hidden"
-          />
-          <div @click="$refs.imageToVideoInput?.click()" class="jimeng-create__upload-content">
-            <i
-              v-if="!jimengStore.imageToVideoParams.image_urls.length"
-              class="jimeng-create__upload-icon iconfont icon-upload"
-            ></i>
-            <span
-              v-if="!jimengStore.imageToVideoParams.image_urls.length"
-              class="jimeng-create__upload-text"
-              >上传图片</span
-            >
-            <div v-else class="jimeng-create__upload-multiple">
-              <div
-                v-for="(image, index) in jimengStore.imageToVideoParams.image_urls"
-                :key="index"
-                class="jimeng-create__upload-multiple-item"
-              >
-                <el-image
-                  :src="image?.url || image?.content"
-                  fit="cover"
-                  class="w-24 h-24 rounded"
-                />
-                <button
-                  @click.stop="jimengStore.removeImage(index)"
-                  class="jimeng-create__upload-remove-btn"
-                >
-                  <i class="iconfont icon-close"></i>
-                </button>
-              </div>
-              <div
-                v-if="jimengStore.imageToVideoParams.image_urls.length < 2"
-                @click.stop="$refs.imageToVideoInput?.click()"
-                class="jimeng-create__upload-multiple-add"
-              >
-                <i class="iconfont icon-plus"></i>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="jimeng-create__param-line">
-        <span class="jimeng-create__param-label">提示词：</span>
-      </div>
-      <div class="jimeng-create__param-line">
-        <textarea
-          v-model="jimengStore.currentPrompt"
-          placeholder="描述你想要的视频效果"
-          class="jimeng-create__form-section-textarea"
-          rows="4"
-          maxlength="2000"
-        />
-        <div class="jimeng-create__form-section-counter">
-          <span>{{ jimengStore.currentPrompt.length }}/2000</span>
-        </div>
-      </div>
-
-      <div class="jimeng-create__param-line">
-        <span class="jimeng-create__param-label">视频比例：</span>
-      </div>
-      <div class="jimeng-create__param-line">
-        <CustomSelect
-          v-model="jimengStore.imageToVideoParams.aspect_ratio"
-          :options="
-            jimengStore.videoAspectRatioOptions.map((opt) => ({
-              label: opt.label,
-              value: opt.value,
-            }))
-          "
-          label="视频比例"
-          title="选择比例"
-        />
-      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-const connect = () => {}
+import ParamBuilder from '@/components/ParamBuilder.vue'
+import { JimengFunctions, JimengParams } from '@/store/data'
+import { ref } from 'vue'
+
+const functions = JimengFunctions
+const params = JimengParams
+const formData = ref({})
+const currentFunction = ref('image')
+const progress = ref({
+  image: 100,
+  video: 100,
+  virtualHuman: 38,
+  actionTransfer: 65,
+})
 </script>
 
 <style scoped lang="scss">
-.audio-chat-page {
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  align-items: center;
-}
-
-canvas {
-  background-color: transparent;
+.custom-select {
+  .el-select-dropdown__item.is-selected {
+    background-color: var(--el-fill-color-light);
+  }
 }
 </style>