diff --git a/index.html b/index.html index c51f1d1..0a9a94c 100644 --- a/index.html +++ b/index.html @@ -3,122 +3,343 @@ - - - + -
+
-
-
-

DIRECTORY

-

{{ ui[lang].subtitle }}

+
+
+

DIRECTORY

+

{{ ui[lang].subtitle }}

-
-
- - 🔍 -
- - + + -
-
-
- {{ ui[lang].showing }}: {{ filteredItems.length }} -
-
{{ ui[lang].syncing }}
-
+
+ + + + + + + + + + + + + + + + + + + +
{{ ui[lang].colName }}{{ ui[lang].colType }}Platforms{{ ui[lang].colSafety }}Action
+
+
+ +
+
+
+

{{ item.name }}

+

{{ item.note }}

+
+
+ 		+ + {{ translateStatic(item.type) }} + + + {{ p }} + +
+ ● {{ translateStatic(item.safety) }} +
+ 		+
{{ formatDate(item.date) }}
+ {{ ui[lang].linkBtn }} +
-
-
- - - - - - - - - - - - - - - - - - - - - -
{{ ui[lang].colName }}{{ ui[lang].colType }}Platforms{{ ui[lang].colSafety }}{{ ui[lang].colDate }}Action
-
-
- -
-
-
-
{{ item.name }}
-
{{ item.note || '--' }}
-
-
- 		- - {{ translateStatic(item.type) }} - - -
- - {{ p }} - -
- 		-
- - {{ translateStatic(item.safety) }} -
- 		- {{ formatDate(item.date) }} - - - {{ ui[lang].linkBtn }} - - — -
-
- -
-
-

{{ ui[lang].syncing }}

-
-
-
NULL
-

{{ ui[lang].noResults }}

+
+ 同步云端数据中...
@@ -135,20 +356,16 @@ createApp({ const isDark = ref(false); const defaultIcon = 'https://cdn-icons-png.flaticon.com/512/684/684831.png'; - // 核心 UI 提示信息的翻译 const ui = { - cn: { subtitle: '全球数据资源索引', searchPlaceholder: '搜索名称、备注或链接...', colName: '项目描述', colType: '资源类型', colSafety: '安全性', colDate: '最近更新', linkBtn: '访问官网', showing: '收录项目', syncing: '同步云端数据中', noResults: '未发现匹配项' }, - en: { subtitle: 'GLOBAL RESOURCE INDEX', searchPlaceholder: 'Search name, note, url...', colName: 'Description', colType: 'Type', colSafety: 'Security', colDate: 'Updated', linkBtn: 'VISIT', showing: 'Total Items', syncing: 'SYNCING CLOUD DATA', noResults: 'NO DATA FOUND' }, - es: { subtitle: 'ÍNDICE DE RECURSOS GLOBALES', searchPlaceholder: 'Buscar nombre, nota, url...', colName: 'Descripción', colType: 'Tipo', colSafety: 'Seguridad', colDate: 'Actualizado', linkBtn: 'VISITAR', showing: 'Proyectos', syncing: 'SINCRONIZANDO DATOS', noResults: 'SIN RESULTADOS' } + cn: { subtitle: '全球数据资源索引', searchPlaceholder: '搜索名称、备注...', colName: '项目描述', colType: '类型', colSafety: '安全性', linkBtn: '访问官网' }, + en: { subtitle: 'GLOBAL RESOURCE INDEX', searchPlaceholder: 'Search...', colName: 'Description', colType: 'Type', colSafety: 'Security', linkBtn: 'VISIT' }, + es: { subtitle: 'ÍNDICE DE RECURSOS', searchPlaceholder: 'Buscar...', colName: 'Descripción', colType: 'Tipo', colSafety: 'Seguridad', linkBtn: 'VISITAR' } }; - // 类型和安全性的硬编码翻译 const staticMap = { - // 类型 '网站': { cn: '网站', en: 'Website', es: 'Sitio Web' }, '软件': { cn: '软件', en: 'Software', es: 'Software' }, '浏览器扩展': { cn: '浏览器扩展', en: 'Extension', es: 'Extensión' }, - // 安全性 '安全': { cn: '安全', en: 'Safe', es: 'Seguro' }, '不安全': { cn: '不安全', en: 'Unsafe', es: 'Inseguro' }, '未知': { cn: '未知', en: 'Unknown', es: 'Desconocido' } @@ -165,15 +382,14 @@ createApp({ const filteredItems = computed(() => { const main = rawData.value.main || []; - const transTable = rawData.value[lang.value] || []; const transMap = {}; - transTable.forEach(row => { transMap[row["序号"]] = row; }); + (rawData.value[lang.value] || []).forEach(row => { transMap[row["序号"]] = row; }); return main.map(row => { const id = row["序号"]; const t = transMap[id] || {}; return { - id: id, + id, name: t[lang.value + "名字"] || row["名字"], note: t[lang.value + "备注"] || row["备注"], icon: row["图标链接"] || defaultIcon, @@ -186,56 +402,31 @@ createApp({ }) .filter(item => { const s = searchTerm.value.toLowerCase(); - if (!s) return true; - return item.name.toLowerCase().includes(s) || - item.note.toLowerCase().includes(s) || - (item.url && item.url.toLowerCase().includes(s)); + return !s || item.name.toLowerCase().includes(s) || item.note.toLowerCase().includes(s); }) .sort((a, b) => new Date(b.date) - new Date(a.date)); }); const translateStatic = (val) => (staticMap[val] && staticMap[val][lang.value]) || val; - const splitPlatform = (str) => str ? str.split(/[,，]/).map(s => s.trim()) : []; - - const getTypeStyle = (type) => { - if (type === '网站') return 'text-cyan-500 border-cyan-500/30 bg-cyan-500/5'; - if (type === '软件') return 'text-indigo-500 border-indigo-500/30 bg-indigo-500/5'; - if (type === '浏览器扩展') return 'text-amber-500 border-amber-500/30 bg-amber-500/5'; - return 'text-slate-400 border-slate-300'; - }; - - const getSafetyDot = (val) => { - if (val === '安全') return 'bg-emerald-500'; - if (val === '不安全') return 'bg-rose-500'; - return 'bg-amber-400'; - }; - - const getSafetyTextStyle = (val) => { - if (val === '安全') return 'text-emerald-500'; - if (val === '不安全') return 'text-rose-500'; - return 'text-amber-500'; + + const getSafetyColor = (val) => { + if (val === '安全') return '#10b981'; + if (val === '不安全') return '#ef4444'; + return '#f59e0b'; }; const formatDate = (dateStr) => { - if (!dateStr) return 'N/A'; + if (!dateStr) return ''; const d = new Date(dateStr); - return d.toLocaleDateString(lang.value === 'cn' ? 'zh-CN' : 'en-US', { - year: 'numeric', month: '2-digit', day: '2-digit' - }); + return d.toLocaleDateString(lang.value === 'cn' ? 'zh-CN' : 'en-US'); }; - const toggleDark = () => { - isDark.value = !isDark.value; - document.documentElement.classList.toggle('dark'); - }; + const toggleDark = () => isDark.value = !isDark.value; onMounted(fetchData); - return { - lang, searchTerm, loading, isDark, filteredItems, ui, defaultIcon, - toggleDark, translateStatic, getTypeStyle, getSafetyDot, getSafetyTextStyle, formatDate, splitPlatform - }; + return { lang, searchTerm, loading, isDark, filteredItems, ui, defaultIcon, toggleDark, translateStatic, getSafetyColor, formatDate, splitPlatform }; } }).mount('#app');