欢迎光临
我们一直在努力

工厂环境监测系统实战(六):系统 Logo 与品牌定制

前言

交付给不同客户时,系统需要支持品牌定制——左上角的 Logo 图片、页脚的公司名称、甚至菜单导航。本章介绍这些定制功能的实现。

动态 Logo 配置

数据库设计

Logo 信息存储在 SystemLogo 表中:

public class SystemLogo : AggregateRoot
{
public string SystemLogoName { get; set; } // Logo名称
public string SystemLogoImg { get; set; } // 图片路径
public bool IsEnable { get; set; } // 是否启用
public bool IsLogo { get; set; } // 是否为首页Logo
}

支持在数据库中存多条 Logo 记录,通过 IsLogo = true 标记当前生效的 Logo。

后端获取

// DataHelper.GetLogo()
public static string GetLogo()
{
var _systemLogoDataAppService = new SystemLogoAppService(new SystemLogoRepository());
var model = _systemLogoDataAppService.GetSystemLogoInfo();
// 查询条件: IsDeleted=false, IsEnable=true, IsLogo=true
return model?.SystemLogoImg ?? string.Empty;
}

视图渲染

<!– _Layout.cshtml –>
<div class="logo">
<a href="/Home/Index">
<img src="@DataHelper.GetLogo()" alt="" style="width:140px;height:40px;">
</a>
</div>

同时也保留了静态文件的方式(注释掉的代码),方便开发和快速切换:

@*<a href="/Home/Index"><img src="~/Content/images/logo.png" alt="" style="width:140px;height:40px;"></a>*@

管理后台

Logo 管理页面路径:/SystemLogo/SystemLogoList,支持:

  • 上传新 Logo 图片(存储在 ~/Uploads/Logo/ 目录)
  • 启用/禁用 Logo
  • 设置是否显示在首页

横版 Logo 生成

当 Logo 尺寸需要适配侧边栏(140×40 或自定义宽度)时,可以用 Python PIL 将圆形图标和公司名合成为横版图片:

from PIL import Image, ImageDraw, ImageFont
img = Image.open('logo_home.png')
size = min(img.size)
img_square = img.crop((0, 0, size, size)).resize((36, 36), Image.LANCZOS)
圆形遮罩
mask = Image.new('L', (36, 36), 0)
ImageDraw.Draw(mask).ellipse((0, 0, 36, 36), fill=255)
创建横版画布
result = Image.new('RGBA', (256, 44), (0, 0, 0, 0))
result.paste(img_square, (6, 4), mask)
添加公司名称
font = ImageFont.truetype('C:/Windows/Fonts/msyh.ttc', 15)
draw = ImageDraw.Draw(result)
draw.text((50, 10), '公司名称', fill=(255, 255, 255, 255), font=font)
result.save('logo.png')

页脚公司名称

页脚直接硬编码在 _Layout.cshtml 中:

<footer style="position:fixed; z-index:99999; height:50px;">
2024 &copy; 公司名称
</footer>

替换这里的文字即可修改全站页脚公司名。

小结

  • Logo 支持数据库动态管理,后台可随时更换
  • 同时保留静态文件模式用于快速调试
  • 页脚公司名修改简单直接

下一章介绍 Windows 服务和定时任务。


> 上一篇:第5章 — 工厂与设备管理 > 下一篇:第7章 — Windows服务与定时任务

赞(0)
未经允许不得转载:171主机测评 » 工厂环境监测系统实战(六):系统 Logo 与品牌定制
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址