知识库列表页面修改

src/views/dmx/knowledgeLib/config.vue

@@ -1,10 +1,12 @@
 <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">
-        <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="知识库名称"
@@ -83,9 +85,11 @@
               <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-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-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">
@@ -99,48 +103,96 @@
           </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 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-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-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-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-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-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 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-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>
@@ -309,12 +361,14 @@ export default {
 </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%;
@@ -371,6 +425,12 @@ export default {
     //background: #626aea;
     //border: 1px solid #cccccc;
     border-radius: 10px;
+    overflow: hidden;
+    padding: 20px;
+    section{
+      width: 100%;
+      color: #333333;
+    }
   }
 }
 </style>

src/views/dmx/knowledgeLib/index.vue

@@ -6,7 +6,7 @@
         <div class="lf-container-top">
           <a-input-search
             :placeholder="$t('cardList.searchInput.placeholder')"
-            style="width: 110px;"
+            style="width: 130px;"
           />
           <a-button type="primary" @click="add" style="margin-left: 10px">
             <template #icon>
@@ -15,7 +15,17 @@
           </a-button>
         </div>
         <div class="lf-container-down">
-
+          <div class="tabs">
+            <div
+              class="tab"
+              v-for="(tab, index) in tabs"
+              :key="index"
+              @click="selectTab(index)"
+              :class="{ 'active': selectedTab === index }"
+            >
+              {{ tab }}
+            </div>
+          </div>
         </div>
       </div>
       <div class="rt-container">
@@ -314,6 +324,12 @@
 
   const size = ref<SizeProps>('medium');
   let visible = ref(false)
+  let selectedTab = ref(0)
+  let tabs = reactive(['Tab 1', 'Tab 2', 'Tab 3'])
+
+  const  selectTab = (index) => {
+    selectedTab.value= index;
+  }
 
   const basePagination: Pagination = {
     current: 1,
@@ -547,9 +563,38 @@
           display: flex;
         }
         .lf-container-down{
-          width: 80%;
+          display: flex;
+          flex-direction: column;
+          width: 90%;
           height: calc(100% - 5rem);
-          border: 1px solid #cccccc;
+          border: 1px solid #eeeeee;
+          overflow: auto;
+          padding: 10px;
+          .tabs .tab {
+            cursor: pointer;
+            box-sizing: border-box;
+            margin: 10px 0;
+            padding:0 10px;
+            color: rgba(0, 0, 0, 0.88);
+            font-size: 14px;
+            height: 40px;
+            line-height: 40px;
+            list-style: none;
+            position: relative;
+            background: #ffffff;
+            border: 1px solid #f0f0f0;
+            border-radius: 8px;
+          }
+          .tabs .tab:hover {
+            border: 1px solid #ffffff;
+            background: #e8e8ea;
+            box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
+          }
+          .tabs .tab.active {
+            border: 1px solid #e8e8ea;
+            background: #e8e8ea;
+            cursor: pointer;
+          }
         }
       }
       .rt-container{