diff --git a/src/assets/images/a1.png b/src/assets/images/a1.png
new file mode 100644
index 0000000..ca86fe4
Binary files /dev/null and b/src/assets/images/a1.png differ
diff --git a/src/assets/images/conversation/default_bg.png b/src/assets/images/conversation/default_bg.png
new file mode 100644
index 0000000..5456e86
Binary files /dev/null and b/src/assets/images/conversation/default_bg.png differ
diff --git a/src/assets/images/conversation/default_img.png b/src/assets/images/conversation/default_img.png
new file mode 100644
index 0000000..9110b44
Binary files /dev/null and b/src/assets/images/conversation/default_img.png differ
diff --git a/src/assets/images/conversation/logo.png b/src/assets/images/conversation/logo.png
new file mode 100644
index 0000000..5244c30
Binary files /dev/null and b/src/assets/images/conversation/logo.png differ
diff --git a/src/assets/svg/down.svg b/src/assets/svg/down.svg
new file mode 100644
index 0000000..0b71a2d
--- /dev/null
+++ b/src/assets/svg/down.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0"><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1705480968419" class="icon" viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" p-id="2401"
+    xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50">
+    <path d="M512 750.2c-10.6 0-20.8-4.2-28.3-11.7L75.6 330.3c-15.6-15.6-15.6-40.9 0-56.6 15.6-15.6 40.9-15.6 56.6 0L512 653.6l379.8-379.9c15.6-15.6 40.9-15.6 56.6 0 15.6 15.6 15.6 40.9 0 56.6L540.3 738.5c-7.5 7.5-17.7 11.7-28.3 11.7z" p-id="2402"></path>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/more.svg b/src/assets/svg/more.svg
new file mode 100644
index 0000000..77a0695
--- /dev/null
+++ b/src/assets/svg/more.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="50px" height="22px" viewBox="0 0 50 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 22</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页" transform="translate(-1063.000000, -508.000000)">
+            <g id="编组-22" transform="translate(1063.000000, 508.000000)">
+                <rect id="矩形" fill="#E7EDFF" x="0" y="0" width="50" height="22" rx="11"></rect>
+                <g id="更多" transform="translate(14.000000, 9.000000)" fill="#4670E3" fill-rule="nonzero">
+                    <path d="M0,2 C0,3.1045695 0.8954305,4 2,4 C3.1045695,4 4,3.1045695 4,2 C4,0.8954305 3.1045695,0 2,0 C0.8954305,0 0,0.8954305 0,2 Z" id="路径"></path>
+                    <path d="M9,2 C9,3.1045695 9.8954305,4 11,4 C12.1045695,4 13,3.1045695 13,2 C13,0.8954305 12.1045695,0 11,0 C9.8954305,0 9,0.8954305 9,2 Z" id="路径"></path>
+                    <path d="M19,2 C19,3.1045695 19.8954305,4 21,4 C22.1045695,4 23,3.1045695 23,2 C23,0.8954305 22.1045695,0 21,0 C19.8954305,0 19,0.8954305 19,2 Z" id="路径"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/purse.svg b/src/assets/svg/purse.svg
new file mode 100644
index 0000000..592f8ae
--- /dev/null
+++ b/src/assets/svg/purse.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="16px" viewBox="0 0 14 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>yuebao</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页" transform="translate(-150.000000, -903.000000)" fill="#F7B500" fill-rule="nonzero">
+            <g id="编组-24" transform="translate(124.000000, 876.000000)">
+                <g id="编组-4" transform="translate(26.366972, 22.000000)">
+                    <g id="yuebao" transform="translate(0.000000, 5.000000)">
+                        <path d="M5.00522911,4 L8.6402589,4 L9.6149815,2.20168543 C9.6149815,2.20168543 10.3457587,1.00241225 9.3710203,0.468778404 C8.43909958,-0.0418341809 6.94988517,-0.00184990462 6.82291788,0.00238022479 C6.69520771,-0.00184990462 5.20673617,-0.0418341809 4.27481546,0.468778404 C3.30045639,1.00239098 4.03049073,2.20168543 4.03049073,2.20168543 L5.00522911,4 Z" id="路径"></path>
+                        <path d="M8.43464707,4 L4.80388505,4 C4.80388505,4 0,5.92671705 0,11.2425199 C0,15.8887647 5.28626401,16.0330479 6.61926606,15.996268 C7.95259782,16.0330292 13.2385321,15.8887647 13.2385321,11.2425199 C13.2385321,5.92671705 8.43464707,4 8.43464707,4 Z M7.94147415,10.4538145 L9.02611098,10.4538145 C9.27805104,10.4538145 9.48230331,10.6715081 9.48230331,10.9442502 C9.48230331,11.2151076 9.27591653,11.4346859 9.02428885,11.4346859 L7.25801863,11.4346859 L7.25801863,13.5481014 C7.25801863,13.8231761 7.05123272,14.0461693 6.7921256,14.0461693 C6.53482327,14.0461693 6.32623258,13.8192014 6.32623258,13.5481014 L6.3262326,11.4346859 L4.67550285,11.4346859 C4.42255629,11.4346859 4.2174884,11.2169923 4.2174884,10.9442502 C4.2174884,10.6733928 4.42040444,10.4538145 4.67064385,10.4538145 L6.3262326,10.4538145 L6.3262326,9.44650109 L4.68933372,9.44650109 C4.4287342,9.44650109 4.2174884,9.22173517 4.2174884,8.94011065 C4.2174884,8.66044548 4.43040014,8.4337202 4.68933372,8.4337202 L5.74743685,8.4337202 L4.52207939,7.11608242 C4.35862552,6.94031901 4.35801813,6.65600738 4.52325944,6.47830327 C4.68737277,6.30183076 4.95201568,6.3003006 5.11637195,6.47703436 L6.53024193,7.99738132 C6.64015984,8.11557703 6.67608186,8.28279393 6.63779975,8.43373885 L6.72918398,8.43373885 C6.70547892,8.29115384 6.74485431,8.13948117 6.84710193,8.02953338 L8.28609999,6.48216598 C8.45337166,6.30229726 8.72271742,6.30386473 8.88974614,6.4834722 C9.05793757,6.66432994 9.05731284,6.95369858 8.89094354,7.13257829 L7.68089199,8.43373883 L9.01044066,8.43373883 C9.27104018,8.43373883 9.48230331,8.65850476 9.48230331,8.94012928 C9.48230331,9.21979445 9.26937424,9.44651973 9.01044066,9.44651973 L7.25801863,9.44651977 L7.25801863,10.4538331 L7.94147415,10.4538331 L7.94147415,10.4538145 Z" id="形状"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/refresh.svg b/src/assets/svg/refresh.svg
new file mode 100644
index 0000000..5b3ea9c
--- /dev/null
+++ b/src/assets/svg/refresh.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="27px" height="24px" viewBox="0 0 27 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>shuaxin</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页" transform="translate(-1660.000000, -426.000000)" fill="#4670E3" fill-rule="nonzero">
+            <g id="shuaxin" transform="translate(1660.000000, 426.000000)">
+                <path d="M24.9230769,6.15000002 L21.2307692,9.75000002 C20.3076923,5.85 16.6153846,2.85000001 12.3076923,2.85000001 C7.23076922,2.85000001 3.07692306,6.90000001 3.07692306,11.85 C3.07692306,16.8 7.23076922,20.85 12.3076923,20.85 C17.2307692,20.85 21.3846154,17.1 21.5384615,12.3 L24.3076923,9.60000001 C24.4615385,10.35 24.6153846,11.1 24.6153846,12 C24.6153846,18.6 19.0769231,24 12.3076923,24 C5.53846154,24 0,18.6 0,12 C0,5.40000003 5.53846154,0 12.3076923,0 C16.3076923,0 20,1.95000001 22.1538462,4.80000002 L22.4615384,4.35000002 L26.7692308,4.35000002 L24.9230769,6.15000002 Z" id="路径"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/robot.svg b/src/assets/svg/robot.svg
new file mode 100644
index 0000000..3769272
--- /dev/null
+++ b/src/assets/svg/robot.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="30px" height="21px" viewBox="0 0 30 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 16</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#6597FC" offset="0%"></stop>
+            <stop stop-color="#5A8EFE" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页" transform="translate(-1056.000000, -95.000000)" fill="url(#linearGradient-1)">
+            <g id="编组-28备份-3" transform="translate(1033.415929, 86.103774)">
+                <g id="编组-16" transform="translate(23.551127, 8.953729)">
+                    <path d="M19.2723678,0 L19.2723678,2.49886621 L15.8904523,2.498 L15.8904523,3.748 L24.6821552,3.74829932 L24.6821552,20.6156463 L4.3954523,20.6156463 L4.3954523,3.74829932 L13.1854523,3.748 L13.1854523,2.498 L9.80523974,2.49886621 L9.80523974,0 L19.2723678,0 Z M21.9772615,6.24716553 L7.10034602,6.24716553 L7.10034602,18.11678 L21.9772615,18.11678 L21.9772615,6.24716553 Z M2.36678201,8.27749433 L2.36678201,14.5246599 L0,14.5246599 L0,8.27749433 L2.36678201,8.27749433 Z M28.7394958,8.27749433 L28.7394958,14.5246599 L26.3727138,14.5246599 L26.3727138,8.27749433 L28.7394958,8.27749433 Z M13.1863569,9.99546485 L13.1863569,12.8066893 L10.1433515,12.8066893 L10.1433515,9.99546485 L13.1863569,9.99546485 Z M19.2723678,9.99546485 L19.2723678,12.8066893 L16.2293623,12.8066893 L16.2293623,9.99546485 L19.2723678,9.99546485 Z" id="形状结合"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/AppContainerBox/index.vue b/src/components/AppContainerBox/index.vue
index 87adb37..b8daad3 100644
--- a/src/components/AppContainerBox/index.vue
+++ b/src/components/AppContainerBox/index.vue
@@ -1,3 +1,4 @@
+<!-- 子菜单与内容容器布局组件 -->
 <script setup lang="ts">
 import { AppSubMenuBox } from '@/components/AppSubMenuBox'
 import { AppContentBox } from '@/components/AppContentBox'
diff --git a/src/components/AppContentBox/index.vue b/src/components/AppContentBox/index.vue
index 43caa74..b48ddf0 100644
--- a/src/components/AppContentBox/index.vue
+++ b/src/components/AppContentBox/index.vue
@@ -1,3 +1,4 @@
+<!-- 内容容器组件 -->
 <script setup lang="ts">
 </script>
 
diff --git a/src/components/AppContentDefaultBox/index.ts b/src/components/AppContentDefaultBox/index.ts
new file mode 100644
index 0000000..47faf57
--- /dev/null
+++ b/src/components/AppContentDefaultBox/index.ts
@@ -0,0 +1,3 @@
+import AppContentDefaultBox from './index.vue'
+
+export { AppContentDefaultBox }
diff --git a/src/components/AppContentDefaultBox/index.vue b/src/components/AppContentDefaultBox/index.vue
new file mode 100644
index 0000000..0b49bca
--- /dev/null
+++ b/src/components/AppContentDefaultBox/index.vue
@@ -0,0 +1,15 @@
+<!-- 内容默认容器组件 -->
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="app-content-default-box w-full">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@include app('content-default-box') {
+  padding: 0 100px;
+}
+</style>
diff --git a/src/components/AppConversationDefault/index.ts b/src/components/AppConversationDefault/index.ts
new file mode 100644
index 0000000..f9f8c56
--- /dev/null
+++ b/src/components/AppConversationDefault/index.ts
@@ -0,0 +1,3 @@
+import AppConversationDefault from './index.vue'
+
+export { AppConversationDefault }
diff --git a/src/components/AppConversationDefault/index.vue b/src/components/AppConversationDefault/index.vue
new file mode 100644
index 0000000..a45464c
--- /dev/null
+++ b/src/components/AppConversationDefault/index.vue
@@ -0,0 +1,169 @@
+<!-- 会话默认对话组件 -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import DefaultImage from '@/assets/images/conversation/default_img.png'
+import TestImg from '@/assets/images/a1.png'
+import { SvgIcon } from '@/components/SvgIcon'
+import { AppContentDefaultBox } from '@/components/AppContentDefaultBox'
+import { AppDefaultLead } from '@/components/AppDefaultLead'
+import { AppModelSelect } from '@/components/AppModelSelect'
+import { AppTopPicks } from '@/components/AppTopPicks'
+import type { TopPickItem } from '@/components/AppTopPicks/index.d'
+import { AppPicture } from '@/components/AppPicture'
+import type { PictureType } from '@/components/AppPicture/index.d'
+
+const leadData = {
+  title: '你好，我是青鸟语言大模型-同聪~',
+  subTitles: [
+    '我可以自由的跟你对话～陪你聊天～帮你想方案～答疑解惑。',
+    '你可以试着问我',
+  ],
+  image: DefaultImage,
+}
+
+const topPickList = ref<TopPickItem[]>([
+  {
+    id: '1',
+    label: '啦啦啦啦啦啦',
+  },
+  {
+    id: '2',
+    label: '啦啦啦啦啦啦',
+  },
+  {
+    id: '3',
+    label: '啦啦啦啦啦啦啦啦啦啦啦啦',
+  },
+  {
+    id: '4',
+    label: '啦啦啦啦啦啦',
+  },
+  {
+    id: '5',
+    label: '啦啦啦啦啦啦',
+  },
+])
+
+const roleList = ref<PictureType[]>([
+  {
+    id: '1',
+    image: TestImg,
+    name: '法律顾问',
+    type: '2',
+  },
+  {
+    id: '1',
+    image: TestImg,
+    name: '法律顾问',
+    type: '2',
+  },
+  {
+    id: '1',
+    image: TestImg,
+    name: '法律顾问',
+    type: '2',
+  },
+  {
+    id: '1',
+    image: TestImg,
+    name: '法律顾问',
+    type: '2',
+  },
+])
+</script>
+
+<template>
+  <AppContentDefaultBox>
+    <AppModelSelect></AppModelSelect>
+    <AppDefaultLead
+      class="mt-10"
+      :title="leadData.title"
+      :sub-titles="leadData.subTitles"
+      :image="leadData.image"
+    ></AppDefaultLead>
+    <AppTopPicks class="pl-20 mt-10" :list="topPickList"></AppTopPicks>
+
+    <div class="pl-20 mt-10 flex justify-between items-end">
+      <div class="category-box">
+        <div class="top flex items-center">
+          <p class="title">
+            常用角色
+          </p>
+          <p class="sub-title truncate">
+            我会转换为不同的角色跟你对话
+          </p>
+          <SvgIcon class="icon" name="more"></SvgIcon>
+        </div>
+        <div class="picture-box flex">
+          <AppPicture
+            v-for="(item, index) in roleList"
+            :key="index"
+            class="picture-item-role"
+            :name="item.name"
+            :image="item.image"
+          ></AppPicture>
+        </div>
+      </div>
+      <div class="category-box">
+        <div class="top flex items-center">
+          <p class="title">
+            热门应用
+          </p>
+          <p class="sub-title truncate">
+            这里或许有你想要的好东西
+          </p>
+          <SvgIcon class="icon" name="more"></SvgIcon>
+        </div>
+        <div class="picture-box flex">
+          <AppPicture
+            v-for="(item, index) in roleList"
+            :key="index"
+            class="picture-item"
+            :name="item.name"
+            :image="item.image"
+            type="entire"
+          ></AppPicture>
+        </div>
+      </div>
+    </div>
+  </AppContentDefaultBox>
+</template>
+
+<style lang="scss" scoped>
+.category-box {
+  width: calc(50% - 10px);
+  padding: 15px 20px;
+  background-color: #edf3ff;
+  border-radius: 8px;
+  .top {
+    position: relative;
+    .title {
+      font-size: 18px;
+      font-weight: bold;
+      margin-bottom: 0;
+    }
+    .sub-title {
+      color: #6d7278;
+      margin-left: 30px;
+      margin-bottom: 0;
+    }
+    .icon {
+      width: 45px;
+      height: 18px;
+      cursor: pointer;
+      position: absolute;
+      right: 0;
+      top: 6px;
+    }
+  }
+  .picture-box {
+    margin-top: 20px;
+    .picture-item-role {
+      margin-left: -10px;
+    }
+    .picture-item + .picture-item {
+      margin-left: 15px;
+    }
+  }
+}
+</style>
diff --git a/src/components/AppDefaultLead/index.ts b/src/components/AppDefaultLead/index.ts
new file mode 100644
index 0000000..e2ccd4b
--- /dev/null
+++ b/src/components/AppDefaultLead/index.ts
@@ -0,0 +1,3 @@
+import AppDefaultLead from './index.vue'
+
+export { AppDefaultLead }
diff --git a/src/components/AppDefaultLead/index.vue b/src/components/AppDefaultLead/index.vue
new file mode 100644
index 0000000..aba9ae4
--- /dev/null
+++ b/src/components/AppDefaultLead/index.vue
@@ -0,0 +1,77 @@
+<!-- 默认导读组件 -->
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    default: '你好啊',
+  },
+  subTitles: {
+    type: Array,
+    default: () => [],
+  },
+  image: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="app-default-lead flex justify-between">
+    <img class="profile" src="~@/assets/images/conversation/logo.png" alt="">
+    <div class="right">
+      <div class="banner flex justify-between">
+        <div class="content">
+          <p class="title">
+            {{ title }}
+          </p>
+          <p v-for="(subTitle, index) of subTitles" :key="index" class="sub-title">
+            {{ subTitle }}
+          </p>
+        </div>
+        <img v-if="image" class="banner-img" :src="image" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@include app('default-lead') {
+  .profile {
+    width: 50px;
+    height: 40px;
+  }
+  .right {
+    width: calc(100% - 50px);
+    padding-left: 30px;
+    .banner {
+      padding: 30px;
+      border-radius: 22px;
+      background-image: url(../../assets/images/conversation/default_bg.png);
+      background-size: cover;
+      position: relative;
+      box-shadow: 5px 5px 15px #2260e8;
+      .content {
+        color: #fff;
+        .title {
+          font-size: 26px;
+          font-weight: bold;
+          margin-bottom: 20px;
+          line-height: 40px;
+        }
+        .sub-title {
+          line-height: 32px;
+          margin: 0;
+        }
+      }
+      .banner-img {
+        width: 50%;
+        max-width: 500px;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/AppModelSelect/index.d.ts b/src/components/AppModelSelect/index.d.ts
new file mode 100644
index 0000000..69dd6a3
--- /dev/null
+++ b/src/components/AppModelSelect/index.d.ts
@@ -0,0 +1,4 @@
+export interface ModelSelect {
+  label: string
+  value: string
+}
diff --git a/src/components/AppModelSelect/index.ts b/src/components/AppModelSelect/index.ts
new file mode 100644
index 0000000..440efff
--- /dev/null
+++ b/src/components/AppModelSelect/index.ts
@@ -0,0 +1,3 @@
+import AppModelSelect from './index.vue'
+
+export { AppModelSelect }
diff --git a/src/components/AppModelSelect/index.vue b/src/components/AppModelSelect/index.vue
new file mode 100644
index 0000000..86a755a
--- /dev/null
+++ b/src/components/AppModelSelect/index.vue
@@ -0,0 +1,64 @@
+<!-- 3.5和4.0模型切换组件 -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Dropdown, Menu, MenuItem } from 'ant-design-vue'
+import type { ModelSelect } from './index.d'
+import { SvgIcon } from '@/components/SvgIcon'
+
+const emit = defineEmits(['change'])
+const optionActive = ref(0)
+const options: ModelSelect[] = [
+  {
+    label: '同聪3.5',
+    value: '1',
+  },
+  {
+    label: '同聪4.0',
+    value: '2',
+  },
+]
+
+function handelChange(index: number, item: ModelSelect) {
+  optionActive.value = index
+  emit('change', index, item)
+}
+</script>
+
+<template>
+  <Dropdown :trigger="['click']">
+    <div class="app-model-select flex justify-between items-center" @click.prevent>
+      <SvgIcon class="icon icon-robot" name="robot" />
+      {{ options[optionActive].label }}
+      <SvgIcon class="icon icon-down" name="down" />
+    </div>
+
+    <template #overlay>
+      <Menu>
+        <MenuItem v-for="(item, index) in options" :key="item.value" @click="handelChange(index, item)">
+          {{ item.label }}
+        </MenuItem>
+      </Menu>
+    </template>
+  </Dropdown>
+</template>
+
+<style lang="scss" scoped>
+@include app('model-select') {
+  width: 200px;
+  height: 40px;
+  padding: 0 20px;
+  margin: 0 auto;
+  color: #4670e3;
+  background-color: #edf3ff;
+  border-radius: 20px;
+  cursor: pointer;
+  .icon {
+    width: 24px;
+    height: 24px;
+  }
+  .icon-down {
+    width: 18px;
+    height: 18px;
+  }
+}
+</style>
diff --git a/src/components/AppPicture/index.d.ts b/src/components/AppPicture/index.d.ts
new file mode 100644
index 0000000..1bcae4e
--- /dev/null
+++ b/src/components/AppPicture/index.d.ts
@@ -0,0 +1,6 @@
+export interface PictureType {
+  id: string
+  image: string
+  name: string
+  type: string
+}
diff --git a/src/components/AppPicture/index.ts b/src/components/AppPicture/index.ts
new file mode 100644
index 0000000..893a313
--- /dev/null
+++ b/src/components/AppPicture/index.ts
@@ -0,0 +1,3 @@
+import AppPicture from './index.vue'
+
+export { AppPicture }
diff --git a/src/components/AppPicture/index.vue b/src/components/AppPicture/index.vue
new file mode 100644
index 0000000..c352b25
--- /dev/null
+++ b/src/components/AppPicture/index.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  widthStyle?: number
+  heightStyle?: number
+  type?: 'separate' | 'entire'
+  name: string
+  image: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  widthStyle: 80,
+  heightStyle: 80,
+  type: 'separate',
+  name: '',
+  image: '',
+})
+const w = computed(() => `${props.widthStyle}px`)
+const h = computed(() => `${props.heightStyle}px`)
+</script>
+
+<template>
+  <div class="app-picture" :style="{ width: w, height: h }">
+    <div v-if="props.type === 'separate'" class="separate-box w-full h-full">
+      <img class="img" :src="image" alt="">
+      <p class="name w-full">
+        {{ name }}
+      </p>
+    </div>
+    <div v-else class="entire-box w-full h-full">
+      <img class="img w-full h-full" :src="image" alt="">
+
+      <p class="name w-full">
+        {{ name }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@include app('picture') {
+  cursor: pointer;
+  .separate-box {
+    .img {
+      width: calc(100% - 25px);
+      height: calc(100% - 25px);
+      margin: 0 auto;
+      display: block;
+    }
+    .name {
+      text-align: center;
+      margin-top: 3px;
+      margin-bottom: 0;
+    }
+  }
+  .entire-box {
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    .name {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      color: #fff;
+      background-color: rgba($color: #000000, $alpha: 0.5);
+      margin: 0;
+      text-align: center;
+    }
+  }
+}
+</style>
diff --git a/src/components/AppSubMenuBox/index.vue b/src/components/AppSubMenuBox/index.vue
index cd28458..b5c7836 100644
--- a/src/components/AppSubMenuBox/index.vue
+++ b/src/components/AppSubMenuBox/index.vue
@@ -1,3 +1,4 @@
+<!-- 子菜单容器组件 -->
 <script setup lang="ts">
 </script>
 
diff --git a/src/components/AppSubMenuList/index.vue b/src/components/AppSubMenuList/index.vue
index 0bf8e0f..f7868d8 100644
--- a/src/components/AppSubMenuList/index.vue
+++ b/src/components/AppSubMenuList/index.vue
@@ -1,3 +1,4 @@
+<!-- 子菜单列表组件 -->
 <script setup lang="ts">
 import type { SubMenuItem } from './index.d'
 
@@ -5,6 +6,12 @@ defineProps<{
   list: SubMenuItem[]
   activeIndex: number
 }>()
+
+const emit = defineEmits(['change'])
+
+function handleClick(index: number, item: SubMenuItem) {
+  emit('change', index, item)
+}
 </script>
 
 <template>
@@ -14,6 +21,7 @@ defineProps<{
       :key="item.id"
       class="app-sub-menu-list-item"
       :class="[activeIndex === index && 'app-sub-menu-list-item-active']"
+      @click="handleClick(index, item)"
     >
       <p class="title">
         {{ item.title }}
@@ -30,6 +38,8 @@ defineProps<{
   &-item {
     padding: 10px 10px 10px 20px;
     border-radius: 10px 0 0 10px;
+    transition: all 0.2s;
+    cursor: pointer;
     .title {
       font-weight: bold;
       font-size: 14px;
diff --git a/src/components/AppSubMenuTitle/index.vue b/src/components/AppSubMenuTitle/index.vue
index 77dbc8d..f33af69 100644
--- a/src/components/AppSubMenuTitle/index.vue
+++ b/src/components/AppSubMenuTitle/index.vue
@@ -1,3 +1,4 @@
+<!-- 子菜单标题组件 -->
 <script setup lang="ts">
 defineProps({
   title: {
@@ -20,6 +21,7 @@ defineProps({
   color: #1a1414;
   position: relative;
   padding-left: 20px;
+  margin-bottom: 20px;
   z-index: 1;
   &::after {
     content: '';
diff --git a/src/components/AppTopPicks/index.d.ts b/src/components/AppTopPicks/index.d.ts
new file mode 100644
index 0000000..4a2da43
--- /dev/null
+++ b/src/components/AppTopPicks/index.d.ts
@@ -0,0 +1,4 @@
+export interface TopPickItem {
+  id: string
+  label: string
+}
diff --git a/src/components/AppTopPicks/index.ts b/src/components/AppTopPicks/index.ts
new file mode 100644
index 0000000..34a837a
--- /dev/null
+++ b/src/components/AppTopPicks/index.ts
@@ -0,0 +1,3 @@
+import AppTopPicks from './index.vue'
+
+export { AppTopPicks }
diff --git a/src/components/AppTopPicks/index.vue b/src/components/AppTopPicks/index.vue
new file mode 100644
index 0000000..df7b070
--- /dev/null
+++ b/src/components/AppTopPicks/index.vue
@@ -0,0 +1,53 @@
+<!-- 精选推荐组件 -->
+<script setup lang="ts">
+import type { TopPickItem } from './index.d'
+import { SvgIcon } from '@/components/SvgIcon'
+
+defineProps<{
+  list: TopPickItem[]
+}>()
+
+const emit = defineEmits(['change', 'refresh'])
+
+function handelChange(index: number, item: TopPickItem) {
+  emit('change', index, item)
+}
+</script>
+
+<template>
+  <div class="app-top-picks flex items-center">
+    <div
+      v-for="(item, index) in list"
+      :key="index"
+      class="item truncate"
+      @click="handelChange(index, item)"
+    >
+      {{ item.label }}
+    </div>
+    <SvgIcon class="icon" name="refresh" @click="emit('refresh')" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@include app('top-picks') {
+  .item {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 20px;
+    color: #4670e3;
+    background-color: #edf3ff;
+    border-radius: 8px;
+    cursor: pointer;
+  }
+  .item + .item {
+    margin-left: 20px;
+  }
+  .icon {
+    width: 20px;
+    height: 20px;
+    color: #4670e3;
+    margin-left: 20px;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/store/moules/userStore/index.ts b/src/store/moules/userStore/index.ts
index ba8ecf9..86d0374 100644
--- a/src/store/moules/userStore/index.ts
+++ b/src/store/moules/userStore/index.ts
@@ -1,10 +1,3 @@
-/*
- * @Description: 主题状态控制
- * @Author: yeke
- * @Date: 2023-06-28 11:16:32
- * @LastEditors: lipenghui
- * @LastEditTime: 2024-01-17 13:54:13
- */
 import { defineStore } from 'pinia'
 import type { UserInfoType, UserStateType } from './index.d'
 import { router } from '@/router'
diff --git a/src/views/conversation/index.vue b/src/views/conversation/index.vue
index d8db631..fd1fc0e 100644
--- a/src/views/conversation/index.vue
+++ b/src/views/conversation/index.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { Button } from 'ant-design-vue'
 import { AppContainerBox } from '@/components/AppContainerBox'
 import { AppSubMenuTitle } from '@/components/AppSubMenuTitle'
 import { AppSubMenuList } from '@/components/AppSubMenuList'
+import { AppConversationDefault } from '@/components/AppConversationDefault'
 import type { SubMenuItem } from '@/components/AppSubMenuList/index.d'
 
 const subMenuActive = ref(0)
@@ -18,16 +20,25 @@ const subMenuList = ref<SubMenuItem[]>([
     id: '2',
   },
 ])
+
+function handleSubMenuChange(index: number) {
+  subMenuActive.value = index
+}
 </script>
 
 <template>
   <AppContainerBox>
     <template #subMenu>
       <AppSubMenuTitle></AppSubMenuTitle>
-      <AppSubMenuList :list="subMenuList" :active-index="subMenuActive"></AppSubMenuList>
-      我是子菜单
+      <div class="px-5 mb-5">
+        <Button type="primary" class="w-full">
+          新建会话
+        </Button>
+      </div>
+      <AppSubMenuList :list="subMenuList" :active-index="subMenuActive" @change="handleSubMenuChange"></AppSubMenuList>
     </template>
     <template #content>
+      <AppConversationDefault></AppConversationDefault>
       我是内容区
     </template>
   </AppContainerBox>