|
|
@@ -1,43 +1,191 @@
|
|
|
<template>
|
|
|
<div class="testBox">
|
|
|
<div class="test_right">
|
|
|
- <div class="test_input_box">
|
|
|
+ <div class="test_input_box" :class="{focus: isFocused}">
|
|
|
+ <div class="setting">
|
|
|
+ <el-tooltip content="知识库搜索配置" placement="bottom" effect="dark">
|
|
|
+ <!-- content to trigger tooltip here -->
|
|
|
+ <i @click="openSetting"></i>
|
|
|
+ <!-- <span>知识库搜索配置</span> -->
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
<el-input class="test_input" type="textarea" :rows="8" v-model="value" placeholder="输入需要测试的文本"
|
|
|
- resize="none">
|
|
|
+ resize="none" @focus="isFocused = true" @blur="isFocused = false">
|
|
|
</el-input>
|
|
|
- <el-button type="primary" size="small" @click="testCheck" v-loading="isLoading">测试</el-button>
|
|
|
+ <el-button class="btn" type="primary" size="mini" @click="testCheck"
|
|
|
+ v-loading="isLoading">测试</el-button>
|
|
|
</div>
|
|
|
|
|
|
- <div class="test_history">
|
|
|
+ <div class="test_history" v-loading="isLoading2">
|
|
|
<div class="title">测试记录</div>
|
|
|
- <div class="test_history_box" v-for="item in 100" :key="item">{{ item }}</div>
|
|
|
+ <div class="test_history_box" v-for="(item, index) in ragArray" :key="index" @click="checkRag(item)"
|
|
|
+ :class="{ acitve: item.id == ragJson.id }">
|
|
|
+ <div class="typeIcon" :class="{
|
|
|
+ type1: item.setting.useType == 1,
|
|
|
+ type2: item.setting.useType == 2,
|
|
|
+ type3: item.setting.useType == 3,
|
|
|
+ }">
|
|
|
+ {{ getUseType(item.setting.useType) }}
|
|
|
+ </div>
|
|
|
+ <div class="query">{{ item.setting.query }}</div>
|
|
|
+ <div class="time">{{ item.time }}</div>
|
|
|
+ <div class="del" @click.stop="deleteRag(item.id)"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="test_left">
|
|
|
- <div class="test_check">
|
|
|
+ <div class="test_check" v-if="Object.keys(ragJson).length">
|
|
|
<div class="title">测试参数</div>
|
|
|
+ <div class="can_box">
|
|
|
+ <div class="can_one" v-if="ragJson.setting">
|
|
|
+ <div class="one_box">
|
|
|
+ <span>搜索方式</span>
|
|
|
+ <span class="typeIcon" :class="{
|
|
|
+ type1: ragJson.setting.useType == 1,
|
|
|
+ type2: ragJson.setting.useType == 2,
|
|
|
+ type3: ragJson.setting.useType == 3,
|
|
|
+ }">{{ getUseType(ragJson.setting.useType) }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="one_box">
|
|
|
+ <span>引用上限</span>
|
|
|
+ <span>{{ ragJson.setting.tokens }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="one_box">
|
|
|
+ <span>最低相关度</span>
|
|
|
+ <span>{{ ragJson.setting.temperature }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="can_one" v-if="ragJson.setting" style="margin-top: 10px">
|
|
|
+ <div class="one_box">
|
|
|
+ <span>测试文本</span>
|
|
|
+ <span>{{ ragJson.setting.query }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="test_result">
|
|
|
+ <div class="test_result" v-if="Object.keys(ragJson).length">
|
|
|
<div class="title">测试结果</div>
|
|
|
+ <div v-if="ragJson.json && ragJson.json.chunkSearchResults" class="result_box">
|
|
|
+ <div v-for="(item, index) in ragJson.json.chunkSearchResults" :key="index" class="result">
|
|
|
+ <el-tooltip content="通过计算向量之间的距离获取得分，范围为0~1。" placement="bottom" effect="dark">
|
|
|
+ <div class="result_score">
|
|
|
+ {{ getUseType(ragJson.setting.useType) }}
|
|
|
+ {{ item.score.toFixed(4) }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ <div class="vditor-reset" v-html="MarkdownT(item.text)"></div>
|
|
|
+ <el-tooltip content="点击查看来源" placement="bottom" effect="dark">
|
|
|
+ <div class="result_file" @click="downloadFile(item.documentId, item.metadata.title)">
|
|
|
+ {{ item.metadata.title }}
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="customC" v-if="!Object.keys(ragJson).length">
|
|
|
+ <div style="height: 50px; line-height: 50px; width: 47.4px">
|
|
|
+ <img style="width: 100%" src="../../../../assets/flieKong.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px">测试结果将在这里展示</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <el-dialog title="新建文件夹" :visible.sync="moveBox" width="650px" style="border-radius: 8px"
|
|
|
+ @close="moveBox = false" class="canEditCss">
|
|
|
+ <div class="canEditTit" slot="title">
|
|
|
+ <img src="../../../../assets/icon/testC/dialog_setting.svg" alt="" />
|
|
|
+ <span>知识库搜索配置</span>
|
|
|
+ </div>
|
|
|
+ <div style="width: 100%; padding: 10px 40px; box-sizing: border-box;">
|
|
|
+ <div class="setting_nav">
|
|
|
+ <div class="setting_nav_box searchIcon active">
|
|
|
+ <span>搜索过滤</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="setting_serach">
|
|
|
+ <div class="setting_serach_box">
|
|
|
+ <span class="title">引用上限
|
|
|
+ <el-tooltip content="单次搜索最大的 token 数量，中文约1字=1.7tokens，英文约1字=1token" placement="bottom" effect="dark" popper-class="maxWidth">
|
|
|
+ <!-- content to trigger tooltip here -->
|
|
|
+ <i class="tips"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ <el-slider class="slider" v-model="json.tokens" :min="100" :max="20000" :step="1"
|
|
|
+ :vertical="false"></el-slider>
|
|
|
+ <el-input-number class="number" controls-position="right" v-model="json.tokens" size="small"
|
|
|
+ min="100" max="20000" step="1"></el-input-number>
|
|
|
+ </div>
|
|
|
+ <div class="setting_serach_box">
|
|
|
+ <span class="title">最低相关度
|
|
|
+ <el-tooltip content="不同索引模型的相关度有区别，请通过搜索测试来选择合适的数值。使用 结果重排 时，使用重排结果进行过滤。" placement="bottom" effect="dark" popper-class="maxWidth">
|
|
|
+ <!-- content to trigger tooltip here -->
|
|
|
+ <i class="tips"></i>
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ <el-slider class="slider" v-model="json.temperature" :min="0" :max="1" :step="0.01"
|
|
|
+ :vertical="false"></el-slider>
|
|
|
+ <el-input-number class="number" controls-position="right" v-model="json.temperature" size="small"
|
|
|
+ min="0" max="1" step="0.01"></el-input-number>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer">
|
|
|
+ <el-button @click="moveBox = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmSetting">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import MarkdownIt from "markdown-it";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ isFocused: "",
|
|
|
value: "",
|
|
|
- isLoading: false
|
|
|
- }
|
|
|
+ isLoading: false,
|
|
|
+ isLoading2: false,
|
|
|
+ ragArray: [],
|
|
|
+ ragJson: {},
|
|
|
+ moveBox: false,
|
|
|
+ tokens: 1500,
|
|
|
+ temperature: 0,
|
|
|
+ json: {
|
|
|
+ temperature: 0,
|
|
|
+ tokens: 1500,
|
|
|
+ }
|
|
|
+ };
|
|
|
},
|
|
|
props: {
|
|
|
userid: {
|
|
|
- type: String
|
|
|
+ type: String,
|
|
|
},
|
|
|
folderid: {
|
|
|
- type: String
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ MarkdownT() {
|
|
|
+ return function (c) {
|
|
|
+ let md = new MarkdownIt({
|
|
|
+ html: true, // 允许渲染 HTML
|
|
|
+ // linkify: true, // 自动将URL链接转化为可点击链接
|
|
|
+ typographer: true, // 启用排版规则（如替换 `"` 为 “）
|
|
|
+ });
|
|
|
+ return c ? md.render(c) : "";
|
|
|
+ };
|
|
|
+ },
|
|
|
+ getUseType() {
|
|
|
+ return function (e) {
|
|
|
+ if (e == 1) {
|
|
|
+ return "语义检索";
|
|
|
+ } else if (e == 2) {
|
|
|
+ return "全文检索";
|
|
|
+ } else if (e == 2) {
|
|
|
+ return "混合检索";
|
|
|
+ }
|
|
|
+ };
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -49,25 +197,130 @@ export default {
|
|
|
query: this.value,
|
|
|
type: 2,
|
|
|
useType: 1,
|
|
|
- fullTextWeight: 5,
|
|
|
+ fullTextWeight: 1,
|
|
|
semanticWeight: 5,
|
|
|
limit: 10,
|
|
|
- temperature: 0,
|
|
|
- tokens: 1500,
|
|
|
+ temperature: this.temperature,
|
|
|
+ tokens: this.tokens,
|
|
|
};
|
|
|
this.ajax
|
|
|
.post(this.$store.state.fileApi + "ragFolder", [params])
|
|
|
.then((res) => {
|
|
|
this.isLoading = false;
|
|
|
+ this.getRagData();
|
|
|
console.log(res);
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
this.isLoading = false;
|
|
|
console.error(err);
|
|
|
});
|
|
|
+ },
|
|
|
+ getRagData() {
|
|
|
+ this.isLoading2 = true;
|
|
|
+ let params = {
|
|
|
+ userid: this.userid,
|
|
|
+ fid: this.folderid,
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.fileApi + "getRagData", [params])
|
|
|
+ .then((res) => {
|
|
|
+ this.isLoading2 = false;
|
|
|
+ console.log(res);
|
|
|
+ this.ragArray = res.data[0];
|
|
|
+ for (var i = 0; i < this.ragArray.length; i++) {
|
|
|
+ this.ragArray[i].setting = JSON.parse(this.ragArray[i].setting);
|
|
|
+ this.ragArray[i].json = JSON.parse(this.ragArray[i].json);
|
|
|
+ }
|
|
|
+ if (this.ragArray.length) {
|
|
|
+ this.ragJson = this.ragArray[0];
|
|
|
+ this.ragJson.setting = this.ragJson.setting;
|
|
|
+ this.ragJson.json = this.ragJson.json;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.isLoading2 = false;
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ downloadFile(id, rname) {
|
|
|
+ let params = {
|
|
|
+ documentid: id,
|
|
|
+ filename: rname,
|
|
|
+ };
|
|
|
+ // 使用axios发送GET请求下载文件
|
|
|
+ this.ajax
|
|
|
+ .post(`${this.$store.state.fileApi}downloadFile2`, [params], {
|
|
|
+ responseType: "blob",
|
|
|
+ })
|
|
|
+ .then((response) => {
|
|
|
+ const url = window.URL.createObjectURL(new Blob([response.data]));
|
|
|
+ const link = document.createElement("a");
|
|
|
+ link.href = url;
|
|
|
+ link.setAttribute("download", rname); // 设置下载文件名
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ link.remove();
|
|
|
+ this.$message({
|
|
|
+ message: "下载成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("下载失败");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ checkRag(item) {
|
|
|
+ if (item.id == this.ragJson.id) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.ragJson = item;
|
|
|
+ },
|
|
|
+ deleteRag(id) {
|
|
|
+ this.$confirm("确定删除该记录嘛?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ id: id,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.fileApi + "delRagData", params)
|
|
|
+ .then((res) => {
|
|
|
+ this.$message({
|
|
|
+ message: "删除成功",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.getRagData();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$message.error("删除失败");
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+ },
|
|
|
+ openSetting() {
|
|
|
+ this.json = JSON.parse(JSON.stringify({
|
|
|
+ tokens: this.tokens,
|
|
|
+ temperature: this.temperature
|
|
|
+ }));
|
|
|
+ this.moveBox = true;
|
|
|
+ },
|
|
|
+ confirmSetting() {
|
|
|
+ this.tokens = this.json.tokens
|
|
|
+ this.temperature = this.json.temperature
|
|
|
+ this.moveBox = false;
|
|
|
}
|
|
|
},
|
|
|
-}
|
|
|
+ mounted() {
|
|
|
+ this.getRagData();
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -76,6 +329,7 @@ export default {
|
|
|
gap: 20px;
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
+ padding: 10px 24px;
|
|
|
}
|
|
|
|
|
|
.testBox .test_right {
|
|
|
@@ -88,17 +342,59 @@ export default {
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
-.testBox .test_right .test_input_box {}
|
|
|
+.testBox .test_right .test_input_box {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ /* gap: 5px; */
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 2px solid #94b5ff;
|
|
|
+ margin: 2.4px;
|
|
|
+ transition: all .3s;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_right .test_input_box>.setting {
|
|
|
+ margin-left: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ /* color: #667085;
|
|
|
+ font-size: 14px; */
|
|
|
+}
|
|
|
+
|
|
|
+.test_input_box.focus {
|
|
|
+ border-color: #487fff !important;
|
|
|
+ box-shadow: rgba(51, 112, 255, 0.15) 0px 0px 0px 2.4px;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_right .test_input_box>.setting i {
|
|
|
+ display: block;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-image: url(../../../../assets/icon/testC/test_setting.svg);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
|
|
|
.testBox .test_right .test_input_box .test_input {}
|
|
|
|
|
|
+.testBox .test_right .test_input_box .test_input>>>.el-textarea__inner {
|
|
|
+ border: none;
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_right .test_input_box>.btn {
|
|
|
+ margin-left: auto;
|
|
|
+}
|
|
|
+
|
|
|
.testBox .test_right .test_input_box>>>.el-button {
|
|
|
- height: 35px !important;
|
|
|
+ height: 30px !important;
|
|
|
font-size: 12.8px;
|
|
|
- background-color: #3370FF;
|
|
|
+ background-color: #3370ff;
|
|
|
border-radius: 6px;
|
|
|
- margin-left: 12px;
|
|
|
- border:none;
|
|
|
+ /* margin-left: 12px; */
|
|
|
+ border: none;
|
|
|
}
|
|
|
|
|
|
.testBox .test_right .test_input_box>>>.el-button--primary:focus,
|
|
|
@@ -111,9 +407,81 @@ export default {
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
-.testBox .test_right .test_history>.title {}
|
|
|
+.testBox .test_right .test_history>.title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_right .test_history>.title:before {
|
|
|
+ content: "";
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 5px;
|
|
|
+ background-image: url(../../../../assets/icon/testC/test_history.svg);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_right .test_history>.test_history_box {
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ align-items: center;
|
|
|
+ padding: 5px 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ color: #667085;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #e8ebf0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.test_history_box.acitve {
|
|
|
+ background: #f0f4ff;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_right .test_history>.test_history_box+.test_history_box {
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_right .test_history>.test_history_box:hover {
|
|
|
+ border: 1px solid #94b5ff;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_right .test_history>.test_history_box:hover .time {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_right .test_history>.test_history_box:hover .del {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_right .test_history>.test_history_box>.typeIcon {
|
|
|
+ min-width: fit-content;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_right .test_history>.test_history_box>.query {
|
|
|
+ margin: 5px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ flex: 1;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_right .test_history>.test_history_box>.time {
|
|
|
+ margin-left: auto;
|
|
|
+ min-width: fit-content;
|
|
|
+}
|
|
|
|
|
|
-.testBox .test_right .test_history>.test_history_box {}
|
|
|
+.testBox .test_right .test_history>.test_history_box>.del {
|
|
|
+ margin-left: auto;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ background-image: url("../../../../assets/icon/testC/del.svg");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: none;
|
|
|
+}
|
|
|
|
|
|
.testBox .test_left {
|
|
|
width: 100%;
|
|
|
@@ -121,4 +489,287 @@ export default {
|
|
|
height: 100%;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
+
|
|
|
+.testBox .test_left .test_check {}
|
|
|
+
|
|
|
+.testBox .test_left .test_check .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_left .test_check .title:before {
|
|
|
+ content: "";
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 8px;
|
|
|
+ background-image: url(../../../../assets/icon/testC/test_can.svg);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.can_box {
|
|
|
+ width: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ background: #f0f4ff;
|
|
|
+ border: 1px solid #e2e8f0;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 15px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.can_one {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ /* height: 60px; */
|
|
|
+}
|
|
|
+
|
|
|
+.one_box {
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ min-width: fit-content;
|
|
|
+}
|
|
|
+
|
|
|
+.one_box+.one_box {
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.one_box>span:nth-child(1) {
|
|
|
+ color: #4a5568;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.one_box>span:nth-child(2) {
|
|
|
+ font-weight: 400;
|
|
|
+ color: #1d2532;
|
|
|
+ word-break: break-all;
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_left .test_result {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_left .test_result .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.testBox .test_left .test_result .title:before {
|
|
|
+ content: "";
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 8px;
|
|
|
+ background-image: url(../../../../assets/icon/testC/test_result.svg);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.typeIcon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.type1:before {
|
|
|
+ content: "";
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-right: 5px;
|
|
|
+ background-image: url(../../../../assets/icon/testC/m_icon.svg);
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.result_box {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.result_box>.result {
|
|
|
+ background: #f4f4f7;
|
|
|
+ border-radius: 10px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.result_box>.result+.result {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.result_box>.result .result_score {
|
|
|
+ font-size: 14px;
|
|
|
+ width: fit-content;
|
|
|
+ border-radius: 7px;
|
|
|
+ padding: 5px 12px;
|
|
|
+ color: #2b5fd9;
|
|
|
+ background: #f0f4ff;
|
|
|
+ border: 1px solid #c5d7ff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.result_file {
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-decoration: underline;
|
|
|
+ cursor: pointer;
|
|
|
+ width: fit-content;
|
|
|
+}
|
|
|
+
|
|
|
+.customC {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #667085;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.canEditTit {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.canEditTit img {
|
|
|
+ width: 25px;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.canEditCss>>>.el-dialog__body {
|
|
|
+ padding: 10px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.canEditCss>>>.el-dialog__header {
|
|
|
+ background-color: rgb(251, 251, 252);
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
+ font-family: Pingfang;
|
|
|
+ border-bottom: 0.5px rgb(244, 246, 248) solid;
|
|
|
+}
|
|
|
+
|
|
|
+.canEditCss>>>.el-dialog {
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 600px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.setting_nav {
|
|
|
+ display: flex;
|
|
|
+ /* border-bottom: 1px solid #E2E8F0; */
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ /* justify-content: flex-start; */
|
|
|
+}
|
|
|
+
|
|
|
+.setting_nav_box {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ width: calc(100% / 3);
|
|
|
+ align-items: center;
|
|
|
+ /* flex: 1; */
|
|
|
+ color: #485264;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 16px;
|
|
|
+ border-bottom: 1px solid #E2E8F0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.setting_nav_box::before {
|
|
|
+ content: '';
|
|
|
+ background-size: 100%;
|
|
|
+ margin-right: 5px;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.setting_nav_box:hover,
|
|
|
+.setting_nav_box.active {
|
|
|
+ color: #3370ff;
|
|
|
+ border-color: #3370ff;
|
|
|
+}
|
|
|
+
|
|
|
+.searchIcon::before {
|
|
|
+ background-image: url(../../../../assets/icon/testC/search.svg);
|
|
|
+}
|
|
|
+
|
|
|
+.setting_nav_box:hover.searchIcon::before,
|
|
|
+.setting_nav_box.active.searchIcon::before {
|
|
|
+ background-image: url(../../../../assets/icon/testC/search2.svg);
|
|
|
+}
|
|
|
+
|
|
|
+.setting_serach {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.setting_serach_box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #111824;
|
|
|
+ gap: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.setting_serach_box .title {
|
|
|
+ display: flex;
|
|
|
+ flex: 0 0 120px;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.setting_serach_box .slider {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.setting_serach_box .slider >>> .el-slider__bar{
|
|
|
+ background: unset;
|
|
|
+}
|
|
|
+.setting_serach_box .slider >>> .el-slider__button {
|
|
|
+ border-color: #3370ff;
|
|
|
+}
|
|
|
+.setting_serach_box .number {
|
|
|
+ flex: 0 0 120px;
|
|
|
+}
|
|
|
+
|
|
|
+.setting_serach_box+.setting_serach_box {
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.tips{
|
|
|
+ display: block;
|
|
|
+ background-image: url(../../../../assets/icon/testC/test_tips.svg);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ height: 14px;
|
|
|
+ width: 14px;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 1300px) {
|
|
|
+ .testBox {
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .testBox .test_right{
|
|
|
+ flex-direction: row;
|
|
|
+ width: 100%;
|
|
|
+ height: 250px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .testBox .test_right .test_input_box{
|
|
|
+ flex: 0 0 250px;
|
|
|
+ }
|
|
|
+ .testBox .test_right .test_history{
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.maxWidth{
|
|
|
+ max-width: 240px;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
</style>
|
