flow_web/src/views/dmx/knowledgeLib/config.vue

<template>
  <div class="main-container">
    <div style="position: absolute;top: 0;left: 0;width: 100%;padding: 0 20px">
      <h4 style="margin-bottom: 10px">配置</h4>
      <div style="color: #666666;">在这里更新您的知识库详细信息，尤其是解析方法。</div>
      <a-divider style="margin-top: 20px" />
    </div>
    <div class="main-container-lf">
      <div class="main-container-lf-down">
        <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">
      <section data-inspector-line="34" data-inspector-column="4"
               data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"
               class="categoryPanelWrapper___yI4rY" ><h4
        class="ant-typography topTitle___tNiB9 css-dev-only-do-not-override-1wxecgq" data-inspector-line="37"
        data-inspector-column="10"
        data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx">"General"
        分块方法说明</h4>
        <p data-inspector-line="40" data-inspector-column="10"
           data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"><p>
          支持的文件格式为<b>DOCX、EXCEL、PPT、IMAGE、PDF、TXT</b>。</p>
          <p>此方法将简单的方法应用于块文件：</p>
          <p>
          </p>
          <li>系统将使用视觉检测模型将连续文本分割成多个片段。</li>
          <li>接下来，这些连续的片段被合并成Token数不超过“Token数”的块。</li>
          <p></p></p>
        <h4 class="ant-typography css-dev-only-do-not-override-1wxecgq" data-inspector-line="45"
            data-inspector-column="10"
            data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx">
          "General" 示例</h4><span class="ant-typography css-dev-only-do-not-override-1wxecgq" data-inspector-line="48"
                                   data-inspector-column="10"
                                   data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx">提出以下屏幕截图以促进理解。</span>
        <div data-inspector-line="49" data-inspector-column="10"
             data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"
             class="ant-row imageRow___C3Xpb css-dev-only-do-not-override-1wxecgq"
             style="margin-left: -5px; margin-right: -5px; row-gap: 10px;display: flex; margin-top: 20px;width: 100%">
          <img
            data-inspector-line="32" data-inspector-column="8"
            data-inspector-relative-path="src\components\svg-icon.tsx" src="../../../assets/images/step1.png" alt=""
            width="50%">
          <img
            data-inspector-line="32" data-inspector-column="8"
            data-inspector-relative-path="src\components\svg-icon.tsx" src="../../../assets/images/step2.png" alt=""
            width="50%">
        </div>
        <h4 class="ant-typography css-dev-only-do-not-override-1wxecgq" data-inspector-line="60"
            data-inspector-column="10"
            data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx">
          General 对话示例</h4>
        <div class="ant-divider css-dev-only-do-not-override-1wxecgq ant-divider-horizontal" data-inspector-line="63"
             data-inspector-column="10"
             data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"
             role="separator"></div>
        <a-divider style="margin-top: 20px" />
      </section>
    </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 {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 100%;
  overflow: auto;
  //background: #626aea;
  background: #ffffff;
  padding-top: 80px;
  &-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;
    overflow: hidden;
    padding: 20px;
    section{
      width: 100%;
      color: #333333;
    }
  }
}
</style>