officialblock 1.0.6 → 1.0.8

package/src/components/Profile/modal.vue

@@ -0,0 +1,56 @@
+<template>
+  <a-modal v-model:visible="visible" :hideTitle="true" :footer="false" bodyClass="profile-model" @cancel="handleCancel">
+    <Profile :data="data" @close="handleCancel"></Profile>
+  </a-modal>
+</template>
+
+<script setup lang="ts"> 
+import { computed } from 'vue'
+import Profile from './index.vue'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+
+  data: {
+    type: Object,
+    default: () => {}
+  }
+})
+
+const visible = computed(() => props.show)
+
+const emit = defineEmits(['update:show'])
+
+const handleCancel = () => {
+  emit('update:show', false)
+}
+</script>
+
+<style lang="scss">
+.arco-modal {
+  width: fit-content;
+}
+
+.profile-model {
+  padding: 0;
+  width: 100vw;
+  overflow: hidden;
+}
+
+@media (min-width: 768px) {
+  .profile-model {
+    max-height: calc(100vh - 160px);
+    border-radius: 12px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .profile-model {
+    border-radius: 0;
+    height: 100vh;
+  }
+}
+</style>

package/src/components/Profile/setting.vue

@@ -0,0 +1,330 @@
+<template>
+  <template v-if="showLogo">
+    <p class="item-title">学校logo</p>
+    <img class="item-img" :src="data.logo" />
+    <div class="item-uplaod flex items-center">
+      <a-input v-model="data.logo" placeholder="请输入图片链接" allow-clear />
+      <a-upload class="fit-content" :show-file-list="false" action="/" />
+    </div>
+  </template>
+  <p class="item-title">标题</p>
+  <a-input v-model="data.title" placeholder="请输入标题" allow-clear />
+  <p class="item-title">子标题</p>
+  <a-input v-model="data.subTitle" placeholder="请输入子标题" allow-clear />
+  <p class="item-title">名称</p>
+  <a-input v-model="data.name" placeholder="请输入名称" allow-clear />
+  <p class="item-title">标签</p>
+  <a-input v-model="data.label" placeholder="请输入标签" allow-clear />
+  <p class="item-title">图片</p>
+  <img class="item-img" :src="data.imgSrc" />
+  <div class="item-uplaod flex items-center">
+    <a-input v-model="data.imgSrc" placeholder="请输入图片链接" allow-clear />
+    <a-upload class="fit-content" :show-file-list="false" action="/" />
+  </div>
+  <a-input class="mt-2" v-model="data.alt" placeholder="图片alt" allow-clear />
+  <p class="item-title pt-2">按钮（最多{{ maxNum }}个）</p>
+  <draggable
+    v-model="data.buttonList.data"
+    :component-data="{
+      tag: 'div',
+      type: 'transition-group',
+      name: !drag ? 'flip-list' : null
+    }"
+    v-bind="buttonDragOptions"
+    :disabled="!shouldShowDragHandle(data.buttonList.data)"
+    @start="drag = true"
+    @end="drag = false"
+    item-key="id"
+  >
+    <template #item="{ element: button }">
+      <div
+        class="item-button item-link draggable-item"
+        :class="{ 'sortable-disabled': !shouldShowDragHandle(data.buttonList.data) }"
+        :key="button.id"
+      >
+        <div class="btn-group">
+          <div
+            v-if="shouldShowDragHandle(data.buttonList.data)"
+            class="drag-handle"
+          >
+            <icon-drag-arrow class="drag-icon" />
+          </div>
+          <icon-delete class="btn-delete" @click="handleDeleteButton(data.buttonList.data, button.id)" />
+        </div>
+        <a-button type="primary">{{ button.text }}</a-button>
+        <div class="item-action flex items-center">
+          <a-input class="action-text" v-model="button.text" placeholder="按钮文本" allow-clear />
+          <a-input v-model="button.url" placeholder="按钮链接" allow-clear />
+        </div>
+        <a-checkbox :model-value="button.isExternal">是否外部链接</a-checkbox>
+      </div>
+    </template>
+  </draggable>
+  <a-button-group class="mt-2" type="primary">
+    <a-button size="mini" @click="handleAddButton('default', data.buttonList.data)"><template #icon><icon-plus /></template> 默认按钮 </a-button>
+    <a-button size="mini" @click="handleAddButton('white', data.buttonList.data)"><template #icon><icon-plus /></template> 白色按钮 </a-button>
+    <a-button size="mini" @click="handleAddButton('light', data.buttonList.data)"><template #icon><icon-plus /></template> 亮色按钮 </a-button>
+    <a-button size="mini" @click="handleAddButton('blue', data.buttonList.data)"><template #icon><icon-plus /></template> 蓝色按钮 </a-button>
+  </a-button-group>
+  <p class="item-name mt-2">段落</p>
+  <draggable
+    v-model="data.paragraphs"
+    :component-data="{
+      tag: 'div',
+      type: 'transition-group',
+      name: !drag ? 'flip-list' : null
+    }"
+    v-bind="paragraphDragOptions"
+    :disabled="!shouldShowDragHandle(data.paragraphs)"
+    @start="drag = true"
+    @end="drag = false"
+    item-key="id"
+  >
+    <template #item="{ element: paragraph }">
+      <div
+        class="item-button item-link draggable-item"
+        :class="{ 'sortable-disabled': !shouldShowDragHandle(data.paragraphs) }"
+        :key="paragraph.id"
+      >
+        <div class="btn-group">
+          <div
+            v-if="shouldShowDragHandle(data.paragraphs)"
+            class="drag-handle"
+          >
+            <icon-drag-arrow class="drag-icon" />
+          </div>
+          <icon-delete v-if="canAddParagraph" class="btn-delete" @click="handleDeleteButton(data.paragraphs, paragraph.id)" />
+        </div>
+        <p class="item-title">标题</p>
+        <a-input v-model="paragraph.title" placeholder="请输入标题" allow-clear />
+
+        <p class="item-title mt-2">内容</p>
+        <RichTextEditor v-model="paragraph.content"></RichTextEditor>
+      </div>
+    </template>
+  </draggable>
+  <div v-if="canAddParagraph" class="item-add-btn flex items-center" @click="handleAddParagraph(data.paragraphs)">
+    <icon-plus />
+    <span class="btn-text">添加段落</span>
+  </div>  
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import draggable from 'vuedraggable'
+import RichTextEditor from '@/components/RichTextEditor'
+import { randomString } from '@/utils/common'
+
+// 拖拽相关状态
+const drag = ref(false)
+
+const buttonDragOptions = computed(() => ({
+  animation: 200,
+  group: 'buttons', // 按钮专用分组
+  disabled: false,
+  ghostClass: 'ghost'
+}))
+
+const paragraphDragOptions = computed(() => ({
+  animation: 200,
+  group: 'paragraphs', // 段落专用分组
+  disabled: false,
+  ghostClass: 'ghost'
+}))
+
+// 检查是否应该显示拖拽图标
+const shouldShowDragHandle = (list: any[]) => {
+  return list && list.length > 1
+}
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {}
+  },
+
+  showLogo: {
+    type: Boolean,
+    default: true
+  },
+
+  maxNum: {
+    type: Number,
+    default: 2
+  },
+
+  canAddParagraph: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const handleAddButton = (type: string, list: any[]) => {
+  if (list.length >= props.maxNum) return
+  list.push({
+    id: randomString(),
+    type,
+    text: '查看更多',
+    url: undefined,
+    isExternal: false
+  })
+}
+
+const handleDeleteButton = (list: any[], id: string) => {
+  list.splice(list.findIndex(item => item.id === id), 1)
+}
+
+const handleAddParagraph = (list: any[]) => {
+  list.push({
+    title: '耀华国际教育学校浙江桐乡',
+    subTitle: '耀华国际教育学校浙江桐乡',
+    name: '耀华国际教育学校浙江桐乡',
+    label: '123',
+    imgSrc: 'https://osswebsite.ycyw.com/media-library/ywies-bj/images/home/ywies-tx.jpg',
+    alt: '',
+    buttonList: {
+      id: randomString(),
+      type: 'BtnList',
+      readOnly: true,
+      width: '',
+      bgColor: '',
+      data: []
+    },
+    paragraphs: {
+      title: '',
+      content: ''
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped> 
+.setting-item {
+  position: relative;
+  padding: 16px 12px;
+  background: #f0f2f5;
+  border-radius: 8px;
+  margin-bottom: 20px;
+
+  .btn-group {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    padding: 4px;
+
+    .btn-delete {
+      padding: 4px;
+      font-size: 24px;
+      cursor: pointer;
+    }
+  }
+
+  .item-name {
+    font-size: 16px;
+    font-weight: 600;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #fff;
+  }
+
+  .item-button {
+    position: relative;
+    padding: 12px 8px 4px;
+    background: #fff;
+    border-radius: 4px;
+    margin: 4px 0;
+    transition: all 0.3s ease;
+
+    &.draggable-item {
+      cursor: move;
+
+      &:hover {
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        transform: translateY(-1px);
+      }
+
+      // 当禁用拖拽时，不显示拖拽效果
+      &.sortable-disabled {
+        cursor: default;
+
+        &:hover {
+          box-shadow: none;
+          transform: none;
+        }
+      }
+    }
+
+    .arco-input-wrapper {
+      background: #f2f3f5;
+    }
+  }
+
+  .item-link {
+    background: #f0f2f5;
+
+    .arco-input-wrapper {
+      background: #fff;
+    }
+  }
+
+  .item-img {
+    height: 100px;
+  }
+
+  // 拖拽相关样式
+  .flip-list-move {
+    transition: transform 0.5s;
+  }
+
+  .no-move {
+    transition: transform 0s;
+  }
+
+  .ghost {
+    opacity: 0.5;
+    background: #c8ebfb;
+  }
+
+  .item-action {
+    padding: 10px 0;
+
+    .action-text {
+      width: 150px;
+      margin-right: 8px;
+    }
+  }
+
+  .item-add-btn {
+    display: inline-block;
+    padding: 2px 8px;
+    margin-top: 5px;
+    font-size: 11px;
+    color: #165dff;
+    border-radius: 4px;
+    font-weight: 600;
+    border: 1px solid #165dff;
+    cursor: pointer;
+  }
+}
+
+.drag-handle {
+  padding: 4px;
+  cursor: grab;
+  padding: 4px;
+  border-radius: 4px;
+
+  &:hover {
+    background-color: #f0f2f5;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  .drag-icon {
+    font-size: 16px;
+    color: #86909c;
+  }
+}
+</style>

package/src/components/QuickLinks/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="banner-quicklinks">
+    <div class="quick-links__nav__prev" v-show="showPrev" @click="scrollPrev"></div>
+    <div class="quick-links__wrapper" ref="quickLinksWrapperRef"  @scroll="onScroll">
+      <div class="quick-links__list">
+        <Button v-for="item in data" :key="item.id" :data="item" :hasHoverBg="false"></Button>
+      </div>
+    </div>
+    <div class="quick-links__nav__next" v-show="showNext" @click="scrollNext"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted, nextTick, onUnmounted } from 'vue'
+import type { PropType } from 'vue'
+import type { ButtonProps } from '@/types/button'
+import Button from '@/components/Button/index.vue' 
+
+const props = defineProps({
+  data: {
+    type: Array as PropType<ButtonProps[]>,
+    default: () => []
+  }
+})
+
+const quickLinksWrapperRef = ref<HTMLDivElement | null>(null)
+const showPrev = ref(false)
+const showNext = ref(false)
+
+const checkScroll = () => {
+  const el = quickLinksWrapperRef.value
+  if (!el) return
+  showPrev.value = el.scrollLeft > 0
+  showNext.value = el.scrollLeft + el.clientWidth < el.scrollWidth
+}
+
+const scrollPrev = () => {
+  const el = quickLinksWrapperRef.value
+  if (!el) return
+  el.scrollBy({ left: -el.clientWidth / 1.5, behavior: 'smooth' })
+}
+
+const scrollNext = () => {
+  const el = quickLinksWrapperRef.value
+  if (!el) return
+  el.scrollBy({ left: el.clientWidth / 1.5, behavior: 'smooth' })
+}
+
+const onScroll = () => {
+  checkScroll()
+}
+
+watch(() => props.data, async () => {
+  await nextTick()
+  checkScroll()
+})
+
+onMounted(() => {
+  window.addEventListener('resize', checkScroll)
+  nextTick(checkScroll)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkScroll)
+})
+</script>
+
+<style lang="scss" scoped>
+.banner-quicklinks {
+  position: relative;
+  width: 100%;
+  height: 44px;
+  background: #0a1f8f;
+}
+
+@media (max-width: 767.98px) {
+  .banner-quicklinks {
+    height: 41px;
+  }
+}
+
+.banner-quicklinks .quick-links__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background-color: #0a1f8f;
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+  scrollbar-color: transparent;
+  scrollbar-width: none;
+}
+
+.banner-quicklinks .quick-links__list {
+  display: flex;
+}
+
+.banner-quicklinks .quick-links__nav__next,
+.banner-quicklinks .quick-links__nav__prev {
+  position: absolute;
+  width: 33px;
+  height: 100%;
+  box-shadow: 0 4px 4px hsla(0,0%,100%,.2);
+  background-color: #0032a0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  cursor: pointer;
+}
+
+@media (max-width: 1023.98px) {
+  .banner-quicklinks .quick-links__nav__next,
+  .banner-quicklinks .quick-links__nav__prev {
+    width: 28px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .banner-quicklinks .quick-links__nav__next,
+  .banner-quicklinks .quick-links__nav__prev {
+    box-shadow: 0 4px 4px hsla(0,0%,100%,.2);
+  }
+}
+
+.banner-quicklinks .quick-links__nav__next:after,
+.banner-quicklinks .quick-links__nav__prev:after {
+  content: "";
+  width: 24px;
+  height: 24px;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkgNkwxNSAxMkw5IDE4IiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
+  background-position: 50%;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: hsla(0,0%,100%,0);
+}
+
+@media (max-width: 1023.98px) {
+  .banner-quicklinks .quick-links__nav__next:after,
+  .banner-quicklinks .quick-links__nav__prev:after {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.banner-quicklinks .quick-links__nav__prev {
+  left: -1px;
+}
+
+.banner-quicklinks .quick-links__nav__prev:after {
+  transform: scale(-1);
+}
+
+.banner-quicklinks .quick-links__nav__next {
+  right: -1px;
+}
+
+:deep(.button-primary) {
+  background: transparent;
+}
+</style>

package/src/components/QuoteText/index.ts

@@ -0,0 +1,11 @@
+import type { App, Plugin } from 'vue'
+import QuoteText from './index.vue'
+
+export default {
+  install: (app: App) => {
+    app.component('BannerImage', QuoteText)
+  },
+} satisfies Plugin
+
+export { default as QuoteText } from './index.vue'
+export type { QuoteTextProps, QuoteTextEmits } from './type'

package/src/components/QuoteText/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="quote-text" @mouseenter="isHover = true" @mouseleave="isHover = false">
+    <div class="quote-text__container quote-text--normal container-content" :style="{ background: modelValue?.data.bgColor || 'transparent' }">
+      <div v-if="modelValue?.data.hasLine" class="quote-text__line"></div> 
+      <div class="quote-text__content" v-html="modelValue?.data.text"></div> 
+      <div class="quote-text__desc" v-html="modelValue?.data.desc"></div>
+    </div>
+
+    <Operate v-if="!modelValue?.readOnly" v-model:show="isHover" @handle-edit="showSetting = true" @handle-delete="handleDelete" @handle-copy="handleCopy"></Operate>
+  </div>
+
+  <Setting v-model:show="showSetting" :data="modelValue"></Setting>
+</template>
+
+<script lang="ts" setup> 
+import { ref } from 'vue'
+import { randomString } from '@/utils/common'
+import Operate from '@/components/Operate/index.vue'
+import Setting from './setting.vue'
+
+// 定义组件名称
+defineOptions({
+  name: 'OuoteText'
+})
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {}
+  },
+
+  // 是否预览
+  isPreview: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'handleDelete', 'handleCopy'])
+
+const handleInit = () => {
+  if (props.modelValue && props.modelValue.data) return // 有数据不用初始化
+  const data = {
+    id: props.modelValue?.id || randomString(),
+    type: 'OuoteText',
+    readOnly: props.modelValue?.readOnly || false,
+    data: {
+      width: '',
+      bgColor: '',
+      hasLine: true,
+      text: '浙江桐乡特色高中将于今年9月成立！',
+      desc: '耀华国际教育学校浙江桐乡校区成立于 2017 年，先进的校园设施确保学 生在安全友好的环境中学习。学校坐落于高桥镇，提供从幼儿阶段至高中 阶段 (K2 至13 年级) 的教育服务，招收2 岁至18 岁本地和外籍学生。'
+    }
+  }
+  emit('update:modelValue', data)
+} 
+
+const isHover = ref<boolean>(false);
+const showSetting = ref<boolean>(false);
+
+const handleDelete = () => {
+  emit('handleDelete', props.modelValue.id)
+}
+
+const handleCopy = () => {
+  emit('handleCopy', props.modelValue)
+}
+
+handleInit()
+</script>
+
+<style lang="scss" scoped>
+.quote-text {
+  position: relative;
+}
+
+.quote-text__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.quote-text--large .quote-text__line {
+  margin-bottom: 19px;
+}
+
+@media (max-width: 767.98px) {
+  .quote-text--large .quote-text__line {
+    margin-bottom: 12px;
+  }
+}
+
+.quote-text--large .quote-text__content,
+.quote-text--large .quote-text__desc {
+  color: #0032a0;
+  color: var(--text-color--primary, #0032a0);
+}
+
+@media (max-width: 767.98px) {
+  .quote-text--large .quote-text__content,
+  .quote-text--large .quote-text__desc {
+    color: #0032a0;
+    color: var(--text-color--primary, #0032a0);
+  }
+}
+
+.quote-text__line {
+  width: 2px;
+  height: 24px;
+  background-color: #0048e8;
+  background-color: var(--quote-line-color, #0048e8);
+  margin-bottom: 32px;
+}
+
+@media (max-width: 1023.98px) {
+  .quote-text__line {
+    margin-bottom: 24px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .quote-text__line {
+    width: 1px;
+    height: 20px;
+    margin-bottom: 12px;
+  }
+}
+
+.quote-text__content {
+  color: #151f8c;
+  color: var(--quote-text-color, #151f8c);
+}
+</style>