@star-ai/star-ui 0.0.4 → 0.0.6

package/lib/components/Button/index.js

@@ -1,10 +1,117 @@
 
-// Button 组件入口文件
-import StarButton from './Button.vue'
-
-StarButton.install = function(Vue) {
-  Vue.component(StarButton.name, StarButton)
+    // Button 组件入口文件
+    const StarButton = {
+  name: 'StarButton',
+  
+  // 组件属性定义
+  props: {
+    // 按钮类型
+    type: {
+      type: String,
+      default: 'default',
+      validator: (value) => {
+        return ['default', 'primary', 'success', 'warning', 'error', 'info'].includes(value)
+      }
+    },
+    
+    // 按钮大小
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (value) => {
+        return ['mini', 'small', 'medium', 'large'].includes(value)
+      }
+    },
+    
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    
+    // 是否加载中
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    
+    // 是否为朴素按钮
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    
+    // 是否为块级按钮
+    block: {
+      type: Boolean,
+      default: false
+    },
+    
+    // 左侧图标
+    icon: {
+      type: String,
+      default: ''
+    },
+    
+    // 右侧图标
+    rightIcon: {
+      type: String,
+      default: ''
+    },
+    
+    // 自定义样式
+    customStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    
+    // 点击防抖时间（毫秒）
+    debounce: {
+      type: Number,
+      default: 0
+    }
+  },
+  
+  data() {
+    return {
+      canClick: true
+    }
+  },
+  
+  methods: {
+    handleClick(event) {
+      // 防抖处理
+      if (!this.canClick) return
+      
+      if (this.debounce > 0) {
+        this.canClick = false
+        setTimeout(() => {
+          this.canClick = true
+        }, this.debounce)
+      }
+      
+      // 触发点击事件
+      if (!this.disabled && !this.loading) {
+        this.$emit('click', event)
+      }
+    }
+  }
 }
-
-export default StarButton
-export { StarButton }
+    
+    // 添加模板
+    StarButton.template = '<view \n    class="star-button"\n    :class="[\n      \`star-button--${type}\`,\n      \`star-button--${size}\`,\n      {\n        \'star-button--disabled\': disabled,\n        \'star-button--loading\': loading,\n        \'star-button--block\': block,\n        \'star-button--plain\': plain\n      }\n    ]"\n    :style="[customStyle]"\n    @click="handleClick"\n  >\n    <!-- 加载状态 -->\n    <view v-if="loading" class="star-button__loading">\n      <view class="star-button__loading-spinner"></view>\n    </view>\n    \n    <!-- 图标 -->\n    <text \n      v-if="icon && !loading" \n      class="star-button__icon" \n      :class="icon"\n    ></text>\n    \n    <!-- 文字内容 -->\n    <text class="star-button__text">\n      <slot></slot>\n    </text>\n    \n    <!-- 右侧图标 -->\n    <text \n      v-if="rightIcon && !loading" \n      class="star-button__right-icon" \n      :class="rightIcon"\n    ></text>\n  </view>'
+    
+    StarButton.install = function(Vue) {
+      Vue.component(StarButton.name, StarButton)
+    }
+    
+    // CommonJS 导出（仅在支持module的环境中）
+    if (typeof module !== 'undefined' && module.exports) {
+      module.exports = StarButton
+      module.exports.default = StarButton
+    }
+    
+    // 浏览器全局变量导出
+    if (typeof window !== 'undefined') {
+      window.StarButton = StarButton
+    }

package/lib/components/Input/index.js

@@ -1,10 +1,195 @@
 
-// Input 组件入口文件
-import StarInput from './Input.vue'
-
-StarInput.install = function(Vue) {
-  Vue.component(StarInput.name, StarInput)
+    // Input 组件入口文件
+    const StarInput = {
+  name: 'StarInput',
+  
+  props: {
+    // 输入框类型
+    type: {
+      type: String,
+      default: 'text'
+    },
+    
+    // 绑定值
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    
+    // 原生属性
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    
+    maxlength: {
+      type: [String, Number],
+      default: 140
+    },
+    
+    focus: {
+      type: Boolean,
+      default: false
+    },
+    
+    confirmType: {
+      type: String,
+      default: 'done'
+    },
+    
+    placeholderStyle: {
+      type: String,
+      default: ''
+    },
+    
+    placeholderClass: {
+      type: String,
+      default: ''
+    },
+    
+    cursorSpacing: {
+      type: [String, Number],
+      default: 0
+    },
+    
+    // 自定义属性
+    size: {
+      type: String,
+      default: 'medium',
+      validator: (value) => ['mini', 'small', 'medium', 'large'].includes(value)
+    },
+    
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    
+    showPassword: {
+      type: Boolean,
+      default: false
+    },
+    
+    prefixIcon: {
+      type: String,
+      default: ''
+    },
+    
+    suffixIcon: {
+      type: String,
+      default: ''
+    },
+    
+    prepend: {
+      type: String,
+      default: ''
+    },
+    
+    append: {
+      type: String,
+      default: ''
+    },
+    
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  
+  data() {
+    return {
+      currentValue: this.value,
+      isFocused: false,
+      passwordVisible: false
+    }
+  },
+  
+  computed: {
+    inputClasses() {
+      return [
+        `star-input--${this.size}`,
+        {
+          'star-input--disabled': this.disabled,
+          'star-input--focused': this.isFocused,
+          'star-input--with-prepend': this.prepend || this.$slots.prepend,
+          'star-input--with-append': this.append || this.$slots.append,
+          'star-input--readonly': this.readonly
+        }
+      ]
+    }
+  },
+  
+  watch: {
+    value(newVal) {
+      this.currentValue = newVal
+    }
+  },
+  
+  methods: {
+    handleInput(event) {
+      const value = event.detail.value
+      this.currentValue = value
+      this.$emit('input', value)
+      this.$emit('change', value)
+    },
+    
+    handleFocus(event) {
+      this.isFocused = true
+      this.$emit('focus', event)
+    },
+    
+    handleBlur(event) {
+      this.isFocused = false
+      this.$emit('blur', event)
+    },
+    
+    handleConfirm(event) {
+      this.$emit('confirm', event)
+    },
+    
+    handleKeyboardHeightChange(event) {
+      this.$emit('keyboardheightchange', event)
+    },
+    
+    handleClear() {
+      this.currentValue = ''
+      this.$emit('input', '')
+      this.$emit('change', '')
+      this.$emit('clear')
+    },
+    
+    togglePasswordVisible() {
+      this.passwordVisible = !this.passwordVisible
+    },
+    
+    handlePrefixIconClick() {
+      this.$emit('click-prefix')
+    },
+    
+    handleSuffixIconClick() {
+      this.$emit('click-suffix')
+    }
+  }
 }
-
-export default StarInput
-export { StarInput }
+    
+    // 添加模板
+    StarInput.template = '<view class="star-input" :class="inputClasses">\n    <!-- 前置内容 -->\n    <view v-if="$slots.prepend || prepend" class="star-input__prepend">\n      <slot name="prepend">\n        <text v-if="prepend" class="star-input__prepend-text">{{ prepend }}</text>\n      </slot>\n    </view>\n    \n    <!-- 输入框主体 -->\n    <view class="star-input__wrapper">\n      <!-- 前置图标 -->\n      <text \n        v-if="prefixIcon" \n        class="star-input__prefix-icon" \n        :class="prefixIcon"\n        @click="handlePrefixIconClick"\n      ></text>\n      \n      <!-- 输入框 -->\n      <input\n        class="star-input__inner"\n        :type="showPassword ? (passwordVisible ? \'text\' : \'password\') : type"\n        :value="currentValue"\n        :placeholder="placeholder"\n        :disabled="disabled"\n        :maxlength="maxlength"\n        :focus="focus"\n        :confirm-type="confirmType"\n        :placeholder-style="placeholderStyle"\n        :placeholder-class="placeholderClass"\n        :cursor-spacing="cursorSpacing"\n        @input="handleInput"\n        @focus="handleFocus"\n        @blur="handleBlur"\n        @confirm="handleConfirm"\n        @keyboardheightchange="handleKeyboardHeightChange"\n      />\n      \n      <!-- 清除按钮 -->\n      <view \n        v-if="clearable && currentValue && !disabled" \n        class="star-input__clear"\n        @click="handleClear"\n      >\n        <text class="star-icon-close"></text>\n      </view>\n      \n      <!-- 密码可见切换按钮 -->\n      <view \n        v-if="showPassword && currentValue" \n        class="star-input__password-toggle"\n        @click="togglePasswordVisible"\n      >\n        <text :class="passwordVisible ? \'star-icon-eye-open\' : \'star-icon-eye-close\'"></text>\n      </view>\n      \n      <!-- 后置图标 -->\n      <text \n        v-if="suffixIcon" \n        class="star-input__suffix-icon" \n        :class="suffixIcon"\n        @click="handleSuffixIconClick"\n      ></text>\n    </view>\n    \n    <!-- 后置内容 -->\n    <view v-if="$slots.append || append" class="star-input__append">\n      <slot name="append">\n        <text v-if="append" class="star-input__append-text">{{ append }}</text>\n      </slot>\n    </view>\n  </view>'
+    
+    StarInput.install = function(Vue) {
+      Vue.component(StarInput.name, StarInput)
+    }
+    
+    // CommonJS 导出（仅在支持module的环境中）
+    if (typeof module !== 'undefined' && module.exports) {
+      module.exports = StarInput
+      module.exports.default = StarInput
+    }
+    
+    // 浏览器全局变量导出
+    if (typeof window !== 'undefined') {
+      window.StarInput = StarInput
+    }

package/lib/index.js

@@ -1,70 +1,53 @@
-
-// star-ui 组件库主入口文件
-import packageJson from '../package.json'
-
-// 导入所有组件
-import StarButton from './components/Button/index.js'
-import StarInput from './components/Input/index.js'
-
-// 组件列表
-const components = [
-  StarButton,
-  StarInput
-]
-
-// 安装函数
-const install = function(Vue, opts = {}) {
-  components.forEach(component => {
-    // 如果组件有install方法，使用install方法注册
-    if (component.install) {
-      Vue.use(component)
-    } 
-    // 如果组件是Vue组件对象，直接注册
-    else if (component.name) {
-      Vue.component(component.name, component)
-    }
-  })
-  
-  // 挂载全局方法
-  Vue.prototype.$MY_UI = {
-    size: opts.size || '',
-    zIndex: opts.zIndex || 2000
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.StarUI = factory());
+}(this, (function () {
+  'use strict';
+
+  // 导入组件
+  const StarButton = require('./components/Button/index.js');
+const StarInput = require('./components/Input/index.js');
+
+  // 组件列表
+  const components = [
+    StarButton,
+    StarInput
+  ];
+
+  // 安装函数
+  const install = function(Vue, opts = {}) {
+    components.forEach(component => {
+      // 如果组件有install方法，使用install方法注册
+      if (component.install) {
+        Vue.use(component);
+      } 
+      // 如果组件是Vue组件对象，直接注册
+      else if (component.name) {
+        Vue.component(component.name, component);
+      }
+    });
+    
+    // 挂载全局方法
+    Vue.prototype.$MY_UI = {
+      size: opts.size || '',
+      zIndex: opts.zIndex || 2000
+    };
+  };
+
+  // 如果是浏览器环境且已引入Vue，则自动安装
+  if (typeof window !== 'undefined' && window.Vue) {
+    install(window.Vue);
   }
-}
-
-// 如果是浏览器环境且已引入Vue，则自动安装
-if (typeof window !== 'undefined' && window.Vue) {
-  install(window.Vue)
-}
-
-// 创建导出对象
-const StarUI = {
-  version: packageJson.version,
-  install,
-  // 导出所有组件
-  StarButton,
-  StarInput
-}
-
-// 导出模块
-if (typeof module !== 'undefined' && module.exports) {
-  // CommonJS 导出
-  module.exports = StarUI
-  module.exports.default = StarUI
-  // 为每个组件添加单独的导出（支持按需导入）
-  components.forEach(component => {
-    if (component.name) {
-      module.exports[component.name] = component
-    }
-  })
-} else if (typeof define === 'function' && define.amd) {
-  // AMD 导出
-  define(() => StarUI)
-} else if (typeof window !== 'undefined') {
-  // 浏览器全局变量导出
-  window.StarUI = StarUI
-}
 
-// ES模块导出
-export default StarUI
-export { StarButton, StarInput }
+  // 创建导出对象
+  const StarUI = {
+    version: '0.0.5',
+    install,
+    // 导出所有组件
+    StarButton,
+    StarInput
+  };
+
+  return StarUI;
+})));

package/lib/package.json

@@ -1,13 +1,10 @@
 {
   "name": "@star-ai/star-ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "基于Uniapp的Vue2组件库",
   "main": "index.js",
-  "files": [
-    "components",
-    "styles",
-    "index.js"
-  ],
+  "module": "index.js",
+  "browser": "star-ui.umd.js",
   "dependencies": {
     "@vue/shared": "^3.0.0",
     "core-js": "^3.8.3"

package/lib/star-ui.umd.js

@@ -0,0 +1,64 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.StarUI = factory());
+}(this, (function () {
+  'use strict';
+
+  // 组件定义
+  
+  // Button 组件
+  const StarButton = window.StarButton || {};
+    
+
+  // Input 组件
+  const StarInput = window.StarInput || {};
+    
+
+  // 组件列表
+  const components = [
+    StarButton,
+    StarInput
+  ];
+
+  // 安装函数
+  const install = function(Vue, opts = {}) {
+    components.forEach(component => {
+      // 如果组件有install方法，使用install方法注册
+      if (component.install) {
+        Vue.use(component);
+      } 
+      // 如果组件是Vue组件对象，直接注册
+      else if (component.name) {
+        Vue.component(component.name, component);
+      }
+    });
+    
+    // 挂载全局方法
+    Vue.prototype.$MY_UI = {
+      size: opts.size || '',
+      zIndex: opts.zIndex || 2000
+    };
+  };
+
+  // 如果是浏览器环境且已引入Vue，则自动安装
+  if (typeof window !== 'undefined' && window.Vue) {
+    install(window.Vue);
+  }
+
+  // 创建导出对象
+  const StarUI = {
+    version: '0.0.5',
+    install,
+    // 导出所有组件
+    StarButton,
+    StarInput
+  };
+
+  // 浏览器全局变量导出
+  if (typeof window !== 'undefined') {
+    window.StarUI = StarUI;
+  }
+
+  return StarUI;
+})));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@star-ai/star-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "基于Uniapp的Vue2组件库",
   "main": "lib/index.js",
   "module": "lib/index.js",

package/lib/components/Button/Button.vue

@@ -1,325 +0,0 @@
-<template>
-  <view 
-    class="star-button"
-    :class="[
-      `star-button--${type}`,
-      `star-button--${size}`,
-      {
-        'star-button--disabled': disabled,
-        'star-button--loading': loading,
-        'star-button--block': block,
-        'star-button--plain': plain
-      }
-    ]"
-    :style="[customStyle]"
-    @click="handleClick"
-  >
-    <!-- 加载状态 -->
-    <view v-if="loading" class="star-button__loading">
-      <view class="star-button__loading-spinner"></view>
-    </view>
-    
-    <!-- 图标 -->
-    <text 
-      v-if="icon && !loading" 
-      class="star-button__icon" 
-      :class="icon"
-    ></text>
-    
-    <!-- 文字内容 -->
-    <text class="star-button__text">
-      <slot></slot>
-    </text>
-    
-    <!-- 右侧图标 -->
-    <text 
-      v-if="rightIcon && !loading" 
-      class="star-button__right-icon" 
-      :class="rightIcon"
-    ></text>
-  </view>
-</template>
-
-<script>
-export default {
-  name: 'StarButton',
-  
-  // 组件属性定义
-  props: {
-    // 按钮类型
-    type: {
-      type: String,
-      default: 'default',
-      validator: (value) => {
-        return ['default', 'primary', 'success', 'warning', 'error', 'info'].includes(value)
-      }
-    },
-    
-    // 按钮大小
-    size: {
-      type: String,
-      default: 'medium',
-      validator: (value) => {
-        return ['mini', 'small', 'medium', 'large'].includes(value)
-      }
-    },
-    
-    // 是否禁用
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    
-    // 是否加载中
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    
-    // 是否为朴素按钮
-    plain: {
-      type: Boolean,
-      default: false
-    },
-    
-    // 是否为块级按钮
-    block: {
-      type: Boolean,
-      default: false
-    },
-    
-    // 左侧图标
-    icon: {
-      type: String,
-      default: ''
-    },
-    
-    // 右侧图标
-    rightIcon: {
-      type: String,
-      default: ''
-    },
-    
-    // 自定义样式
-    customStyle: {
-      type: Object,
-      default: () => ({})
-    },
-    
-    // 点击防抖时间（毫秒）
-    debounce: {
-      type: Number,
-      default: 0
-    }
-  },
-  
-  data() {
-    return {
-      canClick: true
-    }
-  },
-  
-  methods: {
-    handleClick(event) {
-      // 防抖处理
-      if (!this.canClick) return
-      
-      if (this.debounce > 0) {
-        this.canClick = false
-        setTimeout(() => {
-          this.canClick = true
-        }, this.debounce)
-      }
-      
-      // 触发点击事件
-      if (!this.disabled && !this.loading) {
-        this.$emit('click', event)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-// 引入样式变量
-@import "../../styles/variables.scss";
-
-.star-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  box-sizing: border-box;
-  padding: 0 16px;
-  height: 44px;
-  line-height: 44px;
-  border-radius: $border-radius-base;
-  font-size: $font-size-base;
-  font-weight: 500;
-  text-align: center;
-  vertical-align: middle;
-  transition: all 0.3s;
-  cursor: pointer;
-  user-select: none;
-  
-  // 块级按钮
-  &--block {
-    display: flex;
-    width: 100%;
-  }
-  
-  // 禁用状态
-  &--disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-  
-  // 大小
-  &--mini {
-    padding: 0 8px;
-    height: 24px;
-    line-height: 24px;
-    font-size: $font-size-sm;
-    border-radius: $border-radius-sm;
-  }
-  
-  &--small {
-    padding: 0 12px;
-    height: 32px;
-    line-height: 32px;
-    font-size: $font-size-sm;
-    border-radius: $border-radius-sm;
-  }
-  
-  &--large {
-    padding: 0 20px;
-    height: 48px;
-    line-height: 48px;
-    font-size: $font-size-lg;
-    border-radius: $border-radius-lg;
-  }
-  
-  // 类型 - 默认
-  &--default {
-    color: $text-color;
-    background-color: $bg-color;
-    border: 1px solid $border-color;
-    
-    &:not(.star-button--disabled):not(.star-button--loading):active {
-      background-color: darken($bg-color, 5%);
-    }
-  }
-  
-  // 类型 - 主要
-  &--primary {
-    color: $white;
-    background-color: $primary-color;
-    border: 1px solid $primary-color;
-    
-    &.star-button--plain {
-      color: $primary-color;
-      background-color: transparent;
-    }
-    
-    &:not(.star-button--disabled):not(.star-button--loading):active {
-      background-color: darken($primary-color, 10%);
-      border-color: darken($primary-color, 10%);
-    }
-  }
-  
-  // 类型 - 成功
-  &--success {
-    color: $white;
-    background-color: $success-color;
-    border: 1px solid $success-color;
-    
-    &.star-button--plain {
-      color: $success-color;
-      background-color: transparent;
-    }
-  }
-  
-  // 类型 - 警告
-  &--warning {
-    color: $white;
-    background-color: $warning-color;
-    border: 1px solid $warning-color;
-    
-    &.star-button--plain {
-      color: $warning-color;
-      background-color: transparent;
-    }
-  }
-  
-  // 类型 - 错误
-  &--error {
-    color: $white;
-    background-color: $error-color;
-    border: 1px solid $error-color;
-    
-    &.star-button--plain {
-      color: $error-color;
-      background-color: transparent;
-    }
-  }
-  
-  // 类型 - 信息
-  &--info {
-    color: $white;
-    background-color: $info-color;
-    border: 1px solid $info-color;
-    
-    &.star-button--plain {
-      color: $info-color;
-      background-color: transparent;
-    }
-  }
-  
-  // 加载中
-  &--loading {
-    cursor: not-allowed;
-  }
-  
-  // 图标
-  &__icon,
-  &__right-icon {
-    font-family: "star-icon-font" !important; // 使用你自己的图标字体
-    margin-right: 4px;
-    font-size: inherit;
-  }
-  
-  &__right-icon {
-    margin-right: 0;
-    margin-left: 4px;
-  }
-  
-  &__text {
-    display: inline-block;
-    vertical-align: middle;
-  }
-  
-  // 加载动画
-  &__loading {
-    margin-right: 4px;
-  }
-  
-  &__loading-spinner {
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    border: 2px solid;
-    border-color: currentColor transparent transparent transparent;
-    border-radius: 50%;
-    animation: star-button-spin 1s linear infinite;
-  }
-}
-
-@keyframes star-button-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>

package/lib/components/Input/Input.vue

@@ -1,404 +0,0 @@
-<template>
-  <view class="star-input" :class="inputClasses">
-    <!-- 前置内容 -->
-    <view v-if="$slots.prepend || prepend" class="star-input__prepend">
-      <slot name="prepend">
-        <text v-if="prepend" class="star-input__prepend-text">{{ prepend }}</text>
-      </slot>
-    </view>
-    
-    <!-- 输入框主体 -->
-    <view class="star-input__wrapper">
-      <!-- 前置图标 -->
-      <text 
-        v-if="prefixIcon" 
-        class="star-input__prefix-icon" 
-        :class="prefixIcon"
-        @click="handlePrefixIconClick"
-      ></text>
-      
-      <!-- 输入框 -->
-      <input
-        class="star-input__inner"
-        :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
-        :value="currentValue"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :maxlength="maxlength"
-        :focus="focus"
-        :confirm-type="confirmType"
-        :placeholder-style="placeholderStyle"
-        :placeholder-class="placeholderClass"
-        :cursor-spacing="cursorSpacing"
-        @input="handleInput"
-        @focus="handleFocus"
-        @blur="handleBlur"
-        @confirm="handleConfirm"
-        @keyboardheightchange="handleKeyboardHeightChange"
-      />
-      
-      <!-- 清除按钮 -->
-      <view 
-        v-if="clearable && currentValue && !disabled" 
-        class="star-input__clear"
-        @click="handleClear"
-      >
-        <text class="star-icon-close"></text>
-      </view>
-      
-      <!-- 密码可见切换按钮 -->
-      <view 
-        v-if="showPassword && currentValue" 
-        class="star-input__password-toggle"
-        @click="togglePasswordVisible"
-      >
-        <text :class="passwordVisible ? 'star-icon-eye-open' : 'star-icon-eye-close'"></text>
-      </view>
-      
-      <!-- 后置图标 -->
-      <text 
-        v-if="suffixIcon" 
-        class="star-input__suffix-icon" 
-        :class="suffixIcon"
-        @click="handleSuffixIconClick"
-      ></text>
-    </view>
-    
-    <!-- 后置内容 -->
-    <view v-if="$slots.append || append" class="star-input__append">
-      <slot name="append">
-        <text v-if="append" class="star-input__append-text">{{ append }}</text>
-      </slot>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  name: 'StarInput',
-  
-  props: {
-    // 输入框类型
-    type: {
-      type: String,
-      default: 'text'
-    },
-    
-    // 绑定值
-    value: {
-      type: [String, Number],
-      default: ''
-    },
-    
-    // 原生属性
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    
-    maxlength: {
-      type: [String, Number],
-      default: 140
-    },
-    
-    focus: {
-      type: Boolean,
-      default: false
-    },
-    
-    confirmType: {
-      type: String,
-      default: 'done'
-    },
-    
-    placeholderStyle: {
-      type: String,
-      default: ''
-    },
-    
-    placeholderClass: {
-      type: String,
-      default: ''
-    },
-    
-    cursorSpacing: {
-      type: [String, Number],
-      default: 0
-    },
-    
-    // 自定义属性
-    size: {
-      type: String,
-      default: 'medium',
-      validator: (value) => ['mini', 'small', 'medium', 'large'].includes(value)
-    },
-    
-    clearable: {
-      type: Boolean,
-      default: false
-    },
-    
-    showPassword: {
-      type: Boolean,
-      default: false
-    },
-    
-    prefixIcon: {
-      type: String,
-      default: ''
-    },
-    
-    suffixIcon: {
-      type: String,
-      default: ''
-    },
-    
-    prepend: {
-      type: String,
-      default: ''
-    },
-    
-    append: {
-      type: String,
-      default: ''
-    },
-    
-    readonly: {
-      type: Boolean,
-      default: false
-    }
-  },
-  
-  data() {
-    return {
-      currentValue: this.value,
-      isFocused: false,
-      passwordVisible: false
-    }
-  },
-  
-  computed: {
-    inputClasses() {
-      return [
-        `star-input--${this.size}`,
-        {
-          'star-input--disabled': this.disabled,
-          'star-input--focused': this.isFocused,
-          'star-input--with-prepend': this.prepend || this.$slots.prepend,
-          'star-input--with-append': this.append || this.$slots.append,
-          'star-input--readonly': this.readonly
-        }
-      ]
-    }
-  },
-  
-  watch: {
-    value(newVal) {
-      this.currentValue = newVal
-    }
-  },
-  
-  methods: {
-    handleInput(event) {
-      const value = event.detail.value
-      this.currentValue = value
-      this.$emit('input', value)
-      this.$emit('change', value)
-    },
-    
-    handleFocus(event) {
-      this.isFocused = true
-      this.$emit('focus', event)
-    },
-    
-    handleBlur(event) {
-      this.isFocused = false
-      this.$emit('blur', event)
-    },
-    
-    handleConfirm(event) {
-      this.$emit('confirm', event)
-    },
-    
-    handleKeyboardHeightChange(event) {
-      this.$emit('keyboardheightchange', event)
-    },
-    
-    handleClear() {
-      this.currentValue = ''
-      this.$emit('input', '')
-      this.$emit('change', '')
-      this.$emit('clear')
-    },
-    
-    togglePasswordVisible() {
-      this.passwordVisible = !this.passwordVisible
-    },
-    
-    handlePrefixIconClick() {
-      this.$emit('click-prefix')
-    },
-    
-    handleSuffixIconClick() {
-      this.$emit('click-suffix')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/variables.scss";
-
-.star-input {
-  display: inline-flex;
-  width: 100%;
-  font-size: $font-size-base;
-  line-height: normal;
-  
-  &__prepend,
-  &__append {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 12px;
-    background-color: $bg-color-grey;
-    border: 1px solid $border-color;
-    white-space: nowrap;
-    
-    &-text {
-      color: $text-color-secondary;
-    }
-  }
-  
-  &__prepend {
-    border-right: 0;
-    border-radius: $border-radius-base 0 0 $border-radius-base;
-  }
-  
-  &__append {
-    border-left: 0;
-    border-radius: 0 $border-radius-base $border-radius-base 0;
-  }
-  
-  &__wrapper {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    position: relative;
-    padding: 0 12px;
-    border: 1px solid $border-color;
-    border-radius: $border-radius-base;
-    background-color: $bg-color;
-    transition: border-color 0.3s;
-    
-    .star-input--with-prepend & {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-left: 0;
-    }
-    
-    .star-input--with-append & {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-right: 0;
-    }
-  }
-  
-  &--focused &__wrapper {
-    border-color: $primary-color;
-  }
-  
-  &--disabled &__wrapper {
-    background-color: $bg-color-grey;
-    cursor: not-allowed;
-  }
-  
-  &__inner {
-    flex: 1;
-    width: 100%;
-    height: 100%;
-    padding: 0;
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: inherit;
-    color: $text-color;
-    
-    .star-input--disabled & {
-      color: $text-color-disabled;
-      cursor: not-allowed;
-    }
-    
-    &::placeholder {
-      color: $text-color-light;
-    }
-  }
-  
-  &__prefix-icon,
-  &__suffix-icon {
-    font-family: "star-icon-font" !important;
-    color: $text-color-light;
-    font-size: 18px;
-    cursor: pointer;
-    transition: color 0.3s;
-    
-    &:hover {
-      color: $text-color;
-    }
-  }
-  
-  &__prefix-icon {
-    margin-right: 8px;
-  }
-  
-  &__suffix-icon {
-    margin-left: 8px;
-  }
-  
-  &__clear,
-  &__password-toggle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    margin-left: 8px;
-    color: $text-color-light;
-    cursor: pointer;
-    transition: color 0.3s;
-    
-    &:hover {
-      color: $text-color;
-    }
-    
-    .star-icon-close,
-    .star-icon-eye-open,
-    .star-icon-eye-close {
-      font-family: "star-icon-font" !important;
-      font-size: 16px;
-    }
-  }
-  
-  // 尺寸
-  &--mini &__wrapper {
-    height: 24px;
-  }
-  
-  &--small &__wrapper {
-    height: 32px;
-  }
-  
-  &--medium &__wrapper {
-    height: 40px;
-  }
-  
-  &--large &__wrapper {
-    height: 48px;
-  }
-}
-</style>