overseas 0.0.1

package/packages/base/button/src/button.vue

@@ -0,0 +1,108 @@
+<template>
+  <button class="ts-button"
+          :disabled="buttonDisabled"
+          :autofocus="autofocus"
+          :type="type"
+          :class="[
+            styleType ? 'ts-button--' + styleType : '',
+            buttonSize ? 'ts-button--' + buttonSize : '',
+            {
+              'is-disabled': buttonDisabled,
+              'is-loading': loading,
+              'is-outline': outline,
+              'is-round': round,
+            }
+          ]"
+          :style="{'width': width, 'height': height, 'color': textColor, 'background': bgColor, 'border-color': borderColor}"
+          @click="handleClick"
+  >
+    <span v-if="loading" class="iconfont icon-loading" />
+    <slot>
+      TSButton
+    </slot>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'TsButton',
+  props: {
+    // 尺寸(small | normal | large)
+    size: {
+      type: String,
+      default: 'normal',
+    },
+    // 样式类型(default | primary | assist)
+    styleType: {
+      type: String,
+      default: 'default',
+    },
+    // 圆角为半圆
+    round: {
+      type: Boolean,
+      default: true,
+    },
+    // 文本颜色
+    textColor: {
+      type: String,
+      default: '',
+    },
+    // 边框颜色
+    borderColor: {
+      type: String,
+      default: '',
+    },
+    // 背景色
+    bgColor: {
+      type: String,
+      default: '',
+    },
+    // 按钮宽度
+    width: {
+      type: String,
+      default: '',
+    },
+    // 按钮高度
+    height: {
+      type: String,
+      default: '',
+    },
+    // 原生 type 属性(button | submit | reset)
+    type: {
+      type: String,
+      default: 'button',
+    },
+    // 是否是线框按钮
+    outline: {
+      default: false,
+      type: Boolean,
+    },
+    // 是否处于loading状态
+    loading: {
+      default: false,
+      type: Boolean,
+    },
+    disabled: {
+      default: false,
+      type: Boolean,
+    },
+    autofocus: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  computed: {
+    buttonSize() {
+      return this.size
+    },
+    buttonDisabled() {
+      return this.disabled || this.loading
+    },
+  },
+  methods: {
+    handleClick(e) {
+      this.$emit('click', e);
+    },
+  },
+}
+</script>

package/packages/base/dialog/index.js

@@ -0,0 +1,10 @@
+import TsDialog from './src/dialog.vue'
+
+// install 是默认的方法，供按需引入
+// 当外界在 use 这个组件的时候，就会调用本身的install方法，同时传一个Vue这个类的参数
+
+TsDialog.install = (Vue) => {
+  Vue.component(TsDialog.name, TsDialog)
+}
+
+export default TsDialog

package/packages/base/dialog/src/dialog.vue

@@ -0,0 +1,173 @@
+<template>
+  <transition name="dialog-fade">
+    <div v-show="visible" class="ts-dialog-wrapper" @click.self="handleWrapperClick">
+      <div
+        :key="key"
+        ref="dialog"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="title || 'dialog'"
+        :class="['ts-dialog', {'is-center': center}, {'is-round': isRound}]"
+        :style="{'width': width}"
+      >
+        <div class="ts-dialog__header" :style="{'background-color': headerBg}">
+          <slot name="header">
+            <div class="ts-normal-header-container">
+              <div v-if="showLeftIcon" class="ts-header-left-container">
+                <slot name="left-icon">
+                  <div class="ts-header-icon-btn-container" @click="leftIconHandler">
+                    <i class="iconfont icon-close-new-e658" />
+                  </div>
+                </slot>
+              </div>
+              <div class="ts-title-container">
+                <slot name="header-title">
+                  <div class="title font-semibold">
+                    {{ title }}
+                  </div>
+                </slot>
+              </div>
+              <div v-if="showRightIcon" class="ts-header-right-container">
+                <slot name="right-icon">
+                  <div class="ts-header-icon-btn-container success-icon-container" @click="rightIconHandler">
+                    <i class="iconfont icon-success" />
+                  </div>
+                </slot>
+              </div>
+            </div>
+            <slot name="header-bottom" />
+          </slot>
+        </div>
+        <div class="ts-dialog__body" :style="{'background-color': bodyBg}">
+          <slot name="body" />
+        </div>
+        <div class="ts-dialog__footer">
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Popup from '../../../../src/utils/popup/index';
+
+export default {
+  name: 'TsDialog',
+  mixins: [Popup],
+  props: {
+    // 是否插入到body节点
+    appendToBody: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示遮罩层
+    modal: {
+      type: Boolean,
+      default: true,
+    },
+    // 弹窗标题
+    title: {
+      type: String,
+      default: 'title',
+    },
+    // 是否显示左侧icon
+    showLeftIcon: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否显示右侧icon
+    showRightIcon: {
+      type: Boolean,
+      default: false,
+    },
+    // 头部背景色
+    headerBg: {
+      type: String,
+      default: '#fff',
+    },
+    // body背景色
+    bodyBg: {
+      type: String,
+      default: '#fff',
+    },
+    // 弹窗宽度
+    width: {
+      type: String,
+      default: '50%',
+    },
+    // 是否居中显示弹窗
+    center: {
+      type: Boolean,
+      default: true,
+    },
+    // 样式相关配置
+    isRound: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      closed: false,
+      key: 0,
+    }
+  },
+  watch: {
+    visible(val) {
+      console.log(val)
+      if (val) {
+        this.closed = false
+        this.$emit('open');
+        if (this.appendToBody) {
+          document.body.appendChild(this.$el);
+        }
+      } else {
+        if (!this.closed) this.$emit('close');
+        if (this.destroyOnClose) {
+          this.$nextTick(() => {
+            this.key += 1;
+          });
+        }
+      }
+    },
+  },
+  mounted() {
+    if (this.visible) {
+      this.rendered = true;
+      this.open();
+      if (this.appendToBody) {
+        document.body.appendChild(this.$el);
+      }
+    }
+  },
+  methods: {
+    rightIconHandler() {
+      this.$emit('right-icon-handler');
+    },
+    leftIconHandler() {
+      this.$emit('left-icon-handler');
+    },
+    handleWrapperClick() {
+      console.log('handle wrapper click')
+      if (!this.closeOnClickModal) return;
+      this.handleClose();
+    },
+    handleClose() {
+      console.log('handler close')
+
+      this.hide();
+    },
+    hide(cancel) {
+      console.log('close hide func')
+      if (cancel !== false) {
+        this.$emit('update:visible', false);
+        this.$emit('close');
+        this.closed = true;
+        console.log('123')
+        console.log(this.visible)
+      }
+    },
+  },
+}
+</script>

package/packages/base/icon/index.js

@@ -0,0 +1,10 @@
+import TsIcon from './src/icon.vue'
+
+// install 是默认的方法，供按需引入
+// 当外界在 use 这个组件的时候，就会调用本身的install方法，同时传一个Vue这个类的参数
+
+TsIcon.install = (Vue) => {
+  Vue.component(TsIcon.name, TsIcon)
+}
+
+export default TsIcon

package/packages/base/icon/src/icon.vue

@@ -0,0 +1,15 @@
+<template>
+  <i :class="`iconfont icon-${name}`" />
+</template>
+
+<script>
+export default {
+  name: 'TsIcon',
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+  },
+}
+</script>

package/packages/base/image/index.js

@@ -0,0 +1,10 @@
+import TsImage from './src/image.vue'
+
+// install 是默认的方法，供按需引入
+// 当外界在 use 这个组件的时候，就会调用本身的install方法，同时传一个Vue这个类的参数
+
+TsImage.install = (Vue) => {
+  Vue.component(TsImage.name, TsImage)
+}
+
+export default TsImage

package/packages/base/image/src/image.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="image-section-wrapper">
+    <img v-if="src" class="img-section" :src="src" :alt="alt" :width="width" :height="height" :object-fit="fit">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TsImage',
+  props: {
+    src: {
+      default: '',
+      type: String,
+    },
+    // img 标签原生object-fit属性
+    fit: {
+      default: 'contain',
+      type: String,
+    },
+    // img 原生属性
+    width: {
+      default: '',
+      type: String,
+    },
+    height: {
+      default: '',
+      type: String,
+    },
+    alt: {
+      default: 'image',
+      type: String,
+    },
+  },
+  data() {
+    return {
+
+    }
+  },
+}
+</script>

package/packages/base/material-list/index.js

@@ -0,0 +1,10 @@
+import MaterialList from './src/material-list'
+
+// install 是默认的方法，供按需引入
+// 当外界在 use 这个组件的时候，就会调用本身的install方法，同时传一个Vue这个类的参数
+
+MaterialList.install = (Vue) => {
+  Vue.component(MaterialList.name, MaterialList)
+}
+
+export default MaterialList

package/packages/base/material-list/src/material-list.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="material-list">
+    <div class="material-panel_title">
+      {{ title }}
+    </div>
+    <div class="material-panel_body" :class="fileList.length>3?'more':''">
+      <div class="material-list-box">
+        <div v-for="(file, index) in fileList" :key="index" class="material">
+          <div class="material-icon" />
+          <div class="material-info">
+            <div class="material-info_title">
+              {{ file.fileName }} {{ file.fileExt ? `.${file.fileExt}` : "" }}
+            </div>
+            <div class="material-info_size">
+              {{ file.fileSize | sizeFilter }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="material-panel-masking" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MaterialList",
+  filters: {
+    sizeFilter(value) {
+      if (!value) return '';
+      if (value > 1024 * 1024) {
+        return `${Number(value / 1024 / 1024).toFixed(1)}MB`;
+      }
+      return `${Number(value / 1024).toFixed(1)}KB`;
+    },
+  },
+  props: {
+    fileList: {
+      type: Array,
+      default: () => [],
+    },
+    title: {
+      type: String,
+      default: 'Content Preview',
+    }
+  },
+};
+</script>

package/packages/base/popup/index.js

@@ -0,0 +1,10 @@
+import TsPopup from './src/popup.vue'
+
+// install 是默认的方法，供按需引入
+// 当外界在 use 这个组件的时候，就会调用本身的install方法，同时传一个Vue这个类的参数
+
+TsPopup.install = (Vue) => {
+  Vue.component(TsPopup.name, TsPopup)
+}
+
+export default TsPopup

package/packages/base/popup/src/popup.vue

@@ -0,0 +1,44 @@
+<template>
+  <transition name="popup-fade">
+    <div v-show="visible" class="ts-popup-wrapper">
+      <div class="ts-popup-content">
+        <div class="title-container">
+          <slot name="header-title">
+            <h1 class="title">
+              {{ popupTitle }}
+            </h1>
+          </slot>
+        </div>
+        <!-- 右侧按钮 -->
+        <div v-if="showRightIcon" class="ts-header-right-container">
+          <slot name="right-icon">
+            <div class="ts-header-icon-btn-container success-icon-container" @click="close">
+              <i class="iconfont icon-close-new-e658" />
+            </div>
+          </slot>
+        </div>
+
+        <div>
+          <slot />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'TsPopup',
+  props: {
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  methods: {
+    close() {
+      this.$emit('close')
+    },
+  },
+}
+</script>

package/packages/business/basic-image/index.js

@@ -0,0 +1,10 @@
+import TsBasicImage from './src/basicImage.vue'
+
+// install 是默认的方法，供按需引入
+// 当外界在 use 这个组件的时候，就会调用本身的install方法，同时传一个Vue这个类的参数
+
+TsBasicImage.install = (Vue) => {
+  Vue.component(TsBasicImage.name, TsBasicImage)
+}
+
+export default TsBasicImage

package/packages/business/basic-image/src/basicImage.vue

@@ -0,0 +1,51 @@
+<template>
+  <div @click.capture="clickLink">
+    <ts-image :src="url ? url : defaultImage" width="100%" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TsBasicImage',
+  props: {
+    url: {
+      default: '',
+      type: String,
+    },
+    // img 原生属性
+    width: {
+      default: 0,
+      type: Number,
+    },
+    height: {
+      default: 0,
+      type: Number,
+    },
+    jumpType: {
+      default: '',
+      type: String,
+    },
+    linkUrl: {
+      default: '',
+      type: String,
+    }
+  },
+  data() {
+    return {
+      defaultImage: 'https://download-pa-s3.thethinkacademy.com/static-pa/static/activity/refer/header_img.png',
+    }
+  },
+  methods: {
+    clickLink(){
+      console.log("this.jumpType", this.jumpType, this.linkUrl)
+      if (this.jumpType === 'link' && this.linkUrl) {
+        this.$emit('open-other-links', {
+          link: this.linkUrl,
+          target: '_self',
+        })
+        return
+      }
+    }
+  }
+}
+</script>

package/packages/business/bottom-fixed-button/index.js

@@ -0,0 +1,10 @@
+import TsBottomFixedButton from './src/bottomFixedButton.vue'
+
+// install 是默认的方法，供按需引入
+// 当外界在 use 这个组件的时候，就会调用本身的install方法，同时传一个Vue这个类的参数
+
+TsBottomFixedButton.install = (Vue) => {
+  Vue.component(TsBottomFixedButton.name, TsBottomFixedButton)
+}
+
+export default TsBottomFixedButton

package/packages/business/bottom-fixed-button/src/bottomFixedButton.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="bottom-fixed-btns-wrapper">
+    <div class="bottom-fixed-btns-container">
+      <slot>
+        <ts-button class="bottom-btn" style-type="primary" size="small" width="100%" height="48px" @click="bottomBtnClick">
+          {{ title }}
+        </ts-button>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TsBottomFixedButton',
+  props: {
+    title: {
+      default: 'SIGN UP NOW',
+      type: String,
+    },
+    jumpType: {
+      default: '',
+      type: String,
+    },
+    action: {
+      default: '',
+      type: String,
+    },
+    linkUrl: {
+      default: '',
+      type: String,
+    },
+  },
+  mounted() {
+    console.log("action", this.action)
+    this.$sensors.track('h5_bottom_button_show', {
+      button_name: this.title,
+      link_type: this.jumpType === 'link' && this.linkUrl ? 1 : 2,
+      link_url: this.linkUrl,
+      link_component: 1,
+    })
+    
+  },
+  methods: {
+    bottomBtnClick() {
+      if (!this.jumpType) return
+      this.$sensors.track('h5_bottom_button_click', {
+        button_name: this.title,
+        link_type: this.jumpType === 'link' && this.linkUrl ? 1 : 2,
+        link_url: this.linkUrl,
+        link_component: 1,
+      })
+      if (this.jumpType === 'link' && this.linkUrl) {
+        this.$emit('open-other-links', {
+          link: this.linkUrl,
+          target: '_self',
+        })
+        return
+      }
+      if (this.jumpType === 'action' && this.action) {
+        this.$emit('btn-click', this.action)
+      }
+    },
+  },
+}
+</script>

package/packages/business/class-choose/index.js

@@ -0,0 +1,10 @@
+import TsClassChoose from './src/index.vue'
+
+// install 是默认的方法，供按需引入
+// 当外界在 use 这个组件的时候，就会调用本身的install方法，同时传一个Vue这个类的参数
+
+TsClassChoose.install = (Vue) => {
+  Vue.component(TsClassChoose.name, TsClassChoose)
+}
+
+export default TsClassChoose