[+] 改名

2023-02-05 17:31:56 +08:00
parent e43f9283e7
commit dbae093272
33 changed files with 11 additions and 11 deletions
--- a/taoyao-client-web/src/App.vue
+++ b/taoyao-client-web/src/App.vue
@@ -0,0 +1,47 @@
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+import TheWelcome from './components/TheWelcome.vue'
+</script>
+
+<template>
+  <header>
+    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+
+    <div class="wrapper">
+      <HelloWorld msg="You did it!" />
+    </div>
+  </header>
+
+  <main>
+    <TheWelcome />
+  </main>
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+}
+</style>
--- a/taoyao-client-web/src/assets/base.css
+++ b/taoyao-client-web/src/assets/base.css
@@ -0,0 +1,74 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/taoyao-client-web/src/assets/logo.svg
+++ b/taoyao-client-web/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/taoyao-client-web/src/assets/main.css
+++ b/taoyao-client-web/src/assets/main.css
@@ -0,0 +1,35 @@
+@import './base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+}
--- a/taoyao-client-web/src/components/HelloWorld.vue
+++ b/taoyao-client-web/src/components/HelloWorld.vue
@@ -0,0 +1,43 @@
+<script setup>
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      You’ve successfully created a project with
+      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>
--- a/taoyao-client-web/src/components/TheWelcome.vue
+++ b/taoyao-client-web/src/components/TheWelcome.vue
@@ -0,0 +1,86 @@
+<script setup>
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Documentation</template>
+
+    Vue’s
+    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+    provides you with all information you need to get started.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Tooling</template>
+
+    This project is served and bundled with
+    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
+    recommended IDE setup is
+    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
+    you need to test your components and web pages, check out
+    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
+    <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
+
+    <br />
+
+    More instructions are available in <code>README.md</code>.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <EcosystemIcon />
+    </template>
+    <template #heading>Ecosystem</template>
+
+    Get official tools and libraries for your project:
+    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
+    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
+    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+    you need more resources, we suggest paying
+    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+    a visit.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <CommunityIcon />
+    </template>
+    <template #heading>Community</template>
+
+    Got stuck? Ask your question on
+    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
+    Discord server, or
+    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+      >StackOverflow</a
+    >. You should also subscribe to
+    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
+    the official
+    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
+    twitter account for latest news in the Vue world.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>Support Vue</template>
+
+    As an independent project, Vue relies on community backing for its sustainability. You can help
+    us by
+    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+  </WelcomeItem>
+</template>
--- a/taoyao-client-web/src/components/WelcomeItem.vue
+++ b/taoyao-client-web/src/components/WelcomeItem.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="item">
+    <i>
+      <slot name="icon"></slot>
+    </i>
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 2rem;
+  display: flex;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+i {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+
+  color: var(--color-text);
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    top: calc(50% - 25px);
+    left: -26px;
+    position: absolute;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>
--- a/taoyao-client-web/src/components/icons/IconCommunity.vue
+++ b/taoyao-client-web/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
--- a/taoyao-client-web/src/components/icons/IconDocumentation.vue
+++ b/taoyao-client-web/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
--- a/taoyao-client-web/src/components/icons/IconEcosystem.vue
+++ b/taoyao-client-web/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
--- a/taoyao-client-web/src/components/icons/IconSupport.vue
+++ b/taoyao-client-web/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
--- a/taoyao-client-web/src/components/icons/IconTooling.vue
+++ b/taoyao-client-web/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
--- a/taoyao-client-web/src/main.js
+++ b/taoyao-client-web/src/main.js
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import './assets/main.css'
+
+createApp(App).mount('#app')
--- a/taoyao-client-web/src/static/css/font.min.css
+++ b/taoyao-client-web/src/static/css/font.min.css
--- a/taoyao-client-web/src/static/css/style.css
+++ b/taoyao-client-web/src/static/css/style.css
@@ -0,0 +1,36 @@
+@charset "UTF-8";
+/**文本选择*/
+::selection{background:#222;color:#fff;}
+/**字体大小*/
+@media screen and (min-width:800px){html{font-size:16px;}}
+@media screen and (min-width:1200px){html{font-size:18px;}}
+@media screen and (min-width:1600px){html{font-size:20px;}}
+/**默认样式*/
+*{margin:0;padding:0;border:none;outline:none;box-sizing:content-box;}
+html{background:#EBEBEB;}
+html,body{font-family:Arial,Consolas,SimSun,"宋体";color:#222;font-weight:normal;}
+body{width:100%;height:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:1rem;line-height:1.4em;}
+a{color:#1155AA;text-decoration:none;}
+a:link{text-decoration:none;}
+a:hover{color:#4477EE;text-decoration:none;}
+a:visited{text-decoration:none;}
+img{border:0;}
+ol,ul,li{list-style:none;}
+input[type=text],textarea{box-shadow:0px 0px 3px 0px rgba(0,0,0,0.1) inset;border:1px solid rgba(0,0,0,0.1)!important;}
+input[type=text]:focus,textarea:focus,input[type=text]:hover,textarea:hover{border:1px solid #1155AA!important;}
+input::-webkit-calendar-picker-indicator{color:#1155AA;background:none;}
+/**容器*/
+.taoyao{text-align:center;}
+/**会议*/
+.taoyao .handler a{cursor:pointer;}
+.taoyao > .handler{font-size:2rem;padding:1rem 0;width:100%;}
+.taoyao .list{width:90vw;margin:auto;}
+.taoyao .meeting{float:left;overflow:hidden;position:relative;width:calc(25% - 2rem);border:1rem solid #fff;}
+.taoyao .me,.taoyao .meeting:hover{border-color:#060;}
+.taoyao .meeting > .video{height:15vw;}
+.taoyao .meeting > .video video{width:100%;height:100%;}
+.taoyao .meeting .handler{position:absolute;bottom:0rem;text-align:center;width:100%;background:rgba(0,0,0,0.2);padding:0.2rem 0;}
+.taoyao .meeting .handler a{color:#fff;}
+.taoyao .meeting .handler a:hover{color:#060!important;}
+.taoyao .meeting .handler a.expel:hover{color:#C00!important;}
+.taoyao .meeting .handler a.record.active{color:#C00;}
--- a/taoyao-client-web/src/static/favicon.ico
+++ b/taoyao-client-web/src/static/favicon.ico
--- a/taoyao-client-web/src/static/fonts/taoyao.svg
+++ b/taoyao-client-web/src/static/fonts/taoyao.svg
--- a/taoyao-client-web/src/static/fonts/taoyao.ttf
+++ b/taoyao-client-web/src/static/fonts/taoyao.ttf
--- a/taoyao-client-web/src/static/fonts/taoyao.woff
+++ b/taoyao-client-web/src/static/fonts/taoyao.woff
--- a/taoyao-client-web/src/static/index.html
+++ b/taoyao-client-web/src/static/index.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>会议</title>
+<link rel="stylesheet" type="text/css" href="./css/font.min.css" />
+<link rel="stylesheet" type="text/css" href="./css/style.css" />
+<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
+<script type="text/javascript" src="./javascript/taoyao.js"></script>
+</head>
+<body>
+	<div class="taoyao" id="app">
+		<div class="handler">
+			<a class="create icon-make-group" title="创建会议" @click="create"></a>
+			<a class="invite icon-address-book" title="邀请会议" @click="invite"></a>
+			<a class="enter icon-enter" title="进入会议" @click="enter"></a>
+			<a class="leave icon-exit" title="离开会议" @click="leave"></a>
+			<a class="close icon-switch" title="关闭会议" @click="close"></a>
+		</div>
+		<div class="list">
+			<div class="meeting me">
+				<div class="video">
+					<video id="local"></video>
+				</div>
+				<div class="handler">
+					<a class="audio icon-volume-medium" title="音频状态" @click="audioSelf"></a>
+					<a class="video icon-play2" title="视频状态" @click="videoSelf"></a>
+					<a class="record icon-radio-checked" title="录制视频" @click="recordSelf"></a>
+				</div>
+			</div>
+			<div class="meeting" v-for="client in this.remoteClient" :key="client.sn">
+				<div class="video">
+					<video v-bind:id="client.sn"></video>
+				</div>
+				<div class="handler">
+					<a class="audio" title="音频状态" v-bind:class="client.audioStatus?'icon-volume-medium':'icon-volume-mute2'" @click="audio(client.sn)"></a>
+					<a class="video" title="视频状态" v-bind:class="client.videoStatus?'icon-play2':'icon-stop'" @click="video(client.sn)"></a>
+					<a class="record icon-radio-checked" title="录制视频" v-bind:class="client.recordStatus?'active':''" @click="record(client.sn)"></a>
+					<a class="expel icon-cancel-circle" title="踢出会议" @click="expel(client.sn)"></a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<script type="text/javascript">
+	const vue = new Vue({
+		el: "#app",
+		data: {
+			taoyao: null,
+			remoteClient: [],
+			meetingId: null
+		},
+		mounted() {
+			// 设置帐号
+			let sn = prompt('你的账号', signalConfig.sn);
+			signalConfig.sn = sn;
+			// 加载桃夭
+			let self = this;
+			this.taoyao = new Taoyao('local');
+			this.remoteClient = this.taoyao.remoteClient;
+			// 打开信令通道
+			this.taoyao
+				.buildChannel(self.callback)
+				.then(e => console.debug('信令通道连接成功'));
+		},
+		beforeDestroy() {
+		},
+		methods: {
+			// 信令回调：true表示已经处理；false表示没有处理；
+			callback: function(data) {
+				let self = this;
+				switch(data.header.pid) {
+				}
+				return false;
+			},
+			// 创建会议
+			create: function(event) {
+				let self = this;
+				this.taoyao.meetingCreate(data => {
+					self.taoyao.meetingEnter(data.body.id);
+					return true;
+				});
+			},
+			// 会议邀请
+			invite: function(sn) {
+			},
+			// 进入会议
+			enter: function(sn) {
+				let id = prompt('房间标识');
+				let password = prompt('房间密码');
+				if(id) {
+					this.taoyao.meetingEnter(id);
+				}
+			},
+			// 离开会议
+			leave: function(sn) {
+			},
+			// 关闭会议
+			close: function(sn) {
+			},
+			// 控制音频
+			audio: function(sn) {
+				this.client(sn).audio = !this.client(sn).audio;
+			},
+			// 控制视频
+			video: function(sn) {
+				this.client(sn).video = !this.client(sn).video;
+			},
+			// 录制视频
+			record: function(sn) {
+				this.client(sn).record = !this.client(sn).record;
+			},
+			// 踢出会议
+			expel: function(sn) {
+			},
+			// 控制音频
+			audioSelf: function(sn) {
+			},
+			// 控制视频
+			videoSelf: function(sn) {
+			},
+			// 录制视频
+			recordSelf: function(sn) {
+			}
+		}
+	});
+	</script>
+</body>
+</html>
--- a/taoyao-client-web/src/static/javascript/taoyao.js
+++ b/taoyao-client-web/src/static/javascript/taoyao.js
@@ -0,0 +1,832 @@
+/**
+ * 桃夭WebRTC终端核心功能
+ * 
+ * 代码注意：
+ * 1. undefined判断使用两个等号，其他情况使用三个。
+*/
+/** 兼容 */
+const RTCIceCandidate = window.RTCIceCandidate || window.mozRTCIceCandidate || window.webkitRTCIceCandidate;
+const RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
+const RTCSessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription;
+/** 默认音频配置 */
+const defaultAudioConfig = {
+	// 设备
+	// deviceId : '',
+	// 音量：0~1
+	volume: 0.5,
+	// 延迟大小（单位毫秒）：500毫秒以内较好
+	latency: 0.4,
+	// 采样数：16
+	sampleSize: 16,
+	// 采样率：8000|16000|32000|48000
+	sampleRate: 32000,
+	// 声道数量：1|2
+	channelCount : 1,
+	// 是否开启自动增益：true|false
+	autoGainControl: false,
+	// 是否开启降噪功能：true|false
+	noiseSuppression: true,
+	// 是否开启回音消除：true|false
+	echoCancellation: true,
+	// 消除回音方式：system|browser
+	echoCancellationType: 'system'
+};
+/** 默认视频配置 */
+const defaultVideoConfig = {
+	// 设备
+	// deviceId: '', 
+	// 宽度
+	width: 1280,
+	// 高度
+	height: 720,
+	// 帧率
+	frameRate: 24,
+	// 选摄像头：user|left|right|environment 
+	facingMode: 'environment'
+}
+/** 默认RTCPeerConnection配置 */
+const defaultRPCConfig = {
+	// ICE代理的服务器
+	iceServers: null,
+	// 传输通道绑定策略：balanced|max-compat|max-bundle
+	bundlePolicy: 'balanced',
+	// RTCP多路复用策略：require|negotiate
+	rtcpMuxPolicy: 'require',
+	// ICE传输策略：all|relay
+	iceTransportPolicy: 'all'
+	// ICE候选个数
+	// iceCandidatePoolSize: 8
+}
+/** 信令配置 */
+const signalConfig = {
+	/** 当前终端SN */
+	sn: 'taoyao',
+	/** 当前版本 */
+	version: '1.0.0',
+	// 信令授权
+	username: 'taoyao',
+	password: 'taoyao'
+};
+/** 信令协议 */
+const signalProtocol = {
+	/** 媒体信令 */
+	media: {
+		/** 发布 */
+		publish: 5000,
+		/** 订阅 */
+		subscribe: 5002,
+		/** 候选 */
+		offer: 5997,
+		/** Answer */
+		answer: 5998,
+		/** 候选 */
+		candidate: 5999
+	},
+	/** 终端信令 */
+	client: {
+		/** 注册 */
+		register:  2000,
+		/** 下发配置 */
+		config: 2004,
+		/** 心跳 */
+		heartbeat: 2005,
+		/** 重启终端 */
+		reboot: 2997,
+	},
+	/** 会议信令 */
+	meeting: {
+		/** 创建会议信令 */
+		create: 4000,
+		/** 进入会议信令 */
+		enter: 4002,
+	},
+	/** 平台信令 */
+	platform: {
+		/** 异常 */
+		error: 1999
+	},
+	/** 当前索引 */
+	index: 100000,
+	/** 最小索引 */
+	minIndex: 100000,
+	/** 最大索引 */
+	maxIndex: 999999,
+	/** 生成索引 */
+	buildId: function() {
+		if(this.index++ >= this.maxIndex) {
+			this.index = this.minIndex;
+		}
+		return Date.now() + '' + this.index;
+	},
+	/** 生成信令消息 */
+	buildProtocol: function(pid, body, id) {
+		let message = {
+			header: {
+				v: signalConfig.version,
+				id: id || this.buildId(),
+				sn: signalConfig.sn,
+				pid: pid,
+			},
+			'body': body
+		};
+		return message;
+	}
+};
+/** 信令通道 */
+const signalChannel = {
+	/** 桃夭 */
+	taoyao: null,
+	/** 通道 */
+	channel: null,
+	/** 地址 */
+	address: null,
+	/** 回调 */
+	callback: null,
+	/** 回调事件 */
+	callbackMapping: new Map(),
+	/** 心跳时间 */
+	heartbeatTime: 30 * 1000,
+	/** 心跳定时器 */
+	heartbeatTimer: null,
+	/** 重连定时器 */
+	reconnectTimer: null,
+	/** 防止重复重连 */
+	lockReconnect: false,
+	/** 当前重连时间 */
+	connectionTimeout: 5 * 1000,
+	/** 最小重连时间 */
+	minReconnectionDelay: 5 * 1000,
+	/** 最大重连时间 */
+	maxReconnectionDelay: 60 * 1000,
+	/** 重连失败时间增长倍数 */
+	reconnectionDelayGrowFactor: 2,
+	/** 心跳 */
+	heartbeat: function() {
+		let self = this;
+		if(self.heartbeatTimer) {
+			clearTimeout(self.heartbeatTimer);
+		}
+		self.heartbeatTimer = setTimeout(function() {
+			// 电池：navigator.getBattery()
+			if (self.channel && self.channel.readyState === WebSocket.OPEN) {
+				self.push(signalProtocol.buildProtocol(
+					signalProtocol.client.heartbeat,
+					{
+						signal: 100,
+						battery: 100
+					}
+				));
+				self.heartbeat();
+			} else {
+				console.warn('发送心跳失败', self.channel);
+			}
+		}, self.heartbeatTime);
+	},
+	/** 连接 */
+	connect: function(address, callback, reconnection = true) {
+		let self = this;
+		self.address = address;
+		self.callback = callback;
+		return new Promise((resolve, reject) => {
+			console.debug('连接信令通道', address);
+			self.channel = new WebSocket(address);
+			self.channel.onopen = function(e) {
+				console.debug('打开信令通道', e);
+				// 注册终端
+				self.push(signalProtocol.buildProtocol(
+					signalProtocol.client.register,
+					{
+						ip: null,
+						mac: null,
+						signal: 100,
+						battery: 100,
+						username: signalConfig.username,
+						password: signalConfig.password
+					}
+				));
+				// 重置时间
+				self.connectionTimeout = self.minReconnectionDelay
+				// 开始心跳
+				self.heartbeat();
+				// 成功回调
+				resolve(e);
+			};
+			self.channel.onclose = function(e) {
+				console.error('信令通道关闭', self.channel, e);
+				if(reconnection) {
+					self.reconnect();
+				}
+				reject(e);
+			};
+			self.channel.onerror = function(e) {
+				console.error('信令通道异常', self.channel, e);
+				if(reconnection) {
+					self.reconnect();
+				}
+				reject(e);
+			};
+			/**
+			 * 回调策略：
+			 * 1. 如果注册请求回调，同时执行结果返回true不再执行后面所有回调。
+			 * 2. 如果注册全局回调，同时执行结果返回true不再执行后面所有回调。
+			 * 3. 如果前面所有回调没有返回true执行默认回调。
+			 */
+			self.channel.onmessage = function(e) {
+				console.debug('信令通道消息', e.data);
+				let done = false;
+				let data = JSON.parse(e.data);
+				// 请求回调
+				if(self.callbackMapping.has(data.header.id)) {
+					try {
+						done = self.callbackMapping.get(data.header.id)(data);
+					} finally {
+						self.callbackMapping.delete(data.header.id);
+					}
+				}
+				// 全局回调
+				if(self.callback) {
+					done = self.callback(data);
+				}
+				// 默认回调
+				if(!done) {
+					self.defaultCallback(data);
+				}
+			};
+		});
+	},
+	/** 重连 */
+	reconnect: function() {
+		let self = this;
+		if (self.lockReconnect) {
+			return;
+		}
+		self.lockReconnect = true;
+		// 关闭旧的通道
+		if(self.channel && self.channel.readyState === WebSocket.OPEN) {
+			self.channel.close();
+			self.channel = null;
+		}
+		if(self.reconnectTimer) {
+			clearTimeout(self.reconnectTimer);
+		}
+		// 打开定时重连
+		self.reconnectTimer = setTimeout(function() {
+			console.info('信令通道重连', self.address, new Date());
+			self.connect(self.address, self.callback, true);
+			self.lockReconnect = false;
+		}, self.connectionTimeout);
+		if (self.connectionTimeout >= self.maxReconnectionDelay) {
+			self.connectionTimeout = self.maxReconnectionDelay;
+		} else {
+			self.connectionTimeout = self.connectionTimeout * self.reconnectionDelayGrowFactor
+		}
+	},
+	/** 发送消息 */
+	push: function(data, callback) {
+		// 注册回调
+		if(data && callback) {
+			this.callbackMapping.set(data.header.id, callback);
+		}
+		// 发送消息
+		if(data && data.header) {
+			this.channel.send(JSON.stringify(data));
+		} else {
+			this.channel.send(data);
+		}
+	},
+	/** 关闭通道 */
+	close: function() {
+		clearTimeout(this.heartbeatTimer);
+	},
+	/** 默认回调 */
+	defaultCallback: function(data) {
+		console.debug('没有适配信令消息默认处理', data);
+		switch(data.header.pid) {
+		case signalProtocol.media.publish:
+			this.defaultMediaPublish(data);
+		break;
+		case signalProtocol.media.subscribe:
+			this.defaultMediaSubscribe(data);
+		break;
+		case signalProtocol.media.offer:
+			this.defaultMediaOffer(data);
+		break;
+		case signalProtocol.media.answer:
+			this.defaultMediaAnswer(data);
+		break;
+		case signalProtocol.media.candidate:
+			this.defaultMediaCandidate(data);
+		break;
+		case signalProtocol.client.register:
+		break;
+		case signalProtocol.client.config:
+			this.defaultClientConfig(data);
+		break;
+		case signalProtocol.client.heartbeat:
+		break;
+		case signalProtocol.client.reboot:
+			this.defaultClientReboot(data);
+		break;
+		case signalProtocol.meeting.create:
+		break;
+		case signalProtocol.meeting.enter:
+			this.defaultMeetingEnter(data);
+		break;
+		case signalProtocol.platform.error:
+			console.error('信令发生错误', data);
+		break;
+		}
+	},
+	/** 终端默认回调 */
+	defaultClientConfig: function(data) {
+		let self = this;
+		// 配置终端
+		self.taoyao
+			.configMedia(data.body.media.audio, data.body.media.video)
+			.configWebrtc(data.body.webrtc);
+		// 打开媒体通道
+		let videoId = self.taoyao.videoId;
+		if(videoId) {
+			self.taoyao.buildLocalMedia()
+				.then(stream => {
+					self.taoyao.buildMediaChannel(videoId, stream);
+				})
+				.catch(e => console.error('打开终端媒体失败', e));
+			console.debug('自动打开媒体通道', videoId);
+		} else {
+			console.debug('没有配置本地媒体信息跳过自动打开媒体通道');
+		}
+	},
+	defaultClientReboot: function(data) {
+		console.info('重启终端');
+		location.reload();
+	},
+	/** 默认媒体回调 */
+	defaultMediaPublish: function(data) {
+	},
+	defaultMediaSubscribe: function(data) {
+		let self = this;
+		const from = data.body.from;
+		const remote = this.taoyao.remoteClientFilter(from, true);
+		remote.localMediaChannel.createOffer().then(description => {
+			console.debug('Local Create Offer', description);
+			remote.localMediaChannel.setLocalDescription(description);
+			self.push(signalProtocol.buildProtocol(
+				signalProtocol.media.offer,
+				{
+					to: from,
+					sdp: {
+						sdp: description.sdp,
+						type: description.type
+					}
+				}
+			));
+		});
+	},
+	defaultMediaOffer: function(data) {
+		let self = this;
+		const from = data.body.from;
+		const remote = this.taoyao.remoteClientFilter(from, true);
+		remote.remoteMediaChannel.setRemoteDescription(new RTCSessionDescription(data.body.sdp));
+		remote.remoteMediaChannel.createAnswer().then(description => {
+			console.debug('Remote Create Answer', description);
+			remote.remoteMediaChannel.setLocalDescription(description);
+			self.push(signalProtocol.buildProtocol(
+				signalProtocol.media.answer,
+				{
+					to: from,
+					sdp: {
+						sdp: description.sdp,
+						type: description.type
+					}
+				}
+			));
+		});
+	},
+	defaultMediaAnswer: function(data) {
+		const from = data.body.from;
+		const remote = this.taoyao.remoteClientFilter(from, true);
+		remote.localMediaChannel.setRemoteDescription(new RTCSessionDescription(data.body.sdp));
+	},
+	defaultMediaCandidate: function(data) {
+		if(!this.taoyao.checkCandidate(data.body.candidate)) {
+			console.debug('候选缺失要素', data);
+			return;
+		}
+		console.debug('Set ICE Candidate', data.body);
+		const from = data.body.from;
+		const remote = this.taoyao.remoteClientFilter(from, true);
+		if(data.body.type === 'local') {
+			remote.remoteMediaChannel.addIceCandidate(new RTCIceCandidate(data.body.candidate));
+		} else if(data.body.type === 'remote'){
+			remote.localMediaChannel.addIceCandidate(new RTCIceCandidate(data.body.candidate));
+		} else if(data.body.type === 'mesh') {
+			remote.localMediaChannel.addIceCandidate(new RTCIceCandidate(data.body.candidate));
+			// remote.remoteMediaChannel.addIceCandidate(new RTCIceCandidate(data.body.candidate));
+		} else {
+			console.warn('不支持的候选类型', data.body.type);
+		}
+	},
+	/** 会议默认回调 */
+	defaultMeetingEnter: function(data) {
+		this.taoyao.mediaSubscribe(data.body.sn);
+	}
+};
+/** 终端 */
+function TaoyaoClient(
+	taoyao,
+	sn,
+	shareMediaChannel,
+	audioEnabled,
+	videoEnabled
+) {
+	/** 桃夭 */
+	this.taoyao = taoyao;
+	/** 终端标识 */
+	this.sn = sn;
+	/** 视频对象 */
+	this.video = null;
+	/** 媒体信息 */
+	this.stream = null;
+	this.audioTrack = [];
+	this.videoTrack = [];
+	/** 媒体状态：是否含有 */
+	this.audioStatus = false;
+	this.videoStatus = false;
+	this.recordStatus = false;
+	/** 本地媒体通道 */
+	this.localMediaChannel = null;
+	/** 远程媒体通道 */
+	this.remoteMediaChannel = null;
+	/** 是否共享媒体通道 */
+	this.shareMediaChannel = shareMediaChannel;
+	/** 媒体状态：是否播放 */
+	this.audioEnabled = audioEnabled == undefined ? true : audioEnabled;
+	this.videoEnabled = videoEnabled == undefined ? true : videoEnabled;
+	/** 重置 */
+	this.reset = function() {
+	}
+	/** 播放视频 */
+	this.play = async function() {
+		await this.video.play();
+		return this;
+	};
+	/** 重新加载 */
+	this.load = async function() {
+		await this.video.load();
+		return this;
+	}
+	/** 暂停视频 */
+	this.pause = async function() {
+		await this.video.pause();
+		return this;
+	};
+	/** 关闭视频 */
+	this.close = async function() {
+		await this.video.close();
+		// TODO：释放连接
+		return this;
+	};
+	/** 设置媒体 */
+	// TODO：stream判断
+	this.buildStream = async function(videoId, stream, track) {
+		if(!this.video && videoId) {
+			this.video = document.getElementById(videoId);
+		}
+		if(!this.video) {
+			throw new Error('视频对象无效：' + videoId);
+		}
+		if(!this.stream) {
+			this.stream = new MediaStream();
+			this.video.srcObject = this.stream;
+		}
+		if(track) {
+			if(track.kind === 'audio') {
+				this.buildAudioTrack(track);
+			}
+			if(track.kind === 'video') {
+				this.buildVideoTrack(track);
+			}
+		} else if(stream) {
+			let audioTrack = stream.getAudioTracks();
+			let videoTrack = stream.getVideoTracks();
+			// TODO：验证API试试修改媒体
+			// audioTrack.getSettings
+			// audioTrack.getCapabilities
+			// audioTrack.applyCapabilities
+			if(audioTrack && audioTrack.length) {
+				audioTrack.forEach(v => this.buildAudioTrack(v));
+			}
+			if(videoTrack && videoTrack.length) {
+				videoTrack.forEach(v => this.buildVideoTrack(v));
+			}
+		} else {
+			throw new Error('无效媒体信息');
+		}
+		console.debug('设置媒体', this.video, this.stream, this.audioTrack, this.videoTrack);
+		await this.load();
+		await this.play();
+		return this;
+	};
+	/** 设置音频流 */
+	this.buildAudioTrack = function(track) {
+		// 关闭旧的
+		// 创建新的
+		track.sn = this.sn;
+		this.audioStatus = true;
+		this.audioTrack.push(track);
+		if(this.audioEnabled) {
+			this.stream.addTrack(track);
+		}
+	};
+	/** 设置视频流 */
+	this.buildVideoTrack = function(track) {
+		// 关闭旧的
+		// 创建新的
+		track.sn = this.sn;
+		this.videoStatus = true;
+		this.videoTrack.push(track);
+		if(this.videoEnabled) {
+			this.stream.addTrack(track);
+		}
+	};
+	/** 打开媒体通道 */
+	this.openMediaChannel = function() {
+		if(this.shareMediaChannel) {
+			this.localMediaChannel = this.taoyao.localMediaChannel;
+			this.remoteMediaChannel = this.taoyao.remoteMediaChannel;
+		} else {
+			let self = this;
+			// 本地通道
+			let mediaChannel = new RTCPeerConnection(defaultRPCConfig);
+			self.taoyao.localClient.audioTrack.forEach(v => mediaChannel.addTrack(v, self.taoyao.localClient.stream));
+			self.taoyao.localClient.videoTrack.forEach(v => mediaChannel.addTrack(v, self.taoyao.localClient.stream));
+			mediaChannel.ontrack = function(e) {
+				console.debug('Mesh Media Track', self.sn, e);
+				let remote = self.taoyao.remoteClientFilter(self.sn);
+				// TODO：判断数量
+				remote.buildStream(remote.sn, e.streams[0], e.track);
+			};
+			mediaChannel.onicecandidate = function(e) {
+				// TODO：判断给谁
+				let to = self.taoyao.remoteClient.map(v => v.sn)[0];
+				if(!self.taoyao.checkCandidate(e.candidate)) {
+					console.debug('Send Mesh ICE Candidate Fail', e);
+					return;
+				}
+				console.debug('Send Mesh ICE Candidate', to, e);
+				self.taoyao.push(signalProtocol.buildProtocol(
+					signalProtocol.media.candidate,
+					{
+						to: to,
+						type: 'mesh',
+						candidate: e.candidate
+					}
+				));
+			};
+			this.localMediaChannel = mediaChannel;
+			this.remoteMediaChannel = mediaChannel;
+		}
+	};
+}
+/** 桃夭 */
+function Taoyao(
+	videoId,
+	webSocket,
+	localClientAudioEnabled,
+	localClientVideoEnabled
+) {
+	/** 本地视频ID */
+	this.videoId = videoId;
+	/** WebRTC配置 */
+	this.webrtc = null;
+	/** WebSocket地址 */
+	// "wss://192.168.1.100:8888/websocket.signal"
+	this.webSocket = webSocket || 'wss://' + location.host + '/websocket.signal';
+	/** 设备状态 */
+	this.audioEnabled = true;
+	this.videoEnabled = true;
+	/** 媒体配置 */
+	this.audioConfig = defaultAudioConfig;
+	this.videoConfig = defaultVideoConfig;
+	/** 发送信令 */
+	this.push = null;
+	/** 本地终端 */
+	this.localClient = null;
+	this.localMediaChannel = null;
+	/** 本地媒体状态 */
+	this.localClientAudioEnabled = localClientAudioEnabled == undefined ? false : localClientAudioEnabled;
+	this.localClientVideoEnabled = localClientVideoEnabled == undefined ? true : localClientVideoEnabled;
+	/** 远程终端 */
+	this.remoteClient = [];
+	this.remoteMediaChannel = null;
+	/** 是否共享媒体通道 */
+	this.shareMediaChannel = true;
+	/** 信令通道 */
+	this.signalChannel = null;
+	/** 媒体配置 */
+	this.configMedia = function(audio = {}, video = {}) {
+		this.audioConfig = {...this.audioConfig, ...audio};
+		this.videoConfig = {...this.videoConfig, ...video};
+		console.debug('终端媒体配置', this.audioConfig, this.videoConfig);
+		return this;
+	};
+	/** WebRTC配置 */
+	this.configWebrtc = function(config = {}) {
+		this.webrtc = config;
+		this.webSocket = this.webrtc.signal.address;
+		this.shareMediaChannel = this.webrtc.framework === 'MOON';
+		defaultRPCConfig.iceServers = this.webrtc.stun.map(v => ({'urls': v}));
+		console.debug('WebRTC配置', this.webrtc, defaultRPCConfig);
+		return this;
+	};
+	/** 打开信令通道 */
+	this.buildChannel = function(callback) {
+		signalChannel.taoyao = this;
+		this.signalChannel = signalChannel;
+		// 不能直接this.push = this.signalChannel.push这样导致this对象错误
+		this.push = function(data, pushCallback) {
+			this.signalChannel.push(data, pushCallback);
+		};
+		return this.signalChannel.connect(this.webSocket, callback);
+	};
+	/** 打开本地媒体 */
+	this.buildLocalMedia = function() {
+		let self = this;
+		return new Promise((resolve, reject) => {
+			if(
+				navigator.mediaDevices &&
+				navigator.mediaDevices.getUserMedia &&
+				navigator.mediaDevices.enumerateDevices
+			) {
+				navigator.mediaDevices.enumerateDevices()
+				.then(list => {
+					let audioEnabled = false;
+					let videoEnabled = false;
+					list.forEach(v => {
+						console.debug('终端媒体设备', v, v.kind, v.label);
+						switch(v.kind) {
+						case 'audioinput':
+							audioEnabled = true;
+						break;
+						case 'videoinput':
+							videoEnabled = true;
+						break;
+						default:
+							console.debug('没有适配设备', v.kind, v.label);
+						break;
+						}
+					});
+					if(!audioEnabled) {
+						console.warn('终端没有音频输入设备');
+						self.audioEnabled = false;
+					}
+					if(!videoEnabled) {
+						console.warn('终端没有视频输入设备');
+						self.videoEnabled = false;
+					}
+					console.debug('打开终端媒体', self.audioEnabled, self.videoEnabled, self.audioConfig, self.videoConfig);
+					navigator.mediaDevices.getUserMedia({
+						audio: self.audioEnabled ? self.audioConfig : false,
+						video: self.videoEnabled ? self.videoConfig : false
+					})
+					.then(resolve)
+					.catch(reject);
+				})
+				.catch(e => {
+					console.error('检查终端设备异常', e);
+					self.videoEnabled = false;
+					self.videoEnabled = false;
+				});
+			} else {
+				throw new Error('不支持的终端设备');
+			}
+		});
+	};
+	/** 远程终端过滤 */
+	this.remoteClientFilter = function(sn, autoBuild) {
+		if(sn === signalConfig.sn) {
+			console.warn('远程终端等于本地终端');
+			return this.localClient;
+		}
+		let array = this.remoteClient.filter(v => v.sn === sn);
+		let remote = null;
+		if(array.length > 0) {
+			remote = array[0];
+		} else if(autoBuild) {
+			remote = new TaoyaoClient(this, sn, this.shareMediaChannel);
+			remote.openMediaChannel();
+			this.remoteClient.push(remote);
+		}
+		return remote;
+	};
+	/** 关闭：关闭媒体 */
+	this.close = function() {
+		// TODO：释放资源
+	};
+	/** 关机：关闭媒体、关闭信令 */
+	this.shutdown = function() {
+		this.close();
+	};
+	/** 打开媒体通道 */
+	this.buildMediaChannel = async function(localVideoId, stream) {
+		let self = this;
+		// 本地视频
+		this.localClient = new TaoyaoClient(this, signalConfig.sn, this.shareMediaChannel, this.localClientAudioEnabled, this.localClientVideoEnabled);
+		await this.localClient.buildStream(localVideoId, stream);
+		if(this.shareMediaChannel) {
+			// 本地通道
+			this.localMediaChannel = new RTCPeerConnection(defaultRPCConfig);
+			this.localClient.audioTrack.forEach(v => this.localMediaChannel.addTrack(v, this.localClient.stream));
+			this.localClient.videoTrack.forEach(v => this.localMediaChannel.addTrack(v, this.localClient.stream));
+			this.localMediaChannel.ontrack = function(e) {
+				console.debug('Local Media Track', e);
+			};
+			this.localMediaChannel.onicecandidate = function(e) {
+				// TODO：判断给谁
+				let to = self.remoteClient.map(v => v.sn)[0];
+				if(!self.checkCandidate(e.candidate)) {
+					console.debug('Send Local ICE Candidate Fail', e);
+					return;
+				}
+				console.debug('Send Local ICE Candidate', to, e);
+				self.push(signalProtocol.buildProtocol(
+					signalProtocol.media.candidate,
+					{
+						to: to,
+						type: 'local',
+						candidate: e.candidate
+					}
+				));
+			};
+			// 远程通道
+			this.remoteMediaChannel = new RTCPeerConnection(defaultRPCConfig);
+			this.remoteMediaChannel.ontrack = function(e) {
+				console.debug('Remote Media Track', e.track.sn, e);
+				let remote = self.taoyao.remoteClientFilter(e.track.sn);
+				// TODO：判断数量
+				remote.buildStream(remote.sn, e.streams[0], e.track);
+			};
+			this.remoteMediaChannel.onicecandidate = function(e) {
+				// TODO：判断给谁
+				let to = self.remoteClient.map(v => v.sn)[0];
+				if(!self.checkCandidate(e.candidate)) {
+					console.debug('Send Remote ICE Candidate Fail', e);
+					return;
+				}
+				console.debug('Send Remote ICE Candidate', to, e);
+				self.push(signalProtocol.buildProtocol(
+					signalProtocol.media.candidate,
+					{
+						to: to,
+						type: 'remote',
+						candidate: e.candidate
+					}
+				));
+			};
+			console.debug('打开共享媒体通道', this.localMediaChannel, this.remoteMediaChannel);
+		}
+		return this;
+	};
+	/** 校验candidate */
+	this.checkCandidate = function(candidate) {
+		if(
+			!candidate ||
+			!candidate.candidate ||
+			candidate.sdpMid === null ||
+			candidate.sdpMid === null ||
+			candidate.sdpMLineIndex === undefined ||
+			candidate.sdpMLineIndex === undefined
+		) {
+			return false;
+		}
+		return true;
+	};
+	/** 媒体信令 */
+	this.mediaSubscribe = function(sn, callback) {
+		let self = this;
+		self.remoteClientFilter(sn, true);
+		self.push(signalProtocol.buildProtocol(
+			signalProtocol.media.subscribe,
+			{
+				to: sn
+			}
+		), callback);
+	};
+	/** 会议信令 */
+	this.meetingCreate = function(callback) {
+		let self = this;
+		self.push(signalProtocol.buildProtocol(
+			signalProtocol.meeting.create
+		), callback);
+	}
+	this.meetingEnter = function(id, callback) {
+		let self = this;
+		self.push(signalProtocol.buildProtocol(
+			signalProtocol.meeting.enter,
+			{
+				id: id
+			}
+		), callback);
+	};
+};
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`