@@ -1178,7 +1185,7 @@ const visibleTravels = sortedTravels.slice(
const searchInput = document.getElementById('search-input') as HTMLInputElement;
const searchButton = document.getElementById('search-button');
const testNoResultsBtn = document.getElementById('test-no-results-btn');
- const travelCards = document.querySelectorAll('.space-y-10 a');
+ const travelCards = document.querySelectorAll('#travel-list div[data-tags]');
const noResultsMessage = document.getElementById('no-results-message');
const searchTermMessage = document.getElementById('search-term-message');
const travelList = document.getElementById('travel-list');
@@ -1603,166 +1610,90 @@ const visibleTravels = sortedTravels.slice(
let matchCount = 0;
- // 如果没有筛选条件，显示所有卡片
- if (!searchValue && selectedSeasons.length === 0 && selectedTypes.length === 0 && selectedCities.length === 0 && selectedTags.length === 0) {
- if (noResultsMessage) {
- noResultsMessage.classList.add('hidden');
- }
- if (travelList) {
- travelList.classList.remove('hidden');
- }
-
- travelCards.forEach((card) => {
- card.classList.remove('hidden');
- });
-
- return travelCards.length;
- }
-
// 遍历所有旅行卡片进行筛选
travelCards.forEach((card) => {
- const cardTitle = card.querySelector('h3')?.textContent?.toLowerCase() || '';
- const cardDesc = card.querySelector('p.font-handwriting.text-slate-600')?.textContent?.toLowerCase() || '';
- const cardTags = card.querySelectorAll('span.px-2.py-0\\.5.text-xs');
- const cardInfo = card.querySelectorAll('.flex.flex-wrap.gap-4 .flex.items-center');
-
- // 获取卡片的季节、类型和城市信息
- let cardSeason = '';
- let cardType = '';
- let cardCities: string[] = [];
- let tagsText = '';
- let cardTagsList: string[] = [];
-
- cardInfo.forEach(info => {
- const infoText = info.textContent?.toLowerCase() || '';
- if (infoText.includes('难度')) {
- // 跳过难度信息
- } else if (infoText.includes('天')) {
- // 跳过天数信息
- } else if (cardSeason === '') {
- cardSeason = infoText;
- } else if (cardType === '') {
- cardType = infoText;
- }
- });
-
- // 提取卡片标签文本
- cardTags.forEach(tag => {
- const tagText = tag.textContent?.toLowerCase().replace('#', '').trim() || '';
- if (tagText) {
- tagsText += tagText + ' ';
- cardTagsList.push(tagText);
- }
- });
-
- // 寻找城市信息 - 从DOM中寻找城市标签
- // 首先尝试查找城市专用标签
- const cityElements = card.querySelectorAll('.city-tag, .location-tag');
- if (cityElements && cityElements.length > 0) {
- cityElements.forEach(cityElem => {
- const cityText = cityElem.textContent?.toLowerCase().trim() || '';
- if (cityText) {
- cardCities.push(cityText);
- }
- });
- }
-
- // 如果没有找到专用城市标签，尝试从cardInfo中提取
- if (cardCities.length === 0) {
- // 检查是否有标记了城市信息的元素
- const cityInfoElements = card.querySelectorAll('[data-city], .city-info');
- if (cityInfoElements && cityInfoElements.length > 0) {
- cityInfoElements.forEach(cityElem => {
- const cityText = cityElem.textContent?.toLowerCase().trim() || '';
- cardCities.push(cityText);
- });
- }
- }
-
- // 如果依然没有找到，尝试从描述和标题中提取
- if (cardCities.length === 0) {
- // 检查标题和描述中是否包含已知城市
- selectedCities.forEach(city => {
- if (cardTitle.includes(city) || cardDesc.includes(city)) {
- cardCities.push(city);
- }
- });
- }
-
- // 匹配条件
- const matchesSearch = !searchValue ||
- cardTitle.includes(searchValue) ||
- cardDesc.includes(searchValue) ||
- tagsText.includes(searchValue);
-
- const matchesSeasons = selectedSeasons.length === 0 || selectedSeasons.some(season => cardSeason.includes(season));
- const matchesTypes = selectedTypes.length === 0 || selectedTypes.some(type => cardType.includes(type));
-
- // 检查是否有任何选中的城市存在于卡片城市中
- // 如果没有找到城市标签，但存在城市筛选条件，尝试在标题和描述中寻找
- let matchesCities = selectedCities.length === 0;
- if (!matchesCities) {
- if (cardCities.length > 0) {
- // 如果找到了城市标签，检查是否匹配
- matchesCities = cardCities.some(cardCity =>
- selectedCities.some(selectedCity => cardCity.includes(selectedCity))
- );
+ const cardContainer = card.closest('a')?.parentElement;
+ if (!cardContainer) return;
+
+ try {
+ // 直接从card获取数据属性
+ const cardData = {
+ title: card.getAttribute('data-title')?.toLowerCase() || '',
+ description: card.getAttribute('data-description')?.toLowerCase() || '',
+ tags: JSON.parse(card.getAttribute('data-tags') || '[]').map((tag: string) => tag.toLowerCase()),
+ season: card.getAttribute('data-season')?.toLowerCase() || '',
+ type: card.getAttribute('data-type')?.toLowerCase() || '',
+ cities: JSON.parse(card.getAttribute('data-cities') || '[]').map((city: string) => city.toLowerCase())
+ };
+
+ // 匹配搜索词
+ const matchesSearch = !searchValue ||
+ cardData.title.includes(searchValue) ||
+ cardData.description.includes(searchValue) ||
+ cardData.tags.some((tag: string) => tag.includes(searchValue)) ||
+ cardData.cities.some((city: string) => city.includes(searchValue));
+
+ // 匹配季节
+ const matchesSeasons = selectedSeasons.length === 0 ||
+ selectedSeasons.some(season => cardData.season.includes(season));
+
+ // 匹配类型
+ const matchesTypes = selectedTypes.length === 0 ||
+ selectedTypes.some(type => cardData.type.includes(type));
+
+ // 匹配城市
+ const matchesCities = selectedCities.length === 0 ||
+ selectedCities.some(city => cardData.cities.some((cardCity: string) => cardCity.includes(city)));
+
+ // 匹配标签
+ const matchesTags = selectedTags.length === 0 ||
+ selectedTags.some(tag => cardData.tags.some((cardTag: string) => cardTag.includes(tag)));
+
+ // 所有条件都匹配才显示
+ const isMatch = matchesSearch && matchesSeasons && matchesTypes && matchesCities && matchesTags;
+
+ if (isMatch) {
+ matchCount++;
+ cardContainer.style.display = '';
} else {
- // 如果没有找到城市标签，尝试在标题和描述中寻找
- matchesCities = selectedCities.some(city =>
- cardTitle.includes(city) || cardDesc.includes(city)
- );
+ cardContainer.style.display = 'none';
}
- }
-
- // 标签匹配：如果有选中的标签，检查卡片标签中是否包含它们中的任何一个
- const matchesTags = selectedTags.length === 0 || selectedTags.some(tag =>
- cardTagsList.some(cardTag => cardTag.includes(tag))
- );
-
- // 所有条件都匹配才显示
- const isMatch = matchesSearch && matchesSeasons && matchesTypes && matchesCities && matchesTags;
-
- if (isMatch) {
- matchCount++;
- card.classList.remove('hidden');
- } else {
- card.classList.add('hidden');
+ } catch (error) {
+ console.error('Error filtering card:', error);
+ cardContainer.style.display = 'none';
}
});
-
+
// 更新无结果提示显示
if (matchCount === 0) {
+ if (travelList) travelList.classList.add('hidden');
if (noResultsMessage) {
noResultsMessage.classList.remove('hidden');
-
- // 更新无结果消息中的搜索词
if (searchTermMessage) {
+ let message = '抱歉，未找到相关旅行笔记。';
if (searchValue) {
- searchTermMessage.textContent = `抱歉，未找到与 "${searchValue}" 相关的旅行笔记。请尝试其他关键词或浏览所有旅行记录。`;
- } else if (selectedSeasons.length > 0 || selectedTypes.length > 0 || selectedCities.length > 0 || selectedTags.length > 0) {
- searchTermMessage.textContent = `抱歉，未找到符合当前筛选条件的旅行笔记。请尝试调整筛选条件或浏览所有旅行记录。`;
- } else {
- searchTermMessage.textContent = `抱歉，未找到相关旅行笔记。请尝试其他关键词或浏览所有旅行记录。`;
+ message += `没有找到包含"${searchValue}"的内容。`;
}
+ if (selectedSeasons.length > 0) {
+ message += `没有找到${selectedSeasons.join('、')}季节的内容。`;
+ }
+ if (selectedTypes.length > 0) {
+ message += `没有找到${selectedTypes.join('、')}类型的内容。`;
+ }
+ if (selectedCities.length > 0) {
+ message += `没有找到位于${selectedCities.join('、')}的内容。`;
+ }
+ if (selectedTags.length > 0) {
+ message += `没有找到标签为${selectedTags.join('、')}的内容。`;
+ }
+ searchTermMessage.textContent = message;
}
}
-
- // 隐藏旅行列表
- if (travelList) {
- travelList.classList.add('hidden');
- }
} else {
- // 隐藏无结果提示
- if (noResultsMessage) {
- noResultsMessage.classList.add('hidden');
- }
- // 显示旅行列表
- if (travelList) {
- travelList.classList.remove('hidden');
- }
+ if (travelList) travelList.classList.remove('hidden');
+ if (noResultsMessage) noResultsMessage.classList.add('hidden');
}
-
+
return matchCount;
}
diff --git a/web/graduation/src/styles/global.css b/web/graduation/src/styles/global.css
index a1f693f..443217b 100644
--- a/web/graduation/src/styles/global.css
+++ b/web/graduation/src/styles/global.css
@@ -90,6 +90,19 @@
--color-dark-primary-900: #faefdb;
}
+/* 确保在无JavaScript环境下，ScrollReveal元素仍然可见 */
+.no-js .scroll-reveal {
+ opacity: 1 !important;
+ transform: none !important;
+}
+
+/* 当JS加载完成时，移除no-js类 */
+html {
+ &.no-js {
+ opacity: 1;
+ }
+}
+
:root {
/* 基础色调 */
--bg-primary: var(--color-gray-50);
@@ -176,6 +189,37 @@
.bg-slate-900 {
background-color: var(--color-dark-bg);
}
+
+ /* 处理颜色命名不一致的问题 */
+ .text-color-primary-600,
+ .text-primary-600 {
+ color: var(--color-dark-primary-600);
+ }
+
+ .text-color-primary-400,
+ .text-primary-400 {
+ color: var(--color-dark-primary-400);
+ }
+
+ .bg-color-primary-600,
+ .bg-primary-600 {
+ background-color: var(--color-dark-primary-600);
+ }
+
+ .bg-color-primary-400,
+ .bg-primary-400 {
+ background-color: var(--color-dark-primary-400);
+ }
+
+ .border-color-primary-600,
+ .border-primary-600 {
+ border-color: var(--color-dark-primary-600);
+ }
+
+ .border-color-primary-400,
+ .border-primary-400 {
+ border-color: var(--color-dark-primary-400);
+ }
/* 表单元素适配 */
input,
@@ -220,6 +264,37 @@
.bg-amber-100 {
background-color: var(--color-primary-50);
}
+
+ /* 处理颜色命名不一致的问题 */
+ .text-color-primary-600,
+ .text-primary-600 {
+ color: var(--color-primary-600);
+ }
+
+ .text-color-primary-400,
+ .text-primary-400 {
+ color: var(--color-primary-400);
+ }
+
+ .bg-color-primary-600,
+ .bg-primary-600 {
+ background-color: var(--color-primary-600);
+ }
+
+ .bg-color-primary-400,
+ .bg-primary-400 {
+ background-color: var(--color-primary-400);
+ }
+
+ .border-color-primary-600,
+ .border-primary-600 {
+ border-color: var(--color-primary-600);
+ }
+
+ .border-color-primary-400,
+ .border-primary-400 {
+ border-color: var(--color-primary-400);
+ }
}
/* 背景渐变动画 */
@@ -243,6 +318,25 @@
.border-theme-primary-light { border-color: var(--theme-primary-light); }
.border-theme-primary-dark { border-color: var(--theme-primary-dark); }
+/* 添加color-primary和primary颜色类的统一映射 */
+.text-primary-500, .text-color-primary-500 { color: var(--theme-primary); }
+.text-primary-400, .text-color-primary-400 { color: var(--theme-primary-light); }
+.text-primary-600, .text-color-primary-600 { color: var(--theme-primary-dark); }
+.text-primary-300, .text-color-primary-300 { color: var(--color-primary-300); }
+.text-primary-700, .text-color-primary-700 { color: var(--color-primary-700); }
+
+.bg-primary-500, .bg-color-primary-500 { background-color: var(--theme-primary); }
+.bg-primary-400, .bg-color-primary-400 { background-color: var(--theme-primary-light); }
+.bg-primary-600, .bg-color-primary-600 { background-color: var(--theme-primary-dark); }
+.bg-primary-50, .bg-color-primary-50 { background-color: var(--theme-primary-bg); }
+.bg-primary-100, .bg-color-primary-100 { background-color: var(--theme-primary-bg-hover); }
+
+.border-primary-500, .border-color-primary-500 { border-color: var(--theme-primary); }
+.border-primary-400, .border-color-primary-400 { border-color: var(--theme-primary-light); }
+.border-primary-600, .border-color-primary-600 { border-color: var(--theme-primary-dark); }
+.border-primary-300, .border-color-primary-300 { border-color: var(--color-primary-300); }
+.border-primary-700, .border-color-primary-700 { border-color: var(--color-primary-700); }
+
/* 主题特殊背景 - 使用统一命名并移除重复定义 */
.bg-scroll-bg { background-color: var(--bg-scroll); }
.bg-recipe-paper { background-color: var(--bg-recipe); }