木子个人
仓库：MuZiCul/Farm_Color_Hot_Spring_Memo（原创）· 语言：JavaScript + Layui · 定位：游戏"农场彩色温泉"纯前端信息管理与攻略站
基于 Layui 开发的纯前端 Web 应用，用于展示和管理农场彩色温泉相关信息（商人信息、攻略指南、玩家数据）。所有数据存储在静态 JS 文件中，无需后端服务。
数据与渲染逻辑完全分离：
statics/js/
├── main.js # 主要交互逻辑与渲染入口
├── player-data.js # 玩家数据（经验区/金币区/熟练度）
├── merchant-data.js # 商人信息
├── guide-data.js # 攻略数据
├── guide-render.js # 攻略渲染
└── common.js # 通用功能
渲染流程：页面加载初始化数据 → guide-render.js 渲染攻略 → main.js 处理交互。
main.js）一键复制功能（用 document.execCommand 兼容旧浏览器）：
function copyText(text) {
const tempInput = document.createElement("input");
document.body.appendChild(tempInput);
tempInput.value = text;
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
// 使用 Layui 的提示组件反馈
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('已复制: ' + text, { time: 1000, icon: 1 });
});
}
智能备注分类（按关键词自动打标签，非常贴合社群使用习惯）：
function getNoteClass(note) {
if (note.includes('无需艾特') || note.includes('无需@')) {
return 'note-no-mention'; // 绿色：直接加好友即可
} else if (note.includes('请先艾特') || note.includes('艾特')
|| note.includes('@') || note.includes('戳')) {
return 'note-need-mention'; // 需先在群里 @ 对方
} else {
return 'note-default';
}
}
这个函数把"加好友要不要先 @ "的社群规则编码进了 UI 样式，是很接地气的产品设计——直接解决"加了好友半天不通过"的实际困扰。
动态渲染警告/更新日志：
function renderUpdates(containerId) {
const container = document.getElementById(containerId);
commonData.updates.forEach(update => {
const p = document.createElement('p');
p.className = 'update-info';
p.textContent = `${update.date} ${update.content}`;
container.appendChild(p);
});
}
经验区（加工/收获加成）、熟练度区（作物/动物/钓鱼）、金币区（每日拿取、水族箱效率、饵料价格、加工器容量）
project_root/
├── index.html # 主页面
├── favicon.ico
└── statics/
├── images/ # 图片资源
├── css/common.css # 通用样式
├── js/（main.js / *-data.js / guide-render.js / jquery.min.js）
└── layui/（css/layui.css、layui.js）
Layui + jQuery
这是我给游戏社群做的一个小工具，几点说明：
-data.js）与渲染（guide-render.js）分离，非技术成员也能改数据文件更新内容做小社群工具或个人知识库时，这种静态 + 数据驱动 + 零运维的做法可以照搬。