智能体管理的页面开发和功能开发

liudong

2024-08-02 7cc74731d2426123d5e4caa313c53d67a51550bc

智能体管理的页面开发和功能开发

 src/router/routes/modules/dmx.ts

@@ -32,6 +32,16 @@
        roles: ['*'],
      },
    },
    {
      path: 'intelligentAgent',
      name: 'IntelligentAgent',
      component: () => import('@/views/dmx/IntelligentAgent/index.vue'),
      meta: {
        locale: '智能体管理',
        requiresAuth: true,
        roles: ['*'],
      },
    },
  ],

};

 src/views/dmx/IntelligentAgent/components/addAgent.vue

New file
@@ -0,0 +1,102 @@

<template>
<!--  <a-button type="primary" @click="handleClick" style="margin-left: 10px">-->
<!--    <template #icon>-->
<!--      <icon-plus />-->
<!--    </template>-->
<!--  </a-button>-->
  <a-modal v-model:visible="visible" title="创建智能体"
           @before-open="handleOpened"
           @cancel="handleCancel"
           :footer="false"
           title-align="start"
           width="600px"
  >
    <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" :style="{width:'90%',margin:'0 auto'}" layout="vertical" >
      <a-form-item field="name" label="智能体名称">
        <a-input v-model="form.name" placeholder="请输入名称"/>
      </a-form-item>

      <a-form-item>
        <div style="width: 100%;text-align: right">
          <a-button @click="visible = false">取消</a-button>
          <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { onMounted ,onBeforeMount, reactive, ref } from "vue";

const visible = ref(false);
const loading = ref(false);
const form = reactive({
  size: "medium",
  name: "",
  age: undefined,
  section: "0",
  province: "haidian",
  options: [],
  date: "",
  time: "",
  radio: "radio one",
  slider: 5,
  score: 5,
  switch: false,
  multiSelect: ["section one"],
  treeSelect: "",
  raptor: false,
  prompt: '请总结以下段落。 小心数字，不要编造。 段落如下：\n' +
    '      {cluster_content}\n' +
    '以上就是你需要总结的内容。',
});
const formRef = ref(null);


const rules = {
  name: [
    {
      required: true,
      message:'名称不允许为空',
    },
  ],
}


const handleSubmit = ({values, errors}) => {
  console.log('values:', values, '\nerrors:', errors)
}

const handleClick = () => {
  visible.value = true;
};
defineExpose({
  handleClick
})

const handleCancel = () => {
  visible.value = false;
}

const handleOpened =(el) => {
  Object.assign(form,{
    name: '',// 用户名
    nameJoin: '',// 昵称
    post: '',// 岗位
    txt: '',// 备注
  });
  formRef.value.resetFields();
}

const file = ref();

onBeforeMount(()=>{

})
onMounted(()=>{


})
</script>

 src/views/dmx/IntelligentAgent/components/card-wrap.vue

New file
@@ -0,0 +1,204 @@
<template>
  <div class="card-wrap">
    <a-card v-if="loading" :bordered="false" hoverable>
      <slot name="skeleton"></slot>
    </a-card>
    <a-card v-else :bordered="false" hoverable>
      <a-space align="start">
        <a-avatar
          v-if="icon"
          :size="24"
          style="margin-right: 8px; background-color: #626aea"
        >
          <icon-filter />
        </a-avatar>
        <a-card-meta>
          <template #title>
            <a-typography-text style="margin-right: 10px">
              {{ title }}
            </a-typography-text>
            <template v-if="showTag">
              <a-tag
                v-if="open && isExpires === false"
                size="small"
                color="green"
              >
                <template #icon>
                  <icon-check-circle-fill />
                </template>
                <span>{{ tagText }}</span>
              </a-tag>
              <a-tag v-else-if="isExpires" size="small" color="red">
                <template #icon>
                  <icon-check-circle-fill />
                </template>
                <span>{{ expiresTagText }}</span>
              </a-tag>
            </template>
          </template>
          <template #description>
            {{ description }}
            <slot></slot>
          </template>
        </a-card-meta>
      </a-space>
      <template #actions>
        <a-switch v-if="actionType === 'switch'" v-model="open" />
        <a-space v-else-if="actionType === 'button'">
          <template v-if="isExpires">
            <a-button type="outline" @click="renew">
              {{ expiresText }}
            </a-button>
          </template>
          <template v-else>
            <a-button v-if="open" @click="handleToggle">
              {{ closeTxt }}
            </a-button>
            <a-button v-else-if="!open" type="outline" @click="handleToggle">
              {{ openTxt }}
            </a-button>
          </template>
        </a-space>
        <div v-else>
          <a-space>
            <a-button @click="toggle(false)">
              {{ closeTxt }}
            </a-button>
            <a-button type="primary" @click="toggle(true)">
              {{ openTxt }}
            </a-button>
          </a-space>
        </div>
      </template>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useToggle } from '@vueuse/core';

  const props = defineProps({
    loading: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    description: {
      type: String,
      default: '',
    },
    actionType: {
      type: String,
      default: '',
    },
    defaultValue: {
      type: Boolean,
      default: false,
    },
    openTxt: {
      type: String,
      default: '',
    },
    closeTxt: {
      type: String,
      default: '',
    },
    expiresText: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    showTag: {
      type: Boolean,
      default: true,
    },
    tagText: {
      type: String,
      default: '',
    },
    expires: {
      type: Boolean,
      default: false,
    },
    expiresTagText: {
      type: String,
      default: '',
    },
  });
  const [open, toggle] = useToggle(props.defaultValue);
  const handleToggle = () => {
    toggle();
  };
  const isExpires = ref(props.expires);
  const renew = () => {
    isExpires.value = false;
  };
</script>

<style scoped lang="less">
  .card-wrap {
    height: 100%;
    transition: all 0.3s;
    border: 1px solid var(--color-neutral-3);
    border-radius: 4px;
    &:hover {
      transform: translateY(-4px);
      // box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
    }
    :deep(.arco-card) {
      height: 100%;
      border-radius: 4px;
      .arco-card-body {
        height: 100%;
        .arco-space {
          width: 100%;
          height: 100%;
          .arco-space-item {
            height: 100%;
            &:last-child {
              flex: 1;
            }
            .arco-card-meta {
              height: 100%;
              display: flex;
              flex-flow: column;
              .arco-card-meta-content {
                flex: 1;
                .arco-card-meta-description {
                  margin-top: 8px;
                  color: rgb(var(--gray-6));
                  line-height: 20px;
                  font-size: 12px;
                }
              }
              .arco-card-meta-footer {
                margin-top: 0;
              }
            }
          }
        }
      }
    }
    :deep(.arco-card-meta-title) {
      display: flex;
      align-items: center;

      // To prevent the shaking
      line-height: 28px;
    }
    :deep(.arco-skeleton-line) {
      &:last-child {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
      }
    }
  }
</style>

 src/views/dmx/IntelligentAgent/components/custom-settings.vue

New file
@@ -0,0 +1,244 @@
<template>
  <div class="list-wrap">
    <a-typography-title class="block-title" :heading="6">
      {{ $t('cardList.tab.title.content') }}
    </a-typography-title>
    <a-button class='add-button' type="primary" @click="addCard">添加</a-button>

    <a-row class="list-row" :gutter="24">
      <a-col
        :xs="12"
        :sm="12"
        :md="12"
        :lg="6"
        :xl="6"
        :xxl="6"
        class="list-col"
      >
        <div class="card-wrap empty-wrap">
          <a-card :bordered="false" hoverable >
            <a-result :status="null" title="Xinference模型是个很厉害的模型">
              <template #icon>
                <icon-plus style="font-size: 20px" />
              </template>
            </a-result>
          </a-card>
        </div>
      </a-col>
      <a-col
        v-for="item in renderData"
        :key="item.id"
        class="list-col"
        :xs="12"
        :sm="12"
        :md="12"
        :lg="6"
        :xl="6"
        :xxl="6"
      >
        <CardWrap
          :loading="loading"
          :title="item.title"
          :description="item.description"
          :default-value="item.enable"
          :action-type="item.actionType"
          :icon="item.icon"
          :open-txt="$t('cardList.content.inspection')"
          :close-txt="$t('cardList.content.delete')"
          :show-tag="false"
        >
          <a-descriptions
            style="margin-top: 16px"
            :data="item.data"
            layout="inline-horizontal"
            :column="2"
          />
          <template #skeleton>
            <a-skeleton :animation="true">
              <a-skeleton-line
                :widths="['50%', '50%', '100%', '40%']"
                :rows="4"
              />
              <a-skeleton-line :widths="['40%']" :rows="1" />
            </a-skeleton>
          </template>
        </CardWrap>
      </a-col>
    </a-row>

    <a-modal v-model:visible="visible" @Ok="handleOk" @cancel="handleCancel">
      <template #title> 添加LLM </template>
      <a-form
        ref="formRef"
        :size="form.size"
        :model="form"
        auto-label-width
        @submit="handleSubmit"
      >
        <a-form-item
          field="type"
          label="模型类型"
          :rules="[{ required: true, message: '不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-select
            v-model="form.type"
            placeholder="请选择模型类型"
            allow-clear
          >
            <a-option>chartGpt 4</a-option>
            <a-option>chartGpt o</a-option>
            <a-option>LLM</a-option>
          </a-select>
        </a-form-item>

        <a-form-item
          field="UID"
          label="模型UID"
          :rules="[
            { required: true, message: '不能为空' },
            { minLength: 1, message: '至少一个字符' },
          ]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model="form.UID" placeholder="请输入模型UID" />
        </a-form-item>

        <a-form-item
          field="Url"
          label="基础Url"
          :rules="[
            { required: true, message: '不能为空' },
            { minLength: 1, message: '至少一个字符' },
          ]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model="form.Url" placeholder="请输入基础Url" />
        </a-form-item>

        <a-form-item
          field="vision"
          label="是否支持 vision"
          :validate-trigger="['change', 'input']"
        >
          <a-switch v-model="form.vision" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { nextTick, reactive, ref } from 'vue';
  import { queryInspectionList, ServiceRecord } from '@/api/list';
  import useRequest from '@/hooks/request';
  import CardWrap from './card-wrap.vue';

  const defaultValue: ServiceRecord[] = new Array(3).fill({});
  const { loading, response: renderData } = useRequest<ServiceRecord[]>(
    queryInspectionList,
    defaultValue
  );
  const visible = ref(false);
  const addCard = () => {
    visible.value = true;
  };

  const formRef = ref(null);
  const form = reactive({
    size: 'medium',
    type: '',
    UID: '',
    Url: '',
    vision: false,
  });
  const handleOk = () => {
    formRef.value.validate().then((res) => {
      if (res) {
        return;
      }
      renderData.value = renderData.value.concat({
        id: renderData.value.length + 1,
        title: form.type,
        description: form.Url,
        icon: 'icon-setting',
        actionType: 'inspection',
        enable: true,
        data: [
          {
            label: '待质检数',
            value: '120',
          },
          {
            label: '积压时长',
            value: '60s',
          },
          {
            label: '待抽检数',
            value: '0',
          },
        ],
      });
      visible.value = false;
    });
    nextTick(() => {
      visible.value = true;
    });
    return false;
  };
  const handleCancel = () => {
    formRef.value.resetFields();
    visible.value = false;
  };
</script>

<style scoped lang="less">
  .card-wrap {
    height: 100%;
    transition: all 0.3s;
    border: 1px solid var(--color-neutral-3);
    &:hover {
      transform: translateY(-4px);
    }
    :deep(.arco-card-meta-description) {
      color: rgb(var(--gray-6));
      .arco-descriptions-item-label-inline {
        font-weight: normal;
        font-size: 12px;
        color: rgb(var(--gray-6));
      }
      .arco-descriptions-item-value-inline {
        color: rgb(var(--gray-8));
      }
    }
  }
  .empty-wrap {
    height: 200px;
    border-radius: 4px;
    :deep(.arco-card) {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      .arco-result-title {
        color: rgb(var(--gray-6));
      }
    }
  }

  .list-wrap{
    position: relative;

    ::v-deep .block-title{
      height: 36px;
      lin-height: 36px;
    }

    .add-button{
      position: absolute;
      right: 20px;
      top: 0;
    }
  }
</style>

 src/views/dmx/IntelligentAgent/components/editAgent.vue

New file
@@ -0,0 +1,188 @@

<template>
  <a-button  type="text" size="small" @click="handleClick">
    <template #icon>
      <icon-tool />
    </template>
  </a-button>

  <a-modal v-model:visible="visible" title="添加模式"
           @before-open="handleOpened"
           @cancel="handleCancel"
           :footer="false"
           title-align="start"
           width="600px"
  >
    <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" :style="{width:'90%',margin:'0 auto'}" layout="vertical" >
      <a-form-item field="name" label="模型类型">
        <a-select v-model="form.section" placeholder="请选择">
          <a-option value="section one">Section One</a-option>
          <a-option value="section two">Section Two</a-option>
          <a-option value="section three">Section Three</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="name" label="模型名称">
        <a-input v-model="form.name" placeholder="请输入名称"/>
      </a-form-item>
      <a-form-item field="section" label="模型图片">
        <a-space direction="vertical" :style="{ width: '100%' }">
          <a-upload
            action="/"
            :fileList="file ? [file] : []"
            :show-file-list="false"
            @change="onChange"
            @progress="onProgress"
          >
            <template #upload-button>
              <div
                :class="`arco-upload-list-item${
            file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
          }`"
              >
                <div
                  class="arco-upload-list-picture custom-upload-avatar"
                  v-if="file && file.url"
                >
                  <img :src="file.url" />
                  <div class="arco-upload-list-picture-mask">
                    <IconEdit />
                  </div>
                  <a-progress
                    v-if="file.status === 'uploading' && file.percent < 100"
                    :percent="file.percent"
                    type="circle"
                    size="mini"
                    :style="{
                position: 'absolute',
                left: '50%',
                top: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
              }"
                  />
                </div>
                <div class="arco-upload-picture-card" v-else>
                  <div class="arco-upload-picture-card-text">
                    <IconPlus />
                    <div style="margin-top: 10px; font-weight: 600">上传</div>
                  </div>
                </div>
              </div>
            </template>
          </a-upload>
        </a-space>
      </a-form-item>
      <a-form-item field="name" label="基础Url">
        <a-input v-model="form.name" placeholder="请输入名称"/>
      </a-form-item>
      <a-form-item field="raptor" label="是否支持 Vision">
        <a-switch v-model="form.raptor" />
      </a-form-item>

      <a-form-item>
        <div style="width: 100%;text-align: right">
          <a-button @click="visible = false">取消</a-button>
          <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { onMounted ,onBeforeMount, reactive, ref } from "vue";

const visible = ref(false);
const loading = ref(false);
const form = reactive({
  size: "medium",
  name: "",
  age: undefined,
  section: "0",
  province: "haidian",
  options: [],
  date: "",
  time: "",
  radio: "radio one",
  slider: 5,
  score: 5,
  switch: false,
  multiSelect: ["section one"],
  treeSelect: "",
  raptor: false,
  prompt: '请总结以下段落。 小心数字，不要编造。 段落如下：\n' +
    '      {cluster_content}\n' +
    '以上就是你需要总结的内容。',
});
const formRef = ref(null);

const rules = {
  name: [
    {
      required: true,
      message:'名称不允许为空',
    },
  ],
}


const handleSubmit = ({values, errors}) => {
  console.log('values:', values, '\nerrors:', errors)
}

const handleClick = () => {
  visible.value = true;
};
const handleBeforeOk = (done) => {
    formRef.value.validate().then(res => {
      console.log('form:', form)
      if (!form.name) {
        done(false)
      }else {
        console.log('请求数据');

      }
    })
};
const handleCancel = () => {
  visible.value = false;
}

const handleOpened =(el) => {
  Object.assign(form,{
    name: '',// 用户名
    nameJoin: '',// 昵称
    post: '',// 岗位
    txt: '',// 备注
  });
  formRef.value.resetFields();
}

const file = ref();

const onChange = (_, currentFile) => {
  file.value = {
    ...currentFile,
    // url: URL.createObjectURL(currentFile.file),
  };
};
const onProgress = (currentFile) => {
  file.value = currentFile;
};

onBeforeMount(()=>{

})
onMounted(()=>{


})
</script>

<script lang="ts">
export default {
  name: 'add',
  methods: {

  }
};
</script>

 src/views/dmx/IntelligentAgent/components/quality-inspection.vue

New file
@@ -0,0 +1,115 @@
<template>
  <div class="list-wrap">
    <a-typography-title class="block-title" :heading="6">
      {{ $t('cardList.tab.title.content') }}
    </a-typography-title>
    <a-row class="list-row" :gutter="24">
      <a-col
        :xs="12"
        :sm="12"
        :md="12"
        :lg="6"
        :xl="6"
        :xxl="6"
        class="list-col"
      >
        <div class="card-wrap empty-wrap">
          <a-card :bordered="false" hoverable>
            <a-result :status="null" :title="$t('cardList.content.action')">
              <template #icon>
                <icon-plus style="font-size: 20px" />
              </template>
            </a-result>
          </a-card>
        </div>
      </a-col>
      <a-col
        v-for="item in renderData"
        :key="item.id"
        class="list-col"
        :xs="12"
        :sm="12"
        :md="12"
        :lg="6"
        :xl="6"
        :xxl="6"
      >
        <CardWrap
          :loading="loading"
          :title="item.title"
          :description="item.description"
          :default-value="item.enable"
          :action-type="item.actionType"
          :icon="item.icon"
          :open-txt="$t('cardList.content.inspection')"
          :close-txt="$t('cardList.content.delete')"
          :show-tag="false"
        >
          <a-descriptions
            style="margin-top: 16px"
            :data="item.data"
            layout="inline-horizontal"
            :column="2"
          />
          <template #skeleton>
            <a-skeleton :animation="true">
              <a-skeleton-line
                :widths="['50%', '50%', '100%', '40%']"
                :rows="4"
              />
              <a-skeleton-line :widths="['40%']" :rows="1" />
            </a-skeleton>
          </template>
        </CardWrap>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { queryInspectionList, ServiceRecord } from '@/api/list';
  import useRequest from '@/hooks/request';
  import CardWrap from './card-wrap.vue';

  const defaultValue: ServiceRecord[] = new Array(3).fill({});
  const { loading, response: renderData } = useRequest<ServiceRecord[]>(
    queryInspectionList,
    defaultValue
  );
</script>

<style scoped lang="less">
  .card-wrap {
    height: 100%;
    transition: all 0.3s;
    border: 1px solid var(--color-neutral-3);
    &:hover {
      transform: translateY(-4px);
    }
    :deep(.arco-card-meta-description) {
      color: rgb(var(--gray-6));
      .arco-descriptions-item-label-inline {
        font-weight: normal;
        font-size: 12px;
        color: rgb(var(--gray-6));
      }
      .arco-descriptions-item-value-inline {
        color: rgb(var(--gray-8));
      }
    }
  }
  .empty-wrap {
    height: 200px;
    border-radius: 4px;
    :deep(.arco-card) {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      .arco-result-title {
        color: rgb(var(--gray-6));
      }
    }
  }
</style>

 src/views/dmx/IntelligentAgent/components/rules-preset.vue

New file
@@ -0,0 +1,51 @@
<template>
  <div class="list-wrap">
    <a-typography-title class="block-title" :heading="6">
      {{ $t('cardList.tab.title.preset') }}
    </a-typography-title>
    <a-row class="list-row" :gutter="24">
      <a-col
        v-for="item in renderData"
        :key="item.id"
        :xs="12"
        :sm="12"
        :md="12"
        :lg="6"
        :xl="6"
        :xxl="6"
        class="list-col"
        style="min-height: 140px"
      >
        <CardWrap
          :loading="loading"
          :title="item.title"
          :description="item.description"
          :default-value="item.enable"
          :action-type="item.actionType"
          :tag-text="$t('cardList.preset.tag')"
        >
          <template #skeleton>
            <a-skeleton :animation="true">
              <a-skeleton-line :widths="['100%', '40%']" :rows="2" />
              <a-skeleton-line :widths="['40%']" :rows="1" />
            </a-skeleton>
          </template>
        </CardWrap>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { queryRulesPresetList, ServiceRecord } from '@/api/list';
  import useRequest from '@/hooks/request';
  import CardWrap from './card-wrap.vue';

  const defaultValue: ServiceRecord[] = new Array(6).fill({});
  const { loading, response: renderData } = useRequest<ServiceRecord[]>(
    queryRulesPresetList,
    defaultValue
  );
</script>

<style scoped lang="less"></style>

 src/views/dmx/IntelligentAgent/components/the-service.vue

New file
@@ -0,0 +1,57 @@
<template>
  <div class="list-wrap">
    <a-typography-title class="block-title" :heading="6">
      {{ $t('cardList.tab.title.service') }}
    </a-typography-title>
    <a-row class="list-row" :gutter="24">
      <a-col
        v-for="item in renderData"
        :key="item.id"
        :xs="12"
        :sm="12"
        :md="12"
        :lg="6"
        :xl="6"
        :xxl="6"
        class="list-col"
        style="min-height: 162px"
      >
        <CardWrap
          :loading="loading"
          :title="item.title"
          :description="item.description"
          :default-value="item.enable"
          :action-type="item.actionType"
          :expires="item.expires"
          :open-txt="$t('cardList.service.open')"
          :close-txt="$t('cardList.service.cancel')"
          :expires-text="$t('cardList.service.renew')"
          :tag-text="$t('cardList.service.tag')"
          :expires-tag-text="$t('cardList.service.expiresTag')"
          :icon="item.icon"
        >
          <template #skeleton>
            <a-skeleton :animation="true">
              <a-skeleton-line :widths="['100%', '40%', '100%']" :rows="3" />
              <a-skeleton-line :widths="['40%']" :rows="1" />
            </a-skeleton>
          </template>
        </CardWrap>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { queryTheServiceList, ServiceRecord } from '@/api/list';
  import useRequest from '@/hooks/request';
  import CardWrap from './card-wrap.vue';

  const defaultValue: ServiceRecord[] = new Array(4).fill({});
  const { loading, response: renderData } = useRequest<ServiceRecord[]>(
    queryTheServiceList,
    defaultValue
  );
</script>

<style scoped lang="less"></style>

 src/views/dmx/IntelligentAgent/index.vue

New file
@@ -0,0 +1,287 @@
<template>
  <div class="container">
    <Breadcrumb :items="['大模型', '智能体管理']" />
    <a-row :gutter="20" align="stretch">
      <a-col :span="24">
        <a-card class="general-card" :title="$t('智能体管理')">
          <div style="display: flex;justify-content: right;">
            <a-input-search
              :placeholder="$t('cardList.searchInput.placeholder')"
              style="width: 240px;"
            />
          </div>
          <a-divider style="margin: 10px 0" />
          <a-row justify="space-between">
            <a-col :span="24">
              <div style="display: flex; flex-wrap: wrap;">
                <div class="card-wrap" style="cursor: pointer;" @click="handleAdd">
                  <a-card :bordered="false" hoverable >
                    <div style="margin-top: 30px;text-align: center">
                      <a-avatar style="background: #3370ff;">
                        <icon-plus />
                      </a-avatar>
                    </div>
                    <div class="arco-card-body-content">
                      <div style="text-align: center;margin-top: 10px">
                        新建智能体
                      </div>
                      <div style="text-align:center;margin-top: 10px;font-size: 12px;color: #999999">
                        通过描述角色和任务来创建你的智能体<br>
                        智能体可以调用多个工作流和工具
                      </div>
                    </div>
                    <add-agent ref="addAgents"></add-agent>
<!--                    <div style="position: absolute; bottom: 1rem; right: 1rem;">-->
<!--                      <a-space>-->
<!--                      </a-space>-->
<!--                    </div>-->
                  </a-card>
                </div>
                <div class="card-wrap"    v-for="(item, index) of data" :key="index">
                  <a-card :bordered="false" hoverable >
                    <a-avatar :style="{ backgroundColor: '#3370ff' }">
                      <img
                        :style="{ width: '100%'}"
                        alt="dessert"
                        src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
                      />
                    </a-avatar>
                    <a-switch style="position: absolute;top: 10px;right: 10px" size="medium">
                      <template #checked>
                        上线
                      </template>
                      <template #unchecked>
                        下线
                      </template>
                    </a-switch>
                    <div class="arco-card-body-content">
                      <div class="arco-card-body-content-top">
                        <span style="font-size: 18px;font-weight: 900">
                          {{ item.title }}
                        </span>
                      </div>
                      <div class="arco-card-body-content-down">
                        通过描述角色和任务来创建你的智能体
                        智能体可以调用多个工作流和工具
                      </div>

                    </div>
                    <div style="position: absolute; bottom: 1.4rem; left: 1rem;">
                      <icon-user /> <span style="font-size: 12px">王浩</span>
                    </div>
                    <div style="position: absolute; bottom: 1rem; right: 1rem;">
                      <a-space>
                        <editAgent></editAgent>
                        <a-popconfirm :content="'确定删除吗'" type="warning" @ok="deleteItem(record)">
                          <a-button  type="text" size="small">
                            <template #icon>
                              <icon-delete />
                            </template>
                          </a-button>
                        </a-popconfirm>
                      </a-space>
                    </div>
                  </a-card>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, nextTick } from 'vue';
  import addAgent from "@/views/dmx/IntelligentAgent/components/addAgent.vue";
  import editAgent from "@/views/dmx/IntelligentAgent/components/editAgent.vue";
  import { kbdocumentrm } from "@/api/kbList";
  import { Message } from "@arco-design/web-vue";

  let count = 5;
  const activeKey = ref(1);
  const addAgents = ref();
  const data = ref([
    {
      key: 2,
      title: '内容质检',
      content: 'Content of Tab Panel 2',
    },
    {
      key: 3,
      title: '开通服务',
      content: 'Content of Tab Panel 3',
    },
    {
      key: 4,
      title: '规则预置',
      content: 'Content of Tab Panel 4',
    },
  ]);
const changeTabs = (val) => {
  activeKey.value = val;
}
  const handleAdd = () => {
    addAgents.value.handleClick();
  };
  const handleDelete = (key: any) => {
    data.value = data.value.filter((item) => item.key !== key);
  };

  const visible = ref(false);
  const formRef = ref(null);
  const form = reactive({
    size: 'medium',
    name: '',
  });
  const   deleteItem =  async (row)=>{
    console.log(row);
    let data = await kbdocumentrm({doc_id: row.id})
    if(data.code == 0){
      Message.success('删除成功');
      console.log(kbobj, 'kbobj');
      fetchData({
        kb_id: kbobj.id,
        page: 1,
        page_size: 20
      })
    }
  }
  const handleCancel = () => {
    formRef.value.resetFields();
    visible.value = false;
  };
  const handleSubmit = ({ values, errors }) => {
    this.$refs.formRef.validate().then((res, a, b) => {
      debugger;
      console.log('values', values);
    });
  };
</script>

<script lang="ts">
  export default {
    name: 'Card',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
    :deep(.arco-list-content) {
      overflow-x: hidden;
    }

    :deep(.arco-card-meta-title) {
      font-size: 14px;
    }
  }
  :deep(.arco-list-col) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  :deep(.arco-list-item) {
    width: 33%;
  }

  :deep(.block-title) {
    margin: 0 0 12px 0;
    font-size: 14px;
  }
  :deep(.list-wrap) {
    // min-height: 140px;
    .list-row {
      align-items: stretch;
      .list-col {
        margin-bottom: 16px;
      }
    }
    :deep(.arco-space) {
      width: 100%;
      .arco-space-item {
        &:last-child {
          flex: 1;
        }
      }
    }
  }
  .card-wrap {
    width: 20%;
    height: 200px;
    margin: 10px;
    transition: all 0.3s;
    border: 1px solid var(--color-neutral-3);
    border-radius: 4px;
    position: relative;
    &:hover {
      transform: translateY(-4px);
      // box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
    }
    :deep(.arco-card) {
      height: 100%;
      border-radius: 4px;
      .arco-card-body {
        height: 100%;
        .arco-space {
          width: 100%;
          height: 100%;
          .arco-space-item {
            height: 100%;
            &:last-child {
              flex: 1;
            }
            .arco-card-meta {
              height: 100%;
              display: flex;
              flex-flow: column;
              .arco-card-meta-content {
                flex: 1;
                .arco-card-meta-description {
                  margin-top: 8px;
                  color: rgb(var(--gray-6));
                  line-height: 20px;
                  font-size: 12px;
                }
              }
              .arco-card-meta-footer {
                margin-top: 0;
              }
            }
          }
        }
      }
    }
    :deep(.arco-card-meta-title) {
      display: flex;
      align-items: center;

      // To prevent the shaking
      line-height: 28px;
    }
    :deep(.arco-skeleton-line) {
      &:last-child {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
      }
    }
  }
  .arco-card-body-content{
    .arco-card-body-content-top{
      margin-top: 10px;
      text-align: center;
    }
    .arco-card-body-content-down{
      text-align:center;
      margin-top: 10px;
      font-size: 12px;
      color: #999999;
      width: 100%;
      height: 60px;
    }
  }
</style>

 src/views/dmx/IntelligentAgent/locale/en-US.ts

New file
@@ -0,0 +1,20 @@
export default {
  // 'menu.list.cardList': 'Card List',
  'menu.dmx.setting': 'GPT Setting',
  'cardList.tab.title.all': 'All',
  'cardList.tab.title.content': 'Quality Inspection',
  'cardList.tab.title.service': 'The service',
  'cardList.tab.title.preset': 'Rules Preset',
  'cardList.searchInput.placeholder': 'Search',
  'cardList.enable': 'Enable',
  'cardList.disable': 'Disable',
  'cardList.content.delete': 'Delete',
  'cardList.content.inspection': 'Inspection',
  'cardList.content.action': 'Click Create Qc Content queue',
  'cardList.service.open': 'Open',
  'cardList.service.cancel': 'Cancel',
  'cardList.service.renew': 'Contract of service',
  'cardList.service.tag': 'Opened',
  'cardList.service.expiresTag': 'Expired',
  'cardList.preset.tag': 'Enable',
};

 src/views/dmx/IntelligentAgent/locale/zh-CN.ts

New file
@@ -0,0 +1,20 @@
export default {
  // 'menu.list.cardList': '卡片列表',
  'menu.dmx.setting': '大模型设置',
  'cardList.tab.title.all': '全部',
  'cardList.tab.title.content': '内容质检',
  'cardList.tab.title.service': '开通服务',
  'cardList.tab.title.preset': '规则预置',
  'cardList.searchInput.placeholder': '搜索',
  // 'cardList.statistic.enable': '已启用',
  // 'cardList.statistic.disable': '未启用',
  'cardList.content.delete': '删除',
  'cardList.content.inspection': '质检',
  'cardList.content.action': '点击创建质检内容队列',
  'cardList.service.open': '开通服务',
  'cardList.service.cancel': '取消服务',
  'cardList.service.renew': '续约服务',
  'cardList.service.tag': '已开通',
  'cardList.service.expiresTag': '已过期',
  'cardList.preset.tag': '已启用',
};

 src/views/dmx/IntelligentAgent/mock.ts

New file
@@ -0,0 +1,186 @@
import Mock from 'mockjs';
import setupMock, { successResponseWrap } from '@/utils/setup-mock';
import { ServiceRecord } from '@/api/list';

const qualityInspectionList: ServiceRecord[] = [
  {
    id: 1,
    name: 'quality',
    title: '视频类-历史导入',
    description: '2021-10-12 00:00:00',
    data: [
      {
        label: '待质检数',
        value: '120',
      },
      {
        label: '积压时长',
        value: '60s',
      },
      {
        label: '待抽检数',
        value: '0',
      },
    ],
  },
  {
    id: 2,
    name: 'quality',
    title: '图文类-图片版权',
    description: '2021-12-11 18:30:00',
    data: [
      {
        label: '待质检数',
        value: '120',
      },
      {
        label: '积压时长',
        value: '60s',
      },
      {
        label: '待抽检数',
        value: '0',
      },
    ],
  },
  {
    id: 3,
    name: 'quality',
    title: '图文类-高清图片',
    description: '2021-10-15 08:10:00',
    data: [
      {
        label: '待质检数',
        value: '120',
      },
      {
        label: '积压时长',
        value: '60s',
      },
      {
        label: '待抽检数',
        value: '0',
      },
    ],
  },
];
const theServiceList: ServiceRecord[] = [
  {
    id: 1,
    icon: 'code',
    title: '漏斗分析',
    description:
      '用户行为分析之漏斗分析模型是企业实现精细化运营、进行用户行为分析的重要数据分析模型。',
    enable: true,
    actionType: 'button',
  },
  {
    id: 2,
    icon: 'edit',
    title: '用户分布',
    description:
      '快速诊断用户人群，地域细分情况，了解数据分布的集中度，以及主要的数据分布的区间段是什么。',
    enable: true,
    actionType: 'button',
    expires: true,
  },
  {
    id: 3,
    icon: 'user',
    title: '资源分发',
    description:
      '移动端动态化资源分发解决方案。提供稳定大流量服务支持、灵活定制的分发圈选规则，通过离线化预加载。',
    enable: false,
    actionType: 'button',
  },
  {
    id: 4,
    icon: 'user',
    title: '用户画像分析',
    description:
      '用户画像就是将典型用户信息标签化，根据用户特征、业务场景和用户行为等信息，构建一个标签化的用户模型。',
    enable: true,
    actionType: 'button',
  },
];
const rulesPresetList: ServiceRecord[] = [
  {
    id: 1,
    title: '内容屏蔽规则',
    description:
      '用户在执行特定的内容分发任务时，可使用内容屏蔽规则根据特定标签，过滤内容集合。',
    enable: true,
    actionType: 'switch',
  },
  {
    id: 2,
    title: '内容置顶规则',
    description:
      '该规则支持用户在执行特定内容分发任务时，对固定的几条内容置顶。',
    enable: true,
    actionType: 'switch',
  },
  {
    id: 3,
    title: '内容加权规则',
    description: '选定内容加权规则后可自定义从不同内容集合获取内容的概率。',
    enable: false,
    actionType: 'switch',
  },
  {
    id: 4,
    title: '内容分发规则',
    description: '内容分发时，对某些内容需要固定在C端展示的位置。',
    enable: true,
    actionType: 'switch',
  },
  {
    id: 5,
    title: '违禁内容识别',
    description: '精准识别赌博、刀枪、毒品、造假、贩假等违规物品和违规行为。',
    enable: false,
    actionType: 'switch',
  },
  {
    id: 6,
    title: '多语言文字符号识别',
    description:
      '精准识别英语、维语、藏语、蒙古语、朝鲜语等多种语言以及emoji表情形态的语义识别。',
    enable: false,
    actionType: 'switch',
  },
];

setupMock({
  setup() {
    // Quality Inspection
    Mock.mock(new RegExp('/api/list/quality-inspection'), () => {
      return successResponseWrap(
        qualityInspectionList.map((_, index) => ({
          ...qualityInspectionList[index % qualityInspectionList.length],
          id: Mock.Random.guid(),
        }))
      );
    });

    // the service
    Mock.mock(new RegExp('/api/list/the-service'), () => {
      return successResponseWrap(
        theServiceList.map((_, index) => ({
          ...theServiceList[index % theServiceList.length],
          id: Mock.Random.guid(),
        }))
      );
    });

    // rules preset
    Mock.mock(new RegExp('/api/list/rules-preset'), () => {
      return successResponseWrap(
        rulesPresetList.map((_, index) => ({
          ...rulesPresetList[index % rulesPresetList.length],
          id: Mock.Random.guid(),
        }))
      );
    });
  },
});