import { LitElement, html, css } from 'lit'; import { data, pageTree, currentPageRoute } from '@/context'; import { resolveToHref, useMeta } from '@/utils'; import { I18nProvider } from '@/components'; const $t = new I18nProvider(); const LANGUAGE_OPTIONS = [ { value: 'en-US', label: 'English' }, { value: 'zh-TW', label: '繁體中文' } ]; function getMenuItems(tree) { if (!tree || !tree[0] || !tree[0].children) return []; return (tree[0].children || []).filter((item) => !item.config || !item.config.disabled_on_menu); } function getMenuLabel(item) { const key = String(item?.name || '') .toLowerCase() .replace(/[^a-z0-9]+/g, '_') .replace(/^_|_$/g, ''); return $t(`menu_${key}`); } function resolveLangHref(target, lang) { const nextParams = { ...(currentPageRoute?.params || {}) }; if (!lang || lang === 'en-US') delete nextParams.lang; else nextParams.lang = lang; return resolveToHref({ name: target.name, params: nextParams, }); } export default class extends LitElement { static properties = { data: { type: Object }, pageTree: { type: Array }, menuOpen: { type: Boolean }, lang: { type: String } }; static styles = css` :host { display: block; width: 100%; background: #ffffff; } .shell { display: flex; flex-direction: column; background: #ffffff; } header.tools-header { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(10px); background: var(--ro-primary); color: #fff; flex: 0 0 auto; } .page-slot { flex: 1 0 auto; display: block; background: #ffffff; } .header-inner { margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { flex: 1 1 auto; min-width: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.01em; } .brand a { display: block; color: white; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; } .lang-select, .menu-toggle { border: none; background: transparent; color: #fff; margin: 0; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.18s ease, transform 0.12s ease; } .lang-select { min-width: 124px; padding: 6px 12px 6px 12px; padding-right: 34px; border: 1px solid rgba(255, 255, 255, 0.22); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: rgba(255, 255, 255, 0.08); background-image: linear-gradient(45deg, transparent 50%, #ffffff 50%), linear-gradient(135deg, #ffffff 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .lang-select:hover, .menu-toggle:hover { background-color: rgba(15, 23, 42, 0.15); transform: translateY(-1px); } .lang-select:focus-visible, .menu-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65); } .lang-select option { color: #111827; background: #ffffff; } .menu-toggle { padding: 6px 8px; } .menu-toggle-box { width: 20px; height: 16px; display: inline-flex; align-items: center; justify-content: center; } .menu-toggle-inner, .menu-toggle-inner::before, .menu-toggle-inner::after { content: ''; display: block; height: 2px; border-radius: 999px; background: #ffffff; position: relative; transition: transform 0.18s ease, opacity 0.18s ease, width 0.18s ease; } .menu-toggle-inner { width: 18px; } .menu-toggle-inner::before { position: absolute; top: -5px; width: 18px; } .menu-toggle-inner::after { position: absolute; top: 5px; width: 14px; } .menu-toggle.open .menu-toggle-inner { transform: rotate(45deg); } .menu-toggle.open .menu-toggle-inner::before { transform: rotate(-90deg); top: 0; } .menu-toggle.open .menu-toggle-inner::after { opacity: 0; width: 0; } .drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .drawer-backdrop.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; z-index: 1; inset: 0 auto 0 0; width: 260px; max-width: 80vw; max-height: 100vh; background: #fff; transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 2px 0 15px rgba(15, 23, 42, 0.45); display: flex; flex-direction: column; padding: 18px 16px 20px; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .drawer.open { transform: translateX(0); } .drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .drawer-title { font-weight: 600; font-size: 0.95rem; color: var(--ro-primary); } nav.tools-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .menu-link { display: block; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; color: var(--ro-primary); text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } .menu-link:hover, .menu-link:focus-visible { background: rgba(148, 163, 184, 0.18); border-color: rgba(148, 163, 184, 0.6); transform: translateX(1px); outline: none; } @media (max-width: 640px) { .header-inner { gap: 10px; } .brand { font-size: 1.05rem; } .lang-select { min-width: 112px; padding-left: 10px; padding-right: 30px; font-size: 0.8rem; background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 10px) calc(50% - 2px); } .menu-toggle { padding: 6px; } } `; constructor() { super(); this.data = data; this.pageTree = pageTree; this.menuOpen = false; this.lang = $t.getLang(); this._unsubscribeI18n = null; } connectedCallback() { super.connectedCallback(); this._unsubscribeI18n = $t.onChange((lang) => { this.lang = lang; this.requestUpdate(); }); } disconnectedCallback() { if (this._unsubscribeI18n) this._unsubscribeI18n(); super.disconnectedCallback(); } toggleMenu() { this.menuOpen = !this.menuOpen; } closeMenu() { this.menuOpen = false; } handleLanguageChange(event) { const nextLang = event.target.value; const currentLang = $t.getLang(); if (!nextLang || nextLang === currentLang) return; if (typeof window !== 'undefined' && window.location) { window.location.assign(resolveLangHref(currentPageRoute, nextLang)); } } handleLinkClick() { this.closeMenu(); } renderMenuItem(item) { const href = resolveLangHref({name: item.id}, this.lang); return html` `; } renderMenuItems(menuItems) { return menuItems.map((item) => this.renderMenuItem(item)); } renderLanguageOptions() { return LANGUAGE_OPTIONS.map((option) => html` `); } render() { useMeta({ title: $t('heroTitle'), }) const menuItems = getMenuItems(this.pageTree); return html`

${$t('brand')}

`; } }

Owncoding 工具箱