新增前后端AI聊天模块,包括流式对话、配置管理和UI组件优化。
This commit is contained in:
94
frontend/src/components/ui/BaseInput.vue
Normal file
94
frontend/src/components/ui/BaseInput.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
const model = defineModel<string>()
|
||||
|
||||
defineProps<{
|
||||
label: string
|
||||
error?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="input-group" :class="{ 'input-group--error': error }">
|
||||
<input
|
||||
class="input-field"
|
||||
placeholder=" "
|
||||
v-model="model"
|
||||
/>
|
||||
<label class="input-label">{{ label }}</label>
|
||||
<div class="input-ink" />
|
||||
<p v-if="error" class="input-error">{{ error }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.input-group {
|
||||
position: relative;
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.input-field {
|
||||
width: 100%;
|
||||
padding: 1rem 0 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: var(--font-display);
|
||||
color: var(--ink-900);
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid var(--paper-300);
|
||||
outline: none;
|
||||
transition: border-color var(--duration-normal) ease;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: var(--font-display);
|
||||
color: var(--ink-400);
|
||||
pointer-events: none;
|
||||
transition:
|
||||
top var(--duration-normal) var(--ease-out-smooth),
|
||||
font-size var(--duration-normal) var(--ease-out-smooth),
|
||||
color var(--duration-normal) ease;
|
||||
}
|
||||
|
||||
.input-field:focus + .input-label,
|
||||
.input-field:not(:placeholder-shown) + .input-label {
|
||||
top: -0.4rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vermilion);
|
||||
}
|
||||
|
||||
/* 墨水扩散效果 */
|
||||
.input-ink {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--vermilion);
|
||||
transform: scaleX(0) translateX(-50%);
|
||||
transform-origin: center;
|
||||
transition: transform var(--duration-normal) var(--ease-out-smooth);
|
||||
}
|
||||
|
||||
.input-field:focus ~ .input-ink {
|
||||
transform: scaleX(1) translateX(-50%);
|
||||
}
|
||||
|
||||
/* 错误状态 */
|
||||
.input-group--error .input-field {
|
||||
border-bottom-color: var(--danger);
|
||||
}
|
||||
|
||||
.input-group--error .input-ink {
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
.input-error {
|
||||
margin-top: var(--space-xs);
|
||||
font-size: 0.8rem;
|
||||
color: var(--danger);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user