diff --git a/client/packages/rtc-frontend/package.json b/client/packages/rtc-frontend/package.json
index 33e5c2c..8ff1d72 100644
--- a/client/packages/rtc-frontend/package.json
+++ b/client/packages/rtc-frontend/package.json
@@ -62,6 +62,8 @@
     "@dcloudio/uni-stacktracey": "3.0.0-3071120230427001",
     "@dcloudio/vite-plugin-uni": "3.0.0-3071120230427001",
     "@vue/tsconfig": "^0.1.3",
+    "sass": "^1.62.1",
+    "sass-loader": "10.1.1",
     "typescript": "^4.9.5",
     "vite": "4.1.4",
     "vue-tsc": "^1.0.24"
diff --git a/client/packages/rtc-frontend/src/components/nav-top.vue b/client/packages/rtc-frontend/src/components/nav-top.vue
new file mode 100644
index 0000000..c9f2b7d
--- /dev/null
+++ b/client/packages/rtc-frontend/src/components/nav-top.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+//
+</script>
+
+<template>
+  <div class="r-nav">这是导航栏</div>
+</template>
+
+<style lang="scss" scoped>
+.r-nav {
+  width: 100%;
+  height: 30px;
+  background-color: yellowgreen;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/client/packages/rtc-frontend/src/pages.json b/client/packages/rtc-frontend/src/pages.json
index 1aea851..f165b71 100644
--- a/client/packages/rtc-frontend/src/pages.json
+++ b/client/packages/rtc-frontend/src/pages.json
@@ -1,16 +1,17 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "uni-app"
-			}
+			"path": "pages/main/index",
+			"style": {}
 		}
 	],
 	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
+		"navigationStyle": "custom"
+	},
+	"leftWindow": {
+		"path": "responsive/left-window.vue",
+		"style": {
+			"width": "320px"
+		}
 	}
-}
+}
\ No newline at end of file
diff --git a/client/packages/rtc-frontend/src/pages/index/index.vue b/client/packages/rtc-frontend/src/pages/main/index.nvue
similarity index 55%
rename from client/packages/rtc-frontend/src/pages/index/index.vue
rename to client/packages/rtc-frontend/src/pages/main/index.nvue
index ecac4f5..50e8875 100644
--- a/client/packages/rtc-frontend/src/pages/index/index.vue
+++ b/client/packages/rtc-frontend/src/pages/main/index.nvue
@@ -1,6 +1,6 @@
 <template>
   <view class="content">
-    <image class="logo" src="/static/logo.png" />
+    <NavTop />
     <view class="text-area">
       <text class="title">{{ title }}</text>
     </view>
@@ -8,8 +8,16 @@
 </template>
 
 <script setup lang="ts">
+import { onReady } from '@dcloudio/uni-app'
 import { ref } from 'vue'
+
+import NavTop from '../../components/nav-top.vue'
+
 const title = ref('Hello')
+
+onReady(() => {
+  console.log('redy')
+})
 </script>
 
 <style>
@@ -19,23 +27,4 @@ const title = ref('Hello')
   align-items: center;
   justify-content: center;
 }
-
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
-}
-
-.text-area {
-  display: flex;
-  justify-content: center;
-}
-
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
-}
 </style>
diff --git a/client/packages/rtc-frontend/src/responsive/index.md b/client/packages/rtc-frontend/src/responsive/index.md
new file mode 100644
index 0000000..972ec37
--- /dev/null
+++ b/client/packages/rtc-frontend/src/responsive/index.md
@@ -0,0 +1 @@
+# 存放 top-window、left-window、right-window 组件的地方
diff --git a/client/packages/rtc-frontend/src/responsive/left-window.vue b/client/packages/rtc-frontend/src/responsive/left-window.vue
new file mode 100644
index 0000000..2895b8f
--- /dev/null
+++ b/client/packages/rtc-frontend/src/responsive/left-window.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+//
+</script>
+
+<template>
+  <div class="left-window">我是left</div>
+</template>
+
+<style lang="scss" scoped>
+.left-window {
+  background-color: aqua;
+  height: 100vh;
+}
+</style>
diff --git a/client/packages/rtc-frontend/src/responsive/top-window.vue b/client/packages/rtc-frontend/src/responsive/top-window.vue
new file mode 100644
index 0000000..0ade23f
--- /dev/null
+++ b/client/packages/rtc-frontend/src/responsive/top-window.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+//
+</script>
+
+<template>
+  <div>我是top-window</div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
index 8e7f252..ec0637c 100644
--- a/client/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -29,6 +29,8 @@ importers:
       '@dcloudio/uni-stacktracey': 3.0.0-3071120230427001
       '@dcloudio/vite-plugin-uni': 3.0.0-3071120230427001
       '@vue/tsconfig': ^0.1.3
+      sass: ^1.62.1
+      sass-loader: 10.1.1
       typescript: ^4.9.5
       vite: 4.1.4
       vue: ^3.2.45
@@ -57,8 +59,10 @@ importers:
       '@dcloudio/uni-stacktracey': 3.0.0-3071120230427001
       '@dcloudio/vite-plugin-uni': 3.0.0-3071120230427001_vite@4.1.4+vue@3.2.47
       '@vue/tsconfig': 0.1.3
+      sass: 1.62.1
+      sass-loader: 10.1.1_sass@1.62.1
       typescript: 4.9.5
-      vite: 4.1.4
+      vite: 4.1.4_sass@1.62.1
       vue-tsc: 1.6.4_typescript@4.9.5
 
 packages:
@@ -1726,7 +1730,7 @@ packages:
       magic-string: 0.27.0
       picocolors: 1.0.0
       terser: 5.17.2
-      vite: 4.1.4
+      vite: 4.1.4_sass@1.62.1
     transitivePeerDependencies:
       - postcss
       - supports-color
@@ -2462,6 +2466,10 @@ packages:
       estree-walker: 2.0.2
       picomatch: 2.3.1
 
+  /@types/json-schema/7.0.12:
+    resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
+    dev: true
+
   /@vitejs/plugin-legacy/4.0.3_terser@5.17.2+vite@4.1.4:
     resolution: {integrity: sha512-RqDQOSEmFSNL42vITkNp8HE8Ak1yjGgaav4B6BGcZ8/URK0wikzwSyhNRirHDkp+snflEEk7iPZXTXUYA9exbg==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -2477,7 +2485,7 @@ packages:
       regenerator-runtime: 0.13.11
       systemjs: 6.14.1
       terser: 5.17.2
-      vite: 4.1.4
+      vite: 4.1.4_sass@1.62.1
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -2492,7 +2500,7 @@ packages:
       '@babel/core': 7.21.8
       '@babel/plugin-transform-typescript': 7.21.3_@babel+core@7.21.8
       '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.21.8
-      vite: 4.1.4
+      vite: 4.1.4_sass@1.62.1
       vue: 3.2.47
     transitivePeerDependencies:
       - supports-color
@@ -2505,7 +2513,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.1.4
+      vite: 4.1.4_sass@1.62.1
       vue: 3.2.47
 
   /@volar/language-core/1.4.1:
@@ -2737,6 +2745,23 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
+  /ajv-keywords/3.5.2_ajv@6.12.6:
+    resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
+    peerDependencies:
+      ajv: ^6.9.1
+    dependencies:
+      ajv: 6.12.6
+    dev: true
+
+  /ajv/6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+    dev: true
+
   /ansi-styles/3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
     engines: {node: '>=4'}
@@ -2820,6 +2845,10 @@ packages:
     resolution: {integrity: sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==}
     engines: {node: '>=6.0.0'}
 
+  /big.js/5.2.2:
+    resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
+    dev: true
+
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
@@ -3085,6 +3114,11 @@ packages:
   /electron-to-chromium/1.4.385:
     resolution: {integrity: sha512-L9zlje9bIw0h+CwPQumiuVlfMcV4boxRjFIWDcLfFqTZNbkwOExBzfmswytHawObQX4OUhtNv8gIiB21kOurIg==}
 
+  /emojis-list/3.0.0:
+    resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
+    engines: {node: '>= 4'}
+    dev: true
+
   /encodeurl/1.0.2:
     resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
     engines: {node: '>= 0.8'}
@@ -3205,6 +3239,10 @@ packages:
       - supports-color
     dev: true
 
+  /fast-deep-equal/3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+    dev: true
+
   /fast-glob/3.2.12:
     resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
     engines: {node: '>=8.6.0'}
@@ -3215,6 +3253,10 @@ packages:
       merge2: 1.4.1
       micromatch: 4.0.5
 
+  /fast-json-stable-stringify/2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+    dev: true
+
   /fastq/1.15.0:
     resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
     dependencies:
@@ -3383,6 +3425,9 @@ packages:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: false
 
+  /immutable/4.3.0:
+    resolution: {integrity: sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==}
+
   /inherits/2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: true
@@ -3462,6 +3507,10 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  /json-schema-traverse/0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+    dev: true
+
   /json5/2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
@@ -3477,6 +3526,11 @@ packages:
     optionalDependencies:
       graceful-fs: 4.2.11
 
+  /klona/2.0.6:
+    resolution: {integrity: sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==}
+    engines: {node: '>= 8'}
+    dev: true
+
   /lcid/3.1.1:
     resolution: {integrity: sha512-M6T051+5QCGLBQb8id3hdvIW8+zeFV2FyBGFS9IEK5H9Wt4MueD4bW1eWikpHgZp+5xR3l5c8pZUkQsIA0BFZg==}
     engines: {node: '>=8'}
@@ -3503,6 +3557,15 @@ packages:
       xtend: 4.0.2
     dev: false
 
+  /loader-utils/2.0.4:
+    resolution: {integrity: sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==}
+    engines: {node: '>=8.9.0'}
+    dependencies:
+      big.js: 5.2.2
+      emojis-list: 3.0.0
+      json5: 2.2.3
+    dev: true
+
   /loader-utils/3.2.1:
     resolution: {integrity: sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==}
     engines: {node: '>= 12.13.0'}
@@ -3660,6 +3723,10 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /neo-async/2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+    dev: true
+
   /node-releases/2.0.10:
     resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==}
 
@@ -3887,6 +3954,11 @@ packages:
       ipaddr.js: 1.9.1
     dev: true
 
+  /punycode/2.3.0:
+    resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
+    engines: {node: '>=6'}
+    dev: true
+
   /qrcode-reader/1.0.4:
     resolution: {integrity: sha512-rRjALGNh9zVqvweg1j5OKIQKNsw3bLC+7qwlnead5K/9cb1cEIAGkwikt/09U0K+2IDWGD9CC6SP7tHAjUeqvQ==}
 
@@ -4005,10 +4077,52 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: true
 
+  /sass-loader/10.1.1_sass@1.62.1:
+    resolution: {integrity: sha512-W6gVDXAd5hR/WHsPicvZdjAWHBcEJ44UahgxcIE196fW2ong0ZHMPO1kZuI5q0VlvMQZh32gpv69PLWQm70qrw==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      fibers: '>= 3.1.0'
+      node-sass: ^4.0.0 || ^5.0.0
+      sass: ^1.3.0
+      webpack: ^4.36.0 || ^5.0.0
+    peerDependenciesMeta:
+      fibers:
+        optional: true
+      node-sass:
+        optional: true
+      sass:
+        optional: true
+    dependencies:
+      klona: 2.0.6
+      loader-utils: 2.0.4
+      neo-async: 2.6.2
+      sass: 1.62.1
+      schema-utils: 3.1.2
+      semver: 7.5.0
+    dev: true
+
+  /sass/1.62.1:
+    resolution: {integrity: sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      chokidar: 3.5.3
+      immutable: 4.3.0
+      source-map-js: 1.0.2
+
   /sax/1.2.4:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
     dev: false
 
+  /schema-utils/3.1.2:
+    resolution: {integrity: sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==}
+    engines: {node: '>= 10.13.0'}
+    dependencies:
+      '@types/json-schema': 7.0.12
+      ajv: 6.12.6
+      ajv-keywords: 3.5.2_ajv@6.12.6
+    dev: true
+
   /semver/6.3.0:
     resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
     hasBin: true
@@ -4230,6 +4344,12 @@ packages:
       escalade: 3.1.1
       picocolors: 1.0.0
 
+  /uri-js/4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+    dependencies:
+      punycode: 2.3.0
+    dev: true
+
   /utif/2.0.1:
     resolution: {integrity: sha512-Z/S1fNKCicQTf375lIP9G8Sa1H/phcysstNrrSdZKj1f9g58J4NMgb5IgiEZN9/nLMPDwF0W7hdOe9Qq2IYoLg==}
     dependencies:
@@ -4249,7 +4369,7 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
-  /vite/4.1.4:
+  /vite/4.1.4_sass@1.62.1:
     resolution: {integrity: sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -4278,6 +4398,7 @@ packages:
       postcss: 8.4.23
       resolve: 1.22.2
       rollup: 3.21.5
+      sass: 1.62.1
     optionalDependencies:
       fsevents: 2.3.2