From 39706c265e7a5ebc3bb702a9df82c4a3cb6ed5d4 Mon Sep 17 00:00:00 2001
From: vaebe <18137693952@163.com>
Date: Mon, 17 Nov 2025 20:51:56 +0800
Subject: [PATCH 01/10] =?UTF-8?q?feat:=20input=20=E5=88=9D=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ccui/ui/input/index.ts           |  17 +
 packages/ccui/ui/input/src/input-types.ts |  49 +++
 packages/ccui/ui/input/src/input.scss     | 234 ++++++++++++++
 packages/ccui/ui/input/src/input.tsx      | 185 +++++++++++
 packages/ccui/ui/input/test/input.test.ts | 211 ++++++++++++
 packages/docs/components/input/index.md   | 378 ++++++++++++++++++++++
 6 files changed, 1074 insertions(+)
 create mode 100644 packages/ccui/ui/input/index.ts
 create mode 100644 packages/ccui/ui/input/src/input-types.ts
 create mode 100644 packages/ccui/ui/input/src/input.scss
 create mode 100644 packages/ccui/ui/input/src/input.tsx
 create mode 100644 packages/ccui/ui/input/test/input.test.ts
 create mode 100644 packages/docs/components/input/index.md

diff --git a/packages/ccui/ui/input/index.ts b/packages/ccui/ui/input/index.ts
new file mode 100644
index 00000000..bf039e7e
--- /dev/null
+++ b/packages/ccui/ui/input/index.ts
@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+import Input from './src/input'
+
+Input.install = function (app: App): void {
+  app.component(Input.name, Input)
+}
+
+export { Input }
+
+export default {
+  title: 'Input 输入框',
+  category: '数据录入',
+  status: '100%',
+  install(app: App): void {
+    app.component(Input.name, Input)
+  },
+}
diff --git a/packages/ccui/ui/input/src/input-types.ts b/packages/ccui/ui/input/src/input-types.ts
new file mode 100644
index 00000000..427b3d97
--- /dev/null
+++ b/packages/ccui/ui/input/src/input-types.ts
@@ -0,0 +1,49 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+
+export type InputType = 'text' | 'password' | 'number' | 'textarea'
+export type InputSize = 'large' | 'default' | 'small'
+
+export const inputProps = {
+  type: {
+    type: String as PropType<InputType>,
+    default: 'text',
+  },
+  size: {
+    type: String as PropType<InputSize>,
+    default: 'default',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+  showPassword: {
+    type: Boolean,
+    default: false,
+  },
+  prepend: {
+    type: String,
+    default: '',
+  },
+  append: {
+    type: String,
+    default: '',
+  },
+  value: {
+    type: String,
+    default: '',
+  },
+} as const
+
+export type InputProps = ExtractPropTypes<typeof inputProps>
diff --git a/packages/ccui/ui/input/src/input.scss b/packages/ccui/ui/input/src/input.scss
new file mode 100644
index 00000000..d97e4644
--- /dev/null
+++ b/packages/ccui/ui/input/src/input.scss
@@ -0,0 +1,234 @@
+@use '../../style-var/index.scss' as *;
+
+.#{$cls-prefix}-input {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  vertical-align: middle;
+  font-size: 14px;
+  line-height: $ccui-line-height-base;
+  border-radius: $ccui-border-radius;
+  transition: $ccui-animation-duration-base;
+  background-color: $ccui-base-bg;
+  border: 1px solid $ccui-line;
+  color: $ccui-text;
+
+  &:hover {
+    border-color: $ccui-brand-hover;
+  }
+
+  &__wrapper {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    border-radius: $ccui-border-radius;
+    transition: $ccui-animation-duration-base;
+    background-color: $ccui-base-bg;
+    border: 1px solid $ccui-line;
+
+    &--disabled {
+      background-color: $ccui-disabled-bg;
+      border-color: $ccui-disabled-line;
+      color: $ccui-disabled-text;
+      cursor: not-allowed;
+
+      &:hover {
+        border-color: $ccui-disabled-line;
+      }
+    }
+
+    &--focus {
+      border-color: $ccui-brand;
+      box-shadow: 0 0 0 2px rgba($ccui-brand, 0.2);
+    }
+
+    &--hover {
+      border-color: $ccui-brand-hover;
+    }
+
+    &--large {
+      font-size: 16px;
+      line-height: 1.5;
+      padding: 12px;
+    }
+
+    &--default {
+      font-size: 14px;
+      line-height: 1.5;
+      padding: 8px;
+    }
+
+    &--small {
+      font-size: 12px;
+      line-height: 1.5;
+      padding: 4px;
+    }
+  }
+
+  &--disabled {
+    background-color: $ccui-disabled-bg;
+    border-color: $ccui-disabled-line;
+    color: $ccui-disabled-text;
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: $ccui-disabled-line;
+    }
+  }
+
+  &--readonly {
+    cursor: default;
+  }
+
+  &--clearable,
+  &--suffix {
+    padding-right: 30px;
+  }
+
+  &--prefix {
+    padding-left: 30px;
+  }
+
+  &__main {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    flex: 1;
+    width: 100%;
+  }
+
+  &__prepend,
+  &__append {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    background-color: $ccui-area;
+    border: 1px solid $ccui-line;
+    border-radius: $ccui-border-radius;
+    color: $ccui-text;
+    font-size: 14px;
+    line-height: 1.5;
+    padding: 0 8px;
+  }
+
+  &__prepend {
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &__append {
+    border-left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &__prefix,
+  &__suffix {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $ccui-placeholder;
+    pointer-events: none;
+  }
+
+  &__prefix {
+    left: 10px;
+  }
+
+  &__suffix {
+    right: 10px;
+  }
+
+  &__clear,
+  &__password-visible,
+  &__password-hidden {
+    cursor: pointer;
+    pointer-events: auto;
+    color: $ccui-placeholder;
+
+    &:hover {
+      color: $ccui-text;
+    }
+  }
+
+  input,
+  textarea {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background: none;
+    border: none;
+    outline: none;
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    padding: 0;
+    margin: 0;
+    border-radius: $ccui-border-radius;
+
+    &::placeholder {
+      color: $ccui-placeholder;
+    }
+
+    &:disabled {
+      background: none;
+      cursor: not-allowed;
+      color: $ccui-disabled-text;
+    }
+  }
+
+  textarea {
+    resize: vertical;
+    padding: 8px;
+  }
+
+  &--large {
+    font-size: 16px;
+    line-height: 1.5;
+
+    input,
+    textarea {
+      padding: 12px;
+    }
+
+    textarea {
+      padding: 12px;
+    }
+  }
+
+  &--default {
+    font-size: 14px;
+    line-height: 1.5;
+
+    input,
+    textarea {
+      padding: 8px;
+    }
+
+    textarea {
+      padding: 8px;
+    }
+  }
+
+  &--small {
+    font-size: 12px;
+    line-height: 1.5;
+
+    input,
+    textarea {
+      padding: 4px;
+    }
+
+    textarea {
+      padding: 4px;
+    }
+  }
+}
diff --git a/packages/ccui/ui/input/src/input.tsx b/packages/ccui/ui/input/src/input.tsx
new file mode 100644
index 00000000..966ad45b
--- /dev/null
+++ b/packages/ccui/ui/input/src/input.tsx
@@ -0,0 +1,185 @@
+import type { InputProps } from './input-types'
+import { computed, defineComponent, ref, watch } from 'vue'
+import { useNamespace } from '../../shared/hooks/use-namespace'
+import { inputProps } from './input-types'
+import './input.scss'
+
+export default defineComponent({
+  name: 'CInput',
+  props: inputProps,
+  emits: ['update:value', 'input', 'change', 'focus', 'blur', 'clear'],
+  setup(props: InputProps, { emit, slots }) {
+    const ns = useNamespace('input')
+    const inputRef = ref<HTMLInputElement | HTMLTextAreaElement | null>(null)
+
+    // 输入框的值
+    const inputValue = ref(props.value)
+
+    // 是否显示密码切换图标
+    const showPasswordVisible = computed(() => props.type === 'password' && props.showPassword)
+
+    // 密码是否可见
+    const isPasswordVisible = ref(false)
+
+    // 当前输入框类型
+    const currentType = computed(() => {
+      if (props.type === 'password' && showPasswordVisible.value && isPasswordVisible.value) {
+        return 'text'
+      }
+      return props.type
+    })
+
+    // 输入框类名
+    const inputClass = computed(() => ({
+      [ns.b()]: true,
+      [ns.m(props.size)]: !!props.size,
+      [ns.m('disabled')]: props.disabled,
+      [ns.m('readonly')]: props.readonly,
+      [ns.m('clearable')]: props.clearable,
+      [ns.m('suffix')]: props.clearable || showPasswordVisible.value,
+    }))
+
+    // 包装器类名
+    const wrapperClass = computed(() => ({
+      [ns.e('wrapper')]: true,
+      [ns.em('wrapper', props.size)]: !!props.size,
+      [ns.em('wrapper', 'disabled')]: props.disabled,
+    }))
+
+    // 更新输入框的值
+    const updateValue = (value: string) => {
+      inputValue.value = value
+      emit('update:value', value)
+      emit('input', value)
+    }
+
+    // 处理输入事件
+    const handleInput = (e: Event) => {
+      const target = e.target as HTMLInputElement
+      updateValue(target.value)
+    }
+
+    // 处理变化事件
+    const handleChange = (e: Event) => {
+      const target = e.target as HTMLInputElement
+      emit('change', target.value)
+    }
+
+    // 处理焦点事件
+    const handleFocus = (e: FocusEvent) => {
+      emit('focus', e)
+    }
+
+    // 处理失去焦点事件
+    const handleBlur = (e: FocusEvent) => {
+      emit('blur', e)
+    }
+
+    // 清空输入框
+    const clearInput = () => {
+      updateValue('')
+      emit('clear')
+    }
+
+    // 切换密码可见性
+    const togglePasswordVisible = () => {
+      isPasswordVisible.value = !isPasswordVisible.value
+    }
+
+    // 监听 value 属性变化
+    watch(() => props.value, (newVal) => {
+      if (newVal !== inputValue.value) {
+        inputValue.value = newVal
+      }
+    })
+
+    return () => {
+      // 前置内容
+      const prependContent = props.prepend || slots.prepend
+        ? (
+            <div class={ns.e('prepend')}>
+              {slots.prepend ? slots.prepend() : <span>{props.prepend}</span>}
+            </div>
+          )
+        : null
+
+      // 后置内容
+      const appendContent = props.append || slots.append
+        ? (
+            <div class={ns.e('append')}>
+              {slots.append ? slots.append() : <span>{props.append}</span>}
+            </div>
+          )
+        : null
+
+      // 后缀图标内容
+      const suffixIconContent = props.clearable || showPasswordVisible.value || slots.suffix
+        ? (
+            <div class={ns.e('suffix')}>
+              {props.clearable && inputValue.value && (
+                <i class={ns.e('clear')} onClick={clearInput}></i>
+              )}
+              {showPasswordVisible.value && (
+                <i
+                  class={isPasswordVisible.value ? ns.e('password-visible') : ns.e('password-hidden')}
+                  onClick={togglePasswordVisible}
+                >
+                </i>
+              )}
+              {slots.suffix && slots.suffix()}
+            </div>
+          )
+        : null
+
+      // 输入框属性
+      const baseInputAttrs = {
+        ref: inputRef,
+        class: inputClass.value,
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        readonly: props.readonly,
+        value: inputValue.value,
+        onInput: handleInput,
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+      }
+
+      // 输入框元素
+      const inputElement = props.type === 'textarea'
+        ? (
+            <textarea {...baseInputAttrs} />
+          )
+        : (
+            <input
+              {...baseInputAttrs}
+              type={currentType.value}
+            />
+          )
+
+      // 主体内容
+      const mainContent = (
+        <>
+          {slots.prefix && <div class={ns.e('prefix')}>{slots.prefix()}</div>}
+          {inputElement}
+          {suffixIconContent}
+        </>
+      )
+
+      // 如果有前置或后置内容，则需要包装一层
+      return prependContent || appendContent
+        ? (
+            <div class={wrapperClass.value}>
+              {prependContent}
+              <div class={ns.e('main')}>{mainContent}</div>
+              {appendContent}
+            </div>
+          )
+        : (
+            <div class={wrapperClass.value}>
+              {mainContent}
+            </div>
+          )
+    }
+  },
+})
diff --git a/packages/ccui/ui/input/test/input.test.ts b/packages/ccui/ui/input/test/input.test.ts
new file mode 100644
index 00000000..8830c22d
--- /dev/null
+++ b/packages/ccui/ui/input/test/input.test.ts
@@ -0,0 +1,211 @@
+import type { InputSize } from '../src/input-types'
+import { mount, shallowMount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { useNamespace } from '../../shared/hooks/use-namespace'
+import { Input } from '../index'
+
+const ns = useNamespace('input', true)
+const baseClass = ns.b()
+const _wrapperClass = ns.e('wrapper')
+function getSizeClass(type: InputSize) {
+  return ns.em('wrapper', type)
+}
+
+describe('input', () => {
+  it('dom', () => {
+    const wrapper = shallowMount(Input, {
+      props: {
+        value: 'test',
+      },
+    })
+
+    // 元素是否存在
+    expect(wrapper.find(baseClass).exists()).toBeTruthy()
+
+    // 输入框是否存在
+    expect(wrapper.find('input').exists()).toBeTruthy()
+
+    wrapper.unmount()
+  })
+
+  it('type', async () => {
+    const wrapper = shallowMount(Input, { props: { type: 'text' } })
+    expect(wrapper.find('input').attributes('type')).toBe('text')
+
+    await wrapper.setProps({ type: 'password' })
+    expect(wrapper.find('input').attributes('type')).toBe('password')
+
+    await wrapper.setProps({ type: 'number' })
+    expect(wrapper.find('input').attributes('type')).toBe('number')
+
+    await wrapper.setProps({ type: 'textarea' })
+    expect(wrapper.find('textarea').exists()).toBeTruthy()
+  })
+
+  it('size', async () => {
+    const wrapper = shallowMount(Input, { props: { size: 'small' } })
+    expect(wrapper.find(getSizeClass('small')).exists()).toBeTruthy()
+
+    await wrapper.setProps({ size: 'large' })
+    expect(wrapper.find(getSizeClass('large')).exists()).toBeTruthy()
+  })
+
+  it('placeholder', async () => {
+    const wrapper = shallowMount(Input, { props: { placeholder: '请输入内容' } })
+    expect(wrapper.find('input').attributes('placeholder')).toBe('请输入内容')
+  })
+
+  it('disabled', async () => {
+    const wrapper = shallowMount(Input, { props: { disabled: true } })
+
+    // 检查是否应用了禁用样式类
+    const disabledClass = ns.m('disabled').substring(1) // 移除开头的点
+    expect(wrapper.find('input').classes()).toContain(disabledClass)
+
+    // 检查是否应用了禁用属性
+    expect(wrapper.find('input').attributes('disabled')).toBe('')
+  })
+
+  it('readonly', async () => {
+    const wrapper = shallowMount(Input, { props: { readonly: true } })
+
+    // 检查是否应用了只读属性
+    expect(wrapper.find('input').attributes('readonly')).toBe('')
+  })
+
+  it('clearable', async () => {
+    const wrapper = shallowMount(Input, { props: { clearable: true, value: 'test' } })
+
+    // 检查是否显示清空图标
+    expect(wrapper.find(ns.e('clear')).exists()).toBeTruthy()
+  })
+
+  it('prepend', async () => {
+    const wrapper = shallowMount(Input, { props: { prepend: 'http://' } })
+
+    // 检查是否显示前置内容
+    expect(wrapper.find(ns.e('prepend')).exists()).toBeTruthy()
+    expect(wrapper.find(ns.e('prepend')).text()).toBe('http://')
+  })
+
+  it('append', async () => {
+    const wrapper = shallowMount(Input, { props: { append: '.com' } })
+
+    // 检查是否显示后置内容
+    expect(wrapper.find(ns.e('append')).exists()).toBeTruthy()
+    expect(wrapper.find(ns.e('append')).text()).toBe('.com')
+  })
+
+  it('emits input event when input value changes', async () => {
+    const handleInput = vi.fn()
+    const wrapper = mount(Input, {
+      attrs: {
+        onInput: handleInput,
+      },
+    })
+
+    const input = wrapper.find('input')
+    await input.setValue('test')
+    expect(handleInput).toBeCalled()
+
+    wrapper.unmount()
+  })
+
+  it('emits change event when input value changes and loses focus', async () => {
+    const handleChange = vi.fn()
+    const wrapper = mount(Input, {
+      attrs: {
+        onChange: handleChange,
+      },
+    })
+
+    const input = wrapper.find('input')
+    await input.setValue('test')
+    await input.trigger('change')
+    expect(handleChange).toBeCalled()
+
+    wrapper.unmount()
+  })
+
+  it('emits focus event when input is focused', async () => {
+    const handleFocus = vi.fn()
+    const wrapper = mount(Input, {
+      attrs: {
+        onFocus: handleFocus,
+      },
+    })
+
+    const input = wrapper.find('input')
+    await input.trigger('focus')
+    expect(handleFocus).toBeCalled()
+
+    wrapper.unmount()
+  })
+
+  it('emits blur event when input loses focus', async () => {
+    const handleBlur = vi.fn()
+    const wrapper = mount(Input, {
+      attrs: {
+        onBlur: handleBlur,
+      },
+    })
+
+    const input = wrapper.find('input')
+    await input.trigger('focus')
+    await input.trigger('blur')
+    expect(handleBlur).toBeCalled()
+
+    wrapper.unmount()
+  })
+
+  it('clears input value when clear icon is clicked', async () => {
+    const handleClear = vi.fn()
+    const wrapper = mount(Input, {
+      props: {
+        clearable: true,
+        value: 'test',
+      },
+      attrs: {
+        onClear: handleClear,
+      },
+    })
+
+    const clearIcon = wrapper.find(ns.e('clear'))
+    await clearIcon.trigger('click')
+    expect(handleClear).toBeCalled()
+
+    // 检查输入框值是否被清空
+    expect(wrapper.find('input').element.value).toBe('')
+
+    wrapper.unmount()
+  })
+
+  it('toggles password visibility when showPassword is true', async () => {
+    const wrapper = mount(Input, {
+      props: {
+        type: 'password',
+        showPassword: true,
+        value: 'test',
+      },
+    })
+
+    // 检查是否显示密码切换图标
+    expect(wrapper.find(ns.e('password-hidden')).exists()).toBeTruthy()
+
+    // 点击密码切换图标
+    const passwordIcon = wrapper.find(ns.e('password-hidden'))
+    await passwordIcon.trigger('click')
+
+    // 检查密码是否变为可见
+    expect(wrapper.find(ns.e('password-visible')).exists()).toBeTruthy()
+
+    // 再次点击密码切换图标
+    const passwordIcon2 = wrapper.find(ns.e('password-visible'))
+    await passwordIcon2.trigger('click')
+
+    // 检查密码是否变为隐藏
+    expect(wrapper.find(ns.e('password-hidden')).exists()).toBeTruthy()
+
+    wrapper.unmount()
+  })
+})
diff --git a/packages/docs/components/input/index.md b/packages/docs/components/input/index.md
new file mode 100644
index 00000000..8935577c
--- /dev/null
+++ b/packages/docs/components/input/index.md
@@ -0,0 +1,378 @@
+# Input 输入框
+
+通过鼠标或键盘输入字符，可以设置输入框的类型、大小和状态。
+
+## 何时使用
+
+- 需要用户输入文本内容时。
+- 需要收集用户的简短信息时。
+- 需要搜索、过滤或表单输入时。
+
+## 基本使用
+
+:::demo
+
+```vue
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const value = ref('')
+    return {
+      value
+    }
+  }
+})
+</script>
+
+<template>
+  <div>
+    <c-input v-model="value" placeholder="请输入内容" />
+  </div>
+</template>
+
+<style>
+.ccui-input {
+  width: 300px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
+```
+
+:::
+
+## 不同尺寸
+
+:::demo
+
+```vue
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const value1 = ref('')
+    const value2 = ref('')
+    const value3 = ref('')
+    return {
+      value1,
+      value2,
+      value3
+    }
+  }
+})
+</script>
+
+<template>
+  <div>
+    <c-input v-model="value1" size="large" placeholder="大号输入框" />
+    <c-input v-model="value2" placeholder="默认输入框" />
+    <c-input v-model="value3" size="small" placeholder="小号输入框" />
+  </div>
+</template>
+
+<style>
+.ccui-input {
+  width: 300px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
+```
+
+:::
+
+## 禁用状态
+
+:::demo
+
+```vue
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {}
+  }
+})
+</script>
+
+<template>
+  <div>
+    <c-input placeholder="禁用状态" disabled />
+  </div>
+</template>
+
+<style>
+.ccui-input {
+  width: 300px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
+```
+
+:::
+
+## 只读状态
+
+:::demo
+
+```vue
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const value = ref('只读内容')
+    return {
+      value
+    }
+  }
+})
+</script>
+
+<template>
+  <div>
+    <c-input v-model="value" readonly placeholder="只读状态" />
+  </div>
+</template>
+
+<style>
+.ccui-input {
+  width: 300px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
+```
+
+:::
+
+## 清空功能
+
+:::demo
+
+```vue
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const value = ref('可以清空的内容')
+    return {
+      value
+    }
+  }
+})
+</script>
+
+<template>
+  <div>
+    <c-input v-model="value" clearable placeholder="可清空的输入框" />
+  </div>
+</template>
+
+<style>
+.ccui-input {
+  width: 300px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
+```
+
+:::
+
+## 密码输入
+
+:::demo
+
+```vue
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const value = ref('')
+    return {
+      value
+    }
+  }
+})
+</script>
+
+<template>
+  <div>
+    <c-input v-model="value" type="password" placeholder="密码输入框" />
+    <c-input v-model="value" type="password" show-password placeholder="可切换密码可见性" />
+  </div>
+</template>
+
+<style>
+.ccui-input {
+  width: 300px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
+```
+
+:::
+
+## 前置/后置内容
+
+:::demo
+
+```vue
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const value = ref('')
+    return {
+      value
+    }
+  }
+})
+</script>
+
+<template>
+  <div>
+    <c-input v-model="value" prepend="http://" placeholder="请输入网址" />
+    <c-input v-model="value" append=".com" placeholder="请输入域名" />
+  </div>
+</template>
+
+<style>
+.ccui-input {
+  width: 300px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
+```
+
+:::
+
+## 文本域
+
+:::demo
+
+```vue
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const value = ref('')
+    return {
+      value
+    }
+  }
+})
+</script>
+
+<template>
+  <div>
+    <c-input v-model="value" type="textarea" placeholder="多行文本输入框" />
+  </div>
+</template>
+
+<style>
+.ccui-input {
+  width: 300px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
+```
+
+:::
+
+## 数字输入
+
+:::demo
+
+```vue
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const value = ref('')
+    return {
+      value
+    }
+  }
+})
+</script>
+
+<template>
+  <div>
+    <c-input v-model="value" type="number" placeholder="数字输入框" />
+  </div>
+</template>
+
+<style>
+.ccui-input {
+  width: 300px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+</style>
+```
+
+:::
+
+## Input参数
+
+| 参数          | 类型                    | 默认    | 说明                     |
+| ------------- | ----------------------- | ------- | ------------------------ |
+| type          | [InputType](#inputtype) | text    | 输入框类型               |
+| size          | [InputSize](#inputsize) | default | 输入框尺寸               |
+| placeholder   | string                  | --      | 占位符                   |
+| disabled      | boolean                 | false   | 是否为禁用状态           |
+| readonly      | boolean                 | false   | 是否为只读状态           |
+| clearable     | boolean                 | false   | 是否显示清空图标         |
+| show-password | boolean                 | false   | 密码输入时是否可切换可见性 |
+| prepend       | string                  | --      | 前置内容文本             |
+| append        | string                  | --      | 后置内容文本             |
+| value         | string                  | --      | 绑定值                   |
+
+## Input类型定义
+
+### InputType
+
+```ts
+export type InputType = 'text' | 'password' | 'number' | 'textarea'
+```
+
+### InputSize
+
+```ts
+export type InputSize = 'large' | 'default' | 'small'
+```
+
+## Input事件
+
+| 事件名   | 参数    | 说明                             |
+| -------- | ------- | -------------------------------- |
+| update   | value   | 绑定值改变时触发（v-model 事件） |
+| input    | value   | 输入框值改变时触发               |
+| change   | value   | 输入框值改变并失去焦点时触发     |
+| focus    | event   | 输入框获得焦点时触发             |
+| blur     | event   | 输入框失去焦点时触发             |
+| clear    | --      | 点击清空图标时触发               |
+
+## Input插槽
+
+| 插槽名  | 说明     |
+| ------- | -------- |
+| prepend | 前置内容 |
+| append  | 后置内容 |
+| prefix  | 前缀图标 |
+| suffix  | 后缀图标 |

From bea6c41a2d77b104eb6b933d1da477dda6fe4fdc Mon Sep 17 00:00:00 2001
From: vaebe <18137693952@163.com>
Date: Mon, 17 Nov 2025 21:36:58 +0800
Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ccui/ui/input/src/input.scss   | 199 ++++++++++--------------
 packages/ccui/ui/input/src/input.tsx    |   8 +-
 packages/docs/components/input/index.md |  38 ++---
 packages/theme/themes/light.ts          |   4 +
 4 files changed, 110 insertions(+), 139 deletions(-)

diff --git a/packages/ccui/ui/input/src/input.scss b/packages/ccui/ui/input/src/input.scss
index d97e4644..616a720f 100644
--- a/packages/ccui/ui/input/src/input.scss
+++ b/packages/ccui/ui/input/src/input.scss
@@ -1,32 +1,29 @@
 @use '../../style-var/index.scss' as *;
 
 .#{$cls-prefix}-input {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-  vertical-align: middle;
-  font-size: 14px;
-  line-height: $ccui-line-height-base;
-  border-radius: $ccui-border-radius;
-  transition: $ccui-animation-duration-base;
-  background-color: $ccui-base-bg;
-  border: 1px solid $ccui-line;
-  color: $ccui-text;
-
-  &:hover {
-    border-color: $ccui-brand-hover;
-  }
-
   &__wrapper {
+    position: relative;
     display: inline-flex;
     align-items: center;
     width: 100%;
-    border-radius: $ccui-border-radius;
-    transition: $ccui-animation-duration-base;
+    box-sizing: border-box;
     background-color: $ccui-base-bg;
     border: 1px solid $ccui-line;
+    border-radius: $ccui-border-radius;
+    color: $ccui-text;
+    font-size: 14px;
+    transition:
+      border-color $ccui-animation-duration-base,
+      box-shadow $ccui-animation-duration-base;
+
+    &:hover {
+      border-color: $ccui-brand-hover;
+    }
+
+    &:focus-within {
+      border-color: $ccui-brand;
+      box-shadow: 0 0 0 2px rgba($ccui-brand, 0.2);
+    }
 
     &--disabled {
       background-color: $ccui-disabled-bg;
@@ -39,64 +36,74 @@
       }
     }
 
-    &--focus {
-      border-color: $ccui-brand;
-      box-shadow: 0 0 0 2px rgba($ccui-brand, 0.2);
-    }
-
-    &--hover {
-      border-color: $ccui-brand-hover;
-    }
-
     &--large {
-      font-size: 16px;
-      line-height: 1.5;
-      padding: 12px;
+      height: $ccui-size-lg;
+      font-size: $ccui-font-size-lg;
+
+      &.#{$cls-prefix}-input--prefix {
+        input,
+        textarea {
+          padding-left: 24px;
+        }
+      }
+
+      &.#{$cls-prefix}-input--suffix,
+      &.#{$cls-prefix}-input--clearable {
+        input,
+        textarea {
+          padding-right: 24px;
+        }
+      }
     }
 
     &--default {
-      font-size: 14px;
-      line-height: 1.5;
-      padding: 8px;
-    }
+      height: $ccui-size-md;
+      font-size: $ccui-font-size-md;
+
+      &.#{$cls-prefix}-input--prefix {
+        input,
+        textarea {
+          padding-left: 24px;
+        }
+      }
 
-    &--small {
-      font-size: 12px;
-      line-height: 1.5;
-      padding: 4px;
+      &.#{$cls-prefix}-input--suffix,
+      &.#{$cls-prefix}-input--clearable {
+        input,
+        textarea {
+          padding-right: 24px;
+        }
+      }
     }
-  }
 
-  &--disabled {
-    background-color: $ccui-disabled-bg;
-    border-color: $ccui-disabled-line;
-    color: $ccui-disabled-text;
-    cursor: not-allowed;
+    &--small {
+      height: $ccui-size-sm;
+      font-size: $ccui-font-size-sm;
+
+      &.#{$cls-prefix}-input--prefix {
+        input,
+        textarea {
+          padding-left: 20px;
+        }
+      }
 
-    &:hover {
-      border-color: $ccui-disabled-line;
+      &.#{$cls-prefix}-input--suffix,
+      &.#{$cls-prefix}-input--clearable {
+        input,
+        textarea {
+          padding-right: 20px;
+        }
+      }
     }
   }
 
-  &--readonly {
-    cursor: default;
-  }
-
-  &--clearable,
-  &--suffix {
-    padding-right: 30px;
-  }
-
-  &--prefix {
-    padding-left: 30px;
-  }
-
   &__main {
     position: relative;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     flex: 1;
     width: 100%;
+    height: 100%;
   }
 
   &__prepend,
@@ -107,11 +114,8 @@
     white-space: nowrap;
     background-color: $ccui-area;
     border: 1px solid $ccui-line;
-    border-radius: $ccui-border-radius;
     color: $ccui-text;
-    font-size: 14px;
-    line-height: 1.5;
-    padding: 0 8px;
+    font-size: inherit;
   }
 
   &__prepend {
@@ -136,14 +140,15 @@
     justify-content: center;
     color: $ccui-placeholder;
     pointer-events: none;
+    z-index: 1;
   }
 
   &__prefix {
-    left: 10px;
+    left: 8px;
   }
 
   &__suffix {
-    right: 10px;
+    right: 8px;
   }
 
   &__clear,
@@ -152,6 +157,7 @@
     cursor: pointer;
     pointer-events: auto;
     color: $ccui-placeholder;
+    transition: color $ccui-animation-duration-base;
 
     &:hover {
       color: $ccui-text;
@@ -160,26 +166,23 @@
 
   input,
   textarea {
-    display: inline-block;
     width: 100%;
     height: 100%;
-    box-sizing: border-box;
-    background: none;
+    background: transparent;
     border: none;
     outline: none;
     color: inherit;
     font-size: inherit;
-    line-height: inherit;
-    padding: 0;
-    margin: 0;
-    border-radius: $ccui-border-radius;
+    font-family: inherit;
+    position: relative;
+    z-index: 0;
+    box-sizing: border-box;
 
     &::placeholder {
       color: $ccui-placeholder;
     }
 
     &:disabled {
-      background: none;
       cursor: not-allowed;
       color: $ccui-disabled-text;
     }
@@ -187,48 +190,6 @@
 
   textarea {
     resize: vertical;
-    padding: 8px;
-  }
-
-  &--large {
-    font-size: 16px;
-    line-height: 1.5;
-
-    input,
-    textarea {
-      padding: 12px;
-    }
-
-    textarea {
-      padding: 12px;
-    }
-  }
-
-  &--default {
-    font-size: 14px;
-    line-height: 1.5;
-
-    input,
-    textarea {
-      padding: 8px;
-    }
-
-    textarea {
-      padding: 8px;
-    }
-  }
-
-  &--small {
-    font-size: 12px;
-    line-height: 1.5;
-
-    input,
-    textarea {
-      padding: 4px;
-    }
-
-    textarea {
-      padding: 4px;
-    }
+    min-height: $ccui-size-lg;
   }
 }
diff --git a/packages/ccui/ui/input/src/input.tsx b/packages/ccui/ui/input/src/input.tsx
index 966ad45b..31b324d3 100644
--- a/packages/ccui/ui/input/src/input.tsx
+++ b/packages/ccui/ui/input/src/input.tsx
@@ -36,9 +36,13 @@ export default defineComponent({
       [ns.m('disabled')]: props.disabled,
       [ns.m('readonly')]: props.readonly,
       [ns.m('clearable')]: props.clearable,
-      [ns.m('suffix')]: props.clearable || showPasswordVisible.value,
+      [ns.m('suffix')]: props.clearable || showPasswordVisible.value || slots.suffix,
+      [ns.m('prefix')]: slots.prefix,
     }))
 
+    // 是否聚焦
+    const isFocused = ref(false)
+
     // 包装器类名
     const wrapperClass = computed(() => ({
       [ns.e('wrapper')]: true,
@@ -67,11 +71,13 @@ export default defineComponent({
 
     // 处理焦点事件
     const handleFocus = (e: FocusEvent) => {
+      isFocused.value = true
       emit('focus', e)
     }
 
     // 处理失去焦点事件
     const handleBlur = (e: FocusEvent) => {
+      isFocused.value = false
       emit('blur', e)
     }
 
diff --git a/packages/docs/components/input/index.md b/packages/docs/components/input/index.md
index 8935577c..046273b1 100644
--- a/packages/docs/components/input/index.md
+++ b/packages/docs/components/input/index.md
@@ -330,18 +330,18 @@ export default defineComponent({
 
 ## Input参数
 
-| 参数          | 类型                    | 默认    | 说明                     |
-| ------------- | ----------------------- | ------- | ------------------------ |
-| type          | [InputType](#inputtype) | text    | 输入框类型               |
-| size          | [InputSize](#inputsize) | default | 输入框尺寸               |
-| placeholder   | string                  | --      | 占位符                   |
-| disabled      | boolean                 | false   | 是否为禁用状态           |
-| readonly      | boolean                 | false   | 是否为只读状态           |
-| clearable     | boolean                 | false   | 是否显示清空图标         |
+| 参数          | 类型                    | 默认    | 说明                       |
+| ------------- | ----------------------- | ------- | -------------------------- |
+| type          | [InputType](#inputtype) | text    | 输入框类型                 |
+| size          | [InputSize](#inputsize) | default | 输入框尺寸                 |
+| placeholder   | string                  | --      | 占位符                     |
+| disabled      | boolean                 | false   | 是否为禁用状态             |
+| readonly      | boolean                 | false   | 是否为只读状态             |
+| clearable     | boolean                 | false   | 是否显示清空图标           |
 | show-password | boolean                 | false   | 密码输入时是否可切换可见性 |
-| prepend       | string                  | --      | 前置内容文本             |
-| append        | string                  | --      | 后置内容文本             |
-| value         | string                  | --      | 绑定值                   |
+| prepend       | string                  | --      | 前置内容文本               |
+| append        | string                  | --      | 后置内容文本               |
+| value         | string                  | --      | 绑定值                     |
 
 ## Input类型定义
 
@@ -359,14 +359,14 @@ export type InputSize = 'large' | 'default' | 'small'
 
 ## Input事件
 
-| 事件名   | 参数    | 说明                             |
-| -------- | ------- | -------------------------------- |
-| update   | value   | 绑定值改变时触发（v-model 事件） |
-| input    | value   | 输入框值改变时触发               |
-| change   | value   | 输入框值改变并失去焦点时触发     |
-| focus    | event   | 输入框获得焦点时触发             |
-| blur     | event   | 输入框失去焦点时触发             |
-| clear    | --      | 点击清空图标时触发               |
+| 事件名 | 参数  | 说明                             |
+| ------ | ----- | -------------------------------- |
+| update | value | 绑定值改变时触发（v-model 事件） |
+| input  | value | 输入框值改变时触发               |
+| change | value | 输入框值改变并失去焦点时触发     |
+| focus  | event | 输入框获得焦点时触发             |
+| blur   | event | 输入框失去焦点时触发             |
+| clear  | --    | 点击清空图标时触发               |
 
 ## Input插槽
 
diff --git a/packages/theme/themes/light.ts b/packages/theme/themes/light.ts
index f4fffd94..227f8070 100644
--- a/packages/theme/themes/light.ts
+++ b/packages/theme/themes/light.ts
@@ -133,4 +133,8 @@ export default {
   'z-index-modal': '1050',
   'z-index-drawer': '1040',
   'z-index-framework': '1000',
+  // 组件的size
+  'size-sm': '24px',
+  'size-md': '32px',
+  'size-lg': '40px',
 }

From cb2a1d9ef4bc1edd55eb53ca5beff7c14cd12dd3 Mon Sep 17 00:00:00 2001
From: vae <18137693952@163.com>
Date: Tue, 18 Nov 2025 09:16:36 +0800
Subject: [PATCH 03/10] =?UTF-8?q?fix:=20=E5=8E=BB=E5=A4=84=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E7=9A=84=E5=A4=9A=E4=BD=99=20style=20=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/components/input/index.md | 45 -------------------------
 1 file changed, 45 deletions(-)

diff --git a/packages/docs/components/input/index.md b/packages/docs/components/input/index.md
index 046273b1..a1170136 100644
--- a/packages/docs/components/input/index.md
+++ b/packages/docs/components/input/index.md
@@ -33,11 +33,6 @@ export default defineComponent({
 </template>
 
 <style>
-.ccui-input {
-  width: 300px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
 </style>
 ```
 
@@ -74,11 +69,6 @@ export default defineComponent({
 </template>
 
 <style>
-.ccui-input {
-  width: 300px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
 </style>
 ```
 
@@ -106,11 +96,6 @@ export default defineComponent({
 </template>
 
 <style>
-.ccui-input {
-  width: 300px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
 </style>
 ```
 
@@ -141,11 +126,6 @@ export default defineComponent({
 </template>
 
 <style>
-.ccui-input {
-  width: 300px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
 </style>
 ```
 
@@ -176,11 +156,6 @@ export default defineComponent({
 </template>
 
 <style>
-.ccui-input {
-  width: 300px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
 </style>
 ```
 
@@ -212,11 +187,6 @@ export default defineComponent({
 </template>
 
 <style>
-.ccui-input {
-  width: 300px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
 </style>
 ```
 
@@ -248,11 +218,6 @@ export default defineComponent({
 </template>
 
 <style>
-.ccui-input {
-  width: 300px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
 </style>
 ```
 
@@ -283,11 +248,6 @@ export default defineComponent({
 </template>
 
 <style>
-.ccui-input {
-  width: 300px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
 </style>
 ```
 
@@ -318,11 +278,6 @@ export default defineComponent({
 </template>
 
 <style>
-.ccui-input {
-  width: 300px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
 </style>
 ```
 

From 3ea03efa45b2d991340ac0acab78c90dee3cfc71 Mon Sep 17 00:00:00 2001
From: vae <18137693952@163.com>
Date: Tue, 18 Nov 2025 09:28:20 +0800
Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ccui/ui/input/src/input.scss | 67 +++++++++++++--------------
 packages/ccui/ui/input/src/input.tsx  |  1 +
 packages/theme/themes/light.ts        |  2 +-
 3 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/packages/ccui/ui/input/src/input.scss b/packages/ccui/ui/input/src/input.scss
index 616a720f..4e9adca7 100644
--- a/packages/ccui/ui/input/src/input.scss
+++ b/packages/ccui/ui/input/src/input.scss
@@ -12,6 +12,7 @@
     border-radius: $ccui-border-radius;
     color: $ccui-text;
     font-size: 14px;
+    padding: 0 8px;
     transition:
       border-color $ccui-animation-duration-base,
       box-shadow $ccui-animation-duration-base;
@@ -41,16 +42,14 @@
       font-size: $ccui-font-size-lg;
 
       &.#{$cls-prefix}-input--prefix {
-        input,
-        textarea {
+        .#{$cls-prefix}-input__inner {
           padding-left: 24px;
         }
       }
 
       &.#{$cls-prefix}-input--suffix,
       &.#{$cls-prefix}-input--clearable {
-        input,
-        textarea {
+        .#{$cls-prefix}-input__inner {
           padding-right: 24px;
         }
       }
@@ -61,16 +60,14 @@
       font-size: $ccui-font-size-md;
 
       &.#{$cls-prefix}-input--prefix {
-        input,
-        textarea {
+        .#{$cls-prefix}-input__inner {
           padding-left: 24px;
         }
       }
 
       &.#{$cls-prefix}-input--suffix,
       &.#{$cls-prefix}-input--clearable {
-        input,
-        textarea {
+        .#{$cls-prefix}-input__inner {
           padding-right: 24px;
         }
       }
@@ -81,16 +78,14 @@
       font-size: $ccui-font-size-sm;
 
       &.#{$cls-prefix}-input--prefix {
-        input,
-        textarea {
+        .#{$cls-prefix}-input__inner {
           padding-left: 20px;
         }
       }
 
       &.#{$cls-prefix}-input--suffix,
       &.#{$cls-prefix}-input--clearable {
-        input,
-        textarea {
+        .#{$cls-prefix}-input__inner {
           padding-right: 20px;
         }
       }
@@ -106,6 +101,30 @@
     height: 100%;
   }
 
+  &__inner {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    position: relative;
+    z-index: 0;
+    box-sizing: border-box;
+    padding: 4px 0;
+
+    &::placeholder {
+      color: $ccui-placeholder;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      color: $ccui-disabled-text;
+    }
+  }
+
   &__prepend,
   &__append {
     display: inline-flex;
@@ -164,30 +183,6 @@
     }
   }
 
-  input,
-  textarea {
-    width: 100%;
-    height: 100%;
-    background: transparent;
-    border: none;
-    outline: none;
-    color: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    position: relative;
-    z-index: 0;
-    box-sizing: border-box;
-
-    &::placeholder {
-      color: $ccui-placeholder;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      color: $ccui-disabled-text;
-    }
-  }
-
   textarea {
     resize: vertical;
     min-height: $ccui-size-lg;
diff --git a/packages/ccui/ui/input/src/input.tsx b/packages/ccui/ui/input/src/input.tsx
index 31b324d3..4665f11c 100644
--- a/packages/ccui/ui/input/src/input.tsx
+++ b/packages/ccui/ui/input/src/input.tsx
@@ -32,6 +32,7 @@ export default defineComponent({
     // 输入框类名
     const inputClass = computed(() => ({
       [ns.b()]: true,
+      [ns.e('inner')]: true,
       [ns.m(props.size)]: !!props.size,
       [ns.m('disabled')]: props.disabled,
       [ns.m('readonly')]: props.readonly,
diff --git a/packages/theme/themes/light.ts b/packages/theme/themes/light.ts
index 227f8070..0f64cae1 100644
--- a/packages/theme/themes/light.ts
+++ b/packages/theme/themes/light.ts
@@ -106,7 +106,7 @@ export default {
   'font-content-weight': 'normal',
   'line-height-base': '1.5',
   // 圆角
-  'border-radius': '2px',
+  'border-radius': '4px',
   'border-radius-feedback': '4px',
   'border-radius-card': '6px',
   // 阴影

From ec8d7e20a421515c69e366c09a74f04fad6a1bb0 Mon Sep 17 00:00:00 2001
From: vae <18137693952@163.com>
Date: Tue, 18 Nov 2025 10:30:57 +0800
Subject: [PATCH 05/10] =?UTF-8?q?style:=20=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ccui/ui/input/src/input.scss   | 186 ++++++++++-----------
 packages/ccui/ui/input/src/input.tsx    | 208 ++++++++++++------------
 packages/docs/components/input/index.md |   1 +
 3 files changed, 198 insertions(+), 197 deletions(-)

diff --git a/packages/ccui/ui/input/src/input.scss b/packages/ccui/ui/input/src/input.scss
index 4e9adca7..dc2fef63 100644
--- a/packages/ccui/ui/input/src/input.scss
+++ b/packages/ccui/ui/input/src/input.scss
@@ -1,104 +1,122 @@
 @use '../../style-var/index.scss' as *;
 
 .#{$cls-prefix}-input {
-  &__wrapper {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    width: 100%;
-    box-sizing: border-box;
-    background-color: $ccui-base-bg;
-    border: 1px solid $ccui-line;
-    border-radius: $ccui-border-radius;
-    color: $ccui-text;
-    font-size: 14px;
-    padding: 0 8px;
-    transition:
-      border-color $ccui-animation-duration-base,
-      box-shadow $ccui-animation-duration-base;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  background-color: $ccui-base-bg;
+  border: 1px solid $ccui-line;
+  border-radius: $ccui-border-radius;
+  color: $ccui-text;
+  font-size: 14px;
+  transition:
+    border-color $ccui-animation-duration-base,
+    box-shadow $ccui-animation-duration-base;
+
+  &:hover {
+    border-color: $ccui-brand-hover;
+  }
 
-    &:hover {
-      border-color: $ccui-brand-hover;
-    }
+  &:focus-within {
+    border-color: $ccui-brand;
+    box-shadow: 0 0 0 2px rgba($ccui-brand, 0.2);
+  }
 
-    &:focus-within {
-      border-color: $ccui-brand;
-      box-shadow: 0 0 0 2px rgba($ccui-brand, 0.2);
-    }
+  &--disabled {
+    background-color: $ccui-disabled-bg;
+    border-color: $ccui-disabled-line;
+    color: $ccui-disabled-text;
+    cursor: not-allowed;
 
-    &--disabled {
-      background-color: $ccui-disabled-bg;
+    &:hover {
       border-color: $ccui-disabled-line;
-      color: $ccui-disabled-text;
-      cursor: not-allowed;
-
-      &:hover {
-        border-color: $ccui-disabled-line;
-      }
     }
+  }
 
-    &--large {
-      height: $ccui-size-lg;
-      font-size: $ccui-font-size-lg;
+  &--large {
+    height: $ccui-size-lg;
+    font-size: $ccui-font-size-lg;
 
-      &.#{$cls-prefix}-input--prefix {
-        .#{$cls-prefix}-input__inner {
-          padding-left: 24px;
-        }
+    &.#{$cls-prefix}-input--prefix {
+      .#{$cls-prefix}-input__inner {
+        padding-left: 24px;
       }
+    }
 
-      &.#{$cls-prefix}-input--suffix,
-      &.#{$cls-prefix}-input--clearable {
-        .#{$cls-prefix}-input__inner {
-          padding-right: 24px;
-        }
+    &.#{$cls-prefix}-input--suffix,
+    &.#{$cls-prefix}-input--clearable {
+      .#{$cls-prefix}-input__inner {
+        padding-right: 24px;
       }
     }
+  }
 
-    &--default {
-      height: $ccui-size-md;
-      font-size: $ccui-font-size-md;
+  &--default {
+    height: $ccui-size-md;
+    font-size: $ccui-font-size-md;
 
-      &.#{$cls-prefix}-input--prefix {
-        .#{$cls-prefix}-input__inner {
-          padding-left: 24px;
-        }
+    &.#{$cls-prefix}-input--prefix {
+      .#{$cls-prefix}-input__inner {
+        padding-left: 24px;
       }
+    }
 
-      &.#{$cls-prefix}-input--suffix,
-      &.#{$cls-prefix}-input--clearable {
-        .#{$cls-prefix}-input__inner {
-          padding-right: 24px;
-        }
+    &.#{$cls-prefix}-input--suffix,
+    &.#{$cls-prefix}-input--clearable {
+      .#{$cls-prefix}-input__inner {
+        padding-right: 24px;
       }
     }
+  }
 
-    &--small {
-      height: $ccui-size-sm;
-      font-size: $ccui-font-size-sm;
+  &--small {
+    height: $ccui-size-sm;
+    font-size: $ccui-font-size-sm;
 
-      &.#{$cls-prefix}-input--prefix {
-        .#{$cls-prefix}-input__inner {
-          padding-left: 20px;
-        }
+    &.#{$cls-prefix}-input--prefix {
+      .#{$cls-prefix}-input__inner {
+        padding-left: 20px;
       }
+    }
 
-      &.#{$cls-prefix}-input--suffix,
-      &.#{$cls-prefix}-input--clearable {
-        .#{$cls-prefix}-input__inner {
-          padding-right: 20px;
-        }
+    &.#{$cls-prefix}-input--suffix,
+    &.#{$cls-prefix}-input--clearable {
+      .#{$cls-prefix}-input__inner {
+        padding-right: 20px;
       }
     }
   }
 
-  &__main {
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex: 1;
+  &__wrapper {
     width: 100%;
-    height: 100%;
+    padding: 0 8px;
+  }
+
+  &__prepend,
+  &__append {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    background-color: $ccui-area;
+    border: 1px solid $ccui-line;
+    border-color: inherit;
+    color: $ccui-text;
+    font-size: inherit;
+    line-height: 1.5;
+  }
+
+  &__prepend {
+    border-right: 0;
+    border-top-left-radius: $ccui-border-radius;
+    border-bottom-left-radius: $ccui-border-radius;
+  }
+
+  &__append {
+    border-left: 0;
+    border-top-right-radius: $ccui-border-radius;
+    border-bottom-right-radius: $ccui-border-radius;
   }
 
   &__inner {
@@ -125,30 +143,6 @@
     }
   }
 
-  &__prepend,
-  &__append {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    background-color: $ccui-area;
-    border: 1px solid $ccui-line;
-    color: $ccui-text;
-    font-size: inherit;
-  }
-
-  &__prepend {
-    border-right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  &__append {
-    border-left: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
   &__prefix,
   &__suffix {
     position: absolute;
diff --git a/packages/ccui/ui/input/src/input.tsx b/packages/ccui/ui/input/src/input.tsx
index 4665f11c..98998ec8 100644
--- a/packages/ccui/ui/input/src/input.tsx
+++ b/packages/ccui/ui/input/src/input.tsx
@@ -11,17 +11,13 @@ export default defineComponent({
   setup(props: InputProps, { emit, slots }) {
     const ns = useNamespace('input')
     const inputRef = ref<HTMLInputElement | HTMLTextAreaElement | null>(null)
-
-    // 输入框的值
     const inputValue = ref(props.value)
+    const isFocused = ref(false)
+    const isPasswordVisible = ref(false)
 
-    // 是否显示密码切换图标
+    // 计算属性
     const showPasswordVisible = computed(() => props.type === 'password' && props.showPassword)
 
-    // 密码是否可见
-    const isPasswordVisible = ref(false)
-
-    // 当前输入框类型
     const currentType = computed(() => {
       if (props.type === 'password' && showPasswordVisible.value && isPasswordVisible.value) {
         return 'text'
@@ -29,9 +25,25 @@ export default defineComponent({
       return props.type
     })
 
-    // 输入框类名
+    // 为测试兼容性，保持一致的类名结构
+    const getBaseClass = computed(() => {
+      return {
+        [ns.b()]: true, // 基础类
+        [ns.m(props.size)]: !!props.size, // 尺寸类
+        [ns.m('disabled')]: props.disabled, // 禁用类
+        [ns.m('readonly')]: props.readonly, // 只读类
+      }
+    })
+
+    const getWrapperClass = computed(() => {
+      return {
+        [ns.e('wrapper')]: true, // wrapper类
+        [ns.em('wrapper', props.size)]: !!props.size, // wrapper尺寸类
+        [ns.em('wrapper', 'disabled')]: props.disabled, // wrapper禁用类
+      }
+    })
+
     const inputClass = computed(() => ({
-      [ns.b()]: true,
       [ns.e('inner')]: true,
       [ns.m(props.size)]: !!props.size,
       [ns.m('disabled')]: props.disabled,
@@ -41,54 +53,38 @@ export default defineComponent({
       [ns.m('prefix')]: slots.prefix,
     }))
 
-    // 是否聚焦
-    const isFocused = ref(false)
-
-    // 包装器类名
-    const wrapperClass = computed(() => ({
-      [ns.e('wrapper')]: true,
-      [ns.em('wrapper', props.size)]: !!props.size,
-      [ns.em('wrapper', 'disabled')]: props.disabled,
-    }))
-
-    // 更新输入框的值
+    // 事件处理
     const updateValue = (value: string) => {
       inputValue.value = value
       emit('update:value', value)
       emit('input', value)
     }
 
-    // 处理输入事件
     const handleInput = (e: Event) => {
       const target = e.target as HTMLInputElement
       updateValue(target.value)
     }
 
-    // 处理变化事件
     const handleChange = (e: Event) => {
       const target = e.target as HTMLInputElement
       emit('change', target.value)
     }
 
-    // 处理焦点事件
     const handleFocus = (e: FocusEvent) => {
       isFocused.value = true
       emit('focus', e)
     }
 
-    // 处理失去焦点事件
     const handleBlur = (e: FocusEvent) => {
       isFocused.value = false
       emit('blur', e)
     }
 
-    // 清空输入框
     const clearInput = () => {
       updateValue('')
       emit('clear')
     }
 
-    // 切换密码可见性
     const togglePasswordVisible = () => {
       isPasswordVisible.value = !isPasswordVisible.value
     }
@@ -100,93 +96,103 @@ export default defineComponent({
       }
     })
 
+    // 渲染函数
+    const renderPrepend = () => {
+      if (!props.prepend && !slots.prepend)
+        return null
+      return (
+        <div class={ns.e('prepend')}>
+          {slots.prepend ? slots.prepend() : <span>{props.prepend}</span>}
+        </div>
+      )
+    }
+
+    const renderAppend = () => {
+      if (!props.append && !slots.append)
+        return null
+      return (
+        <div class={ns.e('append')}>
+          {slots.append ? slots.append() : <span>{props.append}</span>}
+        </div>
+      )
+    }
+
+    const renderSuffixIcons = () => {
+      if (!props.clearable && !showPasswordVisible.value && !slots.suffix)
+        return null
+      return (
+        <div class={ns.e('suffix')}>
+          {props.clearable && inputValue.value && (
+            <i class={ns.e('clear')} onClick={clearInput}></i>
+          )}
+          {showPasswordVisible.value && (
+            <i
+              class={isPasswordVisible.value ? ns.e('password-visible') : ns.e('password-hidden')}
+              onClick={togglePasswordVisible}
+            >
+            </i>
+          )}
+          {slots.suffix && slots.suffix()}
+        </div>
+      )
+    }
+
+    const getInputAttrs = () => ({
+      ref: inputRef,
+      class: inputClass.value,
+      placeholder: props.placeholder,
+      disabled: props.disabled,
+      readonly: props.readonly,
+      value: inputValue.value,
+      onInput: handleInput,
+      onChange: handleChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+    })
+
+    // 渲染主体
     return () => {
-      // 前置内容
-      const prependContent = props.prepend || slots.prepend
-        ? (
-            <div class={ns.e('prepend')}>
-              {slots.prepend ? slots.prepend() : <span>{props.prepend}</span>}
-            </div>
-          )
-        : null
-
-      // 后置内容
-      const appendContent = props.append || slots.append
-        ? (
-            <div class={ns.e('append')}>
-              {slots.append ? slots.append() : <span>{props.append}</span>}
-            </div>
-          )
-        : null
-
-      // 后缀图标内容
-      const suffixIconContent = props.clearable || showPasswordVisible.value || slots.suffix
-        ? (
-            <div class={ns.e('suffix')}>
-              {props.clearable && inputValue.value && (
-                <i class={ns.e('clear')} onClick={clearInput}></i>
-              )}
-              {showPasswordVisible.value && (
-                <i
-                  class={isPasswordVisible.value ? ns.e('password-visible') : ns.e('password-hidden')}
-                  onClick={togglePasswordVisible}
-                >
-                </i>
-              )}
-              {slots.suffix && slots.suffix()}
-            </div>
-          )
-        : null
-
-      // 输入框属性
-      const baseInputAttrs = {
-        ref: inputRef,
-        class: inputClass.value,
-        placeholder: props.placeholder,
-        disabled: props.disabled,
-        readonly: props.readonly,
-        value: inputValue.value,
-        onInput: handleInput,
-        onChange: handleChange,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-      }
+      const prependContent = renderPrepend()
+      const appendContent = renderAppend()
 
-      // 输入框元素
       const inputElement = props.type === 'textarea'
-        ? (
-            <textarea {...baseInputAttrs} />
-          )
-        : (
-            <input
-              {...baseInputAttrs}
-              type={currentType.value}
-            />
-          )
-
-      // 主体内容
+        ? <textarea {...getInputAttrs()} />
+        : <input {...getInputAttrs()} type={currentType.value} />
+
       const mainContent = (
         <>
           {slots.prefix && <div class={ns.e('prefix')}>{slots.prefix()}</div>}
           {inputElement}
-          {suffixIconContent}
+          {renderSuffixIcons()}
         </>
       )
 
-      // 如果有前置或后置内容，则需要包装一层
-      return prependContent || appendContent
-        ? (
-            <div class={wrapperClass.value}>
-              {prependContent}
-              <div class={ns.e('main')}>{mainContent}</div>
-              {appendContent}
-            </div>
-          )
-        : (
-            <div class={wrapperClass.value}>
+      // 统一结构：始终确保基础类和wrapper类都正确应用
+      if (prependContent || appendContent) {
+        // 有 prepend 或 append 时，基础类在顶层容器，wrapper类在内部容器
+        return (
+          <div class={getBaseClass.value}>
+            {prependContent}
+            <div class={getWrapperClass.value}>
               {mainContent}
             </div>
-          )
+            {appendContent}
+          </div>
+        )
+      }
+      else {
+        // 没有 prepend 或 append 时，将基础类和wrapper类合并到同一个元素
+        const combinedClass = {
+          ...getBaseClass.value,
+          ...getWrapperClass.value,
+        }
+
+        return (
+          <div class={combinedClass}>
+            {mainContent}
+          </div>
+        )
+      }
     }
   },
 })
diff --git a/packages/docs/components/input/index.md b/packages/docs/components/input/index.md
index a1170136..475f423a 100644
--- a/packages/docs/components/input/index.md
+++ b/packages/docs/components/input/index.md
@@ -214,6 +214,7 @@ export default defineComponent({
   <div>
     <c-input v-model="value" prepend="http://" placeholder="请输入网址" />
     <c-input v-model="value" append=".com" placeholder="请输入域名" />
+    <c-input v-model="value" prepend="https://" append=".org" placeholder="请输入网址" />
   </div>
 </template>
 

From 6f540c4b667925391adeaf9e2a6b8c70388b28a5 Mon Sep 17 00:00:00 2001
From: vae <18137693952@163.com>
Date: Tue, 18 Nov 2025 10:38:45 +0800
Subject: [PATCH 06/10] =?UTF-8?q?style:=20=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ccui/ui/input/src/input.scss | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/packages/ccui/ui/input/src/input.scss b/packages/ccui/ui/input/src/input.scss
index dc2fef63..02432e26 100644
--- a/packages/ccui/ui/input/src/input.scss
+++ b/packages/ccui/ui/input/src/input.scss
@@ -95,28 +95,25 @@
 
   &__prepend,
   &__append {
-    display: inline-flex;
+    display: flex;
     align-items: center;
-    justify-content: center;
     white-space: nowrap;
     background-color: $ccui-area;
-    border: 1px solid $ccui-line;
-    border-color: inherit;
     color: $ccui-text;
     font-size: inherit;
-    line-height: 1.5;
+    line-height: 1;
+    height: 100%;
+    padding: 0 10px;
   }
 
   &__prepend {
-    border-right: 0;
-    border-top-left-radius: $ccui-border-radius;
-    border-bottom-left-radius: $ccui-border-radius;
+    border-radius: $ccui-border-radius 0 0 $ccui-border-radius;
+    border-right: 1px solid $ccui-line;
   }
 
   &__append {
-    border-left: 0;
-    border-top-right-radius: $ccui-border-radius;
-    border-bottom-right-radius: $ccui-border-radius;
+    border-radius: 0 $ccui-border-radius $ccui-border-radius 0;
+    border-left: 1px solid $ccui-line;
   }
 
   &__inner {

From c939d5bfc74fa2a1ec4c77e9a909d3d0d09e4883 Mon Sep 17 00:00:00 2001
From: vae <18137693952@163.com>
Date: Tue, 18 Nov 2025 10:42:22 +0800
Subject: [PATCH 07/10] =?UTF-8?q?feat:=20=E9=80=BB=E8=BE=91=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ccui/ui/input/src/input-types.ts |  2 +-
 packages/ccui/ui/input/src/input.scss     |  5 --
 packages/ccui/ui/input/src/input.tsx      |  6 +--
 packages/ccui/ui/input/test/input.test.ts |  6 ---
 packages/docs/components/input/index.md   | 60 +----------------------
 5 files changed, 4 insertions(+), 75 deletions(-)

diff --git a/packages/ccui/ui/input/src/input-types.ts b/packages/ccui/ui/input/src/input-types.ts
index 427b3d97..f0757353 100644
--- a/packages/ccui/ui/input/src/input-types.ts
+++ b/packages/ccui/ui/input/src/input-types.ts
@@ -1,6 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue'
 
-export type InputType = 'text' | 'password' | 'number' | 'textarea'
+export type InputType = 'text' | 'password'
 export type InputSize = 'large' | 'default' | 'small'
 
 export const inputProps = {
diff --git a/packages/ccui/ui/input/src/input.scss b/packages/ccui/ui/input/src/input.scss
index 02432e26..5904842d 100644
--- a/packages/ccui/ui/input/src/input.scss
+++ b/packages/ccui/ui/input/src/input.scss
@@ -173,9 +173,4 @@
       color: $ccui-text;
     }
   }
-
-  textarea {
-    resize: vertical;
-    min-height: $ccui-size-lg;
-  }
 }
diff --git a/packages/ccui/ui/input/src/input.tsx b/packages/ccui/ui/input/src/input.tsx
index 98998ec8..eb05b9e1 100644
--- a/packages/ccui/ui/input/src/input.tsx
+++ b/packages/ccui/ui/input/src/input.tsx
@@ -10,7 +10,7 @@ export default defineComponent({
   emits: ['update:value', 'input', 'change', 'focus', 'blur', 'clear'],
   setup(props: InputProps, { emit, slots }) {
     const ns = useNamespace('input')
-    const inputRef = ref<HTMLInputElement | HTMLTextAreaElement | null>(null)
+    const inputRef = ref<HTMLInputElement | null>(null)
     const inputValue = ref(props.value)
     const isFocused = ref(false)
     const isPasswordVisible = ref(false)
@@ -155,9 +155,7 @@ export default defineComponent({
       const prependContent = renderPrepend()
       const appendContent = renderAppend()
 
-      const inputElement = props.type === 'textarea'
-        ? <textarea {...getInputAttrs()} />
-        : <input {...getInputAttrs()} type={currentType.value} />
+      const inputElement = <input {...getInputAttrs()} type={currentType.value} />
 
       const mainContent = (
         <>
diff --git a/packages/ccui/ui/input/test/input.test.ts b/packages/ccui/ui/input/test/input.test.ts
index 8830c22d..a3bc7fa8 100644
--- a/packages/ccui/ui/input/test/input.test.ts
+++ b/packages/ccui/ui/input/test/input.test.ts
@@ -34,12 +34,6 @@ describe('input', () => {
 
     await wrapper.setProps({ type: 'password' })
     expect(wrapper.find('input').attributes('type')).toBe('password')
-
-    await wrapper.setProps({ type: 'number' })
-    expect(wrapper.find('input').attributes('type')).toBe('number')
-
-    await wrapper.setProps({ type: 'textarea' })
-    expect(wrapper.find('textarea').exists()).toBeTruthy()
   })
 
   it('size', async () => {
diff --git a/packages/docs/components/input/index.md b/packages/docs/components/input/index.md
index 475f423a..dd551c7e 100644
--- a/packages/docs/components/input/index.md
+++ b/packages/docs/components/input/index.md
@@ -224,65 +224,7 @@ export default defineComponent({
 
 :::
 
-## 文本域
 
-:::demo
-
-```vue
-<script>
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  setup() {
-    const value = ref('')
-    return {
-      value
-    }
-  }
-})
-</script>
-
-<template>
-  <div>
-    <c-input v-model="value" type="textarea" placeholder="多行文本输入框" />
-  </div>
-</template>
-
-<style>
-</style>
-```
-
-:::
-
-## 数字输入
-
-:::demo
-
-```vue
-<script>
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  setup() {
-    const value = ref('')
-    return {
-      value
-    }
-  }
-})
-</script>
-
-<template>
-  <div>
-    <c-input v-model="value" type="number" placeholder="数字输入框" />
-  </div>
-</template>
-
-<style>
-</style>
-```
-
-:::
 
 ## Input参数
 
@@ -304,7 +246,7 @@ export default defineComponent({
 ### InputType
 
 ```ts
-export type InputType = 'text' | 'password' | 'number' | 'textarea'
+export type InputType = 'text' | 'password'
 ```
 
 ### InputSize

From 4cc898afa451ffc433af1e7d8ed71a107bd56cbf Mon Sep 17 00:00:00 2001
From: vae <18137693952@163.com>
Date: Tue, 18 Nov 2025 10:52:28 +0800
Subject: [PATCH 08/10] =?UTF-8?q?style:=20input=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/docs/.vitepress/theme/styles/index.css | 16 ++++++++++++++++
 packages/docs/components/input/index.md         | 12 +++++-------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/docs/.vitepress/theme/styles/index.css b/packages/docs/.vitepress/theme/styles/index.css
index eb83180a..bccf2153 100644
--- a/packages/docs/.vitepress/theme/styles/index.css
+++ b/packages/docs/.vitepress/theme/styles/index.css
@@ -6,3 +6,19 @@
   width: 100%;
   display: table;
 }
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.mb-10 {
+  margin-bottom: 10px;
+}
+
+.ml-10 {
+  margin-left: 10px;
+}
+
+.mr-10 {
+  margin-right: 10px;
+}
diff --git a/packages/docs/components/input/index.md b/packages/docs/components/input/index.md
index dd551c7e..79ee6946 100644
--- a/packages/docs/components/input/index.md
+++ b/packages/docs/components/input/index.md
@@ -62,8 +62,8 @@ export default defineComponent({
 
 <template>
   <div>
-    <c-input v-model="value1" size="large" placeholder="大号输入框" />
-    <c-input v-model="value2" placeholder="默认输入框" />
+    <c-input v-model="value1" size="large" placeholder="大号输入框" class="mb-10" />
+    <c-input v-model="value2" placeholder="默认输入框" class="mb-10" />
     <c-input v-model="value3" size="small" placeholder="小号输入框" />
   </div>
 </template>
@@ -181,7 +181,7 @@ export default defineComponent({
 
 <template>
   <div>
-    <c-input v-model="value" type="password" placeholder="密码输入框" />
+    <c-input v-model="value" type="password" placeholder="密码输入框" class="mb-10" />
     <c-input v-model="value" type="password" show-password placeholder="可切换密码可见性" />
   </div>
 </template>
@@ -212,8 +212,8 @@ export default defineComponent({
 
 <template>
   <div>
-    <c-input v-model="value" prepend="http://" placeholder="请输入网址" />
-    <c-input v-model="value" append=".com" placeholder="请输入域名" />
+    <c-input v-model="value" prepend="http://" placeholder="请输入网址" class="mb-10" />
+    <c-input v-model="value" append=".com" placeholder="请输入域名" class="mb-10" />
     <c-input v-model="value" prepend="https://" append=".org" placeholder="请输入网址" />
   </div>
 </template>
@@ -224,8 +224,6 @@ export default defineComponent({
 
 :::
 
-
-
 ## Input参数
 
 | 参数          | 类型                    | 默认    | 说明                       |

From 035ce68aaf3856bf5fc89eedcb0c3f52dff6d512 Mon Sep 17 00:00:00 2001
From: vae <18137693952@163.com>
Date: Tue, 18 Nov 2025 11:18:52 +0800
Subject: [PATCH 09/10] =?UTF-8?q?feat:=20=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ccui/ui/input/src/input.scss   |  1 +
 packages/ccui/ui/input/src/input.tsx    | 27 ++++++++++++++++---------
 packages/docs/components/input/index.md | 16 +++++++--------
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/packages/ccui/ui/input/src/input.scss b/packages/ccui/ui/input/src/input.scss
index 5904842d..7cc78e53 100644
--- a/packages/ccui/ui/input/src/input.scss
+++ b/packages/ccui/ui/input/src/input.scss
@@ -89,6 +89,7 @@
   }
 
   &__wrapper {
+    position: relative;
     width: 100%;
     padding: 0 8px;
   }
diff --git a/packages/ccui/ui/input/src/input.tsx b/packages/ccui/ui/input/src/input.tsx
index eb05b9e1..7456e0f6 100644
--- a/packages/ccui/ui/input/src/input.tsx
+++ b/packages/ccui/ui/input/src/input.tsx
@@ -27,11 +27,18 @@ export default defineComponent({
 
     // 为测试兼容性，保持一致的类名结构
     const getBaseClass = computed(() => {
+      const hasInteractiveSuffix = !props.disabled && !props.readonly
+        && (props.clearable || showPasswordVisible.value)
+      const hasSuffix = hasInteractiveSuffix || !!slots.suffix
+
       return {
         [ns.b()]: true, // 基础类
         [ns.m(props.size)]: !!props.size, // 尺寸类
         [ns.m('disabled')]: props.disabled, // 禁用类
         [ns.m('readonly')]: props.readonly, // 只读类
+        [ns.m('clearable')]: props.clearable,
+        [ns.m('suffix')]: hasSuffix,
+        [ns.m('prefix')]: !!slots.prefix,
       }
     })
 
@@ -48,9 +55,6 @@ export default defineComponent({
       [ns.m(props.size)]: !!props.size,
       [ns.m('disabled')]: props.disabled,
       [ns.m('readonly')]: props.readonly,
-      [ns.m('clearable')]: props.clearable,
-      [ns.m('suffix')]: props.clearable || showPasswordVisible.value || slots.suffix,
-      [ns.m('prefix')]: slots.prefix,
     }))
 
     // 事件处理
@@ -118,21 +122,26 @@ export default defineComponent({
     }
 
     const renderSuffixIcons = () => {
-      if (!props.clearable && !showPasswordVisible.value && !slots.suffix)
+      const isInteractive = !props.disabled && !props.readonly
+      const hasClear = isInteractive && props.clearable && inputValue.value
+      const hasPasswordToggle = isInteractive && showPasswordVisible.value
+      const hasSuffixSlot = !!slots.suffix
+
+      if (!hasClear && !hasPasswordToggle && !hasSuffixSlot)
         return null
+
       return (
         <div class={ns.e('suffix')}>
-          {props.clearable && inputValue.value && (
+          {hasClear && (
             <i class={ns.e('clear')} onClick={clearInput}></i>
           )}
-          {showPasswordVisible.value && (
+          {hasPasswordToggle && (
             <i
               class={isPasswordVisible.value ? ns.e('password-visible') : ns.e('password-hidden')}
               onClick={togglePasswordVisible}
-            >
-            </i>
+            />
           )}
-          {slots.suffix && slots.suffix()}
+          {hasSuffixSlot && slots.suffix!()}
         </div>
       )
     }
diff --git a/packages/docs/components/input/index.md b/packages/docs/components/input/index.md
index 79ee6946..820b3f65 100644
--- a/packages/docs/components/input/index.md
+++ b/packages/docs/components/input/index.md
@@ -255,14 +255,14 @@ export type InputSize = 'large' | 'default' | 'small'
 
 ## Input事件
 
-| 事件名 | 参数  | 说明                             |
-| ------ | ----- | -------------------------------- |
-| update | value | 绑定值改变时触发（v-model 事件） |
-| input  | value | 输入框值改变时触发               |
-| change | value | 输入框值改变并失去焦点时触发     |
-| focus  | event | 输入框获得焦点时触发             |
-| blur   | event | 输入框失去焦点时触发             |
-| clear  | --    | 点击清空图标时触发               |
+| 事件名      | 参数  | 说明                             |
+| ----------- | ----- | -------------------------------- |
+| update:value | value | 绑定值改变时触发（v-model 事件） |
+| input       | value | 输入框值改变时触发               |
+| change      | value | 输入框值改变并失去焦点时触发     |
+| focus       | event | 输入框获得焦点时触发             |
+| blur        | event | 输入框失去焦点时触发             |
+| clear       | --    | 点击清空图标时触发               |
 
 ## Input插槽
 

From 78af026d8163ca1f41452b4aa515a4bf26250837 Mon Sep 17 00:00:00 2001
From: vae <18137693952@163.com>
Date: Tue, 18 Nov 2025 13:15:32 +0800
Subject: [PATCH 10/10] =?UTF-8?q?feat:=20=E5=B0=86Input=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=94=B9=E5=9B=9E=E4=BD=BF=E7=94=A8=E6=A0=87=E5=87=86=E7=9A=84?=
 =?UTF-8?q?Vue=203=20v-model=20=20=20API=EF=BC=88modelValue/update:modelVa?=
 =?UTF-8?q?lue=EF=BC=89=EF=BC=8C=E5=B9=B6=E7=9B=B8=E5=BA=94=E5=9C=B0?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BA=86=E6=B5=8B=E8=AF=95=E5=92=8C=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=EF=BC=8C=E4=BD=BF=E5=85=B6=E5=AE=8C=E5=85=A8=E4=B8=80?=
 =?UTF-8?q?=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ccui/ui/input/src/input-types.ts |  2 +-
 packages/ccui/ui/input/src/input.tsx      | 10 +++++-----
 packages/ccui/ui/input/test/input.test.ts |  8 ++++----
 packages/docs/components/input/index.md   | 18 +++++++++---------
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/ccui/ui/input/src/input-types.ts b/packages/ccui/ui/input/src/input-types.ts
index f0757353..c87dd367 100644
--- a/packages/ccui/ui/input/src/input-types.ts
+++ b/packages/ccui/ui/input/src/input-types.ts
@@ -40,7 +40,7 @@ export const inputProps = {
     type: String,
     default: '',
   },
-  value: {
+  modelValue: {
     type: String,
     default: '',
   },
diff --git a/packages/ccui/ui/input/src/input.tsx b/packages/ccui/ui/input/src/input.tsx
index 7456e0f6..051ae7c1 100644
--- a/packages/ccui/ui/input/src/input.tsx
+++ b/packages/ccui/ui/input/src/input.tsx
@@ -7,11 +7,11 @@ import './input.scss'
 export default defineComponent({
   name: 'CInput',
   props: inputProps,
-  emits: ['update:value', 'input', 'change', 'focus', 'blur', 'clear'],
+  emits: ['update:modelValue', 'input', 'change', 'focus', 'blur', 'clear'],
   setup(props: InputProps, { emit, slots }) {
     const ns = useNamespace('input')
     const inputRef = ref<HTMLInputElement | null>(null)
-    const inputValue = ref(props.value)
+    const inputValue = ref(props.modelValue)
     const isFocused = ref(false)
     const isPasswordVisible = ref(false)
 
@@ -60,7 +60,7 @@ export default defineComponent({
     // 事件处理
     const updateValue = (value: string) => {
       inputValue.value = value
-      emit('update:value', value)
+      emit('update:modelValue', value)
       emit('input', value)
     }
 
@@ -93,8 +93,8 @@ export default defineComponent({
       isPasswordVisible.value = !isPasswordVisible.value
     }
 
-    // 监听 value 属性变化
-    watch(() => props.value, (newVal) => {
+    // 监听 modelValue 属性变化
+    watch(() => props.modelValue, (newVal) => {
       if (newVal !== inputValue.value) {
         inputValue.value = newVal
       }
diff --git a/packages/ccui/ui/input/test/input.test.ts b/packages/ccui/ui/input/test/input.test.ts
index a3bc7fa8..0e97b37c 100644
--- a/packages/ccui/ui/input/test/input.test.ts
+++ b/packages/ccui/ui/input/test/input.test.ts
@@ -15,7 +15,7 @@ describe('input', () => {
   it('dom', () => {
     const wrapper = shallowMount(Input, {
       props: {
-        value: 'test',
+        modelValue: 'test',
       },
     })
 
@@ -68,7 +68,7 @@ describe('input', () => {
   })
 
   it('clearable', async () => {
-    const wrapper = shallowMount(Input, { props: { clearable: true, value: 'test' } })
+    const wrapper = shallowMount(Input, { props: { clearable: true, modelValue: 'test' } })
 
     // 检查是否显示清空图标
     expect(wrapper.find(ns.e('clear')).exists()).toBeTruthy()
@@ -157,7 +157,7 @@ describe('input', () => {
     const wrapper = mount(Input, {
       props: {
         clearable: true,
-        value: 'test',
+        modelValue: 'test',
       },
       attrs: {
         onClear: handleClear,
@@ -179,7 +179,7 @@ describe('input', () => {
       props: {
         type: 'password',
         showPassword: true,
-        value: 'test',
+        modelValue: 'test',
       },
     })
 
diff --git a/packages/docs/components/input/index.md b/packages/docs/components/input/index.md
index 820b3f65..a329e945 100644
--- a/packages/docs/components/input/index.md
+++ b/packages/docs/components/input/index.md
@@ -237,7 +237,7 @@ export default defineComponent({
 | show-password | boolean                 | false   | 密码输入时是否可切换可见性 |
 | prepend       | string                  | --      | 前置内容文本               |
 | append        | string                  | --      | 后置内容文本               |
-| value         | string                  | --      | 绑定值                     |
+| modelValue    | string                  | --      | 绑定值                     |
 
 ## Input类型定义
 
@@ -255,14 +255,14 @@ export type InputSize = 'large' | 'default' | 'small'
 
 ## Input事件
 
-| 事件名      | 参数  | 说明                             |
-| ----------- | ----- | -------------------------------- |
-| update:value | value | 绑定值改变时触发（v-model 事件） |
-| input       | value | 输入框值改变时触发               |
-| change      | value | 输入框值改变并失去焦点时触发     |
-| focus       | event | 输入框获得焦点时触发             |
-| blur        | event | 输入框失去焦点时触发             |
-| clear       | --    | 点击清空图标时触发               |
+| 事件名         | 参数  | 说明                             |
+| -------------- | ----- | -------------------------------- |
+| update:modelValue | value | 绑定值改变时触发（v-model 事件） |
+| input          | value | 输入框值改变时触发               |
+| change         | value | 输入框值改变并失去焦点时触发     |
+| focus          | event | 输入框获得焦点时触发             |
+| blur           | event | 输入框失去焦点时触发             |
+| clear          | --    | 点击清空图标时触发               |
 
 ## Input插槽