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

src/router/routes/modules/dmx.ts

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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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(),
+        }))
+      );
+    });
+  },
+});