chore: split dev and production deployment env

2026-06-05 12:32:29 +08:00
parent 1d841fc1dd
commit ecc39745d7
3 changed files with 20 additions and 0 deletions
@@ -6,6 +6,8 @@
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
+    "build:test": "PUBLIC_APP_ENV_LABEL=测试环境 astro build",
+    "build:prod": "PUBLIC_APP_ENV_LABEL=生产环境 astro build",
    "preview": "astro preview"
  },
  "dependencies": {
@@ -3,6 +3,7 @@ import { resume, resumeEn } from "../data/resume";
 import "../styles/global.css";

 const githubUrl = "https://github.com/zhanBoss";
+const appEnvLabel = import.meta.env.PUBLIC_APP_ENV_LABEL || "生产环境";
 const translations = { zh: resume, en: resumeEn };
 const navIds = ["top", "proof", "skills", "projects", "experience", "contact"];
 const brandAssets = {
@@ -143,6 +144,7 @@ const projectLogoFor = (id: string) => brandAssets.projects[id] ?? null;
  <body>
    <div class="scroll-progress" id="scroll-progress"></div>
    <canvas class="ambient-canvas" id="ambient-canvas" aria-hidden="true"></canvas>
+    <div class="environment-badge" aria-label={`当前环境：${appEnvLabel}`}>{appEnvLabel}</div>

    <header class="topbar">
      <a class="brand" href="#top" aria-label={`${displayNameFor(resume)} 简历首页`}>
@@ -101,6 +101,22 @@ a {
  background: linear-gradient(90deg, var(--green), var(--blue), var(--amber));
 }

+.environment-badge {
+  position: fixed;
+  top: 72px;
+  right: 16px;
+  z-index: 61;
+  padding: 8px 10px;
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 750;
+  line-height: 1;
+  letter-spacing: 0;
+  background: rgba(20, 20, 24, 0.86);
+  border-radius: 999px;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
+}
+
 .ambient-canvas {
  position: fixed;
  inset: 0;