feat(start): 填充起始页快捷入口并补文档
搜索框下方快捷入口由占位空槽改为 8 个实链接： 第一行 DeepSeek/GitHub/Bilibili/知乎/FMHY， 第二行 Rust/C++/C# 文档（col-start-2 居中）。 品牌图标内联 simple-icons 单 path，FMHY 用字标。 新增 docs/startpage-quicklinks.md 记录搜索框 + 入口及增删方法。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
parent
d7d520058c
commit
f576b03315
@ -1,39 +1,96 @@
|
|||||||
import { motion } from 'framer-motion'
|
import { motion } from 'framer-motion'
|
||||||
|
import type { ReactNode } from 'react'
|
||||||
|
|
||||||
// 预留 10 个快捷入口，先全部留空。后续每项填 { icon, label, href } 即可。
|
// 快捷入口：第一行 5 个网站，第二行 3 个文档。每项 { icon, label, href }。
|
||||||
interface Shortcut {
|
interface Shortcut {
|
||||||
label?: string
|
label?: string
|
||||||
href?: string
|
href?: string
|
||||||
|
icon?: ReactNode
|
||||||
}
|
}
|
||||||
|
|
||||||
const SHORTCUTS: Shortcut[] = Array.from({ length: 10 }, () => ({}))
|
// 品牌图标：单 path，fill=currentColor，跟随文字颜色。
|
||||||
|
const GithubIcon = (
|
||||||
|
<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden>
|
||||||
|
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
const DeepSeekIcon = (
|
||||||
|
<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden>
|
||||||
|
<path d="M23.748 4.651c-.254-.124-.364.113-.512.233-.051.04-.094.09-.137.137-.372.397-.806.657-1.373.626-.829-.046-1.537.214-2.163.848-.133-.782-.575-1.248-1.247-1.548-.352-.155-.708-.311-.955-.65-.172-.24-.219-.509-.305-.774-.055-.16-.11-.323-.293-.35-.2-.031-.278.136-.356.276-.313.572-.434 1.202-.422 1.84.027 1.436.633 2.58 1.838 3.393.137.094.172.187.129.323-.082.28-.18.553-.266.833-.055.179-.137.218-.328.14a5.5 5.5 0 0 1-1.737-1.179c-.857-.828-1.631-1.743-2.597-2.46a12 12 0 0 0-.689-.47c-.985-.957.13-1.743.387-1.836.27-.098.094-.433-.778-.428-.872.003-1.67.295-2.687.685a3 3 0 0 1-.465.136 9.6 9.6 0 0 0-2.883-.101c-1.885.21-3.39 1.1-4.497 2.622C.082 8.776-.231 10.854.152 13.02c.403 2.284 1.568 4.175 3.36 5.653 1.857 1.533 3.997 2.284 6.438 2.14 1.482-.085 3.132-.284 4.994-1.86.47.234.962.328 1.78.398.629.058 1.235-.031 1.705-.129.735-.155.684-.836.418-.961-2.155-1.004-1.682-.595-2.112-.926 1.095-1.295 2.768-3.598 3.284-6.733.05-.346.115-.834.108-1.114-.004-.171.035-.238.23-.257a4.2 4.2 0 0 0 1.545-.475c1.397-.763 1.96-2.016 2.093-3.517.02-.23-.004-.467-.247-.588M11.58 18.168c-2.088-1.642-3.101-2.183-3.52-2.16-.39.024-.32.472-.234.763.09.288.207.487.371.74.114.167.192.416-.113.603-.673.416-1.842-.14-1.897-.168-1.361-.801-2.5-1.86-3.301-3.306-.775-1.393-1.225-2.888-1.299-4.482-.02-.385.094-.522.477-.592a4.7 4.7 0 0 1 1.53-.038c2.131.311 3.946 1.264 5.467 2.774.868.86 1.525 1.887 2.202 2.89.72 1.066 1.494 2.082 2.48 2.915.348.291.626.513.892.677-.802.09-2.14.109-3.055-.615zm1.001-6.44a.306.306 0 0 1 .415-.287.3.3 0 0 1 .113.074.3.3 0 0 1 .086.214c0 .17-.136.307-.308.307a.303.303 0 0 1-.306-.307m3.11 1.596c-.2.081-.4.151-.591.16a1.25 1.25 0 0 1-.798-.254c-.274-.23-.47-.358-.551-.758a1.7 1.7 0 0 1 .015-.588c.07-.327-.007-.537-.238-.727-.188-.156-.426-.199-.689-.199a.6.6 0 0 1-.254-.078.253.253 0 0 1-.114-.358 1 1 0 0 1 .192-.21c.356-.202.767-.136 1.146.016.352.144.618.408 1.001.782.392.451.462.576.685.915.176.264.336.536.446.848.066.194-.02.353-.25.45" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
const BilibiliIcon = (
|
||||||
|
<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden>
|
||||||
|
<path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
const ZhihuIcon = (
|
||||||
|
<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden>
|
||||||
|
<path d="M5.721 0C2.251 0 0 2.25 0 5.719V18.28C0 21.751 2.252 24 5.721 24h12.56C21.751 24 24 21.75 24 18.281V5.72C24 2.249 21.75 0 18.281 0zm1.964 4.078c-.271.73-.5 1.434-.68 2.11h4.587c.545-.006.445 1.168.445 1.171H9.384a58.104 58.104 0 01-.112 3.797h2.712c.388.023.393 1.251.393 1.266H9.183a9.223 9.223 0 01-.408 2.102l.757-.604c.452.456 1.512 1.712 1.906 2.177.473.681.063 2.081.063 2.081l-2.794-3.382c-.653 2.518-1.845 3.607-1.845 3.607-.523.468-1.58.82-2.64.516 2.218-1.73 3.44-3.917 3.667-6.497H4.491c0-.015.197-1.243.806-1.266h2.71c.024-.32.086-3.254.086-3.797H6.598c-.136.406-.158.447-.268.753-.594 1.095-1.603 1.122-1.907 1.155.906-1.821 1.416-3.6 1.591-4.064.425-1.124 1.671-1.125 1.671-1.125zM13.078 6h6.377v11.33h-2.573l-2.184 1.373-.401-1.373h-1.219zm1.313 1.219v8.86h.623l.263.937 1.455-.938h1.456v-8.86z" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
// FMHY 不在 simple-icons 图标库里，用字标，跟其余图标同色同风格。
|
||||||
|
const FmhyIcon = (
|
||||||
|
<span className="text-[15px] font-bold leading-none tracking-tight" aria-hidden>
|
||||||
|
FMHY
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
|
||||||
|
const RustIcon = (
|
||||||
|
<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden>
|
||||||
|
<path d="M23.8346 11.7033l-1.0073-.6236a13.7268 13.7268 0 00-.0283-.2936l.8656-.8069a.3483.3483 0 00-.1154-.578l-1.1066-.414a8.4958 8.4958 0 00-.087-.2856l.6904-.9587a.3462.3462 0 00-.2257-.5446l-1.1663-.1894a9.3574 9.3574 0 00-.1407-.2622l.49-1.0761a.3437.3437 0 00-.0274-.3361.3486.3486 0 00-.3006-.154l-1.1845.0416a6.7444 6.7444 0 00-.1873-.2268l.2723-1.153a.3472.3472 0 00-.417-.4172l-1.1532.2724a14.0183 14.0183 0 00-.2278-.1873l.0415-1.1845a.3442.3442 0 00-.49-.328l-1.076.491c-.0872-.0476-.1742-.0952-.2623-.1407l-.1903-1.1673A.3483.3483 0 0016.256.955l-.9597.6905a8.4867 8.4867 0 00-.2855-.086l-.414-1.1066a.3483.3483 0 00-.5781-.1154l-.8069.8666a9.2936 9.2936 0 00-.2936-.0284L12.2946.1683a.3462.3462 0 00-.5892 0l-.6236 1.0073a13.7383 13.7383 0 00-.2936.0284L9.9803.3374a.3462.3462 0 00-.578.1154l-.4141 1.1065c-.0962.0274-.1903.0567-.2855.086L7.744.955a.3483.3483 0 00-.5447.2258L7.009 2.348a9.3574 9.3574 0 00-.2622.1407l-1.0762-.491a.3462.3462 0 00-.49.328l.0416 1.1845a7.9826 7.9826 0 00-.2278.1873L3.8413 3.425a.3472.3472 0 00-.4171.4171l.2713 1.1531c-.0628.075-.1255.1509-.1863.2268l-1.1845-.0415a.3462.3462 0 00-.328.49l.491 1.0761a9.167 9.167 0 00-.1407.2622l-1.1662.1894a.3483.3483 0 00-.2258.5446l.6904.9587a13.303 13.303 0 00-.087.2855l-1.1065.414a.3483.3483 0 00-.1155.5781l.8656.807a9.2936 9.2936 0 00-.0283.2935l-1.0073.6236a.3442.3442 0 000 .5892l1.0073.6236c.008.0982.0182.1964.0283.2936l-.8656.8079a.3462.3462 0 00.1155.578l1.1065.4141c.0273.0962.0567.1914.087.2855l-.6904.9587a.3452.3452 0 00.2268.5447l1.1662.1893c.0456.088.0922.1751.1408.2622l-.491 1.0762a.3462.3462 0 00.328.49l1.1834-.0415c.0618.0769.1235.1528.1873.2277l-.2713 1.1541a.3462.3462 0 00.4171.4161l1.153-.2713c.075.0638.151.1255.2279.1863l-.0415 1.1845a.3442.3442 0 00.49.327l1.0761-.49c.087.0486.1741.0951.2622.1407l.1903 1.1662a.3483.3483 0 00.5447.2268l.9587-.6904a9.299 9.299 0 00.2855.087l.414 1.1066a.3452.3452 0 00.5781.1154l.8079-.8656c.0972.0111.1954.0203.2936.0294l.6236 1.0073a.3472.3472 0 00.5892 0l.6236-1.0073c.0982-.0091.1964-.0183.2936-.0294l.8069.8656a.3483.3483 0 00.578-.1154l.4141-1.1066a8.4626 8.4626 0 00.2855-.087l.9587.6904a.3452.3452 0 00.5447-.2268l.1903-1.1662c.088-.0456.1751-.0931.2622-.1407l1.0762.49a.3472.3472 0 00.49-.327l-.0415-1.1845a6.7267 6.7267 0 00.2267-.1863l1.1531.2713a.3472.3472 0 00.4171-.416l-.2713-1.1542c.0628-.0749.1255-.1508.1863-.2278l1.1845.0415a.3442.3442 0 00.328-.49l-.49-1.076c.0475-.0872.0951-.1742.1407-.2623l1.1662-.1893a.3483.3483 0 00.2258-.5447l-.6904-.9587.087-.2855 1.1066-.414a.3462.3462 0 00.1154-.5781l-.8656-.8079c.0101-.0972.0202-.1954.0283-.2936l1.0073-.6236a.3442.3442 0 000-.5892zm-6.7413 8.3551a.7138.7138 0 01.2986-1.396.714.714 0 11-.2997 1.396zm-.3422-2.3142a.649.649 0 00-.7715.5l-.3573 1.6685c-1.1035.501-2.3285.7795-3.6193.7795a8.7368 8.7368 0 01-3.6951-.814l-.3574-1.6684a.648.648 0 00-.7714-.499l-1.473.3158a8.7216 8.7216 0 01-.7613-.898h7.1676c.081 0 .1356-.0141.1356-.088v-2.536c0-.074-.0536-.0881-.1356-.0881h-2.0966v-1.6077h2.2677c.2065 0 1.1065.0587 1.394 1.2088.0901.3533.2875 1.5044.4232 1.8729.1346.413.6833 1.2381 1.2685 1.2381h3.5716a.7492.7492 0 00.1296-.0131 8.7874 8.7874 0 01-.8119.9526zM6.8369 20.024a.714.714 0 11-.2997-1.396.714.714 0 01.2997 1.396zM4.1177 8.9972a.7137.7137 0 11-1.304.5791.7137.7137 0 011.304-.579zm-.8352 1.9813l1.5347-.6824a.65.65 0 00.33-.8585l-.3158-.7147h1.2432v5.6025H3.5669a8.7753 8.7753 0 01-.2834-3.348zm6.7343-.5437V8.7836h2.9601c.153 0 1.0792.1772 1.0792.8697 0 .575-.7107.7815-1.2948.7815zm10.7574 1.4862c0 .2187-.008.4363-.0243.651h-.9c-.09 0-.1265.0586-.1265.1477v.413c0 .973-.5487 1.1846-1.0296 1.2382-.4576.0517-.9648-.1913-1.0275-.4717-.2704-1.5186-.7198-1.8436-1.4305-2.4034.8817-.5599 1.799-1.386 1.799-2.4915 0-1.1936-.819-1.9458-1.3769-2.3153-.7825-.5163-1.6491-.6195-1.883-.6195H5.4682a8.7651 8.7651 0 014.907-2.7699l1.0974 1.151a.648.648 0 00.9182.0213l1.227-1.1743a8.7753 8.7753 0 016.0044 4.2762l-.8403 1.8982a.652.652 0 00.33.8585l1.6178.7188c.0283.2875.0425.577.0425.8717zm-9.3006-9.5993a.7128.7128 0 11.984 1.0316.7137.7137 0 01-.984-1.0316zm8.3389 6.71a.7107.7107 0 01.9395-.3625.7137.7137 0 11-.9405.3635z" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
const CppIcon = (
|
||||||
|
<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden>
|
||||||
|
<path d="M22.394 6c-.167-.29-.398-.543-.652-.69L12.926.22c-.509-.294-1.34-.294-1.848 0L2.26 5.31c-.508.293-.923 1.013-.923 1.6v10.18c0 .294.104.62.271.91.167.29.398.543.652.69l8.816 5.09c.508.293 1.34.293 1.848 0l8.816-5.09c.254-.147.485-.4.652-.69.167-.29.27-.616.27-.91V6.91c.003-.294-.1-.62-.268-.91zM12 19.11c-3.92 0-7.109-3.19-7.109-7.11 0-3.92 3.19-7.11 7.11-7.11a7.133 7.133 0 016.156 3.553l-3.076 1.78a3.567 3.567 0 00-3.08-1.78A3.56 3.56 0 008.444 12 3.56 3.56 0 0012 15.555a3.57 3.57 0 003.08-1.778l3.078 1.78A7.135 7.135 0 0112 19.11zm7.11-6.715h-.79v.79h-.79v-.79h-.79v-.79h.79v-.79h.79v.79h.79zm2.962 0h-.79v.79h-.79v-.79h-.79v-.79h.79v-.79h.79v.79h.79z" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
const CsharpIcon = (
|
||||||
|
<svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden>
|
||||||
|
<path d="M1.194 7.543v8.913c0 1.103.588 2.122 1.544 2.674l7.718 4.456a3.086 3.086 0 0 0 3.088 0l7.718-4.456a3.087 3.087 0 0 0 1.544-2.674V7.543a3.084 3.084 0 0 0-1.544-2.673L13.544.414a3.086 3.086 0 0 0-3.088 0L2.738 4.87a3.085 3.085 0 0 0-1.544 2.673Zm5.403 2.914v3.087a.77.77 0 0 0 .772.772.773.773 0 0 0 .772-.772.773.773 0 0 1 1.317-.546.775.775 0 0 1 .226.546 2.314 2.314 0 1 1-4.631 0v-3.087c0-.615.244-1.203.679-1.637a2.312 2.312 0 0 1 3.274 0c.434.434.678 1.023.678 1.637a.769.769 0 0 1-.226.545.767.767 0 0 1-1.091 0 .77.77 0 0 1-.226-.545.77.77 0 0 0-.772-.772.771.771 0 0 0-.772.772Zm12.35 3.087a.77.77 0 0 1-.772.772h-.772v.772a.773.773 0 0 1-1.544 0v-.772h-1.544v.772a.773.773 0 0 1-1.317.546.775.775 0 0 1-.226-.546v-.772H12a.771.771 0 1 1 0-1.544h.772v-1.543H12a.77.77 0 1 1 0-1.544h.772v-.772a.773.773 0 0 1 1.317-.546.775.775 0 0 1 .226.546v.772h1.544v-.772a.773.773 0 0 1 1.544 0v.772h.772a.772.772 0 0 1 0 1.544h-.772v1.543h.772a.776.776 0 0 1 .772.772Zm-3.088-2.315h-1.544v1.543h1.544v-1.543Z" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
|
||||||
|
const SHORTCUTS: Shortcut[] = [
|
||||||
|
{ label: 'DeepSeek', href: 'https://chat.deepseek.com', icon: DeepSeekIcon },
|
||||||
|
{ label: 'GitHub', href: 'https://github.com', icon: GithubIcon },
|
||||||
|
{ label: 'Bilibili', href: 'https://www.bilibili.com', icon: BilibiliIcon },
|
||||||
|
{ label: '知乎', href: 'https://www.zhihu.com', icon: ZhihuIcon },
|
||||||
|
{ label: 'FMHY', href: 'https://fm-hy.top', icon: FmhyIcon },
|
||||||
|
{ label: 'Rust 文档', href: 'https://rustwiki.org/zh-CN/book/', icon: RustIcon },
|
||||||
|
{ label: 'C++ 文档', href: 'https://en.cppreference.com/', icon: CppIcon },
|
||||||
|
{ label: 'C# 文档', href: 'https://learn.microsoft.com/dotnet/csharp/', icon: CsharpIcon },
|
||||||
|
]
|
||||||
|
|
||||||
export function QuickLinks() {
|
export function QuickLinks() {
|
||||||
return (
|
return (
|
||||||
|
// grid-cols-5：8 个入口自然排成第一行 5 个、第二行 3 个（左对齐）。
|
||||||
<div className="mx-auto grid w-full max-w-xl grid-cols-5 gap-3 sm:gap-4">
|
<div className="mx-auto grid w-full max-w-xl grid-cols-5 gap-3 sm:gap-4">
|
||||||
{SHORTCUTS.map((item, i) => (
|
{SHORTCUTS.map((item, i) => (
|
||||||
<motion.button
|
<motion.a
|
||||||
key={i}
|
key={i}
|
||||||
type="button"
|
href={item.href}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
aria-label={item.label}
|
||||||
|
title={item.label}
|
||||||
whileHover={{ scale: 1.12, y: -4 }}
|
whileHover={{ scale: 1.12, y: -4 }}
|
||||||
whileTap={{ scale: 0.95 }}
|
whileTap={{ scale: 0.95 }}
|
||||||
transition={{ type: 'spring', stiffness: 400, damping: 22 }}
|
transition={{ type: 'spring', stiffness: 400, damping: 22 }}
|
||||||
className="glass-panel flex aspect-square items-center justify-center rounded-2xl text-white/30 transition-colors hover:text-white/55"
|
// 第二行第一个入口从第 2 列起，3 个占第 2/3/4 列即居中。
|
||||||
aria-label={item.label ?? `Shortcut ${i + 1} (empty)`}
|
className={`glass-panel flex aspect-square items-center justify-center rounded-2xl text-white/75 transition-colors hover:text-white${
|
||||||
|
i === 5 ? ' col-start-2' : ''
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
{/* 占位「+」：填入图标前的空槽 */}
|
{item.icon}
|
||||||
<svg
|
</motion.a>
|
||||||
viewBox="0 0 24 24"
|
|
||||||
width="22"
|
|
||||||
height="22"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="1.6"
|
|
||||||
strokeLinecap="round"
|
|
||||||
>
|
|
||||||
<path d="M12 6v12M6 12h12" />
|
|
||||||
</svg>
|
|
||||||
</motion.button>
|
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
55
docs/startpage-quicklinks.md
Normal file
55
docs/startpage-quicklinks.md
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
# 起始页：搜索框 + 快捷入口（已实现）
|
||||||
|
|
||||||
|
导航起始页在问候语 / 天气行下方有两块：可切换搜索引擎的**搜索框**，
|
||||||
|
以及一组**快捷入口**（第一行 5 个网站、第二行 3 个文档，居中）。
|
||||||
|
|
||||||
|
- 前端：
|
||||||
|
- `Client/src/components/start/SearchBar.tsx`：搜索框 + 引擎下拉
|
||||||
|
- `Client/src/components/start/QuickLinks.tsx`：快捷入口宫格
|
||||||
|
|
||||||
|
## 搜索框（`SearchBar.tsx`）
|
||||||
|
|
||||||
|
- 内置 4 个引擎，默认 **Bing**：Bing / Google / 百度 / DuckDuckGo。
|
||||||
|
每个引擎是 `{ name, url }`，`url` 后直接拼 `encodeURIComponent(query)`。
|
||||||
|
- 选中的引擎存 `localStorage`（键 `ip.startpage.engine`），下次进页面记住。
|
||||||
|
- 提交后 `window.location.href` 跳到引擎搜索结果（当前标签页）。
|
||||||
|
- 要加引擎：往 `ENGINES` 里加一项即可，下拉会自动多一行。
|
||||||
|
|
||||||
|
## 快捷入口（`QuickLinks.tsx`）
|
||||||
|
|
||||||
|
- 数据是一个 `SHORTCUTS: Shortcut[]`，每项 `{ label, href, icon }`。
|
||||||
|
当前 8 个，每个用 `<motion.a target="_blank">` 新标签页打开：
|
||||||
|
|
||||||
|
| 行 | 入口 | 链接 |
|
||||||
|
|----|------|------|
|
||||||
|
| 一 | DeepSeek | `https://chat.deepseek.com` |
|
||||||
|
| 一 | GitHub | `https://github.com` |
|
||||||
|
| 一 | Bilibili | `https://www.bilibili.com` |
|
||||||
|
| 一 | 知乎 | `https://www.zhihu.com` |
|
||||||
|
| 一 | FMHY | `https://fm-hy.top` |
|
||||||
|
| 二 | Rust 文档 | `https://rustwiki.org/zh-CN/book/` |
|
||||||
|
| 二 | C++ 文档 | `https://en.cppreference.com/` |
|
||||||
|
| 二 | C# 文档 | `https://learn.microsoft.com/dotnet/csharp/` |
|
||||||
|
|
||||||
|
- **布局**：容器是 `grid-cols-5`，8 个元素自然排成「第一行 5 个、第二行 3 个」。
|
||||||
|
第二行第一个入口加 `col-start-2`，让那 3 个落在第 2/3/4 列即**居中**。
|
||||||
|
- **图标**：品牌 logo 用 [simple-icons](https://simpleicons.org/) 的单 `path`，
|
||||||
|
内联成 SVG、`fill=currentColor` 跟随文字颜色（默认 `white/75`、悬停纯白），
|
||||||
|
和玻璃风、天气图标统一，零依赖。
|
||||||
|
- **FMHY** 不在 simple-icons 里，用紧凑 `FMHY` 字标占位（同色同风格）。
|
||||||
|
- **C#** 用 simple-icons 的 `csharp`（六边形 + C#），不是单独的 `#`(sharp)。
|
||||||
|
- 悬停有 framer-motion 弹簧放大上浮动效（与其它起始页元素一致）。
|
||||||
|
|
||||||
|
### 增 / 删一个入口
|
||||||
|
|
||||||
|
1. 若是品牌站，去 simple-icons 复制对应图标的 `path d="…"`，照现有 `XxxIcon`
|
||||||
|
写一个内联 SVG 常量（`width/height=22`、`fill=currentColor`）；没有官方图标就
|
||||||
|
仿 `FmhyIcon` 用 `<span>` 字标。
|
||||||
|
2. 往 `SHORTCUTS` 加 `{ label, href, icon }`。
|
||||||
|
3. 调整居中：第二行第一个入口要带 `col-start-N`。当前规则写死在 `i === 5`
|
||||||
|
（第 6 个起是第二行）；若每行个数变了，按新的「第二行起始下标 / 居中起始列」改这两处。
|
||||||
|
|
||||||
|
## 部署
|
||||||
|
|
||||||
|
纯前端改动，按 `docs/startpage-weather-location.md`「只改前端」一节：
|
||||||
|
`npm run build` → 清空服务器 `static/` → 上传 `dist/*`，后端进程不用动。
|
||||||
Loading…
Reference in New Issue
Block a user