@star-ai/star-ui 0.0.2

package/package.json

@@ -0,0 +1,132 @@
+{
+  "name": "@star-ai/star-ui",
+  "version": "0.0.2",
+  "description": "基于Uniapp的Vue2组件库",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "packages"
+  ],
+  "scripts": {
+    "serve": "npm run dev:h5",
+    "build:lib": "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"
+  },
+  "dependencies": {
+    "@dcloudio/uni-app": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-app-plus": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-h5": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-i18n": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-mp-360": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-mp-alipay": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-mp-baidu": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-mp-harmony": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-mp-jd": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-mp-kuaishou": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-mp-lark": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-mp-qq": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-mp-toutiao": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-mp-vue": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-mp-weixin": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-mp-xhs": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-quickapp-native": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-quickapp-webview": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-stacktracey": "^2.0.2-4080720251210002",
+    "@dcloudio/uni-stat": "^2.0.2-4080720251210002",
+    "@vue/shared": "^3.0.0",
+    "core-js": "^3.8.3",
+    "flyio": "^0.6.2",
+    "vue": ">= 2.6.14 < 2.7",
+    "vuex": "^3.2.0"
+  },
+  "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",
+    "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/packages/components/Button/Button.vue

@@ -0,0 +1,325 @@
+<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/packages/components/Button/index.js

@@ -0,0 +1,8 @@
+import StarButton from './Button.vue'
+
+// 为组件添加 install 方法，用于 Vue.use()
+StarButton.install = function(Vue) {
+  Vue.component(StarButton.name, StarButton)
+}
+
+export default StarButton