20260610173132
This commit is contained in:
oneao committed
1 parent
65685d1a6a
commit
6cb198203d
56 files changed
+4265
-1210
No files matched your search
@@ -1,11 +1,19 @@
|
||||
import styles from './styles.module.css'
|
||||
|
||||
export type LinkCardTagType = 'default' | 'success' | 'warning' | 'error' | 'info'
|
||||
|
||||
export interface LinkCardTag {
|
||||
label: string
|
||||
type?: LinkCardTagType
|
||||
}
|
||||
|
||||
export interface LinkCardProps {
|
||||
title: string
|
||||
description: string
|
||||
href: string
|
||||
icon?: string
|
||||
note?: string
|
||||
tags?: LinkCardTag[]
|
||||
}
|
||||
|
||||
function getHostname(href: string) {
|
||||
@@ -23,6 +31,7 @@ export default function LinkCard({
|
||||
href,
|
||||
icon,
|
||||
note,
|
||||
tags,
|
||||
}: LinkCardProps) {
|
||||
const hostname = getHostname(href)
|
||||
const favicon = icon || (hostname ? `https://www.google.com/s2/favicons?domain=${hostname}&sz=64` : undefined)
|
||||
@@ -34,17 +43,29 @@ export default function LinkCard({
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span className={styles.cardTopline}>
|
||||
<span className={styles.cardHeader}>
|
||||
{favicon
|
||||
? <img src={favicon} alt="" className={styles.icon} loading="lazy" />
|
||||
: <span className={styles.placeholder}>{title.charAt(0)}</span>}
|
||||
<span className={styles.title}>{title}</span>
|
||||
<span className={styles.cardTitle}>{title}</span>
|
||||
</span>
|
||||
<span className={styles.description}>{description}</span>
|
||||
{hostname && <span className={styles.host}>{hostname}</span>}
|
||||
{tags && tags.length > 0 && (
|
||||
<span className={styles.tags}>
|
||||
{tags.map((tag, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className={`${styles.tag} ${styles[`tag${tag.type ? tag.type.charAt(0).toUpperCase() + tag.type.slice(1) : 'Default'}`]}`}
|
||||
>
|
||||
{tag.label}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
{note && (
|
||||
<span className={styles.note} role="tooltip">
|
||||
<span className={styles.noteLabel}>备注</span>
|
||||
<span className={styles.note}>
|
||||
<strong>备注：</strong>
|
||||
{note}
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import React from 'react'
|
||||
import styles from './styles.module.css'
|
||||
|
||||
interface Props {
|
||||
children: React.ReactNode
|
||||
@@ -7,7 +6,7 @@ interface Props {
|
||||
|
||||
export default function LinkGrid({ children }: Props) {
|
||||
return (
|
||||
<div className={styles.grid}>
|
||||
<div className="row">
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -101,12 +101,6 @@ export default function SearchableLinkGrid({ groups }: SearchableLinkGridProps)
|
||||
<div className={styles.container}>
|
||||
<div className={styles.toolbar}>
|
||||
<label className={styles.searchWrapper}>
|
||||
<span className={styles.searchIcon} aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<circle cx="11" cy="11" r="7" />
|
||||
<path d="m20 20-3.5-3.5" />
|
||||
</svg>
|
||||
</span>
|
||||
<input
|
||||
type="search"
|
||||
placeholder="搜索名称、说明或链接"
|
||||
|
||||
@@ -5,66 +5,60 @@
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: sticky;
|
||||
top: calc(var(--ifm-navbar-height) + 0.5rem);
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.25rem 0 0.5rem;
|
||||
padding: 0.5rem 0;
|
||||
background: var(--ifm-background-color);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.searchWrapper {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
height: 44px;
|
||||
padding: 0 0.875rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
background: var(--oneao-surface-muted);
|
||||
transition: border-color 0.16s ease, box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.searchWrapper:focus-within {
|
||||
border-color: var(--ifm-color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(46, 133, 85, 0.12);
|
||||
}
|
||||
|
||||
.searchIcon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--ifm-color-emphasis-500);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.searchIcon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
.searchWrapper::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0.9rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background: var(--ifm-color-emphasis-500);
|
||||
content: '';
|
||||
pointer-events: none;
|
||||
transform: translateY(-50%);
|
||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E")
|
||||
center / contain no-repeat;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
height: 44px;
|
||||
padding: 0 1rem 0 2.45rem;
|
||||
border: 1px solid var(--ifm-color-emphasis-200);
|
||||
border-radius: 10px;
|
||||
background-color: var(--ifm-background-surface-color);
|
||||
color: var(--ifm-font-color-base);
|
||||
font-size: 0.95rem;
|
||||
outline: none;
|
||||
transition:
|
||||
border-color 0.16s ease,
|
||||
box-shadow 0.16s ease;
|
||||
}
|
||||
|
||||
.searchInput::placeholder {
|
||||
color: var(--ifm-color-emphasis-500);
|
||||
.searchInput:focus {
|
||||
border-color: var(--ifm-color-primary);
|
||||
box-shadow: 0 0 0 3px var(--ifm-color-primary-lightest);
|
||||
}
|
||||
|
||||
.resultCount {
|
||||
flex-shrink: 0;
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.filters {
|
||||
@@ -75,19 +69,18 @@
|
||||
|
||||
.filterButton {
|
||||
height: 34px;
|
||||
padding: 0 0.875rem;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
background: var(--oneao-surface-muted);
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
font-size: 0.875rem;
|
||||
padding: 0 0.85rem;
|
||||
border: 1px solid var(--ifm-color-emphasis-300);
|
||||
border-radius: 999px;
|
||||
background: var(--ifm-background-surface-color);
|
||||
color: var(--ifm-font-color-base);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.filterButton:hover {
|
||||
border-color: var(--ifm-color-emphasis-400);
|
||||
color: var(--ifm-color-emphasis-900);
|
||||
border-color: var(--ifm-color-primary);
|
||||
color: var(--ifm-color-primary-dark);
|
||||
}
|
||||
|
||||
.filterButton.active {
|
||||
@@ -97,13 +90,12 @@
|
||||
}
|
||||
|
||||
.sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.group {
|
||||
scroll-margin-top: calc(var(--ifm-navbar-height, 64px) + 1rem);
|
||||
scroll-margin-top: calc(var(--ifm-navbar-height) + 1rem);
|
||||
}
|
||||
|
||||
.groupHeader {
|
||||
@@ -111,20 +103,20 @@
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.9rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--oneao-border);
|
||||
border-bottom: 1px solid var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
.groupTitle {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.4;
|
||||
font-size: 1.28rem;
|
||||
}
|
||||
|
||||
.groupCount {
|
||||
color: var(--ifm-color-emphasis-500);
|
||||
font-size: 0.8125rem;
|
||||
.groupCount,
|
||||
.subCount {
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
font-size: 0.78rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -139,71 +131,62 @@
|
||||
.subHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.625rem;
|
||||
gap: 0.55rem;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
margin: 0;
|
||||
color: var(--ifm-color-emphasis-800);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 650;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.subCount {
|
||||
color: var(--ifm-color-emphasis-500);
|
||||
font-size: 0.75rem;
|
||||
font-size: 1.04rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 0.5rem;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 86px;
|
||||
min-height: 124px;
|
||||
flex-direction: column;
|
||||
padding: 0.72rem 0.75rem 0.7rem 0.85rem;
|
||||
border: 1px solid transparent;
|
||||
border-left: 3px solid var(--oneao-border);
|
||||
padding: 0.85rem;
|
||||
border: 1px solid var(--ifm-color-emphasis-200);
|
||||
border-radius: 8px;
|
||||
background: var(--oneao-surface-soft);
|
||||
background: var(--ifm-background-surface-color);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
|
||||
transition:
|
||||
border-color 0.16s ease,
|
||||
box-shadow 0.16s ease,
|
||||
transform 0.16s ease;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus-visible {
|
||||
border-color: var(--ifm-color-primary);
|
||||
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border-color: var(--ifm-color-primary);
|
||||
background: var(--oneao-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.card:focus-visible {
|
||||
outline: 2px solid var(--ifm-color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.cardTopline {
|
||||
.cardHeader {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.icon,
|
||||
.placeholder {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@@ -214,31 +197,64 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
background: var(--ifm-background-surface-color);
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
font-size: 0.8125rem;
|
||||
border-radius: 5px;
|
||||
background: var(--ifm-color-emphasis-100);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.title {
|
||||
min-width: 0;
|
||||
.cardTitle {
|
||||
overflow: hidden;
|
||||
color: var(--ifm-color-emphasis-900);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 650;
|
||||
line-height: 1.35;
|
||||
flex: 1;
|
||||
color: var(--ifm-heading-color);
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.3rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 0.15rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tagDefault {
|
||||
background: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.tagSuccess {
|
||||
background: var(--ifm-color-success);
|
||||
}
|
||||
|
||||
.tagWarning {
|
||||
background: var(--ifm-color-warning);
|
||||
}
|
||||
|
||||
.tagError {
|
||||
background: var(--ifm-color-danger);
|
||||
}
|
||||
|
||||
.tagInfo {
|
||||
background: var(--ifm-color-info);
|
||||
}
|
||||
|
||||
.description {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
margin-top: 0.45rem;
|
||||
margin-top: 0.55rem;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
font-size: 0.78rem;
|
||||
line-height: 1.42;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.45;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
@@ -246,9 +262,9 @@
|
||||
.host {
|
||||
overflow: hidden;
|
||||
margin-top: auto;
|
||||
padding-top: 0.48rem;
|
||||
padding-top: 0.45rem;
|
||||
color: var(--ifm-color-emphasis-500);
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.78rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -256,22 +272,24 @@
|
||||
.note {
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
bottom: calc(100% - 0.25rem);
|
||||
bottom: calc(100% - 0.15rem);
|
||||
left: 0.75rem;
|
||||
z-index: 5;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--oneao-border);
|
||||
padding: 0.7rem 0.75rem;
|
||||
border: 1px solid var(--ifm-color-emphasis-300);
|
||||
border-radius: 8px;
|
||||
background: var(--ifm-card-background-color);
|
||||
box-shadow: 0 12px 30px var(--oneao-shadow);
|
||||
background: var(--ifm-background-surface-color);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
|
||||
color: var(--ifm-color-emphasis-800);
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.6;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.55;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(0.35rem);
|
||||
transition: opacity 0.16s ease, transform 0.16s ease;
|
||||
transition:
|
||||
opacity 0.16s ease,
|
||||
transform 0.16s ease;
|
||||
}
|
||||
|
||||
.note::after {
|
||||
@@ -280,10 +298,10 @@
|
||||
bottom: -6px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-right: 1px solid var(--oneao-border);
|
||||
border-bottom: 1px solid var(--oneao-border);
|
||||
background: var(--ifm-card-background-color);
|
||||
content: "";
|
||||
border-right: 1px solid var(--ifm-color-emphasis-300);
|
||||
border-bottom: 1px solid var(--ifm-color-emphasis-300);
|
||||
background: var(--ifm-background-surface-color);
|
||||
content: '';
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
@@ -293,30 +311,21 @@
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.noteLabel {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--ifm-color-primary-dark);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.noResults {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 180px;
|
||||
padding: 2rem;
|
||||
border: 1px dashed var(--ifm-color-emphasis-300);
|
||||
border-radius: 8px;
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.noResults p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .placeholder {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
@media (max-width: 1180px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 996px) {
|
||||
@@ -325,7 +334,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
@media (max-width: 768px) {
|
||||
.toolbar {
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
@@ -335,13 +344,23 @@
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.filters {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
.filterButton {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
@media (max-width: 520px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -6,168 +6,29 @@
|
||||
|
||||
/* You can override the default Infima variables here. */
|
||||
:root {
|
||||
--ifm-color-primary: #2f7451;
|
||||
--ifm-color-primary-dark: #285f44;
|
||||
--ifm-color-primary-darker: #23563d;
|
||||
--ifm-color-primary-darkest: #1b4530;
|
||||
--ifm-color-primary-light: #3b8560;
|
||||
--ifm-color-primary-lighter: #4a9670;
|
||||
--ifm-color-primary-lightest: #67ad88;
|
||||
--ifm-background-color: #f1f6ef;
|
||||
--ifm-background-surface-color: #fbfdf9;
|
||||
--ifm-navbar-background-color: rgba(251, 253, 249, 0.9);
|
||||
--ifm-footer-background-color: #e8f0e5;
|
||||
--ifm-card-background-color: #fbfdf9;
|
||||
--ifm-font-color-base: #253126;
|
||||
--ifm-heading-color: #132018;
|
||||
--ifm-color-emphasis-0: #ffffff;
|
||||
--ifm-color-emphasis-100: #e8f0e5;
|
||||
--ifm-color-emphasis-200: #dbe6d8;
|
||||
--ifm-color-emphasis-300: #c8d5c4;
|
||||
--ifm-color-emphasis-400: #a9b8a5;
|
||||
--ifm-color-emphasis-500: #7e8d7b;
|
||||
--ifm-color-emphasis-600: #657363;
|
||||
--ifm-color-emphasis-700: #485647;
|
||||
--ifm-color-emphasis-800: #2f3d31;
|
||||
--ifm-color-emphasis-900: #18241b;
|
||||
--oneao-surface-muted: #eaf2e7;
|
||||
--oneao-surface-soft: rgba(255, 255, 255, 0.54);
|
||||
--oneao-border: rgba(47, 86, 61, 0.16);
|
||||
--oneao-hover: rgba(255, 255, 255, 0.72);
|
||||
--oneao-shadow: rgba(28, 55, 38, 0.08);
|
||||
--oneao-grid-line: rgba(47, 116, 81, 0.055);
|
||||
--ifm-color-primary: #2e8555;
|
||||
--ifm-color-primary-dark: #29784c;
|
||||
--ifm-color-primary-darker: #277148;
|
||||
--ifm-color-primary-darkest: #205d3b;
|
||||
--ifm-color-primary-light: #33925d;
|
||||
--ifm-color-primary-lighter: #359962;
|
||||
--ifm-color-primary-lightest: #3cad6e;
|
||||
--ifm-code-font-size: 95%;
|
||||
--ifm-code-background: #e3ece0;
|
||||
--ifm-pre-background: #1f2e24;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(47, 125, 78, 0.14);
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* For readability concerns, you should choose a lighter palette in dark mode. */
|
||||
[data-theme="dark"] {
|
||||
--ifm-color-primary: #7dc69b;
|
||||
--ifm-color-primary-dark: #68b686;
|
||||
--ifm-color-primary-darker: #5fa97b;
|
||||
--ifm-color-primary-darkest: #4b8964;
|
||||
--ifm-color-primary-light: #94d3ab;
|
||||
--ifm-color-primary-lighter: #a7ddb9;
|
||||
--ifm-color-primary-lightest: #c5ead0;
|
||||
--ifm-background-color: #111812;
|
||||
--ifm-background-surface-color: #182219;
|
||||
--ifm-navbar-background-color: rgba(24, 34, 25, 0.9);
|
||||
--ifm-footer-background-color: #0d130e;
|
||||
--ifm-card-background-color: #182219;
|
||||
--ifm-font-color-base: #d9e4d8;
|
||||
--ifm-heading-color: #f0f7ee;
|
||||
--ifm-color-emphasis-100: #1d2a20;
|
||||
--ifm-color-emphasis-200: #263628;
|
||||
--ifm-color-emphasis-300: #334734;
|
||||
--ifm-color-emphasis-400: #50634f;
|
||||
--ifm-color-emphasis-500: #7f927d;
|
||||
--ifm-color-emphasis-600: #a1b1a0;
|
||||
--ifm-color-emphasis-700: #bdcbbb;
|
||||
--ifm-color-emphasis-800: #dbe5d9;
|
||||
--ifm-color-emphasis-900: #f0f7ee;
|
||||
--oneao-surface-muted: #1d2a20;
|
||||
--oneao-surface-soft: rgba(255, 255, 255, 0.035);
|
||||
--oneao-border: rgba(190, 220, 198, 0.13);
|
||||
--oneao-hover: rgba(255, 255, 255, 0.065);
|
||||
--oneao-shadow: rgba(0, 0, 0, 0.32);
|
||||
--oneao-grid-line: rgba(125, 198, 155, 0.055);
|
||||
--ifm-code-background: #223025;
|
||||
--ifm-pre-background: #0d140f;
|
||||
[data-theme='dark'] {
|
||||
--ifm-color-primary: #25c2a0;
|
||||
--ifm-color-primary-dark: #21af90;
|
||||
--ifm-color-primary-darker: #1fa588;
|
||||
--ifm-color-primary-darkest: #1a8870;
|
||||
--ifm-color-primary-light: #29d5b0;
|
||||
--ifm-color-primary-lighter: #32d8b4;
|
||||
--ifm-color-primary-lightest: #4fddbf;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--ifm-background-color);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--ifm-background-color);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-bottom: 1px solid var(--oneao-border);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
background: var(--ifm-background-color);
|
||||
}
|
||||
|
||||
.theme-doc-markdown,
|
||||
.blog-post-page article,
|
||||
.markdown {
|
||||
color: var(--ifm-font-color-base);
|
||||
}
|
||||
|
||||
.theme-doc-sidebar-container {
|
||||
background: var(--ifm-background-color);
|
||||
}
|
||||
|
||||
.menu {
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.menu__link:hover,
|
||||
.menu__link--active {
|
||||
background: var(--oneao-surface-muted);
|
||||
}
|
||||
|
||||
.table-of-contents {
|
||||
border-left-color: var(--oneao-border);
|
||||
}
|
||||
|
||||
.pagination-nav__link,
|
||||
.theme-edit-this-page,
|
||||
.breadcrumbs__link {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.pagination-nav__link,
|
||||
.dropdown__menu,
|
||||
.navbar-sidebar,
|
||||
.theme-admonition,
|
||||
.breadcrumbs__link {
|
||||
border-color: var(--oneao-border);
|
||||
background: var(--ifm-background-surface-color);
|
||||
}
|
||||
|
||||
.pagination-nav__link:hover,
|
||||
.breadcrumbs__link:hover,
|
||||
.dropdown__link:hover {
|
||||
background: var(--oneao-surface-muted);
|
||||
}
|
||||
|
||||
.navbar__link:hover,
|
||||
.navbar__link--active {
|
||||
color: var(--ifm-color-primary-dark);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .navbar__link:hover,
|
||||
[data-theme="dark"] .navbar__link--active {
|
||||
color: var(--ifm-color-primary-light);
|
||||
}
|
||||
|
||||
.clean-btn:hover {
|
||||
background: var(--oneao-surface-muted);
|
||||
}
|
||||
|
||||
.theme-code-block,
|
||||
pre {
|
||||
border: 1px solid var(--oneao-border);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left-color: var(--ifm-color-primary);
|
||||
background: var(--oneao-surface-muted);
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
/* navbar */
|
||||
.navbar--gitee-link,
|
||||
.navbar--github-link,
|
||||
@@ -187,40 +48,40 @@ blockquote {
|
||||
}
|
||||
|
||||
.navbar--gitee-link:before {
|
||||
content: "";
|
||||
content: '';
|
||||
height: 100%;
|
||||
display: block;
|
||||
background: url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 24 24' role='img' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.016 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.592.592 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .navbar--gitee-link:before {
|
||||
html[data-theme='dark'] .navbar--gitee-link:before {
|
||||
background: url("data:image/svg+xml,%3Csvg fill='%23ffffff' viewBox='0 0 24 24' role='img' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.016 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.592.592 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.navbar--github-link:before {
|
||||
content: "";
|
||||
content: '';
|
||||
height: 100%;
|
||||
display: block;
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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'/%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .navbar--github-link:before {
|
||||
html[data-theme='dark'] .navbar--github-link:before {
|
||||
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' 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'/%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
.navbar--email-link:before {
|
||||
content: "";
|
||||
content: '';
|
||||
height: 100%;
|
||||
display: block;
|
||||
background: url("data:image/svg+xml,%3Csvg height='24px' width='24px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 508 508' xml:space='preserve' fill='%23000000' stroke='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ccircle style='fill:%23324A5E;' cx='254' cy='254' r='254'%3E%3C/circle%3E%3Cpath style='fill:%23E6E9EE;' d='M423,372.4H85c-1.8,0-3.3-1.5-3.3-3.3V138.9c0-1.8,1.5-3.3,3.3-3.3h338c1.8,0,3.3,1.5,3.3,3.3v230.2 C426.3,370.9,424.8,372.4,423,372.4z'%3E%3C/path%3E%3Cpath style='fill:%23CED5E0;' d='M86.1,369c2.3,2.1,5.4,3.4,8.8,3.4h318.2c3.4,0,6.5-1.3,8.8-3.4L254,236.4L86.1,369z'%3E%3C/path%3E%3Cpath style='fill:%23FFFFFF;' d='M270.4,269.1l151.7-130c-2.4-2.2-5.5-3.6-9-3.6H94.9c-3.5,0-6.6,1.4-9,3.6l151.7,130 C247,277.2,261,277.2,270.4,269.1z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .navbar--email-link:before {
|
||||
html[data-theme='dark'] .navbar--email-link:before {
|
||||
background: url("data:image/svg+xml,%3Csvg height='24px' width='24px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 508 508' xml:space='preserve' fill='%23ffffff' stroke='%23ffffff'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ccircle style='fill:%23324A5E;' cx='254' cy='254' r='254'%3E%3C/circle%3E%3Cpath style='fill:%23E6E9EE;' d='M423,372.4H85c-1.8,0-3.3-1.5-3.3-3.3V138.9c0-1.8,1.5-3.3,3.3-3.3h338c1.8,0,3.3,1.5,3.3,3.3v230.2 C426.3,370.9,424.8,372.4,423,372.4z'%3E%3C/path%3E%3Cpath style='fill:%23CED5E0;' d='M86.1,369c2.3,2.1,5.4,3.4,8.8,3.4h318.2c3.4,0,6.5-1.3,8.8-3.4L254,236.4L86.1,369z'%3E%3C/path%3E%3Cpath style='fill:%23FFFFFF;' d='M270.4,269.1l151.7-130c-2.4-2.2-5.5-3.6-9-3.6H94.9c-3.5,0-6.6,1.4-9,3.6l151.7,130 C247,277.2,261,277.2,270.4,269.1z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")
|
||||
no-repeat;
|
||||
}
|
||||
@@ -238,32 +99,32 @@ html[data-theme="dark"] .navbar--email-link:before {
|
||||
}
|
||||
|
||||
.navbar--github-link::before {
|
||||
content: "GitHub";
|
||||
content: 'GitHub';
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .navbar--github-link::before {
|
||||
content: "GitHub";
|
||||
[data-theme='dark'] .navbar--github-link::before {
|
||||
content: 'GitHub';
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.navbar--gitee-link::before {
|
||||
content: "Gitee";
|
||||
content: 'Gitee';
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .navbar--gitee-link::before {
|
||||
content: "Gitee";
|
||||
[data-theme='dark'] .navbar--gitee-link::before {
|
||||
content: 'Gitee';
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.navbar--email-link::before {
|
||||
content: "Email";
|
||||
content: 'Email';
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .navbar--email-link::before {
|
||||
content: "Email";
|
||||
[data-theme='dark'] .navbar--email-link::before {
|
||||
content: 'Email';
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,584 @@
|
||||
import type { GroupedLinkCardProps } from '@site/src/components/Link/SearchableLinkGrid'
|
||||
|
||||
const resourceGroups: GroupedLinkCardProps[] = [
|
||||
{
|
||||
groupName: 'AI 与模型',
|
||||
subGroups: [
|
||||
{
|
||||
title: 'AI 助手',
|
||||
items: [
|
||||
{
|
||||
title: 'ChatGPT',
|
||||
description: 'OpenAI 推出的智能对话助手',
|
||||
href: 'https://chatgpt.com/',
|
||||
},
|
||||
{
|
||||
title: '腾讯元宝',
|
||||
description: '腾讯混元大模型智能助手',
|
||||
href: 'https://yuanbao.tencent.com/chat/naQivTmsDa',
|
||||
},
|
||||
{
|
||||
title: 'v0.dev',
|
||||
description: 'AI 代码生成工具',
|
||||
href: 'http://v0.dev/',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '模型与推理',
|
||||
items: [
|
||||
{
|
||||
title: 'Qwen',
|
||||
description: '阿里云通义千问',
|
||||
href: 'https://mcp.csdn.net/683559a9606a8318e85a74e7.html',
|
||||
},
|
||||
{
|
||||
title: '腾讯混元',
|
||||
description: '腾讯大模型项目',
|
||||
href: 'https://github.com/Tencent-Hunyuan/Tencent-Hunyuan-Large',
|
||||
},
|
||||
{
|
||||
title: 'InternVL',
|
||||
description: '多模态大模型',
|
||||
href: 'https://internvl.readthedocs.io/en/latest/internvl3.0/quick_start.html',
|
||||
},
|
||||
{
|
||||
title: 'Ollama',
|
||||
description: '本地大模型运行工具',
|
||||
href: 'https://ollama.com/',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '评测与资料',
|
||||
items: [
|
||||
{
|
||||
title: 'OpenCompass',
|
||||
description: '大模型评测榜单',
|
||||
href: 'https://rank.opencompass.org.cn/leaderboard-multimodal/',
|
||||
},
|
||||
{
|
||||
title: '免费 AI 接口整理',
|
||||
description: '免费 AI 接口资料',
|
||||
href: 'https://www.cnblogs.com/vipstone/p/19142030',
|
||||
},
|
||||
{
|
||||
title: 'AI Agent Book',
|
||||
description: 'AI Agent 入门与实践资料',
|
||||
note: '适合系统了解 Agent 概念、工具调用、工作流和工程实践。',
|
||||
href: 'https://waylandz.com/ai-agent-book/',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'API中转站',
|
||||
items: [
|
||||
{
|
||||
title: 'FreeModel',
|
||||
description: '”手机号无法验证”',
|
||||
href: 'https://freemodel.dev/dashboard',
|
||||
tags: [
|
||||
{
|
||||
label: '手机号无法验证',
|
||||
type: 'error',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '4Router',
|
||||
href: 'https://4router.net/console',
|
||||
description: '送 4 免费额度（2注册+2加群）',
|
||||
},
|
||||
{
|
||||
title: '夯炸了',
|
||||
href: 'https://api.hangzhale.com/home',
|
||||
description: '送 0.5 免费额度',
|
||||
tags: [
|
||||
{
|
||||
label: '好用',
|
||||
type: 'success',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '登仙 API',
|
||||
description: '送 10 免费额度 + 每日签到',
|
||||
href: 'https://api.denxio.top/home',
|
||||
tags: [
|
||||
{
|
||||
label: 'CCS无法使用',
|
||||
type: 'error',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '可萌中转站',
|
||||
description: '送 35 免费额度，GPT 5.4',
|
||||
href: 'https://api456.me/',
|
||||
tags: [
|
||||
{
|
||||
label: '按次收费',
|
||||
type: 'warning',
|
||||
},
|
||||
{
|
||||
label: '性价比低',
|
||||
type: 'warning',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Bluesminds',
|
||||
description: '送 100 免费额度',
|
||||
href: 'https://api.bluesminds.com/',
|
||||
tags: [
|
||||
{
|
||||
label: '好用',
|
||||
type: 'success',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'API中转工具',
|
||||
items: [
|
||||
{
|
||||
title: 'cc-switch',
|
||||
description: 'GitHub 仓库项目',
|
||||
note: 'CC Switch 为你提供一个桌面应用来管理所有支持的 AI 工具。无需手动编辑配置文件，你将获得一个可视化界面，一键将供应商导入应用，一键在不同的供应商之间进行切换，内置 50+ 供应商预设、统一的 MCP, SKILLS 管理以及系统托盘即时切换功能——所有操作都基于可靠的 SQLite 数据库和原子写入机制，保护你的配置不被损坏。',
|
||||
href: 'https://github.com/farion1231/cc-switch',
|
||||
},
|
||||
{
|
||||
title: 'ModelVerify',
|
||||
description: '验证中转站模型真伪',
|
||||
note: '用于辅助判断中转站返回的模型是否和标称模型一致。',
|
||||
href: 'https://modelverify.ai/zh-CN',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
groupName: '视觉与 OCR',
|
||||
subGroups: [
|
||||
{
|
||||
title: 'OCR 与文档解析',
|
||||
items: [
|
||||
{
|
||||
title: 'PaddleOCR',
|
||||
description: 'OCR 识别工具',
|
||||
href: 'https://paddlepaddle.github.io/PaddleOCR/latest/version3.x/pipeline_usage/OCR.html',
|
||||
},
|
||||
{
|
||||
title: 'PaddleServing',
|
||||
description: '模型部署服务',
|
||||
href: 'https://github.com/PaddlePaddle/Serving/blob/v0.9.0/examples/Pipeline/PaddleOCR/ocr/README_CN.md',
|
||||
},
|
||||
{
|
||||
title: 'PaddleNLP',
|
||||
description: '自然语言处理框架',
|
||||
href: 'https://paddlenlp.readthedocs.io/zh/latest/advanced_guide/distributed_training.html',
|
||||
},
|
||||
{
|
||||
title: 'MinerU',
|
||||
description: '文档解析工具',
|
||||
href: 'https://opendatalab.github.io/MinerU/zh/',
|
||||
},
|
||||
{
|
||||
title: 'GeoLayoutLM',
|
||||
description: '文档智能模型',
|
||||
href: 'https://mp.weixin.qq.com/s?__biz=Mzg4NjI0NDg0Ng==',
|
||||
},
|
||||
{
|
||||
title: 'LayoutReader',
|
||||
description: '文档阅读顺序模型',
|
||||
href: 'https://developer.volcengine.com/articles/7385010087594721319',
|
||||
},
|
||||
{
|
||||
title: 'PubLayNet',
|
||||
description: '文档布局数据集',
|
||||
href: 'https://opendatalab.com/OpenDataLab/PubLayNet/tree/main',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '视觉检测与标注',
|
||||
items: [
|
||||
{
|
||||
title: 'YOLOv11',
|
||||
description: '目标检测模型',
|
||||
href: 'https://modelers.csdn.net/683fe614606a8318e85b0e13.html',
|
||||
},
|
||||
{
|
||||
title: 'X-AnyLabeling',
|
||||
description: '图像标注工具',
|
||||
href: 'https://github.com/CVHub520/X-AnyLabeling',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
groupName: '前端与移动端',
|
||||
subGroups: [
|
||||
{
|
||||
title: '前端与桌面',
|
||||
items: [
|
||||
{
|
||||
title: 'Arco Design Vue',
|
||||
description: '字节跳动前端组件库',
|
||||
href: 'https://arco.design/vue/docs/start',
|
||||
},
|
||||
{
|
||||
title: 'Tauri',
|
||||
description: '跨平台桌面应用框架',
|
||||
href: 'https://v2.tauri.app/zh-cn/',
|
||||
},
|
||||
{
|
||||
title: 'Floating UI',
|
||||
description: '浮层定位与交互组件工具',
|
||||
href: 'https://floating.nodejs.cn/#google_vignette',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'React Native',
|
||||
items: [
|
||||
{
|
||||
title: 'gluestack-ui',
|
||||
description: 'React Native UI 套件',
|
||||
href: 'https://gluestack.io/ui/docs/home/overview/quick-start',
|
||||
},
|
||||
{
|
||||
title: 'React Native Directory',
|
||||
description: 'React Native 第三方库目录',
|
||||
href: 'https://reactnative.directory/packages',
|
||||
},
|
||||
{
|
||||
title: 'Awesome RN',
|
||||
description: 'React Native 学习资源精选',
|
||||
href: 'https://github.com/wabg/awesome-react-native',
|
||||
},
|
||||
{
|
||||
title: 'RN UI Datepicker',
|
||||
description: 'React Native 日期选择组件',
|
||||
href: 'https://farhoudshapouran.github.io/react-native-ui-datepicker/',
|
||||
},
|
||||
{
|
||||
title: 'Victory Charts',
|
||||
description: 'React Native 数据可视化库',
|
||||
href: 'https://nearform.com/open-source/victory/docs/introduction/',
|
||||
},
|
||||
{
|
||||
title: 'React Native 第三方库',
|
||||
description: '常用库汇总',
|
||||
href: 'https://www.cnblogs.com/youhui/articles/11771865.html',
|
||||
},
|
||||
{
|
||||
title: 'Expo 热更新',
|
||||
description: '不使用 EAS 的热更新方案',
|
||||
href: 'https://juejin.cn/post/7390659669113929779',
|
||||
},
|
||||
{
|
||||
title: 'React Native Sortables',
|
||||
description: 'React Native 拖拽排序组件',
|
||||
note: '适合列表拖拽、排序、看板类移动端交互。',
|
||||
href: 'https://react-native-sortables-docs.vercel.app/',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'UniApp',
|
||||
items: [
|
||||
{
|
||||
title: 'Sard Uniapp',
|
||||
description: 'UniApp + Vue3 多端 UI 组件库',
|
||||
href: 'https://sard.wzt.zone/',
|
||||
},
|
||||
{
|
||||
title: 'UniApp 原生插件',
|
||||
description: 'uni-app 原生插件集成指南',
|
||||
href: 'https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android.html',
|
||||
},
|
||||
{
|
||||
title: 'UniApp 离线打包',
|
||||
description: 'Android 离线打包制作',
|
||||
href: 'https://ask.dcloud.net.cn/article/35482',
|
||||
},
|
||||
{
|
||||
title: '天地图 UniApp',
|
||||
description: 'UniApp 地图插件',
|
||||
href: 'https://ext.dcloud.net.cn/plugin?id=22630',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
groupName: '设计与素材',
|
||||
subGroups: [
|
||||
{
|
||||
title: '图标',
|
||||
items: [
|
||||
{
|
||||
title: 'IconFont',
|
||||
description: '阿里巴巴矢量图标库',
|
||||
href: 'https://www.iconfont.cn/',
|
||||
},
|
||||
{
|
||||
title: 'Lucide',
|
||||
description: '精美的开源图标库',
|
||||
href: 'https://lucide.dev/icons/',
|
||||
},
|
||||
{
|
||||
title: 'Icônes',
|
||||
description: '开源图标库集合',
|
||||
href: 'https://icones.js.org/collection/all',
|
||||
},
|
||||
{
|
||||
title: 'SVG Repo',
|
||||
description: '免费 SVG 矢量图标',
|
||||
href: 'https://www.svgrepo.com/',
|
||||
},
|
||||
{
|
||||
title: 'Expo Vector Icons',
|
||||
description: 'React Native 图标库',
|
||||
href: 'https://icons.expo.fyi/Index',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '插画与动画',
|
||||
items: [
|
||||
{
|
||||
title: 'unDraw',
|
||||
description: '开源插画库',
|
||||
href: 'https://undraw.co/',
|
||||
},
|
||||
{
|
||||
title: 'Storyset',
|
||||
description: '可自定义插画素材',
|
||||
href: 'https://storyset.com/',
|
||||
},
|
||||
{
|
||||
title: 'ManyPixels',
|
||||
description: '免费插画素材',
|
||||
href: 'https://www.manypixels.co/gallery',
|
||||
},
|
||||
{
|
||||
title: 'LottieFiles',
|
||||
description: '动画资源平台',
|
||||
href: 'https://app.lottiefiles.com/search',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '模板与灵感',
|
||||
items: [
|
||||
{
|
||||
title: 'UIverse',
|
||||
description: 'CSS 与 Tailwind UI 组件',
|
||||
href: 'https://uiverse.io/elements',
|
||||
},
|
||||
{
|
||||
title: 'CodePen',
|
||||
description: '前端代码分享社区',
|
||||
href: 'https://codepen.io/trending',
|
||||
},
|
||||
{
|
||||
title: 'HTML Rev',
|
||||
description: '免费 HTML 网站模板',
|
||||
href: 'https://htmlrev.com/',
|
||||
},
|
||||
{
|
||||
title: 'MockUPhone',
|
||||
description: '设备样机展示',
|
||||
href: 'https://mockuphone.com/model/iphone-15/',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
groupName: '开发与服务',
|
||||
subGroups: [
|
||||
{
|
||||
title: '语言与框架',
|
||||
items: [
|
||||
{
|
||||
title: 'NestJS',
|
||||
description: 'Node.js 企业级框架',
|
||||
href: 'https://nest.nodejs.cn/',
|
||||
},
|
||||
{
|
||||
title: 'CloudWeGo Hertz',
|
||||
description: 'Go HTTP 框架',
|
||||
note: '字节开源的 Go HTTP 框架，适合关注高性能服务开发时参考。',
|
||||
href: 'https://www.cloudwego.io/zh/docs/hertz/',
|
||||
},
|
||||
{
|
||||
title: 'JDK',
|
||||
description: 'Java 开发工具包',
|
||||
href: 'https://adoptium.net/zh-CN/temurin/releases',
|
||||
},
|
||||
{
|
||||
title: 'Go',
|
||||
description: 'Golang 下载',
|
||||
href: 'https://go.dev/dl/',
|
||||
},
|
||||
{
|
||||
title: 'nvm-windows',
|
||||
description: 'Node 版本管理',
|
||||
href: 'https://nvm.uihtm.com/doc/download-nvm.html',
|
||||
},
|
||||
{
|
||||
title: 'fnm',
|
||||
description: 'Node.js 版本管理工具',
|
||||
href: 'https://fnm.nodejs.cn/docs/',
|
||||
tags: [
|
||||
{
|
||||
label: '推荐',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'IDE 与 AI 编程',
|
||||
items: [
|
||||
{
|
||||
title: 'IntelliJ IDEA',
|
||||
description: 'Java IDE',
|
||||
href: 'https://www.jetbrains.com/zh-cn/idea/',
|
||||
},
|
||||
{
|
||||
title: 'GoLand',
|
||||
description: 'Go 语言 IDE',
|
||||
href: 'https://www.jetbrains.com/zh-cn/go/',
|
||||
},
|
||||
{
|
||||
title: 'DataGrip',
|
||||
description: '数据库管理工具',
|
||||
href: 'https://www.jetbrains.com/zh-cn/datagrip/',
|
||||
},
|
||||
{
|
||||
title: 'Cursor',
|
||||
description: 'AI 驱动的代码编辑器',
|
||||
href: 'https://cursor.com/',
|
||||
},
|
||||
{
|
||||
title: 'ChatGPT Codex',
|
||||
description: 'AI 代码生成助手',
|
||||
href: 'https://chatgpt.com/zh-Hans-CN/codex/',
|
||||
},
|
||||
{
|
||||
title: 'Trae',
|
||||
description: 'AI 编程助手',
|
||||
href: 'https://www.trae.cn/',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '开发服务',
|
||||
items: [
|
||||
{
|
||||
title: '清华镜像源',
|
||||
description: '清华大学开源软件镜像站',
|
||||
href: 'https://mirrors.tuna.tsinghua.edu.cn/',
|
||||
},
|
||||
{
|
||||
title: '天地图',
|
||||
description: '地理编码与地图服务',
|
||||
href: 'http://lbs.tianditu.gov.cn/home.html',
|
||||
},
|
||||
{
|
||||
title: 'URL Encoder',
|
||||
description: 'SVG URL 编码工具',
|
||||
href: 'https://yoksel.github.io/url-encoder/zh-cn/',
|
||||
},
|
||||
{
|
||||
title: 'kkFileView',
|
||||
description: '文件文档在线预览解决方案',
|
||||
href: 'https://kkview.cn/zh-cn/index.html',
|
||||
},
|
||||
{
|
||||
title: 'BaseMetas Fileview',
|
||||
description: '支持 200+ 文件格式在线预览',
|
||||
href: 'https://fileview.basemetas.cn/',
|
||||
},
|
||||
{
|
||||
title: '免费 API',
|
||||
description: '免费 API 接口集合',
|
||||
note: '包含一些公开接口资源，实际使用前注意稳定性和调用限制。',
|
||||
href: 'https://api.aa1.cn/',
|
||||
},
|
||||
{
|
||||
title: 'Free API',
|
||||
description: '免费 API 资源导航',
|
||||
note: 'API 资源导航站，适合查找测试接口或小工具接口。',
|
||||
href: 'https://www.free-api.com/',
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Docker Hub',
|
||||
description: 'Docker 官方镜像仓库',
|
||||
note: '查询官方镜像、版本标签和镜像使用说明时常用。',
|
||||
href: 'https://hub.docker.com/',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
groupName: '系统与效率',
|
||||
subGroups: [
|
||||
{
|
||||
title: '系统工具',
|
||||
items: [
|
||||
{
|
||||
title: 'VMware Workstation',
|
||||
description: 'VMware Pro 下载',
|
||||
href: 'https://github.com/201853910/VMwareWorkstation',
|
||||
},
|
||||
{
|
||||
title: '图吧工具箱',
|
||||
description: 'Windows 系统硬件检测工具',
|
||||
href: 'https://tubawinui3.cn/',
|
||||
},
|
||||
{
|
||||
title: 'Terminal ICU',
|
||||
description: 'SSH 终端工具',
|
||||
href: 'https://www.terminal.icu/',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '效率办公',
|
||||
items: [
|
||||
{
|
||||
title: 'DeepL 翻译',
|
||||
description: 'AI 驱动的翻译工具',
|
||||
href: 'https://www.deepl.com/zh/translator',
|
||||
},
|
||||
{
|
||||
title: 'Snipaste',
|
||||
description: '截图与贴图工具',
|
||||
href: 'https://www.snipaste.com/',
|
||||
},
|
||||
{
|
||||
title: '腾讯桌面整理',
|
||||
description: '桌面文件整理工具',
|
||||
href: 'https://guanjia.qq.com/product/zmzl/',
|
||||
},
|
||||
{
|
||||
title: 'Twinkle Tray',
|
||||
description: '屏幕亮度调节',
|
||||
href: 'https://twinkletray.com/',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export default resourceGroups
|
||||
@@ -1,314 +1,17 @@
|
||||
.page {
|
||||
min-height: calc(100vh - var(--ifm-navbar-height));
|
||||
background:
|
||||
linear-gradient(180deg, var(--oneao-surface-muted), transparent 44%),
|
||||
linear-gradient(90deg, var(--oneao-grid-line) 1px, transparent 1px),
|
||||
linear-gradient(0deg, var(--oneao-grid-line) 1px, transparent 1px),
|
||||
var(--ifm-background-color);
|
||||
background-size: auto, 28px 28px, 28px 28px, auto;
|
||||
padding: 2rem 0 3rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
min-height: calc(100vh - var(--ifm-navbar-height));
|
||||
align-items: center;
|
||||
padding: 4rem 0;
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.heroInner {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
.header h1 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.copy {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.brandLine {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
margin-bottom: 1.25rem;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.title {
|
||||
.header p {
|
||||
margin: 0;
|
||||
color: var(--ifm-heading-color);
|
||||
font-size: 5rem;
|
||||
line-height: 0.96;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 1.25rem 0 0;
|
||||
color: var(--ifm-color-primary-dark);
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.description {
|
||||
max-width: 640px;
|
||||
margin: 1rem 0 0;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.85;
|
||||
}
|
||||
|
||||
.topicRow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
.topicRow span {
|
||||
padding: 0.35rem 0.65rem;
|
||||
border: 1px solid var(--oneao-border);
|
||||
border-radius: 999px;
|
||||
background: var(--ifm-background-surface-color);
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.statusLine {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.statusLine span {
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
border-radius: 50%;
|
||||
background: var(--ifm-color-primary);
|
||||
box-shadow: 0 0 0 5px var(--oneao-surface-muted);
|
||||
}
|
||||
|
||||
.statusLine p {
|
||||
margin: 0;
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.previewWrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--oneao-border);
|
||||
border-radius: 14px;
|
||||
background: var(--ifm-background-surface-color);
|
||||
box-shadow: 0 24px 60px var(--oneao-shadow);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.previewShadow {
|
||||
position: absolute;
|
||||
inset: 1.5rem -1.5rem -1.5rem 1.5rem;
|
||||
border: 1px solid var(--oneao-border);
|
||||
border-radius: 14px;
|
||||
background: var(--oneao-surface-soft);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.previewHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
padding: 0.875rem 1rem;
|
||||
border-bottom: 1px solid var(--oneao-border);
|
||||
}
|
||||
|
||||
.previewHeader span {
|
||||
width: 0.65rem;
|
||||
height: 0.65rem;
|
||||
border-radius: 50%;
|
||||
background: var(--ifm-color-emphasis-300);
|
||||
}
|
||||
|
||||
.previewHeader strong {
|
||||
margin-left: 0.4rem;
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.previewBody {
|
||||
padding: 1.4rem;
|
||||
}
|
||||
|
||||
.kicker {
|
||||
display: inline-flex;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--ifm-color-primary-dark);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.previewBody h2 {
|
||||
margin: 0;
|
||||
font-size: 1.55rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.previewBody p {
|
||||
margin: 0.75rem 0 1.25rem;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.codeBlock {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
margin: 1rem 0 1.25rem;
|
||||
padding: 0.85rem;
|
||||
border: 1px solid var(--oneao-border);
|
||||
border-radius: 10px;
|
||||
background: var(--ifm-color-emphasis-100);
|
||||
}
|
||||
|
||||
.codeBlock span {
|
||||
overflow: hidden;
|
||||
color: var(--ifm-color-emphasis-800);
|
||||
font-family: var(--font-family-monospace);
|
||||
font-size: 0.78rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.noteLines {
|
||||
display: grid;
|
||||
gap: 0.65rem;
|
||||
margin: 1rem 0 1.25rem;
|
||||
}
|
||||
|
||||
.noteLines span {
|
||||
display: block;
|
||||
height: 0.7rem;
|
||||
border-radius: 999px;
|
||||
background: var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
.noteLines span:nth-child(1) {
|
||||
width: 92%;
|
||||
}
|
||||
|
||||
.noteLines span:nth-child(2) {
|
||||
width: 74%;
|
||||
}
|
||||
|
||||
.noteLines span:nth-child(3) {
|
||||
width: 86%;
|
||||
}
|
||||
|
||||
.noteLines span:nth-child(4) {
|
||||
width: 56%;
|
||||
}
|
||||
|
||||
.noteFooter {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--oneao-border);
|
||||
}
|
||||
|
||||
.noteFooter span {
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.miniCard {
|
||||
position: absolute;
|
||||
right: -1.25rem;
|
||||
bottom: -1.4rem;
|
||||
width: 190px;
|
||||
padding: 0.85rem;
|
||||
border: 1px solid var(--oneao-border);
|
||||
border-radius: 12px;
|
||||
background: var(--ifm-background-surface-color);
|
||||
box-shadow: 0 14px 34px var(--oneao-shadow);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.miniCard strong {
|
||||
display: block;
|
||||
margin-bottom: 0.7rem;
|
||||
color: var(--ifm-color-emphasis-800);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.miniCard div {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.miniCard span {
|
||||
display: block;
|
||||
height: 0.55rem;
|
||||
border-radius: 999px;
|
||||
background: var(--ifm-color-emphasis-200);
|
||||
}
|
||||
|
||||
.miniCard span:first-child {
|
||||
width: 82%;
|
||||
}
|
||||
|
||||
.miniCard span:last-child {
|
||||
width: 58%;
|
||||
}
|
||||
|
||||
@media (max-width: 996px) {
|
||||
.hero {
|
||||
min-height: auto;
|
||||
padding: 3.5rem 0;
|
||||
}
|
||||
|
||||
.heroInner {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.preview {
|
||||
max-width: 520px;
|
||||
}
|
||||
|
||||
.previewShadow,
|
||||
.miniCard {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.hero {
|
||||
padding: 2.5rem 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1rem;
|
||||
}
|
||||
font-size: 1rem;
|
||||
}
|
||||
@@ -1,92 +1,19 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
|
||||
import Heading from '@theme/Heading'
|
||||
import SearchableLinkGrid from '@site/src/components/Link/SearchableLinkGrid'
|
||||
import resourceGroups from '@site/src/data/resources'
|
||||
import Layout from '@theme/Layout'
|
||||
import styles from './index.module.css'
|
||||
|
||||
const topics = ['Clean', 'Focused', 'Reusable', 'Long-term']
|
||||
|
||||
export default function Home(): ReactNode {
|
||||
const { siteConfig } = useDocusaurusContext()
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={siteConfig.title}
|
||||
description="oneao 的个人技术笔记和资料整理。"
|
||||
title="资源导航"
|
||||
description="oneao 的常用资源导航。"
|
||||
>
|
||||
<main className={styles.page}>
|
||||
<section className={styles.hero}>
|
||||
<div className="container">
|
||||
<div className={styles.heroInner}>
|
||||
<div className={styles.copy}>
|
||||
<div className={styles.brandLine}>
|
||||
<img src="/img/logo.png" alt="" className={styles.logo} />
|
||||
<span>oneao notes</span>
|
||||
</div>
|
||||
<Heading as="h1" className={styles.title}>
|
||||
{siteConfig.title}
|
||||
</Heading>
|
||||
<p className={styles.subtitle}>
|
||||
技术 · 笔记 · 记录
|
||||
</p>
|
||||
<p className={styles.description}>
|
||||
一个保持简洁、方便回看的个人站点，用来沉淀日常记录、长期维护的资料和可复用的信息。
|
||||
</p>
|
||||
<div className={styles.topicRow} aria-label="笔记主题">
|
||||
{topics.map(topic => (
|
||||
<span key={topic}>{topic}</span>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.statusLine}>
|
||||
<span />
|
||||
<p>保持内容克制、结构清晰，方便之后快速回看。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.previewWrap}>
|
||||
<div className={styles.previewShadow} />
|
||||
<div className={styles.preview} aria-label="笔记预览">
|
||||
<div className={styles.previewHeader}>
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
<strong>oneao.cn</strong>
|
||||
</div>
|
||||
<div className={styles.previewBody}>
|
||||
<span className={styles.kicker}>Personal Archive</span>
|
||||
<h2>整理、沉淀、回看</h2>
|
||||
<p>
|
||||
把零散信息收束成清晰页面，让每次查找都更直接。
|
||||
</p>
|
||||
<div className={styles.codeBlock}>
|
||||
<span>clear structure</span>
|
||||
<span>quiet interface</span>
|
||||
<span>steady updates</span>
|
||||
</div>
|
||||
<div className={styles.noteLines}>
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
</div>
|
||||
<div className={styles.noteFooter}>
|
||||
<span>Notes</span>
|
||||
<span>Archive</span>
|
||||
<span>Review</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.miniCard}>
|
||||
<strong>Simple Index</strong>
|
||||
<div>
|
||||
<span />
|
||||
<span />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="container">
|
||||
<SearchableLinkGrid groups={resourceGroups} />
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
Reference in new issue
Block a user