本系列文章詳細介紹使用 .net core 和 WPF 開發 升訊威線上客服與營銷系統 的過程。本產品已經成熟穩定並投入商用。 線上演示環境：[https://kf-m.shengxunwei.com](https://kf-m.shengxunwei.com) 注意：演示環境僅供演示交流與評估，不保證 7x24 小時可用。 [文章目錄列表請點選這裡](https://blog.shengxunwei.com/Home/Post/44a31a32-d4e1-4ddd-8526-8a2bcd2e22be) --- 這個系列的文章，是用來填我2015年挖的一個坑。2015年6月我發表過一篇文章“使用 WPF+ ASP.NET MVC 開發 線上客服系統（一）”，介紹了當時自己開發的客服系統概況，雖然當時系統的開發完成度已經很高，但因為工作等原因，後續的開發完善擱置了，文章也擱置了。直到後來 .net core 關注度的持續升溫，我也有了想抽空把系統撿起來，用 .net core 重構並好好完善使之能夠完全產品化的想法。 最近一段時間我慢慢完成了系統的重構和開發工作，使用 .net core 徹底重寫了整個後端，WPF 的客服端也經過了一定的優化和改善。工作小小告一段落，這個系列的文章也到了填坑的時候，時隔了五年，系統的設計和開發細節早已和當初有了很大不同，這次我將重頭開始，從系統的功能設計、技術架構、開發細節以及各個功能，詳細介紹開發實現的過程。在未來的系統開發和完善過程中，如果時間允許，我也會同步更新這一系列的文章進行介紹。 作為首篇文章，本文對產品的背景和功能做簡單的介紹。 2015年前後當時開發的初版，我使用了 ASP.NET MVC 做為後端，資料庫使用原生 ADO.NET 進行操作、WPF 做客服端，Web 訪客端使用原生 JavaScript 開發。為了使整個系統能夠向下相容，客服端 .net 框架使用的是 .net framework 3.5 ，可以相容 Windows XP SP2，Web 訪客端為了相容 IE6 ，也使用了許多比較麻煩的技術實現，說來話長，這次不展開說這方面的細節。 在這次重構的新版本放棄了對 Windows XP 和 IE6 的支援，後端使用 .net core 3.1 ，資料庫操作使用了 entity framework core。客服端依然是 WPF，基礎框架升級到了 .net framework 4.8 ，訪客端依然是原生 JavaScript，相容 IE8 以上瀏覽器。 另外相對於2015年的版本，這次重構我增加了一個 Web 後臺，使用 Vue 實現，把原先放在客服端的一些管理功能，改到了 Web 後臺中，例如：組織機構管理、客服管理、角色許可權管理、多站點管理等。 此外因為有了 Web 後臺，這次有興趣的朋友就可以自行註冊體驗了，當年的舊版本需要我手工開通，很是麻煩。 線上演示環境：[https://kf-m.shengxunwei.com](https://kf-m.shengxunwei.com) 注意：演示環境僅供演示交流與評估，不保證 7x24 小時可用。 以上所有設計開發工作都是我自己一個人利用業餘時間完成的，從系統後臺，到 WPF 客服端、Web 前端、Web 管理端，用了很多的時間。功能更新補充的速度不會很快，因為精力實在有限，而且由於系統使用場景的特殊性，始終把穩定性放在第一位，在這方面也花了很多時間。 --- 這個系列的文章主要圍繞產品設計和技術開發兩方面來講，本文作為第一篇，介紹完背景，下面簡單介紹一下目前實現的功能。 ### 客服功能： 1. 訪客來訪提醒 當有訪客到達網站時，訪客端會即時彈出提醒視窗，客服可以快速瞭解訪客的地域、來源、關鍵詞、來訪次數、歷史對話次數及其進入瀏覽的網頁。 2. 訪客型別識別 系統自動識別訪客來源渠道（PC、手機、微信），自動識別新舊訪客以及網站會員使用者功能，便於訪客管理，提高服務效率。 3. 訪客來源跟蹤 客服可以瞭解訪客的所在地域、來源、關鍵詞、來訪次數、歷史對話次數及瀏覽的網頁。 4. 訪客訊息預知 通過訊息預知功能，客服人員可提早一步瞭解訪客正在輸入的內容，瞭解訪客的需求及想法，方便客服人員能更快速、更詳細的為訪客服務，提高工作效率和質量。 5. 線上圖文會話 客服和訪客雙方對話視窗都提供多樣式對話體驗，文字對話為主，檔案傳送、表情、連結為輔。支援客服人員和網站訪客雙向檔案傳輸功能。 6. 常用語/常用檔案 可對客服使用的常用訊息、常用連結、常用檔案進行管理和維護，便於客服在交談時直接呼叫此類檔案進行快捷回覆。 7. 轉接客服 當客服人員在遇到解決不了的問題，客服人員可將該對話訪客轉接給其他客服人員，為企業線上諮詢提供了便捷性。 8. 遮蔽惡意訪客 客服人員通過它可對惡意騷擾的訪客進行遮蔽，使客服不再受到此類訪客的騷擾。 9. 會話歷史記錄 客服人員可以查詢會話歷史記錄，支援根據時間段和關鍵詞查詢。 10. 實時監控 有許可權的管理人員可以實時監控所有客服的實時聊天內容和狀態。 ### 訪客功能： 1. 網頁即時通訊 訪客無需安裝外掛即可發起諮詢，訪客可隨時通過個人電腦、手機、平板等裝置進行線上商務溝通，方便快捷。 2. 邀請視窗 企業可以融合網站風格、形象定位、使用者特點等因素，自主設定個性化、特色的邀請視窗樣式。 3. 諮詢圖示 在網站上顯示一個浮動的諮詢圖示，支援自定義風格主題。 4. 訪客對話視窗 訪客對話視窗可設定多種顏色風格，視窗標題、客服資料、歡迎語、公司名片、公告。 5. 線上圖文會話 客服和訪客雙方對話視窗都提供多樣式對話體驗，文字對話為主，檔案傳送、表情、連結為輔。支援客服人員和網站訪客雙向檔案傳輸功能。 6. 直接對話視窗 客服可對線上訪客發起主動對話。 ## 實現效果截圖： ### 訪客端  左下角的浮動圖示，可以根據是否有客服線上顯示不同的圖片，當沒有客服線上時，將引導訪客進入留言頁面。 右下角的區域可以展開，直接在網站上邊瀏覽邊交流，不用開啟新的瀏覽器視窗。  訪客也可以開啟單獨的瀏覽器視窗進行交流。  ### 客服端 #### 主介面  客服端介面目前初步的設計分為三大區域： * 左邊是會話區，根據訪客的不同狀態在樹型結構中顯示。 * 中間是會話區，除了聊天會話相關的功能之外，還能顯示出訪客的基本資訊。 * 右側為輔助功能區，能夠顯示訪客的瀏覽訪問網站時的軌跡，過去的聊天曆史記錄；以及客服的快捷回覆列表等。 未來的完善也將圍繞著三大功能區進行設計。 #### 歷史記錄  能夠根據單次會話記錄，聯動顯示前後同一訪客的所有會話記錄。左側藍色為查詢區，滑鼠指上去會自動滑出顯示查詢條件，不過這個設計似乎不是太友好，有待改進。 #### 站點引數  站點引數目前實現的功能比較細，能夠對訪客端的各種細節進行精確的配置。 #### 個人設定  登入客服自己的一些個性化配置，都放在這裡，目前還有待完善。 ### Web 後臺 #### 站點管理  系統支援多站點功能。一個機構可以擁有多個站點，站點和客服的關係是平行的，不是隸屬的。客服可以根據許可權配置，登入一個或多個站點。 #### 組織機構、客服、角色許可權   曹旭升 QQ:279060597 原文：[https://blog.shengxunwei.com/Home/Post/9b667212-565c-43a8-8379-bd0b83