AI Chat UI

Appearance

Input ​

单行文本输入基础件，v-model 双向绑定，自带校验失败态（invalid + aria-invalid）与原生 blur 事件透传。

Input、Select、Radio、Button 是 @toimc/vue 的四个基础表单原语——构建表单与设置类界面的原子件。视觉语言对齐原子 CSS 体系的设计（subtle 边框、focus ring、统一控件高度、快速 transition），但全部以本库 --ai-chat-* 设计令牌实现，未引入任何原子 CSS 框架，暗色主题随语义令牌自动适配。

代码演示 ​

v-model 双向绑定，输入即更新。Best for：设置页表单、命名新建会话等单行文本录入。

name = （空）

密码输入 ​

type="password" 渲染密码框，autocomplete 透传原生属性（注册新密钥场景建议 new-password，避免浏览器误回填）。Best for：API Key、访问令牌等敏感凭据录入。

校验失败态与失焦事件 ​

invalid 会同时渲染 error 色边框和 aria-invalid="true"（未设置时不输出该属性）；blur 透传原生失焦事件，适合「失焦后 touched 才显示错误」的校验模式。Best for：必填校验、失焦后延迟报错的表单：

校验失败态与失焦事件 ​

invalid 会同时渲染 error 色边框和 aria-invalid="true"（未设置时不输出该属性）；blur 透传原生失焦事件，适合「失焦后 touched 才显示错误」的校验模式：

尺寸与禁用 ​

size="sm"（32px）用于工具栏等紧凑区，默认 md（36px）；disabled 降低透明度且输入不更新 v-model。Best for：工具栏 / 窄侧栏用 sm，只读展示或权限不足时用 disabled：

在宿主应用中 ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import { Input } from '@toimc/vue'

const name = ref('')
</script>

<template>
  <Input v-model="name" placeholder="请输入模型名称" />
</template>

视觉要点 ​

  • 统一控件高度：--ai-chat-control-height-md（36px）/ --ai-chat-control-height-sm（32px），与 Select、Button 同一高度体系
  • focus ring：聚焦（:focus-visible）时 accent 边框 + --ai-chat-control-ring（3px 低透明度 accent 阴影）；hover 时边框加深
  • invalid 态：--ai-chat-color-status-error 边框，聚焦时 ring 同步变 error 色
  • 暗色自动适配：背景/边框/文字/placeholder 全部引用语义令牌，[data-theme='dark'] 翻转语义层即生效
  • 样式为 scoped（抗宿主 reset）：宿主未分层表单元素 reset（Tailwind preflight / modern-normalize 的 border: 0 + padding: 0）会压过 @layer 内的库样式，scoped 属性选择器凭特异性免疫
  • transition：边框/阴影/透明度统一走 --ai-chat-duration-fast（0.12s），prefers-reduced-motion 时关闭

API ​

Props ​

属性名类型默认值说明
v-modelstring''输入值，双向绑定
type'text' | 'password''text'原生输入类型
placeholderstring—占位文案
disabledbooleanfalse禁用（输入不更新 v-model）
invalidbooleanfalse校验失败态：error 边框 + aria-invalid="true"
size'sm' | 'md''md'控件高度
autocompletestring—透传原生 autocomplete（如 new-password）

Events ​

事件名参数说明
update:modelValue(value: string)v-model 更新事件
blur(event: Event)原生失焦事件透传，适合 touched 校验时机