xiaoshu/src/components/Slider.vue

<template>
  <main>
    <header @click="handleClick(-1)">
      <img src="@/assets/slider/logo.jpg" />
    </header>
    <section>
      <div v-for="(item, key) in slider" :key="key" @click="handleClick(item.id, item.title)"
        :class="{ active: item.id === navId }">
        <div>
          <img :src="getAssetURL(`/src/assets/slider/${item.icon}.svg`)" width="24" class="img-normal" />
          <img :src="getAssetURL(`/src/assets/slider/${item.icon}-1.svg`)" width="24" class="img-hover" />
          <p>{{ item.title }}</p>
        </div>
      </div>
    </section>
    <a-popover position="rt">
      <footer>
        <div style="background-color: rgb(255, 110, 110)">{{ userName?.slice(0, 1) }}</div>
        <p>{{ userName }}</p>
      </footer>
      <template #content>
        <div class="user-popover">
          <header>
            <div style="background-color: rgb(255, 110, 110)">{{ userName?.slice(0, 1) }}</div>
            <p>{{ userName }}</p>
          </header>
          <section>
            <div class="item">
              <div @click="toRagflow">
                <icon-question-circle size="large" />
                <p>知识管理系统</p>
              </div>
            </div>
            <!-- <div class="item" @click="() => {
                            // openHelp = true;
                        }
                            ">
                            <div>
                                <icon-info-circle size="large" />
                                <p>版本说明</p>
                            </div>
                        </div>
                        <div class="item">
                            <div>
                                <icon-question-circle size="large" />
                                <p>使用帮助</p>
                            </div>
                        </div> -->
          </section>
          <div class="item" @click="logout">
            <div>
              <icon-import size="large" />
              <p>退出登录</p>
            </div>
          </div>
        </div>
      </template>
    </a-popover>
    <a-modal v-model:visible="openHelp" :footer="false" width="800px">
      <template #title>版本说明</template>
      <div style="padding: 0 30px; height: 300px">
        <div>
          <p><strong>版本号：v2.1</strong></p>
          <ol>
            <li>【首页】只需一个小小的动作，就可以触发AI会议系统，操作更便捷。</li>
            <li>【首页】新增实用性极强的版本信息，轻松了解产品能力。</li>
            <li>【大模型】阅读理解能力提升，可以通过智能问答、文档智能、文库问答、文档出题体验。</li>
            <li>
              【文档出题】对出题的随机性设置，进一步增强题目的多样性和创新性，默认参数为1时题目数量和内容最佳，当希望内容更随机、更多样时，可调大参数值。
            </li>
          </ol>
          <p><strong>版本号: v2.0</strong></p>
          <ol>
            <li>【界面优化】使用全新配色UI，更美观、更方便。</li>
          </ol>
          <ul>
            <li>让插件和prompt合集显性化，一目了然</li>
            <li>新增鼠标悬停解释说明功能，方便新手快速入门</li>
            <li>新增prompt搜索框，方便快速检索</li>
          </ul>
          <ol start="2">
            <li>智能问答板块可支持显示\隐藏侧边栏</li>
            <li>支持prompt点击填充输入框，更快捷</li>
            <li>新增图生文能力，快速识别图片内容并进行对话交互</li>
            <li>模型基础能力提升，各模块更快更准更强</li>
            <li>新增RPA进度显示，方便查看自动化工作流进程</li>
            <li>文库容量全面升级，实现5倍的扩充</li>
            <li>新增对接ISC系统，实现文档的分权限管理</li>
          </ol>
          <p><strong>版本号: v1.6</strong></p>
          <ol>
            <li>文档创作</li>
          </ol>
          <ul>
            <li>答案生成的准确性提升</li>
          </ul>
          <ol start="2">
            <li>文库问答</li>
          </ol>
          <ul>
            <li>优化多源多答案功能</li>
            <li>解决文档溯源过程中部分显示问题</li>
            <li>改进检索关键字不准确问题</li>
            <li>提升在多文档中生成答案的融合能力</li>
          </ul>
          <ol start="3">
            <li>文档出题</li>
          </ol>
          <ul>
            <li>提升出题的速度及处理效率</li>
          </ul>
          <p><strong>版本号: v1.5</strong></p>
          <ol>
            <li>插件优化与新增</li>
          </ol>
          <ul>
            <li>
              文库问答
              <ul>
                <li>基于知识库的多文档，实现多源多答案功能。</li>
              </ul>
            </li>
            <li>
              文档创作
              <ul>
                <li>支持各类型公文的创作，包括讲话稿、发言稿，工作总结、方案，述职报告等；</li>
                <li>支持对字数的要求生成文档，包括 200 字、500 字左右等；</li>
                <li>支持对公文的续写、扩写（对生成公文指定的部分继续完善），最多支持一分钟 3 轮。</li>
              </ul>
            </li>
            <li>
              文档出题
              <ul>
                <li>支持流式输出；</li>
                <li>解决卡顿问题；</li>
                <li>对题目数量的识别、不同类型题的判断优化。</li>
              </ul>
            </li>
          </ul>
          <ol start="2">
            <li>后端管理平台</li>
          </ol>
          <ul>
            <li>支持对知识库中的文档，设置为个人文档/组织文档。</li>
          </ul>
          <p><strong>版本号: v1.4</strong></p>
          <ol>
            <li>首页</li>
          </ol>
          <ul>
            <li>对接 ISC 系统，基于用户信息实现相关功能</li>
            <li>视觉优化</li>
          </ul>
          <ol start="2">
            <li>插件优化与新增</li>
          </ol>
          <ul>
            <li>
              文档智能
              <ul>
                <li>新增功能——支持多文档上传；</li>
                <li>新增功能——支持文件上传列表中，选择任意文档问答</li>
                <li>性能优化</li>
              </ul>
            </li>
            <li>
              文档出题
              <ul>
                <li>新增插件</li>
                <li>基于上传的文档实现出题，支持出判断题、单项选择题、多项选择题、问答题</li>
              </ul>
            </li>
            <li>
              文库问答
              <ul>
                <li>录入技术发展部、党建部、人资部等组织材料，实现相关的知识问答。</li>
                <li>性能优化</li>
              </ul>
            </li>
          </ul>
          <p><strong>版本号: v1.3</strong></p>
          <ol>
            <li>首页</li>
          </ol>
          <ul>
            <li>增加深色主题。</li>
            <li>右上角新增提示推荐、版本说明。</li>
            <li>提示推荐: 提示推荐: 新增更多分类，实现多种推荐。</li>
            <li>插件: 新增“出小差”，支持问答式生成出差审批表。</li>
          </ul>
          <p><strong>版本号: v1.2</strong></p>
          <ol>
            <li>开放域对话</li>
          </ol>
          <ul>
            <li>在不选插件的情况下，回答多领域问题。</li>
          </ul>
          <ol start="2">
            <li>选择插件</li>
          </ol>
          <ul>
            <li>
              文档智能
              <ul>
                <li>支持单文件上传，实现文件问答。</li>
                <li>支持单文件上传，实现局域上传记录的多文档问答。</li>
                <li>文档管理，支持上传删除。</li>
              </ul>
            </li>
          </ul>
          <ol start="3">
            <li>以文生图:</li>
          </ol>
          <ul>
            <li>根据用户的需求描述或输入文本，输出与之相匹配的图片。</li>
          </ul>
          <ol start="4">
            <li>文档创作:</li>
          </ol>
          <ul>
            <li>支持对给定的标题、关键词、大纲或多种组合方式编写公文。</li>
            <li>例 1.根据标题生成一篇公文，标题 XX；</li>
            <li>例 2.根据标题和大纲生成一篇公文，标题：XX；大纲：XX</li>
          </ul>
          <ol start="5">
            <li>文库问答:</li>
          </ol>
          <ul>
            <li>通过对各部门的知识库构建，实现相关知识的问答。</li>
          </ul>
          <br />
        </div>
      </div>
    </a-modal>
  </main>
</template>
<script>
import { defineComponent, inject, onMounted, ref } from "vue";

export default defineComponent({
  props: ["navId"],
  setup(props, { emit }) {
    const openHelp = ref(false);
    const { ajax, helper, config } = inject("$global");

    const userName = ref(helper.read("userName") || "");
    if (!userName.value) {
      helper.goLink("/login");
    }
    const handleClick = (id, title) => {
      emit("select-nav", { id: id, title: title });
    };
    const logout = () => {
      helper.reset();
      helper.goLink("/login");
    };
    const toRagflow = async () => {
      const { ragflow_token } = await ajax.user.getToken();
      if (ragflow_token) {
        // window.open(`http://${window.location.hostname}:9222/authorization?ragflow_token=${ragflow_token}`, "_blank");
        window.open(`http://${window.location.hostname}:11080/authorization?ragflow_token=${ragflow_token}`, "_blank");
      }

    }

    return {
      slider: config.slider,
      getAssetURL: helper.getAssetURL,
      userName,
      handleClick,
      openHelp,
      toRagflow,
      logout
    };
  }
});
</script>
<style lang="scss" scoped>
main {
  padding: 20px 0;
  width: 100px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;

  >header {
    cursor: pointer;

    >img {
      display: block;
      width: 62px;
      margin: 0 auto;
    }
  }

  >section {
    flex: 1;
    margin-top: 27px;

    >div {
      margin: 0 auto;
      width: 70px;
      height: 70px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;

      .img-normal {
        display: block;
      }

      .img-hover {
        display: none;
      }

      &:hover,
      &.active {
        background: rgba(0, 0, 0, 0.05);

        .img-normal {
          display: none;
        }

        .img-hover {
          display: block;
        }
      }

      img {
        display: block;
        margin: 0 auto;
      }

      p {
        font-size: 13px;
        margin-top: 2px;
        color: rgb(51, 51, 51);
      }
    }
  }

  >footer {
    margin: 0 auto 30px;
    padding: 0 10px;
    width: 80px;
    cursor: pointer;

    >div {
      margin: 0 auto;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    >p {
      margin-top: 5px;
      width: 100%;
      text-align: center;
      word-wrap: break-word;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}

.user-popover {
  >header {
    padding-bottom: 10px;
    border-bottom: 1px solid #e8e8e8;

    >div {
      margin: 0 auto;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    >p {
      margin-top: 5px;
      max-width: 150px;
      text-align: center;
      word-wrap: break-word;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  >section {
    border-bottom: 1px solid #e8e8e8;
  }

  .item {
    display: flex;
    height: 40px;
    justify-content: center;

    >div {
      display: flex;
      align-items: center;
      cursor: pointer;

      &:hover {
        color: #00aea3;
      }

      >p {
        margin-left: 10px;
      }
    }
  }
}
</style>