fara-fe-admin/src/views/model/global-prompt/index.vue

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { ElButton, ElDialog, ElEmpty, ElInput, ElMessage, ElOption, ElPagination, ElSelect, ElTable, ElTableColumn, ElTag } from 'element-plus'

import { selectGlobalPrompt, updateGlobalPrompt } from '@/api/modules/model'
import { toast } from 'vue-sonner'
import LangSelector from '@/components/LangSelector.vue'

const loading = ref(false)
const input = ref<string>('')
const lang = ref<string>('zh_CN')



async function fetchData() {
  if(!lang.value.length){
    return;
  }
  loading.value = true
  try{
    const {code, data} = await selectGlobalPrompt({i18nKey: lang.value})
    if(code === 0){
      input.value = data
    }
  }finally{
    loading.value = false
  }
}


async function handleSave () {
  if(!lang.value.length){
    return;
  }
  const {code, data} = await updateGlobalPrompt({i18nKey: lang.value, text: input.value})
  if(code === 0){
    toast.success('保存成功')
  }
}


watch(()=> lang.value, ()=> {
  fetchData()
}, {immediate: true})

</script>

<template>
  <div class="absolute-container">
    <FaPageHeader title="全局提示词" />
    <FaPageMain class="flex-1 overflow-auto" main-class="flex-1 flex flex-col overflow-auto">
      <div class="flex flex-col overflow-auto gap-4" v-loading="loading">
        <LangSelector v-model="lang"></LangSelector>
          <el-input
            v-model="input"
            style="width: 100%;"
            :autosize="{ minRows: 4, maxRows: 10 }"
            type="textarea"
            placeholder="Please input"
            class="mb-4"
          />
        <ElSpace>
          <ElButton type="primary" @click="handleSave">保存</ElButton>
        </ElSpace>
      </div>
    </FaPageMain>
  </div>
</template>
<style scoped>
.absolute-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
</style>