starai-ui 0.1.19

package/README.md

@@ -0,0 +1,251 @@
+# star-ui-library
+
+基于Uniapp的Vue2组件库
+
+## 项目介绍
+
+star-ui-library是一个基于Uniapp和Vue2开发的移动端组件库，提供了丰富的UI组件，帮助开发者快速构建美观、易用的移动应用。
+
+## 特性
+
+- 🎨 基于Uniapp和Vue2，支持多端编译
+- 📱 丰富的移动端UI组件
+- 🔧 支持按需引入
+- 📦 轻量、高效
+
+## 快速开始
+
+### 安装
+
+```bash
+npm install @star-ai/star-ui
+pnpm add @star-ai/star-ui
+```
+
+### 使用
+
+```javascript
+// 全局引入
+import StarUI from '@star-ai/star-ui'
+import '@star-ai/star-ui/lib/styles/index.scss'
+
+Vue.use(StarUI)
+
+// 按需引入
+import { StarButton, StarInput } from '@star-ai/star-ui'
+import '@star-ai/star-ui/lib/styles/index.scss'
+
+Vue.use(StarButton)
+Vue.use(StarInput)
+```
+
+## 组件文档
+
+### Button 按钮
+
+```vue
+<star-button type="primary">主要按钮</star-button>
+```
+
+### Input 输入框
+
+```vue
+<star-input v-model="value" placeholder="请输入内容"></star-input>
+```
+
+## Uni-app 特别说明
+
+### 在 Uni-app 中使用
+
+1. **全局引入（推荐）**：
+
+在 `main.js` 中：
+```javascript
+import Vue from 'vue'
+import App from './App'
+import StarUI from '@star-ai/star-ui'
+import '@star-ai/star-ui/lib/styles/index.scss'
+
+Vue.use(StarUI)
+
+App.mpType = 'app'
+
+const app = new Vue({
+  ...App
+})
+app.$mount()
+```
+
+2. **按需引入**：
+
+```vue
+<template>
+  <view>
+    <star-button type="primary">按钮</star-button>
+    <star-input v-model="value"></star-input>
+  </view>
+</template>
+
+<script>
+import { StarButton, StarInput } from '@star-ai/star-ui'
+
+export default {
+  components: {
+    StarButton,
+    StarInput
+  },
+  data() {
+    return {
+      value: ''
+    }
+  }
+}
+</script>
+
+<style>
+/* 引入全局样式 */
+@import '@star-ai/star-ui/lib/styles/index.scss';
+</style>
+```
+
+3. **直接引入组件**：
+
+```vue
+<template>
+  <view>
+    <star-button type="primary">按钮</star-button>
+  </view>
+</template>
+
+<script>
+import StarButton from '@star-ai/star-ui/lib/components/Button/Button.vue'
+
+export default {
+  components: {
+    StarButton
+  }
+}
+</script>
+```
+
+### 注意事项
+
+1. **组件名称**：所有组件以 `star-` 为前缀，如 `star-button`、`star-input`
+2. **样式引入**：确保引入了组件库的样式文件
+3. **Vue 版本**：组件库基于 Vue 2.x 开发，与 Uni-app 保持兼容
+4. **编译平台**：支持 H5、小程序、App 等多端编译
+
+## 开发指南
+
+### 项目结构
+
+```
+├── packages/          # 组件源码
+│   ├── components/    # 组件目录
+│   ├── styles/        # 样式文件
+│   └── index.js       # 入口文件
+├── lib/               # 构建后的npm包
+├── examples/          # 示例代码
+├── build/             # 构建脚本
+└── docs/              # 文档
+```
+
+### 开发命令
+
+```bash
+# 安装依赖
+yarn install
+
+# 启动H5开发服务器
+npm run dev:h5
+
+# 构建H5版本
+npm run build:h5
+
+# 构建小程序版本
+npm run build:mp-weixin
+
+# 构建App版本
+npm run build:app-plus
+
+# 构建npm包
+npm run build:lib
+```
+
+## npm包发布流程
+
+### 1. 准备工作
+
+确保你已经：
+- 拥有npm账号并已登录
+- 确保package.json中的配置正确
+- 已完成代码开发和测试
+
+### 2. 构建npm包
+
+```bash
+# 执行构建脚本
+npm run build:lib
+```
+
+此命令会执行以下操作：
+- 清空lib目录
+- 复制所有组件到lib/components
+- 为每个组件创建单独的index.js入口文件
+- 复制样式文件到lib/styles
+- 创建主入口文件lib/index.js
+
+### 3. 检查构建结果
+
+构建完成后，检查lib目录是否包含以下内容：
+- lib/index.js          # 主入口文件
+- lib/components/       # 组件目录
+- lib/styles/           # 样式文件
+
+### 4. 更新版本号
+
+根据语义化版本规则更新package.json中的version字段：
+
+```bash
+# 补丁版本(修复bug)
+npm version patch
+
+# 小版本(新增功能)
+npm version minor
+
+# 大版本(不兼容更改)
+npm version major
+```
+
+### 5. 登录npm账号
+
+如果尚未登录npm账号，执行以下命令登录：
+
+```bash
+npm login
+```
+
+### 6. 发布npm包
+
+```bash
+npm publish --access=public
+```
+
+### 7. 验证发布结果
+
+发布成功后，可以在npm官网查看你的包：
+
+```
+https://www.npmjs.com/package/@star-ai/star-ui
+```
+
+## 注意事项
+
+- 发布前请确保所有测试通过
+- 发布前请检查package.json中的配置是否正确
+- 每次发布请更新版本号
+- 如果是私有包，请移除--access public参数
+
+## License
+
+MIT

package/components/star-button/star-button.vue

@@ -0,0 +1,328 @@
+<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',
+  
+  install(Vue) {
+    Vue.component(this.name, this)
+  },
+  // 组件属性定义
+  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/components/star-input/star-input.vue

@@ -0,0 +1,408 @@
+<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',
+  
+  install(Vue) {
+    Vue.component(this.name, this)
+  },
+  
+  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>

package/index.js

@@ -0,0 +1,41 @@
+
+// 导入所有组件
+import starButton from './components/star-button'
+import starInput from './components/star-input'
+
+// 组件列表
+const components = [starButton, starInput]
+
+// 安装函数
+const install = function(Vue, opts = {}) {
+  components.forEach(component => {
+    if(component.install) {
+      Vue.use(component)
+    } else if (component.name) {
+      Vue.component(component.name, component)
+    }
+  })
+  
+  // 挂载全局方法
+  Vue.prototype.$STAR_UI = {
+    size: opts.size || '',
+    zIndex: opts.zIndex || 2000
+  }
+}
+
+// 如果是浏览器环境且已引入Vue，则自动安装
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+// 导出默认对象
+export default {
+  version: '0.1.19',
+  install,
+  // 导出所有组件
+  'star-button': starButton, 'star-input': starInput
+}
+
+// 按需导出组件
+export { starButton as 'star-button' }
+export { starInput as 'star-input' }

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "starai-ui",
+  "version": "0.1.19",
+  "description": "基于Uniapp的Vue2组件库",
+  "main": "index.js",
+  "module": "index.js",
+  "umd:main": "index.js",
+  "files": ["components", "styles", "index.js"],
+  "scripts": {
+    "serve": "npm run dev:h5",
+    "build:lib": "node build/build.js",
+    "build:lib:prod": "cross-env BUILD_NPM_PACKAGE=true node build/build.js",
+    "build": "npm run build:h5",
+    "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
+    "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
+    "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
+    "build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
+    "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
+    "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
+    "build:mp-harmony": "cross-env NODE_ENV=production UNI_PLATFORM=mp-harmony vue-cli-service uni-build",
+    "build:mp-jd": "cross-env NODE_ENV=production UNI_PLATFORM=mp-jd vue-cli-service uni-build",
+    "build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",
+    "build:mp-lark": "cross-env NODE_ENV=production UNI_PLATFORM=mp-lark vue-cli-service uni-build",
+    "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
+    "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
+    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
+    "build:mp-xhs": "cross-env NODE_ENV=production UNI_PLATFORM=mp-xhs vue-cli-service uni-build",
+    "build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
+    "build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
+    "build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
+    "build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
+    "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
+    "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
+    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
+    "dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
+    "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
+    "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
+    "dev:mp-harmony": "cross-env NODE_ENV=development UNI_PLATFORM=mp-harmony vue-cli-service uni-build --watch",
+    "dev:mp-jd": "cross-env NODE_ENV=development UNI_PLATFORM=mp-jd vue-cli-service uni-build --watch",
+    "dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",
+    "dev:mp-lark": "cross-env NODE_ENV=development UNI_PLATFORM=mp-lark vue-cli-service uni-build --watch",
+    "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
+    "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
+    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
+    "dev:mp-xhs": "cross-env NODE_ENV=development UNI_PLATFORM=mp-xhs vue-cli-service uni-build --watch",
+    "dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
+    "dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
+    "dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
+    "dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
+    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
+    "serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
+    "test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
+    "test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
+    "test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
+    "test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
+    "test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
+  },
+  "peerDependencies": {
+    "vue": ">= 2.6.14 < 4"
+  },
+  "dependencies": {
+    "@vue/shared": "^3.0.0",
+    "core-js": "^3.8.3"
+  },
+  "devDependencies": {
+    "@dcloudio/types": "^3.3.2",
+    "@dcloudio/uni-automator": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-cli-i18n": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-cli-shared": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-helper-json": "*",
+    "@dcloudio/uni-migration": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-template-compiler": "^2.0.2-4080720251210002",
+    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.2-4080720251210002",
+    "@dcloudio/vue-cli-plugin-uni": "^2.0.2-4080720251210002",
+    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.2-4080720251210002",
+    "@dcloudio/webpack-uni-mp-loader": "^2.0.2-4080720251210002",
+    "@dcloudio/webpack-uni-pages-loader": "^2.0.2-4080720251210002",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "babel-plugin-import": "^1.11.0",
+    "cross-env": "^7.0.2",
+    "fs-extra": "^10.0.0",
+    "jest": "^25.4.0",
+    "postcss-comment": "^2.0.0",
+    "sass": "^1.97.1",
+    "sass-loader": "10",
+    "vue-template-compiler": ">= 2.6.14 < 2.7"
+  },
+  "browserslist": [
+    "Android >= 4.4",
+    "ios >= 9"
+  ],
+  "keywords": [
+    "uniapp",
+    "vue2",
+    "component",
+    "ui",
+    "mobile"
+  ],
+  "author": "DengChengBo",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitee.com/chengboDeng/star-ui-library.git"
+  },
+  "bugs": {
+    "url": "https://gitee.com/chengboDeng/star-ui-library/issues"
+  },
+  "homepage": "https://gitee.com/chengboDeng/star-ui-library#readme",
+  "uni-app": {
+    "scripts": {}
+  }
+}

package/styles/index.scss

@@ -0,0 +1,102 @@
+// 导入变量和混合器
+@import './variables.scss';
+@import './mixins.scss';
+
+// 全局样式重置
+.star-reset {
+  box-sizing: border-box;
+  
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  
+  // 解决 H5 平台的一些问题
+  uni-page-body {
+    height: 100%;
+  }
+  
+  uni-page-body,
+  uni-page-head {
+    background-color: $bg-color;
+  }
+}
+
+// 工具类
+.star-text-center {
+  text-align: center;
+}
+
+.star-text-left {
+  text-align: left;
+}
+
+.star-text-right {
+  text-align: right;
+}
+
+.star-pull-left {
+  float: left;
+}
+
+.star-pull-right {
+  float: right;
+}
+
+.star-clearfix {
+  @include clearfix;
+}
+
+.star-ellipsis {
+  @include ellipsis;
+}
+
+// 间距工具类
+@each $size, $value in (
+  xs: $spacing-xs,
+  sm: $spacing-sm,
+  base: $spacing-base,
+  lg: $spacing-lg,
+  xl: $spacing-xl
+) {
+  .star-m-#{$size} {
+    margin: $value;
+  }
+  
+  .star-mt-#{$size} {
+    margin-top: $value;
+  }
+  
+  .star-mr-#{$size} {
+    margin-right: $value;
+  }
+  
+  .star-mb-#{$size} {
+    margin-bottom: $value;
+  }
+  
+  .star-ml-#{$size} {
+    margin-left: $value;
+  }
+  
+  .star-p-#{$size} {
+    padding: $value;
+  }
+  
+  .star-pt-#{$size} {
+    padding-top: $value;
+  }
+  
+  .star-pr-#{$size} {
+    padding-right: $value;
+  }
+  
+  .star-pb-#{$size} {
+    padding-bottom: $value;
+  }
+  
+  .star-pl-#{$size} {
+    padding-left: $value;
+  }
+}

package/styles/mixins.scss

@@ -0,0 +1,84 @@
+// 清除浮动
+@mixin clearfix {
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+// 单行省略
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 多行省略
+@mixin multi-ellipsis($lines: 2) {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+}
+
+// 1px 边框（解决移动端 Retina 屏边框问题）
+@mixin hairline($color: $border-color, $direction: bottom) {
+  position: relative;
+  
+  &::after {
+    content: "";
+    position: absolute;
+    #{$direction}: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: $color;
+    transform: scaleY(0.5);
+    transform-origin: 0 0;
+  }
+}
+
+// 禁用状态
+@mixin disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+// 弹性布局快捷方式
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin flex-around {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+// 响应式
+@mixin respond-to($breakpoint) {
+  @if $breakpoint == 'xs' {
+    @media (max-width: 575px) { @content; }
+  } @else if $breakpoint == 'sm' {
+    @media (min-width: 576px) { @content; }
+  } @else if $breakpoint == 'md' {
+    @media (min-width: 768px) { @content; }
+  } @else if $breakpoint == 'lg' {
+    @media (min-width: 992px) { @content; }
+  } @else if $breakpoint == 'xl' {
+    @media (min-width: 1200px) { @content; }
+  } @else if $breakpoint == 'xxl' {
+    @media (min-width: 1600px) { @content; }
+  }
+}

package/styles/variables.scss

@@ -0,0 +1,64 @@
+// 颜色系统
+$white: #ffffff;
+$black: #000000;
+
+// 主色调
+$primary-color: #2979ff;
+$primary-color-light: #5cadff;
+$primary-color-dark: #2b85e4;
+
+// 功能色
+$success-color: #19be6b;
+$warning-color: #ff9900;
+$error-color: #fa3534;
+$info-color: #909399;
+
+// 中性色
+$text-color: #333333;
+$text-color-secondary: #666666;
+$text-color-light: #999999;
+$text-color-disabled: #c0c4cc;
+
+$bg-color: #ffffff;
+$bg-color-grey: #f5f5f5;
+$bg-color-hover: #f6f6f6;
+
+$border-color: #e4e7ed;
+$border-color-light: #ebeef5;
+
+// 阴影
+$box-shadow-base: 0 2px 12px rgba(0, 0, 0, 0.1);
+$box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.09);
+$box-shadow-dark: 0 2px 16px rgba(0, 0, 0, 0.2);
+
+// 边框半径
+$border-radius-base: 4px;
+$border-radius-sm: 2px;
+$border-radius-lg: 8px;
+$border-radius-circle: 50%;
+
+// 字体
+$font-size-xs: 10px;
+$font-size-sm: 12px;
+$font-size-base: 14px;
+$font-size-lg: 16px;
+$font-size-xl: 18px;
+$font-size-xxl: 20px;
+
+// 间距
+$spacing-xs: 4px;
+$spacing-sm: 8px;
+$spacing-base: 16px;
+$spacing-lg: 24px;
+$spacing-xl: 32px;
+
+// 层级
+$z-index-normal: 1;
+$z-index-dropdown: 1000;
+$z-index-sticky: 1020;
+$z-index-fixed: 1030;
+$z-index-modal-backdrop: 1040;
+$z-index-modal: 1050;
+$z-index-popover: 1060;
+$z-index-tooltip: 1070;
+$z-index-toast: 1080;