非遗万象图前端开发
<h1 id="任务一非遗地图浏览模块">任务一：非遗地图浏览模块</h1><h2 id="核心功能">核心功能</h2>
<ul>
<li>高德地图集成与定制化</li>
<li>非遗项目地理位置标记</li>
<li>实时搜索过滤功能</li>
</ul>
<h2 id="前端技术实现要点">前端技术实现要点</h2>
<h3 id="1-地图初始化与定制">1. 地图初始化与定制</h3>
<ul>
<li>使用高德地图JS API创建地图实例</li>
<li>应用自定义地图样式(whitesmoke)营造文化氛围</li>
<li>添加CSS滤镜(sepia、saturate等)增强视觉效果</li>
</ul>
<h3 id="2-标记点系统">2. 标记点系统</h3>
<ul>
<li>动态创建带交互效果的自定义标记</li>
<li>实现标记点点击事件处理</li>
<li>开发信息窗口展示详细内容</li>
</ul>
<h3 id="3-搜索过滤功能">3. 搜索过滤功能</h3>
<ul>
<li>实现前端实时搜索过滤</li>
<li>支持多字段匹配(名称、省份、类型)</li>
<li>优化搜索结果去重显示</li>
</ul>
<h2 id="用户体验优化">用户体验优化</h2>
<ul>
<li>添加动画过渡效果提升视觉体验</li>
<li>实现响应式设计适配不同设备</li>
<li>优化标记点交互反馈(悬停、点击效果)</li>
</ul>
<h3 id="部分代码">部分代码：</h3>
<details>
<summary>点击查看代码</summary>
<pre><code><div class="relative w-full h- overflow-hidden bg-[#eeeadd]"
x-data="mapApp()" x-init="initMap()">
<div id="map" class="absolute inset-0 z-0 opacity-0 transition-opacity duration- ease-in-out"></div>
<div class="absolute top-8 left-8 z-10 w-80 flex flex-col gap-6 opacity-0 translate-x-[-20px] animate-fade-in-up" style="animation-delay: 0.5s; animation-fill-mode: forwards;">
<div class="bg-paper/80 backdrop-blur-md p-1 border border-ink/10 rounded-sm shadow-sm transition-all duration-300 focus-within:shadow-md focus-within:bg-paper hover:-translate-y-1">
<div class="relative flex items-center h-10">
<input type="text" x-model="query" @input="filterItems"
class="w-full h-full bg-transparent border-none pl-4 pr-10 text-sm text-ink font-serif focus:ring-0 placeholder-ink-light/50 transition-colors"
placeholder="寻访 · 非遗 (搜名称/省份)">
<div class="absolute right-0 top-0 h-full w-10 flex items-center justify-center text-cinnabar transition-all duration-300">
<i class="fa-solid fa-search text-sm" x-show="!query"></i>
<i class="fa-solid fa-times text-sm cursor-pointer hover:scale-110 transition" x-show="query" @click="query=''; filterItems()"></i>
</div>
</div>
</div>
<div class="bg-paper/80 backdrop-blur-md border border-ink/10 shadow-lg rounded-sm overflow-hidden flex flex-col max-h- transition-transform duration-500 hover:shadow-xl">
<div class="p-4 border-b border-ink/5 flex justify-between items-center">
<span class="text-cinnabar font-bold text-sm tracking-widest">
非遗 · 目录 (<span x-text="filteredItems.length"></span>)
</span>
<i class="fa-solid fa-seedling text-ink-light text-xs animate-float"></i>
</div>
<div class="overflow-y-auto p-4 space-y-4 scrollbar-thin scrollbar-thumb-ink/10">
<template x-for="item in filteredItems" :key="item.id">
<div class="group cursor-pointer flex gap-4 items-start p-2 rounded hover:bg-white/50 transition-all duration-500 hover:-translate-y-1 hover:shadow-sm"
@click="focusMap(item)">
<div class="w-16 h-16 bg-[#eecfa1] shrink-0 overflow-hidden relative shadow-inner flex items-center justify-center">
<img :src="item.main_image_url || ''"
class="w-full h-full object-cover grayscale- group-hover:grayscale-0 group-hover:scale-110 transition duration- ease-out relative z-10"
onerror="this.style.display='none'">
<div class="absolute inset-0 flex items-center justify-center border border-ink/5 bg-[#fdfbf7]">
<span class="font-calligraphy text-2xl text-cinnabar/30 select-none" x-text="item.title.charAt(0)"></span>
</div>
</div>
<div>
<h4 class="text-ink font-bold text-sm group-hover:text-cinnabar transition-colors duration-300" x-text="item.title"></h4>
<div class="flex items-center gap-2 mt-1 opacity-60 group-hover:opacity-100 transition-opacity">
<span class="text- border border-ink/20 px-1 text-ink-light" x-text="item.province"></span>
<span class="text- text-ink-light" x-text="item.type"></span>
</div>
</div>
</div>
</template>
<div x-show="filteredItems.length === 0" class="text-center py-8 text-ink-light/50 text-sm font-serif">
<p>未寻得相关非遗...</p>
</div>
</div>
<div class="p-3 bg-ink/5 text-center transition duration-300">
<span class="text-xs text-ink-light tracking-widest opacity-50">SCROLL FOR MORE</span>
</div>
</div>
</div>
</div>
</code></pre>
</details>
<h4 id="完整代码">完整代码：</h4>
<p>https://gitee.com/kjmfzu/fzu_-kjm/blob/master/非遗万象图前端开发/ich_map.html</p>
<h4 id="效果图">效果图：</h4>
<p><img src="https://img2024.cnblogs.com/blog/3714495/202512/3714495-20251221195154437-1018601653.png"></p>
<h1 id="任务二非遗项目详情页">任务二：非遗项目详情页</h1>
<h2 id="核心功能-1">核心功能</h2>
<ul>
<li>非遗项目详细信息展示</li>
<li>多媒体内容(图片、视频)呈现</li>
<li>相关项目智能推荐</li>
</ul>
<h2 id="技术实现要点">技术实现要点</h2>
<h3 id="1-内容布局设计">1. 内容布局设计</h3>
<ul>
<li>采用网格系统实现多列布局</li>
<li>侧边栏展示项目基本信息</li>
<li>主内容区呈现详细介绍文本</li>
</ul>
<h3 id="2-多媒体处理">2. 多媒体处理</h3>
<ul>
<li>图片懒加载与悬停效果</li>
<li>视频文件动态检测与播放支持</li>
<li>响应式媒体容器适配不同尺寸</li>
</ul>
<h3 id="3-首字母装饰效果">3. 首字母装饰效果</h3>
<ul>
<li>利用CSS伪元素实现首字母特殊样式</li>
<li>结合书法字体突出文化特色</li>
</ul>
<h2 id="用户体验优化-1">用户体验优化</h2>
<ul>
<li>渐进式内容加载动画</li>
<li>响应式设计适配移动端</li>
<li>直观的导航和返回功能</li>
</ul>
<h4 id="部分代码-1">部分代码：</h4>
<details>
<summary>点击查看代码</summary>
<pre><code><div class="max-w-7xl mx-auto px-6 md:px-12 py-16 grid grid-cols-1 md:grid-cols-12 gap-12 relative z-10">
<aside class="md:col-span-3 md:border-r md:border-ink/10 md:pr-8 flex flex-col md:items-end text-right reveal active">
<div class="sticky top-32 flex flex-col items-end">
<div class="w-8 h-20 border border-cinnabar/30 rounded-full flex items-center justify-center py-2 mb-8 bg-paper transition-transform duration-500 hover:rotate-3 hover:border-cinnabar hover:shadow-sm">
<span class="writing-vertical text-cinnabar text-xs tracking-widest">{{ type }}</span>
</div>
<h1 class="hidden md:block writing-vertical text-5xl font-bold text-ink leading-loose h- text-left opacity-0 animate-fade-in-up delay-200" style="animation-fill-mode: forwards;">
{{ title }}
</h1>
<h1 class="md:hidden text-4xl font-bold text-ink mb-6 text-right animate-fade-in-up">
{{ title }}
</h1>
<div class="mt-8 space-y-4 text-sm text-ink-light font-serif opacity-0 animate-fade-in-up delay-300" style="animation-fill-mode: forwards;">
<p><span class="text-cinnabar">●</span> {{ province }}</p>
<p>编号：{{ num or '---' }}</p>
<p>{{ rx_time }} 公布</p>
</div>
</div>
</aside>
</code></pre>
</details>
<h4 id="完整代码-1">完整代码：</h4>
<p>https://gitee.com/kjmfzu/fzu_-kjm/blob/master/非遗万象图前端开发/ich_detail.html</p>
<h4 id="效果图-1">效果图：</h4>
<p><img src="https://img2024.cnblogs.com/blog/3714495/202512/3714495-20251221195914371-1969836588.png"></p>
<h1 id="任务三分类浏览功能ich_provincehtml-ich_statshtml-categoryhtml">任务三：分类浏览功能(ich_province.html, ich_stats.html, category.html)</h1>
<h2 id="核心功能-2">核心功能</h2>
<ul>
<li>按省份分类浏览非遗项目</li>
<li>数据统计可视化展示</li>
<li>分页导航系统</li>
</ul>
<h2 id="前端技术实现要点-1">前端技术实现要点</h2>
<h3 id="1-省份导航系统">1. 省份导航系统</h3>
<ul>
<li>实现侧边栏省份列表导航</li>
<li>当前省份高亮显示</li>
<li>分页功能实现</li>
</ul>
<h3 id="2-数据统计展示">2. 数据统计展示</h3>
<ul>
<li>集成ECharts实现数据可视化</li>
<li>柱状图展示省份项目分布</li>
<li>条形图展示类别分布情况</li>
</ul>
<h3 id="3-分页与排序">3. 分页与排序</h3>
<ul>
<li>实现服务端分页逻辑</li>
<li>排序算法优化展示效果</li>
<li>页面间导航链接处理</li>
</ul>
<h2 id="用户体验优化-2">用户体验优化</h2>
<ul>
<li>直观的数据可视化呈现</li>
<li>清晰的导航路径</li>
<li>响应式表格设计</li>
</ul>
<h4 id="部分代码-2">部分代码：</h4>
<details>
<summary>点击查看代码</summary>
<pre><code><div class="mt-8 grid grid-cols-1 lg:grid-cols-12 gap-6">
<aside class="lg:col-span-3 rounded-xl border border-ink/10 bg-paper/80 backdrop-blur p-5 h-fit">
<div class="text-sm font-bold text-ink">省份导航</div>
<div class="mt-3 space-y-1">
{% for name, cnt in province_list %}
<a class="block rounded-lg px-3 py-2 text-sm transition
{% if name == province %}bg-cinnabar/10 text-cinnabar font-bold{% else %}text-ink hover:bg-ink/5{% endif %}"
href="{{ url_for('ich_map.ich_province_page', province_name=name, page=current_page) }}">
<span>{{ name }}</span>
<span class="text-xs text-ink-light">（{{ cnt }}）</span>
</a>
{% endfor %}
</div>
<div class="mt-5 flex items-center justify-between text-xs text-ink-light">
{% if current_page > 1 %}
<a class="text-cinnabar hover:underline"
href="{{ url_for('ich_map.ich_province_page', province_name=province, page=current_page-1) }}">上一页</a>
{% else %}
<span class="opacity-40">上一页</span>
{% endif %}
<span>第 {{ current_page }} / {{ total_pages }} 页</span>
{% if current_page < total_pages %}
<a class="text-cinnabar hover:underline"
href="{{ url_for('ich_map.ich_province_page', province_name=province, page=current_page+1) }}">下一页</a>
{% else %}
<span class="opacity-40">下一页</span>
{% endif %}
</div>
</aside>
<div class="lg:col-span-9 space-y-6">
<div class="rounded-xl border border-ink/10 bg-paper/80 backdrop-blur p-6">
<div class="text-sm font-bold text-ink">省域画像</div>
<div class="mt-4 grid grid-cols-1 md:grid-cols-4 gap-4 text-sm">
<div class="rounded-lg bg-white/70 border border-ink/10 p-4">
<div class="text-ink-light text-xs">项目数量</div>
<div class="mt-2 text-2xl font-bold text-ink">{{ items|length }}</div>
</div>
<div class="rounded-lg bg-white/70 border border-ink/10 p-4">
<div class="text-ink-light text-xs">全国排名</div>
<div class="mt-2 text-2xl font-bold text-ink">{{ province_rank or "-" }}</div>
</div>
<div class="rounded-lg bg-white/70 border border-ink/10 p-4">
<div class="text-ink-light text-xs">占比</div>
<div class="mt-2 text-2xl font-bold text-ink">{{ "%.2f"|format(province_percent or 0) }}%</div>
</div>
<div class="rounded-lg bg-white/70 border border-ink/10 p-4">
<div class="text-ink-light text-xs">多样性指数</div>
<div class="mt-2 text-2xl font-bold text-ink">{{ "%.3f"|format(diversity_index or 0) }}</div>
</div>
</div>
</code></pre>
</details>
<h4 id="完整代码-2">完整代码：</h4>
<p>https://gitee.com/kjmfzu/fzu_-kjm/tree/master/非遗万象图前端开发</p>
<h4 id="效果图-2">效果图：</h4>
<p><img src="https://img2024.cnblogs.com/blog/3714495/202512/3714495-20251221201631267-744519966.png"></p>
<h1 id="任务四搜索功能">任务四：搜索功能</h1>
<h2 id="核心功能-3">核心功能</h2>
<ul>
<li>全局关键词搜索</li>
<li>搜索结果展示与排序</li>
<li>智能匹配算法</li>
</ul>
<h2 id="前端技术实现要点-2">前端技术实现要点</h2>
<h3 id="1-搜索算法优化">1. 搜索算法优化</h3>
<ul>
<li>标题精确匹配优先</li>
<li>标题包含次之</li>
<li>内容字段匹配最后</li>
</ul>
<h3 id="2-结果展示">2. 结果展示</h3>
<ul>
<li>卡片式布局展示搜索结果</li>
<li>关键信息高亮显示</li>
<li>无结果友好提示</li>
</ul>
<h3 id="3-前端交互">3. 前端交互</h3>
<ul>
<li>实时搜索反馈</li>
<li>搜索历史记录(可扩展)</li>
<li>快速返回导航</li>
</ul>
<h4 id="代码">代码：</h4>
<details>
<summary>点击查看代码</summary>
<pre><code>{% extends "base.html" %}
{% block title %}探索非遗{% endblock %}
{% block content %}
<section class="max-w-7xl mx-auto px-6 md:px-12 py-10">
<div class="flex items-end justify-between gap-6 flex-wrap">
<div>
<h1 class="text-3xl md:text-4xl font-bold text-ink tracking-wide">探索 · 非遗</h1>
<p class="text-ink-light mt-2 text-sm tracking-widest">按名称 / 省份 / 类别 / 内容检索</p>
</div>
<form class="w-full md:w-" method="get" action="{{ url_for('ich_search_page') }}">
<div class="flex gap-3">
<input
name="keyword"
value="{{ keyword }}"
class="flex-1 rounded-lg border border-ink/10 bg-paper/80 backdrop-blur px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-cinnabar/30"
placeholder="输入关键词，例如：剪纸 / 贵州 / 京剧…"
/>
<button class="rounded-lg bg-cinnabar text-white px-5 py-3 text-sm font-bold tracking-widest hover:bg-cinnabar/90">
搜索
</button>
</div>
</form>
</div>
{% if search_performed %}
<div class="mt-8 flex items-center justify-between text-sm text-ink-light">
<div>结果：<span class="text-ink font-bold">{{ results|length }}</span> 项</div>
<a class="text-cinnabar hover:underline" href="{{ url_for('ich_map.ich_map_page') }}">返回地图</a>
</div>
{% if results %}
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{% for item in results %}
<a href="{{ url_for('ich_map.ich_item_page', item_id=item.get('id')) }}"
class="group rounded-xl border border-ink/10 bg-paper/80 backdrop-blur p-5 hover:-translate-y-0.5 hover:shadow-lg transition">
<div class="flex items-start justify-between gap-3">
<h3 class="font-bold text-ink group-hover:text-cinnabar transition line-clamp-2">
{{ item.get('title') or '未命名' }}
</h3>
<span class="text- text-ink-light whitespace-nowrap">
{{ item.get('rx_time') or '' }}
</span>
</div>
<div class="mt-3 text-xs text-ink-light flex flex-wrap gap-x-3 gap-y-1">
<span>📍 {{ item.get('province') or '未知地区' }}</span>
<span>🏷️ {{ item.get('type') or '未分类' }}</span>
{% if item.get('cate') %}<span>· {{ item.get('cate') }}</span>{% endif %}
</div>
<p class="mt-4 text-sm text-ink-light leading-relaxed">
{{ (item.get('content') or '') | striptags | truncate(140, True) }}
</p>
</a>
{% endfor %}
</div>
{% else %}
<div class="mt-10 rounded-xl border border-ink/10 bg-paper/80 backdrop-blur p-10 text-center text-ink-light">
未找到匹配结果，换个关键词试试。
</div>
{% endif %}
{% else %}
<div class="mt-10 rounded-xl border border-ink/10 bg-paper/80 backdrop-blur p-10 text-center text-ink-light">
输入关键词开始检索。
</div>
{% endif %}
</section>
{% endblock %}
</code></pre>
</details>
<h4 id="效果图-3">效果图：</h4>
<p><img src="https://img2024.cnblogs.com/blog/3714495/202512/3714495-20251221202958710-798447055.png"></p>
<h1 id="任务五整体uiux优化">任务五：整体UI/UX优化</h1>
<h2 id="核心功能-4">核心功能</h2>
<ul>
<li>统一的设计语言和视觉风格</li>
<li>响应式导航系统</li>
<li>全局样式协调</li>
</ul>
<h2 id="前端技术实现要点-3">前端技术实现要点</h2>
<h3 id="1-设计系统建立">1. 设计系统建立</h3>
<ul>
<li>定义色彩体系(朱砂红、墨色等)</li>
<li>统一字体和排版规范</li>
<li>建立组件库(按钮、卡片等)</li>
</ul>
<h3 id="2-响应式导航">2. 响应式导航</h3>
<ul>
<li>移动端汉堡菜单</li>
<li>桌面端水平导航</li>
<li>悬停动效增强交互</li>
</ul>
<h3 id="3-全局样式协调">3. 全局样式协调</h3>
<ul>
<li>TailwindCSS定制配置</li>
<li>CSS变量统一管理</li>
<li>动画和过渡效果标准化</li>
</ul>
<h4 id="部分代码-3">部分代码：</h4>
<details>
<summary>点击查看代码</summary>
<pre><code> <nav class="fixed top-0 w-full z-50 bg-paper/90 backdrop-blur-md border-b border-ink/5 transition-all duration-500 animate-fade-in-up">
<div class="max-w-7xl mx-auto px-6 md:px-12">
<div class="flex items-center justify-between h-24">
<a href="{{ url_for('ich_map.ich_map_page') }}" class="group flex items-center gap-4">
<div class="w-12 h-12 border-2 border-cinnabar rounded-lg flex items-center justify-center relative overflow-hidden transition-transform duration-700 group-hover:rotate-12 shadow-sm">
<div class="absolute inset-0 bg-cinnabar opacity-0 group-hover:opacity-10 transition-opacity duration-500"></div>
<span class="text-cinnabar font-calligraphy text-2xl">非遗</span>
</div>
<div class="flex flex-col justify-center">
<span class="text-xl font-bold tracking- text-ink transition-colors group-hover:text-cinnabar">智图</span>
<span class="text- uppercase tracking- text-ink-light mt-0.5 font-sans opacity-60">ICH Digital</span>
</div>
</a>
<div class="hidden md:flex items-center space-x-12">
<a href="{{ url_for('ich_map.ich_map_page') }}" class="relative text-ink hover:text-cinnabar transition-colors duration-500 py-2 text-lg font-bold group">
全景地图
<span class="absolute -bottom-1 left-1/2 w-0 h- bg-cinnabar/50 transition-all duration-500 ease-out group-hover:w-2/3 group-hover:left-"></span>
</a>
<a href="{{ url_for('aimap_page') }}" class="relative text-ink hover:text-cinnabar transition-colors duration-500 py-2 text-lg font-bold group">
服饰·融创
<span class="absolute -bottom-1 left-1/2 w-0 h- bg-cinnabar/50 transition-all duration-500 ease-out group-hover:w-2/3 group-hover:left-"></span>
</a>
<a href="{{ url_for('ai_create.ai_create_page') }}" class="relative text-ink hover:text-cinnabar transition-colors duration-500 py-2 text-lg font-bold group">
灵感·工坊
<span class="absolute -bottom-1 left-1/2 w-0 h- bg-cinnabar/50 transition-all duration-500 ease-out group-hover:w-2/3 group-hover:left-"></span>
</a>
<a href="{{ url_for('analysis.endangered_page') }}" class="relative text-ink hover:text-cinnabar transition-colors duration-500 py-2 text-lg font-bold group">
濒危·抢救
<span class="absolute -bottom-1 left-1/2 w-0 h- bg-cinnabar/50 transition-all duration-500 ease-out group-hover:w-2/3 group-hover:left-"></span>
</a>
<a href="{{ url_for('virtual_cut_page') }}" class="relative text-ink hover:text-cinnabar transition-colors duration-500 py-2 text-lg font-bold group">
虚实·共剪
<span class="absolute -bottom-1 left-1/2 w-0 h- bg-cinnabar/50 transition-all duration-500 ease-out group-hover:w-2/3 group-hover:left-"></span>
</a>
<a href="{{ url_for('shadow_puppetry_page') }}" class="relative text-ink hover:text-cinnabar transition-colors duration-500 py-2 text-lg font-bold group">
光影·幕后
<span class="absolute -bottom-1 left-1/2 w-0 h- bg-cinnabar/50 transition-all duration-500 ease-out group-hover:w-2/3 group-hover:left-"></span>
</a>
<a href="{{ url_for('jingju_synthesis_page') }}" class="relative text-ink hover:text-cinnabar transition-colors duration-500 py-2 text-lg font-bold group">
梨园·传声
<span class="absolute -bottom-1 left-1/2 w-0 h- bg-cinnabar/50 transition-all duration-500 ease-out group-hover:w-2/3 group-hover:left-"></span>
</a>
</div>
<div></div>
</div>
</div>
</nav>
</code></pre>
</details>
<h4 id="完整代码-3">完整代码：</h4>
<p>https://gitee.com/kjmfzu/fzu_-kjm/blob/master/非遗万象图前端开发/base.html</p>
<h2 id="心得体会">心得体会：</h2>
<p>通过本次非遗数字化展示项目的前端开发实践，我深刻体会到了现代Web技术在传统文化传承中的重要作用。在实现地图浏览、项目详情展示、分类导航和搜索功能的过程中，我不仅巩固了HTML、CSS、JavaScript等前端基础知识，还学习了Vue.js状态管理和ECharts数据可视化等高级技术。</p>
<p>项目中最大的挑战是如何在保证功能完整性的同时，创造出富有文化韵味的用户体验。通过对非遗项目详情页的精心设计，实现了图片视频展示、首字母装饰等特色功能，让用户在获取信息的同时感受到传统文化的魅力。响应式设计确保了在各种设备上都能获得良好的浏览体验。</p>
<p>这次实践让我认识到，前端开发不仅是技术实现，更是艺术与技术的结合，需要不断学习新技术，提升用户体验。</p><br><br>
来源：https://www.cnblogs.com/KJMll/p/19379857
頁:
[1]