PPT/src/components/CollapsibleToolbar/componets/aiWeb.vue

<template>
  <div v-if="visible" class="aiweb-modal-overlay" @click.self="closeModal">
    <div class="aiweb-modal">
      <div class="aiweb-modal-header">
        <span class="aiweb-modal-title">{{ lang.ssWebEditor }}</span>
        <button class="aiweb-modal-close" @click="closeModal">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 6L6 18"></path>
            <path d="M6 6l12 12"></path>
          </svg>
        </button>
      </div>
      <div class="aiweb-modal-body">
        <iframe :src="iframeUrl" frameborder="0" class="aiweb-iframe" ref="iframeRef"></iframe>
      </div>
      <div class="aiweb-modal-footer">
        <button class="aiweb-btn aiweb-btn-close" @click="closeModal">{{ lang.ssClose }}</button>
        <button class="aiweb-btn aiweb-btn-confirm" @click="handleConfirm" :disabled="isLoading">
          {{ isLoading ? lang.ssCreating : lang.ssConfirmAdd }}
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { lang } from '@/main'

const props = defineProps<{
  visible: boolean
  webId: string
  isLoading: boolean
}>()

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'add', webCode: string): void
}>()

const iframeUrl = computed(() => {
  let url = 'https://beta.app.cocorobo.cn'
  if (window.location.href.includes('beta')) {
    url = 'https://beta.app.cocorobo.cn'
  }
  else if (lang.lang === 'cn') {
    url = 'https://app.cocorobo.cn'
  }
  else if (lang.lang === 'hk') {
    url = 'https://app.cocorobo.hk'
  }
  else if (lang.lang === 'en') {
    url = 'https://app.cocorobo.com'
  }
  if (!props.webId) return ''
  return `${url}/#/web?id=${props.webId}&create=false&isPPT=true`
})

const closeModal = () => {
  emit('close')
}

const iframeRef = ref<HTMLIFrameElement>()

const handleConfirm = () => {
  const webCode = iframeRef.value?.contentWindow?.ReturnWebCode() as string || ''
  console.log(webCode)
  if (!webCode) return
  console.log('确定按钮被点击')
  emit('add', webCode)
}
</script>

<style lang="scss" scoped>
.aiweb-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.aiweb-modal {
  width: 90%;
  max-width: 1200px;
  height: 90vh;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.aiweb-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  background-color: #f8f9fa;
}

.aiweb-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.aiweb-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: #666;
  transition: color 0.2s;

  &:hover {
    color: #333;
  }

  svg {
    width: 20px;
    height: 20px;
  }
}

.aiweb-modal-body {
  height: calc(100% - 140px);
}

.aiweb-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #eee;
  background-color: #f8f9fa;
}

.aiweb-btn {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.aiweb-btn-close {
  background-color: #fff;
  border-color: #d9d9d9;
  color: #666;

  &:hover {
    background-color: #f5f5f5;
    border-color: #bfbfbf;
  }
}

.aiweb-btn-confirm {
  background-color: #1890ff;
  border-color: #1890ff;
  color: #fff;

  &:hover {
    background-color: #40a9ff;
    border-color: #40a9ff;
  }
}

.aiweb-iframe {
  width: 100%;
  height: 100%;
}
</style>