team/haiyushuke-website
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add

Browse Source
This commit is contained in:
Mrxs
2026-06-17 11:19:08 +08:00
parent 4c56c7cb04
commit 50312c4c6c
10 changed files with 1933 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

749
src/styles/components.css
View File

@@ -1647,4 +1647,753 @@
border-top: none;
box-shadow: inset 0 1px 0 var(--color-hairline);
}
.btn-sm {
min-height: 34px;
padding: 7px var(--spacing-lg);
font-size: 13px;
border-radius: var(--radius-sm);
}
.btn-outline:disabled {
color: var(--color-body-light);
background-color: var(--color-canvas-muted);
box-shadow: none;
cursor: not-allowed;
opacity: 0.7;
}
.btn-outline:disabled:hover {
transform: none;
background-color: var(--color-canvas-muted);
box-shadow: none;
}
.skill-marketplace {
display: flex;
flex-direction: column;
gap: var(--spacing-3xl);
}
.skill-marketplace__toolbar {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
align-items: flex-start;
}
@media (width >= 768px) {
.skill-marketplace__toolbar {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.skill-marketplace__categories {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.skill-category-chip {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
line-height: 1;
color: var(--color-body);
background-color: var(--color-canvas);
border: 1px solid var(--color-hairline);
border-radius: var(--radius-full);
padding: 8px var(--spacing-lg);
cursor: pointer;
transition:
color 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease;
}
.skill-category-chip:hover {
color: var(--color-accent-ink);
border-color: var(--color-accent-border);
}
.skill-category-chip--active {
color: var(--color-on-primary);
background-color: var(--color-ink);
border-color: var(--color-ink);
}
.skill-category-chip--active:hover {
color: var(--color-on-primary);
}
.skill-category-chip__emoji {
font-size: 14px;
line-height: 1;
}
.skill-category-chip__count {
font-family: var(--font-mono-caps);
font-size: 11px;
font-weight: 500;
color: inherit;
opacity: 0.7;
margin-left: var(--spacing-xxs);
}
.skill-marketplace__search {
width: 100%;
max-width: 280px;
}
@media (width < 768px) {
.skill-marketplace__search {
max-width: 100%;
}
}
.skill-search-input {
width: 100%;
font-family: var(--font-display);
font-size: 14px;
color: var(--color-ink);
background-color: var(--color-canvas);
border: 1px solid var(--color-hairline);
border-radius: var(--radius-md);
padding: 9px var(--spacing-lg);
min-height: 38px;
box-shadow: var(--shadow-field);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}
.skill-search-input::placeholder {
color: var(--color-body-light);
}
.skill-search-input:focus {
outline: none;
border-color: var(--color-accent-border);
box-shadow: var(--shadow-field-focus);
}
.skill-marketplace__grid {
display: grid;
gap: var(--spacing-xl);
grid-template-columns: 1fr;
}
@media (width >= 768px) {
.skill-marketplace__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (width >= 1024px) {
.skill-marketplace__grid {
grid-template-columns: repeat(3, 1fr);
}
}
.skill-marketplace__empty {
text-align: center;
padding: var(--spacing-5xl) var(--spacing-lg);
}
.skill-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
height: 100%;
border-radius: var(--radius-md);
padding: var(--spacing-2xl);
background-color: var(--color-canvas);
color: var(--color-ink);
border: 1px solid var(--color-hairline);
box-shadow: var(--shadow-surface);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.skill-card:hover {
box-shadow: var(--shadow-surface-hover);
transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
.skill-card:hover {
transform: none;
}
}
.skill-card__head {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.skill-card__title {
font-size: 18px;
line-height: 1.35;
}
.skill-card__slug {
font-family: var(--font-mono-caps);
font-size: 11px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.04em;
color: var(--color-accent-soft);
background-color: var(--color-accent-wash);
border-radius: var(--radius-xs);
padding: 4px var(--spacing-sm);
align-self: flex-start;
}
.skill-card__body {
font-size: 13.5px;
line-height: 1.65;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.skill-card__cta {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-top: auto;
padding-top: var(--spacing-sm);
}
/* ===== 怎么使用 SKILL ===== */
.skill-howto {
display: flex;
flex-direction: column;
gap: var(--spacing-3xl);
}
.skill-howto__head {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
max-width: 720px;
}
.skill-howto__title {
font-size: clamp(24px, 3vw, 34px);
line-height: 1.2;
}
.skill-howto__subtitle {
color: var(--color-body);
}
.skill-howto__layout {
display: grid;
gap: var(--spacing-3xl);
grid-template-columns: 1fr;
align-items: start;
}
@media (width >= 960px) {
.skill-howto__layout {
grid-template-columns: 1fr 1fr;
gap: var(--spacing-4xl);
}
}
.skill-howto__steps {
display: flex;
flex-direction: column;
gap: var(--spacing-2xl);
margin: 0;
padding: 0;
list-style: none;
}
.skill-howto-step {
display: flex;
gap: var(--spacing-lg);
}
.skill-howto-step__no {
font-family: var(--font-mono-caps);
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.06em;
color: var(--color-accent-ink);
background-color: var(--color-accent-wash);
border-radius: var(--radius-full);
width: 32px;
height: 32px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.skill-howto-step__copy {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
padding-top: 3px;
}
.skill-howto-step__title {
font-size: 15px;
}
.skill-howto-step__desc {
font-size: 13.5px;
line-height: 1.65;
}
.skill-howto-config {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.skill-howto-config__intro {
font-size: 13.5px;
line-height: 1.65;
margin: 0;
}
/* ===== 可折叠代码面板（仿企查查） ===== */
.skill-code-block {
border: 1px solid var(--color-hairline);
border-radius: var(--radius-md);
background-color: var(--color-canvas-muted);
overflow: hidden;
box-shadow: var(--shadow-field);
}
.skill-code-block__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
padding: var(--spacing-sm) var(--spacing-md);
background-color: var(--color-canvas);
border-bottom: 1px solid var(--color-hairline);
}
.skill-code-block__filename {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
font-family: var(--font-mono-caps);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--color-ink-soft);
}
.skill-code-block__dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background-color: var(--color-accent-ink);
flex-shrink: 0;
}
.skill-code-block__actions {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
}
.skill-code-block__btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
line-height: 1;
color: var(--color-body);
background-color: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
padding: 6px var(--spacing-sm);
cursor: pointer;
transition:
color 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease;
}
.skill-code-block__btn:hover {
color: var(--color-accent-ink);
background-color: var(--color-accent-wash);
}
.skill-code-block__btn--toggle {
color: var(--color-accent-ink);
}
.skill-code-block__chevron {
transition: transform 0.2s ease;
}
.skill-code-block[data-open="true"] .skill-code-block__chevron {
transform: rotate(180deg);
}
.skill-code-block__pre {
margin: 0;
padding: var(--spacing-lg) var(--spacing-md);
overflow-x: auto;
font-family: var(--font-mono-caps);
font-size: 12.5px;
line-height: 1.75;
color: var(--color-ink-soft);
}
.skill-code-block__pre code {
font-family: inherit;
white-space: pre;
}
.skill-howto-config__apps {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-sm);
margin: 0;
}
.skill-howto-config__apps-label {
font-family: var(--font-mono-caps);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--color-body-light);
}
.skill-howto-config__app {
font-size: 12px;
color: var(--color-ink-soft);
background-color: var(--color-canvas);
border: 1px solid var(--color-hairline);
border-radius: var(--radius-full);
padding: 4px var(--spacing-md);
}
.skill-howto-config__soon {
margin: 0;
}
/* ===== SKILL 详情页 ===== */
.skill-detail {
display: flex;
flex-direction: column;
gap: var(--spacing-2xl);
max-width: 880px;
margin: 0 auto;
width: 100%;
}
.skill-detail__crumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-xs);
list-style: none;
margin: 0;
padding: 0;
font-family: var(--font-mono-caps);
font-size: 12px;
letter-spacing: 0.08em;
color: var(--color-body-light);
text-transform: uppercase;
}
.skill-detail__crumbs a {
color: var(--color-body-light);
text-decoration: none;
transition: color 0.2s ease;
}
.skill-detail__crumbs a:hover {
color: var(--color-accent-ink);
}
.skill-detail__crumbs li[aria-current="page"] {
color: var(--color-ink);
}
.skill-detail__head {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.skill-detail__title {
margin: 0;
}
.skill-detail__lead {
margin: 0;
}
.skill-detail__tabs {
display: flex;
gap: var(--spacing-xs);
border-bottom: 1px solid var(--color-hairline);
padding: 0;
}
.skill-detail__tab {
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
color: var(--color-body-light);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
padding: var(--spacing-sm) var(--spacing-lg);
margin-bottom: -1px;
cursor: pointer;
transition:
color 0.2s ease,
border-color 0.2s ease;
}
.skill-detail__tab:hover {
color: var(--color-ink-soft);
}
.skill-detail__tab--active {
color: var(--color-accent-ink);
border-bottom-color: var(--color-accent-ink);
}
.skill-detail__panel {
min-height: 320px;
}
/* 在线运行 */
.skill-run {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
.skill-run__head {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.skill-run__title {
margin: 0;
}
.skill-run__hint {
margin: 0;
}
.skill-run__field {
position: relative;
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.skill-run__label {
margin: 0;
}
.skill-run__input {
font-family: var(--font-display);
font-size: 15px;
color: var(--color-ink);
background-color: var(--color-canvas);
border: 1px solid var(--color-hairline);
border-radius: var(--radius-md);
padding: 14px var(--spacing-xl);
padding-right: 44px;
box-shadow: var(--shadow-field);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
outline: none;
width: 100%;
}
.skill-run__input:focus {
border-color: var(--color-accent-ink);
box-shadow: var(--shadow-field-focus);
}
.skill-run__clear {
position: absolute;
right: var(--spacing-sm);
bottom: 9px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
color: var(--color-body-light);
background: transparent;
border: none;
border-radius: 50%;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
}
.skill-run__clear:hover {
color: var(--color-ink);
background-color: var(--color-canvas-muted);
}
.skill-run__go {
align-self: flex-start;
}
.skill-run__note {
margin: 0;
}
/* 安装方式 */
.skill-install {
display: flex;
flex-direction: column;
gap: var(--spacing-3xl);
}
.skill-install__step {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.skill-install__title,
.skill-install__subtitle {
margin: 0;
}
.skill-install__desc {
margin: 0;
}
.skill-code-block__pre--text {
white-space: pre-wrap;
word-break: break-word;
}
/* 示例报告 */
.skill-example {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
.skill-example__content {
display: flex;
flex-direction: column;
gap: var(--spacing-2xl);
}
.skill-example__head {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.skill-example__title {
margin: 0;
}
.skill-example__sections {
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
}
.skill-example__section {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
padding-bottom: var(--spacing-xl);
border-bottom: 1px solid var(--color-hairline);
}
.skill-example__section:last-child {
border-bottom: none;
padding-bottom: 0;
}
.skill-example__section-title {
margin: 0;
}
.skill-example__bullets {
margin: 0;
padding-left: var(--spacing-xl);
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.skill-example__bullets li {
color: var(--color-body);
font-size: 15px;
line-height: 1.6;
}
.skill-example__empty {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-lg);
padding: var(--spacing-2xl);
background-color: var(--color-canvas-muted);
border-radius: var(--radius-md);
}
.skill-example__empty p {
margin: 0;
}
/* 卡片标题链接 */
.skill-card__title-link {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.skill-card__title-link:hover {
color: var(--color-accent-ink);
}
@media (max-width: 640px) {
.skill-detail {
gap: var(--spacing-xl);
}
.skill-detail__tab {
padding: var(--spacing-sm) var(--spacing-md);
font-size: 14px;
}
.skill-install {
gap: var(--spacing-2xl);
}
}
}