智能体模块修改，首页修改

jialh

2024-12-27 9a02d1b7e2d4126a5c69b4aac7de57d712082ad7

智能体模块修改，首页修改

 src/view/IntelligentAgent/allAgent.vue

@@ -48,7 +48,7 @@
                                    item.Name.substring(0, 15) + '...' : item.Name }}</h2>
                            </Poptip>
                        </div>
                        <Poptip :content="item.Description" placement="top" trigger="hover" word-wrap width="300">
                        <Poptip :content="item.Description" placement="top" word-wrap width="300">
                            <div>{{ item.Description.length > 25 ?
                                item.Description.substring(0, 25) + '...' : item.Description }}</div>
                        </Poptip>

 src/view/IntelligentAgent/chat.vue

@@ -33,7 +33,7 @@
        </div>
      </div>
      <div v-if="this.query.Description.includes('\n') || query.Description.includes('<br')">
        <Poptip :content="query.Description" placement="top" trigger="hover" word-wrap width="700">
        <Poptip :content="query.Description" placement="top" word-wrap width="700">
          <div class="description" v-html="truncatedDescription"></div>
        </Poptip>
      </div>
@@ -190,6 +190,41 @@
                id: item.Id
              })
            } else {

              if (item.Content.includes(".png") ||
                item.Content.includes(".jpg") ||
                item.Content.includes(".bmp") ||
                item.Content.includes(".jpeg") ||
                item.Content.includes(".gif")) {
                // 使用正则表达式提取图片 URL，支持 .png, .jpg, .bmp, .jpeg, .gif
                const regex = /!\[.*?\]\((.*?\.(?:png|jpg|bmp|jpeg|gif).*?)\)/;
                const match = item.Content.match(regex);

                if (match && match[1]) {
                  const imageUrl = match[1]; // 提取到的图片 URL
                  const baseUrl = "http://122.51.217.202"; // 基础 URL
                  const fullImageUrl = `${baseUrl}${imageUrl}`; // 拼接完整 URL

                  // 限制图片大小（例如宽度为 300px，高度自适应）
                  const imgStyle = "max-width: 300px; height: auto;";
                  // 判断 .png 或 .jpg 前面是否有汉字
                  const hasChineseBeforeImage = /[\u4e00-\u9fa5]/.test(item.Content.split(imageUrl)[0]);

                  // 生成 <img> 标签，并根据是否有汉字决定是否添加换行符
                  const imgTag = hasChineseBeforeImage
                    ? `<br><img src="${fullImageUrl}" style="${imgStyle}" alt="图片"><br>`
                    : `<img src="${fullImageUrl}" style="${imgStyle}" alt="图片">`;

                  // 替换原数据中的图片部分为图片标签
                  item.Content = item.Content.replace(regex, `${imgTag}`);
                  console.log(imgTag); // 输出结果
                } else {
                  console.log("未找到有效的图片 URL");
                }
              } else {
                console.log("数据中不包含 .png 字段");
              }

              this.historyList.unshift({
                Name: '系统',
                Message: this.formatMessage(item.Content),
@@ -240,9 +275,13 @@
          this.total = res.data.Data.Count;
          this.loadingSub = false;
          // 判断是否包含 .png 字段
          if (res.data.Data.Data.includes(".png")) {
            // 使用正则表达式提取图片 URL
            const regex = /!\[.*?\]\((.*?\.png.*?)\)/;
          if (res.data.Data.Data.includes(".png") ||
            res.data.Data.Data.includes(".jpg") ||
            res.data.Data.Data.includes(".bmp") ||
            res.data.Data.Data.includes(".jpeg") ||
            res.data.Data.Data.includes(".gif")) {
            // 使用正则表达式提取图片 URL，支持 .png, .jpg, .bmp, .jpeg, .gif
            const regex = /!\[.*?\]\((.*?\.(?:png|jpg|bmp|jpeg|gif).*?)\)/;
            const match = res.data.Data.Data.match(regex);

            if (match && match[1]) {
@@ -250,9 +289,18 @@
              const baseUrl = "http://122.51.217.202"; // 基础 URL
              const fullImageUrl = `${baseUrl}${imageUrl}`; // 拼接完整 URL

              // 生成 <img> 标签
              const imgTag = `<img src="${fullImageUrl}" alt="报告图片">`;
              // 替换原数据中的图片部分为汉字 + 图片标签
              // 限制图片大小（例如宽度为 300px，高度自适应）
              const imgStyle = "max-width: 300px; height: auto;";

              // 判断 .png 或 .jpg 前面是否有汉字
              const hasChineseBeforeImage = /[\u4e00-\u9fa5]/.test(res.data.Data.Data.split(imageUrl)[0]);

              // 生成 <img> 标签，并根据是否有汉字决定是否添加换行符
              const imgTag = hasChineseBeforeImage
                ? `<br><img src="${fullImageUrl}" style="${imgStyle}" alt="图片"><br>`
                : `<img src="${fullImageUrl}" style="${imgStyle}" alt="图片">`;

              // 替换原数据中的图片部分为图片标签
              res.data.Data.Data = res.data.Data.Data.replace(regex, `${imgTag}`);
              console.log(imgTag); // 输出结果
            } else {
@@ -375,17 +423,17 @@
    truncatedDescription() {
      let description = this.query.Description;

      // 处理换行符
      if (description.includes('\n')) {
        description = description.replace(/\n/g, '<br>');
      }
      // // 处理换行符
      // if (description.includes('\n')) {
      //   description = description.replace(/\n/g, '<br>');
      // }

      // 截断描述
      if (description.length > 150) {
        description = description.substring(0, 150) + '...';
      }
      // // 截断描述
      // if (description.length > 150) {
      //   description = description.substring(0, 150) + '...';
      // }

      console.log(description);
      // console.log(description);

      return description;
    }

 src/view/IntelligentAgent/myAgent.vue

@@ -44,9 +44,9 @@
                                    item.Name.substring(0, 15) + '...' : item.Name }}</h2>
                            </Poptip>
                        </div>
                        <Poptip :content="item.Description" placement="top" trigger="hover" word-wrap width="300">
                            <div>{{ item.Description.length > 15 ?
                                item.Description.substring(0, 15) + '...' : item.Description }}</div>
                        <Poptip :content="item.Description" placement="top" word-wrap width="300">
                            <div>{{ item.Description.length > 25 ?
                                item.Description.substring(0, 25) + '...' : item.Description }}</div>
                        </Poptip>
                        <div>
                            <Tooltip content="删除" class="tableActionMargin" theme="light">
@@ -76,17 +76,24 @@
                style="float: right;position: relative; top: -50px;" />
        </div>
        <Modal v-model="addAI" draggable footer-hide :mask-closable="false" class-name="vertical-center-modal"
            width="600">
            <p slot="header">

            width="600" scrollable :styles="{ height: '80vh', overflowY: 'auto', overflowX: 'hidden' }">
            <!-- <p slot="header">
                <Icon type="md-add" style="margin-right: 10px;" />
                <span>创建AI智能体</span>
            </p>
            </p> -->
            <!-- 固定头部 -->
            <div style="position: sticky; top: 0; background: white; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid #e8eaec;">
                <p slot="header">
                    <Icon type="md-add" style="margin-right: 10px;" />
                    <span>创建AI智能体</span>
                </p>
                <Icon type="md-close" @click="addAI = false" style="cursor: pointer;"  size="20"/>
            </div>

            <div style="margin: 20px auto;text-align: center;">
                <label for="file">
                    <div class="imgShow">
                        <img :src="defaultImg" alt="" />
                        <img :src="defaultImg" alt="" title="点击可上传图片替换头像" />
                    </div>
                </label>
                <input type="file" id="file" accept="image/*" @change="getPicture($event)" style="display: none" />
@@ -94,47 +101,56 @@
            </div>

            <div style="margin-top: 10px;font-weight: 600;">名称(必填)</div>
            <Input v-model="formItem.Name" placeholder="请输入名称" />
            <Input style="width: 99%;" v-model="formItem.Name" placeholder="请输入名称" />
            <div style="margin-top: 10px;font-weight: 600;">智能体类型(必填)</div>
            <Select v-model="formItem.AgentType" filterable default-label="请选择智能体类型">
            <Select style="width: 99%;" v-model="formItem.AgentType" filterable default-label="请选择智能体类型">
                <Option v-for="(option, index) in typeList" :value="option.value" :key="index">{{ option.label }}
                </Option>
            </Select>
            <div style="margin-top: 10px;font-weight: 600;">描述(必填)</div>
            <Input v-model="formItem.Description" type="textarea" ref="textarea" :rows="4" maxlength="100"
                show-word-limit placeholder="请输入智能体描述" />
            <Input style="width: 99%;" v-model="formItem.Description" type="textarea" ref="textarea" :rows="4"
                placeholder="请输入智能体描述" />
            <div style="margin-top: 10px;font-weight: 600;">提示词(必填)</div>
            <Input v-model="formItem.Prompt" type="textarea" ref="textarea" :rows="4"
            <Input style="width: 99%;" v-model="formItem.Prompt" type="textarea" ref="textarea" :rows="4"
                placeholder="示例：你是一位经验丰富的英语老师，拥有激发学生学习热情的教学方法。你善于运用幽默和实际应用案例，使对话充满趣味。" />
            <div style="margin-top: 10px;font-weight: 600;">模型API(非必填)</div>
            <Input v-model="formItem.ModelApi" placeholder="请输入模型API(非必填)" />
            <Input style="width: 99%;" v-model="formItem.ModelApi" placeholder="请输入模型API(非必填)" />
            <div style="margin-top: 10px;font-weight: 600;">模型KEY(非必填)</div>
            <Input v-model="formItem.ModelKey" placeholder="请输入模型KEY(非必填)" />
            <Input style="width: 99%;" v-model="formItem.ModelKey" placeholder="请输入模型KEY(非必填)" />
            <div style="margin-top: 10px;font-weight: 600;">系统路由(非必填)</div>
            <Input v-model="formItem.SystemRouting" placeholder="系统路由(非必填)" />
            <Input style="width: 99%;" v-model="formItem.SystemRouting" placeholder="系统路由(非必填)" />
            <div style="margin-top: 10px;font-weight: 600;">权限设置</div>
            <Select v-model="formItem.Permission" filterable default-label="公开 · 所有人可对话">
            <Select style="width: 99%;" v-model="formItem.Permission" filterable default-label="公开 · 所有人可对话">
                <Option v-for="(option, index) in options" :value="option.value" :key="index">{{ option.label }}
                </Option>
            </Select>
            <div class="clearfix" style="width: 200px;margin:20px auto 0px;">
                <Button size="large" style="float: left;" type="primary" @click="handleSubmit">创建
                </Button>
                <Button size="large" style="float: right;" type="error" @click="addAI = false">取消
                </Button>
            <!-- 固定底部 -->
            <div class="modal-footer">
                <div class="clearfix" style="width: 200px;margin:20px auto 0px;">
                    <Button size="large" style="float: left;" type="primary" @click="handleSubmit">创建
                    </Button>
                    <Button size="large" style="float: right;" type="error" @click="addAI = false">取消
                    </Button>
                </div>
            </div>
        </Modal>
        <Modal v-model="editAI" draggable footer-hide :mask-closable="false" class-name="vertical-center-modal"
            width="600">
            <p slot="header">
            width="600" scrollable :styles="{ height: '80vh', overflowY: 'auto', overflowX: 'hidden' }">
            <!-- <p slot="header">
                <Icon custom="custom custom-bianji" style="margin-right: 10px;" />
                <span>编辑AI智能体</span>
            </p>

            </p> -->
            <div style="position: sticky; top: 0; background: white; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid #e8eaec;">
                <p slot="header">
                    <Icon custom="custom custom-bianji" style="margin-right: 10px;" />
                    <span>编辑AI智能体</span>
                </p>
                <Icon type="md-close" @click="editAI = false" style="cursor: pointer;"  size="20"/>
            </div>
            <div style="margin: 20px auto;text-align: center;">
                <label for="file">
                    <div class="imgShow">
                        <img :src="defaultImg" alt="" />
                        <img :src="defaultImg" alt="" title="点击可上传图片替换头像" />
                    </div>
                </label>
                <input type="file" id="file" accept="image/*" @change="getPicture($event)" style="display: none" />
@@ -142,34 +158,37 @@
            </div>

            <div style="margin-top: 10px;font-weight: 600;">名称(必填)</div>
            <Input v-model="formItem.Name" placeholder="请输入名称" />
            <Input style="width: 99%;" v-model="formItem.Name" placeholder="请输入名称" />
            <div style="margin-top: 10px;font-weight: 600;">智能体类型(必填)</div>
            <Select v-model="formItem.AgentType" filterable default-label="请选择智能体类型">
            <Select style="width: 99%;" v-model="formItem.AgentType" filterable default-label="请选择智能体类型">
                <Option v-for="(option, index) in typeList" :value="option.value" :key="index">{{ option.label }}
                </Option>
            </Select>
            <div style="margin-top: 10px;font-weight: 600;">描述(必填)</div>
            <Input v-model="formItem.Description" type="textarea" ref="textarea" :rows="4" maxlength="100"
                show-word-limit placeholder="请输入智能体描述" />
            <Input style="width: 99%;" v-model="formItem.Description" type="textarea" ref="textarea" :rows="4"
                placeholder="请输入智能体描述" />
            <div style="margin-top: 10px;font-weight: 600;">提示词(必填)</div>
            <Input v-model="formItem.Prompt" type="textarea" ref="textarea" :rows="4"
            <Input style="width: 99%;" v-model="formItem.Prompt" type="textarea" ref="textarea" :rows="4"
                placeholder="示例：你是一位经验丰富的英语老师，拥有激发学生学习热情的教学方法。你善于运用幽默和实际应用案例，使对话充满趣味。" />
            <div style="margin-top: 10px;font-weight: 600;">模型API(非必填)</div>
            <Input v-model="formItem.ModelApi" placeholder="请输入模型API(非必填)" />
            <Input style="width: 99%;" v-model="formItem.ModelApi" placeholder="请输入模型API(非必填)" />
            <div style="margin-top: 10px;font-weight: 600;">模型KEY(非必填)</div>
            <Input v-model="formItem.ModelKey" placeholder="请输入模型KEY(非必填)" />
            <Input style="width: 99%;" v-model="formItem.ModelKey" placeholder="请输入模型KEY(非必填)" />
            <div style="margin-top: 10px;font-weight: 600;">系统路由(非必填)</div>
            <Input v-model="formItem.SystemRouting" placeholder="系统路由(非必填)" />
            <Input style="width: 99%;" v-model="formItem.SystemRouting" placeholder="系统路由(非必填)" />
            <div style="margin-top: 10px;font-weight: 600;">权限设置</div>
            <Select v-model="formItem.Permission" filterable default-label="公开 · 所有人可对话">
            <Select style="width: 99%;" v-model="formItem.Permission" filterable default-label="公开 · 所有人可对话">
                <Option v-for="(option, index) in options" :value="option.value" :key="index">{{ option.label }}
                </Option>
            </Select>
            <div class="clearfix" style="width: 200px;margin:20px auto 0px;">
                <Button size="large" style="float: left;" type="primary" @click="handleEdit">编辑
                </Button>
                <Button size="large" style="float: right;" type="error" @click="editAI = false">取消
                </Button>
            <!-- 固定底部 -->
            <div class="modal-footer">
                <div class="clearfix" style="width: 200px;margin:20px auto 0px;">
                    <Button size="large" style="float: left;" type="primary" @click="handleEdit">编辑
                    </Button>
                    <Button size="large" style="float: right;" type="error" @click="editAI = false">取消
                    </Button>
                </div>
            </div>
        </Modal>
    </div>
@@ -657,6 +676,8 @@
    margin: 10px 0;
    position: relative;
    left: calc(50% - 40px);
    cursor: pointer;
    /* 鼠标手型 */

    img {
        width: 80px;
@@ -668,7 +689,41 @@
/* textarea.ivu-input{
    min-height: 200px !important;
} */


.modal-footer {
    position: sticky;
    bottom: 0;
    background: white;
    z-index: 1;
    padding: 16px;
    border-top: 1px solid #e8eaec;
}

.ivu-input-type-textarea .ivu-input {
    min-height: 200px !important;
}

.vertical-center-modal .ivu-modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.vertical-center-modal .ivu-modal-content {
    max-height: 80vh !important;
    /* 限制模态框高度 */
    overflow-y: auto !important;
    /* 启用内部滚动条 */
}

.modal-content {
    padding: 16px !important;
    /* 可选：添加内边距 */
}

/* .modal-content {
    height: 80vh !important;
    overflow: auto !important;
} */
</style>

 src/view/login/login.vue

@@ -9,7 +9,7 @@
                style="width: 544px;margin: 123px auto 79px;position: relative;left:calc(50% - 272px);" alt="">
            <div style="width: 910px;position: static;margin-left:calc(50% - 455px);height: 40px;">
                <!-- @on-change="remoteMethod" -->
                <Input v-model="search" placeholder="输入关键词搜索" size="large" style="width: 910px;">
                <Input v-model="search" placeholder="输入关键词搜索" size="large" style="width: 910px;" @keyup.native.enter="clickJumpPage">
                <template #prepend>
                    <div>
                        <img src="../../assets/images/home/home_18.png" style="width: 24px;height: 24px;" alt="">