本项目改编自“云商店应用库”中的“门户首页顶部导航栏添加当前日期”项目，原作者：王斌（上海）
原项目简介：门户首页顶部导航栏添加当前日期*备注：此思路可以适用于在门户首页右侧导航栏自定义添加内容，比如：当前日期、天气、股票形势、特别事项等

本项目为丸子对ecode组件重写ecodeSDK.overwriteClassFnQueueMapSet(name,option)的学习与尝试~

丸子近期较忙，暂不梳理该小项目过程，且暂不提供帮助，文中代码回复可见，有问题请留言或一起在下面讨论区交流。

<div className='ecode-new-popover-date'>{generatedGreeting}</div>

<marquee className='ecode-new-popover-date'>{generatedGreeting}</marquee>
//更花里胡哨的操作，请参考HTML marquee API~

一、项目介绍

1.介绍

这个组件通过复写 Ant Design 的 Popover 组件,实现在门户界面内根据时间显示随机问候语的功能，个性化交互场景增强用户体验。

2.特性

• 根据不同时间段,显示不同问候语
• 支持显示用户名,更个性化
• 不影响 Popover 原有功能
• 提供前置 CSS 样式,方便集成
• 代码开箱即用,可直接用于项目中

3.技术优势

• 通过组件复写方式扩展,无侵入
• 模块化代码,具有可扩展性
• 注释清晰,便于二次开发

4.总结

该组件让 OA 系统原有的门户首页顶部导航栏支持显示更友好的问候语,可以增加内部员工的亲和感和归属感。组件代码开箱即用,无侵入式集成,为 OA 系统提供了一个轻量级的用户体验优化方案。可以减少员工使用系统时的冷漠感,增强团队融洽度。

二、效果图

三、代码

代码中保留并沿用了原项目的所有变量名及元素等，强迫症请自行更改~

init.js（前置加载）

index.js

init.css（前置加载）

四、国际化实现示例

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);

[泛微ecode] 组件重写-门户首页顶部导航栏欢迎词 by https://oneszhang.com/archives/50.html