初始化

easyflow-ui-admin/app/src/views/config/settings/Settings.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { $t } from '@easyflow/locales';
+
+import {
+  ElAlert,
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElSelect,
+} from 'element-plus';
+
+import { api } from '#/api/request.js';
+import providerList from '#/views/ai/model/modelUtils/providerList.json';
+
+const providerOptions =
+  ref<Array<{ label: string; options: any; value: string }>>(providerList);
+const brands = ref([]);
+const llmOptions = ref([]);
+
+// 获取品牌接口数据
+function getBrands() {
+  api.get('/api/v1/modelProvider/list').then((res) => {
+    if (res.errorCode === 0) {
+      brands.value = res.data;
+      llmOptions.value = formatLlmList(res.data);
+    }
+  });
+}
+function getOptions() {
+  api
+    .get(
+      '/api/v1/sysOption/list?keys=model_of_chat&keys=chatgpt_endpoint&keys=chatgpt_chatPath&keys=chatgpt_api_key&keys=chatgpt_model_name',
+    )
+    .then((res) => {
+      if (res.errorCode === 0) {
+        entity.value = res.data;
+      }
+    });
+}
+onMounted(() => {
+  getOptions();
+  getBrands();
+});
+
+const entity = ref({
+  model_of_chat: '',
+  chatgpt_api_key: '',
+  chatgpt_chatPath: '',
+  chatgpt_endpoint: '',
+  chatgpt_model_name: '',
+});
+
+function formatLlmList(data) {
+  return data.map((item) => {
+    const extra = new Map([
+      ['chatPath', item.options?.chatPath],
+      ['llmEndpoint', item.options?.llmEndpoint],
+    ]);
+    return {
+      label: item.title,
+      value: item.key,
+      extra,
+    };
+  });
+}
+function handleChangeModel(value) {
+  const extra = providerList.find((item) => item.value === value);
+  entity.value.chatgpt_chatPath = extra.options.chatPath;
+  entity.value.chatgpt_endpoint = extra.options.llmEndpoint;
+}
+function handleSave() {
+  api.post('/api/v1/sysOption/save', entity.value).then((res) => {
+    if (res.errorCode === 0) {
+      ElMessage.success($t('message.saveOkMessage'));
+    }
+  });
+}
+</script>
+
+<template>
+  <div class="settings-container">
+    <div class="settings-config-container border-border border">
+      <div class="mb-6">
+        {{ $t('settingsConfig.systemAIFunctionSettings') }}
+      </div>
+      <ElAlert
+        class="!mb-5"
+        :title="$t('settingsConfig.note')"
+        type="warning"
+      />
+      <ElForm :model="entity" class="demo-form-inline" label-width="150px">
+        <ElFormItem :label="$t('settingsConfig.modelOfChat')">
+          <ElSelect
+            v-model="entity.model_of_chat"
+            clearable
+            @change="handleChangeModel"
+          >
+            <ElOption
+              v-for="item in providerOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem :label="$t('settingsConfig.modelName')">
+          <ElInput v-model="entity.chatgpt_model_name" clearable />
+        </ElFormItem>
+        <ElFormItem label="Endpoint">
+          <ElInput v-model="entity.chatgpt_endpoint" clearable />
+        </ElFormItem>
+        <ElFormItem label="ChatPath">
+          <ElInput v-model="entity.chatgpt_chatPath" clearable />
+        </ElFormItem>
+        <ElFormItem label="ApiKey">
+          <ElInput v-model="entity.chatgpt_api_key" clearable />
+        </ElFormItem>
+      </ElForm>
+      <div class="settings-button-container">
+        <ElButton type="primary" @click="handleSave">
+          {{ $t('button.save') }}
+        </ElButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.settings-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 30px 143px;
+}
+
+.settings-config-container {
+  width: 100%;
+  padding: 20px;
+  background-color: var(--el-bg-color);
+  border-radius: 10px;
+}
+
+:deep(.el-form-item) {
+  margin-bottom: 25px;
+}
+
+.settings-notice {
+  margin-bottom: 20px;
+  color: var(--el-color-danger);
+}
+
+.settings-button-container {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>