feat: input、textare组件替换

This commit is contained in:
rd
2025-09-04 11:07:21 +08:00
parent 1a6fad8bd5
commit cf574da1da
47 changed files with 435 additions and 425 deletions

View File

@ -1,41 +1,42 @@
<template>
<div class="agent-wrap relative h-full pl-16px">
<a-input
v-model="query.name"
<Input
v-model:value="query.name"
@press-enter="getData()"
placeholder="搜索智能体"
size="large"
allow-clear
class="absolute right-0 top-4px !w-400px"
class="absolute right-0 top-4px !w-400px"
>
<template #prefix>
<icon-search @click="getData()" />
</template>
</a-input>
<div v-for="(item, index) in list" :key="index">
</Input>
<div v-for="(item, index) in list" :key="index">
<p class="span-title w-fit mb-16px">{{ item.name }}</p>
<a-row class="grid-demo" :gutter="[20, 16]" v-if="item.agent_products.length > 0">
<a-col :xs="24"
:sm="12"
:md="8"
:lg="5"
:xl="6"
:xxl="4"
v-for="(product, k) in item.agent_products" :key="k">
<a-col :xs="24" :sm="12" :md="8" :lg="5" :xl="6" :xxl="4" v-for="(product, k) in item.agent_products" :key="k">
<div class="card-container cursor-pointer !h-252px" @click="goDetail(product?.type, product?.id)">
<div class="card-image h-120px w-100% bg-cover bg-center mb-8px" v-image-main-color="product.image_url">
<img class="object-contain h-full w-100% " :src="product?.image_url"/>
<div class="card-image h-120px w-100% bg-cover bg-center mb-8px" v-image-main-color="product.image_url">
<img class="object-contain h-full w-100%" :src="product?.image_url" />
</div>
<div class="card-content w-full">
<TextoverTips :context="product.name" class="card-title mb-4px !text-16px"/>
<TextoverTips :context="product.description" class="card-description mb-8px color-#737478 text-14px lh-22px font-400" :line="2" />
<TextOverTips :context="product.name" class="card-title mb-4px !text-16px" />
<TextOverTips
:context="product.description"
class="card-description mb-8px color-#737478 text-14px lh-22px font-400"
:line="2"
/>
</div>
<div class="card-footer">
<div
:class="['status-tag', product.type === 1 ? 'blue-tag' : 'red-tag']"
:style="{ background: product.type === 1 ? 'var(--Functional-Blue-1, #F0EDFF)' : 'var(--Functional-Red-1, #FFE9E7)' }"
:style="{
background:
product.type === 1 ? 'var(--Functional-Blue-1, #F0EDFF)' : 'var(--Functional-Red-1, #FFE9E7)',
}"
data-size="mini-20px"
>
<SvgIcon
@ -48,7 +49,9 @@
<div class="status-text">{{ product.type === 1 ? '对话式' : '工作流' }}</div>
</div>
<div class="usage-info">
<div class="usage-count mr-2px">{{ formatNumberShow({ value: product?.views, showExactValue: true }) }}</div>
<div class="usage-count mr-2px">
{{ formatNumberShow({ value: product?.views, showExactValue: true }) }}
</div>
<div class="usage-label">次使用</div>
</div>
</div>
@ -62,10 +65,11 @@
</template>
<script setup lang="ts">
import { Input } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { getAgentList } from '@/api/all/agent';
import { formatNumberShow } from "@/utils/tools";
import TextoverTips from "@/components/text-over-tips";
import { formatNumberShow } from '@/utils/tools';
import TextOverTips from '@/components/text-over-tips';
const router = useRouter();

View File

@ -9,16 +9,16 @@
:rules="field.props.rules"
:tooltip="field.props.tip"
>
<a-input
<Input
allowClear
v-if="field.type === 'input'"
v-model="formData[field.props.name]"
v-model:value="formData[field.props.name]"
:placeholder="field?.props?.placeholder"
/>
<a-textarea
<TextArea
v-if="field.type === 'textarea'"
style="width: 500px; height: 200px"
v-model="formData[field.props.name]"
v-model:value="formData[field.props.name]"
:placeholder="field?.props?.placeholder"
/>
<!-- <a-color-picker v-if="field.type === 'color_picker'"
@ -52,7 +52,8 @@
import { defineProps, defineEmits } from 'vue';
import ImageUpload from '@/components/upload/ImageUpload.vue';
import FileUpload from '@/components/upload/FileUpload.vue';
import { Button } from 'ant-design-vue';
import { Button, Input } from 'ant-design-vue';
const { TextArea } = Input;
const props = defineProps({
formFields: {
@ -80,24 +81,25 @@ const handleSubmit = async () => {
<style scoped lang="scss">
.form-container {
:deep(.arco-input-wrapper),
:deep(.arco-textarea-wrapper) {
:deep(.ant-input),
:deep(.ant-input:focus),
:deep(.ant-input-focused) {
border-radius: 4px;
border-color: #d7d7d9;
background-color: #fff;
height: 35px;
width: 300px;
&:focus-within,
&.arco-input-focus {
&:focus,
&:focus-within {
background-color: var(--color-bg-2);
border-color: rgb(var(--primary-6));
box-shadow: 0 0 0 0 var(--color-primary-light-2);
}
}
&.arco-textarea-wrapper {
height: 60px;
}
&.ant-textarea-wrapper {
height: 60px;
}
.submit-btn {