big-model-web/src/views/manage/app/make/template-select.vue

<template>
  <CzrDialog
    :show="show"
    :title="titleCpt"
    @onClose="$emit('update:show', false)"
    width="80%"
    height="90%"
    :loading="state.loading"
    :show-close="false"
    :show-submit="false"
  >
    <div class="bm-form flex h-full w-full flex-col p-4">
      <div class="flex items-center">
        <CzrButton
          :type="state.tab === Tab.System ? 'primary' : 'normal'"
          title="系统"
          @click="state.tab = Tab.System"
        />
        <CzrButton
          :type="state.tab === Tab.User ? 'primary' : 'normal'"
          title="个人"
          @click="state.tab = Tab.User"
          class="ml-4"
        />
        <CzrFormColumn
          width="15.63rem"
          class="__czr-table-form-column ml-auto"
          :span="24"
          label-width="0px"
          v-model:param="state.text"
          placeholder="输入关键词以检索"
          :prefix-icon="Search"
        />
      </div>
      <div class="mt-4 grid flex-1 grid-cols-3 gap-4 overflow-hidden">
        <div
          class="col-span-1 mr-2 flex flex-col gap-2 overflow-y-auto pr-2 pb-1"
        >
          <template v-for="item in state.list[state.tab]">
            <div
              class="__hover flex flex-col rounded-lg px-4 py-3"
              style="border: var(--czr-border)"
              :style="`${state.selected?.id == item.id ? 'border-color: var(--czr-main-color);background-color: rgba(var(--czr-main-color-rgb), 0.1)' : ''}`"
              @click="state.selected = item"
            >
              <div class="font-bold text-[#2E3238]">{{ item.name }}</div>
              <div class="mt-2 text-sm text-[#606266]" v-title>
                {{ item.description }}
              </div>
            </div>
          </template>
        </div>
        <div
          class="col-span-2 flex flex-col overflow-hidden pr-1"
          v-if="state.selected"
        >
          <div
            class="flex-1 overflow-y-auto bg-gradient-to-b from-[#2853F7]/10 to-[#ffffff]/10 p-4 text-base text-[#606266] shadow"
            style="line-height: 1.4"
          >
            {{ state.selected.content }}
          </div>
          <div class="mt-4 flex justify-end gap-4">
            <div
              class="__czr-dialog-foot_submit __hover"
              @click="onCopy(state.selected.content)"
            >
              复制
            </div>
            <div
              class="__czr-dialog-foot_cancel __hover"
              @click="onInsert(state.selected.content)"
            >
              插入
            </div>
          </div>
        </div>
      </div>
    </div>
  </CzrDialog>
</template>

<script setup lang="ts">
import {
  computed,
  getCurrentInstance,
  nextTick,
  reactive,
  ref,
  watch,
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAppStore, useDialogStore, useDictionaryStore } from '@/stores'
import { copy } from '@/utils/czr-util'
import CzrDialog from '@/components/czr-ui/CzrDialog.vue'
import { Search } from '@element-plus/icons-vue'
import { debounce } from 'lodash'
import { pluginDel } from '@/api/modules/model'
import { promptTemplatesSearch } from '@/api/modules/app/tips'

const AppStore = useAppStore()
const DictionaryStore = useDictionaryStore()
const DialogStore = useDialogStore()
const emit = defineEmits(['update:show', 'insert'])
const props = defineProps({
  show: { default: false },
  transfer: <any>{},
})
enum Tab {
  System = 'SYSTEM',
  User = 'PERSONAL',
}
const state: any = reactive({
  tab: Tab.System,
  text: '',
  list: {
    [Tab.System]: [],
    [Tab.User]: [],
  },
  selected: null,
})
const titleCpt = computed(() => {
  let t = '提示词模板'
  return t
})
const isViewCpt = computed(() => props.transfer?.mode === 'view')
watch(
  () => props.show,
  (n) => {
    if (n) {
      initData()
      state.selected = null
      initDictionary()
    }
  },
)
const setText = debounce((v) => {
  initData()
}, 1000)
watch(
  () => state.text,
  (n) => {
    setText(n)
  },
)
const initData = () => {
  const params = {
    page: 1,
    size: 9999,
  }
  const arrSystem: any = []
  const arrUser: any = []
  promptTemplatesSearch(params)
    .then(({ data }: any) => {
      data.records?.forEach((v) => {
        if (v.type === Tab.System) {
          arrSystem.push(v)
        } else if (v.type === Tab.User) {
          arrUser.push(v)
        }
      })
      state.list[Tab.System] = arrSystem
      state.list[Tab.User] = arrUser
      console.log(state.list)
    })
    .catch(() => {})
    .finally(() => {})
}
const onCopy = (str) => {
  copy(str)
  ElMessage.success('复制成功！')
}
const onInsert = (str) => {
  DialogStore.confirm({
    title: '插入确认',
    content: `插入后将覆盖提示词内容，请确认是否插入？`,
    onSubmit: () => {
      emit('insert', str)
      emit('update:show', false)
    },
  })
}
const initDictionary = () => {}
</script>

<style lang="scss" scoped></style>