知识库操作功能开发以及解析方法的开发

liudong

2024-07-25 bd82158c1ef6b3f71115bfc1d5fe77fb7c9287db

知识库操作功能开发以及解析方法的开发

 src/views/dmx/knowledgeLib/add.vue

@@ -4,14 +4,14 @@
    <template #icon>
      <icon-plus />
    </template>
    新建文件
    新增文件
  </a-button>
  <a-modal v-model:visible="visible" title="上传文件" @before-open="handleOpened" @cancel="handleCancel" @before-ok="handleBeforeOk" title-align="start">
    <a-tabs :default-active-key="activeKey" @change="activeKeyChange">
      <a-tab-pane key="1" title="文件">
        <div class="aUpload">
<!--          <a-upload :file-list="uploadList" draggable accept=".word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt, .pdf, .mp4, .avi, .mp3,.wav, .wma, .wmv, .rm," :custom-request="customRequest" />-->
          <a-upload :file-list="uploadList" draggable accept=".word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt," :custom-request="customRequest" />
          <a-upload :file-list="uploadList" draggable :accept="acceptNameList" :custom-request="customRequest" />
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" title="文件夹">
@@ -24,8 +24,10 @@
</template>

<script lang="ts" setup>
import { onMounted ,onBeforeMount, reactive, ref } from "vue";

import { onMounted, onBeforeMount, reactive, ref, computed } from "vue";
import axios from 'axios';
let CancelToken = axios.CancelToken
let source = null
const visible = ref(false);
const loading = ref(false);
const activeKey = ref('1');
@@ -37,8 +39,11 @@
  post: '',// 岗位
  txt: '',// 备注
});


const acceptNameList = computed(
  ()=>{
    return '.word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt, .pdf, .mp4, .avi, .mp3,.wav, .wma, .wmv, .rm,'
  }
)
const customRequest = (option) => {
  const {onProgress, onError, onSuccess, fileItem, name} = option
  const xhr = new XMLHttpRequest();
@@ -64,7 +69,7 @@

  const formData = new FormData();
  formData.append(name || 'file', fileItem.file);
  xhr.open('post', '//upload-z2.qbox.me/', true);
  xhr.open('post', '/v1/user/login', true);
  xhr.send(formData);

  return {
@@ -73,6 +78,69 @@
    }
  }
};
// 上传文件
// async submitForm = ()=>{
//   if (this.fileList && this.fileList.length > 0) {
//     source = CancelToken.source()
//     this.fileUploadLoad = true
//     const formdata = new FormData()
//     let param = {
//       userName: this.userInfo.userName,
//       userId: this.userInfo.userID,
//       cfeId: this.currow.conferences[0].id,
//     }
//     this.fileList.map((item) => {
//       formdata.append('file', item.raw)
//     })
//     uploadCfeFile(
//       { param, formdata },
//       (progressEvent) => {
//         let total = progressEvent.total
//         let loaded = progressEvent.loaded
//         this.uploadPercent = parseInt(((loaded / total) * 100).toFixed(0))
//       },
//       source
//     )
//       .then((res) => {
//         if (res.data.code === '0') {
//           //上传成功
//           this.$successMessage(
//             this.translateTitle(
//               'json_fileupload.json_file_tip.json_file_tip08'
//             )
//           )
//           this.fileList = []
//           this.$refs.upload.clearFiles()
//           this.queryList()
//         } else {
//           this.$errorMessage(res.data.message)
//         }
//         this.fileUploadLoad = false
//         this.uploadPercent = 0
//       })
//       .catch((error) => {
//         this.fileUploadLoad = false
//         this.uploadPercent = 0
//         if (axios.isCancel(error)) {
//           //已终止上传
//           this.$errorMessage(
//             this.translateTitle(
//               'json_fileupload.json_file_tip.json_file_tip09'
//             )
//           )
//         } else {
//           this.$errorMessage('文件大小超过限制，上传失败')
//         }
//       })
//   } else {
//     //请选择要上传的文件
//     this.$warningMessage(
//       this.translateTitle('json_fileupload.json_file_tip.json_file_tip10')
//     )
//   }
// }



const handleSubmit = ({values, errors}) => {
  console.log('values:', values, '\nerrors:', errors)

 src/views/dmx/knowledgeLib/config.vue

@@ -103,8 +103,10 @@
          </a-form-item>
          <div v-if="form.raptor">
            <a-form-item field="section" label="提示词">
              <a-textarea style="height: 10rem;border: 1px solid  var(--color-fill-3);border-radius: 4px" placeholder=""
                          allow-clear />
              <a-textarea
                v-model="form.prompt"
                style="height: 10rem;border: 1px solid  var(--color-fill-3);border-radius: 4px" placeholder=""
                allow-clear />
            </a-form-item>
            <a-form-item field="slider" label="最大token数"
                         :rules="[{type:'number', min:5,message:'slider is min than 5'}]">
@@ -232,7 +234,10 @@
  switch: false,
  multiSelect: ["section one"],
  treeSelect: "",
  raptor: false
  raptor: false,
  prompt: '请总结以下段落。 小心数字，不要编造。 段落如下：\n' +
    '      {cluster_content}\n' +
    '以上就是你需要总结的内容。',
});
const options = [
  {

 src/views/dmx/knowledgeLib/edit.vue

@@ -1,25 +1,21 @@

<template>
  <a-button type="primary" @click="handleClick">
  <a-button type="text" @click="handleClick" size="small">
    <template #icon>
      <icon-plus />
      <icon-edit />
    </template>
    新建文件
  </a-button>
  <a-modal v-model:visible="visible" title="上传文件" @before-open="handleOpened" @cancel="handleCancel" @before-ok="handleBeforeOk" title-align="start">
  <a-modal v-model:visible="visible" title="重命名" @before-open="handleOpened" @cancel="handleCancel" :footer="false" title-align="start">
    <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" >
      <a-form-item field="name" label="用户名">

      <a-form-item field="name" label="名称">
        <a-input v-model="form.name" placeholder="请输入名称"/>
      </a-form-item>
      <a-form-item label="备注">
        <a-textarea  v-model="form.txt" placeholder="请输入" allow-clear/>
      <a-form-item>
        <div style="width: 100%;text-align: right">
          <a-button @click="visible = false">取消</a-button>
          <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button>
        </div>
      </a-form-item>
<!--      <a-form-item>-->
<!--        <div style="width: 100%;text-align: right">-->
<!--          <a-button @click="visible = false">取消</a-button>-->
<!--          <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button>-->
<!--        </div>-->
<!--      </a-form-item>-->
    </a-form>
  </a-modal>
</template>
@@ -41,69 +37,8 @@
  name: [
    {
      required: true,
      message:'用户名不允许为空',
      message:'名称不允许为空',
    },
  ],
  nameJoin: [
    {
      required: true,
      message:'昵称不允许为空',
    },
  ],
  password: [
    {
      required: true,
      message:'password is required',
    },
  ],
  password2: [
    {
      required: true,
      message:'password is required',
    },
    {
      validator: (value, cb) => {
        if (value !== form.password) {
          cb('two passwords do not match')
        } else {
          cb()
        }
      }
    }
  ],
  email: [
    {
      type: 'email',
      required: true,
    }
  ],
  ip: [
    {
      type: 'ip',
      required: true,
    }
  ],
  url: [
    {
      type: 'url',
      required: true,
    }
  ],
  match: [
    {
      required: true,
      validator: (value, cb) => {
        return new Promise((resolve) => {
          if (!value) {
            cb('Please enter match')
          }
          if (value !== 'match') {
            cb('match must be match!')
          }
          resolve()
        })
      }
    }
  ],
}

@@ -116,15 +51,15 @@
  visible.value = true;
};
const handleBeforeOk = (done) => {
    formRef.value.validate().then(res => {
      console.log('form:', form)
      if (!form.name) {
        done(false)
      }else {
        console.log('请求数据');
  formRef.value.validate().then(res => {
    console.log('form:', form)
    if (!form.name) {
      done(false)
    }else {
      console.log('请求数据');

      }
    })
    }
  })
};
const handleCancel = () => {
  visible.value = false;

 src/views/dmx/knowledgeLib/index.vue

@@ -46,79 +46,9 @@
                          <!--            新建-->
                          <add />
                        </a-col>
                        <!--              <a-col :span="8">-->
                        <!--                <a-form-item field="name" :label="$t('searchTable.form.name')">-->
                        <!--                  <a-input-->
                        <!--                    v-model="formModel.name"-->
                        <!--                    :placeholder="$t('searchTable.form.name.placeholder')"-->
                        <!--                  />-->
                        <!--                </a-form-item>-->
                        <!--              </a-col>-->
                        <!--              <a-col :span="8">-->
                        <!--                <a-form-item-->
                        <!--                  field="contentType"-->
                        <!--                  :label="$t('searchTable.form.contentType')"-->
                        <!--                >-->
                        <!--                  <a-select-->
                        <!--                    v-model="formModel.contentType"-->
                        <!--                    :options="contentTypeOptions"-->
                        <!--                    :placeholder="$t('searchTable.form.selectDefault')"-->
                        <!--                  />-->
                        <!--                </a-form-item>-->
                        <!--              </a-col>-->
                        <!--              <a-col :span="8">-->
                        <!--                <a-form-item-->
                        <!--                  field="filterType"-->
                        <!--                  :label="$t('searchTable.form.filterType')"-->
                        <!--                >-->
                        <!--                  <a-select-->
                        <!--                    v-model="formModel.filterType"-->
                        <!--                    :options="filterTypeOptions"-->
                        <!--                    :placeholder="$t('searchTable.form.selectDefault')"-->
                        <!--                  />-->
                        <!--                </a-form-item>-->
                        <!--              </a-col>-->
                        <!--              <a-col :span="8">-->
                        <!--                <a-form-item-->
                        <!--                  field="createdTime"-->
                        <!--                  :label="$t('searchTable.form.createdTime')"-->
                        <!--                >-->
                        <!--                  <a-range-picker-->
                        <!--                    v-model="formModel.createdTime"-->
                        <!--                    style="width: 100%"-->
                        <!--                  />-->
                        <!--                </a-form-item>-->
                        <!--              </a-col>-->
                        <!--              <a-col :span="8">-->
                        <!--                <a-form-item-->
                        <!--                  field="status"-->
                        <!--                  :label="$t('searchTable.form.status')"-->
                        <!--                >-->
                        <!--                  <a-select-->
                        <!--                    v-model="formModel.status"-->
                        <!--                    :options="statusOptions"-->
                        <!--                    :placeholder="$t('searchTable.form.selectDefault')"-->
                        <!--                  />-->
                        <!--                </a-form-item>-->
                        <!--              </a-col>-->
                      </a-row>
                    </a-form>
                  </a-col>
                  <!--                <a-divider style="height: 40px" direction="vertical" />-->
                  <!--                <a-col :flex="'200px'" style="text-align: right">-->
                  <!--                  <a-button @click="reset" style="margin-right: 20px">-->
                  <!--                    <template #icon>-->
                  <!--                      <icon-refresh />-->
                  <!--                    </template>-->
                  <!--                    {{ $t('searchTable.form.reset') }}-->
                  <!--                  </a-button>-->
                  <!--                  <a-button type="primary" @click="search">-->
                  <!--                    <template #icon>-->
                  <!--                      <icon-search />-->
                  <!--                    </template>-->
                  <!--                    {{ $t('searchTable.form.search') }}-->
                  <!--                  </a-button>-->
                  <!--                </a-col>-->
                </a-row>
                <a-divider style="margin-top: 0" />
                <a-row style="margin-bottom: 16px">
@@ -217,51 +147,67 @@
                  :scroll="{ y: 580 }"
                >
                  <template #contentType="{ record }">
                    <a-space>
                      <a-avatar
                        v-if="record.contentType === 'img'"
                        :size="16"
                        shape="square"
                      >
                        <img
                          alt="avatar"
                          src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/581b17753093199839f2e327e726b157.svg~tplv-49unhts6dw-image.image"
                        />
                      </a-avatar>
                      <a-avatar
                        v-else-if="record.contentType === 'horizontalVideo'"
                        :size="16"
                        shape="square"
                      >
                        <img
                          alt="avatar"
                          src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77721e365eb2ab786c889682cbc721c1.svg~tplv-49unhts6dw-image.image"
                        />
                      </a-avatar>
                      <a-avatar v-else :size="16" shape="square">
                        <img
                          alt="avatar"
                          src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/ea8b09190046da0ea7e070d83c5d1731.svg~tplv-49unhts6dw-image.image"
                        />
                      </a-avatar>
                      {{ $t(`searchTable.form.contentType.${record.contentType}`) }}
                    </a-space>

                  </template>
                  <template #filterType="{ record }">
                    {{ $t(`searchTable.form.filterType.${record.filterType}`) }}
                  <template #staue="{ record }">
                    <a-switch :model-value="record.staue"/>
                  </template>
                  <template #status="{ record }">
                    <span v-if="record.status === 'offline'" class="circle"></span>
                    <span v-else class="circle pass"></span>
                    {{ $t(`searchTable.form.status.${record.status}`) }}
                    <div style="display: flex;align-items: center;">
                      <div style="width: 100px">
                        <a-popover title="Title">
                          <a-tag :color="'blue'" border>成功</a-tag>
                          <template #content>
                            <p>Here is the text content</p>
                          </template>
                        </a-popover>
                        <a-popover title="Title">
                          <a-tag :color="'gold'" border>取消</a-tag>
                          <template #content>
                            <p>Here is the text content</p>
                          </template>
                        </a-popover>
                        <a-popover title="Title">
                          <a-tag :color="'green'" border>未启动</a-tag>
                          <template #content>
                            <p>Here is the text content</p>
                          </template>
                        </a-popover>
                      </div>
                      <div>
                        <a-button type="text" size="large">
                          <template #icon>
                            <icon-sync />
                          </template>
                        </a-button>
                        <a-button type="text" size="large">
                          <template #icon>
                            <icon-sync style="color: green" />
                          </template>
                        </a-button>
                        <a-button type="text" size="large">
                          <template #icon>
                            <icon-play-circle style="color: green" />
                          </template>
                        </a-button>
                      </div>
                    </div>
                  </template>
                  <template #operations="{ record }">

                  <template #operations="{ record }" >
                    <tool/>
                    <edit/>
                    <a-popconfirm content="确定删除吗？" type="warning" @ok="deleteItem(record)">
                      <a-button v-permission="['admin']" type="text" size="small">
                        {{ $t('删除') }}
                        <template #icon>
                          <icon-delete />
                        </template>
                      </a-button>
                    </a-popconfirm>
                    <a-button type="text" size="small">
                      <template #icon>
                        <icon-download />
                      </template>
                    </a-button>
                  </template>
                </a-table>
              </a-card>
@@ -294,9 +240,11 @@
  import cloneDeep from 'lodash/cloneDeep';
  import Sortable from 'sortablejs';
  import add from '@/views/dmx/knowledgeLib/add.vue'
  import edit from '@/views/dmx/knowledgeLib/edit.vue'
  import addKnow from '@/views/dmx/knowledgeLib/addKnow.vue'
  import config from '@/views/dmx/knowledgeLib/config.vue'
  import test from '@/views/dmx/knowledgeLib/test.vue'
  import tool from '@/views/dmx/knowledgeLib/tool.vue'
  import { deleteAccount } from "@/api/account";
  type SizeProps = 'mini' | 'small' | 'medium' | 'large';
  type Column = TableColumnData & { checked?: true };
@@ -317,7 +265,6 @@
  const formModel = ref(generateFormModel());
  const cloneColumns = ref<Column[]>([]);
  const showColumns = ref<Column[]>([]);
  const edit = ref('add');

  const size = ref<SizeProps>('medium');
  let visible = ref(false)
@@ -354,11 +301,6 @@
    },
  ]);
  const columns = computed<TableColumnData[]>(() => [
    // {
    //   title: t('序号'),
    //   dataIndex: 'index',
    //   slotName: 'index',
    // },
    {
      title: t('名称'),
      dataIndex: 'name',
@@ -381,9 +323,21 @@
      dataIndex: 'createdTime',
    },
    {
      title: t('启用'),
      dataIndex: 'staue',
      slotName: 'staue',
    },
    {
      title: t('解析状态'),
      dataIndex: 'status',
      slotName: 'status',
    },
    {
      title: t('操作'),
      dataIndex: 'operations',
      slotName: 'operations',
      width: 150,
      minWidth: 100,
    },
  ]);
  const contentTypeOptions = computed<SelectOptionData[]>(() => [
@@ -427,7 +381,7 @@
    try {
      const { data } = await queryPolicyList(params);
      renderData.value = data.list;
      console.log(renderData);
      console.log(renderData, 'renderData');
      pagination.current = params.current;
      pagination.total = data.total;
    } catch (err) {

 src/views/dmx/knowledgeLib/tool.vue

New file
@@ -0,0 +1,177 @@

<template>
  <a-button type="text" @click="handleClick" size="small">
    <template #icon>
      <icon-tool />
    </template>
  </a-button>
  <a-modal
    v-model:visible="visible"
    title="解析方法"
    @before-open="handleOpened"
    @cancel="handleCancel"
    :footer="false"
    title-align="start"
    width="700px"
  >
  <div style="display: flex;align-items: center;">
    <div>
      解析方法:
    </div>
    <div style="margin-left: 10px">
      <a-select v-model="form.section" placeholder="请选择" allow-clear>
        <a-option value="section one">Section One</a-option>
        <a-option value="section two">Section Two</a-option>
        <a-option value="section three">Section Three</a-option>
      </a-select>
    </div>
  </div>
    <a-form ref="formRef" :rules="rules" :model="form"  auto-label-width @submit="handleSubmit" >
      <a-divider style="margin-top: 10px" />
      <a-form-item field="slider" label="最大token数"
                   :rules="[{type:'number', min:5,message:'slider is min than 5'}]">
        <a-slider v-model="form.section" :max="10" />
        <a-input-number v-model="form.section" :style="{width:'100px',marginLeft:'2rem',borderRadius:'4px'}"
                        placeholder="Please Enter" class="input-demo" :min="10" :max="1000" />
      </a-form-item>
      <a-divider style="margin-top: 10px" />
      <a-form-item field="raptor" label="使用召回增强RAPTOR策略">
        <a-space direction="vertical" size="large">
          <a-switch v-model="form.raptor" @change="onChangeRAPTOR" />
        </a-space>
      </a-form-item>
      <div v-if="form.raptor">
        <a-form-item field="section" label="提示词">
          <a-textarea
            v-model="form.prompt"
            style="height: 10rem;border: 1px solid  var(--color-fill-3);border-radius: 4px" placeholder=""
                      allow-clear />
        </a-form-item>
        <a-form-item field="slider" label="最大token数"
                     :rules="[{type:'number', min:5,message:'slider is min than 5'}]">
          <a-slider v-model="form.score" :max="10" />
          <a-input-number v-model="form.score" :style="{width:'100px',marginLeft:'2rem',borderRadius:'4px'}"
                          placeholder="Please Enter" class="input-demo" :min="10" :max="1000" />
        </a-form-item>
        <a-form-item field="slider" label="阈值" :rules="[{type:'number', min:5,message:'slider is min than 5'}]">
          <a-slider v-model="form.score" :max="10" />
          <a-input-number v-model="form.score" :style="{width:'100px',marginLeft:'2rem',borderRadius:'4px'}"
                          placeholder="Please Enter" class="input-demo" :min="10" :max="1000" />
        </a-form-item>
        <a-form-item field="slider" label="最大聚类数"
                     :rules="[{type:'number', min:5,message:'slider is min than 5'}]">
          <a-slider v-model="form.score" :max="10" />
          <a-input-number v-model="form.score" :style="{width:'100px',marginLeft:'2rem',borderRadius:'4px'}"
                          placeholder="Please Enter" class="input-demo" :min="10" :max="1000" />
        </a-form-item>
        <a-form-item field="slider" label="随机种子"
                     :rules="[{type:'number', min:5,message:'slider is min than 5'}]">
          <a-input-number v-model="form.score" :style="{width:'300px',marginRight:'1rem',borderRadius:'4px'}"
                          placeholder="请输入" class="input-demo" :min="10" :max="100" />
          <a-button type="primary" @click="">
            <icon-plus />
          </a-button>

        </a-form-item>

      </div>
      <a-form-item>
        <div style="width: 100%;text-align: right">
          <a-button @click="visible = false">取消</a-button>
          <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { onMounted ,onBeforeMount, reactive, ref } from "vue";

const visible = ref(false);
const loading = ref(false);
const form = reactive({
  size: "medium",
  name: "",
  age: undefined,
  section: "0",
  province: "haidian",
  options: [],
  date: "",
  time: "",
  radio: "radio one",
  slider: 5,
  score: 5,
  switch: false,
  multiSelect: ["section one"],
  treeSelect: "",
  raptor: true,
  prompt: '请总结以下段落。 小心数字，不要编造。 段落如下：\n' +
    '      {cluster_content}\n' +
    '以上就是你需要总结的内容。',
});
const formRef = ref(null);

const rules = {
  name: [
    {
      required: true,
      message:'名称不允许为空',
    },
  ],
}


const handleSubmit = ({values, errors}) => {
  console.log('values:', values, '\nerrors:', errors)
}

const handleClick = () => {
  visible.value = true;
};
const handleBeforeOk = (done) => {
  formRef.value.validate().then(res => {
    console.log('form:', form)
    if (!form.name) {
      done(false)
    }else {
      console.log('请求数据');

    }
  })
};
const handleCancel = () => {
  visible.value = false;
}

const handleOpened =(el) => {
  Object.assign(form,{
    name: '',// 用户名
    nameJoin: '',// 昵称
    post: '',// 岗位
    txt: '',// 备注
  });
  formRef.value.resetFields();
}

const onChangeRAPTOR = () => {
  console.log(form.raptor);
};

onBeforeMount(()=>{

})
onMounted(()=>{


})
</script>

<script lang="ts">
export default {
  name: 'add',
  methods: {

  }
};
</script>