yoe-shop-web/src/views/home/theme.vue

<template>
  <div class="theme-pages">
    <div class="content-container" v-html="renderedHtml"></div>
  </div>
</template>

<script setup lang="ts">
const route = useRoute();
const id = ref<any>(null);
const base64String = ref<any>('');
const renderedHtml = ref<any>('');

const initData = () => {
  id.value = route.query.id;
  if (id.value == 1) {
    base64String.value =
      'PHAgc3R5bGU9InRleHQtYWxpZ246IGNlbnRlcjsiPjxpbWcgc3JjPSJodHRwczovL3l1bnlpbmcueW9lMzY1LmNvbTo4MDQ1L1Bob3Rvcy8xMzM5MTMyODEzNDg5MjQxMDIuanBnIiBhbHQ9IuWbvueJhyIgZGF0YS1ocmVmPSJodHRwczovL3l1bnlpbmcueW9lMzY1LmNvbTo4MDQ1L1Bob3Rvcy8xMzM5MTMyODEzNDg5MjQxMDIuanBnIiBzdHlsZT0iIj48aW1nIHNyYz0iaHR0cHM6Ly95dW55aW5nLnlvZTM2NS5jb206ODA0NS9QaG90b3MvMTMzOTEzMjgxMzUyNDIxNTM1LmpwZyIgYWx0PSLlm77niYciIGRhdGEtaHJlZj0iaHR0cHM6Ly95dW55aW5nLnlvZTM2NS5jb206ODA0NS9QaG90b3MvMTMzOTEzMjgxMzUyNDIxNTM1LmpwZyIgc3R5bGU9IiI+PGltZyBzcmM9Imh0dHBzOi8veXVueWluZy55b2UzNjUuY29tOjgwNDUvUGhvdG9zLzEzMzkxMzI4MTM1Njk1NTYxOS5qcGciIGFsdD0i5Zu+54mHIiBkYXRhLWhyZWY9Imh0dHBzOi8veXVueWluZy55b2UzNjUuY29tOjgwNDUvUGhvdG9zLzEzMzkxMzI4MTM1Njk1NTYxOS5qcGciIHN0eWxlPSIiPjxpbWcgc3JjPSJodHRwczovL3l1bnlpbmcueW9lMzY1LmNvbTo4MDQ1L1Bob3Rvcy8xMzM5MTMyODEzNTk4Nzc2MDMuanBnIiBhbHQ9IuWbvueJhyIgZGF0YS1ocmVmPSJodHRwczovL3l1bnlpbmcueW9lMzY1LmNvbTo4MDQ1L1Bob3Rvcy8xMzM5MTMyODEzNTk4Nzc2MDMuanBnIiBzdHlsZT0iIj48aW1nIHNyYz0iaHR0cHM6Ly95dW55aW5nLnlvZTM2NS5jb206ODA0NS9QaG90b3MvMTMzOTEzMjgxMzYyNzc5Nzc2LmpwZyIgYWx0PSLlm77niYciIGRhdGEtaHJlZj0iaHR0cHM6Ly95dW55aW5nLnlvZTM2NS5jb206ODA0NS9QaG90b3MvMTMzOTEzMjgxMzYyNzc5Nzc2LmpwZyIgc3R5bGU9IiI+PGltZyBzcmM9Imh0dHBzOi8veXVueWluZy55b2UzNjUuY29tOjgwNDUvUGhvdG9zLzEzMzkxMzI4MTM2NTk5MzE1MS5qcGciIGFsdD0i5Zu+54mHIiBkYXRhLWhyZWY9Imh0dHBzOi8veXVueWluZy55b2UzNjUuY29tOjgwNDUvUGhvdG9zLzEzMzkxMzI4MTM2NTk5MzE1MS5qcGciIHN0eWxlPSIiPjxpbWcgc3JjPSJodHRwczovL3l1bnlpbmcueW9lMzY1LmNvbTo4MDQ1L1Bob3Rvcy8xMzM5MTMyODEzNjkyOTkyNzcuanBnIiBhbHQ9IuWbvueJhyIgZGF0YS1ocmVmPSJodHRwczovL3l1bnlpbmcueW9lMzY1LmNvbTo4MDQ1L1Bob3Rvcy8xMzM5MTMyODEzNjkyOTkyNzcuanBnIiBzdHlsZT0iIj48aW1nIHNyYz0iaHR0cHM6Ly95dW55aW5nLnlvZTM2NS5jb206ODA0NS9QaG90b3MvMTMzOTEzMjgxMzczMzM5MDc5LmpwZyIgYWx0PSLlm77niYciIGRhdGEtaHJlZj0iaHR0cHM6Ly95dW55aW5nLnlvZTM2NS5jb206ODA0NS9QaG90b3MvMTMzOTEzMjgxMzczMzM5MDc5LmpwZyIgc3R5bGU9IiI+PC9wPg==';
  }
  const htmlString = decodeBase64ToUtf8(base64String.value);
  renderedHtml.value = htmlString;
};

// 核心解码函数 (处理 UTF-8 中文不乱码)
const decodeBase64ToUtf8 = (base64) => {
  try {
    // 1. atob 解码为二进制字符串
    const binaryString = window.atob(base64);
    // 2. 将二进制字符串转换为 UTF-8
    const bytes = new Uint8Array(binaryString.length);
    for (let i = 0; i < binaryString.length; i++) {
      bytes[i] = binaryString.charCodeAt(i);
    }
    // 3. 使用 TextDecoder 解码为正常字符串
    return new TextDecoder('utf-8').decode(bytes);
  } catch (e) {
    console.error('解码失败', e);
    return '';
  }
};

onMounted(() => {
  initData();
});

watch(route, () => {
  initData();
});
</script>

<style lang="scss" scoped>
.theme-pages {
  width: 100%;
  .content-container :deep(img) {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
}
</style>