ylrz_his_scrm_companyUI/src/views/fastGpt/fastGptRole/fastGptRoleUpdate.vue

<template>
  <div class="app-container">


      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <el-form-item label="客服名称" prop="roleName">
                <el-input v-model="form.roleName" placeholder="请输入角色名" />
              </el-form-item>
              <el-form-item label="角色类型" prop="roleType">
                <el-select v-model="form.roleType" placeholder="请选择类型" clearable size="small" style="width: 150px" >
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="String(item.dictValue)"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="客服头像" prop="avatar">
                <ImageUpload v-model="form.avatar" type="image" :num="1" :width="150" :height="150" style="margin-top: 1%;" />
              </el-form-item>
              <el-form-item label="APPKey"  >
                <el-input type="textarea" v-model="form.modeConfigJson.APPKey" placeholder="请输入FastGPT的APPKey(特定key)" />
              </el-form-item>
              <el-form-item  label="提示词"  >
                <el-input type="textarea" :rows="3" v-model="form.reminderWords" placeholder="请输入FastGPT的提示词" />
              </el-form-item>
<!--              <el-form-item  label="标签人设"  >
                <div v-if="tagsFormList.length > 0" style="display: flex; align-items: center; flex-wrap: wrap; width: 100%;">
                  <div style="min-height: 40px; max-height: 200px; overflow-y: auto; width: 100%;">
                    <div style="display: flex; flex-wrap: wrap; width: 100%;">
                      <div v-for="(tagsForm, index) in tagsFormList" :key="tagsForm.id">
                        <el-tag type="success"
                                closable
                                :disable-transitions="false"
                                @click="handleEditRoleTag(tagsForm, index)"
                                @close="handleCloseRoleTag(tagsForm, index)"
                                style="margin: 3px;">
                          {{ getTagNames(tagsForm.tagIds) }}
                        </el-tag>
                      </div>
                    </div>
                  </div>
                </div>
                  <el-button
                    size="mini"
                    type="primary" plain
                    icon="el-icon-circle-plus-outline"
                    @click="handleAddTags(form.roleId,form.bindCorpId)"
                    v-hasPermi="['fastGptRole:fastGptRole:edit']"
                  >添加标签人设</el-button>
              </el-form-item> -->

<!--      		<el-form-item label="修改栏目" prop="contactInfo">
      		  <el-select v-model="contactInfo"  multiple filterable placeholder="请选择修改栏目" clearable size="small" style="width: 50%" >
      		    <el-option
      		      v-for="item in externalInfoOptions"
      		      :key="item.dictValue"
      		      :label="item.dictLabel"
      		      :value="item.dictValue"
      		    />
      		  </el-select>
      		</el-form-item> -->
		 </el-form>
      <div slot="footer" class="dialog-footer" style="padding-bottom: 40px;">
        <el-button type="primary" @click="submitForm" style="float: right;margin-right: 20px;">确 定</el-button>
        <el-button @click="cancel" style="float: right;margin-right: 20px;">取 消</el-button>
      </div>

<!--    修改-->
    <el-dialog :title="changeTagsOpen.title" :visible.sync="changeTagsOpen.open" width="800px" append-to-body>

      <el-form ref="tagsForm" :model="tagsForm"  :rules="tagsFormRules">
        <el-form-item label="选择标签" prop="tagIds">
          <div @click="handleChangeTags(changeTagsOpen.roleId)" style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 100%">
            <div style="min-height: 40px; max-height: 200px; overflow-y: auto;">
              <el-tag type="success"
                      closable
                      :disable-transitions="false"
                      v-for="list in tagListFormIndex"
                      :key="list.tagId"
                      @close="handleCloseTag(list)"
                      style="margin: 3px;"
              >{{list.name}}
              </el-tag>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="提示词" prop="reminderWords">
          <el-input type="textarea" :rows="6" v-model="tagsForm.reminderWords" placeholder="请输入AI客服该标签的提示词" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitTagsForm(changeTagsOpen.roleId)">确 定</el-button>
        <el-button @click="cancelTags">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="tagChange.title" :visible.sync="tagChange.open" width="800px" append-to-body>
      <div v-for="item in tagGroupList" :key="item.id" >
        <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
          <span class="name-background">{{ item.name }}</span>
        </div>
        <!-- 添加外层滚动容器 -->
        <div class="scroll-wrapper">
          <div class="tag-container">
            <a
              v-for="tagItem in item.tag"
              class="tag-box"
              @click="tagSelection(tagItem)"
              :class="{ 'tag-selected': tagItem.isSelected }"
            >
              {{ tagItem.name }}
            </a>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editTagSubmitForm(tagChange.roleId)">确 定</el-button>
        <el-button @click="editTagCancel(tagChange.roleId)">取消</el-button>
      </div>
    </el-dialog>

<!--    新增-->
    <el-dialog :title="changeTagsOpenAdd.title" :visible.sync="changeTagsOpenAdd.open" width="800px" append-to-body>

      <el-form ref="tagsFormAdd" :model="tagsFormAdd"  :rules="tagsFormAddRules">
        <el-form-item label="选择标签" prop="tagIds">
          <div @click="handleChangeTagsAdd(changeTagsOpenAdd.roleId)" style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 100%">
            <div style="min-height: 40px; max-height: 200px; overflow-y: auto;">
              <el-tag type="success"
                      closable
                      :disable-transitions="false"
                      v-for="list in tagListFormIndexAdd"
                      :key="list.tagId"
                      @close="handleCloseTag(list)"
                      style="margin: 3px;"
              >{{list.name}}
              </el-tag>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="提示词" prop="reminderWords">
          <el-input type="textarea" :rows="6" v-model="tagsFormAdd.reminderWords" placeholder="请输入AI客服该标签的提示词" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddTagsForm(changeTagsOpenAdd.roleId)">确 定</el-button>
        <el-button @click="cancelAddTags">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="tagChangeAdd.title" :visible.sync="tagChangeAdd.open" width="800px" append-to-body>
      <div v-for="item in tagGroupList" :key="item.id" >
        <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
          <span class="name-background">{{ item.name }}</span>
        </div>
        <!-- 添加外层滚动容器 -->
        <div class="scroll-wrapper">
          <div class="tag-container">
            <a
              v-for="tagItem in item.tag"
              class="tag-box"
              @click="tagSelection(tagItem)"
              :class="{ 'tag-selected': tagItem.isSelected }"
            >
              {{ tagItem.name }}
            </a>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addTagSubmitForm(tagChangeAdd.roleId)">确 定</el-button>
        <el-button @click="addTagCancel(tagChangeAdd.roleId)">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listFastGptRole, getFastGptRole, delFastGptRole, addFastGptRole, updateFastGptRole, exportFastGptRole,getAllRoleType } from "@/api/fastGpt/fastGptRole";
import {allListTagGroup} from "@/api/qw/tagGroup";
import {listTag} from "@/api/qw/tag";
import {
  addFastGptRoleTag,
  delFastGptRoleTag,
  getListByRoleId,
  updateFastGptRoleTag
} from "@/api/fastGpt/fastGptRoleTag";
import source from "echarts/src/data/Source";
import ImageUpload from "@/views/qw/sop/ImageUpload.vue";

export default {
  name: "fastGptRoleUpdate",
  components: {ImageUpload},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      //AI客服类型
      typeOptions: [],
      //AI模型
      modeOptions: [],
      changeTagsOpen: {
        title : "",
        open :false,
        roleId : null,
      },
      changeTagsOpenAdd:{
        title : "",
        open :false,
        roleId : null,
      },
      //标签弹窗选择
      tagChange:{
        open:false,
        title:"",
        roleId:null,
        id:null,
      },
      //新增
      tagChangeAdd:{
        open:false,
        title:"",
        roleId:null,
        id:null,
      },
      //所有的标签组-标签
      tagGroupList:[],

      //所有的标签
      tagList:[],
		contactInfo:[],
      //已经选择的标签
      tagListFormIndex:[],

      //新的标签
      tagListFormIndexAdd:[],
      // uploadUrl:process.env.VUE_APP_BASE_API+"/chat/upload/uploadFile",
      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
      // 选中数组
      ids: [],
	  externalInfoOptions : [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 应用表格数据
      fastGptRoleList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: null,
        companyId: null,
        roleType: null,
        mode: null,
        kfId: null,
        kfUrl: null,
        avatar: null,
        kfMediaId: null
      },
      // 表单参数
      form: {
      },
      //某一个标签组
      tagsForm:{},
      //新增
      tagsFormAdd:{},
      //当前role的所有标签组
      tagsFormList:[],
      // 表单校验
      rules: {
        roleName: [
          { required: true, message: "角色名称不能为空", trigger: "blur" }
        ],
        roleType: [
          { required: true, message: "角色类型不能为空", trigger: "change" }
        ],
      },
      tagsFormRules:{
        tagIds:[
          { required: true, message: "标签不能为空", trigger: "blur" }
        ],
        reminderWords:[
          { required: true, message: "提示词不能为空", trigger: "blur" }
        ]
      },

      tagsFormAddRules:{
        tagIds:[
          { required: true, message: "标签不能为空", trigger: "blur" }
        ],
        reminderWords:[
          { required: true, message: "提示词不能为空", trigger: "blur" }
        ]
      }

    };
  },
  watch: {
    tagListFormIndex: {
      handler(newList) {
        if (!Array.isArray(newList)) return;  // 仅在 newList 为数组时继续

        // 确保 tagsForm.tagIds 是数组并清空它
        this.tagsForm.tagIds = [];

        // 遍历 newList，添加 tagId
        newList.forEach(tags => {
          if (Array.isArray(tags)) {
            // 如果 tags 是数组，遍历并添加
            tags.forEach(item => {
              if (item && item.tagId !== undefined) {
                this.tagsForm.tagIds.push(item.tagId);
              }
            });
          } else if (tags && tags.tagId !== undefined) {
            // 如果 tags 是单个对象，直接添加
            this.tagsForm.tagIds.push(tags.tagId);
          }
        });
      },
      deep: true
    },

    tagListFormIndexAdd: {
      handler(newList) {

        if (!Array.isArray(newList)) return;  // 仅在 newList 为数组时继续

        // 确保 tagsForm.tagIds 是数组并清空它
        this.tagsFormAdd.tagIds = [];

        // 遍历 newList，添加 tagId
        newList.forEach(tags => {
          if (Array.isArray(tags)) {
            // 如果 tags 是数组，遍历并添加
            tags.forEach(item => {
              if (item && item.tagId !== undefined) {
                this.tagsFormAdd.tagIds.push(item.tagId);
              }
            });
          } else if (tags && tags.tagId !== undefined) {
            // 如果 tags 是单个对象，直接添加
            this.tagsFormAdd.tagIds.push(tags.tagId);
          }
        });
      },
      deep: true
    }
  },
  created() {

	 this.handleUpdate();
    //客服类型
    // this.getDicts("chat_role_type").then((response) => {
    //   this.typeOptions = response.data;
    // });
    //AI模型
    this.getDicts("chat_role_mode").then((response) => {
      this.modeOptions = response.data;
    });
    this.getDicts("sys_fastgpt_role_external_info").then((response) => {
    	  this.externalInfoOptions = response.data;
    });

	getAllRoleType().then(response => {
        this.typeOptions = response.data;
      });
  },
  methods: {
    /** 查询应用列表 */
    getList() {
      this.loading = true;
      listFastGptRole(this.queryParams).then(response => {
        this.fastGptRoleList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {

      this.reset();
	  window.location.replace('/fastGpt/fastGptRole')
    },
    cancelTags(){
      this.changeTagsOpen.open=false;
    },
    cancelAddTags(){
      this.changeTagsOpenAdd.open=false;
    },
    handleAvatarSuccess(res, file) {
      if(res.code==200){
        if(res.data.errcode!=0){
          this.msgError(res.data.errmsg);
        }
        else{
          //获取图片
          this.form.kfMediaId=res.data.media_id;
          this.form.avatar = res.ossUrl;
          this.$forceUpdate()
        }

      }
      else{
        this.msgError(res.msg);
      }
    },
    beforeAvatarUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!');
      }
      return   isLt1M;
    },
    // 表单重置
    reset() {
      this.form = {
        roleId: null,
        roleName: null,
        companyId: null,
        createTime: null,
        updateTime: null,
        roleType: null,
        modeConfigJson:{APPKey:null,Key:null},
        mode: 2,
        kfId: null,
        kfUrl: null,
        avatar: null,
        kfMediaId: null,
        reminderWords: null,
        isTags:null,
      };
      this.resetForm("form");
    },

    tagRest(){
      this.tagListFormIndex=[];
      this.tagsForm={
        tagIds:null,
        reminderWords:null,
      };
    },

    tagAddRest(){
      this.tagListFormIndexAdd=[];
      this.tagsFormAdd={
        tagIds:null,
        reminderWords:null,
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.roleId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },

    /** 修改按钮操作 */
    handleUpdate() {
		var id=this.$route.params.command
      this.reset();
      getFastGptRole(id).then(response => {
        this.form = response.role;
        this.form.roleType = JSON.stringify(response.role.roleType);
        if(this.form.modeConfigJson!=null&&this.form.modeConfigJson!=""){
          this.form.modeConfigJson=JSON.parse(this.form.modeConfigJson)
        }else{
			 this.form.modeConfigJson={APPKey:null}
		}
		if(this.form.contactInfo!=null){
			  this.contactInfo = (this.form.contactInfo).split(",");
			}
        //含标签吗
        getListByRoleId(id).then(res => {
          this.tagsFormList=res.rows;
        })


        allListTagGroup({corpId:this.form.corpId}).then(response => {
          this.tagGroupList = response.rows;
        });

        //所有的标签
        listTag({corpId:this.form.corpId}).then(response => {
          this.tagList = response.rows;
        });


        this.title = "修改应用";
      });

    },

    getTagNames(tagIds) {
      // 确保 tagIds 是数组，如果是字符串则分割
      const idsArray = Array.isArray(tagIds) ? tagIds : tagIds.split(",");
      return idsArray.map(tagId => {
        const tag = this.tagList.find(list => list.tagId === tagId);
        return tag ? tag.name : tagId; // 返回标签名称或原 tagId
      }).join(', '); // 使用逗号和空格连接标签名称
    },

    //标签回复人设弹窗
    handleAddTags(value,bindCorpId) {
      if (bindCorpId==null){
        this.$message({
          message: '请先给AI客服-绑定企业 再添加标签【企微管理->员工管理->企微员工】',
          type: 'warning'
        });
        return;
      }

      this.changeTagsOpenAdd.title="创建标签回复人设";
      this.changeTagsOpenAdd.open=true;
      this.changeTagsOpenAdd.roleId=value;
    },

    //选择标签弹窗
    handleChangeTags(roleId){

      this.tagChange.open=true;
      this.tagChange.title='选择标签';
      this.tagChange.roleId=roleId;

      // 获取 tagListFormIndex 中的所有 tagId，用于快速查找
      const selectedTagIds = new Set(this.tagListFormIndex.map(tagItem => tagItem.tagId));
      for (let i = 0; i < this.tagGroupList.length; i++) {
        for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
          this.tagGroupList[i].tag[x].isSelected = selectedTagIds.has(this.tagGroupList[i].tag[x].tagId);
        }
      }

    },
    handleChangeTagsAdd(roleId){
      this.tagChangeAdd.open=true;
      this.tagChangeAdd.title='选择标签';
      this.tagChangeAdd.roleId=roleId;
    },
    //标签的选择
    tagSelection(row){
      row.isSelected= !row.isSelected;
      this.$forceUpdate();
    },
    //删除一些已经选择了的标签
    handleCloseTag(list){

      // 假设 list 对象具有一个 id 属性
      const ls = this.tagListFormIndex.findIndex(t => t.tagId === list.tagId);
      if (ls !== -1) {
        this.tagListFormIndex.splice(ls, 1);
        this.tagListFormIndex = [...this.tagListFormIndex];
      }
    },

    //删除一下已经存在的
    handleCloseRoleTag(row){
      delFastGptRoleTag(row.id).then(res => {
        getListByRoleId(row.roleId).then(res => {
          this.tagsFormList=res.rows;
        })
      })
    },

    //点击单个
    handleEditRoleTag(value, index) {

      this.changeTagsOpen.open = true;
      this.changeTagsOpen.title = "编辑标签回复人设";
      this.changeTagsOpen.roleId = value.roleId;
      this.tagsForm = value;

      // 过滤 tagList，获取匹配的标签
      const tagIdsArray = Array.isArray(value.tagIds) ? value.tagIds : value.tagIds.split(",");
      this.tagListFormIndex = this.tagList.filter(tag => tagIdsArray.includes(tag.tagId));
    },
    //选择标签
    editTagSubmitForm(){

      for (let i = 0; i < this.tagGroupList.length; i++) {
        for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
          if (this.tagGroupList[i].tag[x].isSelected === true) {

            if (!this.tagListFormIndex) {
              this.tagListFormIndex = [];
            }

            // 检查当前 tag 是否已经存在于 tagListFormIndex[index] 中
            let tagExists = this.tagListFormIndex.some(
              tag => tag.id === this.tagGroupList[i].tag[x].id
            );

            // 如果 tag 不存在于 tagListFormIndex[index] 中，则新增
            if (!tagExists) {
              this.tagListFormIndex.push(this.tagGroupList[i].tag[x]);
            }
          }
        }
      }
      if (!this.tagListFormIndex || this.tagListFormIndex.length === 0) {
        return this.$message('请选择标签');
      }

      this.tagChange.open = false;
    },

    //新增的标签
    addTagSubmitForm(){
      for (let i = 0; i < this.tagGroupList.length; i++) {
        for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
          if (this.tagGroupList[i].tag[x].isSelected === true) {

            if (!this.tagListFormIndexAdd) {
              this.tagListFormIndexAdd = [];
            }

            // 检查当前 tag 是否已经存在于 tagListFormIndex[index] 中
            let tagExists = this.tagListFormIndexAdd.some(
              tag => tag.id === this.tagGroupList[i].tag[x].id
            );

            // 如果 tag 不存在于 tagListFormIndex[index] 中，则新增
            if (!tagExists) {
              this.tagListFormIndexAdd.push(this.tagGroupList[i].tag[x]);
            }
          }
        }
      }
      if (!this.tagListFormIndexAdd || this.tagListFormIndexAdd.length === 0) {
        return this.$message('请选择标签');
      }

      this.tagChangeAdd.open = false;
    },

    //取消选择标签
    editTagCancel(){
      this.tagChange.open = false;
      // this.tagRest();
    },
    addTagCancel(){
      this.tagChangeAdd.open = false;
      this.tagAddRest();
    },
    /** 提交按钮 */
    submitForm() {
	if(this.contactInfo!=null){
		   this.form.contactInfo= (this.contactInfo).toString()
		}
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.modeConfigJson=JSON.stringify(this.form.modeConfigJson)
          if (this.form.roleId != null) {
            updateFastGptRole(this.form).then(response => {
              this.msgSuccess("修改成功");
              window.location.replace('/fastGpt/fastGptRole')
            });
          }
        }
      });
    },
    submitTagsForm(roleId){
      this.$refs["tagsForm"].validate(valid => {
        if (valid) {

          this.tagsForm.roleId=roleId
          this.tagsForm.tagIds=this.tagsForm.tagIds.join(",")
          if (this.tagsForm.id!= null) {
            updateFastGptRoleTag(this.tagsForm).then(response => {
              this.msgSuccess("修改成功");
              this.changeTagsOpen = false;
              this.getList();
            });
          }else {
            addFastGptRoleTag(this.tagsForm).then(response => {
              this.msgSuccess("新增成功");
              this.changeTagsOpen = false;
              this.getList();
            });
            }
        }
      });
    },

    submitAddTagsForm(roleId){
      this.$refs["tagsFormAdd"].validate(valid => {
        if (valid) {
          this.tagsFormAdd.roleId=roleId
          this.tagsFormAdd.tagIds=this.tagsFormAdd.tagIds.join(",")
            addFastGptRoleTag(this.tagsFormAdd).then(response => {
              this.msgSuccess("新增成功");
              this.changeTagsOpenAdd = false;
              this.open=false;
              this.handleUpdate();
            });

        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const roleIds = row.roleId || this.ids;
      this.$confirm('是否确认删除应用编号为"' + roleIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delFastGptRole(roleIds);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有应用数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportFastGptRole(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {});
    }
  }
};
</script>
<style scoped>
/* CSS 样式 */
.tag-container {
  display: flex;
  flex-wrap: wrap; /* 超出宽度时自动换行 */
  gap: 8px; /* 设置标签之间的间距 */
}
.name-background {
  display: inline-block;
  background-color: #abece6; /* 背景颜色 */
  padding: 4px 8px; /* 调整内边距，让背景包裹文字 */
  border-radius: 4px; /* 可选：设置圆角 */
}
.tag-box {
  padding: 8px 12px;
  border: 1px solid #989797;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
}

.tag-selected {
  background-color: #00bc98;
  color: #fff;
  border-color: #00bc98;
}

.el-tag + .el-tag {
  margin-left: 10px;
}


.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.text-container {
  max-height: 5em; /* 设置最大高度为6行，根据字体大小调整 */
  overflow-y: auto; /* 内容超出时显示滚动条 */
  line-height: 1.5em; /* 行高设置，确保每行高度一致 */
}
/* 新增的滚动容器样式（不影响原有样式） */
.scroll-wrapper {
  max-height: 130px; /* 大约三行的高度 */
  overflow-y: auto;  /* 垂直滚动 */
  padding-right: 5px; /* 为滚动条留出空间 */
}

/* 美化滚动条（可选） */
.scroll-wrapper::-webkit-scrollbar {
  width: 6px;
}
.scroll-wrapper::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
</style>