wangjia
6a46e3109a
官网 .langsel 与用户中心 LangSeg select:border 由纯 --border 改 color-mix 半透明、 圆角 full→md 圆角矩形、加微投影;hover 柔化。纯视觉,不影响逻辑。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013nMthbVEmQquxBRKb9Fj8u
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
// shared.tsx — 公共样式常量与原子（承袭 ucapp.jsx 的 ucCard / ucInput / UCLang）
|
||
import React from 'react';
|
||
import type { Lang } from '../lib/i18n';
|
||
|
||
export const card: React.CSSProperties = {
|
||
background: 'var(--surface)',
|
||
border: '1px solid var(--border)',
|
||
borderRadius: 'var(--radius-xl)',
|
||
boxShadow: 'var(--shadow-sm)',
|
||
};
|
||
|
||
export const input: React.CSSProperties = {
|
||
border: '1.5px solid var(--border-strong)',
|
||
borderRadius: 'var(--radius-md)',
|
||
padding: '12px 14px',
|
||
fontFamily: 'var(--font-sans)',
|
||
fontSize: 14.5,
|
||
color: 'var(--fg1)',
|
||
background: 'var(--surface)',
|
||
outline: 'none',
|
||
width: '100%',
|
||
boxSizing: 'border-box',
|
||
};
|
||
|
||
export function LangSeg({ lang, setLang }: { lang: Lang; setLang: (l: Lang) => void }) {
|
||
// 6 语言用原生下拉（段控横排会挤）。默认 en。
|
||
const langs: [Lang, string][] = [
|
||
['en', 'English'], ['zh', '中文'], ['ja', '日本語'],
|
||
['ko', '한국어'], ['ru', 'Русский'], ['es', 'Español'],
|
||
];
|
||
return (
|
||
<select
|
||
value={lang}
|
||
onChange={(e) => setLang(e.target.value as Lang)}
|
||
aria-label="Language"
|
||
style={{
|
||
// 圆角矩形 + 柔和边框(原纯 --border 太生硬)。
|
||
border: '1px solid color-mix(in oklab, var(--border), transparent 55%)',
|
||
cursor: 'pointer',
|
||
borderRadius: 10,
|
||
padding: '5px 10px',
|
||
fontFamily: 'var(--font-sans)',
|
||
fontSize: 12.5,
|
||
fontWeight: 700,
|
||
background: 'var(--bg-subtle)',
|
||
color: 'var(--fg2)',
|
||
boxShadow: '0 1px 2px rgba(45, 30, 20, 0.05)',
|
||
}}
|
||
>
|
||
{langs.map(([v, l]) => (
|
||
<option key={v} value={v}>{l}</option>
|
||
))}
|
||
</select>
|
||
);
|
||
}
|