完成即梦配置功能页面

web/src/views/admin/jimeng/JimengSetting.vue

@@ -2,10 +2,10 @@
   <div class="system-config form" v-loading="loading">
     <div class="container">
       <el-form
-        :model="system"
+        :model="jimengConfig"
         label-width="150px"
         label-position="right"
-        ref="systemFormRef"
+        ref="configFormRef"
         :rules="rules"
       >
         <el-tabs type="border-card">
@@ -14,8 +14,19 @@
               <i class="iconfont icon-token mr-1"></i>
               <span>秘钥配置</span>
             </template>
-            <el-form-item label="网站标题" prop="title">
-              <el-input v-model="system['title']" />
+            <el-form-item label="AccessKey" prop="access_key">
+              <el-input
+                v-model="jimengConfig.access_key"
+                placeholder="请输入即梦AI的AccessKey"
+                show-password
+              />
+            </el-form-item>
+            <el-form-item label="SecretKey" prop="secret_key">
+              <el-input
+                v-model="jimengConfig.secret_key"
+                placeholder="请输入即梦AI的SecretKey"
+                show-password
+              />
             </el-form-item>
           </el-tab-pane>
 
@@ -24,17 +35,13 @@
               <i class="iconfont icon-logout mr-1"></i>
               <span>算力配置</span>
             </template>
-            <el-form-item label="注册赠送算力" prop="init_power">
-              <el-input v-model.number="system['init_power']" placeholder="新用户注册赠送算力" />
-            </el-form-item>
-
             <el-form-item>
               <template #label>
                 <div class="label-title">
-                  提示词算力
+                  文生图算力
                   <el-tooltip
                     effect="dark"
-                    content="生成AI绘图提示词，歌词，视频描述消耗的算力"
+                    content="用户使用文生图功能时消耗的算力"
                     raw-content
                     placement="right"
                   >
@@ -44,14 +51,140 @@
                   </el-tooltip>
                 </div>
               </template>
-              <el-input v-model.number="system['prompt_power']" placeholder="" />
+              <el-input-number
+                v-model="jimengConfig.power.text_to_image"
+                :min="1"
+                :max="100"
+                placeholder="请输入文生图算力消耗"
+              />
+            </el-form-item>
+
+            <el-form-item>
+              <template #label>
+                <div class="label-title">
+                  图生图算力
+                  <el-tooltip
+                    effect="dark"
+                    content="用户使用图生图功能时消耗的算力"
+                    raw-content
+                    placement="right"
+                  >
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </div>
+              </template>
+              <el-input-number
+                v-model="jimengConfig.power.image_to_image"
+                :min="1"
+                :max="100"
+                placeholder="请输入图生图算力消耗"
+              />
+            </el-form-item>
+
+            <el-form-item>
+              <template #label>
+                <div class="label-title">
+                  图片编辑算力
+                  <el-tooltip
+                    effect="dark"
+                    content="用户使用图片编辑功能时消耗的算力"
+                    raw-content
+                    placement="right"
+                  >
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </div>
+              </template>
+              <el-input-number
+                v-model="jimengConfig.power.image_edit"
+                :min="1"
+                :max="100"
+                placeholder="请输入图片编辑算力消耗"
+              />
+            </el-form-item>
+
+            <el-form-item>
+              <template #label>
+                <div class="label-title">
+                  图片特效算力
+                  <el-tooltip
+                    effect="dark"
+                    content="用户使用图片特效功能时消耗的算力"
+                    raw-content
+                    placement="right"
+                  >
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </div>
+              </template>
+              <el-input-number
+                v-model="jimengConfig.power.image_effects"
+                :min="1"
+                :max="100"
+                placeholder="请输入图片特效算力消耗"
+              />
+            </el-form-item>
+
+            <el-form-item>
+              <template #label>
+                <div class="label-title">
+                  文生视频算力
+                  <el-tooltip
+                    effect="dark"
+                    content="用户使用文生视频功能时消耗的算力"
+                    raw-content
+                    placement="right"
+                  >
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </div>
+              </template>
+              <el-input-number
+                v-model="jimengConfig.power.text_to_video"
+                :min="1"
+                :max="100"
+                placeholder="请输入文生视频算力消耗"
+              />
+            </el-form-item>
+
+            <el-form-item>
+              <template #label>
+                <div class="label-title">
+                  图生视频算力
+                  <el-tooltip
+                    effect="dark"
+                    content="用户使用图生视频功能时消耗的算力"
+                    raw-content
+                    placement="right"
+                  >
+                    <el-icon>
+                      <InfoFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </div>
+              </template>
+              <el-input-number
+                v-model="jimengConfig.power.image_to_video"
+                :min="1"
+                :max="100"
+                placeholder="请输入图生视频算力消耗"
+              />
             </el-form-item>
           </el-tab-pane>
         </el-tabs>
 
         <div style="padding: 10px">
           <el-form-item>
-            <el-button type="primary" @click="save('system')">保存</el-button>
+            <el-button type="primary" @click="saveConfig" :loading="saving">保存配置</el-button>
+            <el-button @click="resetConfig">重置</el-button>
           </el-form-item>
         </div>
       </el-form>
@@ -63,52 +196,107 @@
 import { httpGet, httpPost } from '@/utils/http'
 import { InfoFilled } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
-import 'md-editor-v3/lib/style.css'
 import { onMounted, ref } from 'vue'
 
-const system = ref({ models: [] })
-const loading = ref(true)
-
-onMounted(() => {
-  // 加载系统配置
-  httpGet('/api/admin/config/get?key=system')
-    .then((res) => {
-      system.value = res.data
-    })
-    .catch((e) => {
-      ElMessage.error('加载系统配置失败: ' + e.message)
-    })
-    .finally(() => {
-      loading.value = false
-    })
+const jimengConfig = ref({
+  access_key: '',
+  secret_key: '',
+  power: {
+    text_to_image: 10,
+    image_to_image: 15,
+    image_edit: 20,
+    image_effects: 25,
+    text_to_video: 30,
+    image_to_video: 35,
+  },
 })
 
-const save = function (key) {
-  httpPost('/api/admin/config/update', {
-    key: key,
-    config: { content: notice.value, updated: true },
-  })
-    .then(() => {
-      ElMessage.success('操作成功！')
-    })
-    .catch((e) => {
-      ElMessage.error('操作失败：' + e.message)
+const loading = ref(true)
+const saving = ref(false)
+const testing = ref(false)
+const configFormRef = ref()
+
+// 表单验证规则
+const rules = {
+  access_key: [{ required: true, message: '请输入AccessKey', trigger: 'blur' }],
+  secret_key: [{ required: true, message: '请输入SecretKey', trigger: 'blur' }],
+}
+
+onMounted(() => {
+  loadConfig()
+})
+
+// 加载配置
+const loadConfig = async () => {
+  try {
+    const res = await httpGet('/api/admin/jimeng/config')
+    jimengConfig.value = res.data
+  } catch (e) {
+    ElMessage.error('加载配置失败: ' + e.message)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 保存配置
+const saveConfig = async () => {
+  try {
+    await configFormRef.value.validate()
+    saving.value = true
+
+    await httpPost('/api/admin/jimeng/config', {
+      config: jimengConfig.value,
     })
+
+    ElMessage.success('配置保存成功！')
+  } catch (e) {
+    if (e.message) {
+      ElMessage.error('保存失败：' + e.message)
+    }
+  } finally {
+    saving.value = false
+  }
+}
+
+// 重置配置
+const resetConfig = () => {
+  jimengConfig.value = {
+    access_key: '',
+    secret_key: '',
+    power: {
+      text_to_image: 10,
+      image_to_image: 15,
+      image_edit: 20,
+      image_effects: 25,
+      text_to_video: 30,
+      image_to_video: 35,
+    },
+  }
+  ElMessage.info('配置已重置')
 }
 </script>
 
 <style lang="stylus" scoped>
 @import '../../../assets/css/admin/form.styl'
 @import '../../../assets/css/main.styl'
+
 .system-config {
   display flex
   justify-content center
 
-  .sys-tabs {
+  .container {
+    width 100%
+    max-width 800px
+  }
+
+  .label-title {
+    display flex
+    align-items center
+    gap 5px
+  }
+
+  .el-input-number {
     width 100%
-    background-color var(--el-bg-color)
-    padding 10px 20px 40px 20px
-    //border: 1px solid var(--el-border-color);
   }
 }
 </style>