知识库配置页面修改

liudong

2024-07-24 301b1a3bbc7e26e10d1118512cdd0226bd9c0b5f

知识库配置页面修改

 src/views/dmx/knowledgeLib/config.vue

New file
@@ -0,0 +1,376 @@
<template>
  <div class="main-container">
    <div class="main-container-lf">
      <div class="main-container-lf-down">
        <div style="margin-bottom: 10px">配置</div>
        <div style="color: #999;">在这里更新您的知识库详细信息，尤其是解析方法。</div>
        <a-divider style="margin-top: 10px" />
        <a-form ref="formRef" :size="form.size" :model="form" :style="{width:'100%'}" layout="vertical"
                @submit="handleSubmit">
          <a-form-item field="name" label="知识库名称"
                       :rules="[{required:true,message:'name is required'},{minLength:5,message:'must be greater than 5 characters'}]"
                       :validate-trigger="['change','input']"
          >
            <a-input v-model="form.name" placeholder="请输入" />
          </a-form-item>
          <a-form-item field="section" label="知识库图片">
            <a-space direction="vertical" :style="{ width: '100%' }">
              <a-upload
                action="/"
                :fileList="file ? [file] : []"
                :show-file-list="false"
                @change="onChange"
                @progress="onProgress"
              >
                <template #upload-button>
                  <div
                    :class="`arco-upload-list-item${
            file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
          }`"
                  >
                    <div
                      class="arco-upload-list-picture custom-upload-avatar"
                      v-if="file && file.url"
                    >
                      <img :src="file.url" />
                      <div class="arco-upload-list-picture-mask">
                        <IconEdit />
                      </div>
                      <a-progress
                        v-if="file.status === 'uploading' && file.percent < 100"
                        :percent="file.percent"
                        type="circle"
                        size="mini"
                        :style="{
                position: 'absolute',
                left: '50%',
                top: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
              }"
                      />
                    </div>
                    <div class="arco-upload-picture-card" v-else>
                      <div class="arco-upload-picture-card-text">
                        <IconPlus />
                        <div style="margin-top: 10px; font-weight: 600">上传</div>
                      </div>
                    </div>
                  </div>
                </template>
              </a-upload>
            </a-space>
          </a-form-item>
          <a-form-item field="section" label="描述">
            <a-textarea placeholder="" allow-clear />
          </a-form-item>
          <a-form-item field="section" label="语言" :rules="[{match:/section one/,message:'请选择'}]">
            <a-select v-model="form.section" placeholder="请选择" allow-clear>
              <a-option value="0">中文</a-option>
              <a-option value="1">英文</a-option>
            </a-select>
          </a-form-item>
          <a-form-item field="section" label="嵌入模型" :rules="[{match:/section one/,message:'请选择'}]">
            <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>
          </a-form-item>
          <a-form-item field="section" label="解析方法" :rules="[{match:/section one/,message:'请选择'}]">
            <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>
          </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-space direction="vertical" size="large">
              <a-switch v-model="form.score" checked-value="yes" unchecked-value="no" />
            </a-space>
          </a-form-item>
          <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 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-space>
                  <a-button type="primary" html-type="submit">保存</a-button>
                  <!--               <a-button @click="$refs.formRef.resetFields()">Reset</a-button>-->
                </a-space>
              </div>
            </a-form-item>
        </a-form>
      </div>
    </div>
    <div class="main-container-rt">

    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onBeforeMount, reactive, ref } from "vue";
import { Message } from "@arco-design/web-vue";

const props = defineProps({
  record: {
    type: Object,
    default: () => {
      return {};
    }
  }
});


const visible = ref(false);
const configIsShow = ref(false);
const loading = ref(false);
const formRef = ref(null);


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: false
});
const options = [
  {
    value: "beijing",
    label: "Beijing",
    children: [
      {
        value: "chaoyang",
        label: "ChaoYang",
        children: [
          {
            value: "datunli",
            label: "Datunli"
          }
        ]
      },
      {
        value: "haidian",
        label: "Haidian"
      },
      {
        value: "dongcheng",
        label: "Dongcheng"
      },
      {
        value: "xicheng",
        label: "XiCheng"
      }
    ]
  },
  {
    value: "shanghai",
    label: "Shanghai",
    children: [
      {
        value: "shanghaishi",
        label: "Shanghai",
        children: [
          {
            value: "huangpu",
            label: "Huangpu"
          }
        ]
      }
    ]
  }
];


const sayHello = () => {
  Message.info("hello");
};

const file = ref();

const onChange = (_, currentFile) => {
  file.value = {
    ...currentFile
    // url: URL.createObjectURL(currentFile.file),
  };
};
const onProgress = (currentFile) => {
  file.value = currentFile;
};


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


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


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();
  console.log(props.record, "record");
  // if(props.edit == 'edit'){
  //   Object.assign(form,props.record);
  // }
};

onBeforeMount(() => {

});
onMounted(() => {


});
</script>

<script lang="ts">
import { IconEdit, IconPlus } from "@arco-design/web-vue/es/icon";

export default {
  name: "config",
  components: { IconPlus, IconEdit },
  methods: {}
};
</script>
<style scoped lang="less">
.main-container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  overflow: auto;
  //background: #626aea;
  background: #ffffff;
  &-lf {
    width: 40%;
    //height: 100%;
    //border: 1px solid #cccccc;
    border-radius: 10px;

    &-top {
      width: 100%;
      height: 60px;
      line-height: 60px;
      //background: rgb(var(--primary-6));
      //color: #ffffff;
      //text-align: center;
    }

    &-down {
      padding: 20px;
      width: 100%;
    }
  }

  &-form-item-extra {
    width: 100%;
    height: 20rem;
    border: 1px solid var(--color-fill-3);
    border-radius: 6px;
    overflow: hidden;

    &-top {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid var(--color-fill-3);
      //background: rgb(var(--primary-6));
      color: #999999;
      text-align: center;
    }

    &-down {
      width: 92%;
      margin-left: 4%;
      margin-top: 30px;
    }

    &-btn {
      width: 96%;
      text-align: right;
      margin-top: 1rem;
    }
  }

  &-rt {
    width: 60%;
    //background: #626aea;
    //border: 1px solid #cccccc;
    border-radius: 10px;
  }
}
</style>

 src/views/dmx/knowledgeLib/index.vue

@@ -263,12 +263,12 @@
          </a-tab-pane>
          <a-tab-pane key="2" title="测试">
            <div class="rt-container-main">

              <test ></test>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" title="配置">
            <div class="rt-container-main">

              <config ></config>
            </div>
          </a-tab-pane>
        </a-tabs>
@@ -287,7 +287,9 @@
  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
  import cloneDeep from 'lodash/cloneDeep';
  import Sortable from 'sortablejs';
  import add from '@/views/user/account/add.vue'
  import add from '@/views/dmx/knowledgeLib/add.vue'
  import config from '@/views/dmx/knowledgeLib/config.vue'
  import test from '@/views/dmx/knowledgeLib/test.vue'
  import { deleteAccount } from "@/api/account";
  type SizeProps = 'mini' | 'small' | 'medium' | 'large';
  type Column = TableColumnData & { checked?: true };
@@ -344,43 +346,29 @@
    //   dataIndex: 'index',
    //   slotName: 'index',
    // },
    // {
    //   title: t('searchTable.columns.number'),
    //   dataIndex: 'number',
    // },
    {
      title: t('用户名'),
      title: t('名称'),
      dataIndex: 'name',
    },
    // {
    //   title: t('searchTable.columns.contentType'),
    //   dataIndex: 'contentType',
    //   slotName: 'contentType',
    // },
    // {
    //   title: t('searchTable.columns.filterType'),
    //   dataIndex: 'filterType',
    // },
    // {
    //   title: t('searchTable.columns.count'),
    //   dataIndex: 'count',
    // },
    {
      title: t('创建时间'),
      title: t('分快数'),
      dataIndex: 'contentType',
      slotName: 'contentType',
    },
    {
      title: t('上传时间'),
      dataIndex: 'filterType',
    },
    {
      title: t('创建人'),
      dataIndex: 'count',
    },
    {
      title: t('解析状态'),
      dataIndex: 'createdTime',
    },
    {
      title: t('所属部门'),
      dataIndex: 'filterType',
      slotName: 'filterType',
    },
    {
      title: t('备注'),
      dataIndex: 'status',
      slotName: 'status',
    },
    {
      title: t('searchTable.columns.operations'),
      title: t('操作'),
      dataIndex: 'operations',
      slotName: 'operations',
    },

 src/views/dmx/knowledgeLib/test.vue

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

<template>
    <div class="main-container">
      <div class="main-container-lf">
        <div class="main-container-lf-top">检索测试</div>
        <div class="main-container-lf-down">
          <div style="color: #999;">最后一步！ 成功后，剩下的就交给Infiniflow AI吧。</div>
          <a-divider style="margin-top: 10px" />
          <a-form ref="formRef" :size="form.size" :model="form" :style="{width:'100%'}" layout="vertical"  @submit="handleSubmit">
            <a-form-item field="slider" label="相似度阈值" :rules="[{type:'number', min:5,message:'slider is min than 5'}]">
              <a-slider v-model="form.slider" :max="10" />
            </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-form-item>
            <a-form-item field="section" label="Rerank模型" :rules="[{match:/section one/,message:'请选择'}]">
              <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>
            </a-form-item>
            <a-form-item field="section" :rules="[{match:/section one/,message:'请选择'}]">
              <div class="main-container-form-item-extra">
                <div class="main-container-form-item-extra-top">测试文本</div>
                <div class="main-container-form-item-extra-down">
                  <a-textarea style="height: 10rem;border: 1px solid  var(--color-fill-3);border-radius: 4px" placeholder="" allow-clear/>
                </div>
                <div class="main-container-form-item-extra-btn">
                  <a-button type="primary" html-type="submit">测试</a-button>
                </div>
              </div>
            </a-form-item>
<!--            <a-form-item>-->
<!--              <a-space>-->
<!--                <a-button html-type="submit">Submit</a-button>-->
<!--                <a-button @click="$refs.formRef.resetFields()">Reset</a-button>-->
<!--              </a-space>-->
<!--            </a-form-item>-->
          </a-form>
        </div>
      </div>
      <div class="main-container-rt">
        <a-collapse style="width: 96%;margin-top: 1rem;margin-left: 2%">
<!--          <a-collapse-item header="Beijing Toutiao Technology Co., Ltd." key="1">-->
<!--            <template #extra>-->
<!--              <icon-copy />-->
<!--            </template>-->
<!--            <div>Beijing Toutiao Technology Co., Ltd.</div>-->
<!--            <div>Beijing Toutiao Technology Co., Ltd.</div>-->
<!--          </a-collapse-item>-->
<!--          <a-collapse-item header="Beijing Toutiao Technology Co., Ltd." :key="2">-->
<!--            <template #extra>-->
<!--              <a-button type="primary" size="mini" @click.stop="sayHello">hello</a-button>-->
<!--            </template>-->
<!--            <div>Beijing Toutiao Technology Co., Ltd.</div>-->
<!--            <div>Beijing Toutiao Technology Co., Ltd.</div>-->
<!--          </a-collapse-item>-->
          <a-collapse-item header="0/0 选定的文件" key="3">
            <template #extra>
              <a-tag size="small">命中数</a-tag>
              <a-tag size="small">看法</a-tag>
            </template>
            <div>
              <a-empty />
            </div>
          </a-collapse-item>
        </a-collapse>
      </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted ,onBeforeMount, reactive, ref } from "vue";
import { Message } from '@arco-design/web-vue';

const props = defineProps({
  record: {
    type: Object,
    default: () => {
      return {}
    }
  }
})




const visible = ref(false);
const loading = ref(false);
const formRef = ref(null);



const form = reactive({
  size: 'medium',
  name: '',
  age: undefined,
  section: '',
  province: 'haidian',
  options: [],
  date: '',
  time: '',
  radio: 'radio one',
  slider: 5,
  score: 5,
  switch: false,
  multiSelect: ['section one'],
  treeSelect: ''
});
const options = [
  {
    value: 'beijing',
    label: 'Beijing',
    children: [
      {
        value: 'chaoyang',
        label: 'ChaoYang',
        children: [
          {
            value: 'datunli',
            label: 'Datunli',
          },
        ],
      },
      {
        value: 'haidian',
        label: 'Haidian',
      },
      {
        value: 'dongcheng',
        label: 'Dongcheng',
      },
      {
        value: 'xicheng',
        label: 'XiCheng',
      },
    ],
  },
  {
    value: 'shanghai',
    label: 'Shanghai',
    children: [
      {
        value: 'shanghaishi',
        label: 'Shanghai',
        children: [
          {
            value: 'huangpu',
            label: 'Huangpu',
          },
        ],
      },
    ],
  },
];


const sayHello = () => {
  Message.info('hello');
};

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();
  console.log(props.record, 'record');
  // if(props.edit == 'edit'){
  //   Object.assign(form,props.record);
  // }
}

onBeforeMount(()=>{

})
onMounted(()=>{


})
</script>

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

  }
};
</script>
<style scoped lang="less">
  .main-container{
    display: flex;
    justify-content: space-between;
    height: 100%;
    //background: #626aea;
    &-lf{
      width: 30%;
      height: 100%;
      //border: 1px solid #cccccc;
      background: #ffffff;
      border-radius: 10px;
      overflow: hidden;
      &-top{
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: rgb(var(--primary-6));
        color: #ffffff;
        text-align: center;
      }
      &-down{
        padding: 20px;
        width: 100%;
      }
    }
    &-form-item-extra{
      width: 100%;
      height: 20rem;
      border: 1px solid var(--color-fill-3);
      border-radius: 6px;
      overflow: hidden;
      &-top{
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid  var(--color-fill-3);
        //background: rgb(var(--primary-6));
        color: #999999;
        text-align: center;
      }
      &-down{
        width: 92%;
        margin-left: 4%;
        margin-top: 30px;
      }
      &-btn{
        width: 96%;
        text-align: right;
        margin-top: 1rem;
      }
    }
    &-rt{
      width: 69%;
      height: 100%;
      //background: #626aea;
      //border: 1px solid #cccccc;
      background: #ffffff;
      border-radius: 10px;
    }
  }
</style>