完善页面

xiangpei

2025-03-27 63cf733888810630129576657e0f793275eb971a

完善页面

 package-lock.json

@@ -9,6 +9,7 @@
      "version": "0.1.0",
      "dependencies": {
        "axios": "^1.8.4",
        "clipboard": "^2.0.11",
        "core-js": "^3.8.3",
        "element-ui": "^2.15.14",
        "vue": "^2.6.14",
@@ -4138,6 +4139,17 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
    "node_modules/clipboard": {
      "version": "2.0.11",
      "resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
      "integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
      "license": "MIT",
      "dependencies": {
        "good-listener": "^1.2.2",
        "select": "^1.1.2",
        "tiny-emitter": "^2.0.0"
      }
    },
    "node_modules/clipboardy": {
      "version": "2.3.0",
      "resolved": "https://registry.npmmirror.com/clipboardy/-/clipboardy-2.3.0.tgz",
@@ -5081,6 +5093,12 @@
      "engines": {
        "node": ">=0.4.0"
      }
    },
    "node_modules/delegate": {
      "version": "3.2.0",
      "resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
      "license": "MIT"
    },
    "node_modules/depd": {
      "version": "2.0.0",
@@ -6699,6 +6717,15 @@
      },
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
    "node_modules/good-listener": {
      "version": "1.2.2",
      "resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
      "integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
      "license": "MIT",
      "dependencies": {
        "delegate": "^3.1.2"
      }
    },
    "node_modules/gopd": {
@@ -10354,6 +10381,12 @@
        "url": "https://opencollective.com/webpack"
      }
    },
    "node_modules/select": {
      "version": "1.1.2",
      "resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
      "integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==",
      "license": "MIT"
    },
    "node_modules/select-hose": {
      "version": "2.0.0",
      "resolved": "https://registry.npmmirror.com/select-hose/-/select-hose-2.0.0.tgz",
@@ -11338,6 +11371,12 @@
      "dev": true,
      "license": "MIT"
    },
    "node_modules/tiny-emitter": {
      "version": "2.1.0",
      "resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
      "license": "MIT"
    },
    "node_modules/to-regex-range": {
      "version": "5.0.1",
      "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",

 package.json

@@ -9,6 +9,7 @@
  },
  "dependencies": {
    "axios": "^1.8.4",
    "clipboard": "^2.0.11",
    "core-js": "^3.8.3",
    "element-ui": "^2.15.14",
    "vue": "^2.6.14",

 src/App.vue

@@ -10,6 +10,7 @@
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  font-size: 14px;
}

</style>

 src/components/AiChat.vue

@@ -4,15 +4,33 @@
    <div class="chat-messages">
      <div
          v-for="(message, index) in messages"
          :key="index"
          :key="message + index"
          :class="['message', message.role]"
          @mouseover="handleMouseEnter(message)"
      >
        <div class="avatar">
          <img :src="getAvatar(message.role)" alt="avatar" />
        </div>
        <div class="content">
<!--          <div class="name">{{ getRoleName(message.role) }}</div>-->
          <div class="text">{{ message.content }}</div>
          <div class="text" :ref="'msg' + index">{{ message.content }}</div>
          <div v-if="message.role === 'assistant'">
            <div v-show="msgIndex === message" class="msg-op-list">
              <el-button class="copy" v-show="false"/>
              <el-tooltip class="item" effect="dark" content="复制" placement="top">
                <i class="el-icon-copy-document msg-op msg-copy" @click="copyText(message.content)"/>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="重新生成" placement="top">
                <i class="el-icon-refresh msg-op msg-re" @click="reAnswer"/>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div v-if="message.role === 'user'">
          <div v-show="msgIndex === message" style="display: flex">
            <el-tooltip class="item" effect="dark" content="复制" placement="top">
              <i class="el-icon-copy-document msg-op msg-copy" @click="copyText(message.content)"/>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
@@ -36,7 +54,9 @@
</template>

<script>
import ClipboardJS from 'clipboard';
import {sendKbMsg} from "@/api/chat";
import {Message} from "element-ui";

export default {
  name: 'AiChat',
@@ -45,6 +65,10 @@
      messages: [
        {
          role: 'assistant',
          content: '你好！我是你的 AI 助手，有什么可以帮你的吗？',
        },
        {
          role: 'user',
          content: '你好！我是你的 AI 助手，有什么可以帮你的吗？',
        },
      ],
@@ -71,10 +95,33 @@
        max_tokens: 0,
        prompt_name: "default",
        return_direct: false
      }
      },
      msgIndex: null,
      msgRole: null
    };
  },
  methods: {
    handleMouseEnter(msgIndex) {
      console.log("鼠标移入", msgIndex)
      this.msgIndex = msgIndex
    },
    handleMouseLeave() {
      console.log("鼠标移除")
      this.msgIndex = null
    },
    // 重新生成
    reAnswer() {
    },
    // 复制内容
    copyText(content) {
      const clipboard = new ClipboardJS('.copy', {
        text: () => content
      });
      // 触发复制（需要一个隐藏的按钮）
      document.querySelector('.copy').click();
      clipboard.destroy();
      Message.success("复制成功")
    },
    // 获取角色头像
    getAvatar(role) {
      const avatars = {
@@ -148,10 +195,12 @@

.message {
  display: flex;
  margin-bottom: 16px;
  margin-bottom: 18px;
  min-height: 75px;
}

.message.user {
  align-items: center;
  flex-direction: row-reverse;
}

@@ -167,7 +216,7 @@
  padding: 8px 12px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
}

.message.user .content {
@@ -202,4 +251,21 @@
  left: 50%; /* 将 div 的左边移动到父容器的 50% 位置 */
  transform: translateX(-50%); /* 将 div 向左移动自身宽度的 50% */
}

.msg-op-list {
  margin-top: 15px;
}
.msg-copy {
  font-size: 18px;
}
.msg-re {
  font-size: 20px;
}
.msg-op {
  color: gray;
  margin-right: 5px;
}
.msg-op:hover {
  cursor: pointer;
}
</style>

 src/components/SessionConfig.vue

New file
@@ -0,0 +1,106 @@
<template>
  <div>
    <el-dialog
        :title="sessionName + '——对话设置'"
        :visible.sync="show"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        width="600px"
        >
        <div class="config-item">
          <div class="title">请选择对话模式：</div>
          <div>
            <el-select v-model="config.chatType" @change="saveConfig" size="small">
              <el-option label="知识库问答" value="kb"/>
            </el-select>
          </div>
        </div>
      <div class="config-item">
        <div class="title">请选择知识库：</div>
        <div>
          <el-select v-model="config.kb" @change="saveConfig" size="small">
            <el-option label="知识库A" value="kb1"/>
          </el-select>
        </div>
      </div>
      <div class="config-item">
        <div class="title">历史对话轮数：</div>
        <div>
          <el-input v-model="config.hisChatNum" @input="saveConfig" type="number" size="small"/>
        </div>
      </div>
      <div class="config-item">
        <div class="title">匹配知识条数：</div>
        <div>
          <el-input v-model="config.matchKbNum" @input="saveConfig" type="number" size="small"/>
        </div>
      </div>
      <div class="config-item">
        <div class="title">匹配知识分数阈值：</div>
        <div>
          <el-slider
              v-model="config.matchKbScore"
              @change="saveConfig"
              :min="0.00"
              :max="2.00"
              :step="0.01">
          </el-slider>
        </div>
      </div>
      <div>
        <el-checkbox v-model="config.returnMatchResult" @change="saveConfig">仅返回检索结果</el-checkbox>
      </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SessionConfig",
  props: {
    sessionName: {
      type: String
    }
  },
  data() {
    return {
      show: false,
      config: {
        chatType: 'kb',
        kb: 'kb1',
        hisChatNum: 3,
        matchKbNum: 3,
        matchKbScore: 1,
        returnMatchResult: false
      }
    };
  },
  methods: {
    saveConfig() {
      console.log("触发保存了")
      this.$emit('saveConfig', this.config)
    },
    setShow(value) {
      this.show = value
    },
    setConfig(config) {
      this.config = config
    },
    close() {
      this.show = false
    }
  }
}
</script>

<style scoped>
.config-item {
  margin-bottom: 10px;
}
.title {
  margin-bottom: 5px;
}
</style>

 src/views/Index.vue

@@ -7,76 +7,148 @@
      <div class="menu">
        <div :class="{tab: true, activeTab: activeTab === 0}" @click="changeTab(0)">
          <svg t="1742895429099" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1205" width="18" height="18">
            <path d="M174.72 855.68l130.048-43.392 23.424 11.392C382.4 849.984 444.352 864 512 864c223.744 0 384-159.872 384-352 0-192.832-159.104-352-384-352S128 319.168 128 512a341.12 341.12 0 0 0 69.248 204.288l21.632 28.8-44.16 110.528z m-45.248 82.56A32 32 0 0 1 89.6 896l56.512-141.248A405.12 405.12 0 0 1 64 512C64 299.904 235.648 96 512 96s448 203.904 448 416-173.44 416-448 416c-79.68 0-150.848-17.152-211.712-46.72l-170.88 56.96z" p-id="1206" :fill="activeTab === 0 ? 'blue' : 'grey'">
            <path :fill="activeTab === 0 ? 'blue' : 'grey'" d="M174.72 855.68l130.048-43.392 23.424 11.392C382.4 849.984 444.352 864 512 864c223.744 0 384-159.872 384-352 0-192.832-159.104-352-384-352S128 319.168 128 512a341.12 341.12 0 0 0 69.248 204.288l21.632 28.8-44.16 110.528z m-45.248 82.56A32 32 0 0 1 89.6 896l56.512-141.248A405.12 405.12 0 0 1 64 512C64 299.904 235.648 96 512 96s448 203.904 448 416-173.44 416-448 416c-79.68 0-150.848-17.152-211.712-46.72l-170.88 56.96z" p-id="1206">
            </path></svg>
          <span style="margin-left: 10px">对话</span></div>
          <span style="margin-left: 10px">对话</span>
        </div>
        <div :class="{tab: true, activeTab: activeTab === 1}" style="margin-top: 2px" @click="changeTab(1)">
          <svg style="margin-left: -1px" t="1742895849411" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1227" width="20" height="20"><path d="M921.6 366.592L512 102.4 102.4 366.592l409.6 264.192z m-409.6-153.6L759.296 358.4 512 503.296 264.704 358.4z m0 621.568l-361.472-224.256-48.128 47.104L512 921.6l409.6-264.192-48.64-48.128z m0-145.408L150.528 464.896 102.4 512l409.6 264.192L921.6 512l-48.64-48.128z" p-id="1228" :fill="activeTab === 1 ? 'blue' : 'grey'"></path></svg>
          <svg t="1743057348452" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2837" width="17" height="17">
            <path :fill="activeTab === 1 ? 'blue' : 'grey'" d="M927.8 193.7c0.1-1.6 0.2-3.2 0.2-4.8 0-15.7-6.3-30-18.7-42.9-6.9-7.2-15.8-13.9-26.5-20.1-21.9-12.7-52.3-23.9-90.5-33.3C717.1 74.2 617.5 64 512 64S306.9 74.2 231.7 92.6c-38.2 9.4-68.6 20.6-90.5 33.3-2.4 1.4-4.8 2.9-7 4.3-18.5 12.1-30.4 25.9-35.4 41.2-1.6 4.8-2.5 9.8-2.7 15H96v649.2c0 24.3 15.2 45.4 45.2 62.8 21.9 12.6 52.3 23.8 90.5 33.1C306.9 949.9 406.5 960 512 960s205.1-10.1 280.3-28.5c38.2-9.3 68.6-20.5 90.5-33.1 30-17.4 45.2-38.5 45.2-62.8V394h-0.2V193.7z m-58.3 419.6c-0.3 0.4-0.7 1-1.5 1.8l-0.6 0.6c-1.2 1.2-3 2.8-5.5 4.7-0.3 0.2-0.5 0.4-0.8 0.6-1.4 1-3 2.1-4.8 3.2-0.3 0.2-0.6 0.4-0.9 0.5-2.2 1.3-4.7 2.7-7.6 4.2-0.2 0.1-0.5 0.3-0.7 0.4-0.2 0.1-0.5 0.3-0.7 0.4-0.5 0.3-1 0.5-1.5 0.7-2.3 1.1-4.9 2.3-7.7 3.5-0.6 0.3-1.2 0.5-1.8 0.8 0 0-0.1 0-0.1 0.1-0.5 0.2-1.1 0.5-1.7 0.7-4.1 1.7-8.6 3.4-13.6 5.2-0.8 0.3-1.6 0.6-2.4 0.8-4.2 1.4-8.7 2.9-13.6 4.3-0.3 0.1-0.7 0.2-1 0.3-0.8 0.2-1.5 0.5-2.3 0.7-0.5 0.2-1.1 0.3-1.7 0.5-0.3 0.1-0.7 0.2-1 0.3-0.5 0.1-1 0.3-1.5 0.4-2 0.6-4.1 1.1-6.2 1.7l-3.3 0.9c-6.9 1.8-14.4 3.6-22.5 5.4-69.1 15.2-158.8 23.6-252.6 23.6s-183.5-8.4-252.6-23.6c-8.1-1.8-15.6-3.6-22.5-5.4l-3.3-0.9c-2.1-0.6-4.2-1.1-6.2-1.7-0.5-0.1-1-0.3-1.5-0.4-0.3-0.1-0.7-0.2-1-0.3-0.6-0.2-1.1-0.3-1.7-0.5-0.8-0.2-1.6-0.5-2.3-0.7-0.3-0.1-0.7-0.2-1-0.3-4.9-1.5-9.4-2.9-13.6-4.3-0.8-0.3-1.6-0.6-2.4-0.8-5-1.8-9.5-3.5-13.6-5.2-0.6-0.2-1.1-0.5-1.7-0.7 0 0-0.1 0-0.1-0.1-0.6-0.3-1.2-0.5-1.8-0.8-2.8-1.2-5.4-2.4-7.7-3.5-0.5-0.3-1-0.5-1.5-0.7-0.3-0.1-0.5-0.3-0.7-0.4-0.2-0.1-0.5-0.2-0.7-0.4-2.9-1.5-5.4-2.9-7.6-4.2-0.3-0.2-0.6-0.4-0.9-0.5-1.8-1.1-3.4-2.2-4.8-3.2-0.3-0.2-0.5-0.4-0.8-0.6-2.5-1.9-4.3-3.4-5.5-4.7l-0.6-0.6c-0.7-0.8-1.2-1.4-1.5-1.8V463.8c2 1 4.1 1.9 6.2 2.9 0.6 0.3 1.1 0.5 1.7 0.7l2.1 0.9c0.8 0.3 1.5 0.6 2.3 1 0.7 0.3 1.3 0.6 2 0.8 0.7 0.3 1.4 0.6 2.1 0.8 3.6 1.4 7.3 2.9 11.2 4.3 0.7 0.3 1.5 0.5 2.2 0.8 4.7 1.7 9.7 3.3 14.8 4.9 1.7 0.5 3.4 1.1 5.1 1.6 1.2 0.4 2.4 0.7 3.6 1.1l3.3 0.9c1.4 0.4 2.8 0.8 4.3 1.2 1.7 0.5 3.3 0.9 5 1.4 1.5 0.4 3.1 0.8 4.7 1.2 1 0.3 2.1 0.5 3.1 0.8l3.6 0.9c75.2 18.4 174.8 28.5 280.3 28.5h10.5c3.1 0 6.1 0 9.2-0.1h1.9c2.3 0 4.7-0.1 7-0.1 5.2-0.1 10.4-0.2 15.5-0.4 2.9-0.1 5.8-0.2 8.6-0.3 3.2-0.1 6.3-0.2 9.5-0.3 1.6-0.1 3.1-0.1 4.7-0.2 6.3-0.3 12.5-0.6 18.7-0.9 1.2-0.1 2.4-0.1 3.6-0.2l10.2-0.6c1.3-0.1 2.6-0.2 3.8-0.2 7.9-0.5 15.7-1.1 23.4-1.8 1.5-0.1 3-0.3 4.5-0.4 3.8-0.3 7.6-0.7 11.4-1 1.5-0.1 3-0.3 4.4-0.4 12.5-1.2 24.8-2.6 36.8-4.2 1.2-0.2 2.4-0.3 3.6-0.5 2.9-0.4 5.7-0.8 8.6-1.2 1.3-0.2 2.6-0.4 3.8-0.5 5.5-0.8 11-1.6 16.3-2.5 2.5-0.4 4.9-0.8 7.4-1.2 12.1-2 23.8-4.2 35-6.6 1.2-0.3 2.4-0.5 3.6-0.8 2.3-0.5 4.7-1 6.9-1.5 1.2-0.3 2.4-0.5 3.6-0.8 1.2-0.3 2.4-0.5 3.5-0.8 5.3-1.3 10.4-2.5 15.4-3.9 0.9-0.2 1.9-0.5 2.8-0.7 0.9-0.3 1.8-0.5 2.7-0.8l5.4-1.5c20.3-5.9 38-12.3 52.9-19.3 0.7-0.3 1.3-0.6 2-1v149.5zM154.3 258.9c1 0.5 2 1 3 1.4 19.9 9.3 44.8 17.6 74.4 24.9 75.2 18.5 174.8 28.6 280.3 28.6s205.1-10.2 280.3-28.6c31-7.6 56.8-16.4 77.1-26.2v133.5c-0.8 1.2-3.3 4.1-9 8.1l-0.9 0.6c-0.9 0.6-1.9 1.3-3 1.9-1.1 0.7-2.2 1.4-3.5 2.1-0.4 0.2-0.8 0.5-1.3 0.7-0.4 0.2-0.9 0.5-1.3 0.7-0.5 0.3-0.9 0.5-1.4 0.7-0.2 0.1-0.5 0.3-0.7 0.4-0.2 0.1-0.5 0.3-0.7 0.4-0.3 0.1-0.5 0.3-0.8 0.4-0.3 0.1-0.5 0.3-0.8 0.4-0.4 0.2-0.8 0.4-1.1 0.6-0.4 0.2-0.8 0.4-1.3 0.6-0.5 0.2-0.9 0.4-1.4 0.7-0.7 0.3-1.3 0.6-2.1 0.9-0.3 0.1-0.6 0.3-0.9 0.4-1.7 0.7-3.4 1.5-5.3 2.3l-1.5 0.6c-1.7 0.7-3.5 1.4-5.4 2.1-0.4 0.2-0.8 0.3-1.1 0.4-1.2 0.5-2.5 0.9-3.8 1.4l-0.9 0.3c-2.1 0.8-4.4 1.5-6.7 2.3-0.9 0.3-1.9 0.6-2.9 0.9-2.2 0.7-4.4 1.4-6.7 2.1-0.8 0.3-1.7 0.5-2.5 0.8-7.3 2.1-15.3 4.3-24.1 6.5-0.6 0.2-1.2 0.3-1.9 0.5-0.6 0.2-1.3 0.3-1.9 0.5-3.2 0.8-6.5 1.5-9.9 2.3-69.1 15.2-158.8 23.6-252.6 23.6s-183.5-8.4-252.6-23.6c-1.2-0.3-2.4-0.5-3.6-0.8-0.6-0.1-1.2-0.3-1.8-0.4-0.3-0.1-0.6-0.2-1-0.2-0.7-0.2-1.4-0.3-2.1-0.5-0.7-0.2-1.5-0.3-2.2-0.5-1.1-0.3-2.3-0.5-3.4-0.8-6.4-1.5-12.3-3.1-17.8-4.7-0.7-0.2-1.5-0.4-2.2-0.6-1.4-0.4-2.9-0.8-4.3-1.3-0.9-0.3-1.8-0.5-2.7-0.8l-3.9-1.2c-1.2-0.4-2.5-0.8-3.6-1.2-0.4-0.2-0.9-0.3-1.3-0.4-0.8-0.3-1.6-0.5-2.4-0.8-0.8-0.3-1.7-0.6-2.5-0.9-1.1-0.4-2.1-0.7-3.2-1.1-2.6-1-5.1-1.9-7.5-2.8-0.8-0.3-1.5-0.6-2.3-0.9-0.1-0.1-0.2-0.1-0.3-0.1-0.6-0.3-1.2-0.5-1.8-0.8-0.3-0.1-0.6-0.3-0.9-0.4-0.3-0.1-0.6-0.2-0.9-0.4-0.3-0.1-0.6-0.2-0.9-0.4-1.4-0.6-2.8-1.2-4.1-1.8-0.5-0.2-1-0.5-1.5-0.7-0.5-0.2-1-0.5-1.5-0.7-3.9-1.9-7.2-3.7-10.1-5.3-2.1-1.2-3.9-2.4-5.5-3.5-0.1-0.1-0.2-0.1-0.2-0.2-1.8-1.3-3.3-2.4-4.5-3.4-0.2-0.2-0.4-0.3-0.5-0.4-0.3-0.2-0.5-0.4-0.7-0.7l-0.6-0.6c-0.3-0.3-0.5-0.5-0.8-0.7-0.2-0.2-0.5-0.5-0.6-0.7-0.3-0.3-0.5-0.6-0.8-0.9-0.6-0.7-0.9-1.1-1-1.4V258.9z m11-77.8c12.8-8.5 39.5-21.3 94.1-33.4C328.5 132.4 418.2 124 512 124s183.5 8.4 252.6 23.7c54.5 12.1 81.3 24.9 94.1 33.4 5.2 3.4 8.1 6.2 9.6 7.9-5.3 6-27.1 24.3-103.7 41.3C695.5 245.6 605.8 254 512 254s-183.5-8.4-252.6-23.7C182.8 213.4 161 195 155.7 189c1.6-1.8 4.4-4.5 9.6-7.9z m-11 211.3c0.1 0.4 0.2 0.9 0.2 1.6h-0.2v-1.6zM869.5 834c-2.4 3.5-20 23.9-104.8 42.6-69.1 15.2-158.8 23.6-252.6 23.6s-183.5-8.4-252.6-23.6C174.6 858 157 837.5 154.5 834V684.5c2 1 4.1 1.9 6.2 2.9 0.6 0.3 1.1 0.5 1.7 0.7l2.1 0.9c0.8 0.3 1.5 0.6 2.3 1 0.7 0.3 1.3 0.6 2 0.8 0.7 0.3 1.4 0.6 2.1 0.8 3.6 1.4 7.3 2.9 11.2 4.3 0.7 0.3 1.5 0.5 2.2 0.8 3.5 1.2 7.1 2.5 10.9 3.7 1 0.3 2.1 0.7 3.1 1 1 0.3 2.1 0.7 3.1 1 4.4 1.3 8.9 2.6 13.5 3.9 1.8 0.5 3.7 1 5.5 1.5 0.9 0.3 1.9 0.5 2.8 0.7 0.9 0.2 1.9 0.5 2.8 0.7 1.9 0.5 3.8 1 5.7 1.4 75.2 18.4 174.8 28.5 280.3 28.5s205.1-10.1 280.3-28.5c1.9-0.5 3.9-1 5.7-1.4 0.9-0.2 1.9-0.5 2.8-0.7 0.9-0.2 1.9-0.5 2.8-0.7 1.9-0.5 3.7-1 5.5-1.5 4.6-1.3 9.1-2.6 13.5-3.9 1.1-0.3 2.1-0.6 3.1-1 1-0.3 2.1-0.7 3.1-1 3.7-1.2 7.4-2.4 10.9-3.7 0.7-0.3 1.5-0.5 2.2-0.8 3.9-1.4 7.6-2.8 11.2-4.3 0.7-0.3 1.4-0.6 2.1-0.8 0.7-0.3 1.3-0.5 2-0.8 0.8-0.3 1.5-0.6 2.3-1l2.1-0.9c0.6-0.2 1.1-0.5 1.7-0.7 2.1-0.9 4.2-1.9 6.2-2.9V834z" p-id="2838"></path></svg>
          <span style="margin-left: 8px">RAG对话</span>
        </div>
        <div :class="{tab: true, activeTab: activeTab === 2}" style="margin-top: 2px" @click="changeTab(2)">
          <svg t="1743057471863" class="icon" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3047" width="16" height="16">
            <path :fill="activeTab === 2 ? 'blue' : 'grey'" d="M32.2592 294.4l409.6 211.2c19.2 12.8 44.8 12.8 70.4 12.8s51.2-6.4 70.4-12.8l409.6-211.2c38.4-19.2 38.4-51.2 0-70.4l-409.6-211.2c-19.2-6.4-44.8-12.8-70.4-12.8s-51.2 6.4-70.4 12.8l-409.6 211.2c-38.4 19.2-38.4 51.2 0 70.4z m441.6-204.8c12.8-6.4 25.6-6.4 38.4-6.4s32 6.4 38.4 6.4l339.2 172.8-339.2 172.8c-6.4 6.4-19.2 6.4-38.4 6.4-12.8 0-32-6.4-38.4-6.4l-339.2-172.8 339.2-172.8z" p-id="3048"></path>
            <path :fill="activeTab === 2 ? 'blue' : 'grey'" d="M19.4592 550.4l403.2 204.8c25.6 12.8 57.6 19.2 89.6 19.2s64-6.4 89.6-19.2l403.2-204.8c12.8-6.4 25.6-32 12.8-51.2s-32-32-51.2-19.2l-403.2 204.8c-32 12.8-83.2 12.8-108.8 0l-403.2-204.8c-12.8-12.8-25.6-12.8-38.4 0-6.4 12.8-12.8 25.6-12.8 38.4 0 19.2 6.4 25.6 19.2 32z" p-id="3049"></path>
            <path :fill="activeTab === 2 ? 'blue' : 'grey'" d="M1024.2592 748.8c-12.8-19.2-32-32-51.2-19.2l-403.2 204.8c-32 12.8-83.2 12.8-108.8 0l-403.2-204.8c-12.8-6.4-38.4 6.4-51.2 19.2-12.8 12.8-6.4 38.4 12.8 51.2l403.2 204.8c25.6 12.8 57.6 19.2 89.6 19.2s64-6.4 96-19.2l403.2-204.8c12.8-6.4 25.6-32 12.8-51.2z" p-id="3050"></path></svg>
          <span style="margin-left: 8px">知识库管理</span>
        </div>
      </div>
      <div class="setting">
        <el-tabs v-model="activeSetting" @tab-click="tabSelect">
          <el-tab-pane label="工具设置" name="util">
            <div style="display: flex; align-items: center">
              <el-checkbox v-model="enableAgent">启用Agent</el-checkbox>
              <el-tooltip style="margin-left: 10px" content="Top center" placement="right" effect="light">
                <svg t="1742971974478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2969" width="16" height="16"><path d="M464 784.352c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z" p-id="2970" fill="#515151"></path><path d="M512 960C264.96 960 64 759.04 64 512S264.96 64 512 64s448 200.96 448 448-200.96 448-448 448z m0-831.713c-211.584 0-383.713 172.129-383.713 383.713 0 211.552 172.129 383.713 383.713 383.713 211.552 0 383.713-172.16 383.713-383.713 0-211.584-172.161-383.713-383.713-383.713z" p-id="2971" fill="#515151"></path><path d="M512 673.695c-17.665 0-32-14.336-32-31.999v-54.112c0-52.353 39.999-92.352 75.327-127.648 25.887-25.92 52.672-52.672 52.672-74.016 0-53.344-43.072-96.736-95.999-96.736-53.823 0-96 41.536-96 94.56 0 17.664-14.335 31.999-32 31.999s-32-14.336-32-32c0-87.423 71.774-158.559 160-158.559S672 297.28 672 385.92c0 47.904-36.32 84.191-71.424 119.296-27.84 27.776-56.575 56.512-56.575 82.335v54.112c0 17.665-14.336 32.032-32.001 32.032z" p-id="2972" fill="#515151"></path></svg>
              </el-tooltip>
      <div class="session-list">
        <div class="session" v-for="(session, index) in sessionList" :key="'session' + index">
          <div style="width: 100%" @mouseenter="activeSession = index" @mouseleave="activeSession = null">
            <div>{{session.name}}</div>
            <div v-show="activeSession != null && activeSession == index" class="session-more">
              <el-dropdown @command="(command) => handleCommand(session, command)" trigger="click">
              <span class="el-dropdown-link">
                <svg t="1743058876802" class="icon more" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2795" width="12" height="12">
                  <path fill="gray" d="M480 320C533.184 320 576 277.184 576 224S533.184 128 480 128 384 170.816 384 224 426.816 320 480 320zM480 448C426.816 448 384 490.816 384 544S426.816 640 480 640 576 597.184 576 544 533.184 448 480 448zM480 768c-53.184 0-96 42.816-96 96S426.816 960 480 960 576 917.184 576 864c0-52.672-42.816-96-96-96z" p-id="2796"></path></svg>
              </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="config">会话设置</el-dropdown-item>
                  <el-dropdown-item command="rename">重命名</el-dropdown-item>
                  <el-dropdown-item command="del">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </div>
            <div style="margin-top: 15px">
              <div class="normal-text">选择工具</div>
              <div style="margin-top: 5px">
                <el-select v-model="selectUtil" size="mini" placeholder="未选择" style="width: 100%">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div style="margin-top: 15px">
              <div class="normal-text" style="display: flex;align-items: center">
                <div>上传附件</div>
                <el-tooltip style="margin-left: 10px" content="单个文件不超过200M" placement="right" effect="light">
                  <svg t="1742971974478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2969" width="16" height="16"><path d="M464 784.352c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z" p-id="2970" fill="#515151"></path><path d="M512 960C264.96 960 64 759.04 64 512S264.96 64 512 64s448 200.96 448 448-200.96 448-448 448z m0-831.713c-211.584 0-383.713 172.129-383.713 383.713 0 211.552 172.129 383.713 383.713 383.713 211.552 0 383.713-172.16 383.713-383.713 0-211.584-172.161-383.713-383.713-383.713z" p-id="2971" fill="#515151"></path><path d="M512 673.695c-17.665 0-32-14.336-32-31.999v-54.112c0-52.353 39.999-92.352 75.327-127.648 25.887-25.92 52.672-52.672 52.672-74.016 0-53.344-43.072-96.736-95.999-96.736-53.823 0-96 41.536-96 94.56 0 17.664-14.335 31.999-32 31.999s-32-14.336-32-32c0-87.423 71.774-158.559 160-158.559S672 297.28 672 385.92c0 47.904-36.32 84.191-71.424 119.296-27.84 27.776-56.575 56.512-56.575 82.335v54.112c0 17.665-14.336 32.032-32.001 32.032z" p-id="2972" fill="#515151"></path></svg>
                </el-tooltip>
              </div>
              <div style="margin-top: 5px">
                <el-upload
                    class="upload"
                    drag
                    :on-change="handleChange"
                    :before-upload="handleUpload"
                    :file-list="fileList"
                    multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    <div>将文件拖到此处，或<em>点击上传</em></div>
                  </div>
                </el-upload>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="会话设置" name="session"></el-tab-pane>
        </el-tabs>
          </div>
        </div>
      </div>
<!--      <div class="setting">-->
<!--        <el-tabs v-model="activeSetting" @tab-click="tabSelect">-->
<!--          <el-tab-pane label="工具设置" name="util">-->
<!--            <div style="display: flex; align-items: center">-->
<!--              <el-checkbox v-model="enableAgent">启用Agent</el-checkbox>-->
<!--              <el-tooltip style="margin-left: 10px" content="Top center" placement="right" effect="light">-->
<!--                <svg t="1742971974478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2969" width="16" height="16"><path d="M464 784.352c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z" p-id="2970" fill="#515151"></path><path d="M512 960C264.96 960 64 759.04 64 512S264.96 64 512 64s448 200.96 448 448-200.96 448-448 448z m0-831.713c-211.584 0-383.713 172.129-383.713 383.713 0 211.552 172.129 383.713 383.713 383.713 211.552 0 383.713-172.16 383.713-383.713 0-211.584-172.161-383.713-383.713-383.713z" p-id="2971" fill="#515151"></path><path d="M512 673.695c-17.665 0-32-14.336-32-31.999v-54.112c0-52.353 39.999-92.352 75.327-127.648 25.887-25.92 52.672-52.672 52.672-74.016 0-53.344-43.072-96.736-95.999-96.736-53.823 0-96 41.536-96 94.56 0 17.664-14.335 31.999-32 31.999s-32-14.336-32-32c0-87.423 71.774-158.559 160-158.559S672 297.28 672 385.92c0 47.904-36.32 84.191-71.424 119.296-27.84 27.776-56.575 56.512-56.575 82.335v54.112c0 17.665-14.336 32.032-32.001 32.032z" p-id="2972" fill="#515151"></path></svg>-->
<!--              </el-tooltip>-->
<!--            </div>-->
<!--            <div style="margin-top: 15px">-->
<!--              <div class="normal-text">选择工具</div>-->
<!--              <div style="margin-top: 5px">-->
<!--                <el-select v-model="selectUtil" size="mini" placeholder="未选择" style="width: 100%">-->
<!--                  <el-option-->
<!--                      v-for="item in options"-->
<!--                      :key="item.value"-->
<!--                      :label="item.label"-->
<!--                      :value="item.value">-->
<!--                  </el-option>-->
<!--                </el-select>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div style="margin-top: 15px">-->
<!--              <div class="normal-text" style="display: flex;align-items: center">-->
<!--                <div>上传附件</div>-->
<!--                <el-tooltip style="margin-left: 10px" content="单个文件不超过200M" placement="right" effect="light">-->
<!--                  <svg t="1742971974478" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2969" width="16" height="16"><path d="M464 784.352c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z" p-id="2970" fill="#515151"></path><path d="M512 960C264.96 960 64 759.04 64 512S264.96 64 512 64s448 200.96 448 448-200.96 448-448 448z m0-831.713c-211.584 0-383.713 172.129-383.713 383.713 0 211.552 172.129 383.713 383.713 383.713 211.552 0 383.713-172.16 383.713-383.713 0-211.584-172.161-383.713-383.713-383.713z" p-id="2971" fill="#515151"></path><path d="M512 673.695c-17.665 0-32-14.336-32-31.999v-54.112c0-52.353 39.999-92.352 75.327-127.648 25.887-25.92 52.672-52.672 52.672-74.016 0-53.344-43.072-96.736-95.999-96.736-53.823 0-96 41.536-96 94.56 0 17.664-14.335 31.999-32 31.999s-32-14.336-32-32c0-87.423 71.774-158.559 160-158.559S672 297.28 672 385.92c0 47.904-36.32 84.191-71.424 119.296-27.84 27.776-56.575 56.512-56.575 82.335v54.112c0 17.665-14.336 32.032-32.001 32.032z" p-id="2972" fill="#515151"></path></svg>-->
<!--                </el-tooltip>-->
<!--              </div>-->
<!--              <div style="margin-top: 5px">-->
<!--                <el-upload-->
<!--                    class="upload"-->
<!--                    drag-->
<!--                    :on-change="handleChange"-->
<!--                    :before-upload="handleUpload"-->
<!--                    :file-list="fileList"-->
<!--                    multiple>-->
<!--                  <i class="el-icon-upload"></i>-->
<!--                  <div class="el-upload__text">-->
<!--                    <div>将文件拖到此处，或<em>点击上传</em></div>-->
<!--                  </div>-->
<!--                </el-upload>-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="会话设置" name="session"></el-tab-pane>-->
<!--        </el-tabs>-->
<!--      </div>-->
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
    <session-config :session-name="sessionName" @saveConfig="saveConfig" ref="sessionConfig" />

    <el-dialog
        :title="'重命名对话'"
        :visible.sync="renameShow"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        width="600px"
    >
        <el-input v-model="rename"/>
      <span slot="footer" class="dialog-footer">
          <el-button @click="renameSubmit">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import SessionConfig from "@/components/SessionConfig";

export default {
  name: "IndexView",
  components: {
    SessionConfig
  },
  data() {
    return {
      renameShow: false,
      rename: '',
      sessionName: '',
      config: {
        chatType: 'kb',
        kb: 'kb1',
        hisChatNum: 3,
        matchKbNum: 3,
        matchKbScore: 1,
        returnMatchResult: false
      },
      sessionList: [
        {
          name: '会话1'
        },
        {
          name: '会话2'
        },
        {
          name: '会话3'
        },
      ],
      fileList: [],
      activeTab: 0,
      activeSession: null,
      activeSetting: 'util',
      enableAgent: false,
      selectUtil: null,
@@ -102,6 +174,47 @@
    this.changeRoute(this.activeTab)
  },
  methods: {
    renameSubmit() {
      // TODO 保存到对话中
      this.renameShow = false
      this.$message({
        type: 'success',
        message: '对话名称已修改'
      });
    },
    saveConfig(config) {
      // TODO 保存到对话中
      console.log(config, "父组件获取到配置了")
    },
    handleCommand(session, command) {
      console.log(session, command)
      if (command === 'config') {
        this.sessionName = session.name
        this.$refs.sessionConfig.setConfig(this.config)
        this.$refs.sessionConfig.setShow(true)
      } else if (command === 'rename') {
        this.rename = session.name
        this.renameShow = true
      } else if (command === 'del') {
        this.$alert(`确认要删除对话【${session.name}】吗？`, '删除提醒', {
          confirmButtonText: '确定',
          callback: action => {
            if (action == 'confirm') {
              // TODO 删除
              this.$message({
                type: 'success',
                message: '成功删除对话'
              });
            } else {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            }
          }
        });
      }
    },
    handleUpload(file) {
      if (this.fileList.indexOf(file) === -1) {
        this.fileList.push(file)
@@ -122,9 +235,9 @@
    },
    changeRoute(index) {
      console.log(this.$router.currentRoute.path, "路由")
      if (index === 0 && this.$router.currentRoute.path !== "/chat") {
      if ((index === 0 || index === 1) && this.$router.currentRoute.path !== "/chat") {
        this.$router.push("/chat")
      } else if (index === 1 && this.$router.currentRoute.path !== "/knowledge") {
      } else if (index === 2 && this.$router.currentRoute.path !== "/knowledge") {
        this.$router.push("/knowledge")
      }
    }
@@ -180,6 +293,41 @@
  background-color: #bed7f5;
  color: blue;
}
.session-list {
  margin-top: 20px;
  width: 100%;
}
.session {
  width: 100%;
  display: flex;
  height: 30px;
  line-height: 30px;
  align-items: center;
  border-radius: 8px;
  padding: 10px 10px;
  box-sizing: border-box;
  position: relative;
}
.session:hover {
  background-color: #bed7f5;
}
.session-more {
  position: absolute;
  right: 8px;
  top: 2px;
}
.more {
  width: 20px;
  height: 25px;
  display: flex;
  align-items: center;
}
.more:hover {
  border-radius: 50%;
  cursor: pointer;
  background-color: white;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.setting {
  margin-top: 20px;
}