From 7c823d93077738368b52a3cab0867ad485678739 Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期四, 25 七月 2024 11:00:23 +0800
Subject: [PATCH] 知识库列表页面修改
---
src/views/dmx/knowledgeLib/index.vue | 53 ++++++++++++++++-
src/views/dmx/knowledgeLib/config.vue | 118 +++++++++++++++++++++++++++++---------
src/assets/images/step1.png | 0
src/assets/images/step2.png | 0
4 files changed, 138 insertions(+), 33 deletions(-)
diff --git a/src/assets/images/step1.png b/src/assets/images/step1.png
new file mode 100644
index 0000000..b46cb50
--- /dev/null
+++ b/src/assets/images/step1.png
Binary files differ
diff --git a/src/assets/images/step2.png b/src/assets/images/step2.png
new file mode 100644
index 0000000..9522de5
--- /dev/null
+++ b/src/assets/images/step2.png
Binary files differ
diff --git a/src/views/dmx/knowledgeLib/config.vue b/src/views/dmx/knowledgeLib/config.vue
index bf5e1be..d134148 100644
--- a/src/views/dmx/knowledgeLib/config.vue
+++ b/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="鍧桾oken鏁�" :rules="[{type:'number', min:5,message:'slider is min than 5'}]">
+ <a-form-item field="slider" label="鍧桾oken鏁�"
+ :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="鏈�澶oken鏁�" :rules="[{type:'number', min:5,message:'slider is min than 5'}]">
+ <a-form-item field="slider" label="鏈�澶oken鏁�"
+ :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銆丒XCEL銆丳PT銆両MAGE銆丳DF銆乀XT</b>銆�</p>
+ <p>姝ゆ柟娉曞皢绠�鍗曠殑鏂规硶搴旂敤浜庡潡鏂囦欢锛�</p>
+ <p>
+ </p>
+ <li>绯荤粺灏嗕娇鐢ㄨ瑙夋娴嬫ā鍨嬪皢杩炵画鏂囨湰鍒嗗壊鎴愬涓墖娈点��</li>
+ <li>鎺ヤ笅鏉ワ紝杩欎簺杩炵画鐨勭墖娈佃鍚堝苟鎴怲oken鏁颁笉瓒呰繃鈥淭oken鏁扳�濈殑鍧椼��</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 @@
</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 @@
//background: #626aea;
//border: 1px solid #cccccc;
border-radius: 10px;
+ overflow: hidden;
+ padding: 20px;
+ section{
+ width: 100%;
+ color: #333333;
+ }
}
}
</style>
\ No newline at end of file
diff --git a/src/views/dmx/knowledgeLib/index.vue b/src/views/dmx/knowledgeLib/index.vue
index 7680fec..34a2728 100644
--- a/src/views/dmx/knowledgeLib/index.vue
+++ b/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{
--
Gitblit v1.8.0