ui库和web端产品库合并版本(还需修复细节)

ui/packages/layout/AiSidebar.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="ai-sidebar">
+    <div class="ai-sidebar__tab">
+      <span
+        :class="[currIndex === index ? 'ai-sidebar__tab--active' : '']"
+        v-for="(item, index) in tabTitle"
+        :key="index"
+        @click="changeTab(index)">
+        {{ item }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AiSidebar',
+
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+
+  props: {
+    value: {
+      type: Number,
+      require: true,
+      default: 0
+    },
+    tabTitle: {
+      type: Array,
+      default: () => [],
+      required: true
+    }
+  },
+
+  watch: {
+    value (v) {
+      if (v >= 0 && this.currIndex !== v) {
+        this.currIndex = v
+      }
+    }
+  },
+
+  data() {
+    return {
+      currIndex: 0
+    }
+  },
+
+  mounted () {
+    if (this.value > 0) {
+      this.currIndex = this.value
+    }
+  },
+
+  methods: {
+    changeTab(index) {
+      this.currIndex = index
+      this.$emit('change', index)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ai-sidebar {
+  position: fixed;
+  margin-left: -20px;
+  font-size: 14px;
+  transform: translateX(-100%);
+
+  .ai-sidebar__tab {
+    min-width: 88px;
+    overflow: hidden;
+
+    span {
+      display: block;
+      height: 40px;
+      line-height: 40px;
+      padding: 0 16px;
+      text-align: center;
+      font-size: 14px;
+      font-weight: normal;
+      font-stretch: normal;
+      letter-spacing: 0;
+      color: #666666;
+      cursor: pointer;
+      border-right: 3px solid #D8DCE3;
+    }
+
+    .ai-sidebar__tab--active {
+      border-right: 3px solid $primaryColor;
+      color: $primaryColor;
+    }
+  }
+}
+</style>