'init'

Fzoss · Mar 16, 2021 · b88c404 · b88c404
1 parent 92e9115
commit b88c404
Show file tree

Hide file tree

Showing 10 changed files with 12,391 additions and 0 deletions.
diff --git a/css/litewebchat.css b/css/litewebchat.css
@@ -0,0 +1,184 @@
+/*!
+ * LiteWebChat_Frame v2.1.0
+ * MorFans Lab(c) 2017
+ *
+ * BY:SuperPaxxs & Haswikr
+ * https://lab.morfans.cn
+ *
+ * Released under the LGPL License
+ */
+/* 主 */
+ .lite-chatbox{
+  font-family: Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
+  padding: 0px;
+  font-size:18px;
+  width: 100%;
+  position:relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+/* 聊天区域 */
+.lite-chatbox .cmsg{
+  position: relative; 
+  margin: 4px 7px;
+  min-height: 50px;
+  border: 0;
+}
+.lite-chatbox .cright{
+  text-align: right;
+  margin-left: 64px;
+}
+.lite-chatbox .cleft{
+  text-align: left;
+  margin-right: 64px;
+}
+/* 聊天组件：全局*/    
+/* 头像 */
+.lite-chatbox img.headIcon{
+  width: 34px;
+  height: 34px;
+  top: 9px;
+  position: absolute;
+  border: 1px solid #c5d4c4;
+}
+/* 昵称 */
+.lite-chatbox .name{
+  color: #8b8b8b;
+  font-size: 12px;
+  display: block;
+  line-height: 18px;
+}
+.lite-chatbox .name .htitle{
+  display: inline-block;
+  padding: 0 3px 0 3px;
+  background-color: #cccccc;
+  color: #ffffff;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  margin-right: 4px;
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  max-width: 50px;
+}
+/* 消息内容 */
+.lite-chatbox .content{
+  word-break: break-all;
+  word-wrap: break-word;
+  text-align: left;
+  position: relative;
+  display: inline-block;
+  font-size: 15px;
+  padding: 10px 15px;
+  line-height: 20px;
+  /* -moz-border-radius: 6px; 
+  -webkit-border-radius: 6px; 
+  border-radius: 6px; */
+  /*空白消息*/
+  min-width: 9px; 
+  min-height: 18px;
+}
+/*消息内容图片处理*/
+.lite-chatbox .content img{
+  width: 100%;
+  height: auto;
+}
+/*消息内容超链接处理*/
+.lite-chatbox .content a{
+  color: #0072C1;
+  margin: 0 5px;
+  cursor: hand;
+}
+/*聊天提示条*/
+.lite-chatbox .tips{
+  margin: 12px;
+  text-align: center;
+  font-size: 12px;
+}
+/*聊天提示条文本*/
+.lite-chatbox .tips span{
+  display: inline-block;
+  padding: 4px;
+  background-color: #cccccc;
+  color: #ffffff;
+  -moz-border-radius: 6px; 
+  -webkit-border-radius: 6px; 
+  border-radius: 6px;
+}
+/* 聊天组件：微调 */
+/* 圆头像 */
+.lite-chatbox img.radius{
+  -moz-border-radius: 100%; 
+  -webkit-border-radius: 100%; 
+  border-radius: 100%;
+}
+/* 左右头像 */
+.lite-chatbox .cright img.headIcon{
+  right: 0;
+}
+.lite-chatbox .cleft img.headIcon{
+  left: 0;
+}
+/* 左右昵称 */
+.lite-chatbox .cright .name{
+  margin: 0 48px 2px 0;
+}
+.lite-chatbox .cleft .name{
+  margin: 0 0 2px 48px;
+}
+/* 左右聊天气泡 */
+.lite-chatbox .cright .content{
+  margin: 0 48px 0 0;
+  -webkit-border-radius: 20px 0 20px 20px;
+  border-radius: 20px 0 20px 20px;
+  color: white;
+  /* border: 1px solid #78cdf8; */
+  background: -webkit-linear-gradient(70deg, #3FD1E1 0%, #44D7CD 100%);
+  background: linear-gradient(20deg, #3f8fe1cc 0%, #44d7c9 100%);
+  -webkit-box-shadow: 5px 5px 15px 0 rgba(102,102,102,0.15);
+  box-shadow: 5px 5px 15px 0 rgba(102,102,102,0.15);
+}
+.lite-chatbox .cleft .content{
+  margin: 0 0 0 48px;
+  -webkit-border-radius: 0 20px 20px 20px;
+  border-radius: 0 20px 20px 20px;
+  color: #666;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  background: #FFFFFF;
+  -webkit-box-shadow: 5px 5px 15px 0 rgba(102,102,102,0.1);
+  box-shadow: 5px 5px 15px 0 rgba(102,102,102,0.1);
+}
+.lite-chatbox .cright .content:after{
+  right: -12px;
+  top: 8px;
+}
+.lite-chatbox .cleft .content:after{
+  left: -12px;
+  top: 8px;
+}
+/* 聊天提示条附加样式 */
+.lite-chatbox .tips .tips-primary{
+  background-color: #3986c8;
+}
+.lite-chatbox .tips .tips-success{
+  background-color: #49b649;
+}
+.lite-chatbox .tips .tips-info{
+  background-color: #5bb6d1;
+}
+.lite-chatbox .tips .tips-warning{
+  background-color: #eea948;
+}
+.lite-chatbox .tips .tips-danger{
+  background-color: #e24d48;
+}
+.lite-chatbox .name .admin{
+  background-color: #72D6A0;
+}
+.lite-chatbox .name .owner{
+  background-color: #F2BF25;
+}
+
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,74 @@
+#app {
+	max-width: 500px;
+
+}
+
+main::-webkit-scrollbar {
+	width: 0;
+}
+
+.powered {
+	text-align: center;
+	font-size: 0.5px;
+	bottom: 0;
+	height: 0.35rem;
+	margin-top: -0.25rem;
+}
+
+
+.app-title {
+	text-align: center;
+	color: transparent;
+	font-weight: bold;
+	background: linear-gradient(45deg, rgba(255, 85, 127, 1) 100%, rgba(170, 85, 127, .4) 0%);
+	-webkit-background-clip: text;
+}
+
+.lite-chatbox .cleft .content {
+	background: rgba(255, 85, 127, 0.3) 50%;
+}
+
+.paper {
+	height: calc(95vh);
+	position: relative;
+	margin: 30px auto;
+	padding: 30px 0;
+	border: 1px solid #efefef;
+	background-color: #FFFFFD;
+	background-image: url(./paper.png);
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
+
+	&::before,
+	&::after {
+		content: '';
+		z-index: -1;
+		position: absolute;
+		left: 10px;
+		bottom: 10px;
+		width: 45%;
+		height: 55%;
+		max-height: 100px;
+		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+		transform: skew(-15deg) rotate(-4deg);
+	}
+
+	&::after {
+		left: auto;
+		right: 10px;
+		transform: skew(15deg) rotate(4deg);
+	}
+}
+
+.inputBox {
+	position: absolute;
+	bottom: 1vh;
+	left: auto;
+	right: auto;
+	height: ??px;
+	width: 100%;
+	z-index: 999;
+}
+
+/* .lite-chatbox{
+	height: calc(75vh);
+} */
diff --git a/img/avatar/A.jpg b/img/avatar/A.jpg
diff --git a/img/avatar/B.jpg b/img/avatar/B.jpg
diff --git a/img/avatar/C.png b/img/avatar/C.png
diff --git a/img/paper.png b/img/paper.png
diff --git a/index.html b/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title></title>
+		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
+		<link rel="stylesheet" type="text/css" href="./css/litewebchat.css" />
+		<!-- 引入样式 -->
+		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
+		<link rel="stylesheet" type="text/css" href="./css/main.css" />
+		<!-- 引入组件库 -->
+		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
+		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
+
+
+	</head>
+	<body>
+		<body>
+
+			<el-container id="app" class="paper">
+				<el-header>
+				<div class="app-title">可爱の{{botNick}}</div>
+				</el-header>
+				<el-main>
+					<!-- 主容器 -->
+					<el-row :span="22">
+						<div class="lite-chatbox">
+
+							<div v-for="message in messageList" class="cmsg" v-bind:class=message.direction>
+
+								<img class="headIcon radius" ondragstart="return false;" oncontextmenu="return false;" v-bind:src="['./img/avatar/'+message.avatar]" />
+								<span class="name">{{ message.nick }}</span>
+								<span class="content">{{ message.msg }}</span>
+							</div>
+						</div>
+					</el-row>
+
+					<div class="inputBox">
+						<el-row>
+							<el-col :span="18">
+								<el-input v-model="inputBox" placeholder="请输入内容"></el-input>
+							</el-col>
+							<el-col :span="4">
+								<el-button @click="send">发送</el-button>
+								<el-col>
+						</el-row>
+					</div>
+				</el-main>
+
+			</el-container>
+			<el-row><div class="powered">Powered by <a href="https://github.com/Kyomotoi/AnimeThesaurus">AnimeThesaurus</a> <a href="https://github.com/MorFansLab/LiteWebChat_Frame">LiteWebChat</a></div></el-row>
+		</body>
+
+		<script type="text/javascript">
+			var app = new Vue({
+				el: '#app',
+				data() {
+					return {
+						messageList: [],
+						inputBox: '',
+						botNick: '赤岛酱',
+						thesaurus: '',
+						botAvatar: 'C.png',
+						myAvatar: 'B.jpg'
+					}
+
+				},
+				methods: {
+					getThesaurus: function() {
+						axios.get('https://raw.githubusercontent.com/Kyomotoi/AnimeThesaurus/main/data.json')
+							.then((response) => this.thesaurus = response.data)
+					},
+					send: function() {
+						this.messageList.push({
+							nick: '你',
+							msg: this.inputBox,
+							direction: 'cright',
+							avatar: this.myAvatar
+						});
+						var words = [],
+							reply = '';
+						for (obj in this.thesaurus) {
+							if (this.inputBox.indexOf(obj) != -1) {
+								words.push(obj);
+							}
+						}
+
+						if (words.length != 0) {
+							word = words[Math.floor(Math.random() * words.length)];
+							list = this.thesaurus[word];
+						} else {
+							list = ["唔，没有搞懂主人在说什么诶", "没有听懂qwq", "虽然不知道在说什么，但感觉很厉害的样子~", "我是不是太笨啦，没理解主人什么意思qaq"]
+						}
+						reply = list[Math.floor(Math.random() * list.length)];
+						this.messageList.push({
+							nick: this.botNick,
+							msg: reply,
+							direction: 'cleft',
+							avatar: this.botAvatar
+						});
+						setTimeout(() => {
+							var div = document.getElementsByClassName('el-main')[0];
+							div.scrollTop = div.scrollHeight;
+							this.inputBox = '';
+						}, 100)
+					}
+				},
+				created: function() {
+					this.getThesaurus();
+					this.messageList.push({
+						nick: this.botNick,
+						msg: '你是我的master嘛?',
+						direction: 'cleft',
+						avatar: this.botAvatar
+					});
+				}
+			});
+		</script>
+</html>