# litewebchat_frame
**Repository Path**: mirrors/litewebchat_frame
## Basic Information
- **Project Name**: litewebchat_frame
- **Description**: 一个简洁，易用的 HTML 聊天框架
- **Primary Language**: HTML/CSS
- **License**: WTFPL
- **Default Branch**: master
- **Homepage**: https://www.oschina.net/p/litewebchat_frame
- **GVP Project**: No
## Statistics
- **Stars**: 36
- **Forks**: 7
- **Created**: 2020-03-24
- **Last Updated**: 2025-10-25
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 轻网页聊天框架
在线演示：
- [~~性感聊天在线观看~~](https://lab.morfans.cn/LiteWebChat_Frame/dist/html/chat_example.html)
- [带输入框表情选取](https://lab.morfans.cn/LiteWebChat_Frame/dist/html/chat_with_inputarea_example.html)
- [带输入框表情选取简单 JS 渲染](https://lab.morfans.cn/LiteWebChat_Frame/dist/html/chat_with_inputarea_module_example.html)
[本框架](https://github.com/MorFansLab/LiteWebChat_Frame) 大部分聊天对话所要求的样式特性已完成，能够助你快速开发聊天类对话界面
## 使用~~指南~~ (指北)
### 获取 LiteWebChat
我们提供了多种方式来获取 LiteWebChat_Frame， ~~你也可以通过各种奇淫技巧获取使用。~~
#### 1.下载文件
你可以直接从 GitHub 项目 [官网](https://github.com/MorFansLab/LiteWebChat_Frame) 直接克隆下载，其中 dist 目录包含了压缩过的和未压缩过的 CSS、JS 、示例以及图片文件。
#### 2.直接引用
##### 对话框
```html
```
##### 输入框
> **注意：对话框可以单独被使用，输入框必须和对话框配合使用。**
```html
```
## 使用 LiteWebChat
### 仅对话框
所需文件：
- 样式：`litewebchat(.min).css`
```html
...
```
### 对话框和输入框
所需文件：
- 样式
- 对话框：`litewebchat(.min).css`
- 输入框：`litewebchat_input(.min).css`
- 脚本
- 输入框：`litewebchat_input(.min).js`
- 消息渲染：`litewebchat_render(.min).js`
```html
```
**注意：使用输入框时需要手动指定其父容器大小。**
Example:
```css
/* 全局，当整个HTML页面都是聊天窗口的时候取消body的margin 和 padding，这样比较好看 */
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
/* 手动指定其父容器大小 */
.lite-chatmaster {
height: 100%;
width: 100%;
}
```
可以参考配合一下简易的 JS 消息渲染：
- 效果和使用参考：[带输入框表情选取简单 JS 渲染](https://lab.morfans.cn/LiteWebChat_Frame/dist/html/chat_with_inputarea_module_example.html)
参数字段：
- messageType：消息类型
- 可选值：
- 系统提示
- tipsNormal
- tipsPrimary
- tipsSuccess
- tipsInfo
- tipsWarning
- tipsDanger
- 消息
- text：普通消息类型
- raw：不会转义消息类型
- html：object 内容
- headIcon：头像图片地址
- diamond：是否使用方块头像样式
- bool
- name：用户名
- position：消息位置
- left
- right
- htitleType: 头衔类型
- admin
- owner
- 不写则是默认
- htitle：头衔标题
使用示例：
```html
```
## 组件
### 主题
LiteWebChat 目前有 `light` 和 `dark` 两款主题。
切换主题方式非常简单，只需添加 html 的属性 `itewebchat-theme`:
```html
....
```
### 聊天气泡
| 组件（类名） | Class 附加类名 / 备注 |
| -------------------- | ---------------------------------------------------- |
| 聊天气泡组件（cmsg） | cleft（左边） / cright（右边） |
| 头像 (headIcon) | 默认方形 / radius（圆形头像） |
| 头衔 （htitle） | 默认成员头衔 / admin（管理头衔） / owner（群主头衔） |
| 名称（name） | 为空使用 ‘ ’ |
| 聊天内容（content） | - |
Example:
```html
SuperPaxxs
LiteChat_Frame（轻聊天气泡框架），一个贼简洁
(简单) 、美观、易用的 HTML 聊天界面框架
```
### 系统提示
| 类名 | 效果 |
| ------------ | ------------- |
| tips | 正常 |
| tips-primary | 首要的提示 |
| tips-success | 成功提示 |
| tips-info | 信息提示 |
| tips-warning | 警告提示 |
| tips-danger | 错误/危险提示 |
Example:
```html
系统消息：左/右边长消息被管理员批判一番……
系统消息：normal
```
### 输入框
| 组件（HTML 标签） | 是否必备 | 类名 | 备注 |
| --------------------------- | -------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| 文字输入框（<textarea>） | 是 | chatinput | Class：lite-chatinput 内只能存在一个 textarea 标签 |
| 发送按钮（<button>） | 是 | send | Class：lite-chatinput 内只能存在一个发送按钮 |
| 分界线（<hr>） | 是 | boundary | 充当输入框和对话框之间的分界线 |
| 工具栏按钮（<button>） | 否 | tool-button（必选）、float-right/float-left（二选一） | 用于充当表情按钮等工具栏控件，类名 float-left 和 类名 float-right 决定其对齐方式（左对齐/右对齐）。 |
Example:
```html
```
**注意：使用发送文件按钮时需要手动设置用于发送文件的函数。**
Example:
```html
```
### 输入框使用的工具栏
输入框使用的工具栏会在点击工具栏按钮后弹出。
Example（最简）：
```html
```
## 兼容性
兼容 Firefox 和其他主流浏览器的最新版本。
## 开发
使用 pnpm 或 npm 或 yarn，以 pnpm 为例：
```
pnpm i
pnpm run build
```