《完美世界》txt全集,君子以泽

使用 HTML + JavaScript 實(shí)現(xiàn)仿微信桌面聊天界面（附完整代碼）

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

freeflydom

2025年8月8日 10:53 本文熱度 649

搭建基礎(chǔ)的HTML結(jié)構(gòu)和樣式框架

頁(yè)面居中布局

為了讓整個(gè)應(yīng)用在頁(yè)面中居中顯示，我們對(duì) html 和 body 元素進(jìn)行了如下設(shè)置：通過Flex布局，實(shí)現(xiàn)了水平和垂直居中，同時(shí)設(shè)置了背景色為灰色，模擬桌面應(yīng)用程序的環(huán)境。

html,body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d9d9d9;
    margin: 0 auto;
}

主容器設(shè)計(jì)

.container 類定義了應(yīng)用的主容器，這個(gè)容器具有以下特點(diǎn)：

固定尺寸：910x640像素（微信桌面版的大致尺寸）
白色背景，與灰色頁(yè)面背景形成對(duì)比
添加了陰影效果，增強(qiáng)立體感
使用Flex布局，便于內(nèi)部組件排列
圓角設(shè)計(jì)，提升視覺效果

.container {
    width: 910px;
    height: 640px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    display: flex;
    border-radius: 4px;
    position: relative;
}

添加側(cè)邊功能欄

引入圖標(biāo)庫(kù)

首先，我們?cè)?中引入了 Font Awesome 圖標(biāo)庫(kù)，這將為我們提供豐富的圖標(biāo)資源，用于美化界面元素。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>

新增側(cè)邊欄結(jié)構(gòu)

在 .container 中，添加功能區(qū)（sidebar）。它包含四個(gè)圖標(biāo)，分別代表：聊天會(huì)話（fa-comments）、群聊/聯(lián)系人（fa-user-group）、文件管理（fa-folder）、設(shè)置（fa-gear）。

<div class="sidebar">
  <div class="sidebar-item active"><i class="fa-solid fa-comments"></i></div>
  <div class="sidebar-item"><i class="fa-solid fa-user-group"></i></div>
  <div class="sidebar-item"><i class="fa-solid fa-folder"></i></div>
  <div class="sidebar-item"><i class="fa-solid fa-gear"></i></div>
</div>

側(cè)邊欄樣式設(shè)計(jì)

側(cè)邊欄整體樣式：寬度為60px，深灰色背景（#2e2e2e），使用Flex布局實(shí)現(xiàn)垂直排列，并通過 padding-top 在頂部留出20px的間距。

.sidebar {
    width: 60px;
    background-color: #2e2e2e;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

功能項(xiàng)樣式：每個(gè)功能項(xiàng)都是40x40像素的正方形，具有淺灰色背景（#3a3a3a）、圓角設(shè)計(jì)、居中顯示圖標(biāo)、鼠標(biāo)懸停時(shí)顯示手型光標(biāo)、添加了背景色過渡動(dòng)畫效果、圖標(biāo)為白色、大小20px。

.sidebar-item {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
    background-color: #3a3a3a;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
    color: #fff;
    font-size: 20px;
}

交互效果：鼠標(biāo)懸停時(shí)，背景色變?yōu)楦鼫\的灰色（#4a4a4a）；當(dāng)前激活項(xiàng)（active類）背景色為微信標(biāo)志性的綠色（#07c160）

.sidebar-item:hover {
    background-color: #4a4a4a;
}
.sidebar-item.active {
    background-color: #07c160;
}

實(shí)現(xiàn)會(huì)話列表區(qū)域

新增會(huì)話列表結(jié)構(gòu)

在 .container 中添加了會(huì)話列表區(qū)域，包含兩個(gè)主要部分：頂部搜索框區(qū)域（.chat-list-header）、聊天會(huì)話項(xiàng)列表（多個(gè) .chat-item）。

<div class="chat-list">
  <div class="chat-list-header">
    <div class="search-box">
      <input type="text" placeholder="搜索">
    </div>
  </div>
  <div class="chat-item active">
    <div class="avatar">A</div>
    <div class="chat-info">
      <div class="chat-name">Alice</div>
      <div class="chat-preview">你好，最近怎么樣？</div>
    </div>
  </div>
  <!-- 更多聊天項(xiàng)... -->
</div>

會(huì)話列表樣式設(shè)計(jì)

會(huì)話列表容器：寬度為240px，淺灰色背景（#f5f5f5），右側(cè)添加了分隔線，使用Flex布局實(shí)現(xiàn)垂直排列。

.chat-list {
    width: 240px;
    background-color: #f5f5f5;
    border-right: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}

搜索框區(qū)域：高60px，包含一個(gè)輸入框用于搜索會(huì)話。輸入框去除了默認(rèn)邊框和輪廓，提供簡(jiǎn)潔的搜索體驗(yàn)。

.chat-list-header {
    height: 60px;
    background-color: #f5f5f5;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e0e0e0;
}
.search-box {
    flex: 1;
    height: 35px;
    background-color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
}
.search-box input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 14px;
}

聊天會(huì)話項(xiàng)：每個(gè)聊天項(xiàng)高70px，包含頭像和聊天信息。交互效果：鼠標(biāo)懸停時(shí)背景色變淺、激活項(xiàng)具有更深的背景色。

.chat-item {
    height: 70px;
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    transition: background-color 0.3s;
}
.chat-item:hover {
    background-color: #e8e8e8;
}
.chat-item.active {
    background-color: #e0e0e0;
}

頭像和信息展示：頭像使用

Monaco, Consolas, "Courier New", monospace; position: relative; overflow: auto; line-height: 1.75; color: rgb(51, 51, 51);">.avatar { class="hljs-attribute" style="color: navy;">width: 45px; class="hljs-attribute" style="color: navy;">height: 45px; class="hljs-attribute" style="color: navy;">background-color: #07c160; class="hljs-attribute" style="color: navy;">border-radius: 4px; class="hljs-attribute" style="color: navy;">margin-right: 10px; class="hljs-attribute" style="color: navy;">display: flex; class="hljs-attribute" style="color: navy;">align-items: center; class="hljs-attribute" style="color: navy;">justify-content: center; class="hljs-attribute" style="color: navy;">color: #fff; class="hljs-attribute" style="color: navy;">font-weight: bold; s-selector-class">.chat-info { class="hljs-attribute" style="color: navy;">flex: 1; class="hljs-attribute" style="color: navy;">overflow: hidden; s-selector-class">.chat-name { class="hljs-attribute" style="color: navy;">font-size: 14px; class="hljs-attribute" style="color: navy;">font-weight: bold; class="hljs-attribute" style="color: navy;">margin-bottom: 4px; class="hljs-attribute" style="color: navy;">color: #333; s-selector-class">.chat-preview { class="hljs-attribute" style="color: navy;">font-size: 14px; class="hljs-attribute" style="color: navy;">color: #999; class="hljs-attribute" style="color: navy;">white-space: nowrap; class="hljs-attribute" style="color: navy;">overflow: hidden; class="hljs-attribute" style="color: navy;">text-overflow: ellipsis; style="line-height: 34px; margin-top: 35px; margin-bottom: 10px; padding-bottom: 14px; font-size: 22px; border-bottom: 1px solid rgb(236, 236, 236); color: rgb(37, 41, 51); font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial; text-wrap-mode: wrap; background-color: rgb(255, 255, 255);">實(shí)現(xiàn)聊天主區(qū)域

`新增聊天主區(qū)域結(jié)構(gòu)`

在 .container 中添加了聊天主區(qū)域，包含三個(gè)部分：

聊天頭部（.chat-header）- 顯示當(dāng)前聊天對(duì)象名稱
消息顯示區(qū)域（.chat-messages）- 顯示聊天記錄
消息輸入?yún)^(qū)域（.chat-input）- 用戶輸入和發(fā)送消息

<div class="chat-area">
  <div class="chat-header">
    <div class="chat-title">Alice</div>
    <div class="chat-actions">
      <i class="fa-solid fa-ellipsis-h action-btn"></i>
    </div>
  </div>
  <div class="chat-messages">
    <div class="message received">
      <div class="avatar">A</div>
      <div class="message-bubble">你好，最近怎么樣？</div>
    </div>
     <!-- 更多消息... -->
  </div>
  <div class="chat-input">
    <div class="input-tools">
      <i class="fa-regular fa-face-smile tool-btn"></i>
      <i class="fa-solid fa-paperclip tool-btn"></i>
      <i class="fa-solid fa-image tool-btn"></i>
    </div>
    <div class="input-box">
      <textarea placeholder="輸入消息..."></textarea>
      <button class="send-btn">發(fā)送</button>
    </div>
  </div>
</div>

`聊天主區(qū)域樣式設(shè)計(jì)`

聊天區(qū)域容器：占據(jù)了剩余的610px寬度，使用Flex布局實(shí)現(xiàn)垂直排列。


.chat-area {
    width: 610px;
    display: flex;
    flex-direction: column;
}
聊天頭部：高60px，顯示當(dāng)前聊天對(duì)象名稱，右側(cè)包含操作按鈕（目前只有一個(gè)省略號(hào)按鈕）；按鈕具有懸停效果，顏色會(huì)變?yōu)槲⑿啪G。
.chat-header {
    height: 60px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
.chat-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
.chat-actions {
    display: flex;
    gap: 15px;
}
.action-btn {
    cursor: pointer;
    color: #666;
    font-size: 18px;
    transition: color 0.3s;
}
.action-btn:hover {
    color: #07c160;
}
消息顯示區(qū)域：使用滾動(dòng)條處理大量消息；接收消息（.received）左對(duì)齊，使用白色氣泡；發(fā)送消息（.sent）右對(duì)齊，使用綠色氣泡（#95ec69）；消息氣泡最大寬度為60%，避免過寬。
.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #f5f5f5;
}
.message {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
}
.message.sent {
    justify-content: flex-end;
}
.message-bubble {
    max-width: 60%;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
}
.message.received .message-bubble {
    background-color: #fff;
    margin-left: 10px;
}
.message.sent .message-bubble {
    background-color: #95ec69;
    margin-right: 10px;
}
消息輸入?yún)^(qū)域包含：
工具按鈕：表情、附件、圖片等（目前僅添加圖標(biāo)）
文本輸入框：多行文本域，支持換行輸入
發(fā)送按鈕：綠色按鈕，具有懸停效果
.chat-input {
    height: 120px;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.input-tools {
    height: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.tool-btn {
    cursor: pointer;
    color: #666;
    font-size: 18px;
    transition: .3s;
}
.tool-btn:hover {
    color: #07c160;
}
.input-box {
    flex: 1;
    display: flex;
    gap: 10px;
}
.input-box textarea {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-size: 14px;
    padding: 5px;
}
.send-btn {
    width: 80px;
    height: 30px;
    background-color: #07c160;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    align-self: flex-end;
    transition: background-color 0.3s;
}
.send-btn:hover {
    background-color: #06a050;
}
添加基礎(chǔ)交互功能
新增JavaScript交互代碼
// 模擬發(fā)送消息
document.querySelector('.send-btn').addEventListener('click', function() {
  const textarea = document.querySelector('.input-box textarea');
  const message = textarea.value.trim();
  if (message) {
    const messagesContainer = document.querySelector('.chat-messages');
    const newMessage = document.createElement('div');
    newMessage.className = 'message sent';
    newMessage.innerHTML = `<div class="message-bubble">${message}</div>`;
    messagesContainer.appendChild(newMessage);
    textarea.value = '';
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  }
});
// 回車發(fā)送消息
document.querySelector('.input-box textarea').addEventListener('keypress', function(e) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    document.querySelector('.send-btn').click();
  }
});
功能實(shí)現(xiàn)解析
發(fā)送按鈕點(diǎn)擊事件：為發(fā)送按鈕（.send-btn）添加了點(diǎn)擊事件監(jiān)聽器，當(dāng)用戶點(diǎn)擊發(fā)送按鈕時(shí)會(huì)觸發(fā)消息發(fā)送邏輯。
document.querySelector('.send-btn').addEventListener('click', function() {
  // ...
});
消息發(fā)送處理邏輯：首先獲取輸入框中的文本內(nèi)容，并去除首尾空白字符。只有當(dāng)消息內(nèi)容不為空時(shí)才進(jìn)行后續(xù)處理。
const textarea = document.querySelector('.input-box textarea');
const message = textarea.value.trim();
if (message) {
  // 處理消息發(fā)送
}
創(chuàng)建并添加新消息：當(dāng)有有效消息時(shí)，獲取消息顯示區(qū)域（.chat-messages），創(chuàng)建新的消息元素，并設(shè)置類名為 message sent（表示發(fā)送的消息），設(shè)置消息內(nèi)容為用戶輸入的文本，將新消息添加到消息顯示區(qū)域。
const messagesContainer = document.querySelector('.chat-messages');
const newMessage = document.createElement('div');
newMessage.className = 'message sent';
newMessage.innerHTML = `<div class="message-bubble">${message}</div>`;
messagesContainer.appendChild(newMessage);
清空輸入框并滾動(dòng)到最新消息，確保最新消息可見。
textarea.value = '';
messagesContainer.scrollTop = messagesContainer.scrollHeight;
回車發(fā)送消息功能：為文本輸入框添加了鍵盤事件監(jiān)聽器，當(dāng)用戶按下回車鍵（但不按Shift鍵）時(shí)阻止默認(rèn)行為（避免在文本框中插入換行符），觸發(fā)發(fā)送按鈕的點(diǎn)擊事件，實(shí)現(xiàn)快速發(fā)送消息。
完整代碼
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿微信桌面聊天界面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html,body {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #d9d9d9;
            margin: 0 auto;
        }
        .container {
            width: 910px;
            height: 640px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            display: flex;
            border-radius: 4px;
            position: relative;
        }
        /* 功能區(qū)樣式 */
        .sidebar {
            width: 60px;
            background-color: #2e2e2e;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 20px;
        }
        .sidebar-item {
            width: 40px;
            height: 40px;
            margin-bottom: 20px;
            background-color: #3a3a3a;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s;
            color: #fff;
            font-size: 20px;
        }
        .sidebar-item:hover {
            background-color: #4a4a4a;
        }
        .sidebar-item.active {
            background-color: #07c160;
        }
        /* 會(huì)話列表樣式 */
        .chat-list {
            width: 240px;
            background-color: #f5f5f5;
            border-right: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
        }
        .chat-list-header {
            height: 60px;
            background-color: #f5f5f5;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #e0e0e0;
        }
        .search-box {
            flex: 1;
            height: 35px;
            background-color: #fff;
            border-radius: 4px;
            display: flex;
            align-items: center;
            padding: 0 10px;
            border: 1px solid #e0e0e0;
        }
        .search-box input {
            border: none;
            outline: none;
            flex: 1;
            font-size: 14px;
        }
        .chat-item {
            height: 70px;
            padding: 10px;
            display: flex;
            align-items: center;
            cursor: pointer;
            border-bottom: 1px solid #e0e0e0;
            transition: background-color 0.3s;
        }
        .chat-item:hover {
            background-color: #e8e8e8;
        }
        .chat-item.active {
            background-color: #e0e0e0;
        }
        .avatar {
            width: 45px;
            height: 45px;
            background-color: #07c160;
            border-radius: 4px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: bold;
        }
        .chat-info {
            flex: 1;
            overflow: hidden;
        }
        .chat-name {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 4px;
            color: #333;
        }
        .chat-preview {
            font-size: 14px;
            color: #999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .chat-area {
            width: 610px;
            display: flex;
            flex-direction: column;
        }
        .chat-header {
            height: 60px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }
        .chat-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        .chat-actions {
            display: flex;
            gap: 15px;
        }
        .action-btn {
            cursor: pointer;
            color: #666;
            font-size: 18px;
            transition: color 0.3s;
        }
        .action-btn:hover {
            color: #07c160;
        }
        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #f5f5f5;
        }
        .message {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
        }
        .message.sent {
            justify-content: flex-end;
        }
        .message-bubble {
            max-width: 60%;
            padding: 10px 15px;
            border-radius: 4px;
            font-size: 14px;
            line-height: 1.5;
        }
        .message.received .message-bubble {
            background-color: #fff;
            margin-left: 10px;
        }
        .message.sent .message-bubble {
            background-color: #95ec69;
            margin-right: 10px;
        }
        .chat-input {
            height: 120px;
            background-color: #fff;
            border-top: 1px solid #e0e0e0;
            padding: 10px;
            display: flex;
            flex-direction: column;
        }
        .input-tools {
            height: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .tool-btn {
            cursor: pointer;
            color: #666;
            font-size: 18px;
            transition: .3s;
        }
        .tool-btn:hover {
            color: #07c160;
        }
        .input-box {
            flex: 1;
            display: flex;
            gap: 10px;
        }
        .input-box textarea {
            flex: 1;
            border: none;
            outline: none;
            resize: none;
            font-size: 14px;
            padding: 5px;
        }
        .send-btn {
            width: 80px;
            height: 30px;
            background-color: #07c160;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            align-self: flex-end;
            transition: background-color 0.3s;
        }
        .send-btn:hover {
            background-color: #06a050;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 功能區(qū) -->
      <div class="sidebar">
        <div class="sidebar-item active"><i class="fa-solid fa-comments"></i></div>
        <div class="sidebar-item"><i class="fa-solid fa-user-group"></i></div>
        <div class="sidebar-item"><i class="fa-solid fa-folder"></i></div>
        <div class="sidebar-item"><i class="fa-solid fa-gear"></i></div>
      </div>
      <!-- 會(huì)話列表 -->
      <div class="chat-list">
        <div class="chat-list-header">
          <div class="search-box">
            <input type="text" placeholder="搜索">
          </div>
        </div>
        <div class="chat-item active">
          <div class="avatar">A</div>
          <div class="chat-info">
            <div class="chat-name">Alice</div>
            <div class="chat-preview">你好，最近怎么樣？</div>
          </div>
        </div>
        <div class="chat-item">
          <div class="avatar">B</div>
          <div class="chat-info">
            <div class="chat-name">Bob</div>
            <div class="chat-preview">明天見！</div>
          </div>
        </div>
        <div class="chat-item">
          <div class="avatar">C</div>
          <div class="chat-info">
            <div class="chat-name">Carol</div>
            <div class="chat-preview">文件已經(jīng)發(fā)給你了</div>
          </div>
        </div>
      </div>
      <!-- 聊天區(qū) -->
      <div class="chat-area">
        <div class="chat-header">
          <div class="chat-title">Alice</div>
          <div class="chat-actions">
            <i class="fa-solid fa-ellipsis-h action-btn"></i>
          </div>
        </div>
        <div class="chat-messages">
          <div class="message received">
            <div class="avatar">A</div>
            <div class="message-bubble">你好，最近怎么樣？</div>
          </div>
          <div class="message sent">
            <div class="message-bubble">我很好，謝謝！你呢？</div>
          </div>
          <div class="message received">
            <div class="avatar">A</div>
            <div class="message-bubble">我也挺好的，周末有空一起喝咖啡嗎？</div>
          </div>
          <div class="message sent">
            <div class="message-bubble">好啊，周六下午怎么樣？</div>
          </div>
        </div>
        <div class="chat-input">
          <div class="input-tools">
            <i class="fa-regular fa-face-smile tool-btn"></i>
            <i class="fa-solid fa-paperclip tool-btn"></i>
            <i class="fa-solid fa-image tool-btn"></i>
          </div>
          <div class="input-box">
            <textarea placeholder="輸入消息..."></textarea>
            <button class="send-btn">發(fā)送</button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    // 模擬發(fā)送消息
    document.querySelector('.send-btn').addEventListener('click', function() {
      const textarea = document.querySelector('.input-box textarea');
      const message = textarea.value.trim();
      if (message) {
        const messagesContainer = document.querySelector('.chat-messages');
        const newMessage = document.createElement('div');
        newMessage.className = 'message sent';
        newMessage.innerHTML = `<div class="message-bubble">${message}</div>`;
        messagesContainer.appendChild(newMessage);
        textarea.value = '';
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
      }
    });
    // 回車發(fā)送消息
    document.querySelector('.input-box textarea').addEventListener('keypress', function(e) {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        document.querySelector('.send-btn').click();
      }
    });
  </script>
</html>
轉(zhuǎn)自https://juejin.cn/post/7535350468588683318

該文章在 2025/8/8 10:53:28 編輯過

關(guān)鍵字查詢

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。