|
|
@@ -1,219 +1,84 @@
|
|
|
<template>
|
|
|
- <div id="app">
|
|
|
- <Slider>
|
|
|
- <Directory />
|
|
|
- </Slider>
|
|
|
- <div class="main">
|
|
|
- <section>
|
|
|
- <div class="middle">
|
|
|
- <button title="返回知识库" @click="goBack">
|
|
|
- <img src="@/assets/icons/riLine-home-3-line.png" width="16" />
|
|
|
- </button>
|
|
|
- <pdf-reader v-if="fileUrl" :fileUrl="fileUrl" :fileName="fileName"/>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <div class="nav">
|
|
|
- <div>
|
|
|
- <p v-for="(item, index) in navList" :key="index" :class="[index === navIndex ? 'active' : '']" @click="changeNav(index)">
|
|
|
- {{item}}
|
|
|
- </p>
|
|
|
+ <main>
|
|
|
+ <section>
|
|
|
+ <div v-for="(item, key) in data" :key="key" :style="{ background: item.background }">
|
|
|
+ <img :src="getAssetURL(item.img)" />
|
|
|
+ <div :style="{ color: item.color }">
|
|
|
+ {{ item.title }}
|
|
|
+ <span>{{ item.content }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <top-bar />
|
|
|
- </div>
|
|
|
- <section>
|
|
|
- <div class="buttons" v-if="navIndex === 2">
|
|
|
- <div :class="[isSummary ? 'active' : '']" @click="chooseSummary(true)">大纲</div>
|
|
|
- <div :class="[!isSummary ? 'active' : '']" @click="chooseSummary(false)">导图</div>
|
|
|
- </div>
|
|
|
- <introduction :data="guideContent" v-if="navIndex === 0 && guideContent" />
|
|
|
- <talk v-show="navIndex === 1" />
|
|
|
- <logic :data="brainMapContent" v-if="navIndex === 2 && !isSummary && brainMapContent" />
|
|
|
- <outline :data="brainMapContent" v-if="navIndex === 2 && isSummary && brainMapContent" />
|
|
|
- <translate v-if="navIndex === 3" />
|
|
|
- </section>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </section>
|
|
|
+ <footer>文档解析站</footer>
|
|
|
+ </main>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import Slider from '@/components/Slider.vue';
|
|
|
-import TopBar from '@/components/TopBar.vue';
|
|
|
-import Directory from '@/components/Directory.vue';
|
|
|
-import PdfReader from '@/components/PdfReader.vue';
|
|
|
-import { defineComponent, ref, onBeforeUnmount, onMounted, inject } from 'vue';
|
|
|
-import Introduction from '@/components/Introduction.vue';
|
|
|
-import Talk from '@/components/Talk.vue';
|
|
|
-import Translate from '@/components/Translate.vue';
|
|
|
-import Logic from '@/components/Logic.vue';
|
|
|
-import Outline from '@/components/Outline.vue';
|
|
|
-import { useRoute } from 'vue-router';
|
|
|
+import { defineComponent, ref, inject } from "vue";
|
|
|
export default defineComponent({
|
|
|
- components: {
|
|
|
- Slider,
|
|
|
- TopBar,
|
|
|
- Directory,
|
|
|
- PdfReader,
|
|
|
- Introduction,
|
|
|
- Talk,
|
|
|
- Logic,
|
|
|
- Outline,
|
|
|
- Translate
|
|
|
- },
|
|
|
- setup() {
|
|
|
- const fileUrl = ref('');
|
|
|
- const fileName = ref('');
|
|
|
- const route = useRoute();
|
|
|
- const navIndex = ref(0);
|
|
|
- const isSummary = ref(true);
|
|
|
- const guideContent = ref(null);
|
|
|
- const brainMapContent = ref('');
|
|
|
- const navList = ['导读', '对话', '脑图', '翻译'];
|
|
|
- const { helper, ajax } = inject('$global');
|
|
|
- const { documentId } = route.query;
|
|
|
- const changeNav = (index) => {
|
|
|
- navIndex.value = index;
|
|
|
- };
|
|
|
- onBeforeUnmount(() => {
|
|
|
- helper.$bus.off('change-channel');
|
|
|
- });
|
|
|
- onMounted(async () => {
|
|
|
- const data = await ajax.document.getDocument(documentId);
|
|
|
- fileUrl.value = data.fileUrl;
|
|
|
- fileName.value = data.fileName;
|
|
|
- const result = await ajax.document.getGuideOrBrainMap(documentId);
|
|
|
- guideContent.value = JSON.parse(result.guideContent);
|
|
|
- brainMapContent.value = result.brainMapContent;
|
|
|
- helper.$bus.on('change-channel',(value) => {
|
|
|
- navIndex.value = 1;
|
|
|
- helper.$bus.emit('send-message', value);
|
|
|
- });
|
|
|
- });
|
|
|
- const goBack = () => {
|
|
|
- helper.goLink('knowledge', { knowledgeId: route.query.knowledgeId });
|
|
|
- };
|
|
|
- const chooseSummary = (value) => {
|
|
|
- isSummary.value = value;
|
|
|
- console.log(333);
|
|
|
+ components: {},
|
|
|
+ setup() {
|
|
|
+ const { helper } = inject("$global");
|
|
|
+ const DEFAULT_DATA = [
|
|
|
+ {
|
|
|
+ background: "rgba(72, 177, 244, 0.06)",
|
|
|
+ color: "rgb(72, 177, 244)",
|
|
|
+ img: "/src/assets/document/1.png",
|
|
|
+ title: "自定义个人文档",
|
|
|
+ content: "支持个人文档上传，以列表形式管理个人文档库"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ background: "rgba(158, 128, 255, 0.06)",
|
|
|
+ color: "rgb(158, 128, 255)",
|
|
|
+ img: "/src/assets/document/2.png",
|
|
|
+ title: "多文档问答",
|
|
|
+ content: "支持勾选多个文档，实现基于限定文档的问答"
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ const data = ref(DEFAULT_DATA);
|
|
|
+ return { data, getAssetURL: helper.getAssetURL };
|
|
|
}
|
|
|
- return {
|
|
|
- fileUrl,
|
|
|
- fileName,
|
|
|
- changeNav,
|
|
|
- navIndex,
|
|
|
- navList,
|
|
|
- goBack,
|
|
|
- isSummary,
|
|
|
- chooseSummary,
|
|
|
- guideContent,
|
|
|
- brainMapContent
|
|
|
- };
|
|
|
- },
|
|
|
});
|
|
|
</script>
|
|
|
-<style>
|
|
|
-.arco-message-list-top {
|
|
|
- top: 350px !important;
|
|
|
-}
|
|
|
-.arco-select-view-suffix {
|
|
|
- padding-left: 0 !important;
|
|
|
-}
|
|
|
-</style>
|
|
|
-<style scoped>
|
|
|
- .middle {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- >button {
|
|
|
- background: transparent;
|
|
|
- border: none;
|
|
|
- cursor: pointer;
|
|
|
- padding: 4px;
|
|
|
- position: absolute;
|
|
|
- top: 13px;
|
|
|
- left: 16px;
|
|
|
- z-index: 2000;
|
|
|
- cursor: pointer;
|
|
|
- opacity: .8;
|
|
|
- &:hover {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
+<style lang="scss" scoped>
|
|
|
+main {
|
|
|
height: 100%;
|
|
|
- width: 500px;
|
|
|
- border-left: 1px solid rgba(229, 229, 229, 1);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
- section {
|
|
|
- flex: 1;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- .main {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- background: #fbfbfb;
|
|
|
- overflow-y: auto;
|
|
|
- >section {
|
|
|
- display: flex;
|
|
|
- flex: 1;
|
|
|
- overflow: hidden;
|
|
|
- .nav {
|
|
|
- padding-left: 16px;
|
|
|
- border-bottom: 1px solid rgba(229, 229, 229, 1);
|
|
|
- >div {
|
|
|
- display: flex;
|
|
|
- flex: 1;
|
|
|
- align-items: center;
|
|
|
- >p {
|
|
|
- height: 50px;
|
|
|
- line-height: 50px;
|
|
|
- margin-right: 32px;
|
|
|
- cursor: pointer;
|
|
|
- position: relative;
|
|
|
- &:hover,&.active {
|
|
|
- color: #88B04B;
|
|
|
- font-weight: bold;
|
|
|
- &:after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- bottom: 0px;
|
|
|
- height: 2px;
|
|
|
- background-color: #88B04B;
|
|
|
- width: 100%;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ > section {
|
|
|
+ overflow-y: auto;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .buttons {
|
|
|
- margin: 20px 0 8px 20px;
|
|
|
- padding: 4px;
|
|
|
- display: inline-flex;
|
|
|
- border-radius: 8px;
|
|
|
- background-color: rgba(255, 255, 255, 1);
|
|
|
- >div {
|
|
|
- width: 44px;
|
|
|
- line-height: 30px;
|
|
|
- text-align: center;
|
|
|
- color: rgba(187, 187, 187, 1);
|
|
|
- font-size: 12px;
|
|
|
- font-weight: bold;
|
|
|
- cursor: pointer;
|
|
|
- border-radius: 4px;
|
|
|
- &.active {
|
|
|
- color: rgba(136, 176, 75, 1);
|
|
|
- background-color: rgba(136, 176, 75, 0.1);
|
|
|
- }
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 20px;
|
|
|
+ flex: 1;
|
|
|
+ > div {
|
|
|
+ width: 382px;
|
|
|
+ height: 120px;
|
|
|
+ padding: 20px 24px;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ > img {
|
|
|
+ width: 30px;
|
|
|
+ height: 38px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ > div {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ > span {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #797d7f;
|
|
|
+ margin-top: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
+}
|
|
|
</style>
|
zhangnuoyan
