From 920e6fff967d09613f653944d95b9cd00db8495f Mon Sep 17 00:00:00 2001
From: John Smith <xfgryujk@126.com>
Date: Wed, 12 Jun 2019 13:55:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=85=8D=E7=BD=AE=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=E5=92=8C=E8=AF=BB=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/config.js        | 275 ++++++++++++++++++++++++++++++
 frontend/src/assets/css/room.css  | 217 -----------------------
 frontend/src/assets/img/logo.png  | Bin 14954 -> 1166 bytes
 frontend/src/main.js              |   6 +
 frontend/src/views/Home.vue       |  62 ++++---
 frontend/src/views/Room/index.vue |  20 ++-
 main.py                           |  18 +-
 views/base.py                     |  28 +++
 chat.py => views/chat.py          |   0
 views/config.py                   |  50 ++++++
 views/main.py                     |  10 ++
 11 files changed, 434 insertions(+), 252 deletions(-)
 create mode 100644 frontend/src/api/config.js
 create mode 100644 views/base.py
 rename chat.py => views/chat.py (100%)
 create mode 100644 views/config.py
 create mode 100644 views/main.py

diff --git a/frontend/src/api/config.js b/frontend/src/api/config.js
new file mode 100644
index 0000000..33cfe8d
--- /dev/null
+++ b/frontend/src/api/config.js
@@ -0,0 +1,275 @@
+import axios from 'axios'
+
+const DEFAULT_CSS = `@import url("https://fonts.googleapis.com/css?family=Changa%20One");
+@import url("https://fonts.googleapis.com/css?family=Imprima");
+/* @import url("https://fonts.lug.ustc.edu.cn/css?family=Changa%20One"); */
+/* @import url("https://fonts.lug.ustc.edu.cn/css?family=Imprima"); */
+
+/* Background colors*/
+body {
+  overflow: hidden;
+  background-color: rgba(0,0,0,0);
+}
+/* Transparent background. */
+yt-live-chat-renderer {
+  background-color: transparent !important;
+}
+yt-live-chat-text-message-renderer,
+yt-live-chat-text-message-renderer[is-highlighted] {
+  background-color: transparent !important;
+}
+
+yt-live-chat-text-message-renderer[author-type="owner"],
+yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] {
+  background-color: transparent !important;
+}
+
+yt-live-chat-text-message-renderer[author-type="moderator"],
+yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] {
+  background-color: transparent !important;
+}
+
+yt-live-chat-text-message-renderer[author-type="member"],
+yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] {
+  background-color: transparent !important;
+}
+
+
+yt-live-chat-author-chip #author-name {
+  background-color: transparent !important;
+}
+/* Outlines */
+yt-live-chat-renderer * {
+  text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
+  font-family: "Imprima";
+  font-size: 18px !important;
+  line-height: 18px !important;
+}
+
+yt-live-chat-text-message-renderer #content,
+yt-live-chat-legacy-paid-message-renderer #content {
+  overflow: initial !important;
+}
+
+/* Hide scrollbar. */
+yt-live-chat-item-list-renderer #items{
+  overflow: hidden !important;
+}
+
+yt-live-chat-item-list-renderer #item-scroller{
+  overflow: hidden !important;
+}
+
+/* Hide header and input. */
+yt-live-chat-header-renderer,
+yt-live-chat-message-input-renderer {
+  display: none !important;
+}
+
+/* Reduce side padding. */
+yt-live-chat-text-message-renderer,
+yt-live-chat-legacy-paid-message-renderer {
+    padding-left: 4px !important;
+  padding-right: 4px !important;
+}
+
+yt-live-chat-paid-message-renderer #header {
+    padding-left: 4px !important;
+  padding-right: 4px !important;
+}
+
+/* Avatars. */
+yt-live-chat-text-message-renderer #author-photo,
+yt-live-chat-paid-message-renderer #author-photo,
+yt-live-chat-legacy-paid-message-renderer #author-photo {
+  
+  width: 24px !important;
+  height: 24px !important;
+  border-radius: 24px !important;
+  margin-right: 6px !important;
+  background-size: cover;
+}
+
+/* Hide badges. */
+yt-live-chat-text-message-renderer #author-badges {
+  display: none !important;
+  vertical-align: text-top !important;
+}
+
+/* Timestamps. */
+yt-live-chat-text-message-renderer #timestamp {
+  
+  color: #999999 !important;
+  font-family: "Imprima";
+  font-size: 16px !important;
+  line-height: 16px !important;
+}
+
+/* Badges. */
+yt-live-chat-text-message-renderer #author-name[type="owner"],
+yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
+  color: #ffd600 !important;
+}
+
+yt-live-chat-text-message-renderer #author-name[type="moderator"],
+yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
+  color: #5e84f1 !important;
+}
+
+yt-live-chat-text-message-renderer #author-name[type="member"],
+yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
+  color: #0f9d58 !important;
+}
+
+/* Channel names. */
+yt-live-chat-text-message-renderer #author-name {
+  color: #cccccc !important;
+  font-family: "Changa One";
+  font-size: 20px !important;
+  line-height: 20px !important;
+}
+
+yt-live-chat-text-message-renderer #author-name::after {
+  content: ":";
+  margin-left: 2px;
+}
+
+/* Messages. */
+yt-live-chat-text-message-renderer #message,
+yt-live-chat-text-message-renderer #message * {
+  color: #ffffff !important;
+  font-family: "Imprima";
+  font-size: 18px !important;
+  line-height: 18px !important;
+}
+
+
+/* SuperChat/Fan Funding Messages. */
+yt-live-chat-paid-message-renderer #author-name,
+yt-live-chat-paid-message-renderer #author-name *,
+yt-live-chat-legacy-paid-message-renderer #event-text,
+yt-live-chat-legacy-paid-message-renderer #event-text * {
+  color: #ffffff !important;
+  font-family: "Changa One";
+  font-size: 20px !important;
+  line-height: 20px !important;
+}
+
+yt-live-chat-paid-message-renderer #purchase-amount,
+yt-live-chat-paid-message-renderer #purchase-amount *,
+yt-live-chat-legacy-paid-message-renderer #detail-text,
+yt-live-chat-legacy-paid-message-renderer #detail-text * {
+  color: #ffffff !important;
+  font-family: "Imprima";
+  font-size: 18px !important;
+  line-height: 18px !important;
+}
+
+yt-live-chat-paid-message-renderer #content,
+yt-live-chat-paid-message-renderer #content * {
+  color: #ffffff !important;
+  font-family: "Imprima";
+  font-size: 18px !important;
+  line-height: 18px !important;
+}
+
+yt-live-chat-paid-message-renderer {
+  margin: 4px 0 !important;
+}
+
+yt-live-chat-legacy-paid-message-renderer {
+  background-color: #0f9d58 !important;
+  margin: 4px 0 !important;
+}
+
+yt-live-chat-text-message-renderer a,
+yt-live-chat-legacy-paid-message-renderer a {
+  text-decoration: none !important;
+}
+
+yt-live-chat-text-message-renderer[is-deleted],
+yt-live-chat-legacy-paid-message-renderer[is-deleted] {
+  display: none !important;
+}
+
+yt-live-chat-ticker-renderer {
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+yt-live-chat-ticker-renderer {
+  display: none !important;
+}
+
+
+yt-live-chat-ticker-paid-message-item-renderer,
+yt-live-chat-ticker-paid-message-item-renderer *,
+yt-live-chat-ticker-sponsor-item-renderer,
+yt-live-chat-ticker-sponsor-item-renderer * {
+  color: #ffffff !important;
+  font-family: "Imprima";
+}
+
+yt-live-chat-mode-change-message-renderer, 
+yt-live-chat-viewer-engagement-message-renderer, 
+yt-live-chat-restricted-participation-renderer {
+  display: none !important;
+}  
+`
+
+export const DEFAULT_CONFIG = {
+  minGiftPrice: 6.911, // $1
+  mergeSimilarDanmaku: true,
+
+  blockGiftDanmaku: true,
+  blockLevel: 0,
+  blockNewbie: true,
+  blockNotMobileVerified: true,
+  blockKeywords: '',
+  blockUsers: '',
+
+  css: DEFAULT_CSS
+}
+
+function mergeConfig (config) {
+  let res = {}
+  for (let i in DEFAULT_CONFIG) {
+    res[i] = i in config ? config[i] : DEFAULT_CONFIG[i]
+  }
+  return res
+}
+
+export function setLocalConfig (config) {
+  config = mergeConfig(config)
+  window.localStorage.config = JSON.stringify(config)
+}
+
+export function getLocalConfig () {
+  if (!window.localStorage.config) {
+    return DEFAULT_CONFIG
+  }
+  return mergeConfig(JSON.parse(window.localStorage.config))
+}
+
+export async function createRemoteConfig (config) {
+  config = mergeConfig(config)
+  return (await axios.post('/config', config)).data
+}
+
+export async function setRemoteConfig (id, config) {
+  config = mergeConfig(config)
+  return (await axios.put(`/config/${id}`, config)).data
+}
+
+export async function getRemoteConfig (id) {
+  let config = (await axios.get(`/config/${id}`)).data
+  return mergeConfig(config)
+}
+
+export default {
+  DEFAULT_CONFIG,
+  setLocalConfig,
+  getLocalConfig,
+  createRemoteConfig,
+  setRemoteConfig,
+  getRemoteConfig
+}
diff --git a/frontend/src/assets/css/room.css b/frontend/src/assets/css/room.css
index 8a13d60..30ec4a0 100644
--- a/frontend/src/assets/css/room.css
+++ b/frontend/src/assets/css/room.css
@@ -207,220 +207,3 @@ yt-live-chat-ticker-paid-message-item-renderer #fake-avatar {
   border-radius: 24px;
 
 }
-
-/* 以下为自动生成：https://chatv2.septapus.com/ */
-
-/* @import url("https://fonts.googleapis.com/css?family=Changa%20One"); */
-/* @import url("https://fonts.googleapis.com/css?family=Imprima"); */
-@import url("https://fonts.lug.ustc.edu.cn/css?family=Changa%20One");
-@import url("https://fonts.lug.ustc.edu.cn/css?family=Imprima");
-
-/* Background colors*/
-body {
-  overflow: hidden;
-  background-color: rgba(0,0,0,0);
-}
-/* Transparent background. */
-yt-live-chat-renderer {
-  background-color: transparent !important;
-}
-yt-live-chat-text-message-renderer,
-yt-live-chat-text-message-renderer[is-highlighted] {
-  background-color: transparent !important;
-}
-
-yt-live-chat-text-message-renderer[author-type="owner"],
-yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] {
-  background-color: transparent !important;
-}
-
-yt-live-chat-text-message-renderer[author-type="moderator"],
-yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] {
-  background-color: transparent !important;
-}
-
-yt-live-chat-text-message-renderer[author-type="member"],
-yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] {
-  background-color: transparent !important;
-}
-
-
-yt-live-chat-author-chip #author-name {
-  background-color: transparent !important;
-}
-/* Outlines */
-yt-live-chat-renderer * {
-  text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
-  font-family: "Imprima";
-  font-size: 18px !important;
-  line-height: 18px !important;
-}
-
-yt-live-chat-text-message-renderer #content,
-yt-live-chat-legacy-paid-message-renderer #content {
-  overflow: initial !important;
-}
-
-/* Hide scrollbar. */
-yt-live-chat-item-list-renderer #items{
-  overflow: hidden !important;
-}
-
-yt-live-chat-item-list-renderer #item-scroller{
-  overflow: hidden !important;
-}
-
-/* Hide header and input. */
-yt-live-chat-header-renderer,
-yt-live-chat-message-input-renderer {
-  display: none !important;
-}
-
-/* Reduce side padding. */
-yt-live-chat-text-message-renderer,
-yt-live-chat-legacy-paid-message-renderer {
-    padding-left: 4px !important;
-  padding-right: 4px !important;
-}
-
-yt-live-chat-paid-message-renderer #header {
-    padding-left: 4px !important;
-  padding-right: 4px !important;
-}
-
-/* Avatars. */
-yt-live-chat-text-message-renderer #author-photo,
-yt-live-chat-paid-message-renderer #author-photo,
-yt-live-chat-legacy-paid-message-renderer #author-photo {
-  
-  width: 24px !important;
-  height: 24px !important;
-  border-radius: 24px !important;
-  margin-right: 6px !important;
-  background-size: cover;
-}
-
-/* Hide badges. */
-yt-live-chat-text-message-renderer #author-badges {
-  display: none !important;
-  vertical-align: text-top !important;
-}
-
-/* Timestamps. */
-yt-live-chat-text-message-renderer #timestamp {
-  
-  color: #999999 !important;
-  font-family: "Imprima";
-  font-size: 16px !important;
-  line-height: 16px !important;
-}
-
-/* Badges. */
-yt-live-chat-text-message-renderer #author-name[type="owner"],
-yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
-  color: #ffd600 !important;
-}
-
-yt-live-chat-text-message-renderer #author-name[type="moderator"],
-yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
-  color: #5e84f1 !important;
-}
-
-yt-live-chat-text-message-renderer #author-name[type="member"],
-yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
-  color: #0f9d58 !important;
-}
-
-/* Channel names. */
-yt-live-chat-text-message-renderer #author-name {
-  color: #cccccc !important;
-  font-family: "Changa One";
-  font-size: 20px !important;
-  line-height: 20px !important;
-}
-
-yt-live-chat-text-message-renderer #author-name::after {
-  content: ":";
-  margin-left: 2px;
-}
-
-/* Messages. */
-yt-live-chat-text-message-renderer #message,
-yt-live-chat-text-message-renderer #message * {
-  color: #ffffff !important;
-  font-family: "Imprima";
-  font-size: 18px !important;
-  line-height: 18px !important;
-}
-
-
-/* SuperChat/Fan Funding Messages. */
-yt-live-chat-paid-message-renderer #author-name,
-yt-live-chat-paid-message-renderer #author-name *,
-yt-live-chat-legacy-paid-message-renderer #event-text,
-yt-live-chat-legacy-paid-message-renderer #event-text * {
-  color: #ffffff !important;
-  font-family: "Changa One";
-  font-size: 20px !important;
-  line-height: 20px !important;
-}
-
-yt-live-chat-paid-message-renderer #purchase-amount,
-yt-live-chat-paid-message-renderer #purchase-amount *,
-yt-live-chat-legacy-paid-message-renderer #detail-text,
-yt-live-chat-legacy-paid-message-renderer #detail-text * {
-  color: #ffffff !important;
-  font-family: "Imprima";
-  font-size: 18px !important;
-  line-height: 18px !important;
-}
-
-yt-live-chat-paid-message-renderer #content,
-yt-live-chat-paid-message-renderer #content * {
-  color: #ffffff !important;
-  font-family: "Imprima";
-  font-size: 18px !important;
-  line-height: 18px !important;
-}
-
-yt-live-chat-paid-message-renderer {
-  margin: 4px 0 !important;
-}
-
-yt-live-chat-legacy-paid-message-renderer {
-  background-color: #0f9d58 !important;
-  margin: 4px 0 !important;
-}
-
-yt-live-chat-text-message-renderer a,
-yt-live-chat-legacy-paid-message-renderer a {
-  text-decoration: none !important;
-}
-
-yt-live-chat-text-message-renderer[is-deleted],
-yt-live-chat-legacy-paid-message-renderer[is-deleted] {
-  display: none !important;
-}
-
-yt-live-chat-ticker-renderer {
-  background-color: transparent !important;
-  box-shadow: none !important;
-}
-yt-live-chat-ticker-renderer {
-  display: none !important;
-}
-
-
-yt-live-chat-ticker-paid-message-item-renderer,
-yt-live-chat-ticker-paid-message-item-renderer *,
-yt-live-chat-ticker-sponsor-item-renderer,
-yt-live-chat-ticker-sponsor-item-renderer * {
-  color: #ffffff !important;
-  font-family: "Imprima";
-}
-
-yt-live-chat-mode-change-message-renderer, 
-yt-live-chat-viewer-engagement-message-renderer, 
-yt-live-chat-restricted-participation-renderer {
-  display: none !important;
-}
\ No newline at end of file
diff --git a/frontend/src/assets/img/logo.png b/frontend/src/assets/img/logo.png
index 640254f8d9faea99e81978e7062436e5fc6a43c2..f13855b88f6ffee158690440b8b917bf98eb5c34 100644
GIT binary patch
delta 1153
zcmV-{1b+MKbdCv-9De}>eM({g0004VQb$4nuFf3k000C?Nkl<ZSP8vWO=w(I6#mY8
zL&n%-vgpE67i|><lN7p$SXxm+p^FyWlx8I)(@JeAir~V9E@t6IaHFNviq1^HRs2J-
zLIjOJG_*9;R%cS&C4$i64@}ym$)xWc&%JN%oBQ6p`3tFcbARvs?stCf&pGD;u|~*E
z_0X>2HG`+rgqdz*;)#p~sW{JOHL)j}j4~*s6>lsNaX)Z$$~9nwttaQ_2J~XFG#xI=
zz(=m!W2Ed}ksJZU`JpNb*Y}2t)|l|p*J&Erxf(8RY%p2ABqwms2x|v(Gkt2VHm(jX
z(Me`}1I;#~v47s|Lc=!E9;<EY#-LA<#%)ccM9Q;O8ZD|9t+Vyp62K6-vNV8~_b%CF
zJuZ|klH=@S&!51t;Yo!B3gjJO=kNuYJSj+Up$t#f?`Xk*8R87SDXVYd_|SWVeEAD<
z={W%}gPhkwftG`NTZ!FIHAT5?T-QM1m&Z`N@oIy741YIr;V~Nla?&Mvxo?}f>6_u|
zlp~GD2h$OtHfe^Z<h}ezglABkpT>jfu_WOJtg^D*VAd@RUL<lx%tEW4nU}%->&WhY
zrxmZGwZH>K&6mc>b&Bl!v&atbZ;*cXQicXH6@|-rgmU#;_~S2quj-{ivO+|G63%4)
z)xzq%Sbr_h^kMlVT)aV`ZSoR>yu;AeYTP~>m*jQ@3#G%zja3Q7-=>M&gO<`xhgF_i
z$b`9&$vXn1{^>}X{kO#1r`Y2!>k6!cX{$sMCG8@Wi*#a)@>LwDcOP#yt`cd`sD29u
zQE@;IT#d`?_(;GT6evL<C&oh(-k^Xz?{oIopMQ;e&<x+$Au2Cxm8`*oxaGuoy~uGr
zA530*9KHRw5(VPm%G#8IBo+K5`G6#hc|W1&ciau@b6g}kR{_B6<Lcr;M+*4U?0c{1
z7?0AL&O~;O7s|ajb7(CL%LqF+lfsUNK9B%91mf>dxqTwBPDF%a6Nz99^uG_L15$x5
zV1Mz}3&@RzCDyQ$9mxNhB{!8fBvIfo{BN;z=V)6;l;KR@#{}m<m;pqQs5p-C-F2Nc
z<;f1H#WO!|M<)H53fdZ1YtfFZt&ZWv5j))gO$|%_T3J7WQ+xgl^;m<zfwSdp*ur`7
zS{d6So~sW>bLT7tT@0o6Lgj#E*~Dcm(|<9X9=b^=lqblc^Rkfm%jv>EcU0ze34;@o
zkjsA)(N-fZFM1S<&aD3W8E`Xt_1E0t?<2>ZG3ul;i0#<t)-G6vxS4(2UOkgEvr?Ep
zM-D%)mf5F|kR3eLjH>Z2`E7HdRE(4I9_33+eZjb;dHLXV$8YO^B)sp%WK~jMReDOo
z53S9sQ|gZ2{tB{#qw-ifZ(Z`+o<Qf8H^y|Nh}?~c7Uv$7gWT*SBq~K`{>me^E%v!W
zkY63SI4d8C|MxVcB(jIo!A{Rzdl<c`uf&Hvwukp?ET*qxb^UO&`f$JOChGkUsZ7Z#
T+?N^I00000NkvXXu0mjfy}e6}

literal 14954
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

diff --git a/frontend/src/main.js b/frontend/src/main.js
index 7b6f399..9f9459c 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
+import axios from 'axios'
 
 import App from './App.vue'
 import Layout from './layout'
@@ -10,6 +11,11 @@ import StyleGenerator from './views/StyleGenerator.vue'
 import Room from './views/Room'
 import NotFound from './views/NotFound.vue'
 
+if (process.env.NODE_ENV === 'development') {
+  // 开发时使用localhost:80
+  axios.defaults.baseURL = 'http://localhost'
+}
+
 Vue.use(VueRouter)
 Vue.use(ElementUI)
 
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 0e9ddfa..472a8f5 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -43,52 +43,68 @@
         </el-form-item>
       </el-tab-pane>
     </el-tabs>
+    <el-divider></el-divider>
+    <el-form-item label="房间URL" v-show="roomUrl">
+      <el-input ref="roomUrlInput" readonly :value="roomUrl" style="width: calc(100% - 6em); margin-right: 1em;"></el-input>
+      <el-button type="primary" @click="copyUrl">复制</el-button>
+    </el-form-item>
     <el-form-item>
-      <el-button type="primary" @click="enterRoom">进入房间</el-button>
-      <el-button type="primary" @click="popupRoom">弹出房间</el-button>
+      <el-button type="primary" @click="saveConfig()">保存配置</el-button>
+      <el-button type="primary" :disabled="!roomUrl" @click="enterRoom">进入房间</el-button>
     </el-form-item>
   </el-form>
 </template>
 
 <script>
+import config from '@/api/config'
+
 export default {
   name: 'Home',
   data() {
     return {
       form: {
         roomId: parseInt(window.localStorage.roomId || '1'),
-        minGiftPrice: 6.911, // $1
-        mergeSimilarDanmaku: true,
-
-        blockGiftDanmaku: true,
-        blockLevel: 0,
-        blockNewbie: true,
-        blockNotMobileVerified: true,
-        blockKeywords: '',
-        blockUsers: '',
-
-        css: ''
-      }
+        ...config.getLocalConfig()
+      },
+      roomUrl: ''
     }
   },
   methods: {
-    saveConfig(callback) {
-      this.$refs.form.validate(valid => {
+    saveConfig() {
+      this.$refs.form.validate(async valid => {
         if (!valid) {
           return
         }
         window.localStorage.roomId = this.form.roomId
-        callback()
+        config.setLocalConfig(this.form)
+
+        try {
+          if (window.localStorage.configId) {
+            try {
+              await config.setRemoteConfig(window.localStorage.configId, this.form)
+            } catch (e) { // 404
+              window.localStorage.configId = (await config.createRemoteConfig(this.form)).id
+            }
+          } else {
+            window.localStorage.configId = (await config.createRemoteConfig(this.form)).id
+          }
+        } catch (e) {
+          this.$message.error('保存失败：' + e)
+          return
+        }
+        this.$message({message: '保存成功', type: 'success'})
+
+        let resolved = this.$router.resolve({name: 'room', params: {roomId: this.form.roomId},
+          query: {config_id: window.localStorage.configId}})
+        this.roomUrl = `http://${window.location.host}${resolved.href}`
       })
     },
     enterRoom() {
-      this.saveConfig(() => this.$router.push({name: 'room', params: {roomId: this.form.roomId}}))
+      window.open(this.roomUrl, `room ${this.form.roomId}`, 'menubar=0,location=0,scrollbars=0,toolbar=0,width=600,height=600')
     },
-    popupRoom() {
-      this.saveConfig(() => {
-        let resolved = this.$router.resolve({name: 'room', params: {roomId: this.form.roomId}})
-        window.open(resolved.href, `room ${this.form.roomId}`, 'menubar=0,location=0,scrollbars=0,toolbar=0,width=600,height=600')
-      })
+    copyUrl() {
+      this.$refs.roomUrlInput.select()
+      document.execCommand('Copy')
     }
   }
 }
diff --git a/frontend/src/views/Room/index.vue b/frontend/src/views/Room/index.vue
index c22b1ee..64cf2a2 100644
--- a/frontend/src/views/Room/index.vue
+++ b/frontend/src/views/Room/index.vue
@@ -33,6 +33,7 @@
 </template>
 
 <script>
+import config from '@/api/config'
 import TextMessage from './TextMessage.vue'
 import LegacyPaidMessage from './LegacyPaidMessage.vue'
 import PaidMessage from './PaidMessage.vue'
@@ -50,13 +51,18 @@ export default {
     PaidMessage
   },
   data() {
+    let styleElement = document.createElement('style')
+    styleElement.innerText = config.DEFAULT_CONFIG.css
+    document.head.appendChild(styleElement)
     return {
+      config: config.DEFAULT_CONFIG,
+      styleElement,
       websocket: null,
       messages: [],
       nextId: 0
     }
   },
-  created() {
+  async created() {
     // 开发时使用localhost:80
     const url = process.env.NODE_ENV === 'development' ? 'ws://localhost/chat' : `ws://${window.location.host}/chat`
     this.websocket = new WebSocket(url)
@@ -85,7 +91,7 @@ export default {
         break
       case COMMAND_ADD_GIFT:
         price = body.data.totalCoin / 1000
-        if (price < 6.911) // 丢人
+        if (price < this.config.minGiftPrice) // 丢人
           break
         message = {
           id: this.nextId++,
@@ -112,8 +118,18 @@ export default {
           this.messages.shift()
       }
     }
+
+    if (this.$route.query.config_id) {
+      try {
+        this.config = await config.getRemoteConfig(this.$route.query.config_id)
+        this.styleElement.innerText = this.config.css
+      } catch (e) {
+        this.$message.error('获取配置失败：' + e)
+      }
+    }
   },
   beforeDestroy() {
+    document.head.removeChild(this.styleElement)
     this.websocket.close()
   },
   updated() {
diff --git a/main.py b/main.py
index 05effb9..1777e92 100644
--- a/main.py
+++ b/main.py
@@ -7,20 +7,15 @@ import os
 import tornado.ioloop
 import tornado.web
 
-import chat
+import views.chat
+import views.config
+import views.main
 
 logger = logging.getLogger(__name__)
 
 WEB_ROOT = os.path.join(os.path.dirname(__file__), 'frontend', 'dist')
 
 
-# noinspection PyAbstractClass
-class MainHandler(tornado.web.StaticFileHandler):
-    """为了使用Vue Router的history模式，把所有请求转发到index.html"""
-    async def get(self, *args, **kwargs):
-        await super().get('index.html', *args, **kwargs)
-
-
 def main():
     parser = argparse.ArgumentParser(description='用于OBS的仿YouTube风格的bilibili直播聊天层')
     parser.add_argument('--host', help='服务器host，默认为127.0.0.1', default='127.0.0.1')
@@ -37,10 +32,13 @@ def main():
 
     app = tornado.web.Application(
         [
-            (r'/chat', chat.ChatHandler),
+            (r'/chat', views.chat.ChatHandler),
+            (r'/config', views.config.ConfigsHandler),
+            (r'/config/(.+)', views.config.ConfigHandler),
+
             (r'/((css|img|js)/.*)', tornado.web.StaticFileHandler, {'path': WEB_ROOT}),
             (r'/(favicon\.ico)', tornado.web.StaticFileHandler, {'path': WEB_ROOT}),
-            (r'/.*', MainHandler, {'path': WEB_ROOT})
+            (r'/.*', views.main.MainHandler, {'path': WEB_ROOT})
         ],
         websocket_ping_interval=30,
         debug=args.debug,
diff --git a/views/base.py b/views/base.py
new file mode 100644
index 0000000..b51ff81
--- /dev/null
+++ b/views/base.py
@@ -0,0 +1,28 @@
+# -*- coding: utf-8 -*-
+
+import json
+
+import tornado.web
+
+
+# noinspection PyAbstractClass
+class ApiHandler(tornado.web.RequestHandler):
+    def set_default_headers(self):
+        # 跨域测试用
+        if not self.application.settings['debug']:
+            return
+        self.set_header('Access-Control-Allow-Origin', '*')
+        self.set_header('Access-Control-Allow-Methods', 'OPTIONS, PUT, POST, GET, DELETE')
+        if 'Access-Control-Request-Headers' in self.request.headers:
+            self.set_header('Access-Control-Allow-Headers',
+                            self.request.headers['Access-Control-Request-Headers'])
+
+    def prepare(self):
+        if self.request.headers.get('Content-Type', '').startswith('application/json'):
+            self.json_args = json.loads(self.request.body)
+        else:
+            self.json_args = None
+
+    async def options(self, *_args, **_kwargs):
+        # 跨域测试用
+        self.set_status(204 if self.application.settings['debug'] else 405)
diff --git a/chat.py b/views/chat.py
similarity index 100%
rename from chat.py
rename to views/chat.py
diff --git a/views/config.py b/views/config.py
new file mode 100644
index 0000000..989b426
--- /dev/null
+++ b/views/config.py
@@ -0,0 +1,50 @@
+# -*- coding: utf-8 -*-
+
+import uuid
+
+import views.base
+from typing import *
+
+configs: Dict[str, dict] = {}
+
+ALLOWED_FIELDS = (
+    'minGiftPrice', 'mergeSimilarDanmaku', 'blockGiftDanmaku', 'blockLevel',
+    'blockNewbie', 'blockNotMobileVerified', 'blockKeywords', 'blockUsers',
+    'css'
+)
+
+
+# noinspection PyAbstractClass
+class ConfigsHandler(views.base.ApiHandler):
+    async def post(self):
+        config_id = str(uuid.uuid4())
+        config = {
+            name: self.json_args[name] for name in ALLOWED_FIELDS
+        }
+        config['id'] = config_id
+        configs[config_id] = config
+        self.set_status(201)
+        self.write(config)
+
+        if len(configs) > 10000:
+            for _, key in zip(range(100), configs):
+                del configs[key]
+
+
+# noinspection PyAbstractClass
+class ConfigHandler(views.base.ApiHandler):
+    async def put(self, config_id):
+        config = configs.get(config_id, None)
+        if config is None:
+            self.set_status(404)
+            return
+        for name in ALLOWED_FIELDS:
+            config[name] = self.json_args[name]
+        self.write(config)
+
+    async def get(self, config_id):
+        config = configs.get(config_id, None)
+        if config is None:
+            self.set_status(404)
+            return
+        self.write(config)
diff --git a/views/main.py b/views/main.py
new file mode 100644
index 0000000..e34b0c9
--- /dev/null
+++ b/views/main.py
@@ -0,0 +1,10 @@
+# -*- coding: utf-8 -*-
+
+import tornado.web
+
+
+# noinspection PyAbstractClass
+class MainHandler(tornado.web.StaticFileHandler):
+    """为了使用Vue Router的history模式，把所有请求转发到index.html"""
+    async def get(self, *args, **kwargs):
+        await super().get('index.html', *args, **kwargs)