init
This commit is contained in:
commit
d2f36ea823
GPG key ID:
0C656827F9F80080
24 changed files with 3540 additions and 0 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
28
eslint.config.js
Normal file
28
eslint.config.js
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import js from '@eslint/js';
|
||||||
|
import globals from 'globals';
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks';
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh';
|
||||||
|
import tseslint from 'typescript-eslint';
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>全译 W3C</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
39
package.json
Normal file
39
package.json
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
{
|
||||||
|
"name": "wholetrans-w3c",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.1.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"clsx": "^2.1.0",
|
||||||
|
"lucide-react": "^0.475.0",
|
||||||
|
"md5": "^2.3.0",
|
||||||
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0",
|
||||||
|
"react-icons": "^5.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.20.0",
|
||||||
|
"@tailwindcss/postcss": "^4.0.6",
|
||||||
|
"@tailwindcss/vite": "^4.0.6",
|
||||||
|
"@types/md5": "^2.3.5",
|
||||||
|
"@types/react": "^19.0.8",
|
||||||
|
"@types/react-dom": "^19.0.3",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"eslint": "^9.20.1",
|
||||||
|
"eslint-plugin-react-hooks": "^5.1.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.19",
|
||||||
|
"globals": "^15.15.0",
|
||||||
|
"postcss": "^8.5.2",
|
||||||
|
"tailwindcss": "^4.0.6",
|
||||||
|
"typescript": "^5.7.3",
|
||||||
|
"typescript-eslint": "^8.24.0",
|
||||||
|
"vite": "^6.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
2437
pnpm-lock.yaml
generated
Normal file
2437
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
5
postcss.config.js
Normal file
5
postcss.config.js
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
},
|
||||||
|
};
|
||||||
519
src/App.tsx
Normal file
519
src/App.tsx
Normal file
|
|
@ -0,0 +1,519 @@
|
||||||
|
import { useState, useMemo, useRef, useEffect } from 'react';
|
||||||
|
import { createPortal } from 'react-dom';
|
||||||
|
import { getSpecs, getSpecContributors, getAvatarInfo, getSpecTags, resolveTranslationUrl } from './data';
|
||||||
|
import type { TranslationStatus, AcceptanceStatus, Contributor } from './data';
|
||||||
|
import { ThemeToggle } from './components/ThemeToggle';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import { MdVerified, MdEmail } from 'react-icons/md';
|
||||||
|
import { SiGithub, SiForgejo, SiBluesky, SiMatrix, SiCodeberg } from 'react-icons/si';
|
||||||
|
import { PiFediverseLogo } from 'react-icons/pi';
|
||||||
|
import { FiChevronUp, FiChevronDown } from 'react-icons/fi';
|
||||||
|
import contacts from './data/contacts.json';
|
||||||
|
|
||||||
|
type SortField = 'originalTitle' | 'translatedTitle' | 'status' | 'acceptance' | null;
|
||||||
|
type SortDirection = 'asc' | 'desc';
|
||||||
|
|
||||||
|
const StatusBadge = ({ status }: { status: TranslationStatus }) => {
|
||||||
|
const statusConfig = {
|
||||||
|
'completed': { text: '已完成', className: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' },
|
||||||
|
'in-progress': { text: '进行中', className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' },
|
||||||
|
'planned': { text: '计划中', className: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200' }
|
||||||
|
};
|
||||||
|
|
||||||
|
const config = statusConfig[status];
|
||||||
|
return (
|
||||||
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${config.className}`}>
|
||||||
|
{config.text}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const AcceptanceBadge = ({ status }: { status: AcceptanceStatus }) => {
|
||||||
|
const statusConfig = {
|
||||||
|
'not-submitted': {
|
||||||
|
text: '未提交',
|
||||||
|
className: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
|
||||||
|
},
|
||||||
|
'authed-available': {
|
||||||
|
text: '被权威译本取代',
|
||||||
|
className: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
|
||||||
|
},
|
||||||
|
'submitted': {
|
||||||
|
text: '已提交',
|
||||||
|
className: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
|
||||||
|
},
|
||||||
|
'in-review': {
|
||||||
|
text: '审核中',
|
||||||
|
className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
|
||||||
|
},
|
||||||
|
'accepted': {
|
||||||
|
text: '已接受',
|
||||||
|
className: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
|
||||||
|
},
|
||||||
|
'accepted-authed': {
|
||||||
|
text: '授权翻译',
|
||||||
|
className: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const config = statusConfig[status];
|
||||||
|
return (
|
||||||
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${config.className}`}>
|
||||||
|
{config.text}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Avatar = ({
|
||||||
|
contributor,
|
||||||
|
showName = false,
|
||||||
|
style = {},
|
||||||
|
className = ""
|
||||||
|
}: {
|
||||||
|
contributor: { id: string; name?: string; email?: string; avatarUrl?: string; homepage?: string };
|
||||||
|
showName?: boolean;
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
className?: string;
|
||||||
|
}) => {
|
||||||
|
const avatarInfo = getAvatarInfo(contributor);
|
||||||
|
|
||||||
|
const content = avatarInfo.type === 'url' ? (
|
||||||
|
<img
|
||||||
|
src={avatarInfo.url}
|
||||||
|
alt={contributor.name || contributor.id}
|
||||||
|
className="w-6 h-6 rounded-full"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className={clsx(
|
||||||
|
"w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium",
|
||||||
|
avatarInfo.colors.light.bg,
|
||||||
|
avatarInfo.colors.light.text,
|
||||||
|
avatarInfo.colors.dark.bg,
|
||||||
|
avatarInfo.colors.dark.text
|
||||||
|
)}>
|
||||||
|
{avatarInfo.char}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const containerClasses = clsx(
|
||||||
|
"flex items-center gap-2",
|
||||||
|
className,
|
||||||
|
contributor.homepage ? "cursor-pointer hover:opacity-80" : ""
|
||||||
|
);
|
||||||
|
|
||||||
|
const inner = (
|
||||||
|
<div className={containerClasses} style={style}>
|
||||||
|
{content}
|
||||||
|
{showName && (
|
||||||
|
<span className="text-sm text-gray-700 dark:text-gray-300">
|
||||||
|
{contributor.name || contributor.id}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return contributor.homepage ? (
|
||||||
|
<a
|
||||||
|
href={contributor.homepage}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="block"
|
||||||
|
>
|
||||||
|
{inner}
|
||||||
|
</a>
|
||||||
|
) : inner;
|
||||||
|
};
|
||||||
|
|
||||||
|
const PopupContent = ({
|
||||||
|
contributors,
|
||||||
|
anchorRect,
|
||||||
|
}: {
|
||||||
|
contributors: (Contributor & { primary?: boolean })[];
|
||||||
|
anchorRect: DOMRect | null;
|
||||||
|
}) => {
|
||||||
|
const [isDark, setIsDark] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setIsDark(document.documentElement.classList.contains('dark'));
|
||||||
|
const observer = new MutationObserver((mutations) => {
|
||||||
|
mutations.forEach((mutation) => {
|
||||||
|
if (mutation.attributeName === 'class') {
|
||||||
|
setIsDark(document.documentElement.classList.contains('dark'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
observer.observe(document.documentElement, {
|
||||||
|
attributes: true,
|
||||||
|
attributeFilter: ['class'],
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!anchorRect) return null;
|
||||||
|
|
||||||
|
return createPortal(
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
"fixed shadow-lg rounded-lg p-2",
|
||||||
|
isDark ? "bg-gray-800" : "bg-white"
|
||||||
|
)}
|
||||||
|
style={{
|
||||||
|
top: anchorRect.bottom + 4,
|
||||||
|
left: anchorRect.left,
|
||||||
|
zIndex: 9999,
|
||||||
|
minWidth: `${contributors.length * 28}px`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{contributors.map(contributor => (
|
||||||
|
<a
|
||||||
|
key={contributor.id}
|
||||||
|
href={contributor.homepage}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className={clsx(
|
||||||
|
"whitespace-nowrap py-1 px-2 rounded text-xs",
|
||||||
|
isDark ? (
|
||||||
|
"text-gray-300 hover:bg-gray-700"
|
||||||
|
) : (
|
||||||
|
"text-gray-700 hover:bg-gray-100"
|
||||||
|
),
|
||||||
|
contributor.homepage ? "cursor-pointer" : "cursor-default"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{contributor.name || contributor.id}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
document.body
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const TranslatorAvatars = ({ contributors }: {
|
||||||
|
contributors: (Contributor & { primary?: boolean })[]
|
||||||
|
}) => {
|
||||||
|
const [isExpanded, setIsExpanded] = useState(false);
|
||||||
|
const [anchorRect, setAnchorRect] = useState<DOMRect | null>(null);
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
const primaryContributors = contributors.filter(c => c.primary);
|
||||||
|
const otherContributors = contributors.filter(c => !c.primary);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isExpanded && containerRef.current) {
|
||||||
|
const rect = containerRef.current.getBoundingClientRect();
|
||||||
|
setAnchorRect(rect);
|
||||||
|
} else {
|
||||||
|
setAnchorRect(null);
|
||||||
|
}
|
||||||
|
}, [isExpanded]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{/* 主要译者 */}
|
||||||
|
{primaryContributors.length > 0 && (
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
{primaryContributors.map((contributor) => (
|
||||||
|
<Avatar
|
||||||
|
key={contributor.id}
|
||||||
|
contributor={contributor}
|
||||||
|
showName={true}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 其他译者 */}
|
||||||
|
{otherContributors.length > 0 && (
|
||||||
|
<div className="relative h-6">
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className="absolute"
|
||||||
|
onMouseEnter={() => setIsExpanded(true)}
|
||||||
|
onMouseLeave={() => setIsExpanded(false)}
|
||||||
|
>
|
||||||
|
<div className="flex">
|
||||||
|
{otherContributors.map((contributor, idx) => (
|
||||||
|
<Avatar
|
||||||
|
key={contributor.id}
|
||||||
|
contributor={contributor}
|
||||||
|
style={{
|
||||||
|
transition: 'transform 0.2s ease-in-out',
|
||||||
|
transform: `translateX(${idx * (isExpanded ? 28 : 12)}px)`,
|
||||||
|
zIndex: otherContributors.length - idx,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{isExpanded && (
|
||||||
|
<PopupContent
|
||||||
|
contributors={otherContributors}
|
||||||
|
anchorRect={anchorRect}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const RepositoryLinks = ({ repository }: { repository: { forgejo?: string; github?: string } }) => {
|
||||||
|
return (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{repository.forgejo && (
|
||||||
|
<a
|
||||||
|
href={repository.forgejo}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
|
||||||
|
title="Forgejo"
|
||||||
|
>
|
||||||
|
<SiForgejo className="w-5 h-5" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{repository.github && (
|
||||||
|
<a
|
||||||
|
href={repository.github}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
|
||||||
|
title="GitHub"
|
||||||
|
>
|
||||||
|
<SiGithub className="w-5 h-5" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface SortableHeaderProps {
|
||||||
|
field: SortField;
|
||||||
|
currentSort: SortField;
|
||||||
|
direction: SortDirection;
|
||||||
|
onSort: (field: SortField) => void;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SortableHeader = ({ field, currentSort, direction, onSort, children }: SortableHeaderProps) => (
|
||||||
|
<th
|
||||||
|
onClick={() => onSort(field)}
|
||||||
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{children}
|
||||||
|
{currentSort === field && (
|
||||||
|
direction === 'asc' ? <FiChevronUp /> : <FiChevronDown />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
);
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
const currentYear = new Date().getFullYear();
|
||||||
|
const iconComponents = {
|
||||||
|
keyoxide: MdVerified,
|
||||||
|
email: MdEmail,
|
||||||
|
github: SiGithub,
|
||||||
|
forgejo: SiForgejo,
|
||||||
|
fediverse: PiFediverseLogo,
|
||||||
|
bluesky: SiBluesky,
|
||||||
|
matrix: SiMatrix,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<footer className="py-4 border-t border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="container mx-auto px-4 flex justify-between items-center">
|
||||||
|
<div className="text-gray-600 dark:text-gray-400">
|
||||||
|
2024 - {currentYear} 全译 WholeTrans
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
{Object.entries(contacts).map(([id, contact]) => {
|
||||||
|
const Icon = iconComponents[id as keyof typeof iconComponents];
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
key={id}
|
||||||
|
href={contact.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
|
||||||
|
title={contact.label}
|
||||||
|
>
|
||||||
|
<Icon className="w-5 h-5" />
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
|
||||||
|
const specs = useMemo(() => {
|
||||||
|
return getSpecs();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const filteredAndSortedSpecs = useMemo(() => {
|
||||||
|
let result = [...specs];
|
||||||
|
|
||||||
|
// 搜索过滤
|
||||||
|
if (searchTerm) {
|
||||||
|
const lowerSearchTerm = searchTerm.toLowerCase();
|
||||||
|
result = result.filter(spec =>
|
||||||
|
spec.originalTitle.toLowerCase().includes(lowerSearchTerm) ||
|
||||||
|
spec.translatedTitle.toLowerCase().includes(lowerSearchTerm)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按原文标题排序
|
||||||
|
result.sort((a, b) => a.originalTitle.localeCompare(b.originalTitle));
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}, [specs, searchTerm]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="flex justify-end py-4">
|
||||||
|
<ThemeToggle />
|
||||||
|
</div>
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">全译 W3C</h1>
|
||||||
|
<p className="text-lg sm:text-xl text-gray-600 dark:text-gray-300 mb-4">
|
||||||
|
为 W3C 规范、草案、工作组报告等文档提供翻译。
|
||||||
|
</p>
|
||||||
|
<div className="flex justify-center gap-4">
|
||||||
|
<a
|
||||||
|
href="mailto:hello@wholetrans.org"
|
||||||
|
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900"
|
||||||
|
>
|
||||||
|
参与翻译
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="mailto:errata@wholetrans.org"
|
||||||
|
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900"
|
||||||
|
>
|
||||||
|
纠错建议
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://wholetrans.org/about"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-900"
|
||||||
|
>
|
||||||
|
关于全译
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-6">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="搜索标题、标签、译者..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow mb-8">
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
<thead className="bg-gray-50 dark:bg-gray-900">
|
||||||
|
<tr>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
|
原文
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
|
译文
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
|
翻译状态
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
|
接受状态
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
|
标签
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
|
译者
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||||
|
Git 存储库
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
{filteredAndSortedSpecs.map((spec) => (
|
||||||
|
<tr key={spec.originalTitle} className="hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<a
|
||||||
|
href={spec.originalUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-blue-600 dark:text-blue-400 hover:underline"
|
||||||
|
>
|
||||||
|
{spec.originalTitle}
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
{spec.translationUrl ? (
|
||||||
|
<a
|
||||||
|
href={resolveTranslationUrl(spec)}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-blue-600 dark:text-blue-400 hover:underline"
|
||||||
|
>
|
||||||
|
{spec.translatedTitle}
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<span className="text-gray-900 dark:text-gray-100">
|
||||||
|
{spec.translatedTitle}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<StatusBadge status={spec.status} />
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<AcceptanceBadge status={spec.acceptance} />
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{getSpecTags(spec).map((tag) => (
|
||||||
|
<span
|
||||||
|
key={tag.id}
|
||||||
|
className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
|
||||||
|
>
|
||||||
|
{tag.name}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<TranslatorAvatars contributors={getSpecContributors(spec)} />
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<RepositoryLinks repository={spec.repository} />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
28
src/components/ThemeToggle.tsx
Normal file
28
src/components/ThemeToggle.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { FiMoon, FiSun } from 'react-icons/fi';
|
||||||
|
|
||||||
|
export function ThemeToggle() {
|
||||||
|
const [theme, setTheme] = useState<'light' | 'dark'>(() => {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
return window.localStorage.getItem('theme') as 'light' | 'dark' || 'light';
|
||||||
|
}
|
||||||
|
return 'light';
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const root = window.document.documentElement;
|
||||||
|
root.classList.remove('light', 'dark');
|
||||||
|
root.classList.add(theme);
|
||||||
|
localStorage.setItem('theme', theme);
|
||||||
|
}, [theme]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||||||
|
className="fixed top-4 right-4 p-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-100"
|
||||||
|
aria-label="切换主题"
|
||||||
|
>
|
||||||
|
{theme === 'dark' ? <FiSun size={20} /> : <FiMoon size={20} />}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
65
src/data/avatar.ts
Normal file
65
src/data/avatar.ts
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
import md5 from 'md5';
|
||||||
|
|
||||||
|
// 头像背景颜色
|
||||||
|
const AVATAR_COLORS = {
|
||||||
|
light: [
|
||||||
|
{ bg: 'bg-blue-100', text: 'text-blue-800' },
|
||||||
|
{ bg: 'bg-green-100', text: 'text-green-800' },
|
||||||
|
{ bg: 'bg-purple-100', text: 'text-purple-800' },
|
||||||
|
{ bg: 'bg-yellow-100', text: 'text-yellow-800' },
|
||||||
|
{ bg: 'bg-pink-100', text: 'text-pink-800' },
|
||||||
|
{ bg: 'bg-indigo-100', text: 'text-indigo-800' },
|
||||||
|
],
|
||||||
|
dark: [
|
||||||
|
{ bg: 'dark:bg-blue-900', text: 'dark:text-blue-100' },
|
||||||
|
{ bg: 'dark:bg-green-900', text: 'dark:text-green-100' },
|
||||||
|
{ bg: 'dark:bg-purple-900', text: 'dark:text-purple-100' },
|
||||||
|
{ bg: 'dark:bg-yellow-900', text: 'dark:text-yellow-100' },
|
||||||
|
{ bg: 'dark:bg-pink-900', text: 'dark:text-pink-100' },
|
||||||
|
{ bg: 'dark:bg-indigo-900', text: 'dark:text-indigo-100' },
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生成随机颜色组合
|
||||||
|
export function getRandomAvatarColors() {
|
||||||
|
const index = Math.floor(Math.random() * AVATAR_COLORS.light.length);
|
||||||
|
return {
|
||||||
|
light: AVATAR_COLORS.light[index],
|
||||||
|
dark: AVATAR_COLORS.dark[index]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取显示字符
|
||||||
|
function getDisplayChar(contributor: { id: string; name?: string }) {
|
||||||
|
if (contributor.name) {
|
||||||
|
const firstChar = contributor.name.charAt(0);
|
||||||
|
return firstChar.toUpperCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
const firstChar = contributor.id.charAt(0);
|
||||||
|
return /[a-zA-Z]/.test(firstChar) ? firstChar.toUpperCase() : firstChar;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成头像URL或获取显示字符和颜色
|
||||||
|
export function getAvatarInfo(contributor: { id: string; name?: string; email?: string; avatarUrl?: string }) {
|
||||||
|
if (contributor.avatarUrl) {
|
||||||
|
return { type: 'url' as const, url: contributor.avatarUrl };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (contributor.email) {
|
||||||
|
const hash = md5(contributor.email.toLowerCase().trim());
|
||||||
|
const libravatarUrl = `https://seccdn.libravatar.org/avatar/${hash}?d=404`;
|
||||||
|
const gravatarUrl = `https://www.gravatar.com/avatar/${hash}?d=mp`;
|
||||||
|
return {
|
||||||
|
type: 'url' as const,
|
||||||
|
url: `${libravatarUrl}&fallback=${encodeURIComponent(gravatarUrl)}`
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成字母头像
|
||||||
|
return {
|
||||||
|
type: 'char' as const,
|
||||||
|
char: getDisplayChar(contributor),
|
||||||
|
colors: getRandomAvatarColors()
|
||||||
|
};
|
||||||
|
}
|
||||||
30
src/data/contacts.json
Normal file
30
src/data/contacts.json
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"keyoxide": {
|
||||||
|
"url": "https://keyoxide.org/7D7FEEA7EE4424F4BECE27A32F0718F74CCACC0F",
|
||||||
|
"label": "Keyoxide"
|
||||||
|
},
|
||||||
|
"email": {
|
||||||
|
"url": "mailto:hello@wholetrans.org",
|
||||||
|
"label": "hello@wholetrans.org"
|
||||||
|
},
|
||||||
|
"github": {
|
||||||
|
"url": "https://github.com/wholetrans",
|
||||||
|
"label": "GitHub"
|
||||||
|
},
|
||||||
|
"forgejo": {
|
||||||
|
"url": "https://git.owu.one/wholetrans",
|
||||||
|
"label": "Forgejo"
|
||||||
|
},
|
||||||
|
"fediverse": {
|
||||||
|
"url": "https://scg.owu.one/@wholetrans",
|
||||||
|
"label": "Fediverse"
|
||||||
|
},
|
||||||
|
"matrix": {
|
||||||
|
"url": "https://matrix.to/#/#wholetrans:mtx.owu.one",
|
||||||
|
"label": "Matrix"
|
||||||
|
},
|
||||||
|
"bluesky": {
|
||||||
|
"url": "https://bsky.app/profile/wholetrans.org",
|
||||||
|
"label": "Bluesky"
|
||||||
|
}
|
||||||
|
}
|
||||||
10
src/data/contributors.json
Normal file
10
src/data/contributors.json
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"contributors": [
|
||||||
|
{
|
||||||
|
"id": "cdn0x12",
|
||||||
|
"name": "CDN",
|
||||||
|
"email": "info@cdn0x12.dev",
|
||||||
|
"homepage": "https://cdn0x12.dev"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
63
src/data/index.ts
Normal file
63
src/data/index.ts
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
import { Contributor, W3CSpec, Tag, TranslatorRef } from './types';
|
||||||
|
import contributorsData from './contributors.json';
|
||||||
|
import specsData from './specs.json';
|
||||||
|
import tagsData from './tags.json';
|
||||||
|
import { getAvatarInfo } from './avatar';
|
||||||
|
|
||||||
|
export type { Contributor, W3CSpec, TranslationStatus, AcceptanceStatus, Tag, TranslatorRef } from './types';
|
||||||
|
|
||||||
|
// 获取所有贡献者
|
||||||
|
export function getContributors(): Contributor[] {
|
||||||
|
return contributorsData.contributors;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取所有规范
|
||||||
|
export function getSpecs(): W3CSpec[] {
|
||||||
|
return specsData.specs;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取所有标签
|
||||||
|
export function getTags(): Tag[] {
|
||||||
|
return tagsData.tags;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据ID获取贡献者
|
||||||
|
export function getContributorById(id: string): Contributor | undefined {
|
||||||
|
return getContributors().find(c => c.id === id);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据ID获取标签
|
||||||
|
export function getTagById(id: string): Tag | undefined {
|
||||||
|
return getTags().find(t => t.id === id);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取规范的所有标签
|
||||||
|
export function getSpecTags(spec: W3CSpec): Tag[] {
|
||||||
|
return spec.tagIds
|
||||||
|
.map(id => getTagById(id))
|
||||||
|
.filter((t): t is Tag => t !== undefined);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取规范的所有贡献者信息
|
||||||
|
export function getSpecContributors(spec: W3CSpec): (Contributor & { primary?: boolean })[] {
|
||||||
|
return spec.translators
|
||||||
|
.map(ref => {
|
||||||
|
const contributor = getContributorById(ref.id);
|
||||||
|
if (!contributor) return undefined;
|
||||||
|
return { ...contributor, primary: ref.primary };
|
||||||
|
})
|
||||||
|
.filter((c): c is Contributor & { primary?: boolean } => c !== undefined);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解析相对URL
|
||||||
|
export function resolveTranslationUrl(spec: W3CSpec): string | undefined {
|
||||||
|
const url = spec.translationUrl;
|
||||||
|
if (!url) return undefined;
|
||||||
|
if (url.startsWith('http://') || url.startsWith('https://')) {
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
// 这里可以根据需要添加基础URL
|
||||||
|
return `https://w3c.wholetrans.org${url}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export { getAvatarInfo };
|
||||||
61
src/data/specs.json
Normal file
61
src/data/specs.json
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
{
|
||||||
|
"specs": [
|
||||||
|
{
|
||||||
|
"originalTitle": "ActivityPub",
|
||||||
|
"translatedTitle": "ActivityPub",
|
||||||
|
"originalUrl": "https://www.w3.org/TR/activitypub/",
|
||||||
|
"translationUrl": "/activitypub/",
|
||||||
|
"status": "completed",
|
||||||
|
"acceptance": "accepted",
|
||||||
|
"tagIds": ["social"],
|
||||||
|
"repository": {
|
||||||
|
"forgejo": "https://git.owu.one/wholetrans/w3c-activitypub",
|
||||||
|
"github": "https://github.com/wholetrans/w3c-activitypub"
|
||||||
|
},
|
||||||
|
"translators": [
|
||||||
|
{
|
||||||
|
"id": "cdn0x12",
|
||||||
|
"primary": true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"originalTitle": "Activity Vocabulary",
|
||||||
|
"translatedTitle": "行为术语",
|
||||||
|
"originalUrl": "https://www.w3.org/TR/activitystreams-vocabulary/",
|
||||||
|
"translationUrl": "/activitystreams-vocabulary/",
|
||||||
|
"status": "planned",
|
||||||
|
"acceptance": "not-submitted",
|
||||||
|
"tagIds": ["social"],
|
||||||
|
"repository": {
|
||||||
|
"forgejo": "https://git.owu.one/wholetrans/w3c-activitystreams-vocabulary",
|
||||||
|
"github": "https://github.com/wholetrans/w3c-activitystreams-vocabulary"
|
||||||
|
},
|
||||||
|
"translators": [
|
||||||
|
{
|
||||||
|
"id": "cdn0x12",
|
||||||
|
"primary": true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"originalTitle": "Activity Streams 2.0",
|
||||||
|
"translatedTitle": "流式行为 2.0",
|
||||||
|
"originalUrl": "https://www.w3.org/TR/activitystreams-core/",
|
||||||
|
"translationUrl": "/activitystreams-core/",
|
||||||
|
"status": "planned",
|
||||||
|
"acceptance": "not-submitted",
|
||||||
|
"tagIds": ["social"],
|
||||||
|
"repository": {
|
||||||
|
"forgejo": "https://git.owu.one/wholetrans/w3c-activitystreams-core",
|
||||||
|
"github": "https://github.com/wholetrans/w3c-activitystreams-core"
|
||||||
|
},
|
||||||
|
"translators": [
|
||||||
|
{
|
||||||
|
"id": "cdn0x12",
|
||||||
|
"primary": true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
32
src/data/specs.ts
Normal file
32
src/data/specs.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
import md5 from 'md5';
|
||||||
|
|
||||||
|
export interface Translator {
|
||||||
|
name: string;
|
||||||
|
email: string;
|
||||||
|
avatarUrl?: string; // 可选的自定义头像URL
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface W3CSpec {
|
||||||
|
originalTitle: string;
|
||||||
|
translatedTitle: string;
|
||||||
|
status: 'not-started' | 'in-progress' | 'completed';
|
||||||
|
tags: string[];
|
||||||
|
repository: string;
|
||||||
|
translators: Translator[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 头像URL生成函数
|
||||||
|
export function getAvatarUrl(email: string, customUrl?: string): string {
|
||||||
|
if (customUrl) {
|
||||||
|
return customUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
const hash = md5(email.toLowerCase().trim());
|
||||||
|
// 先尝试 Libravatar
|
||||||
|
const libravatarUrl = `https://seccdn.libravatar.org/avatar/${hash}?d=404`;
|
||||||
|
|
||||||
|
// Gravatar 作为后备
|
||||||
|
const gravatarUrl = `https://www.gravatar.com/avatar/${hash}?d=mp`;
|
||||||
|
|
||||||
|
return `${libravatarUrl}&fallback=${encodeURIComponent(gravatarUrl)}`;
|
||||||
|
}
|
||||||
8
src/data/tags.json
Normal file
8
src/data/tags.json
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"tags": [
|
||||||
|
{
|
||||||
|
"id": "social",
|
||||||
|
"name": "社交网络"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
44
src/data/types.ts
Normal file
44
src/data/types.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
export interface Contributor {
|
||||||
|
id: string;
|
||||||
|
name?: string;
|
||||||
|
email?: string;
|
||||||
|
avatarUrl?: string;
|
||||||
|
homepage?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TranslationStatus = 'planned' | 'in-progress' | 'completed';
|
||||||
|
export type AcceptanceStatus =
|
||||||
|
| 'not-submitted' // 未提交
|
||||||
|
| 'authed-available' // 已授权可翻译
|
||||||
|
| 'submitted' // 已提交
|
||||||
|
| 'in-review' // 审核中
|
||||||
|
| 'accepted' // 已接受
|
||||||
|
| 'accepted-authed'; // 已接受且已授权
|
||||||
|
|
||||||
|
export interface Repository {
|
||||||
|
forgejo?: string;
|
||||||
|
codeberg?: string;
|
||||||
|
github?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Tag {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TranslatorRef {
|
||||||
|
id: string;
|
||||||
|
primary?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface W3CSpec {
|
||||||
|
originalTitle: string;
|
||||||
|
translatedTitle: string;
|
||||||
|
originalUrl: string;
|
||||||
|
translationUrl?: string; // 可以是相对URL
|
||||||
|
status: TranslationStatus;
|
||||||
|
acceptance: AcceptanceStatus;
|
||||||
|
tagIds: string[];
|
||||||
|
repository: Repository;
|
||||||
|
translators: TranslatorRef[];
|
||||||
|
}
|
||||||
44
src/index.css
Normal file
44
src/index.css
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
@import "tailwindcss";
|
||||||
|
@custom-variant dark (&:where(.dark, .dark *));
|
||||||
|
|
||||||
|
/* 自定义滚动条样式 */
|
||||||
|
@layer utilities {
|
||||||
|
/* 整个滚动条的样式 */
|
||||||
|
.custom-scrollbar {
|
||||||
|
scrollbar-width: thin; /* Firefox */
|
||||||
|
scrollbar-color: rgba(156, 163, 175, 0.5) transparent; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Webkit (Chrome, Safari, Edge) 浏览器的滚动条样式 */
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background-color: rgba(156, 163, 175, 0.5);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 暗色模式下的滚动条颜色 */
|
||||||
|
.dark .custom-scrollbar {
|
||||||
|
scrollbar-color: rgba(75, 85, 99, 0.5) transparent; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background-color: rgba(75, 85, 99, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 鼠标悬停时的滚动条样式 */
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: rgba(156, 163, 175, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: rgba(75, 85, 99, 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import App from './App.tsx';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
12
tailwind.config.js
Normal file
12
tailwind.config.js
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
darkMode: 'class',
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
24
tsconfig.app.json
Normal file
24
tsconfig.app.json
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
22
tsconfig.node.json
Normal file
22
tsconfig.node.json
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
14
vite.config.ts
Normal file
14
vite.config.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
react(),
|
||||||
|
tailwindcss()
|
||||||
|
],
|
||||||
|
optimizeDeps: {
|
||||||
|
exclude: ['lucide-react'],
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue