smartai2dian0/src/modules/model/MessageBody.vue

<template>
  <div class="model-body">
    <div class="body-item">
      <div class="item-title">
        <div class="title">{{ $t('management.addedModel') }}</div>
        <div class="icon" @click="changeStatusAdd">
          <template v-if="added_show_status"> {{ $t('management.upBtn') }} <icon-up /> </template>
          <template v-if="!added_show_status"> {{ $t('management.downBtn') }} <icon-down /> </template>
        </div>
      </div>
      <transition name="expand-collapse" @before-enter="beforeEnter" @enter="enter" @leave="leave">
        <div v-if="added_show_status">
          <ModelList v-for="item in added_data" :key="item.id" :model_item="item" @showMore="showMoreModel"></ModelList>
        </div>
      </transition>
    </div>
    <div class="body-item">
      <div class="item-title">
        <div class="title">{{ $t('management.unaddModel') }}</div>
        <div class="icon" @click="changeStatusUnAdd">
          <template v-if="unadd_show_status"> {{ $t('management.upBtn') }} <icon-up /> </template>
          <template v-if="!unadd_show_status"> {{ $t('management.downBtn') }} <icon-down /> </template>
        </div>
      </div>
      <transition name="expand-collapse" @before-enter="beforeEnter" @enter="enter" @leave="leave">
        <div v-if="unadd_show_status" class="card-list">
          <CardItem v-for="item in un_added_data" :key="item.id" :name="item.name" :img_src="item.img_src" is_model>
            <template #labels>
              <div class="labels">{{ item.keyword }}</div>
            </template>
            <template #description>
              <div class="desc">{{ item.desc }}</div>
            </template>
            <template #bottom>
              <a-button>
                <template #icon> <icon-plus /> </template>{{ $t('management.addModelBtn') }}</a-button
              ></template
            >
          </CardItem>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ModelList from './ModelList.vue';
import CardItem from '../../views/manage/CardItem.vue';
import { useCollapse } from './use-collapse';

const { beforeEnter, enter, leave } = useCollapse(1000);

const added_data = ref([
  {
    id: '1',
    name: 'OpenAl-APl-Compatible',
    desc: 'LLM,TEXT EMBEDDING,SPEECH2TEXT,MODERATION ',
    img_src: 'modelFrame1',
    show_more: false,
    models: [
      {
        id: '1-1',
        name: 'qwen-2.5-72b-instruct OpenAl-APl'
      },
      {
        id: '1-2',
        name: 'qwen-2.5-72b-instruct-gptq-int4 OpenAI-API'
      }
    ]
  },
  {
    id: '2',
    name: 'Tongyi-Qianwen',
    desc: 'LLM,TEXT EMBEDDING,SPEECH2TEXT,MODERATION',
    img_src: 'modelFrame2',
    show_more: false,
    models: [
      {
        id: '2-1',
        name: 'qwen-plus'
      },
      {
        id: '2-2',
        name: 'qwen-turbo'
      },
      {
        id: '2-3',
        name: 'qwen-vl-plus'
      }
    ]
  },
  {
    id: '3',
    name: 'Xinference',
    desc: 'LLM,TEXT EMBEDDING,SPEECH2TEXT,MODERATION,TEXT RE-RANK',
    img_src: 'modelFrame3',
    show_more: false,
    models: [
      {
        id: '3-1',
        name: 'basic-bge-large-zh-v1.5'
      }
    ]
  }
]);
const un_added_data = ref([
  {
    id: '1',
    name: 'OpenAl',
    keyword: 'LLM,TEXT',
    desc: 'EMBEDDING,SPEECH2TEXT,MODERATION',
    img_src: 'modelFrame4'
  },
  {
    id: '2',
    name: 'Moonshot',
    keyword: 'LLM,TEXT EMBEDDING',
    desc: '',
    img_src: 'modelFrame5'
  },
  {
    id: '3',
    name: 'ZHIPU-AI',
    keyword: 'LLM,TEXT',
    desc: 'EMBEDDING,SPEECH2TEXT,MODERATION',
    img_src: 'modelFrame6'
  },
  {
    id: '4',
    name: 'BaiChuan',
    keyword: 'LLM,TEXT EMBEDDING',
    desc: '',
    img_src: 'modelFrame7'
  },
  {
    id: '5',
    name: 'DeepSeek',
    keyword: 'LLM',
    desc: '',
    img_src: 'modelFrame8'
  },
  {
    id: '6',
    name: 'Mistral',
    keyword: 'LLM,TEXT EMBEDDING',
    desc: '',
    img_src: 'modelFrame9'
  },
  {
    id: '7',
    name: 'StepFun',
    keyword: 'LLM',
    desc: '',
    img_src: 'modelFrame10'
  }
]);
// 展开收起状态
const added_show_status = ref(true);
const unadd_show_status = ref(true);

const changeStatusAdd = () => {
  added_show_status.value = !added_show_status.value;
  if (!added_show_status.value) {
    added_data.value.forEach((item) => {
      item.show_more = false;
    });
  }
};
const changeStatusUnAdd = () => {
  unadd_show_status.value = !unadd_show_status.value;
};

const showMoreModel = (item) => {
  const index = added_data.value.findIndex((u) => u.id === item.id);
  if (index !== -1) {
    added_data.value[index].show_more = !added_data.value[index].show_more;
  }
};
</script>
<style scoped lang="css">
.model-body {
  height: calc(100% - 80px);
  overflow-y: auto;
}
.model-body::-webkit-scrollbar {
  display: none;
}
.body-item {
  margin-bottom: 50px;
}

.item-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
  cursor: pointer;
}
.title {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-text-1);
}
.card-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  transition: all 0.3s ease;
  .labels {
    color: var(--color-text-3);
  }
  .desc {
    font-size: 14px;
  }
}
</style>