diff --git a/vocata-server/src/main/java/com/vocata/character/mapper/CharacterMapper.java b/vocata-server/src/main/java/com/vocata/character/mapper/CharacterMapper.java
index 3c51d60..6e69814 100644
--- a/vocata-server/src/main/java/com/vocata/character/mapper/CharacterMapper.java
+++ b/vocata-server/src/main/java/com/vocata/character/mapper/CharacterMapper.java
@@ -62,6 +62,8 @@ int updateCharacterTags(@Param("characterId") Long characterId,
      * @param page 分页参数
      * @param status 角色状态
      * @param isFeatured 是否精选
+     * @param orderBy 排序字段
+     * @param orderDirection 排序方向
      * @return 角色列表（包含创建者名称）
      */
     @Select("<script>" +
@@ -77,11 +79,42 @@ int updateCharacterTags(@Param("characterId") Long characterId,
             "AND c.is_delete = 0 " +
             "<if test='status != null'> AND c.status = #{status} </if>" +
             "<if test='isFeatured != null'> AND c.is_featured = #{isFeatured} </if>" +
-            "ORDER BY c.chat_count DESC, c.created_at DESC" +
+            "ORDER BY " +
+            "<choose>" +
+            "  <when test='orderBy == \"chat_count\"'>" +
+            "    c.chat_count " +
+            "  </when>" +
+            "  <when test='orderBy == \"created_at\"'>" +
+            "    c.created_at " +
+            "  </when>" +
+            "  <when test='orderBy == \"updated_at\"'>" +
+            "    c.updated_at " +
+            "  </when>" +
+            "  <when test='orderBy == \"trending_score\"'>" +
+            "    c.trending_score " +
+            "  </when>" +
+            "  <when test='orderBy == \"sort_weight\"'>" +
+            "    c.sort_weight " +
+            "  </when>" +
+            "  <otherwise>" +
+            "    c.chat_count " +
+            "  </otherwise>" +
+            "</choose>" +
+            "<choose>" +
+            "  <when test='orderDirection == \"asc\"'>" +
+            "    ASC " +
+            "  </when>" +
+            "  <otherwise>" +
+            "    DESC " +
+            "  </otherwise>" +
+            "</choose>" +
+            ", c.created_at DESC" +
             "</script>")
     IPage<Map<String, Object>> selectPublicCharactersWithCreator(Page<?> page,
                                                                 @Param("status") Integer status,
-                                                                @Param("isFeatured") Integer isFeatured);
+                                                                @Param("isFeatured") Integer isFeatured,
+                                                                @Param("orderBy") String orderBy,
+                                                                @Param("orderDirection") String orderDirection);
 
     /**
      * 获取精选角色列表（包含创建者名称）
diff --git a/vocata-server/src/main/java/com/vocata/character/service/impl/CharacterServiceImpl.java b/vocata-server/src/main/java/com/vocata/character/service/impl/CharacterServiceImpl.java
index 295fda5..75bebf9 100644
--- a/vocata-server/src/main/java/com/vocata/character/service/impl/CharacterServiceImpl.java
+++ b/vocata-server/src/main/java/com/vocata/character/service/impl/CharacterServiceImpl.java
@@ -248,7 +248,15 @@ public List<Map<String, Object>> getFeaturedCharactersWithCreator(int limit) {
     public IPage<Map<String, Object>> getPublicCharactersWithCreator(Page<Character> page, Integer status,
                                                                    Integer isFeatured, List<String> tags,
                                                                    String orderBy, String orderDirection) {
-        return this.baseMapper.selectPublicCharactersWithCreator(page, status, isFeatured);
+        // 设置默认排序参数
+        if (StringUtils.isBlank(orderBy)) {
+            orderBy = "chat_count";
+        }
+        if (StringUtils.isBlank(orderDirection)) {
+            orderDirection = "desc";
+        }
+
+        return this.baseMapper.selectPublicCharactersWithCreator(page, status, isFeatured, orderBy, orderDirection);
     }
 
     @Override
diff --git a/vocata-web/src/assets/styles/pagination-theme.css b/vocata-web/src/assets/styles/pagination-theme.css
new file mode 100644
index 0000000..8ff5717
--- /dev/null
+++ b/vocata-web/src/assets/styles/pagination-theme.css
@@ -0,0 +1,57 @@
+/* 分页组件黑白灰主题覆盖样式 */
+:root {
+  --el-color-primary: #333333;
+  --el-color-primary-light-3: #f8f8f8;
+  --el-color-primary-light-5: #cccccc;
+  --el-color-primary-light-7: #e5e5e5;
+  --el-color-primary-light-8: #f0f0f0;
+  --el-color-primary-light-9: #f8f8f8;
+}
+
+/* 分页组件专用样式 */
+.pagination-container .el-pagination {
+  --el-color-primary: #333333;
+}
+
+.pagination-container .el-pagination .el-pager li {
+  color: #666666 !important;
+  background-color: #ffffff !important;
+  border: 1px solid #e5e5e5 !important;
+}
+
+.pagination-container .el-pagination .el-pager li:hover {
+  color: #333333 !important;
+  background-color: #f8f8f8 !important;
+  border-color: #cccccc !important;
+}
+
+.pagination-container .el-pagination .el-pager li.is-active {
+  color: #ffffff !important;
+  background-color: #333333 !important;
+  border-color: #333333 !important;
+}
+
+.pagination-container .el-pagination .btn-prev,
+.pagination-container .el-pagination .btn-next {
+  color: #666666 !important;
+  background-color: #ffffff !important;
+  border: 1px solid #e5e5e5 !important;
+}
+
+.pagination-container .el-pagination .btn-prev:hover:not(:disabled),
+.pagination-container .el-pagination .btn-next:hover:not(:disabled) {
+  color: #333333 !important;
+  background-color: #f8f8f8 !important;
+  border-color: #cccccc !important;
+}
+
+.pagination-container .el-pagination .btn-prev:disabled,
+.pagination-container .el-pagination .btn-next:disabled {
+  color: #cccccc !important;
+  background-color: #ffffff !important;
+  border-color: #f0f0f0 !important;
+}
+
+.pagination-container .el-pagination .el-pagination__total {
+  color: #666666 !important;
+}
\ No newline at end of file
diff --git a/vocata-web/src/layouts/SliderBar.vue b/vocata-web/src/layouts/SliderBar.vue
index d5ab28b..bb1b3bb 100644
--- a/vocata-web/src/layouts/SliderBar.vue
+++ b/vocata-web/src/layouts/SliderBar.vue
@@ -126,9 +126,9 @@
             <div class="user-avatar">
               <img :src="userInfo.avatar" alt="" />
             </div>
-            <div class="user-name">{{ userInfo.nickname }}</div>
+            <div v-if="!sidebarCollapsed" class="user-name">{{ userInfo.nickname }}</div>
           </div>
-          <div class="more">
+          <div v-if="!sidebarCollapsed" class="more">
             <el-icon>
               <MoreFilled />
             </el-icon>
@@ -351,15 +351,15 @@ const confirmEditTitle = async (conversationUuid: string) => {
 
 <style lang="scss" scoped>
 .sidebar {
-  width: 2.5rem;
-  background-color: #f9f9f9;
+  width: 3.5rem;
+  background-color: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;
   transition: all 0.3s ease;
-  font-size: 0.16rem;
+  font-size: 0.26rem;
   overflow: hidden;
-  box-shadow: 0.02rem 0 0.1rem rgba(0, 0, 0, 0.07);
+  border-right: 1px solid #e5e5e5;
 
   &.mobile {
     width: 100%;
@@ -371,7 +371,7 @@ const confirmEditTitle = async (conversationUuid: string) => {
   }
 
   &.collapsed {
-    width: 0.8rem;
+    width: 1.2rem;
     .sidebar-header {
       justify-content: center;
     }
@@ -436,48 +436,87 @@ const confirmEditTitle = async (conversationUuid: string) => {
     .role-btn {
       display: flex;
       align-items: center;
-      border-radius: 0.1rem;
-      font-size: 0.2rem;
-      margin: 0.03rem 0 0;
-      padding: 0.1rem 0.2rem;
+      border-radius: 0.2rem;
+      font-size: 0.28rem !important;
+      margin: 0.05rem 0;
+      padding: 0.18rem 0.24rem;
       transition: all 0.2s;
       cursor: pointer;
-      color: #333;
+      color: #374151;
+      background-color: transparent;
 
       &:hover {
-        background-color: #f7f7f7;
-        // color: #fff;
+        background-color: #f3f4f6;
+        color: #111827;
       }
+
       .role-btn__icon {
-        // background: #000;
-        // color: #000;
-        font-weight: bold;
-        border-radius: 0.05rem;
-        width: 0.3rem;
-        height: 0.3rem;
+        font-weight: 500;
+        border-radius: 0.08rem;
+        width: 0.36rem;
+        height: 0.36rem;
         display: flex;
         align-items: center;
         justify-content: center;
       }
       .role-btn__text {
-        margin-left: 0.15rem;
+        margin-left: 0.16rem;
+        font-weight: 500;
+        font-size: 0.28rem !important;
       }
     }
-    .active {
-      background-color: #eee;
-      // color: #fff;
-      font-weight: 500;
-    }
   }
 
   // 搜索框
   .search-section {
-    width: 85%;
-    margin-bottom: 0.3rem;
+    width: 90%;
+    margin-bottom: 0.25rem;
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 0.2rem;
+
+    :deep(.el-input) {
+      .el-input__wrapper {
+        border-radius: 0.18rem;
+        padding: 0.12rem 0.16rem;
+        font-size: 0.24rem;
+        box-shadow: none;
+        border: 1px solid #e5e7eb;
+        background-color: #f9fafb;
+        transition: all 0.2s ease;
+
+        &:hover {
+          border-color: #d1d5db;
+          background-color: #f3f4f6;
+        }
+
+        &.is-focus {
+          border-color: #3b82f6;
+          background-color: #fff;
+          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+
+        .el-input__inner {
+          font-size: 0.24rem;
+          line-height: 1.5;
+          color: #374151;
+
+          &::placeholder {
+            color: #9ca3af;
+            font-size: 0.2rem;
+          }
+        }
+
+        .el-input__suffix {
+          .el-input__suffix-inner {
+            .el-icon {
+              color: #6b7280;
+              font-size: 0.18rem;
+            }
+          }
+        }
+      }
+    }
 
     .search-section__icon {
       cursor: pointer;
@@ -486,72 +525,140 @@ const confirmEditTitle = async (conversationUuid: string) => {
 
   // 历史对话列表
   .history-section {
-    width: 90%;
+    width: 95%;
     display: flex;
     flex-direction: column;
-    padding: 0.2rem 0;
-    border-top: 0.01rem solid #f0f0f0;
+    padding: 0.15rem 0;
+    border-top: 1px solid #e5e7eb;
     flex: 1;
-    overflow: auto;
-    font-size: 0.16rem;
+    overflow: hidden;
 
     h3 {
-      font-size: 0.2rem;
-      text-align: center;
-      margin: 0 0 0.1rem 0;
-      color: #333;
-      font-weight: 500;
+      font-size: 0.28rem !important;
+      text-align: left;
+      margin: 0 0 0.15rem 0.15rem;
+      color: #374151;
+      font-weight: 600;
     }
     .history-list {
       width: 100%;
       overflow-y: auto;
       flex: 1;
+      padding: 0 0.1rem;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #d1d5db;
+        border-radius: 2px;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background: #9ca3af;
+      }
     }
 
     .history-item {
       display: flex;
       align-items: center;
-      padding: 0.1rem 0.15rem;
-      border-radius: 0.08rem;
-      margin-bottom: 0.05rem;
+      padding: 0.16rem 0.15rem;
+      border-radius: 0.16rem;
+      margin-bottom: 0.06rem;
       cursor: pointer;
       transition: all 0.2s;
-      color: #666;
+      color: #6b7280;
       position: relative;
+      font-size: 0.26rem !important;
 
       &:hover {
-        background-color: #f7f7f7;
+        background-color: #f3f4f6;
+        color: #374151;
+
         .history-item-actions {
           opacity: 1;
         }
       }
 
       &.active {
-        background-color: #eaeaea;
-        // color: #1890ff;
-        font-weight: bold;
+        background-color: #e5f3ff;
+        color: #0066cc;
+        font-weight: 500;
       }
 
-      .history-item-title {
-        flex: 1;
-        // width: 50%;
-        margin: 0 0.1rem;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        cursor: text;
+      .history-item-actions {
+        opacity: 0;
+        transition: opacity 0.2s;
+        display: flex;
+        align-items: center;
+        gap: 0.08rem;
+        margin-left: auto;
+
+        .action-btn {
+          width: 0.28rem;
+          height: 0.28rem;
+          padding: 0.04rem;
+          border-radius: 50%;
+          transition: all 0.2s;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 0.16rem;
+          color: #6b7280;
+
+          &:hover {
+            background-color: #e5e7eb;
+            color: #374151;
+          }
+
+          &.rename-btn:hover {
+            background-color: #dbeafe;
+            color: #2563eb;
+          }
+
+          &.delete-btn:hover {
+            background-color: #fee2e2;
+            color: #dc2626;
+          }
+        }
       }
       .history-item-avatar {
-        width: 0.25rem;
-        height: 0.25rem;
+        width: 0.36rem;
+        height: 0.36rem;
         border-radius: 50%;
         overflow: hidden;
+        flex-shrink: 0;
+        margin-right: 0.06rem;
         img {
           width: 100%;
           height: 100%;
           object-fit: cover;
         }
       }
+
+      .history-item-title {
+        flex: 1;
+        margin: 0 0.08rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        cursor: text;
+        font-size: 0.24rem !important;
+        line-height: 1.4;
+        font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        color: inherit;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
       .history-item-edit-input {
         flex: 1;
         margin: 0 0.1rem;
@@ -605,10 +712,10 @@ const confirmEditTitle = async (conversationUuid: string) => {
     }
 
     .empty-history {
-      color: #999;
+      color: #6b7280;
       text-align: center;
       padding: 0.2rem;
-      font-size: 0.14rem;
+      font-size: 0.22rem !important;
     }
   }
 
@@ -620,14 +727,19 @@ const confirmEditTitle = async (conversationUuid: string) => {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 0.2rem;
-      height: 0.4rem;
-      background: linear-gradient(to top, #fff, #fff3);
+      padding: 0.12rem 0.15rem;
+      height: auto;
+      min-height: 0.5rem;
+      background: #f9fafb;
       cursor: pointer;
-      border-radius: 0.1rem;
-      color: #000;
+      border-radius: 0.16rem;
+      color: #374151;
+      border: 1px solid #e5e7eb;
+      transition: all 0.2s ease;
+
       &:hover {
-        background: linear-gradient(to top, #eee9, #eee3);
+        background: #f3f4f6;
+        border-color: #d1d5db;
       }
     }
     .user-info {
@@ -635,51 +747,77 @@ const confirmEditTitle = async (conversationUuid: string) => {
       align-items: center;
       justify-content: center;
       .user-avatar {
-        width: 0.25rem;
-        height: 0.25rem;
+        width: 0.32rem;
+        height: 0.32rem;
         border-radius: 50%;
         overflow: hidden;
-        background-color: #ccc;
+        background-color: #e5e7eb;
+        flex-shrink: 0;
         img {
           width: 100%;
           height: 100%;
-          object-fit: contain;
+          object-fit: cover;
         }
       }
       .user-name {
-        margin-left: 0.15rem;
-        font-size: 0.2rem;
-        line-height: 0.16rem;
+        margin-left: 0.06rem;
+        font-size: 0.22rem;
+        line-height: 1.3;
+        color: #374151;
+        font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
       }
     }
     .more {
-      font-size: 0.16rem;
-      text-align: center;
+      font-size: 0.18rem;
+      color: #6b7280;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: #374151;
+      }
     }
     .user-menu {
       position: absolute;
       left: 0;
       right: 0;
       bottom: 110%;
-      background-color: #fffd;
-      color: #000;
-      border: 0.03rem solid #f5f5f5;
-      border-radius: 0.1rem;
+      background-color: #fff;
+      color: #374151;
+      border: 1px solid #e5e7eb;
+      border-radius: 0.16rem;
       display: flex;
       flex-direction: column;
       align-items: center;
+      box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.15), 0 0.04rem 0.08rem rgba(0, 0, 0, 0.1);
       .user-menu-item {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 0.1rem 0.2rem;
+        padding: 0.14rem 0.2rem;
         width: 100%;
-        height: 0.4rem;
-        font-size: 0.16rem;
+        height: auto;
+        min-height: 0.48rem;
+        font-size: 0.2rem;
         cursor: pointer;
         transition: all 0.2s;
+        border-radius: 0.12rem;
+        margin: 0.02rem 0;
+
         &:hover {
-          background-color: #f5f5f5;
+          background-color: #f3f4f6;
+        }
+
+        &:first-child {
+          margin-top: 0.08rem;
+        }
+
+        &:last-child {
+          margin-bottom: 0.08rem;
         }
       }
     }
diff --git a/vocata-web/src/main.ts b/vocata-web/src/main.ts
index c2e1ceb..0379d37 100644
--- a/vocata-web/src/main.ts
+++ b/vocata-web/src/main.ts
@@ -7,6 +7,7 @@ import router from './router'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import '@/utils/rem.js'
 import '@/assets/styles/fonts.css'
+import '@/assets/styles/pagination-theme.css'
 import { zhCn } from 'element-plus/es/locales.mjs'
 const app = createApp(App)
 
diff --git a/vocata-web/src/views/SearchRole.vue b/vocata-web/src/views/SearchRole.vue
index 0f6ffae..54df501 100644
--- a/vocata-web/src/views/SearchRole.vue
+++ b/vocata-web/src/views/SearchRole.vue
@@ -2,17 +2,24 @@
   <div :class="isM ? 'mobile' : 'pc'" class="main-container">
     <div class="header">
       <div class="title">探索</div>
-      <div class="search">
-        <input
-          type="text"
-          v-model="searchInput"
-          placeholder="搜索角色"
-          @input="search"
-          @keyup.enter="search"
-        />
-        <el-icon>
-          <Search />
-        </el-icon>
+      <div class="header-actions">
+        <div class="search">
+          <el-icon class="search-icon">
+            <Search />
+          </el-icon>
+          <input
+            type="text"
+            v-model="searchInput"
+            placeholder="搜索角色"
+            @input="search"
+            @keyup.enter="search"
+          />
+        </div>
+        <div class="notice-btn" @click="showNotice">
+          <el-icon>
+            <Bell />
+          </el-icon>
+        </div>
       </div>
     </div>
 
@@ -112,17 +119,41 @@
         </div>
       </div>
     </div>
-    <el-pagination
-      :size="isM ? 'small' : 'large'"
-      background
-      style="margin: 0.2rem"
-      layout="prev, pager, next,total"
-      :total="total"
-      @prev-click="searchParam.pageNum--"
-      @next-click="searchParam.pageNum++"
-      @current-change="searchParam.pageNum = $event"
-    >
-    </el-pagination>
+    <div class="pagination-container">
+      <el-pagination
+        :size="isM ? 'small' : 'default'"
+        background
+        layout="prev, pager, next, total"
+        :total="total"
+        :page-size="searchParam.pageSize"
+        :current-page="searchParam.pageNum"
+        @current-change="handlePageChange"
+        hide-on-single-page
+      />
+    </div>
+
+    <!-- 通知卡片 -->
+    <div v-if="showNoticeCard" class="notice-overlay" @click="closeNotice">
+      <div class="notice-card" @click.stop>
+        <div class="notice-close" @click="closeNotice">
+          <el-icon><Close /></el-icon>
+        </div>
+
+        <div class="notice-header">
+          <h2>VocaTa平台更新</h2>
+          <p class="notice-date">2024年9月28日</p>
+        </div>
+
+        <div class="notice-content">
+          <h3>📢 角色对话功能上线</h3>
+          <p class="body-text">
+            <strong>新功能已可用！</strong><br><br>
+            VocaTa现在支持角色对话功能。您可以创建角色、进行对话交流，体验更丰富的互动方式。欢迎试用新功能并给我们反馈。
+          </p>
+        </div>
+      </div>
+    </div>
+
     <RoleDialog :item="roleSelected" v-if="infoShow" @close="infoShow = false" />
   </div>
 </template>
@@ -138,6 +169,7 @@ import { computed, onMounted, ref, watch, watchEffect, type Ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { chatHistoryStore } from '@/store'
 import RoleDialog from './components/RoleDialog.vue'
+import { Search, ChatDotRound, Bell, Close } from '@element-plus/icons-vue'
 const isM = computed(() => isMobile())
 const router = useRouter()
 const my = ref(false)
@@ -156,6 +188,7 @@ const total = ref(0)
 
 const seachStatus = ref(true)
 const infoShow = ref(false)
+const showNoticeCard = ref(false)
 const loading1 = ref(false)
 const loading2 = ref(false)
 // 这里可以放全局逻辑
@@ -294,6 +327,24 @@ const startConversation = async (characterId: string | number) => {
     ElMessage.error('创建对话失败，请稍后重试')
   }
 }
+
+// 显示公告
+const showNotice = () => {
+  showNoticeCard.value = true
+}
+
+// 关闭公告
+const closeNotice = () => {
+  showNoticeCard.value = false
+}
+
+// 处理分页变化
+const handlePageChange = (page: number) => {
+  if (page < 1 || (total.value > 0 && page > Math.ceil(total.value / searchParam.value.pageSize))) {
+    return
+  }
+  searchParam.value.pageNum = page
+}
 </script>
 
 <style lang="scss" scoped>
@@ -312,20 +363,42 @@ const startConversation = async (characterId: string | number) => {
       .title {
         font-size: 0.2rem;
       }
+
+      .header-actions {
+        gap: 0.15rem;
+      }
+
       .search {
-        width: 70%;
-        height: 0.3rem;
-        padding: 0 0.1rem;
+        width: 55%;
+        max-width: 3rem;
+        min-width: 2rem;
+        height: 0.4rem;
+        border: 1px solid #e1e5e9;
+        border-radius: 0.15rem;
+        background-color: #fafbfc;
+
+        .search-icon {
+          font-size: 0.2rem;
+          margin: 0 0.08rem 0 0.12rem;
+        }
+
         input {
-          width: 50%;
           font-size: 0.2rem;
-          margin: 0;
-          padding: 0 0.05rem;
+          padding: 0 0.12rem 0 0;
+
+          &::placeholder {
+            font-size: 0.18rem;
+          }
         }
+      }
+
+      .notice-btn {
+        width: 0.4rem;
+        height: 0.4rem;
+        border-radius: 0.15rem;
+
         .el-icon {
           font-size: 0.2rem;
-          margin: 0;
-          padding: 0;
         }
       }
     }
@@ -404,29 +477,87 @@ const startConversation = async (characterId: string | number) => {
     font-weight: bold;
   }
 
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
   .search {
-    width: 50%;
-    height: 0.5rem;
+    width: 35%;
+    max-width: 4.5rem;
+    min-width: 3rem;
+    height: 0.52rem;
     display: flex;
     align-items: center;
-    justify-content: center;
-    border: 1px solid #ccc;
-    border-radius: 0.1rem;
+    border: 1px solid #e1e5e9;
+    border-radius: 0.2rem;
     overflow: hidden;
-    background-color: #f0f0f0;
+    background-color: #fafbfc;
+    transition: all 0.2s ease;
+    font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
+
+    &:hover {
+      border-color: #d1d5db;
+      background-color: #f9fafb;
+    }
+
+    &:focus-within {
+      border-color: #9ca3af;
+      background-color: #fff;
+      box-shadow: 0 0 0 1px rgba(156, 163, 175, 0.1);
+    }
+
+    .search-icon {
+      font-size: 0.24rem;
+      color: #9ca3af;
+      margin: 0 0.12rem 0 0.16rem;
+      flex-shrink: 0;
+    }
+
     input {
       flex: 1;
-      height: 95%;
+      height: 100%;
       border: none;
-      padding: 0.2rem;
+      padding: 0 0.16rem 0 0;
       outline: none;
-      font-size: 0.3rem;
+      font-size: 0.22rem;
+      color: #1f2937;
       background-color: transparent;
+      font-family: inherit;
+
+      &::placeholder {
+        font-size: 0.2rem;
+        color: #9ca3af;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .notice-btn {
+    width: 0.52rem;
+    height: 0.52rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid #e1e5e9;
+    border-radius: 0.2rem;
+    background-color: #fafbfc;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: #d1d5db;
+      background-color: #f9fafb;
     }
+
+    &:active {
+      background-color: #e5e7eb;
+    }
+
     .el-icon {
-      font-size: 0.3rem;
-      margin: 0.2rem;
-      cursor: pointer;
+      font-size: 0.24rem;
+      color: #6b7280;
     }
   }
 }
@@ -638,12 +769,285 @@ const startConversation = async (characterId: string | number) => {
     cursor: pointer;
   }
 }
-:deep(.el-pagination) {
+
+// 分页容器样式
+.pagination-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  margin-top: 0.3rem;
+}
+
+// 分页组件样式优化 - 黑白灰主题
+.pagination-container :deep(.el-pagination) {
+  --el-color-primary: #333333;
+  --el-color-primary-light-3: #f8f8f8;
+  --el-color-primary-light-5: #cccccc;
+  --el-color-primary-light-7: #e5e5e5;
+  --el-color-primary-light-8: #f0f0f0;
+  --el-color-primary-light-9: #f8f8f8;
+  --el-text-color-primary: #333333;
+  --el-text-color-regular: #666666;
+  --el-text-color-secondary: #999999;
+  --el-text-color-placeholder: #cccccc;
+  --el-border-color: #e5e5e5;
+  --el-border-color-light: #f0f0f0;
+  --el-border-color-lighter: #f8f8f8;
+  --el-fill-color-blank: #ffffff;
+  --el-fill-color-light: #f8f8f8;
+
+  .el-pager {
+    li {
+      min-width: 32px !important;
+      height: 32px !important;
+      line-height: 30px !important;
+      border: 1px solid #e5e5e5 !important;
+      border-radius: 6px !important;
+      margin: 0 4px !important;
+      font-size: 14px !important;
+      font-weight: 400 !important;
+      color: #666666 !important;
+      background-color: #ffffff !important;
+      transition: all 0.2s ease !important;
+
+      &:hover {
+        color: #333333 !important;
+        border-color: #cccccc !important;
+        background-color: #f8f8f8 !important;
+      }
+
+      &.is-active {
+        color: #ffffff !important;
+        background-color: #333333 !important;
+        border-color: #333333 !important;
+        font-weight: 500 !important;
+      }
+
+      &.more {
+        border: none !important;
+        background: transparent !important;
+        color: #999999 !important;
+
+        &:hover {
+          color: #666666 !important;
+          background: transparent !important;
+        }
+      }
+    }
+  }
+
+  .btn-prev,
+  .btn-next {
+    min-width: 32px !important;
+    height: 32px !important;
+    line-height: 30px !important;
+    border: 1px solid #e5e5e5 !important;
+    border-radius: 6px !important;
+    margin: 0 4px !important;
+    color: #666666 !important;
+    background-color: #ffffff !important;
+    transition: all 0.2s ease !important;
+
+    &:hover:not(:disabled) {
+      color: #333333 !important;
+      border-color: #cccccc !important;
+      background-color: #f8f8f8 !important;
+    }
+
+    &:disabled {
+      color: #cccccc !important;
+      background-color: #ffffff !important;
+      border-color: #f0f0f0 !important;
+      cursor: not-allowed !important;
+    }
+
+    .el-icon {
+      font-size: 12px !important;
+      font-weight: 500 !important;
+    }
+  }
+
+  .el-pagination__total {
+    color: #666666 !important;
+    font-size: 13px !important;
+    font-weight: 400 !important;
+    margin-right: 16px !important;
+  }
+
+  // 移动端适配
+  @media (max-width: 640px) {
+    .el-pager li,
+    .btn-prev,
+    .btn-next {
+      min-width: 28px !important;
+      height: 28px !important;
+      line-height: 26px !important;
+      font-size: 12px !important;
+      margin: 0 2px !important;
+    }
+
+    .el-pagination__total {
+      font-size: 12px !important;
+      margin-right: 8px !important;
+    }
+  }
+}
+
+// 移动端分页容器
+.main-container.mobile {
+  .pagination-container {
+    padding: 0.3rem 0.5rem;
+    margin-top: 0.2rem;
+  }
+}
+
+// 通知卡片样式
+.notice-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 70;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.notice-card {
+  background: white;
+  max-width: 400px;
+  width: 90%;
+  padding: 24px;
+  border-radius: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  position: relative;
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  animation: slideInScale 0.15s ease-out;
+}
+
+@keyframes slideInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.notice-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: none;
+  border: none;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+
   .el-icon {
-    font-size: 0.14rem;
-    font-weight: bold;
-    svg {
-      font-size: 0.14rem;
+    font-size: 20px;
+    color: #8e8e93;
+  }
+}
+
+.notice-header {
+  margin-bottom: 20px;
+
+  h2 {
+    font-size: 24px;
+    font-weight: 600;
+    margin: 0 0 4px 0;
+    color: #1c1c1e;
+    line-height: 1.3;
+  }
+
+  .notice-date {
+    font-size: 14px;
+    color: #8e8e93;
+    margin: 0;
+    font-weight: 400;
+  }
+}
+
+.notice-content {
+  h3 {
+    font-size: 20px;
+    font-weight: 600;
+    color: #1c1c1e;
+    margin: 0 0 16px 0;
+    line-height: 1.4;
+  }
+
+  .body-text {
+    font-size: 16px;
+    line-height: 1.5;
+    color: #3c3c43;
+    margin: 0;
+
+    strong {
+      color: #1c1c1e;
+      font-weight: 600;
+    }
+  }
+}
+
+// 移动端适配
+@media (max-width: 640px) {
+  .notice-card {
+    max-width: none;
+    width: 95%;
+    margin: 20px;
+    padding: 20px;
+    border-radius: 16px;
+
+    .notice-close {
+      top: 12px;
+      right: 12px;
+      width: 28px;
+      height: 28px;
+
+      .el-icon {
+        font-size: 18px;
+      }
+    }
+
+    .notice-header {
+      margin-bottom: 16px;
+
+      h2 {
+        font-size: 20px;
+      }
+
+      .notice-date {
+        font-size: 13px;
+      }
+    }
+
+    .notice-content {
+      h3 {
+        font-size: 18px;
+      }
+
+      .body-text {
+        font-size: 15px;
+      }
     }
   }
 }
diff --git a/vocata-web/src/views/components/RoleDialog.vue b/vocata-web/src/views/components/RoleDialog.vue
index 2e02abe..5f96582 100644
--- a/vocata-web/src/views/components/RoleDialog.vue
+++ b/vocata-web/src/views/components/RoleDialog.vue
@@ -17,7 +17,7 @@
           </div>
           <div class="name">{{ item.name }}</div>
         </div>
-        <div class="creator">作者：@ {{ item.creatorName || '未知' }}</div>
+        <div class="creator">作者：@ {{ item.creatorId ? `用户${item.creatorId}` : '官方' }}</div>
       </div>
       <div class="description flex">
         <div class="label">描述：</div>
@@ -29,12 +29,12 @@
       </div>
       <div class="tags flex">
         <div class="label">标签：</div>
-        <div class="value tags">
-          <span class="tag" v-for="(tag, index) in item.tagNames" :key="index"># {{ tag }}</span>
-          <span v-if="!item.tagNames" class="tag">暂无标签</span>
+        <div class="value tags-container">
+          <span class="tag" v-for="(tag, index) in tagsList" :key="index">{{ tag }}</span>
+          <span v-if="!tagsList || tagsList.length === 0" class="no-tags">暂无标签</span>
         </div>
       </div>
-      <div class="goto">开始对话</div>
+      <div class="goto" @click="startConversation">开始对话</div>
     </div>
   </div>
   <div class="bgc"></div>
@@ -43,11 +43,74 @@
 <script setup lang="ts">
 import { isMobile } from '@/utils/isMobile'
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { chatHistoryStore } from '@/store'
+import { ElMessage } from 'element-plus'
+
 const { item } = defineProps({
   item: Object,
 })
+
+const emit = defineEmits(['close'])
+const router = useRouter()
 const isM = computed(() => isMobile())
-// 这里可以放全局逻辑
+
+// 处理标签数据：将字符串转换为数组，并清理特殊字符
+const tagsList = computed(() => {
+  if (!item.tags) return []
+
+  let tags = []
+
+  // 如果tags是字符串，尝试按逗号分割
+  if (typeof item.tags === 'string') {
+    tags = item.tags.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0)
+  } else if (Array.isArray(item.tags)) {
+    // 如果已经是数组，直接使用
+    tags = item.tags
+  } else {
+    return []
+  }
+
+  // 清理标签中的特殊字符：#、引号、方括号等
+  return tags.map(tag => {
+    return tag
+      .replace(/^["'\[\]#\s]+|["'\[\]#\s]+$/g, '') // 去掉开头和结尾的特殊字符
+      .replace(/["'\[\]#]/g, '') // 去掉中间的特殊字符
+      .trim()
+  }).filter(tag => tag.length > 0)
+})
+
+// 开始对话功能
+const startConversation = async () => {
+  try {
+    console.log('角色详情弹窗 - 开始对话，角色ID:', item.id)
+
+    if (!item.id) {
+      console.error('角色ID为空')
+      ElMessage.error('角色信息有误，请重试')
+      return
+    }
+
+    // 添加加载状态
+    const loadingMessage = ElMessage.info('正在创建对话...')
+
+    // 调用创建对话接口
+    const conversationUuid = await chatHistoryStore().addChatHistory(item.id)
+
+    loadingMessage.close()
+
+    ElMessage.success('对话创建成功！')
+
+    // 关闭弹窗
+    emit('close')
+
+    // 跳转到聊天页面
+    router.push(`/chat/${conversationUuid}`)
+  } catch (error) {
+    console.error('创建对话失败:', error)
+    ElMessage.error('创建对话失败，请稍后重试')
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -93,9 +156,15 @@ const isM = computed(() => isMobile())
         margin: 0.1rem 0;
       }
       .label,
-      .value,
+      .value {
+        font-size: 0.16rem;
+      }
       .tag {
         font-size: 0.16rem;
+        padding: 0.08rem 0.12rem;
+      }
+      .no-tags {
+        font-size: 0.16rem;
       }
     }
   }
@@ -164,16 +233,46 @@ const isM = computed(() => isMobile())
   width: 100%;
   display: flex;
   justify-content: start;
+  align-items: center;
   margin: 0.1rem;
 }
+
 .tags {
   display: flex;
+  align-items: center;
 }
+
+.tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.08rem;
+  align-items: center;
+}
+
 .tag {
-  margin-right: 0.1rem;
-  padding: 0.05rem 0.1rem;
-  border-radius: 0.1rem;
-  background-color: #fdf;
+  display: inline-block;
+  margin: 0;
+  padding: 0.08rem 0.12rem;
+  border-radius: 0.08rem;
+  background-color: #f0f0f0;
+  border: 1px solid #d5d5d5;
+  color: #333333;
+  font-size: 0.16rem;
+  font-weight: 400;
+  line-height: 1.3;
+  white-space: nowrap;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: #e5e5e5;
+    border-color: #bbb;
+  }
+}
+
+.no-tags {
+  color: #999999;
+  font-size: 0.16rem;
+  font-style: italic;
 }
 .goto {
   // width: 20%;