web/flow_web.git

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>