diff --git a/package.json b/package.json
index 53b12ce..b964ff2 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,6 @@
   },
   "dependencies": {
     "@temir/core": "^0.0.18",
-    "@vue/runtime-core": "^3.2.38",
     "vue": "^3.2.38"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ba4abe7..97fe249 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,14 +4,12 @@ specifiers:
   '@temir/cli': ^0.0.18
   '@temir/core': ^0.0.18
   '@temir/tab': ^0.0.18
-  '@vue/runtime-core': ^3.2.38
   tsup: ^6.2.3
   typescript: ^4.8.2
   vue: ^3.2.38
 
 dependencies:
   '@temir/core': 0.0.18
-  '@vue/runtime-core': 3.2.38
   vue: 3.2.38
 
 devDependencies:
diff --git a/src/App.vue b/src/App.vue
index 363d2ce..20c7b75 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { onMounted, ref } from '@vue/runtime-core'
+import { onMounted, ref } from 'vue'
 import { openRoom } from 'danmu-console-helper'
+import type { DanmuMsg, MsgHandler } from 'danmu-console-helper'
 import { TBox, TText } from '@temir/core'
-import DanmuMsg from './components/DanmuMsg.vue'
+import DanmuMsgCom from './components/DanmuMsgCom.vue'
 import TabSelector from './components/TabSelector.vue'
 
 const roomId = 652581
@@ -10,11 +11,11 @@ const watchers = ref(0)
 const watchersHighlight = ref(false)
 const hot = ref(0)
 const hotHighlight = ref(false)
-const danmuList = ref([])
+const danmuList = ref<DanmuMsg[]>([])
 
 onMounted(() => {
   try {
-    const handler = {
+    const handler: MsgHandler = {
       onHeartbeat: (newHot) => {
         hot.value = newHot
         hotHighlight.value = true
@@ -56,8 +57,8 @@ onMounted(() => {
         <TabSelector />
       </TBox>
       <TBox :flex-grow="1" flex-direction="column" width="100%" :height="16" border-style="round">
-        <DanmuMsg :msg="msg" v-for="msg in danmuList" />
+        <DanmuMsgCom :msg="msg" v-for="msg in danmuList" />
       </TBox>
     </TBox>
   </TBox>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/DanmuMsg.vue b/src/components/DanmuMsgCom.vue
similarity index 60%
rename from src/components/DanmuMsg.vue
rename to src/components/DanmuMsgCom.vue
index 9bd41d7..2ec7959 100644
--- a/src/components/DanmuMsg.vue
+++ b/src/components/DanmuMsgCom.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { onMounted, ref } from '@vue/runtime-core'
 import { TBox, TText } from '@temir/core'
-// import type { DanmuMsg } from 'danmu-console-helper'
+import type { DanmuMsg } from 'danmu-console-helper'
 
 const { msg } = defineProps<{
-  msg: string
+  msg: DanmuMsg
 }>()
 
 const addSpace = (str: string) => {
@@ -17,8 +16,8 @@ const addSpace = (str: string) => {
     <TBox>
       <TBox :flex-shrink="0">
         <TBox v-if="msg.user.badge" :margin-right="1">
-          <TText :background-color="msg.user.badge.bg_color" :flex-shrink="0">{{ addSpace(msg.user.badge.name) }}</TText>
-          <TText :color="msg.user.badge.bg_color" background-color="#ffffff">{{ addSpace(msg.user.badge.level) }}</TText>
+          <TText :background-color="msg.user.badge.color" :flex-shrink="0">{{ addSpace(msg.user.badge.name) }}</TText>
+          <TText :color="msg.user.badge.color" background-color="#ffffff">{{ addSpace(msg.user.badge.level.toString()) }}</TText>
         </TBox>
         <TText bold>{{ msg.user.uname }}: </TText>
       </TBox>
diff --git a/src/components/TabSelector.vue b/src/components/TabSelector.vue
index 6d94a62..38c0af2 100644
--- a/src/components/TabSelector.vue
+++ b/src/components/TabSelector.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from '@vue/runtime-core'
+import { computed, ref } from 'vue'
 import { TBox, TText } from '@temir/core'
 import { TTab, TTabs } from '@temir/tab'
 // import type { DanmuMsg } from 'danmu-console-helper'
@@ -8,13 +8,7 @@ const tabs = ['ALL', '弹幕', 'SC', '礼物']
 const activeIndex = ref(0)
 const selectedText = computed(() => tabs[activeIndex.value])
 
-const { msg } = defineProps<{
-  msg: string
-}>()
-
-const addSpace = (str: string) => {
-  return ' ' + str + ' '
-}
+const props = defineProps()
 </script>
 
 <template>
diff --git a/src/index.ts b/src/index.ts
index 2aeea91..1dfe4d1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,17 +6,17 @@ const handler: MsgHandler = {
     console.log(`online: ${online}`);
   },
   onIncomeDanmu: (msg) => {
-    console.log(msg)
+    console.log(msg.user.uname, msg.content);
   },
   onIncomeDanmuRaw(data) {
-    console.log(data)
-  },
-  onWatchedChange: (newWatched) => {
-    console.log('newWatched', newWatched)
+    console.log(data.info)
   },
+  // onWatchedChange: (newWatched) => {
+  //   console.log('newWatched', newWatched)
+  // },
 }
 
-openRoom(652581, handler);
+openRoom(41682, handler);
 
 // const num = 6067854
 // const intToColorHex = (int: number) => {
diff --git a/src/shims.d.ts b/src/shims.d.ts
new file mode 100644
index 0000000..d72a676
--- /dev/null
+++ b/src/shims.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { type DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
\ No newline at end of file
diff --git a/src/tsconfig.json b/src/tsconfig.json
index d9b2755..5991227 100644
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -12,6 +12,5 @@
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
     "skipLibCheck": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  }
 }
\ No newline at end of file