17pdf_front_end/components/CodePreviewIndexNew.vue

<template>
  <div class="platform-sdk-code rounded-8px lg:w-600px">
    <div class="relative flex items-end h-48px bg-black rounded-t-8px">
      <div
        v-for="(device, index) in devices"
        :key="index"
        :class="[
          'item',
          'relative',
          'flex',
          'items-center',
          'justify-center',
          'h-48px',
          'w-110px',
          'font-600',
          'cursor-pointer',
          device === currentPlatform ? 'active-menu-bg text-white h-52px pt-4px <lg:min-w-110px' : 'text-[#AAAEB7]',
          { active: device === currentPlatform },
        ]"
        @click="currentPlatform = device"
      >
        <component :is="device" />
        <span class="inline-block ml-3px text-14px leading-20px" :class="device === currentPlatform ? '' : '<lg:hidden'">{{ device }}</span>
      </div>
    </div>
    <div class="relative flex flex-1 flex-col text-left rounded-b-8px overflow-hidden">
      <div class="pl-20px pr-16px pt-14px pb-30px bg-[#27293B] <lg:pb-14px">
        <div class="options">
          <span
            v-for="(value, key, index) in code[currentPlatform]"
            :key="key"
            class="code-tab inline-block px-6px py-2px rounded-4px text-sm font-600 text-[#FFFFFFA6]"
            :class="[
              'relative',
              currentLanguageIndex === index ? '!text-white bg-[#545C6A]' : 'hover:text-white active:text-[#FFFFFFD9]',
              index && 'ml-16px',
              'text-sm',
              'cursor-pointer'
            ]"
            @click="changeLanguage(key, index)"
          >{{ key }}</span>
        </div>
          <div class="flex-grow-1 h-340px mt-12px overflow-auto <lg:(mt-22px h-350px)">
            <div v-for="(item, index) in code[currentPlatform][currentLanguage]" :key="index" class="flex">
              <div class="mr-12px min-w-14px text-14px leading-24px text-[#94969D] text-right">{{ index + 1 }}</div>
              <pre>
                <code
                  ref="code-content"
                  class="block text-sm text-white lg:whitespace-pre-wrap"
                  v-html="item"
                ></code>
              </pre>
            </div>
          </div>
        <transition>
          <span
            v-show="copied"
            class="toast absolute bottom-60px right-10px opacity-100 py-5px px-8px text-sm rounded-4px bg-[#CCCCCC] transition-all duration-300"
          >复制</span>
        </transition>
        <span class="absolute bottom-20px right-20px flex justify-center items-center w-36px h-36px cursor-pointer bg-[#4a4b5a] text-[#C4C4C4] rounded-full hover:text-[#FFFFFF] <lg:bottom-18px">
          <Copy
            @click="copy(code[currentPlatform][currentLanguage])"
          />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { ResizeObserver } from '@juggle/resize-observer'
import clipboard from 'copy-to-clipboard'
import iOS from '~/assets/images/icons/apple_i.svg?inline'
import Mac from '~/assets/images/icons/macos_i.svg?inline'
import Android from '~/assets/images/icons/android_i.svg?inline'
import Windows from '~/assets/images/icons/windows_i.svg?inline'
import Web from '~/assets/images/icons/web_i.svg?inline'
import Copy from '~/assets/images/icons/copy_i.svg?inline'
import Guides from '~/assets/images/icons/guides.svg?inline'
import Contact from '~/assets/images/icons/contact.svg?inline'
import Arrow from '~/assets/images/icons/arrow.svg?inline'
import Trial from '~/assets/images/icons/trial.svg?inline'
import Linux from '~/assets/images/icons/linux.svg?inline'
import ArrowRight from '~/assets/images/icons/ArrowRight.svg?inline'
import ArrowRightActive from '~/assets/images/icons/ArrowRightActive.svg?inline'

export default {
  components: {
    iOS,
    Mac,
    Android,
    Windows,
    Web,
    Copy,
    Guides,
    Contact,
    Arrow,
    Trial,
    Linux,
    ArrowRight,
    ArrowRightActive
  },
  props: {
    platform: {
      default: 'iOS'
    },
    language: {
      default: 'Objective-C'
    },
    languageIndex: {
      default: 0
    },
    code: Object,
    devices: Array
  },
  data () {
    return {
      currentPlatform: this.platform,
      currentLanguage: this.language,
      currentLanguageIndex: this.languageIndex,
      copied: false,
      timer: null,
      showOptions: false,
      width: 929,
      minHidden: false,
      active: false
    }
  },
  watch: {
    code () {
      if (!this.code.Web) {
        this.currentPlatform = 'iOS'
        this.currentLanguage = 'Objective-C'
      }
    },
    currentPlatform (value, oldValue) {
      if (value === oldValue) {
        return
      }
      this.currentLanguageIndex = 0
      switch (value) {
        case 'iOS':
        case 'Mac':
          this.currentLanguage = 'Objective-C'
          break
        case 'Android':
          this.currentLanguage = 'Java'
          break
        case 'Windows':
          this.currentLanguage = 'C# WPF'
          break
        case 'Web':
          this.currentLanguage = 'JavaScript'
          break
        case 'Linux':
          this.currentLanguage = 'CMD'
          break
      }
    }
  },
  mounted () {
    document.addEventListener('click', () => {
      if (this.showOptions) {
        this.showOptions = false
      }
    })
    const ro = new ResizeObserver((entries, observer) => {
      entries.forEach((entry, index) => {
        const { inlineSize: width } = entry.borderBoxSize[0]
        this.width = width
      })
    })
    ro.observe(document.body)
  },
  methods: {
    changeLanguage (language, index) {
      if (this.currentLanguage === language) {
        return
      }
      this.currentLanguage = language
      this.currentLanguageIndex = index
    },
    handlePlatformChange (platform, index) {
      if (platform === this.currentPlatform) {
        if (this.width < 930) {
          this.minHidden = !this.minHidden
        }
        return
      }
      this.minHidden = false
      this.currentPlatform = platform
      this.$nextTick(() => {
        window.scrollTo({
          left: 0,
          top: this.$refs.platform[index].offsetTop - 66
        })
      })
    },
    getGuidesUrl () {
      if (this.currentPlatform === 'Web') {
        return false
      } else {
        return '/guides/' + this.currentPlatform.toLowerCase()
      }
    },
    copy (content) {
      content = content.join('\n')
      content = content.replace(/<\/?.+?>/g, '')
      content = content.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&').replace(/&quot;/g, '"')
      clipboard(content, {
        format: 'text/plain'
      })
      this.copied = true
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.timer = setTimeout(() => {
        this.copied = false
      }, 1500)
    }
  }
}
</script>

<style lang="scss" scoped>
  .platform-sdk-code {
    box-shadow: 0px 2.31602px 27.0202px rgba(129, 149, 200, 0.18);
  }
  .item {
    svg {
      width: 20px;
      height: 20px;
    }
    &:first-child {
      width: 100px;
      &.active-menu-bg {
        background: url('~/assets/images/home/code_menu_first_bg.svg') no-repeat;
      }
    }
    &.active-menu-bg {
      background: url('~/assets/images/home/code_menu_bg.svg') no-repeat;
    }
    &:last-child {
      width: 100px;
      &.active-menu-bg {
        background: url('~/assets/images/home/code_menu_last_bg.svg') no-repeat;
      }
    }
  }
  .over-arrow::after {
    margin-top: -5px;
    border-color: transparent transparent #000 transparent;
  }
  .code-tab {
    &::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      display: block;
      width: 0;
      height: 2px;
      background-color: transparent;
      transition: width .3s;
    }
    &.active::after {
      width: calc(100% - 40px);
      background-color: #0097FF;
    }
  }
  .toast.v-enter, .toast.v-leave-to {
    opacity: 0;
    bottom: 50px;
  }
  pre {
    font-size: 0;
    code {
      font-family: Consolas, Helvetica;
      ::v-deep {
        .hljs-variable, .statement {
          color: #7B563D;
        }
        .hljs-string, .string {
          color: #C0402D;
        }
        .hljs-keyword, .keyword {
          color: #A0459F;
        }
        .hljs-title, .title {
          color: #367AAC;
        }
        .hljs-comment, .comment {
          color: #70A14F;
        }
      }
    }
  }
  .help::after {
    content: '';
    position: absolute;
    top: -19px;
    left: 0;
    display: block;
    width: 100%;
    height: 19px;
    background: linear-gradient(90deg, rgba(20, 96, 243, 0.9) 29.22%, rgba(255, 255, 255, 0.1) 100%);
  }
  .help{
      .todemo:hover{
        ::v-deep svg:nth-child(1){
          display: none;
        }
        ::v-deep svg:nth-child(2){
          display: flex;
        }
      }
    }
  @media screen and (max-width: 929px) {
    pre::-webkit-scrollbar{
      width: 6px;
      height: 6px;
      background-color: #27293B;
    }
    pre::-webkit-scrollbar-track{
      background-color: #27293B;
    }
    pre::-webkit-scrollbar-thumb{
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 4px;
    }
    pre::-webkit-scrollbar-corner {
      background-color: transparent;
    }
    .item.active-menu-bg {
      &:first-child {
        min-width: 100px;
      }
      &:last-child {
        min-width: 100px;
      }
    }
  }
  @media screen and (max-width: 374px) {
    .help > a:first-child.cn {
      margin-right: 0px;
    }
    .help > a:last-child.cn {
      margin-left: 0px;
    }
  }
  @media screen and (min-width: 1280px) {
    .item {
      &:last-child {
        width: 110px;
        &.active-menu-bg {
          background: url('~/assets/images/home/code_menu_bg.svg') no-repeat;
        }
      }
    }
  }
</style>