diff --git a/examples/sites/demos/pc/app/calendar-view/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/basic-usage-composition-api.vue
new file mode 100644
index 0000000000..9c52975aa6
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/basic-usage-composition-api.vue
@@ -0,0 +1,74 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="5"></tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([
+  {
+    title: '前端周会1',
+    start: '2023-05-15 8:30:00',
+    end: '2023-05-15 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会2',
+    start: '2023-05-15 10:00:00',
+    end: '2023-05-15 12:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  },
+  {
+    title: '前端周会2-1',
+    start: '2023-05-15 13:00:00',
+    end: '2023-05-15 15:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'red'
+  },
+  {
+    title: '前端周会3',
+    start: '2023-05-16 9:00:00',
+    end: '2023-05-16 10:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'yellow'
+  },
+  {
+    title: '前端周会4',
+    start: '2023-05-16 11:00:00',
+    end: '2023-05-16 14:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'purple'
+  },
+  {
+    title: '前端周会5',
+    start: '2023-05-25 8:00:00',
+    end: '2023-05-25 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'cyan'
+  },
+  {
+    title: '前端周会6',
+    start: '2023-05-26 8:00:00',
+    end: '2023-05-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会7',
+    start: '2023-05-27 8:30:00',
+    end: '2023-05-27 9:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '节假日25-28',
+    start: '2023-05-25 10:30:00',
+    end: '2023-05-28 03:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  }
+])
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-day-mark-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-day-mark-composition-api.vue
new file mode 100644
index 0000000000..8f2af3c039
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-day-mark-composition-api.vue
@@ -0,0 +1,22 @@
+<template>
+  <tiny-calendar-view
+    :events="eventslist"
+    :year="2023"
+    :month="5"
+    mode="timeline"
+    :show-mark="showMark"
+    mark-color="red"
+  >
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([])
+
+const showMark = (date) => {
+  return date.split('-')[2] < 10
+}
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue
new file mode 100644
index 0000000000..f4dc6bf5e4
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue
@@ -0,0 +1,14 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="5" :disabled="disabled"></tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([])
+
+const disabled = (date) => {
+  return date.split('-')[2] < 5
+}
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue
new file mode 100644
index 0000000000..c79d6a7276
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-event-composition-api.vue
@@ -0,0 +1,40 @@
+<template>
+  <tiny-calendar-view
+    :events="eventslist"
+    :year="2023"
+    :month="5"
+    @prev-week-click="prevWeekClick"
+    @next-week-click="nextWeekClick"
+    @week-change="weekChange"
+    @year-change="yearChange"
+    @month-change="monthChange"
+  >
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([])
+
+const prevWeekClick = (date) => {
+  console.log(date)
+}
+
+const nextWeekClick = (date) => {
+  console.log(date)
+}
+
+const weekChange = (oldVal, newVal) => {
+  console.log(oldVal, newVal)
+}
+
+const yearChange = (oldVal, newVal) => {
+  console.log(oldVal, newVal)
+}
+
+const monthChange = (oldVal, newVal) => {
+  console.log(oldVal, newVal)
+}
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-mode-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-mode-composition-api.vue
new file mode 100644
index 0000000000..36668b0625
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-mode-composition-api.vue
@@ -0,0 +1,11 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="6" :modes="['month', 'timeline', 'schedule']">
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([])
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot-composition-api.vue
new file mode 100644
index 0000000000..649eca5973
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-schedule-slot-composition-api.vue
@@ -0,0 +1,121 @@
+<template>
+  <tiny-calendar-view
+    :events="eventslist"
+    mode="schedule"
+    :modes="['schedule', 'timeline']"
+    :year="2023"
+    :month="5"
+    :show-new-schedule="showNewSchedule"
+    @new-schedule="newSchedule"
+  >
+    <template #weekday1="{ slotScope }">
+      <div v-for="(event, index) in slotScope.events" :key="index" class="event">
+        <p class="title">{{ event.title }}</p>
+        <p class="content">{{ event.content }}</p>
+      </div>
+    </template>
+    <template #weekday2="{ slotScope }">
+      <div v-for="(event, index) in slotScope.events" :key="index" class="event">
+        <p class="title">{{ event.title }}</p>
+        <p class="content">{{ event.content }}</p>
+      </div>
+    </template>
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([
+  {
+    title: '前端周会1',
+    start: '2023-05-15 8:30:00',
+    end: '2023-05-15 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会2',
+    start: '2023-05-15 10:00:00',
+    end: '2023-05-15 12:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  },
+  {
+    title: '前端周会2-1',
+    start: '2023-05-15 13:00:00',
+    end: '2023-05-15 15:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'red'
+  },
+  {
+    title: '前端周会3',
+    start: '2023-05-16 9:00:00',
+    end: '2023-05-16 10:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'yellow'
+  },
+  {
+    title: '前端周会4',
+    start: '2023-05-16 11:00:00',
+    end: '2023-05-16 14:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'purple'
+  },
+  {
+    title: '前端周会5',
+    start: '2023-05-25 8:00:00',
+    end: '2023-05-25 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'cyan'
+  },
+  {
+    title: '前端周会6',
+    start: '2023-05-26 8:00:00',
+    end: '2023-05-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会7',
+    start: '2023-05-27 8:30:00',
+    end: '2023-05-27 9:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '节假日25-28',
+    start: '2023-05-25 10:30:00',
+    end: '2023-05-28 03:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  }
+])
+
+const showNewSchedule = (date) => {
+  return true
+}
+
+const newSchedule = (date) => {
+  const event = {
+    title: '新增事件' + date,
+    start: date + ' 10:30:00',
+    end: date + ' 12:30:00',
+    content: '新增事件随机事件 新增事件随机事件 新增事件随机事件 新增事件随机事件 ',
+    theme: 'blue'
+  }
+
+  eventslist.value.push(event)
+}
+</script>
+
+<style scoped>
+.event .title {
+  font-size: 14px;
+  margin-bottom: 4px;
+}
+.event .content {
+  font-size: 12px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range-composition-api.vue
new file mode 100644
index 0000000000..ffb74e53d7
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-range-composition-api.vue
@@ -0,0 +1,75 @@
+<template>
+  <tiny-calendar-view :events="eventslist" mode="timeline" :modes="[]" :year="2023" :month="5" :day-times="[10, 20]">
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([
+  {
+    title: '前端周会1',
+    start: '2023-05-15 8:30:00',
+    end: '2023-05-15 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会2',
+    start: '2023-05-15 10:00:00',
+    end: '2023-05-15 12:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  },
+  {
+    title: '前端周会2-1',
+    start: '2023-05-15 13:00:00',
+    end: '2023-05-15 15:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'red'
+  },
+  {
+    title: '前端周会3',
+    start: '2023-05-16 9:00:00',
+    end: '2023-05-16 10:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'yellow'
+  },
+  {
+    title: '前端周会4',
+    start: '2023-05-16 11:00:00',
+    end: '2023-05-16 14:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'purple'
+  },
+  {
+    title: '前端周会5',
+    start: '2023-05-25 8:00:00',
+    end: '2023-05-25 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'cyan'
+  },
+  {
+    title: '前端周会6',
+    start: '2023-05-26 8:00:00',
+    end: '2023-05-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会7',
+    start: '2023-05-27 8:30:00',
+    end: '2023-05-27 9:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '节假日25-28',
+    start: '2023-05-25 10:30:00',
+    end: '2023-05-28 03:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  }
+])
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot-composition-api.vue
new file mode 100644
index 0000000000..09ad9dc94d
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/calendar-timeline-slot-composition-api.vue
@@ -0,0 +1,137 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="5">
+    <template #timeline1="{ slotScope }">
+      <div
+        class="text-color-success bg-color-success-subtler border-l-2 border-color-success mt-10"
+        v-for="(event, index) in slotScope.events"
+        :key="index"
+      >
+        <p class="text-sm mb-1">{{ event.title }}</p>
+        <p class="text-xs">{{ event.content }}</p>
+      </div>
+    </template>
+    <template #timeline2="{ slotScope }">
+      <div
+        class="text-color-success bg-color-success-subtler border-l-2 border-color-success mt-10"
+        v-for="(event, index) in slotScope.events"
+        :key="index"
+      >
+        <p class="text-sm mb-1">{{ event.title }}</p>
+        <p class="text-xs">{{ event.content }}</p>
+      </div>
+    </template>
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([
+  {
+    title: '前端周会1',
+    start: '2023-05-15 8:30:00',
+    end: '2023-05-15 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会2',
+    start: '2023-05-15 10:00:00',
+    end: '2023-05-15 12:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  },
+  {
+    title: '前端周会2-1',
+    start: '2023-05-15 13:00:00',
+    end: '2023-05-15 15:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'red'
+  },
+  {
+    title: '前端周会3',
+    start: '2023-05-16 9:00:00',
+    end: '2023-05-16 10:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'yellow'
+  },
+  {
+    title: '前端周会4',
+    start: '2023-05-16 11:00:00',
+    end: '2023-05-16 14:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'purple'
+  },
+  {
+    title: '前端周会5',
+    start: '2023-05-25 8:00:00',
+    end: '2023-05-25 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'cyan'
+  },
+  {
+    title: '前端周会6',
+    start: '2023-05-26 8:00:00',
+    end: '2023-05-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会6-1',
+    start: '2023-05-26 12:00:00',
+    end: '2023-05-26 13:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'cyan'
+  },
+  {
+    title: '前端周会7',
+    start: '2023-05-27 8:30:00',
+    end: '2023-05-27 9:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '节假日25-28',
+    start: '2023-05-25 10:30:00',
+    end: '2023-05-28 03:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  },
+  {
+    title: '前端周会8',
+    start: '2023-06-26 8:00:00',
+    end: '2023-06-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会9',
+    start: '2023-07-26 8:00:00',
+    end: '2023-07-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会10',
+    start: '2023-08-26 8:00:00',
+    end: '2023-08-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会11',
+    start: '2023-09-26 8:00:00',
+    end: '2023-09-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会12',
+    start: '2023-10-26 8:00:00',
+    end: '2023-10-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  }
+])
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar-composition-api.vue
new file mode 100644
index 0000000000..7264fddea3
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/custom-calendar-toolbar-composition-api.vue
@@ -0,0 +1,11 @@
+<template>
+  <tiny-calendar-view>
+    <template #tool>
+      <p>此处为自定义工具栏插槽</p>
+    </template>
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color-composition-api.vue
new file mode 100644
index 0000000000..75dec2bc13
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/custom-day-bg-color-composition-api.vue
@@ -0,0 +1,18 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="5" :set-day-bg-color="setDayBgColor">
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([])
+
+const setDayBgColor = (date) => {
+  if (date.split('-')[2] === '10') {
+    return 'red'
+  }
+  return ''
+}
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/custom-header-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/custom-header-composition-api.vue
new file mode 100644
index 0000000000..616f1c59ae
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/custom-header-composition-api.vue
@@ -0,0 +1,78 @@
+<template>
+  <tiny-calendar-view :events="eventslist" :year="2023" :month="5">
+    <template #header="{ slotScope }">
+      <p>{{ slotScope.date }} {{ slotScope.weekDay }}</p>
+    </template>
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+
+const eventslist = ref([
+  {
+    title: '前端周会1',
+    start: '2023-05-15 8:00:00',
+    end: '2023-05-15 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会2',
+    start: '2023-05-15 10:00:00',
+    end: '2023-05-15 12:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会2-1',
+    start: '2023-05-15 13:00:00',
+    end: '2023-05-15 15:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会3',
+    start: '2023-05-16 9:00:00',
+    end: '2023-05-16 10:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会4',
+    start: '2023-05-16 11:00:00',
+    end: '2023-05-16 14:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会5',
+    start: '2023-05-25 8:00:00',
+    end: '2023-05-25 9:00:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会6',
+    start: '2023-05-26 8:00:00',
+    end: '2023-05-26 11:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '前端周会7',
+    start: '2023-05-27 8:30:00',
+    end: '2023-05-27 9:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'blue'
+  },
+  {
+    title: '节假日25-28',
+    start: '2023-05-25 10:30:00',
+    end: '2023-05-28 03:30:00',
+    content: '日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注日程备注',
+    theme: 'green'
+  }
+])
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/hide-mode-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/hide-mode-composition-api.vue
new file mode 100644
index 0000000000..8907042843
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/hide-mode-composition-api.vue
@@ -0,0 +1,7 @@
+<template>
+  <tiny-calendar-view :modes="[]"></tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/mode-combination-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/mode-combination-composition-api.vue
new file mode 100644
index 0000000000..e35cc7c15b
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/mode-combination-composition-api.vue
@@ -0,0 +1,7 @@
+<template>
+  <tiny-calendar-view :modes="['timeline', 'schedule']" mode="timeline"></tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { CalendarView as TinyCalendarView } from '@opentiny/vue'
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/multi-select-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/multi-select-composition-api.vue
new file mode 100644
index 0000000000..44521d75dd
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/multi-select-composition-api.vue
@@ -0,0 +1,23 @@
+<template>
+  <tiny-calendar-view
+    :events="eventslist"
+    :year="2023"
+    :month="5"
+    :multi-select="true"
+    mode="month"
+    :modes="[]"
+    @selected-date-change="selectedDateChange"
+  >
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CalendarView as TinyCalendarView, Modal } from '@opentiny/vue'
+
+const eventslist = ref([])
+
+const selectedDateChange = (date) => {
+  Modal.message(`当前选择${JSON.stringify(date)}`)
+}
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue b/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue
new file mode 100644
index 0000000000..471b9af18e
--- /dev/null
+++ b/examples/sites/demos/pc/app/calendar-view/set-working-day-composition-api.vue
@@ -0,0 +1,64 @@
+<template>
+  <tiny-calendar-view
+    ref="calendar"
+    :multi-select="true"
+    :year="2023"
+    :month="5"
+    :modes="[]"
+    :set-day-bg-color="setDayBgColor"
+    @selected-date-change="selectedDateChange"
+  >
+    <template #tool>
+      <tiny-button type="primary" @click="setDays('workingDays')" class="mr-2">工作日</tiny-button>
+      <tiny-button type="success" @click="setDays('offDays')" class="mr-2">休息日</tiny-button>
+      <tiny-button type="warning" @click="setDays('holidays')">节假日</tiny-button>
+    </template>
+  </tiny-calendar-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  CalendarView as TinyCalendarView,
+  Button as TinyButton,
+  Modal
+} from '@opentiny/vue'
+
+const workingDays = ref([])
+const offDays = ref([])
+const holidays = ref([])
+const selectedDate = ref([])
+
+const map = {
+  workingDays,
+  offDays,
+  holidays
+}
+
+const setDays = (type) => {
+  if (!selectedDate.value.length) {
+    Modal.message('请选择日期')
+    return
+  }
+  map[type].value.push(...selectedDate.value)
+  selectedDate.value = []
+}
+
+const setDayBgColor = (date) => {
+  if (workingDays.value.includes(date)) {
+    return 'blue'
+  }
+  if (offDays.value.includes(date)) {
+    return 'green'
+  }
+  if (holidays.value.includes(date)) {
+    return 'yellow'
+  }
+
+  return ''
+}
+
+const selectedDateChange = (date) => {
+  selectedDate.value = date
+}
+</script>
diff --git a/examples/sites/demos/pc/app/calendar-view/set-working-day.vue b/examples/sites/demos/pc/app/calendar-view/set-working-day.vue
index cee409e974..5fab61d693 100644
--- a/examples/sites/demos/pc/app/calendar-view/set-working-day.vue
+++ b/examples/sites/demos/pc/app/calendar-view/set-working-day.vue
@@ -39,7 +39,6 @@ export default {
         return
       }
       this[type].push(...this.selectedDate)
-      this.$refs.calendar.$children[0].state.selectedDates = []
       this.selectedDate = []
     },
     setDayBgColor(date) {
diff --git a/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js b/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js
index db2e829875..4ef18b60db 100644
--- a/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js
+++ b/examples/sites/demos/pc/app/calendar-view/webdoc/calendar-view.js
@@ -15,9 +15,9 @@ export default {
       'demoId': 'calendar-mode',
       'name': { 'zh-CN': '显示模式', 'en-US': 'Display mode' },
       'desc': {
-        'zh-CN': '<p>通过 <code>mode</code> 属性指定以年的形式显示，将展示当年的每个月份。可选值有 year、month。</p>\n',
+        'zh-CN': '<p>通过 <code>mode</code> 属性指定以年的形式显示，将展示当年的每个月份。可选值有 <code>month</code> / <code>timeline</code> / <code>schedule</code>。</p>\n',
         'en-US':
-          '<p>The <code>mode</code> attribute specifies that each month of the current year is displayed. The options are year and month. </p>\n'
+          '<p>The <code>mode</code> attribute specifies that each month of the current year is displayed. The options are <code>month</code> / <code>timeline</code> / <code>schedule</code>. </p>\n'
       },
       'codeFiles': ['calendar-mode.vue']
     },
@@ -49,7 +49,7 @@ export default {
       'codeFiles': ['calendar-timeline-slot.vue']
     },
     {
-      'demoId': 'calendar-timeline-rang',
+      'demoId': 'calendar-timeline-range',
       'name': { 'zh-CN': '时间线范围配置', 'en-US': '' },
       'desc': {
         'zh-CN': '<p>通过dayTimes属性配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。</p>\n',
@@ -137,7 +137,7 @@ export default {
             'zh-CN': '配置时间线模式下所展示的时间范围，默认为[8,18]，可配范围[0,23]。',
             'en-US': ''
           },
-          'demoId': 'basic-usage'
+          'demoId': 'calendar-timeline-range'
         },
         {
           'name': 'disabled',
@@ -167,7 +167,7 @@ export default {
             'zh-CN': '日历高度',
             'en-US': ''
           },
-          'demoId': 'basic-usage'
+          'demoId': ''
         },
         {
           'name': 'mark-color',
@@ -275,7 +275,7 @@ export default {
             'zh-CN': '新增日程按钮点击事件',
             'en-US': ''
           },
-          'demoId': 'calendar-event'
+          'demoId': 'calendar-schedule-slot'
         },
         {
           'name': 'next-week-click',
@@ -299,7 +299,7 @@ export default {
             'zh-CN': '选中日期改变事件',
             'en-US': ''
           },
-          'demoId': 'calendar-event'
+          'demoId': 'multi-select'
         },
         {
           'name': 'week-change',
diff --git a/examples/sites/demos/pc/app/divider/base-composition-api.vue b/examples/sites/demos/pc/app/divider/base-composition-api.vue
new file mode 100644
index 0000000000..eeb85935cf
--- /dev/null
+++ b/examples/sites/demos/pc/app/divider/base-composition-api.vue
@@ -0,0 +1,7 @@
+<template>
+  <tiny-divider></tiny-divider>
+</template>
+
+<script setup>
+import { Divider as TinyDivider } from '@opentiny/vue'
+</script>
diff --git a/examples/sites/demos/pc/app/divider/base.vue b/examples/sites/demos/pc/app/divider/base.vue
index b861ead757..87b9047e5c 100644
--- a/examples/sites/demos/pc/app/divider/base.vue
+++ b/examples/sites/demos/pc/app/divider/base.vue
@@ -2,7 +2,7 @@
   <tiny-divider></tiny-divider>
 </template>
 
-<script lang="jsx">
+<script>
 import { Divider } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/divider/contentPosition-composition-api.vue b/examples/sites/demos/pc/app/divider/contentPosition-composition-api.vue
new file mode 100644
index 0000000000..1d1d43b77f
--- /dev/null
+++ b/examples/sites/demos/pc/app/divider/contentPosition-composition-api.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>文案在左侧</p>
+  <tiny-divider content-position="left">文案</tiny-divider>
+  <p>文案在中间</p>
+  <tiny-divider content-position="center">文案</tiny-divider>
+  <p>文案在右侧</p>
+  <tiny-divider content-position="right">文案</tiny-divider>
+</template>
+
+<script setup>
+import { Divider as TinyDivider } from '@opentiny/vue'
+</script>
diff --git a/examples/sites/demos/pc/app/divider/contentPosition.vue b/examples/sites/demos/pc/app/divider/contentPosition.vue
index 96e1bef543..4d5dd17aae 100644
--- a/examples/sites/demos/pc/app/divider/contentPosition.vue
+++ b/examples/sites/demos/pc/app/divider/contentPosition.vue
@@ -7,7 +7,7 @@
   <tiny-divider content-position="right">文案</tiny-divider>
 </template>
 
-<script lang="jsx">
+<script>
 import { Divider } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/divider/customStyle-composition-api.vue b/examples/sites/demos/pc/app/divider/customStyle-composition-api.vue
new file mode 100644
index 0000000000..ee8014f1a6
--- /dev/null
+++ b/examples/sites/demos/pc/app/divider/customStyle-composition-api.vue
@@ -0,0 +1,14 @@
+<template>
+  <p>自定义分隔线颜色</p>
+  <tiny-divider color="#7693f5"></tiny-divider>
+  <p>自定义分隔线的样式</p>
+  <tiny-divider border-style="dashed"></tiny-divider>
+  <p>自定义文案的颜色</p>
+  <tiny-divider content-color="#7693f5">文案</tiny-divider>
+  <p>文案的背景颜色</p>
+  <tiny-divider content-color="#ffffff" content-background-color="#7693f5">文案</tiny-divider>
+</template>
+
+<script setup>
+import { Divider as TinyDivider } from '@opentiny/vue'
+</script>
diff --git a/examples/sites/demos/pc/app/divider/customStyle.vue b/examples/sites/demos/pc/app/divider/customStyle.vue
index 7adf410908..c1fdbae62d 100644
--- a/examples/sites/demos/pc/app/divider/customStyle.vue
+++ b/examples/sites/demos/pc/app/divider/customStyle.vue
@@ -9,7 +9,7 @@
   <tiny-divider content-color="#ffffff" content-background-color="#7693f5">文案</tiny-divider>
 </template>
 
-<script lang="jsx">
+<script>
 import { Divider } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/divider/direction-composition-api.vue b/examples/sites/demos/pc/app/divider/direction-composition-api.vue
new file mode 100644
index 0000000000..d9f1a37d4a
--- /dev/null
+++ b/examples/sites/demos/pc/app/divider/direction-composition-api.vue
@@ -0,0 +1,11 @@
+<template>
+  <span>分隔线</span>
+  <tiny-divider direction="vertical"></tiny-divider>
+  <span>分隔线</span>
+  <tiny-divider direction="vertical"></tiny-divider>
+  <span>分隔线</span>
+</template>
+
+<script setup>
+import { Divider as TinyDivider } from '@opentiny/vue'
+</script>
diff --git a/examples/sites/demos/pc/app/divider/direction.vue b/examples/sites/demos/pc/app/divider/direction.vue
index 88333153ca..e64b8f3365 100644
--- a/examples/sites/demos/pc/app/divider/direction.vue
+++ b/examples/sites/demos/pc/app/divider/direction.vue
@@ -6,7 +6,7 @@
   <span>分隔线</span>
 </template>
 
-<script lang="jsx">
+<script>
 import { Divider } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/grid/slot/editor-slot-composition-api.vue b/examples/sites/demos/pc/app/grid/slot/editor-slot-composition-api.vue
new file mode 100644
index 0000000000..46b4b3884e
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/slot/editor-slot-composition-api.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <tiny-grid :data="tableData" :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column field="name" title="插槽自定义列编辑" :editor="{ component: 'input', autoselect: true }">
+        <template #edit="data">
+          <tiny-input v-model="data.row.name" placeholder="请输入内容"></tiny-input>
+        </template>
+      </tiny-grid-column>
+      <tiny-grid-column field="employees" title="员工人数"></tiny-grid-column>
+      <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Input as TinyInput } from '@opentiny/vue'
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技YX公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWW科技YX公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '4',
+    name: 'TGB科技YX公司',
+    area: '华东区',
+    address: '龙岩',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '5',
+    name: 'YHN科技YX公司',
+    area: '华南区',
+    address: '韶关',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '6',
+    name: 'WSX科技YX公司',
+    area: '华中区',
+    address: '黄冈',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+</script>
diff --git a/examples/sites/demos/pc/app/layout/alignment-composition-api.vue b/examples/sites/demos/pc/app/layout/alignment-composition-api.vue
index 8efa317d5d..eaad251618 100644
--- a/examples/sites/demos/pc/app/layout/alignment-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/alignment-composition-api.vue
@@ -93,11 +93,31 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 </script>
 
 <style scoped>
+.tiny-row {
+  margin-bottom: 20px;
+}
+
+.tiny-row .last-child {
+  margin-bottom: 0;
+}
+
+.tiny-col .col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+
+.tiny-col:nth-child(even) .col {
+  background: #73d0fc;
+}
+
 .row-bg {
   padding: 10px 0;
   background-color: #f9fafc;
diff --git a/examples/sites/demos/pc/app/layout/base-composition-api.vue b/examples/sites/demos/pc/app/layout/base-composition-api.vue
index f33c7a32c8..2fc94141bd 100644
--- a/examples/sites/demos/pc/app/layout/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/base-composition-api.vue
@@ -38,6 +38,28 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.content .tiny-row {
+  margin-bottom: 20px;
+}
+
+.content .tiny-row .last-child {
+  margin-bottom: 0;
+}
+
+.content .tiny-col .col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+
+.content .tiny-col:nth-child(even) .col {
+  background: #73d0fc;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/layout/base.vue b/examples/sites/demos/pc/app/layout/base.vue
index b5424c6252..ad3960bb53 100644
--- a/examples/sites/demos/pc/app/layout/base.vue
+++ b/examples/sites/demos/pc/app/layout/base.vue
@@ -38,7 +38,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Layout, Row, Col } from '@opentiny/vue'
 
 export default {
@@ -70,4 +70,4 @@ export default {
 .content .tiny-col:nth-child(even) .col {
   background: #73d0fc;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/examples/sites/demos/pc/app/layout/col/col-move-composition-api.vue b/examples/sites/demos/pc/app/layout/col/col-move-composition-api.vue
index 1c7bd781cd..79a10a6d11 100644
--- a/examples/sites/demos/pc/app/layout/col/col-move-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/col/col-move-composition-api.vue
@@ -22,3 +22,13 @@
 <script setup lang="jsx">
 import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/layout/col/col-move.vue b/examples/sites/demos/pc/app/layout/col/col-move.vue
index b59789e575..ed0f8b3825 100644
--- a/examples/sites/demos/pc/app/layout/col/col-move.vue
+++ b/examples/sites/demos/pc/app/layout/col/col-move.vue
@@ -19,7 +19,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Layout, Row, Col } from '@opentiny/vue'
 
 export default {
@@ -39,4 +39,4 @@ export default {
   background: #1f9ed8;
   border-radius: 15px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/examples/sites/demos/pc/app/layout/col/order-composition-api.vue b/examples/sites/demos/pc/app/layout/col/order-composition-api.vue
index 69727cbbf6..dab321c322 100644
--- a/examples/sites/demos/pc/app/layout/col/order-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/col/order-composition-api.vue
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol, Button as TinyButton } from '@opentiny/vue'
 
diff --git a/examples/sites/demos/pc/app/layout/col/order.vue b/examples/sites/demos/pc/app/layout/col/order.vue
index d61af5bf20..af42e0dce0 100644
--- a/examples/sites/demos/pc/app/layout/col/order.vue
+++ b/examples/sites/demos/pc/app/layout/col/order.vue
@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Layout, Row, Col, Button } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/layout/col/tag-composition-api.vue b/examples/sites/demos/pc/app/layout/col/tag-composition-api.vue
index eadd143063..ceabaacda2 100644
--- a/examples/sites/demos/pc/app/layout/col/tag-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/col/tag-composition-api.vue
@@ -18,6 +18,16 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/layout/gutter-composition-api.vue b/examples/sites/demos/pc/app/layout/gutter-composition-api.vue
index e9b5642ed7..bbb16f2731 100644
--- a/examples/sites/demos/pc/app/layout/gutter-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/gutter-composition-api.vue
@@ -17,6 +17,28 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.tiny-row {
+  margin-bottom: 20px;
+}
+
+.tiny-row .last-child {
+  margin-bottom: 0;
+}
+
+.tiny-col .col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+
+.tiny-col:nth-child(even) .col {
+  background: #73d0fc;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/layout/gutter.vue b/examples/sites/demos/pc/app/layout/gutter.vue
index cce71d940a..17e0f0d340 100644
--- a/examples/sites/demos/pc/app/layout/gutter.vue
+++ b/examples/sites/demos/pc/app/layout/gutter.vue
@@ -17,7 +17,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Layout, Row, Col } from '@opentiny/vue'
 
 export default {
@@ -49,4 +49,4 @@ export default {
 .tiny-col:nth-child(even) .col {
   background: #73d0fc;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/examples/sites/demos/pc/app/layout/offset-composition-api.vue b/examples/sites/demos/pc/app/layout/offset-composition-api.vue
index 1ce68395a4..0e6a7878d1 100644
--- a/examples/sites/demos/pc/app/layout/offset-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/offset-composition-api.vue
@@ -19,11 +19,36 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 </script>
 
 <style scoped>
+.tiny-row {
+  margin-bottom: 20px;
+}
+
+.tiny-row .last-child {
+  margin-bottom: 0;
+}
+
+.tiny-col .col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+
+.tiny-col:nth-child(even) .col {
+  background: #73d0fc;
+}
+
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+
 .align {
   height: 120px;
 }
@@ -39,4 +64,28 @@ import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/
 .sm {
   height: 40px;
 }
+
+.button {
+  width: 70px;
+  line-height: 30px;
+  text-align: center;
+  background: #46c096;
+  color: #fff;
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.title {
+  margin-bottom: 20px;
+  margin-top: 20px;
+  line-height: 30px;
+  height: 30px;
+  overflow: hidden;
+}
+
+.item {
+  margin-bottom: 100px;
+  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
+  min-height: 200px;
+}
 </style>
diff --git a/examples/sites/demos/pc/app/layout/offset.vue b/examples/sites/demos/pc/app/layout/offset.vue
index e59557afe9..2de659d6e3 100644
--- a/examples/sites/demos/pc/app/layout/offset.vue
+++ b/examples/sites/demos/pc/app/layout/offset.vue
@@ -19,7 +19,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Layout, Row, Col } from '@opentiny/vue'
 
 export default {
@@ -96,4 +96,4 @@ export default {
   box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
   min-height: 200px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/examples/sites/demos/pc/app/layout/order-composition-api.vue b/examples/sites/demos/pc/app/layout/order-composition-api.vue
index edc65f29b1..44fa87b4e3 100644
--- a/examples/sites/demos/pc/app/layout/order-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/order-composition-api.vue
@@ -41,3 +41,25 @@ function toggleOrder() {
   }
 }
 </script>
+
+<style scoped>
+.tiny-row {
+  margin-bottom: 20px;
+}
+
+.tiny-row .last-child {
+  margin-bottom: 0;
+}
+
+.tiny-col .col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+
+.tiny-col:nth-child(even) .col {
+  background: #73d0fc;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/layout/order.vue b/examples/sites/demos/pc/app/layout/order.vue
index 13586eefcb..256a8a7936 100644
--- a/examples/sites/demos/pc/app/layout/order.vue
+++ b/examples/sites/demos/pc/app/layout/order.vue
@@ -24,7 +24,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Layout, Row, Col, Button } from '@opentiny/vue'
 
 export default {
@@ -76,4 +76,4 @@ export default {
 .tiny-col:nth-child(even) .col {
   background: #73d0fc;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/examples/sites/demos/pc/app/layout/responsive-layout-composition-api.vue b/examples/sites/demos/pc/app/layout/responsive-layout-composition-api.vue
index a316294d78..f906b0ef59 100644
--- a/examples/sites/demos/pc/app/layout/responsive-layout-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/responsive-layout-composition-api.vue
@@ -19,11 +19,31 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 </script>
 
 <style scoped>
+.tiny-row {
+  margin-bottom: 20px;
+}
+
+.tiny-row .last-child {
+  margin-bottom: 0;
+}
+
+.tiny-col .col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+
+.tiny-col:nth-child(even) .col {
+  background: #73d0fc;
+}
+
 .lg {
   height: 80px;
 }
diff --git a/examples/sites/demos/pc/app/layout/responsive-layout.vue b/examples/sites/demos/pc/app/layout/responsive-layout.vue
index 3e7d082ee6..c114993f81 100644
--- a/examples/sites/demos/pc/app/layout/responsive-layout.vue
+++ b/examples/sites/demos/pc/app/layout/responsive-layout.vue
@@ -19,7 +19,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Layout, Row, Col } from '@opentiny/vue'
 
 export default {
diff --git a/examples/sites/demos/pc/app/layout/row/align-composition-api.vue b/examples/sites/demos/pc/app/layout/row/align-composition-api.vue
index 72b2eaff37..d9d831b706 100644
--- a/examples/sites/demos/pc/app/layout/row/align-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/row/align-composition-api.vue
@@ -36,11 +36,23 @@
   </tiny-layout>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 </script>
 
 <style scoped>
+.margin-bottom10 {
+  margin-bottom: 10px;
+}
+
+.col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
 .lg {
   height: 120px;
 }
diff --git a/examples/sites/demos/pc/app/layout/row/gutter-composition-api.vue b/examples/sites/demos/pc/app/layout/row/gutter-composition-api.vue
index 45fb7ae601..2ae59f4c73 100644
--- a/examples/sites/demos/pc/app/layout/row/gutter-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/row/gutter-composition-api.vue
@@ -36,6 +36,20 @@
   </tiny-layout>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.margin-bottom10 {
+  margin-bottom: 10px;
+}
+
+.col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+</style>
diff --git a/examples/sites/demos/pc/app/layout/row/gutter.vue b/examples/sites/demos/pc/app/layout/row/gutter.vue
index bc41633213..6b411a6a73 100644
--- a/examples/sites/demos/pc/app/layout/row/gutter.vue
+++ b/examples/sites/demos/pc/app/layout/row/gutter.vue
@@ -36,7 +36,7 @@
   </tiny-layout>
 </template>
 
-<script lang="jsx">
+<script>
 import { Layout, Row, Col } from '@opentiny/vue'
 
 export default {
@@ -60,4 +60,4 @@ export default {
   background: #1f9ed8;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/examples/sites/demos/pc/app/layout/row/justify-composition-api.vue b/examples/sites/demos/pc/app/layout/row/justify-composition-api.vue
index db3b150d52..e6c7fb98c5 100644
--- a/examples/sites/demos/pc/app/layout/row/justify-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/row/justify-composition-api.vue
@@ -58,6 +58,20 @@
   </tiny-layout>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.margin-bottom10 {
+  margin-bottom: 10px;
+}
+
+.col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+</style>
diff --git a/examples/sites/demos/pc/app/layout/row/order-composition-api.vue b/examples/sites/demos/pc/app/layout/row/order-composition-api.vue
index ba59903a5a..d8f97bcae8 100644
--- a/examples/sites/demos/pc/app/layout/row/order-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/row/order-composition-api.vue
@@ -31,6 +31,20 @@
   </tiny-layout>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.margin-bottom10 {
+  margin-bottom: 10px;
+}
+
+.col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+</style>
diff --git a/examples/sites/demos/pc/app/layout/row/order.vue b/examples/sites/demos/pc/app/layout/row/order.vue
index 805b8f1c82..dfa9b2341c 100644
--- a/examples/sites/demos/pc/app/layout/row/order.vue
+++ b/examples/sites/demos/pc/app/layout/row/order.vue
@@ -31,7 +31,7 @@
   </tiny-layout>
 </template>
 
-<script lang="jsx">
+<script>
 import { Layout, Row, Col } from '@opentiny/vue'
 
 export default {
@@ -55,4 +55,4 @@ export default {
   background: #1f9ed8;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/examples/sites/demos/pc/app/layout/row/tag1-composition-api.vue b/examples/sites/demos/pc/app/layout/row/tag1-composition-api.vue
index b9d826382e..08f5c559d7 100644
--- a/examples/sites/demos/pc/app/layout/row/tag1-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/row/tag1-composition-api.vue
@@ -14,6 +14,16 @@
   </tiny-layout>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+</style>
diff --git a/examples/sites/demos/pc/app/layout/row/tag1.vue b/examples/sites/demos/pc/app/layout/row/tag1.vue
index 7444dbc750..a2b2a3c397 100644
--- a/examples/sites/demos/pc/app/layout/row/tag1.vue
+++ b/examples/sites/demos/pc/app/layout/row/tag1.vue
@@ -14,7 +14,7 @@
   </tiny-layout>
 </template>
 
-<script lang="jsx">
+<script>
 import { Layout, Row, Col } from '@opentiny/vue'
 
 export default {
@@ -34,4 +34,4 @@ export default {
   background: #1f9ed8;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/examples/sites/demos/pc/app/rich-text-editor/basic-usage-composi-api.vue b/examples/sites/demos/pc/app/rich-text-editor/basic-usage-composi-api.vue
deleted file mode 100644
index 9ec5022375..0000000000
--- a/examples/sites/demos/pc/app/rich-text-editor/basic-usage-composi-api.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-    <tiny-rich-text-editor></tiny-rich-text-editor>
-</template>
-<script setup lang="jsx">
-import { RichTextEditor as TinyRichTextEditor } from '@opentiny/vue'
-</script>
-
diff --git a/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue b/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue
index 474fc68632..a1d9f3f2d1 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/event-usage-composition-api.vue
@@ -7,67 +7,27 @@
 <script setup lang="jsx">
 import { RichTextEditor as TinyRichTextEditor, Notify } from '@opentiny/vue'
 const beforeCreate = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'beforeCreate',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('beforeCreate')
 }
 const create = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'create',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('create')
 }
 const focus = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'focus',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('focus')
 }
 const blur = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'blur',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('blur')
 }
 const selectionUpdate = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'selectionUpdate',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('selectionUpdate')
 }
 const transaction = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'transaction',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('transaction')
 }
 const destroy = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'destroy',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('destroy')
 }
 const update = function (editor) {
-  Notify({
-    type: 'info',
-    message: 'update',
-    position: 'top',
-    duration: 3000,
-  })
+  console.log('update')
 }
 </script>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue b/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue
index 917dbdca1a..ff361b912b 100644
--- a/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue
+++ b/examples/sites/demos/pc/app/rich-text-editor/event-usage.vue
@@ -13,68 +13,28 @@ export default {
   },
   methods: {
     beforeCreate(editor) {
-      Notify({
-        type: 'info',
-        message: 'beforeCreate',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('beforeCreate')
     },
     create(editor) {
-      Notify({
-        type: 'info',
-        message: 'create',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('create')
     },
     focus(editor) {
-      Notify({
-        type: 'info',
-        message: 'focus',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('focus')
     },
     blur(editor) {
-      Notify({
-        type: 'info',
-        message: 'blur',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('blur')
     },
     selectionUpdate(editor) {
-      Notify({
-        type: 'info',
-        message: 'selectionUpdate',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('selectionUpdate')
     },
     transaction(editor) {
-      Notify({
-        type: 'info',
-        message: 'transaction',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('transaction')
     },
     destroy(editor) {
-      Notify({
-        type: 'info',
-        message: 'destroy',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('destroy')
     },
     update(editor) {
-      Notify({
-        type: 'info',
-        message: 'update',
-        position: 'top',
-        duration: 3000,
-      })
+      console.log('update')
     },
   },
 }
diff --git a/examples/sites/demos/pc/app/select/webdoc/select.js b/examples/sites/demos/pc/app/select/webdoc/select.js
index 895aff9749..17a9d76f29 100644
--- a/examples/sites/demos/pc/app/select/webdoc/select.js
+++ b/examples/sites/demos/pc/app/select/webdoc/select.js
@@ -128,7 +128,7 @@ export default {
     },
     {
       'demoId': 'size-medium',
-      'name': { 'zh-CN': 'select', 'en-US': 'small' },
+      'name': { 'zh-CN': '尺寸', 'en-US': 'small' },
       'desc': {
         'zh-CN':
           '<p>通过 <code>size</code> 属性定义输入框尺寸，可选项有 medium、small、mini 。\n通过 <code>options</code> 配置 Select 数据项，使用后不需要再配置 tiny-option。</p>\n',
diff --git a/examples/sites/demos/pc/webdoc/import-components.md b/examples/sites/demos/pc/webdoc/import-components.md
index cc63822b91..cec4a5cba2 100644
--- a/examples/sites/demos/pc/webdoc/import-components.md
+++ b/examples/sites/demos/pc/webdoc/import-components.md
@@ -73,6 +73,23 @@ export default {
 }
 ```
 
+#### 温馨提示：
+
+在 `pnpm` 工程使用该插件时需要在 `package.json` 文件中逐个声明用到的每一个 `TinyVue` 组件依赖，因为 `pnpm` 特点就是用到的依赖就需要提前声明，防止幽灵依赖。
+
+依赖声明可以参考一下配置
+
+```json
+{
+  "dependencies": {
+    "@opentiny/vue-button": "~3.x.x",
+    "@opentiny/vue-alert": "~3.x.x",
+    "@opentiny/vue-input": "~3.x.x",
+    ...
+  }
+}
+```
+
 ### 单组件引入
 
 `TinyVue` 每个组件都可以独立安装、独立使用，即只安装单个组件的依赖并单独引用该组件。
diff --git a/examples/sites/package.json b/examples/sites/package.json
index d671d543f0..684d8ac42b 100644
--- a/examples/sites/package.json
+++ b/examples/sites/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.1.1",
+  "version": "2.1.5",
   "scripts": {
     "start": "vite",
     "start:saas": "vite --mode saas",
@@ -13,7 +13,8 @@
     "build:inner:prod": "vite build --mode innerprod",
     "build:open": "vite build --mode open",
     "prettier": "npx prettier --write ./**/*.{ts,tsx,css,less,scss,vue}",
-    "stylelint": "npx stylelint ./src/**/*.scss ./src/**/*.less ./src/**/*.css --fix"
+    "stylelint": "npx stylelint ./src/**/*.scss ./src/**/*.less ./src/**/*.css --fix",
+    "pub": "pnpm publish --no-git-checks --access=public"
   },
   "dependencies": {
     "@opentiny/vue": "workspace:~",
diff --git a/examples/sites/playground/App.vue b/examples/sites/playground/App.vue
index d38afaf9b1..385efa4bb5 100644
--- a/examples/sites/playground/App.vue
+++ b/examples/sites/playground/App.vue
@@ -9,8 +9,6 @@ import { staticDemoPath, getWebdocPath } from '@/views/components/cmpConfig'
 import { fetchDemosFile } from '@/tools/utils'
 import logoUrl from './assets/opentiny-logo.svg?url'
 import GitHub from './icons/Github.vue'
-import Sun from './icons/Sun.vue'
-import Moon from './icons/Moon.vue'
 import Share from './icons/Share.vue'
 
 const versions = ['3.11', '3.10', '3.9', '3.8']
@@ -67,13 +65,6 @@ const store = new useStore({
   }
 })
 
-// 切换主题
-const dark = ref(false)
-
-const toggleTheme = (theme) => {
-  dark.value = theme
-}
-
 const state = reactive({
   // repl 属性
   layout: 'horizon',
@@ -194,20 +185,13 @@ function share() {
         <tiny-button-group :data="state.layoutOptions" v-model="state.layout"></tiny-button-group>
       </span>
       <span class="ml20">
-        版本:
+        OpenTiny Vue 版本:
         <tiny-select v-model="state.selectVersion" @change="versionChange" style="width: 150px">
-          <tiny-option
-            v-for="item in state.versions"
-            :key="item.value"
-            :label="'opentiny/vue@' + item.value"
-            :value="item.value"
-          >
+          <tiny-option v-for="item in state.versions" :key="item.value" :label="item.value" :value="item.value">
           </tiny-option>
         </tiny-select>
       </span>
       <Share @click="share" title="分享" class="share" />
-      <Sun v-if="!dark" @click="toggleTheme(true)" class="light" />
-      <Moon v-else @click="toggleTheme(false)" class="dark" />
       <a style="display: flex" href="https://github.com/opentiny/tiny-vue" target="_blank">
         <GitHub class="github" />
       </a>
@@ -216,7 +200,6 @@ function share() {
   <Repl
     :editor="Editor"
     :store="store"
-    :theme="dark ? 'dark' : 'light'"
     :preview-options="state.previewOptions"
     :clear-console="false"
     :layout="state.layout"
@@ -265,8 +248,6 @@ function share() {
   height: calc(100vh - 36px - 16px) !important;
 }
 
-.light,
-.dark,
 .github,
 .share {
   width: 20px;
diff --git a/packages/renderless/src/rich-text-edtior/vue.ts b/packages/renderless/src/rich-text-edtior/vue.ts
index 59a0313b86..538f6e82fb 100644
--- a/packages/renderless/src/rich-text-edtior/vue.ts
+++ b/packages/renderless/src/rich-text-edtior/vue.ts
@@ -32,10 +32,6 @@ export const renderless = (
   { vm, emit, parent },
   {
     Editor,
-    Collaboration,
-    CodehighComp,
-    Y,
-    WebrtcProvider,
     StarterKit,
     Table,
     TableCell,
@@ -57,9 +53,10 @@ export const renderless = (
     CodeBlockLowlight,
     lowlight,
     VueNodeViewRenderer,
-    NodeViewContent,
-    nodeViewProps,
-    NodeViewWrapper,
+    // CodehighComp,
+    // NodeViewContent,
+    // nodeViewProps,
+    // NodeViewWrapper,
     Placeholder,
     codeHighlight
   }
@@ -98,8 +95,6 @@ export const renderless = (
   if (props.customToolBar) {
     toolBar = props.customToolBar
   }
-  let ydoc = null
-  let provider = null
   // 自定义图片
   const CustomImage = Image.extend({
     addAttributes() {
@@ -140,9 +135,9 @@ export const renderless = (
       return {
         setP:
           (attributes) =>
-            ({ commands }) => {
-              return commands.setNode(this.name, attributes)
-            }
+          ({ commands }) => {
+            return commands.setNode(this.name, attributes)
+          }
       }
     }
   })
@@ -168,9 +163,9 @@ export const renderless = (
       return {
         setSize:
           (attributes) =>
-            ({ commands }) => {
-              return commands.setNode(this.name, attributes)
-            }
+          ({ commands }) => {
+            return commands.setNode(this.name, attributes)
+          }
       }
     }
   })
@@ -179,24 +174,24 @@ export const renderless = (
       return {
         bgColor: {
           default: null,
-          renderHTML: attributes => {
+          renderHTML: (attributes) => {
             if (!attributes.bgColor) {
               return {}
             }
             return {
-              style: `background: ${attributes.bgColor}`,
+              style: `background: ${attributes.bgColor}`
             }
-          },
+          }
         }
       }
     },
     addCommands() {
       return {
         setBackColor:
-          attributes =>
-            ({ commands }) => {
-              return commands.setMark(this.name, attributes)
-            }
+          (attributes) =>
+          ({ commands }) => {
+            return commands.setMark(this.name, attributes)
+          }
       }
     }
   })
@@ -204,7 +199,7 @@ export const renderless = (
     extensions: [
       StarterKit?.configure({
         // 开启多人协作功能要关闭默认的history模式
-        history: false
+        history: true
       }),
       Table.configure({
         resizable: true
@@ -281,19 +276,9 @@ export const renderless = (
     },
     ...props.options
   }
-  if (props.Collaboration) {
-    if (!window._yDoc) {
-      window._yDoc = new Y.Doc()
-    }
-    ydoc = window._yDoc
-    provider = new WebrtcProvider('tiny-examsple-document', ydoc)
-    defaultOptions.extensions.push(
-      Collaboration?.configure({
-        document: ydoc
-      }),
-    )
-  }
-  const editor = new Editor(props.options ? props.options : defaultOptions)
+
+  let options = props.options ? Object.assign(defaultOptions, props.options) : defaultOptions
+  const editor = new Editor(options)
 
   const box = ref(null)
   const fontSize = ref('16px')
diff --git a/packages/theme/src/checkbox-button/vars.less b/packages/theme/src/checkbox-button/vars.less
index 907be44c8b..0efe052287 100644
--- a/packages/theme/src/checkbox-button/vars.less
+++ b/packages/theme/src/checkbox-button/vars.less
@@ -18,7 +18,7 @@
   // 按钮形式复选框字号
   --ti-checkbox-button-font-size: var(--ti-common-font-size-base);
   // 按钮形式复选框未选中项悬浮文本色
-  --ti-checkbox-button-hover-text-color: var(--ti-common-color-text-primary);
+  --ti-checkbox-button-hover-text-color: var(--ti-common-color-text-white);
   // 按钮形式选中项边框色
   --ti-checkbox-button-checked-border-color: var(--ti-common-color-line-active);
   // 按钮形式复选框禁用文本色
@@ -33,6 +33,8 @@
   --ti-checkbox-button-checked-text-color: var(--ti-common-color-text-white);
   // 按钮形式复选框选中项背景色
   --ti-checkbox-button-checked-bg-color: var(--ti-common-color-bg-emphasize);
+  // 按钮形式复选框悬浮背景色
+  --ti-checkbox-button-bg-color-hover: var(--ti-common-color-bg-hover);
   // 按钮形式复选框边框色
   --ti-checkbox-button-border-color: #e9edfa;
   // 按钮形式复选框悬浮默认边框色
diff --git a/packages/theme/src/checkbox-group/aurora-theme.js b/packages/theme/src/checkbox-group/aurora-theme.js
new file mode 100644
index 0000000000..94b939b69e
--- /dev/null
+++ b/packages/theme/src/checkbox-group/aurora-theme.js
@@ -0,0 +1,4 @@
+export const tinyCheckboxGroupAuroraTheme = {
+  'ti-checkbox-group-1st-child-border-radius': '2px 2px 0 0',
+  'ti-checkbox-group-last-child-border-radius': '0 0 2px 2px',
+}
diff --git a/packages/theme/src/checkbox-group/index.less b/packages/theme/src/checkbox-group/index.less
index c9da6fe3ed..d75a345d75 100644
--- a/packages/theme/src/checkbox-group/index.less
+++ b/packages/theme/src/checkbox-group/index.less
@@ -43,13 +43,14 @@
 
     .@{checkbox-button-prefix-cls} {
       display: block;
+      width: min-content;
 
       &:first-child .@{checkbox-button-prefix-cls}__inner {
-        border-radius: 2px 2px 0 0;
+        border-radius: var(--ti-checkbox-group-1st-child-border-radius);
       }
 
       &:last-child .@{checkbox-button-prefix-cls}__inner {
-        border-radius: 0 0 2px 2px;
+        border-radius: var(--ti-checkbox-group-last-child-border-radius);
       }
 
       &.is-checked .@{checkbox-button-prefix-cls}__inner {
diff --git a/packages/theme/src/checkbox-group/smb-theme.js b/packages/theme/src/checkbox-group/smb-theme.js
index 543ea8e9a9..30cb5b5aaa 100644
--- a/packages/theme/src/checkbox-group/smb-theme.js
+++ b/packages/theme/src/checkbox-group/smb-theme.js
@@ -1,4 +1,6 @@
 export const tinyCheckboxGroupSmbTheme = {
   'ti-checkbox-group-margin-bottom': '16px',
-  'ti-checkbox-group-flex-wrap': 'wrap'
+  'ti-checkbox-group-flex-wrap': 'wrap',
+  'ti-checkbox-group-1st-child-border-radius': '6px',
+  'ti-checkbox-group-last-child-border-radius': '6px',
 }
diff --git a/packages/theme/src/checkbox-group/vars.less b/packages/theme/src/checkbox-group/vars.less
index babf65a57b..24a8eec958 100644
--- a/packages/theme/src/checkbox-group/vars.less
+++ b/packages/theme/src/checkbox-group/vars.less
@@ -13,8 +13,12 @@
 .component-css-vars-checkbox-group() {
   // 垂直复选框和行间距(hide)
   --ti-checkbox-group-margin-bottom: var(--ti-common-space-2x);
-  // 默认不换行
-  --ti-checkbox-group-flex-wrap: nowrap;
+  // 默认换行
+  --ti-checkbox-group-flex-wrap: wrap;
   // 按钮组按钮外边距
   --ti-checkbox-group-margin-top: var(--ti-common-space-0);
+  // 垂直按钮组第一个子元素边框圆角
+  --ti-checkbox-group-1st-child-border-radius: var(--ti-common-space-0);
+  // 垂直按钮组最后一个子元素边框圆角
+  --ti-checkbox-group-last-child-border-radius: var(--ti-common-space-0);
 }
diff --git a/packages/theme/src/dialog-box/index.less b/packages/theme/src/dialog-box/index.less
index 03a539cf07..4691f79a8a 100644
--- a/packages/theme/src/dialog-box/index.less
+++ b/packages/theme/src/dialog-box/index.less
@@ -127,7 +127,6 @@
     margin-bottom: var(--ti-dialog-box-body-margin-bottom);
     color: var(--ti-dialog-box-body-text-color);
     font-size: var(--ti-dialog-box-body-font-size);
-    overflow: auto;
 
     .@{css-prefix}upload {
       overflow: hidden;
@@ -166,6 +165,9 @@
     min-width: var(--ti-dialog-box-drawer-min-width);
     max-width: var(--ti-dialog-box-drawer-max-width);
 
+    display: flex;
+    flex-direction: column;
+
     .@{dialog-box-prefix-cls}__header,
     .@{dialog-box-prefix-cls}__body,
     .@{dialog-box-prefix-cls}__footer {
@@ -188,13 +190,13 @@
     }
 
     .@{dialog-box-prefix-cls}__body {
+      flex: 1;
+      overflow: auto;
       padding: var(--ti-dialog-box-drawer-body-padding-top) var(--ti-dialog-box-drawer-body-padding-right)
         var(--ti-dialog-box-drawer-body-padding-bottom) var(--ti-dialog-box-drawer-body-padding-left);
     }
 
     .@{dialog-box-prefix-cls}__footer {
-      position: absolute;
-      bottom: 0;
       padding: var(--ti-dialog-box-drawer-footer-padding-top) var(--ti-dialog-box-drawer-footer-padding-right)
         var(--ti-dialog-box-drawer-footer-padding-bottom) var(--ti-dialog-box-drawer-footer-padding-left);
       border-top: 1px solid var(--ti-dialog-box-drawer-divider-border-color);
diff --git a/packages/theme/src/rich-text-editor/index.less b/packages/theme/src/rich-text-editor/index.less
index 6718720bbb..41d46ebb1f 100644
--- a/packages/theme/src/rich-text-editor/index.less
+++ b/packages/theme/src/rich-text-editor/index.less
@@ -70,6 +70,10 @@
     background: transparent;
     cursor: pointer;
 
+    svg, input {
+      cursor: pointer;
+    }
+
     &:not(:disabled):hover,
     &.is-active {
       background-color: #d2e4ff;
@@ -101,6 +105,20 @@
     overflow: hidden;
     display: inline-block;
   }
+
+  .tippy-box {
+    .tippy-content {
+      .bubble-menu {
+        button {
+          border-width: 1px;
+          border-left: none;
+        }
+        &:nth-child(1) {
+          border-left-width: 1px;
+        }
+      }
+    }
+  }
 }
 
 // p-h1~6
@@ -353,7 +371,7 @@
 // 富文本编辑器的主题区域，需要对高度进行调整，达到融为一体
 .tiny-rich-text-editor__container {
   overflow: auto;
-  padding: 0 10px;
+  padding: 10px;
   height: 100%;
   border: 1px solid var(--ti-rich-text-editor-box-outline-color);
   border-top: 0;
@@ -401,6 +419,27 @@
       line-height: 1.1;
     }
 
+    p {
+      margin: 0;
+      line-height: 1;
+
+      &[level='1'] {
+        line-height: 1;
+      }
+
+      &[level='1.5'] {
+        line-height: 1.5;
+      }
+
+      &[level='2'] {
+        line-height: 2;
+      }
+
+      &[level='2.5'] {
+        line-height: 2.5;
+      }
+    }
+
     code {
       background-color: rgba(#616161, 0.1);
       color: #616161;
diff --git a/packages/theme/src/tree-menu/index.less b/packages/theme/src/tree-menu/index.less
index cc8ded79c8..8f81c1fff4 100644
--- a/packages/theme/src/tree-menu/index.less
+++ b/packages/theme/src/tree-menu/index.less
@@ -126,6 +126,11 @@
         }
       }
 
+      .@{tree-node-prefix-cls}__content-left {
+        position: relative;
+        padding-left: var(--tree-menu-node-vertical-line-margin-right);
+      }
+
       &.is-current {
         & > .@{tree-node-prefix-cls}__content {
           background-color: var(--ti-tree-menu-node-selected-bg-color);
@@ -135,19 +140,15 @@
             color: var(--ti-tree-menu-node-current-text-color);
           }
 
-          .@{tree-node-prefix-cls}__content-box {
-            position: relative;
-
-            &::before {
-              content: '';
-              position: absolute;
-              left: -4px;
-              top: 50%;
-              display: inline-block;
-              height: 18px;
-              transform: translateY(-50%);
-              border-left: 2px solid var(--ti-tree-menu-square-left-border-color);
-            }
+          .@{tree-node-prefix-cls}__content-left::before {
+            content: '';
+            position: absolute;
+            left: 4px;
+            top: 50%;
+            display: inline-block;
+            height: 18px;
+            transform: translateY(-50%);
+            border-left: 2px solid var(--ti-tree-menu-square-left-border-color);
           }
         }
       }
diff --git a/packages/theme/src/tree-menu/vars.less b/packages/theme/src/tree-menu/vars.less
index a04d5437b9..0f7b0773a9 100644
--- a/packages/theme/src/tree-menu/vars.less
+++ b/packages/theme/src/tree-menu/vars.less
@@ -37,4 +37,6 @@
   --ti-tree-menu-collapse-icon-margin-right: var(--ti-common-size-2x);
   // 节点序号字号
   --tree-menu-node-number-font-size: var(--ti-common-font-size-base);
+  // 活跃节点竖线与文本的间距
+  --tree-menu-node-vertical-line-margin-right: var(--ti-common-size-5x);
 }
diff --git a/packages/vue/src/rich-text-editor/package.json b/packages/vue/src/rich-text-editor/package.json
index 6928e98694..f2b1264382 100644
--- a/packages/vue/src/rich-text-editor/package.json
+++ b/packages/vue/src/rich-text-editor/package.json
@@ -40,9 +40,6 @@
     "@tiptap/vue-2": "^2.1.10",
     "@tiptap/vue-3": "^2.0.4",
     "highlight.js": "^11.8.0",
-    "lowlight": "^2.9.0",
-    "y-prosemirror": "^1.2.1",
-    "y-webrtc": "^10.2.5",
-    "yjs": "^13.6.7"
+    "lowlight": "^2.9.0"
   }
 }
diff --git a/packages/vue/src/rich-text-editor/src/code-highlight.tsx b/packages/vue/src/rich-text-editor/src/code-highlight.tsx
deleted file mode 100644
index 879abfe6a5..0000000000
--- a/packages/vue/src/rich-text-editor/src/code-highlight.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-export default function (NodeViewContent, nodeViewProps, NodeViewWrapper) {
-  return {
-    name: 'CodeHighlight',
-    components: {
-      NodeViewWrapper,
-      NodeViewContent,
-    },
-    props: nodeViewProps,
-    data() {
-      return {
-        languages: this.extension.options.lowlight.listLanguages(),
-      }
-    },
-    computed: {
-      selectedLanguage: {
-        get() {
-          return this.node.attrs.language
-        },
-        set(language) {
-          this.updateAttributes({ language })
-        },
-      },
-    },
-    render() {
-      return (
-        <NodeViewWrapper class="code-block">
-          <select contenteditable="false" v-model={this.selectedLanguage}>
-            <option value="null">
-              auto
-            </option>
-            <option disabled>
-              —
-            </option>
-            {this.languages.map((item, index) => <option value={item} key={index}> {item} </option>)}
-          </select>
-          <pre><code><NodeViewContent /></code></pre>
-        </NodeViewWrapper>
-      )
-    },
-  }
-}
\ No newline at end of file
diff --git a/packages/vue/src/rich-text-editor/src/pc.vue b/packages/vue/src/rich-text-editor/src/pc.vue
index 59d411fa7f..11d6dc49cb 100644
--- a/packages/vue/src/rich-text-editor/src/pc.vue
+++ b/packages/vue/src/rich-text-editor/src/pc.vue
@@ -82,7 +82,6 @@
             id="tiny-color"
             type="color"
             @input="state.editor.chain().focus().setColor($event.target.value).run()"
-            :value="state.editor?.getAttributes('textStyle').color"
           />
         </button>
         <button
@@ -287,10 +286,10 @@ import {
   Editor,
   EditorContent,
   BubbleMenu,
-  VueNodeViewRenderer,
-  NodeViewContent,
-  nodeViewProps,
-  NodeViewWrapper
+  VueNodeViewRenderer
+  // NodeViewContent,
+  // nodeViewProps,
+  // NodeViewWrapper
 } from '@tiptap/vue'
 import StarterKit from '@tiptap/starter-kit'
 // 段落包
@@ -327,21 +326,23 @@ import js from 'highlight.js/lib/languages/javascript'
 import ts from 'highlight.js/lib/languages/typescript'
 import html from 'highlight.js/lib/languages/xml'
 import { lowlight } from 'lowlight'
-lowlight.registerLanguage('html', html)
-lowlight.registerLanguage('css', css)
-lowlight.registerLanguage('js', js)
-lowlight.registerLanguage('ts', ts)
+
+function initLowLight() {
+  lowlight.registerLanguage('html', html)
+  lowlight.registerLanguage('css', css)
+  lowlight.registerLanguage('js', js)
+  lowlight.registerLanguage('ts', ts)
+}
+/* @__PURE__ */
+initLowLight()
+
 // Placeholder
 import Placeholder from '@tiptap/extension-placeholder'
-// collaboration 包
-import Collaboration from '@tiptap/extension-collaboration'
-import * as Y from 'yjs'
-import { WebrtcProvider } from 'y-webrtc'
 
 import { props, setup, defineComponent, $prefix } from '@opentiny/vue-common'
 import { t } from '@opentiny/vue-locale'
 import '@opentiny/vue-theme/rich-text-editor/index.less'
-import Codehighlight from './code-highlight'
+// import Codehighlight from './code-highlight.vue'
 
 export default defineComponent({
   name: $prefix + 'RichTextEditor',
@@ -417,10 +418,7 @@ export default defineComponent({
       mono: true,
       extendOptions: {
         Editor,
-        Collaboration,
         StarterKit,
-        Y,
-        WebrtcProvider,
         Table,
         TableCell,
         TableHeader,
@@ -441,10 +439,10 @@ export default defineComponent({
         CodeBlockLowlight,
         lowlight,
         VueNodeViewRenderer,
-        CodehighComp: VueNodeViewRenderer(Codehighlight(NodeViewContent, nodeViewProps, NodeViewWrapper)),
-        NodeViewContent,
-        nodeViewProps,
-        NodeViewWrapper,
+        // CodehighComp: VueNodeViewRenderer(Codehighlight(NodeViewContent, nodeViewProps, NodeViewWrapper)),
+        // NodeViewContent,
+        // nodeViewProps,
+        // NodeViewWrapper,
         Placeholder,
         codeHighlight
       }
diff --git a/packages/vue/src/tabbar/src/mobile.vue b/packages/vue/src/tabbar/src/mobile.vue
index 6998a870c1..08535257fb 100644
--- a/packages/vue/src/tabbar/src/mobile.vue
+++ b/packages/vue/src/tabbar/src/mobile.vue
@@ -9,9 +9,10 @@
  * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
  *
  -->
-<template>
+ <template>
   <div :class="{ 'tiny-mobile-tabbar-placeholder': placeholder }" :style="{ height: state.height }">
     <div
+      ref="tabbar"
       class="tiny-mobile-tabbar"
       :class="[{ 'is-border': border }, { unfit: !state.fit, 'tiny-mobile-tabbar--fixed': fixed }]"
     >
@@ -27,6 +28,7 @@ import '@opentiny/vue-theme-mobile/tabbar/index.less'
 
 export default defineComponent({
   name: $prefix + 'Tabbar',
+  componentName: 'Tabbar',
   props: {
     activeColor: String,
     border: {
@@ -51,7 +53,7 @@ export default defineComponent({
     zIndex: [Number, String]
   },
   setup(props, context) {
-    return setup({ props, context, renderless, api })
+    return setup({ props, context, renderless, api, mono: true })
   }
 })
 </script>