feat: 添加 基础& 视图组件

Author: pengshanglong

project.config.json

@@ -11,5 +11,7 @@
 		"newFeature": true
 	},
 	"compileType": "miniprogram",
+	"simulatorType": "wechat",
+	"simulatorPluginLibVersion": {},
 	"condition": {}
 }

src/app.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import store from './store'
 import './app.scss'
+import './utils/vue-prototype'
 // Vue.config.productionTip = false
 
 const App = new Vue({

src/components/activity-indicator/index.jsx

@@ -0,0 +1,53 @@
+import classNames from 'classnames'
+import Loading from '../loading/index.jsx'
+
+export default {
+  name: 'ActivityIndicator',
+  props: {
+    size: {
+      type: Number,
+      default: 0,
+    },
+    mode: {
+      type: String,
+      default: 'normal',
+    },
+    color: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    className: {
+      type: [Array, String],
+      default: () => '',
+    },
+    isOpened: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  render() {
+    const { color, size, mode, content, isOpened, className } = this
+
+    const rootClass = classNames(
+      'at-activity-indicator',
+      {
+        'at-activity-indicator--center': mode === 'center',
+        'at-activity-indicator--isopened': isOpened,
+      },
+      className
+    )
+
+    return (
+      <view class={rootClass}>
+        <view class="at-activity-indicator__body">
+          <Loading size={size} color={color} />
+        </view>
+        {content && <text class="at-activity-indicator__content">{content}</text>}
+      </view>
+    )
+  },
+}

src/components/avatar/index.jsx

@@ -0,0 +1,71 @@
+import classNames from 'classnames'
+
+const SIZE_CLASS = {
+  large: 'large',
+  normal: 'normal',
+  small: 'small',
+}
+
+export default {
+  name: 'Avatar',
+  props: {
+    size: {
+      type: String,
+      default: 'normal',
+      validator: (val) => ['large', 'normal', 'small'].includes(val),
+    },
+    circle: {
+      type: Boolean,
+      default: false,
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+    image: {
+      type: String,
+      default: '',
+    },
+    openData: {
+      type: Object,
+      default: () => {},
+    },
+    customStyle: {
+      type: [Object, String],
+      default: () => {},
+    },
+    className: {
+      type: [Array, String],
+      default: () => '',
+    },
+  },
+
+  render() {
+    const { size, circle, image, text, openData, customStyle, className } = this
+    const rootClassName = ['at-avatar']
+    const iconSize = SIZE_CLASS[size || 'normal']
+    const classObject = {
+      [`at-avatar--${iconSize}`]: iconSize,
+      'at-avatar--circle': circle,
+    }
+
+    let letter = ''
+    if (text) letter = text[0]
+
+    let elem
+    if (openData && openData.type === 'userAvatarUrl' && this.$isWEAPP()) {
+      // TODO OpenData Component
+      elem = <OpenData type={openData.type}></OpenData>
+    } else if (image) {
+      elem = <image class="at-avatar__img" src={image} />
+    } else {
+      elem = <text class="at-avatar__text">{letter}</text>
+    }
+
+    return (
+      <view class={classNames(rootClassName, classObject, className)} style={customStyle}>
+        {elem}
+      </view>
+    )
+  },
+}

src/components/badge/index.jsx

@@ -0,0 +1,60 @@
+import classNames from 'classnames'
+import Taro from '@tarojs/taro'
+
+/**
+ * formatValue
+ * @param {string | number | undefined} value
+ * @param {number} maxValue
+ * @return string | number
+ */
+const formatValue = (value, maxValue) => {
+  if (value === '' || value === null || value === undefined) return ''
+  const numValue = +value
+  if (Number.isNaN(numValue)) {
+    return value
+  }
+  return numValue > maxValue ? `${maxValue}+` : numValue
+}
+
+export default {
+  name: 'Badge',
+  props: {
+    dot: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+    maxValue: {
+      type: Number,
+      default: 99,
+    },
+    customStyle: {
+      type: [String, Object],
+      default: () => {},
+    },
+    className: {
+      type: [String, Array],
+      default: '',
+    },
+  },
+
+  render() {
+    const { dot, customStyle, className, maxValue, value } = this
+    const rootClassName = ['at-badge']
+
+    const val = formatValue(value, maxValue)
+    return (
+      <view class={classNames(rootClassName, className)} style={customStyle}>
+        {this.$slots.default}
+        {dot ? (
+          <view class="at-badge__dot"></view>
+        ) : (
+          val !== '' && <view class="at-badge__num">{val}</view>
+        )}
+      </view>
+    )
+  },
+}