zhaoshang_client_ui/src/components/Chat/LinkURLContent.vue

<template>
  <div class="link-content-wrap">
    <Transition name="fade">
      <div class="link-content" :class="{ active: url }">
        <a v-if="url" :href="url" target="_blank" rel="noopener" class="link-url-link">
          <img src="@/assets/zip-icon.png" class="link-icon" />
          <span class="link-text">{{ displayName }}</span>
        </a>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, computed } from "vue";

const props = defineProps({
  content: {
    type: String,
    default: "",
  },
});

const loading = ref(false);
const error = ref("");
const url = ref("");
const displayName = computed(() => {
  // 提取 <link-url> 标签中的内容作为显示名称
  if (url.value) {
    // 提取 URL 中的文件名部分
    const urlParts = url.value.split("/");
    const fileName = urlParts[urlParts.length - 1];
    // 如果 URL 中有文件名，则返回文件名，否则返回 URL
    if (fileName) {
      return fileName;
    }
  }
  // 如果没有 URL，则返回默认文本
  return "材料.zip";
});

function extractLinkURL(content) {

  // return 'http://1.95.178.212:8910/download_forms/6918bc00-e9ed-46d1-9714-f302cf285f02'
  // 匹配 <link-url>...</link-url>，允许前后有空格和换行
  const match = (content || "").match(/<link-url[^>]*>([\s\S]*?)<\/link-url>/i);
  if (match && match[1]) {
    // 去除首尾空白
    return match[1].trim();
  }
  return "";
}

async function fetchLinkURL() {
  loading.value = true;
  error.value = "";
  try {
    // 解析 url
    console.log("正在提取链接内容:", props.content);
    const extractedUrl = extractLinkURL(props.content);
    console.log("提取的表单链接:", props.content, extractedUrl);
    if (!extractedUrl) {
      error.value = "";
      url.value = "";
    } else {
      // 这里可以添加额外的校验或处理
      url.value = extractedUrl;
    }
    // 模拟异步加载
    await new Promise((resolve) => setTimeout(resolve, 300));
  } catch (e) {
    console.error("数据加载失败", e);
    error.value = "数据加载失败";
    url.value = "";
  } finally {
    loading.value = false;
  }
}

watch(
  () => props.content,
  () => {
    fetchLinkURL();
  },
  { immediate: true }
);

onMounted(() => {
  fetchLinkURL();
});
</script>

<style lang="scss" scoped>
.link-content-wrap {
  margin: 16px 0;
  position: relative;

  .link-content {
    display: inline-block;
    padding: 6px;
    border-radius: 12px;
    min-height: 48px;
    min-width: 200px;

    &.active {
      background-color: rgba(255, 255, 255, 1);
    }
  }
}

.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #888;
  text-align: center;
  padding: 20px 0;
}

.error {
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

.link-content {
  display: inline-block;
  white-space: pre-wrap;
  word-break: break-word;
  transition: opacity 0.2s;
  opacity: 1;
}

.link-url-link {
  color: #1677ff;
  font-size: 16px;
  word-break: break-all;
  text-decoration: underline;
  display: flex;
  align-items: center;

  .link-icon {
    width: 36px;
    height: 36px;
    margin-right: 8px;
    vertical-align: middle;
  }

  .link-text {
    color: hsla(218, 100%, 40%, 1);
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  }
}
</style>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}
</style>