[WIP] Add reusable footer block for备案信息 display

[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

Implement a reusable footer block that displays ICP 备案号 and 公安备案号 across the site.

Scope of changes:

1. Create a new Vue component to render the备案信息 with proper alignment and accessible markup.

   • File: src/components/BeianBlock.vue
   • Props (all optional with sensible defaults):
     • policeText: string (default: "赣公网安备36012202000590号")
     • policeLink: string (default: "https://beian.mps.gov.cn/#/query/webSearch?code=36012202000590")
     • icpText: string (default: "赣ICP备2025074193号")
     • icpLink: string (default: "https://beian.miit.gov.cn/")
     • iconSrc: string (default: 'https://www.beian.gov.cn/img/ghs.png')
   • Layout rules inside component (scoped CSS):
     • Use inline-flex with align-items:center to keep the police icon and text aligned.
     • Fix icon size to 16×16px so it matches text height.
     • Provide a subtle separator between the two links.

2. Integrate the component into the global footer so it renders on all pages.

   • Update src/App.vue (or the existing global Footer component if present) to import and place inside a at the bottom.
   • Ensure the footer is centered and has padding.

3. Do NOT add a binary icon to the repo (to keep the PR simple). Use the official icon URL by default. Users can later swap to a local icon by passing icon-src="/gongan.png" if they add it under public/.

Acceptance criteria:

• The app builds on branch dev after the changes.
• The footer displays a row with: [公安图标] 赣公网安备36012202000590号 | 赣ICP备2025074193号
• The icon and text are visually aligned (same baseline/height) and the links open in a new tab.
• The component is reusable and the texts/links can be overridden via props.

This pull request was created as a result of the following prompt from Copilot chat.

Implement a reusable footer block that displays ICP 备案号 and 公安备案号 across the site.

Scope of changes:

1. Create a new Vue component to render the备案信息 with proper alignment and accessible markup.

   • File: src/components/BeianBlock.vue
   • Props (all optional with sensible defaults):
     • policeText: string (default: "赣公网安备36012202000590号")
     • policeLink: string (default: "https://beian.mps.gov.cn/#/query/webSearch?code=36012202000590")
     • icpText: string (default: "赣ICP备2025074193号")
     • icpLink: string (default: "https://beian.miit.gov.cn/")
     • iconSrc: string (default: 'https://www.beian.gov.cn/img/ghs.png')
   • Layout rules inside component (scoped CSS):
     • Use inline-flex with align-items:center to keep the police icon and text aligned.
     • Fix icon size to 16×16px so it matches text height.
     • Provide a subtle separator between the two links.

2. Integrate the component into the global footer so it renders on all pages.

   • Update src/App.vue (or the existing global Footer component if present) to import and place inside a at the bottom.
   • Ensure the footer is centered and has padding.

3. Do NOT add a binary icon to the repo (to keep the PR simple). Use the official icon URL by default. Users can later swap to a local icon by passing icon-src="/gongan.png" if they add it under public/.

Acceptance criteria:

• The app builds on branch dev after the changes.
• The footer displays a row with: [公安图标] 赣公网安备36012202000590号 | 赣ICP备2025074193号
• The icon and text are visually aligned (same baseline/height) and the links open in a new tab.
• The component is reusable and the texts/links can be overridden via props.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[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:23pm

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