officialblock 1.0.0 → 1.0.2

package/src/components/Button/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <div v-if="type === 'button'" class="button-primary flex-inline flex-center justify-center"  @click="handleButtonClick">
+    <span class="button-text">{{ data.text }}</span>
+    <span class="button-icon"></span>
+  </div>
+  <div v-else class="link-button flex-inline flex-center justify-center" @click="handleButtonClick">
+    <span class="link-text">{{ data.text }}</span>
+    <span class="button-icon link-icon"></span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'button', // button | link
+  },
+
+  data: {
+    type: Object,
+    default: () => {},
+  },
+})
+
+// TODO: 内部跳转
+const handleButtonClick = () => {
+  window.open(props.data.url, '_blank')
+}
+
+console.log('data=====', props.data)
+</script>
+
+<style scoped lang="scss">
+.button-icon {
+  width: 18px;
+  height: 18px;
+  border-radius: $radius-full;
+  overflow: hidden;
+  background-color: $bg-primary;
+  position: relative;
+  margin-left: $spacing-xs;
+  transition: background-color $transition-normal;
+  flex-shrink: 0;
+
+  &::before, &::after { 
+    content: "";
+    width: 6px;
+    height: 9px;
+    position: absolute;
+    top: 50%;
+    left: 57%;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiMwMDFFNjAiLz4KPC9zdmc+Cgo=);
+    background-position: 50%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-color: hsla(0,0%,100%,0);
+    transition: transform .3s ease-in-out
+  }
+
+  &::before {
+    transform: translate(-260%,-50%)
+  }
+
+  &::after {
+    transform: translate(-50%,-50%)
+  }
+}
+
+.link-icon {
+  background-color: $primary-color;
+
+  &::before, &::after { 
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
+  }
+}
+
+.link-button {
+  overflow: hidden;
+  text-decoration: none;
+  position: relative;
+  z-index: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all $transition-normal;
+
+  .link-text {
+    font-weight: $font-weight-medium;
+    letter-spacing: .04em;
+    color: $text-important;
+    transition: color $transition-normal;
+  }
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 200%;
+    height: 500%;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    transition: all $transition-normal;
+    z-index: -1;
+    -webkit-clip-path: circle(100% at -80% 90%);
+    clip-path: circle(100% at -80% 90%)
+  }
+
+  &:hover::before {
+    -webkit-clip-path: circle(100% at 50% 50%);
+    clip-path: circle(100% at 50% 50%)
+  }
+
+  &:hover {
+    .button-icon:before {
+      transform: translate(-50%,-50%)
+    }
+
+    .button-icon:after {
+      transform: translate(150%,-50%)
+    }
+
+    .button-icon:after, .button-icon:before {
+      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=);
+      background-position: 50%;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-color: hsla(0,0%,100%,0);
+    }
+  }
+}
+
+.button-primary {
+  @extend .link-button;
+  background-color: $button-bg;
+  padding: 11px 15px;
+  min-width: 160px;
+  border-radius: $radius-sm;
+  box-shadow: $shadow-sm;
+
+  .button-text {
+    font-weight: $font-weight-medium;
+    letter-spacing: .04em;
+    color: $text-white;
+    transition: color $transition-normal;
+  }
+
+  &::before {
+    background: $button-hover-bg;
+  }
+
+  .button-icon:after, .button-icon:before {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNiA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMC4yMzUxOTYgNy42MjA3OUwzLjM2MDE4IDQuNDk1OEwwLjIzNTE5NiAxLjM3MDgyQzAuMTYwNjMgMS4yOTYyNSAwLjEwMTQ4MSAxLjIwNzczIDAuMDYxMTI1OSAxLjExMDMxQzAuMDIwNzcxIDEuMDEyODggMS41NzEzN2UtMDkgMC45MDg0NiAwIDAuODAzMDA4Qy0xLjU3MTM2ZS0wOSAwLjY5NzU1NSAwLjAyMDc3MSAwLjU5MzEzNSAwLjA2MTEyNTkgMC40OTU3MUMwLjEwMTQ4MSAwLjM5ODI4NSAwLjE2MDYzIDAuMzA5NzYyIDAuMjM1MTk2IDAuMjM1MTk1QzAuMzA5NzYyIDAuMTYwNjI5IDAuMzk4Mjg1IDAuMTAxNDggMC40OTU3MSAwLjA2MTEyNTFDMC41OTMxMzYgMC4wMjA3NzAyIDAuNjk3NTU2IC0xLjU3MTM3ZS0wOSAwLjgwMzAwOCAwQzAuOTA4NDYxIDEuNTcxMzdlLTA5IDEuMDEyODggMC4wMjA3NzAyIDEuMTEwMzEgMC4wNjExMjUxQzEuMjA3NzMgMC4xMDE0OCAxLjI5NjI1IDAuMTYwNjI5IDEuMzcwODIgMC4yMzUxOTVMNS4wNjc2NCAzLjkzMjAyQzUuMzgxNzUgNC4yNDYxMyA1LjM4MTc1IDQuNzUzNTMgNS4wNjc2NCA1LjA2NzY0TDEuMzcwODIgOC43NjQ0NkMxLjI5NjMxIDguODM5MTMgMS4yMDc4IDguODk4MzYgMS4xMTAzNyA4LjkzODc4QzEuMDEyOTQgOC45NzkyIDAuOTA4NDkxIDkgMC44MDMwMDggOUMwLjY5NzUyNSA5IDAuNTkzMDc4IDguOTc5MiAwLjQ5NTY0NSA4LjkzODc4QzAuMzk4MjEyIDguODk4MzYgMC4zMDk3MDcgOC44MzkxMyAwLjIzNTE5NiA4Ljc2NDQ2Qy0wLjA3MDg1OTEgOC40NTAzNSAtMC4wNzg5MTMyIDcuOTM0ODkgMC4yMzUxOTYgNy42MjA3OVoiIGZpbGw9IiMwMDFFNjAiLz4KPC9zdmc+Cgo=) !important;
+  }
+}
+
+@media(max-width: 1023.98px) {
+  .button-primary {
+    padding:11px 15px;
+    min-width: 100px
+  }
+}
+
+@media(max-width: 767.98px) {
+  .button-primary {
+    padding:8px 12px;
+    min-width: 80px
+  }
+}
+
+@media(max-width: 1023.98px) {
+  .button-primary {
+    padding:11px 15px;
+    min-width: 100px
+  }
+}
+
+@media(max-width: 767.98px) {
+  .button-primary {
+    padding:8px 12px;
+    min-width: 80px
+  }
+}
+</style>

package/src/components/HeroSlide/index.ts

@@ -8,3 +8,4 @@ export default {
 } satisfies Plugin
 
 export { default as HeroSlide } from './index.vue'
+export type { HeroSlideProps, HeroSlideEmits, SlideItem } from './type'

package/src/components/HeroSlide/index.vue

@@ -11,7 +11,7 @@
         <p>{{ slide.description }}</p>
       </div>
     </div>
-    <div class="slide-indicators">
+    <div v-if="showIndicators" class="slide-indicators">
       <span
         v-for="(_, index) in slides"
         :key="index"
@@ -25,9 +25,23 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
+import type { HeroSlideProps, HeroSlideEmits, SlideItem } from './type'
+
+// 定义组件名称
+defineOptions({
+  name: 'HeroSlide'
+})
+
+const props = withDefaults(defineProps<HeroSlideProps>(), {
+  autoPlayInterval: 3000,
+  showIndicators: true,
+  autoPlay: true
+})
+
+const emit = defineEmits<HeroSlideEmits>()
 
 const currentSlide = ref(0)
-const slides = ref([
+const slides = ref<SlideItem[]>([
   { title: '轮播图标题 1', description: '这是第一张轮播图的描述内容' },
   { title: '轮播图标题 2', description: '这是第二张轮播图的描述内容' },
   { title: '轮播图标题 3', description: '这是第三张轮播图的描述内容' }
@@ -37,14 +51,18 @@ let autoPlayTimer: number | null = null
 
 const goToSlide = (index: number) => {
   currentSlide.value = index
+  emit('change', index)
 }
 
 const nextSlide = () => {
   currentSlide.value = (currentSlide.value + 1) % slides.value.length
+  emit('change', currentSlide.value)
 }
 
 const startAutoPlay = () => {
-  autoPlayTimer = window.setInterval(nextSlide, 3000)
+  if (props.autoPlay) {
+    autoPlayTimer = window.setInterval(nextSlide, props.autoPlayInterval)
+  }
 }
 
 const stopAutoPlay = () => {

package/src/components/HeroSlide/type.ts

@@ -0,0 +1,19 @@
+export interface HeroSlideProps {
+  /** 自动播放间隔时间（毫秒） */
+  autoPlayInterval?: number
+  /** 是否显示指示器 */
+  showIndicators?: boolean
+  /** 是否启用自动播放 */
+  autoPlay?: boolean
+}
+
+export interface HeroSlideEmits {
+  (e: 'change', index: number): void
+  (e: 'click', index: number): void
+}
+
+export interface SlideItem {
+  title: string
+  description: string
+  image?: string
+}

package/src/components/Media/index.vue

@@ -0,0 +1,327 @@
+<template>
+  <div class="image-container" v-if="type === 'Image'">
+    <a-image class="image" :src="data.imgSrc" :preview="preview" :alt="data.alt" fit="contain" width="100%" height="100%" />
+    <p class="image-desc" v-if="data.caption">{{ data.caption }}</p>
+  </div>
+
+  <div class="video-container flex-inline flex-center justify-center" v-if="type === 'Video'">
+    <!-- 获取播放状态 -->
+    <video class="video" ref="videoElement" :src="data.videoSrc" controls></video>
+    <template v-if="!isPlaying">
+      <div class="video-thumbnail flex flex-center justify-center">
+        <img :src="data.imgSrc">
+      </div>
+      <div class="play-button flex flex-center justify-center" @click="playVideo">
+        <icon-caret-right style="color: #fff" />
+      </div>
+    </template>
+  </div>
+
+  <div class="image-list-container" v-if="type === 'ImageList'">
+    <div class="image-preview" v-if="previewUrl">
+      <a-image class="image" :src="previewUrl" :preview="preview" fit="contain" width="100%" height="100%" />
+    </div>
+    <div class="image-list-wrapper">
+      <div
+        class="thumbnail__nav__prev"
+        v-show="showPrev"
+        @click="scrollPrev"
+      >
+        ‹
+      </div>
+      <div class="image-list" ref="imageListRef" @scroll="onScroll">
+        <template v-for="item in data.imageList" :key="item.id">
+          <img
+            v-if="item.src"
+            class="image"
+            :src="item.src"
+            @click="setPreviewUrl(item.src)"
+          />
+        </template>
+      </div>
+      <div
+        class="thumbnail__nav__next"
+        v-show="showNext"
+        @click="scrollNext"
+      >
+        ›
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted, nextTick, onUnmounted } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'Image' // Image | Video | ImageList
+  },
+  data: {
+    type: Object,
+    default: () => {}
+  },
+  // imgSrc: {
+  //   type: String,
+  //   default: 'https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg'
+  // },
+  preview: {
+    type: Boolean,
+    default: true
+  },
+  // videoSrc: {
+  //   type: String,
+  //   default: 'http://mpv.videocc.net/4b964bbdf4/3/4b964bbdf481505df84cfd703c4b3043_2.mp4'
+  // },
+  // caption: {
+  //   type: String,
+  //   default: '图片'
+  // },
+  // imageList: {
+  //   type: Array as PropType<string[]>,
+  //   default: () => ['https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg', 'https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg']
+  // }
+})
+
+const videoElement = ref<HTMLVideoElement>();
+const isPlaying = ref<boolean>(false);
+const playVideo = () => {
+  videoElement.value?.play();
+  isPlaying.value = true;
+}
+
+const previewUrl = ref<string>(props.data?.imageList?.[0]?.src || '');
+const setPreviewUrl = (url: string) => {
+  previewUrl.value = url;
+}
+
+const imageListRef = ref<HTMLDivElement | null>(null)
+const showPrev = ref(false)
+const showNext = ref(false)
+
+const checkScroll = () => {
+  const el = imageListRef.value
+  if (!el) return
+  showPrev.value = el.scrollLeft > 0
+  showNext.value = el.scrollLeft + el.clientWidth < el.scrollWidth
+}
+
+const scrollPrev = () => {
+  const el = imageListRef.value
+  if (!el) return
+  el.scrollBy({ left: -el.clientWidth / 1.5, behavior: 'smooth' })
+}
+
+const scrollNext = () => {
+  const el = imageListRef.value
+  if (!el) return
+  el.scrollBy({ left: el.clientWidth / 1.5, behavior: 'smooth' })
+}
+
+const onScroll = () => {
+  checkScroll()
+}
+
+watch(() => props.data?.imageList, async () => {
+  await nextTick()
+  checkScroll()
+})
+
+onMounted(() => {
+  window.addEventListener('resize', checkScroll)
+  nextTick(checkScroll)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkScroll)
+})
+</script>
+
+<style lang="scss" scoped>
+.image-container {
+  width: 100%;
+  position: relative;
+
+  .image {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+  }
+
+  .image-desc {
+    margin-top: 12px;
+    font-size: $font-size-sm;
+    line-height: $line-height-relaxed;
+    letter-spacing: .01em;
+  }
+}
+
+.video-container {
+  position: relative;
+  width: 100%;
+  height: auto;
+  cursor: pointer;
+  overflow: hidden;
+
+  .video {
+    width: 100%;
+    height: auto;
+  }
+
+  .video-thumbnail {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+
+    img {
+      height: 100%;
+    }
+  }
+
+  .play-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 3em;
+    line-height: 1.5em;
+    height: 1.63332em;
+    width: 3em;
+    opacity: 1;
+    border: .06666em solid #fff;
+    background-color: #2b333f;
+    background-color: rgba(43, 51, 63, .7);
+    border-radius: .3em;
+    transition: all .4s;
+    cursor: pointer;
+  }
+}
+
+.image-list-container {
+  width: 100%;
+
+  .image-preview {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 58.33%;
+    overflow: hidden;
+
+    .image {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      cursor: pointer;
+    }
+  }
+
+  .image-list-wrapper {
+    position: relative;
+
+    .image-list {
+      display: flex;
+      margin-top: 12px;
+      overflow-x: scroll;
+      overflow-y: hidden;
+      scroll-behavior: smooth;
+      scrollbar-color: transparent;
+      scrollbar-width: none;
+
+      .image {
+        flex-shrink: 0;
+        width: 87.4px;
+        height: 55px;
+        cursor: pointer;
+      }
+
+      .image:not(:last-of-type) {
+        margin-right: 10.6px
+      }
+    }
+
+    .thumbnail__nav__prev,
+    .thumbnail__nav__next {
+      position: absolute;
+      width: 33px;
+      height: 100%;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+      cursor: pointer;
+    }
+
+    .thumbnail__nav__prev {
+      left: -1px;
+    }
+
+    .thumbnail__nav__prev:after {
+      transform: scale(-1);
+    }
+
+    .thumbnail__nav__next {
+      right: -1px;
+    }
+  }
+}
+
+@media(max-width: 767.98px) {
+  .image-container .image {
+    border-radius: 0;
+  }
+}
+
+@media(max-width: 1023.98px) {
+  .image-desc p {
+    font-size:14px;
+    line-height: 1.714;
+    letter-spacing: .01em
+  }
+}
+
+@media(max-width: 767.98px) {
+  .video-container {
+    width:100vw;
+    padding: 0
+  }
+}
+
+@media(max-width: 767.98px) {
+  .image-list-container .image-preview {
+    padding-bottom:68.75%
+  }
+}
+
+@media(max-width: 1023.98px) {
+  .thumbnail__nav__prev,
+  .thumbnail__nav__next {
+    width:28px
+  }
+}
+
+@media(max-width: 767.98px) {
+  .thumbnail__nav__prev,
+  .thumbnail__nav__next {
+    box-shadow:0 4px 4px hsla(0,0%,100%,.2)
+  }
+}
+
+@media(max-width: 900px) {
+  .image-list-container .image-list-wrapper .image-list .image {
+    width:80px
+  }
+}
+
+@media(max-width: 767.98px) {
+  .image-list-container .image-list-wrapper .image-list .image {
+    width:75px
+  }
+}
+</style>

package/src/components/Operate/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="operate-page" v-show="show">
+    <div class="operate-btn flex justify-end">
+      <div class="btn-item btn-copy flex items-center" @click="handleCopy">
+        <icon-copy />
+        <span class="btn-text">复制</span>
+      </div>
+      <div class="btn-item btn-delete flex items-center" @click="handleDelete">
+        <icon-delete />
+        <span class="btn-text">删除</span>
+      </div>
+      <div class="btn-item btn-edit flex items-center" @click="handleEdit">
+        <icon-edit />
+        <span class="btn-text">编辑</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['handleCopy', 'handleDelete', 'handleEdit'])
+
+const handleCopy = () => {
+  emit('handleCopy')
+}
+const handleDelete = () => {
+  emit('handleDelete')
+}
+const handleEdit = () => {
+  emit('handleEdit')
+}
+</script>
+
+<style lang="scss" scoped>
+.operate-page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 20px;
+
+  .operate-btn {
+    .btn-item {
+      margin-left: 12px;
+      padding: 4px 16px;
+      font-size: 10px;
+      color: #fff;
+      border-radius: 4px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+
+    .btn-copy {
+      background: $warning-color;
+    }
+
+    .btn-delete {
+      background: $error-color;
+    }
+
+    .btn-edit {
+      background: $primary-color;
+    }
+  }
+}
+</style>