应用编排

src/components/czr-ui/CzrFormColumn.vue

@@ -29,6 +29,7 @@
       <slot name="czr" :handleValidate="handleValidate">
         <template v-if="link === 'input'">
           <InputCom
+            ref="ref_el"
             v-bind="$attrs"
             :label="labelCpt"
             :param="param"
@@ -338,6 +339,7 @@ const state = reactive({
   errorMessage: null,
   uuid: '',
 })
+const ref_el = ref()
 const ref_czrFormColumn: any = ref(null)
 const isValue = (val: any) => {
   if (
@@ -469,6 +471,7 @@ defineExpose({
   reset,
   handleValidate,
   handleEnter,
+  focus: () => ref_el.value.focus(),
 })
 </script>
 
@@ -485,6 +488,9 @@ defineExpose({
       .el-input__wrapper {
         background-color: transparent;
         box-shadow: none;
+        .el-input__count-inner {
+          background-color: transparent;
+        }
       }
     }
   }

src/components/czr-ui/czr-form-link/input.vue

@@ -1,5 +1,6 @@
 <template>
   <el-input
+    ref="ref_el"
     v-bind="$attrs"
     v-model="state.paramVal"
     :type="type"
@@ -36,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, watch, inject } from 'vue'
+import { reactive, watch, inject, ref } from 'vue'
 import { isValue } from '@/utils/czr-util'
 const emit = defineEmits(['emitParam', 'emitEnter'])
 const props = defineProps({
@@ -54,6 +55,7 @@ const state = reactive({
   paramVal: props.param,
   formView: inject('form-view', false),
 })
+const ref_el = ref()
 watch(
   () => state.paramVal,
   (n) => {
@@ -66,6 +68,9 @@ watch(
     state.paramVal = n
   },
 )
+defineExpose({
+  focus: () => ref_el.value.focus(),
+})
 </script>
 
 <style scoped lang="scss"></style>

src/views/manage/app/make/index.vue

@@ -21,7 +21,7 @@
             class="flex h-14 w-full items-center gap-2.5 rounded-lg bg-[#ffffff] px-6"
           >
             <div class="text-2xl font-bold text-[#303133]">编排</div>
-            <div>自动保存14:55:00</div>
+            <div class="text-[#576275]">自动保存14:55:00</div>
             <div class="mx-auto" />
             <div class="flex items-center text-[#FF5454]">
               <SvgIcon name="czr_tip" color="#FF5454" class="mr-1" />
@@ -75,14 +75,15 @@
                 </div>
                 <div class="flex-1 p-4">
                   <textarea
-                    class="h-full w-full resize-none"
+                    class="h-full w-full"
+                    style="resize: none"
                     ref="ref_textarea"
                     v-model="state.form.tips"
                   ></textarea>
                 </div>
               </div>
               <div
-                class="col-span-1 flex flex-col overflow-y-auto rounded-lg bg-[#ffffff] p-4"
+                class="col-span-1 overflow-y-auto rounded-lg bg-[#ffffff] p-4"
               >
                 <div class="__czr-title_2">模型选择</div>
                 <div class="mt-4">
@@ -125,7 +126,7 @@
                 </div>
                 <template v-if="state.form.knowledges.length > 0">
                   <div
-                    class="mt-2 flex max-h-42 flex-col gap-2 overflow-y-auto"
+                    class="mt-2 flex max-h-42 flex-col gap-2 overflow-y-auto pr-2"
                   >
                     <template v-for="(item, index) in state.form.knowledges">
                       <div class="flex items-center gap-1.5">
@@ -172,6 +173,92 @@
                     :height="300"
                   />
                 </div>
+                <div class="__czr-title_2 mt-4">
+                  开场白引导问题
+                  <template v-if="state.form.prologues.length > 0">
+                    ({{ state.form.prologues.length }})
+                  </template>
+                  <div class="ml-auto">
+                    <el-radio-group
+                      v-model="state.form.prologueType"
+                      size="small"
+                    >
+                      <el-radio-button value="three">显示前3条</el-radio-button>
+                      <el-radio-button value="all">显示全部</el-radio-button>
+                    </el-radio-group>
+                  </div>
+                </div>
+                <div class="mt-2 flex flex-col">
+                  <div
+                    class="drag-body col relative flex max-h-42 flex-col gap-2 overflow-y-auto pr-2"
+                    ref="ref_prologueBody"
+                    v-if="state.dragRefresh"
+                  >
+                    <template v-for="(item, index) in state.form.prologues">
+                      <div
+                        class="flex items-center gap-2"
+                        style="-webkit-user-drag: element"
+                      >
+                        <SvgIcon
+                          name="czr_drag"
+                          color="#999999"
+                          class="drag-icon cursor-move"
+                        />
+                        <div
+                          class="__hover flex h-7 flex-1 items-center rounded-sm bg-[#F6F8FC] px-2.5 text-sm text-[#A7ADB9]"
+                          @click="onPrologue(item)"
+                        >
+                          <template v-if="item.__edit">
+                            <CzrFormColumn
+                              ref="ref_prologue"
+                              class="transparent-input"
+                              label-width="0px"
+                              :span="24"
+                              v-model:param="item.__value"
+                              :transparent="true"
+                              :clearable="false"
+                              maxlength="40"
+                              show-word-limit
+                              @keyup.enter.stop="onEditPrologue(item)"
+                              @blur="onEditPrologue(item)"
+                            />
+                          </template>
+                          <template v-else> {{ item.value }} </template>
+                        </div>
+                        <SvgIcon
+                          class="__hover"
+                          name="czr_del"
+                          color="var(--czr-error-color)"
+                          @click="state.form.prologues.splice(index, 1)"
+                        />
+                      </div>
+                    </template>
+                  </div>
+                  <div class="mt-2 flex items-center gap-2">
+                    <div
+                      class="__hover flex h-7 flex-1 items-center rounded-sm bg-[#F6F8FC] px-2.5 text-sm text-[#A7ADB9]"
+                      @click="onPrologue(null)"
+                    >
+                      <template v-if="state.prologuesAdd.__edit">
+                        <CzrFormColumn
+                          ref="ref_prologue"
+                          class="transparent-input"
+                          label-width="0px"
+                          :span="24"
+                          v-model:param="state.prologuesAdd.value"
+                          :transparent="true"
+                          :clearable="false"
+                          maxlength="40"
+                          show-word-limit
+                          @keyup.enter.stop="onAddPrologue"
+                          @blur="state.prologuesAdd.__edit = false"
+                        />
+                      </template>
+                      <template v-else> 点击输入问题，enter以新增 </template>
+                    </div>
+                  </div>
+                </div>
+                <div class="__czr-title_2 mt-4">用户输入方式</div>
               </div>
             </div>
           </CzrForm>
@@ -192,6 +279,7 @@ import {
   computed,
   getCurrentInstance,
   inject,
+  nextTick,
   onMounted,
   reactive,
   ref,
@@ -204,7 +292,9 @@ import { Search } from '@element-plus/icons-vue'
 import knowledgeSelect from './knowledge-select.vue'
 import CzrForm from '@/components/czr-ui/CzrForm.vue'
 import SvgIcon from '@/components/SvgIcon/index.vue'
-import CzrMarkdown from '@/components/czr-ui/CzrMarkdown/CzrMarkdown.vue'
+import CzrFormColumn from '@/components/czr-ui/CzrFormColumn.vue'
+import { isValue } from '@/utils/czr-util'
+import Sortable from 'sortablejs'
 
 const DictionaryStore = useDictionaryStore()
 const route = useRoute()
@@ -219,12 +309,26 @@ const state: any = reactive({
     model: '',
     components: [],
     knowledges: [],
+    prologues: [
+      { value: '1' },
+      { value: '2' },
+      { value: '3' },
+      { value: '4' },
+      { value: '5' },
+    ],
+    prologueType: 'three',
   },
   knowledgeSelect: {
     show: false,
     transfer: {},
   },
+  prologuesAdd: {
+    value: '',
+  },
+  dragRefresh: true,
 })
+const ref_prologue = ref()
+const ref_prologueBody = ref()
 const initDetail = () => {
   if (state.ID) {
     state.detail = {}
@@ -234,10 +338,33 @@ const initDetail = () => {
     //   })
     //   .catch(() => {})
     //   .finally(() => {})
+    initDrag()
   } else {
     router.push({ name: 'd446bfb3-4605-477f-a0f4-b7a0a1aa78fe' })
   }
 }
+const initDrag = () => {
+  nextTick(() => {
+    const tbody =
+      ref_prologueBody.value.parentElement.querySelector('.drag-body')
+    new Sortable(tbody, {
+      animation: 150,
+      handle: '.drag-icon', // 设置可拖拽行的类名(el-table自带的类名)
+      onEnd: ({ newIndex, oldIndex }: any) => {
+        const d = [...state.form.prologues]
+        const targetRow = d[oldIndex]
+        d.splice(oldIndex, 1)
+        d.splice(newIndex, 0, targetRow)
+        state.form.prologues = [...d]
+        state.dragRefresh = false
+        setTimeout(() => {
+          state.dragRefresh = true
+          initDrag()
+        }, 0)
+      },
+    })
+  })
+}
 
 const toBack = () => {
   router.push({
@@ -250,6 +377,35 @@ const onAddKnowledge = () => {
   }
   state.knowledgeSelect.show = true
 }
+const onPrologue = (row) => {
+  if (row) {
+    row.__value = row.value + ''
+    row.__edit = true
+  } else {
+    state.prologuesAdd.__edit = true
+  }
+  const t = setInterval(() => {
+    const r = ref_prologue.value
+    if (r) {
+      if (r.length) {
+        r[0].focus()
+      } else {
+        r.focus()
+      }
+      clearInterval(t)
+    }
+  }, 100)
+}
+const onAddPrologue = () => {
+  state.form.prologues.push({ value: state.prologuesAdd.value + '' })
+  state.prologuesAdd.value = ''
+}
+const onEditPrologue = (row) => {
+  if (isValue(row.__value.trim())) {
+    row.value = row.__value + ''
+  }
+  row.__edit = false
+}
 onMounted(() => {
   initDictionary()
   initDetail()
@@ -270,6 +426,11 @@ const initDictionary = () => {
     .el-row {
       width: 100%;
       height: 100%;
+      .transparent-input {
+        .el-input__wrapper {
+          padding: 0;
+        }
+      }
     }
   }
 }

src/views/manage/knowledge/documents/document/index.vue

@@ -60,13 +60,14 @@
         <template #table>
           <CzrTable
             v-loading="state.query.loading"
-            :data="state.query.result.data"
+            v-model:data="state.query.result.data"
             :head="state.query.head"
             :total="state.query.result.total"
             :page="state.query.page.pageNum"
             :pageSize="state.query.page.pageSize"
             @handlePage="onPage"
             v-model:selected="state.query.selected"
+            :dragable="true"
           >
             <template #name-column-value="{ scope }">
               <div class="flex justify-center">