Feat: 新增评论组件，细化通知组件样式，引入环境变量，替换图标组件

app/components/layout/header.tsx

@@ -2,6 +2,8 @@ import { NavLink } from "react-router";
 import { Feed, GitHub, QQ } from "../ui/icons";
 import { clsn } from "~/utils";
 
+const { APP_APIURL } = import.meta.env;
+
 const navItems = [
   { name: "首页", to: "/" },
   { name: "日记", to: "/note" },
@@ -34,13 +36,13 @@ function Header() {
         ))}
       </nav>
       <nav className="flex items-center gap-2 [&>a]:hover:text-pink-400 [&>a]:transition-colors">
-        <a href="https://paul.ren/join-group" target="_blank" rel="noreferrer" title="企鹅群">
+        <a href={`${APP_APIURL}/join-group`} target="_blank" rel="noreferrer" title="企鹅群">
           <QQ className="w-5" />
         </a>
         <a href="https://github.com/Dreamer-Paul" target="_blank" rel="noreferrer" title="GitHub">
           <GitHub className="w-5" />
         </a>
-        <a href="https://paul.ren/feed" target="_blank" title="订阅 RSS">
+        <a href={`${APP_APIURL}/feed`} target="_blank" title="订阅 RSS">
           <Feed className="w-5" />
         </a>
       </nav>