本文摘要
介绍泛微 Ecology 门户首页顶部导航栏欢迎词的 ecode 组件重写实现，借助 ecodeSDK 复写 Ant Design Popover，按不同时间段随机显示带用户名的问候语，并支持国际化、走马灯和实时时间。文中说明复写时需带避免循环的参数，适合想无侵入优化门户交互的开发者参考。
本项目改编自“云商店应用库”中的“门户首页顶部导航栏添加当前日期”项目，原作者：王斌（上海） 原项目简介：门户首页顶部导航栏添加当前日期*备注：此思路可以适用于在门户首页右侧导航栏自定义添加内容，比如：当前日期、天气、股票形势、特别事项等
本项目为丸子对ecode组件重写ecodeSDK.overwriteClassFnQueueMapSet(name,option)的学习与尝试~
丸子近期较忙，暂不梳理该小项目过程，且暂不提供帮助，文中代码回复可见，有问题请留言或一起在下面讨论区交流。
✅ 国际化欢迎词适配更新
2024年5月8日 12:04:14 更新添加国际化实现示例
现在，你可以对欢迎词进行国际化配置了
✅ 实现滚动走马灯播放公告？这样！
2024年7月3日 17:57:57 可以自行修改代码实现走马灯效果，兼容性未测试~
修改为：
✅ 显示实时时间 yyyy年mm月dd日 hh:mm:ss 星期x
2024年7月4日 08:56:34 增加新能力，显示实时时间
一、项目介绍
以下介绍内容为Claude 2 AI生成~
1.介绍
这个组件通过复写 Ant Design 的 Popover 组件,实现在门户界面内根据时间显示随机问候语的功能，个性化交互场景增强用户体验。
2.特性
- 根据不同时间段,显示不同问候语
- 支持显示用户名,更个性化
- 不影响 Popover 原有功能
- 提供前置 CSS 样式,方便集成
- 代码开箱即用,可直接用于项目中
3.技术优势
- 通过组件复写方式扩展,无侵入
- 模块化代码,具有可扩展性
- 注释清晰,便于二次开发
4.总结
该组件让 OA 系统原有的门户首页顶部导航栏支持显示更友好的问候语,可以增加内部员工的亲和感和归属感。组件代码开箱即用,无侵入式集成,为 OA 系统提供了一个轻量级的用户体验优化方案。可以减少员工使用系统时的冷漠感,增强团队融洽度。
二、效果图
三、代码
代码中保留并沿用了原项目的所有变量名及元素等，强迫症请自行更改~
init.js（前置加载）
[hide]
let enable = true;const NewPopover = (props)=>{ //此函数不允许写在复写方法内，会导致实例重复创建，也就是dimout不断执行 const acParams = { appId:'${appId}', //appId会自动识别 name:'NewPopover', //模块名称 isPage:false, //是否是路由页面 noCss:true, //是否禁止单独加载css，通常为了减少css数量，css默认前置加载 props }
const NewCom = props.Com; return window.comsMobx?ecodeSDK.getAsyncCom(acParams):(<NewCom {...props} />);}ecodeSDK.overwriteClassFnQueueMapSet('Popover',{ fn:(Com,newProps)=>{ if(!enable) return ; //总开关 if(newProps.overlayClassName !== "e9header-account-overlay") return; if(newProps._noOverwrite) return ; newProps.Com = Com; //如果需要原组件，可带上 return { com:NewPopover, props:newProps }; }});[/hide]
index.js
[hide]
const { Popover } = antd;
class NewPopover extends React.Component { constructor(props) { //初始化，固定语法 super(props); this.state = {} }
getGreeting() { const { username } = JSON.parse(localStorage.getItem("theme-account")); const currentHour = new Date().getHours(); let greetingCategory = "";
if (currentHour >= 0 && currentHour < 5) { greetingCategory = "night"; } else if (currentHour >= 5 && currentHour < 6) { greetingCategory = "earlyMorning"; } else if (currentHour >= 6 && currentHour < 12) { greetingCategory = "morning"; } else if (currentHour >= 12 && currentHour < 14) { greetingCategory = "noon"; } else if (currentHour >= 14 && currentHour < 19) { greetingCategory = "afternoon"; } else if (currentHour >= 19 && currentHour < 21) { greetingCategory = "dusk"; } else if (currentHour >= 21 && currentHour < 24) { greetingCategory = "evening"; }
// Choose a random greeting from the appropriate category const greetings = greetingsData["time_based"][greetingCategory]; const greeting = greetings[Math.floor(Math.random() * greetings.length)];
return greeting.replace("{username}", username); }
render() { const generatedGreeting = this.getGreeting(); let newProps = {...this.props}; //复写组件的时候，必须带上_noOverwrite参数，避免被复写的组件又被复写导致死循环 return ( <div className='ecode-new-popover'> <Popover {...newProps} _noOverwrite /> <div className='ecode-new-popover-date'>{generatedGreeting}</div> </div> ) }}
const greetingsData = { "time_based": { "night": [ "凌晨好,{username},夜深了,早些歇息吧。", "深夜时分,{username},注意保重身体哦。" ], "earlyMorning": [ "早上好,{username}!美好的一天从早安开始!", "清晨好,{username},早起的鸟儿有虫吃呢。", "早晨好,{username}!希望您拥有一个精神饱满的好开始!" ], "morning": [ "上午好,{username}!祝您工作顺利,一切井井有条!", "上午好,{username}!希望您的工作有个好开始!", "上午好,{username},工作顺利,万事亨通!" ], "noon": [ "中午好,{username}!无论多忙,希望你能有个温暖的下午!", "中午好,{username}!午后是提升工作效率的黄金时间!", ], "afternoon": [ "下午好,{username},午后是提升工作效率的黄金时间!", "下午好,{username},状态好的时候,工作效率更高!" ], "dusk": [ "傍晚好,{username}!一天的工作即将结束,祝您心情愉快!", "傍晚好,{username}!工作的尾声,请注意劳逸结合!", "傍晚好,{username},今天的工作完成的怎么样?", "傍晚时分,{username},早些歇息,迎接美好的夜晚。" ], "evening": [ "晚上好,{username},今天过得开心吗?", "晚上好,{username}!祝您晚间愉快,早些歇息吧!", ] }}//发布模块ecodeSDK.setCom('${appId}','NewPopover',NewPopover);[/hide]
init.css（前置加载）
[hide]
.ecode-new-popover { position: relative;}.ecode-new-popover-date { position: absolute; right: 260px; width: 300px; height: 54px; line-height: 54px; text-align: center; top: 0;}[/hide]
四、国际化实现示例
getGreeting方法的修改
getGreeting() { const { username, userLanguage } = JSON.parse(localStorage.getItem("theme-account")); const currentHour = new Date().getHours(); let greetingCategory = "";
if (currentHour >= 0 && currentHour < 5) { greetingCategory = "night"; } else if (currentHour >= 5 && currentHour < 6) { greetingCategory = "earlyMorning"; } else if (currentHour >= 6 && currentHour < 12) { greetingCategory = "morning"; } else if (currentHour >= 12 && currentHour < 14) { greetingCategory = "noon"; } else if (currentHour >= 14 && currentHour < 19) { greetingCategory = "afternoon"; } else if (currentHour >= 19 && currentHour < 21) { greetingCategory = "dusk"; } else if (currentHour >= 21 && currentHour < 24) { greetingCategory = "evening"; }
// 根据用户语言偏好选择对应的问候语数据 const greetings = greetingsData[userLanguage][greetingCategory]; const greeting = greetings[Math.floor(Math.random() * greetings.length)];
return greeting.replace("{username}", username);}greetingsData数据的修改
const greetingsData = { "7": { // 简体中文 "night": [ "凌晨好，{username}，夜深了，早些歇息吧。", "深夜时分，{username}，注意保重身体哦。" ], "earlyMorning": [ "早上好，{username}！美好的一天从早安开始！", "清晨好，{username}，早起的鸟儿有虫吃呢。", "早晨好，{username}！希望您拥有一个精神饱满的好开始！" ], // 其他时间段的问候语 }, "8": { // 英文 "night": [ "Good night, {username}. It's late, get some rest.", "Late at night, {username}. Take care of yourself." ], "earlyMorning": [ "Good morning, {username}! A great day starts with a good morning!", "Good morning, {username}. The early bird catches the worm.", "Good morning, {username}! Wishing you a vibrant start!" ], // 其他时间段的问候语 }, "9": { // 繁體中文 "night": [ "凌晨好，{username}，夜深了，早些歇息吧。", "深夜時分，{username}，注意保重身體哦。" ], "earlyMorning": [ "早上好，{username}！美好的一天從早安開始！", "清晨好，{username}，早起的鳥兒有蟲吃呢。", "早晨好，{username}！希望您擁有一個精神飽滿的好開始！" ], // 其他时间段的问候语 }};五、显示实时时间
如果你想右上角实时显示时间，那你可以这样做：
index.js替换为以下内容
index.js
const { Popover } = antd;
class NewPopover extends React.Component { constructor(props) { super(props); this.state = { currentDateTime: this.getCurrentDateTime() } }
componentDidMount() { this.intervalId = setInterval(() => { this.setState({ currentDateTime: this.getCurrentDateTime() }); }, 1000); // 每秒更新一次 }
componentWillUnmount() { clearInterval(this.intervalId); }
getCurrentDateTime() { const now = new Date(); const year = now.getFullYear(); const month = String(now.getMonth() + 1).padStart(2, '0'); const date = String(now.getDate()).padStart(2, '0'); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); const daysOfWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]; const dayOfWeek = daysOfWeek[now.getDay()];
return `${year}年${month}月${date}日 ${hours}:${minutes}:${seconds} ${dayOfWeek}`; }
render() { const { currentDateTime } = this.state; let newProps = { ...this.props }; return ( <div className='ecode-new-popover'> <Popover {...newProps} _noOverwrite /> <div className='ecode-new-popover-date'>{currentDateTime}</div> </div> ) }}
//发布模块ecodeSDK.setCom('${appId}','NewPopover',NewPopover);