[WIP] Add BeianBlock component for备案信息 in footer

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

This PR currently shows 0 files changed. Please implement the actual code changes so that备案信息 renders in the real footer component and the hardcoded author span is removed, per the user's request.

Make the following concrete edits in the repository SeRazon/home against base branch dev:

1. Add a reusable备案信息组件: src/components/BeianBlock.vue

• Create this file with the exact content below. It renders 公安备案图标+文字 和 ICP 备案，使用 inline-flex 对齐，图标固定为 16×16 像素。Props 支持覆盖文本与链接。

--- FILE: src/components/BeianBlock.vue ---

{{ policeText }} | {{ icpText }}

<script setup lang="ts"> interface Props { policeText?: string policeLink?: string icpText?: string icpLink?: string iconSrc?: string } withDefaults(defineProps(), { policeText: '赣公网安备36012202000590号', policeLink: 'https://beian.mps.gov.cn/#/query/webSearch?code=36012202000590', icpText: '赣ICP备2025074193号', icpLink: 'https://beian.miit.gov.cn/', // 默认使用官方外链图标；若希望用本地图标，可传入 /gongan.png iconSrc: 'https://www.beian.gov.cn/img/ghs.png' }) </script> <style scoped> .beian-wrap { display: flex; justify-content: center; flex-wrap: wrap; padding: 8px 0; } .beian-row { display: inline-flex; align-items: center; gap: 8px; line-height: 1; flex-wrap: wrap; } .beian-link { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; line-height: 1; } .beian-icon { width: 16px; height: 16px; display: inline-block; margin: 0; } .beian-sep { color: #999; margin: 0 2px; } </style>

2. Update the actual global footer to render备案信息: src/components/Footer.vue

• Replace the file content with the exact version below. It imports and renders at the top of the power section so备案信息显示在页脚。移除原来硬编码的 “星鸿_SeRazon …” 文案块和仅 ICP 的片段。保留年份、作者、站点 URL 逻辑，并显示在备案信息下方。如果你想彻底删除版权，可后续再移除 .footer-meta 块。

--- FILE: src/components/Footer.vue ---

    <!-- 版权信息（显示在备案信息下面；如需彻底删除，可移除此块） -->
    <div class="footer-meta">
      &copy;
      <span v-if="startYear && startYear < fullYear" class="site-start">
        {{ startYear }} -
      </span>
      {{ fullYear }}
      <a :href="siteUrl">{{ siteAuthor }}</a>
    </div>
  </div>

  <div v-else class="lrc">
    <Transition name="fade" mode="out-in">
      <div class="lrc-all" :key="store.getPlayerLrc">
        <music-one theme="filled" size="18" fill="#efefef" />
        <span class="lrc-text text-hidden" v-html="store.getPlayerLrc" />
        <music-one theme="filled" size="18" fill="#efefef" />
      </div>
    </Transition>
  </div>
</Transition>

<script setup> import { ref, computed } from 'vue' import { MusicOne } from "@icon-park/vue-next"; import { mainStore } from "@/store"; import BeianBlock from "./BeianBlock.vue"; const store = mainStore(); const fullYear = new Date().getFullYear(); // 启动年份、作者、站点 URL const startYear = ref( import.meta.env.VITE_SITE_START?.length >= 4 ? import.meta.env.VITE_SITE_START.substring(0, 4) : null ); const siteAuthor = ref(import.meta.env.VITE_SITE_AUTHOR); const siteUrl = computed(() => { const url = import.meta.env.VITE_SITE_URL; if (!url) return "https://xhsr.org.cn"; if (!url.startsWith("http://") && !url.startsWith("https://")) { return "//" + url; } return url; }); </script> <style scoped> .power { display: flex; flex-direction: column; align-items: center; gap: 6px; } .footer-meta { margin-top: 6px; } </style>

3. Prevent duplicate footers: src/App.vue

• Ensure App.vue does NOT render its own footer. It should only keep so that the centralized Footer.vue controls the footer. Replace with the minimal content below if necessary.

--- FILE: src/App.vue ---

<script setup lang="ts"> *This pull request was created as a result of the following prompt from Copilot chat.* > This PR currently shows 0 files changed. Please implement the actual code changes so that备案信息 renders in the real footer component and the hardcoded author span is removed, per the user's request. > > Make the following concrete edits in the repository SeRazon/home against base branch dev: > > 1) Add a reusable备案信息组件: src/components/BeianBlock.vue > - Create this file with the exact content below. It renders 公安备案图标+文字 和 ICP 备案，使用 inline-flex 对齐，图标固定为 16×16 像素。Props 支持覆盖文本与链接。 > > --- FILE: src/components/BeianBlock.vue --- > >

> > class="beian-link" > :href="policeLink" > target="_blank" > rel="noopener noreferrer" > aria-label="公安备案查询" > > > > {{ policeText }} > > | > class="beian-link" > :href="icpLink" > target="_blank" > rel="noopener noreferrer" > aria-label="工信部ICP备案查询" > > > {{ icpText }} > > >

> > > <script setup lang="ts"> > interface Props { > policeText?: string > policeLink?: string > icpText?: string > icpLink?: string > iconSrc?: string > } > withDefaults(defineProps(), { > policeText: '赣公网安备36012202000590号', > policeLink: > 'https://beian.mps.gov.cn/#/query/webSearch?code=36012202000590', > icpText: '赣ICP备2025074193号', > icpLink: 'https://beian.miit.gov.cn/', > // 默认使用官方外链图标；若希望用本地图标，可传入 /gongan.png > iconSrc: 'https://www.beian.gov.cn/img/ghs.png' > }) > </script>

<style scoped> .beian-wrap { display: flex; justify-content: center; flex-wrap: wrap; padding: 8px 0; } .beian-row { display: inline-flex; align-items: center; gap: 8px; line-height: 1; flex-wrap: wrap; } .beian-link { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; line-height: 1; } .beian-icon { width: 16px; height: 16px; display: inline-block; margin: 0; } .beian-sep { color: #999; margin: 0 2px; } </style>

2. Update the actual global footer to render备案信息: src/components/Footer.vue

• Replace the file content with the exact version below. It imports and renders at the top of the power section so备案信息显示在页脚。移除原来硬编码的 “星鸿_SeRazon …” 文案块和仅 ICP 的片段。保留年份、作者、站点 URL 逻辑，并显示在备案信息下方。如果你想彻底删除版权，可后续再移除 .footer-meta 块。

--- FILE: src/components/Footer.vue ---

    <!-- 版权信息（显示在备案信息下面；如需彻底删除，可移除此块） -->
    <div class="footer-meta">
      &copy;
      <span v-if="startYear && startYear < fullYear" class="site-start">
        {{ startYear }} -
      </span>
      {{ fullYear }}
      <a :href="siteUrl">{{ siteAuthor }}</a>
    </div>
  </div>

  <div v-else class="lrc">
    <Transition name="fade" mode="out-in">
      <div class="lrc-all" :key="store.getPlayerLrc">
        <music-one theme="filled" size="18" fill="#efefef" />
        <span class="lrc-text text-hidden" v-html="store.getPlayerLrc" />
        <music-one theme="filled" size="18" fill="#efefef" />
      </div>
    </Transition>
  </div>
</Transition>

<script setup> import { ref, computed } from 'vue' import { MusicOne } from "@icon-park/vue-next"; import { mainStore } from "@/store"; import BeianBlock from "./BeianBlock.vue"; const store = mainStore(); const fullYear = new Date().getFullYear(); // 启动年份、作者、站点 URL const startYear = ref( import.meta.env.VITE_SITE_START?.length >= 4 ? import.meta.env.VITE_SITE_START.substring(0, 4) : null ); const siteAuthor = ref(import.meta.env.VITE_SITE_AUTHOR); const siteUrl = computed(() => { const url = import.meta.env.VITE_SITE_URL; if (!url) return "https://xhsr.org.cn"; if (!url.startsWith("http://") && !url.startsWith("https://")) { return "//" + url; } return url; }); </script> <style scoped> .power { display: flex; flex-direction: column; align-items: center; gap: 6px; } .footer-meta { margin-top: 6px; } </style>

3. Prevent duplicate footers: src/App.vue

• Ensure App.vue does NOT render its own footer. It should only keep so that the centralized Footer.vue controls the footer. Replace with the minimal content below if necessary.

--- FILE: src/App.vue ---

<script setup lang="ts"> </script> <style> </style>

Validation:

• Run the build to ensure it passes.
• The footer should now show: [公安图标] 赣公网安备36012202000590号 | 赣ICP备2025074193号 on the first line, and the copyright line below.
• Links open in new tabs and icon/text are aligned.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
home	Ready	Preview	Comment	Oct 17, 2025 4:42pm

💡 Enable Vercel Agent with $100 free credit for automated AI reviews