小傅哥，docs：《ChatGPT 微服务应用体系构建》 - chagpt-web 第2节：工具栏面板

Author: fuzhengwei

docs/.vuepress/config.js

@@ -1931,6 +1931,7 @@ function getBarProjectChatGPT() {
             sidebarDepth: 0,
             children: [
                 "web/第1节：Web页面工程初始化.md",
+                "web/第2节：工具栏面板.md",
             ]
         }
     ]

docs/.vuepress/public/images/article/project/chatgpt/chatgpt-web-02-01.png

@@ -0,0 +1,32 @@
+---
+title: 第2节：工具栏面板
+pay: https://t.zsxq.com/0e0jyBF1N
+---
+
+# 《ChatGPT 微服务应用体系构建》 - chagpt-web 第2节：工具栏面板
+
+作者：小傅哥
+<br/>博客：[https://bugstack.cn](https://bugstack.cn)
+
+>沉淀、分享、成长，让自己和他人都能有所收获！😄
+
+- **本章难度**：★☆☆☆☆
+- **本章重点**：设计 ChatGPT WEB 工具栏界面，并通过 typescript 所提供的方法，进行界面操作地址路由。并章节开始会逐步的拆解和完成聊天对话界面的设计和实现，这里会涉及不少的 Typescript 语言特性，以面向对象的方式进行编程设计和实现。
+- **课程视频**：[https://t.zsxq.com/0eZuOvR59](https://t.zsxq.com/0eZuOvR59)
+
+## 一、本章诉求
+
+整个 WEB 界面所需要实现的功能还是比较多的，这里小傅哥会以以往 Swing、JavaFx、HTML 等各类型的界面开发经验进行设计和实现，同时融入面向对象的编程思想，来开发完成整个 ChatGPT Web UI 的工程代码。
+
+那么本章节我们先以一个小的侧边栏设计为起始，进行页面的构建和代码实现。这部分内容并不是很多，但侧边栏会牵动着整个页面结构的定义和界面的路由处理。接下来我们就来实现下。
+
+## 二、目标效果
+
+整个界面小傅哥会以PC端微信的结构作为参考，设计符合我们诉求的UI页面。本章节我们会完成如下图所示的内容。
+
+<div align="center">
+    <img src="https://bugstack.cn/images/article/project/chatgpt/chatgpt-web-02-01.png?raw=true" width="850px">
+</div>
+
+- 在侧边栏设计2个按钮，一个聊天，一个角色。聊天用于处理对话，角色用于处理各类场景的选择，包括你可以是【面试官角色、文案写手角色、法务咨询角色等】
+- 通过页面点击2个按钮，右侧的面板部分发生变化。其实这个变化就是在加载不同的 div 模块，以达到切换界面的效果。