From 9566c6e0c4f645a3118e865eeb7b3b0813aa0c4a Mon Sep 17 00:00:00 2001
From: MT-Mint <798521692@qq.com>
Date: Wed, 25 Mar 2026 15:38:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=86=E4=BA=AB=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E7=8B=AC=E7=AB=8B=E8=B7=AF=E7=94=B1=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入 vue-router，配置 / 和 /share/:id 两个路由
- 新增 ShareView.vue 独立页面，复用 MessageBubble 组件渲染消息
- 新增 HomeView.vue 提取主应用逻辑
- 分享链接格式改为 /chat-ui/share/{id}
- 删除废弃的 ShareViewModal.vue 对话框组件
- 清理 settingsStore 中废弃的 showShareViewModal 状态

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/App.vue                                 | 110 +---
 src/components/modals/ShareModal.vue        |   9 +-
 src/components/modals/ShareResultModal.vue  |   2 -
 src/components/modals/ShareViewModal.vue    | 550 -------------------
 src/components/sidebar/ConversationItem.vue |   6 -
 src/components/sidebar/ShareButton.vue      |   1 -
 src/main.ts                                 |   4 +
 src/router/index.ts                         |  20 +
 src/services/shareApi.ts                    |   1 -
 src/stores/settings.ts                      |  12 -
 src/views/HomeView.vue                      |  90 +++
 src/views/ShareView.vue                     | 571 ++++++++++++++++++++
 12 files changed, 695 insertions(+), 681 deletions(-)
 delete mode 100644 src/components/modals/ShareViewModal.vue
 create mode 100644 src/router/index.ts
 create mode 100644 src/views/HomeView.vue
 create mode 100644 src/views/ShareView.vue

diff --git a/src/App.vue b/src/App.vue
index bf2cdc9..f41da5c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,6 @@
 <template>
   <div class="app" :class="{ dark: isDark }">
-    <!-- 侧边栏 -->
-    <ChatSidebar />
-
-    <!-- 主内容区 -->
-    <ChatMain ref="chatMainRef" @toggle-sidebar="toggleSidebar" />
-
-    <!-- 模态框 -->
-    <SearchModal />
-    <ShortcutsModal />
-    <SettingsModal />
-    <ConversationSettingsModal />
-    <ShareModal />
-    <ShareResultModal />
-    <ShareViewModal />
+    <router-view />
 
     <!-- Toast 通知 -->
     <Teleport to="body">
@@ -35,32 +22,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from "vue";
+import { ref, computed } from "vue";
 import { storeToRefs } from "pinia";
-import { useChatStore } from "@/stores/chat";
 import { useSettingsStore } from "@/stores/settings";
-import { useKeyboard, getDefaultShortcuts } from "@/composables/useKeyboard";
-import ChatSidebar from "@/components/sidebar/ChatSidebar.vue";
-import ChatMain from "@/components/chat/ChatMain.vue";
-import SearchModal from "@/components/modals/SearchModal.vue";
-import ShortcutsModal from "@/components/modals/ShortcutsModal.vue";
-import SettingsModal from "@/components/modals/SettingsModal.vue";
-import ConversationSettingsModal from "@/components/modals/ConversationSettingsModal.vue";
-import ShareModal from "@/components/modals/ShareModal.vue";
-import ShareResultModal from "@/components/modals/ShareResultModal.vue";
-import ShareViewModal from "@/components/modals/ShareViewModal.vue";
 import { Check, AlertCircle, Info } from "@/components/icons";
-import { useAuthStore } from "./stores/auth";
-const authStore = useAuthStore();
-// Stores
-const chatStore = useChatStore();
+
 const settingsStore = useSettingsStore();
-
 const { settings } = storeToRefs(settingsStore);
 
-// Refs
-const chatMainRef = ref<InstanceType<typeof ChatMain> | null>(null);
-
 // 计算属性
 const isDark = computed(() => {
   if (settings.value.theme === "system") {
@@ -91,77 +60,6 @@ function showToast(message: string, type: Toast["type"] = "info") {
   }, 3000);
 }
 
-// 方法
-function toggleSidebar() {
-  settingsStore.toggleSidebar();
-}
-
-function newChat() {
-  chatStore.createConversation();
-  showToast("已创建新对话", "success");
-}
-
-function focusInput() {
-  chatMainRef.value?.focusInput();
-}
-
-// 快捷键
-useKeyboard(
-  getDefaultShortcuts({
-    newChat,
-    toggleSidebar,
-    focusInput,
-    sendMessage: () => {}, // 由 ChatInput 内部处理
-    cancelStream: () => {
-      if (chatStore.isStreaming) {
-        chatStore.stopStreaming();
-        showToast("已停止生成", "info");
-      }
-    },
-    toggleTheme: () => {
-      settingsStore.toggleTheme();
-      showToast(`主题已切换为 ${settings.value.theme}`, "success");
-    },
-    showShortcuts: () => {
-      settingsStore.openShortcutsModal();
-    },
-    searchConversations: () => {
-      settingsStore.openSearchModal();
-    },
-  }),
-);
-
-// 初始化
-onMounted(() => {
-  authStore.init();
-  console.log(authStore.token);
-
-  // 检测 Hash 路由
-  handleHashRoute();
-
-  // 监听 hash 变化
-  window.addEventListener('hashchange', handleHashRoute);
-
-  // // 如果没有对话，创建一个
-  // if (chatStore.conversations.length === 0) {
-  //   chatStore.createConversation();
-  // }
-});
-
-// Hash 路由处理
-function handleHashRoute() {
-  const hash = window.location.hash;
-  const shareMatch = hash.match(/^#\/share\/(.+)$/);
-
-  if (shareMatch) {
-    const shareId = shareMatch[1];
-    // 打开分享查看模态框
-    settingsStore.openShareViewModal();
-    // 这里可以添加加载分享数据的逻辑
-    console.log('Share ID:', shareId);
-  }
-}
-
 // 暴露给全局使用
 window.$toast = showToast;
 </script>
@@ -249,4 +147,4 @@ window.$toast = showToast;
 .toast-move {
   transition: transform 0.3s ease;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/modals/ShareModal.vue b/src/components/modals/ShareModal.vue
index 9f623c5..fbcec89 100644
--- a/src/components/modals/ShareModal.vue
+++ b/src/components/modals/ShareModal.vue
@@ -143,15 +143,18 @@ async function handleCreateShare() {
     });
 
     // 关闭当前模态框，打开结果模态框
-    handleClose();
+    handleClose()
+
+    // 前端生成分享 URL
+    const shareUrl = `${window.location.origin}/chat-ui/share/${result.id}`
 
     // 存储分享信息并打开结果模态框
     settingsStore.setShareResult({
       shareId: result.id,
-      shareUrl: result.shareUrl,
+      shareUrl,
       password: password.value,
       expiresAt: result.expiresAt,
-    });
+    })
     settingsStore.openShareResultModal();
 
     // 清空密码和退出选择模式
diff --git a/src/components/modals/ShareResultModal.vue b/src/components/modals/ShareResultModal.vue
index f9d13cf..228c750 100644
--- a/src/components/modals/ShareResultModal.vue
+++ b/src/components/modals/ShareResultModal.vue
@@ -95,8 +95,6 @@ const shareUrl = computed(() => shareResult.value?.shareUrl || '');
 const password = computed(() => shareResult.value?.password || '');
 const expiresAt = computed(() => shareResult.value?.expiresAt || 0);
 
-const linkInput = ref<HTMLInputElement | null>(null);
-const passwordInput = ref<HTMLInputElement | null>(null);
 const linkCopied = ref(false);
 const passwordCopied = ref(false);
 
diff --git a/src/components/modals/ShareViewModal.vue b/src/components/modals/ShareViewModal.vue
deleted file mode 100644
index ef06d44..0000000
--- a/src/components/modals/ShareViewModal.vue
+++ /dev/null
@@ -1,550 +0,0 @@
-<template>
-  <Teleport to="body">
-    <Transition name="modal">
-      <div v-if="show" class="modal-overlay" @click.self="handleClose">
-        <div class="modal-container share-view-modal">
-          <div class="modal-header">
-            <h3>查看分享内容</h3>
-            <button class="close-btn" @click="handleClose">
-              <X :size="20" />
-            </button>
-          </div>
-
-          <div class="modal-content">
-            <!-- 加载状态 -->
-            <div v-if="isLoading" class="loading-state">
-              <Loader2 :size="32" class="spin" />
-              <span>加载中...</span>
-            </div>
-
-            <!-- 密码验证 -->
-            <div v-else-if="!isVerified" class="password-verify">
-              <div class="verify-icon">
-                <Lock :size="48" />
-              </div>
-              <p class="verify-hint">请输入访问密码查看分享内容</p>
-
-              <div v-if="shareInfo" class="share-info">
-                <span class="info-item">
-                  <MessageSquare :size="14" />
-                  {{ shareInfo.conversationCount }} 个对话
-                </span>
-                <span v-if="shareInfo.isExpired" class="info-item expired">
-                  <AlertCircle :size="14" />
-                  已过期
-                </span>
-                <span v-else class="info-item">
-                  <Clock :size="14" />
-                  {{ formatExpiresAt }} 过期
-                </span>
-              </div>
-
-              <div class="password-input-wrapper">
-                <input
-                  v-model="password"
-                  type="password"
-                  class="password-input"
-                  placeholder="请输入访问密码"
-                  @keydown.enter="handleVerify"
-                />
-              </div>
-
-              <p v-if="errorMsg" class="error-msg">{{ errorMsg }}</p>
-
-              <button
-                class="verify-btn"
-                :disabled="!password || isVerifying"
-                @click="handleVerify"
-              >
-                {{ isVerifying ? '验证中...' : '查看内容' }}
-              </button>
-            </div>
-
-            <!-- 分享内容 -->
-            <div v-else class="share-content">
-              <div class="content-header">
-                <span class="conversation-count">
-                  共 {{ shareData?.conversations?.length || 0 }} 个对话
-                </span>
-              </div>
-
-              <div class="conversation-tabs">
-                <button
-                  v-for="(conv, index) in shareData?.conversations"
-                  :key="conv.id"
-                  class="tab-btn"
-                  :class="{ active: activeConversationIndex === index }"
-                  @click="activeConversationIndex = index"
-                >
-                  {{ conv.title }}
-                </button>
-              </div>
-
-              <div class="message-list">
-                <template v-if="activeConversation">
-                  <div
-                    v-for="message in activeConversation.messages"
-                    :key="message.id"
-                    class="message-item"
-                    :class="message.role"
-                  >
-                    <div class="message-role">
-                      {{ message.role === 'user' ? '用户' : '助手' }}
-                    </div>
-                    <div class="message-content">
-                      {{ message.content.text }}
-                    </div>
-                  </div>
-                </template>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from "vue";
-import { useSettingsStore } from "@/stores/settings";
-import { shareApi } from "@/services/shareApi";
-import { hashPassword } from "@/utils/crypto";
-import { formatTimestamp } from "@/utils/helpers";
-import type { Share, ShareGetResponse } from "@/types/share";
-import {
-  X,
-  Lock,
-  Loader2,
-  MessageSquare,
-  Clock,
-  AlertCircle,
-} from "@/components/icons";
-
-const settingsStore = useSettingsStore();
-
-const show = computed(() => settingsStore.showShareViewModal);
-
-const isLoading = ref(false);
-const isVerifying = ref(false);
-const isVerified = ref(false);
-const password = ref("");
-const errorMsg = ref("");
-const shareInfo = ref<ShareGetResponse | null>(null);
-const shareData = ref<Share | null>(null);
-const activeConversationIndex = ref(0);
-
-const activeConversation = computed(() => {
-  return shareData.value?.conversations?.[activeConversationIndex.value];
-});
-
-const formatExpiresAt = computed(() => {
-  if (!shareInfo.value) return "";
-  return formatTimestamp(shareInfo.value.expiresAt);
-});
-
-// 获取分享 ID
-function getShareIdFromHash(): string | null {
-  const hash = window.location.hash;
-  const match = hash.match(/^#\/share\/(.+)$/);
-  return match ? match[1] : null;
-}
-
-// 加载分享信息
-async function loadShareInfo() {
-  const shareId = getShareIdFromHash();
-  if (!shareId) {
-    errorMsg.value = "无效的分享链接";
-    return;
-  }
-
-  isLoading.value = true;
-  errorMsg.value = "";
-
-  try {
-    shareInfo.value = await shareApi.getShare(shareId);
-
-    // 如果已过期
-    if (shareInfo.value.isExpired) {
-      errorMsg.value = "分享链接已过期";
-    }
-
-    // 如果没有密码保护，直接验证
-    if (!shareInfo.value.hasPassword) {
-      await verifyWithPassword("");
-    }
-  } catch (error) {
-    console.error("Failed to load share info:", error);
-    errorMsg.value = "分享不存在或已过期";
-  } finally {
-    isLoading.value = false;
-  }
-}
-
-// 验证密码
-async function handleVerify() {
-  if (!password.value || isVerifying.value) return;
-  await verifyWithPassword(password.value);
-}
-
-async function verifyWithPassword(pwd: string) {
-  const shareId = getShareIdFromHash();
-  if (!shareId) return;
-
-  isVerifying.value = true;
-  errorMsg.value = "";
-
-  try {
-    const passwordHash = pwd ? await hashPassword(pwd) : "";
-    const result = await shareApi.verifyShare(shareId, { passwordHash });
-
-    if (result.valid && result.share) {
-      shareData.value = result.share;
-      isVerified.value = true;
-    } else {
-      errorMsg.value = "密码错误，请重试";
-    }
-  } catch (error) {
-    console.error("Failed to verify share:", error);
-    errorMsg.value = "验证失败，请重试";
-  } finally {
-    isVerifying.value = false;
-  }
-}
-
-function handleClose() {
-  settingsStore.closeShareViewModal();
-  // 清除 hash
-  window.location.hash = "";
-}
-
-// 监听模态框打开
-watch(show, (newVal: boolean) => {
-  if (newVal) {
-    loadShareInfo();
-  } else {
-    // 重置状态
-    password.value = "";
-    errorMsg.value = "";
-    isVerified.value = false;
-    shareInfo.value = null;
-    shareData.value = null;
-    activeConversationIndex.value = 0;
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  backdrop-filter: blur(4px);
-}
-
-.modal-container {
-  background: white;
-  border-radius: 16px;
-  width: 90%;
-  max-width: 640px;
-  max-height: 85vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
-
-  .dark & {
-    background: #1e1e2e;
-  }
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid #e5e7eb;
-
-  .dark & {
-    border-bottom-color: #2d2d3d;
-  }
-
-  h3 {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 600;
-    color: #1f2937;
-
-    .dark & {
-      color: #f3f4f6;
-    }
-  }
-}
-
-.close-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: #6b7280;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.05);
-    color: #374151;
-
-    .dark & {
-      background: rgba(255, 255, 255, 0.05);
-      color: #e5e7eb;
-    }
-  }
-}
-
-.modal-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 24px;
-}
-
-.loading-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  padding: 40px;
-  color: #6b7280;
-
-  .spin {
-    animation: spin 1s linear infinite;
-  }
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.password-verify {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 20px 0;
-}
-
-.verify-icon {
-  color: #6b7280;
-}
-
-.verify-hint {
-  font-size: 14px;
-  color: #6b7280;
-  margin: 0;
-}
-
-.share-info {
-  display: flex;
-  gap: 16px;
-  margin-top: 8px;
-
-  .info-item {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 13px;
-    color: #6b7280;
-
-    &.expired {
-      color: #ef4444;
-    }
-  }
-}
-
-.password-input-wrapper {
-  width: 100%;
-  max-width: 300px;
-  margin-top: 8px;
-}
-
-.password-input {
-  width: 100%;
-  padding: 12px 16px;
-  border: 1px solid #e5e7eb;
-  border-radius: 10px;
-  font-size: 14px;
-  text-align: center;
-  letter-spacing: 2px;
-
-  .dark & {
-    background: #2d2d3d;
-    border-color: #374151;
-    color: #f3f4f6;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: #3b82f6;
-  }
-}
-
-.error-msg {
-  font-size: 13px;
-  color: #ef4444;
-  margin: 0;
-}
-
-.verify-btn {
-  padding: 12px 32px;
-  border: none;
-  border-radius: 10px;
-  background: #3b82f6;
-  color: white;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  &:hover:not(:disabled) {
-    background: #2563eb;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-.share-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.content-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.conversation-count {
-  font-size: 13px;
-  color: #6b7280;
-}
-
-.conversation-tabs {
-  display: flex;
-  gap: 8px;
-  overflow-x: auto;
-  padding-bottom: 8px;
-}
-
-.tab-btn {
-  flex-shrink: 0;
-  padding: 8px 16px;
-  border: none;
-  border-radius: 8px;
-  background: #f3f4f6;
-  color: #6b7280;
-  font-size: 13px;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: all 0.2s ease;
-
-  .dark & {
-    background: #2d2d3d;
-    color: #9ca3af;
-  }
-
-  &:hover {
-    background: #e5e7eb;
-
-    .dark & {
-      background: #374151;
-    }
-  }
-
-  &.active {
-    background: #3b82f6;
-    color: white;
-  }
-}
-
-.message-list {
-  flex: 1;
-  max-height: 400px;
-  overflow-y: auto;
-  padding: 16px;
-  background: #f9fafb;
-  border-radius: 12px;
-
-  .dark & {
-    background: #2d2d3d;
-  }
-}
-
-.message-item {
-  margin-bottom: 16px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  &.user {
-    .message-role {
-      color: #3b82f6;
-    }
-  }
-
-  &.assistant {
-    .message-role {
-      color: #10b981;
-    }
-  }
-}
-
-.message-role {
-  font-size: 12px;
-  font-weight: 500;
-  margin-bottom: 4px;
-}
-
-.message-content {
-  font-size: 14px;
-  color: #374151;
-  line-height: 1.6;
-  white-space: pre-wrap;
-
-  .dark & {
-    color: #e5e7eb;
-  }
-}
-
-// 动画
-.modal-enter-active,
-.modal-leave-active {
-  transition: all 0.3s ease;
-}
-
-.modal-enter-from,
-.modal-leave-to {
-  opacity: 0;
-
-  .modal-container {
-    transform: scale(0.95);
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/components/sidebar/ConversationItem.vue b/src/components/sidebar/ConversationItem.vue
index 716ea52..f9f2a37 100644
--- a/src/components/sidebar/ConversationItem.vue
+++ b/src/components/sidebar/ConversationItem.vue
@@ -117,12 +117,6 @@ function handleToggleSelect() {
   emit("toggleSelect", props.conversation.id);
 }
 
-function handleSelect() {
-  if (!isEditing.value) {
-    emit("select", props.conversation.id);
-  }
-}
-
 function handleTogglePin() {
   emit("togglePin", props.conversation.id);
 }
diff --git a/src/components/sidebar/ShareButton.vue b/src/components/sidebar/ShareButton.vue
index 71f8c3e..0d9ab1d 100644
--- a/src/components/sidebar/ShareButton.vue
+++ b/src/components/sidebar/ShareButton.vue
@@ -31,7 +31,6 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
 import { storeToRefs } from "pinia";
 import { useChatStore } from "@/stores/chat";
 import { useSettingsStore } from "@/stores/settings";
diff --git a/src/main.ts b/src/main.ts
index eb6cc61..9bf0a6e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+import router from "./router";
 import App from "./App.vue";
 
 // 样式
@@ -15,6 +16,9 @@ const app = createApp(App);
 const pinia = createPinia();
 app.use(pinia);
 
+// 使用 Router
+app.use(router);
+
 // 挂载应用
 app.mount("#app");
 
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..0425f16
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '@/views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory('/chat-ui/'),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView,
+    },
+    {
+      path: '/share/:id',
+      name: 'share',
+      component: () => import('@/views/ShareView.vue'),
+    },
+  ],
+})
+
+export default router
\ No newline at end of file
diff --git a/src/services/shareApi.ts b/src/services/shareApi.ts
index 5441ba1..80638b7 100644
--- a/src/services/shareApi.ts
+++ b/src/services/shareApi.ts
@@ -3,7 +3,6 @@
  */
 import { getAuthHeaders } from './request';
 import type {
-  Share,
   ShareCreateRequest,
   ShareCreateResponse,
   ShareVerifyRequest,
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 8ded1eb..4f7142e 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -97,7 +97,6 @@ export const useSettingsStore = defineStore("settings", () => {
   // 分享相关状态
   const showShareModal = ref(false);
   const showShareResultModal = ref(false);
-  const showShareViewModal = ref(false);
   const shareResult = ref<ShareResult | null>(null);
 
   // 主题相关
@@ -206,14 +205,6 @@ export const useSettingsStore = defineStore("settings", () => {
     showShareResultModal.value = false;
   }
 
-  function openShareViewModal() {
-    showShareViewModal.value = true;
-  }
-
-  function closeShareViewModal() {
-    showShareViewModal.value = false;
-  }
-
   function setShareResult(result: ShareResult) {
     shareResult.value = result;
   }
@@ -348,7 +339,6 @@ export const useSettingsStore = defineStore("settings", () => {
     // 分享相关状态
     showShareModal,
     showShareResultModal,
-    showShareViewModal,
     shareResult,
 
     // 方法
@@ -370,8 +360,6 @@ export const useSettingsStore = defineStore("settings", () => {
     closeShareModal,
     openShareResultModal,
     closeShareResultModal,
-    openShareViewModal,
-    closeShareViewModal,
     setShareResult,
     clearShareResult,
     updateSettings,
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
new file mode 100644
index 0000000..c3bae8a
--- /dev/null
+++ b/src/views/HomeView.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="home-view">
+    <!-- 侧边栏 -->
+    <ChatSidebar />
+
+    <!-- 主内容区 -->
+    <ChatMain ref="chatMainRef" @toggle-sidebar="toggleSidebar" />
+
+    <!-- 模态框 -->
+    <SearchModal />
+    <ShortcutsModal />
+    <SettingsModal />
+    <ConversationSettingsModal />
+    <ShareModal />
+    <ShareResultModal />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useChatStore } from '@/stores/chat'
+import { useSettingsStore } from '@/stores/settings'
+import { useKeyboard, getDefaultShortcuts } from '@/composables/useKeyboard'
+import ChatSidebar from '@/components/sidebar/ChatSidebar.vue'
+import ChatMain from '@/components/chat/ChatMain.vue'
+import SearchModal from '@/components/modals/SearchModal.vue'
+import ShortcutsModal from '@/components/modals/ShortcutsModal.vue'
+import SettingsModal from '@/components/modals/SettingsModal.vue'
+import ConversationSettingsModal from '@/components/modals/ConversationSettingsModal.vue'
+import ShareModal from '@/components/modals/ShareModal.vue'
+import ShareResultModal from '@/components/modals/ShareResultModal.vue'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+const chatStore = useChatStore()
+const settingsStore = useSettingsStore()
+
+const chatMainRef = ref<InstanceType<typeof ChatMain> | null>(null)
+
+function toggleSidebar() {
+  settingsStore.toggleSidebar()
+}
+
+function newChat() {
+  chatStore.createConversation()
+  window.$toast?.('已创建新对话', 'success')
+}
+
+function focusInput() {
+  chatMainRef.value?.focusInput()
+}
+
+// 快捷键
+useKeyboard(
+  getDefaultShortcuts({
+    newChat,
+    toggleSidebar,
+    focusInput,
+    sendMessage: () => {},
+    cancelStream: () => {
+      if (chatStore.isStreaming) {
+        chatStore.stopStreaming()
+        window.$toast?.('已停止生成', 'info')
+      }
+    },
+    toggleTheme: () => {
+      settingsStore.toggleTheme()
+      window.$toast?.(`主题已切换`, 'success')
+    },
+    showShortcuts: () => {
+      settingsStore.openShortcutsModal()
+    },
+    searchConversations: () => {
+      settingsStore.openSearchModal()
+    },
+  }),
+)
+
+// 初始化认证
+authStore.init()
+</script>
+
+<style lang="scss" scoped>
+.home-view {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/ShareView.vue b/src/views/ShareView.vue
new file mode 100644
index 0000000..edf6c87
--- /dev/null
+++ b/src/views/ShareView.vue
@@ -0,0 +1,571 @@
+<template>
+  <div class="share-view" :class="{ dark: isDark }">
+    <!-- 加载状态 -->
+    <div v-if="isLoading" class="loading-state">
+      <Loader2 :size="32" class="spin" />
+      <span>加载中...</span>
+    </div>
+
+    <!-- 错误状态 -->
+    <div v-else-if="error" class="error-state">
+      <AlertCircle :size="48" />
+      <p class="error-message">{{ error }}</p>
+      <button class="retry-btn" @click="loadShareInfo">重试</button>
+    </div>
+
+    <!-- 密码验证 -->
+    <div v-else-if="!isVerified" class="password-verify">
+      <div class="verify-container">
+        <div class="verify-icon">
+          <Lock :size="48" />
+        </div>
+        <h2 class="verify-title">查看分享内容</h2>
+        <p class="verify-hint">请输入访问密码查看分享内容</p>
+
+        <div v-if="shareInfo" class="share-info">
+          <span class="info-item">
+            <MessageSquare :size="14" />
+            {{ shareInfo.conversationCount }} 个对话
+          </span>
+          <span v-if="shareInfo.isExpired" class="info-item expired">
+            <AlertCircle :size="14" />
+            已过期
+          </span>
+          <span v-else class="info-item">
+            <Clock :size="14" />
+            {{ formatExpiresAt }} 过期
+          </span>
+        </div>
+
+        <div class="password-input-wrapper">
+          <input
+            v-model="password"
+            :type="showPassword ? 'text' : 'password'"
+            class="password-input"
+            placeholder="请输入访问密码"
+            @keydown.enter="handleVerify"
+          />
+          <button class="toggle-visibility" @click="showPassword = !showPassword">
+            <Eye v-if="!showPassword" :size="18" />
+            <EyeOff v-else :size="18" />
+          </button>
+        </div>
+
+        <p v-if="verifyError" class="verify-error">{{ verifyError }}</p>
+
+        <button
+          class="verify-btn"
+          :disabled="!password || isVerifying"
+          @click="handleVerify"
+        >
+          {{ isVerifying ? '验证中...' : '查看内容' }}
+        </button>
+      </div>
+    </div>
+
+    <!-- 分享内容 -->
+    <div v-else class="share-content">
+      <!-- 顶部导航栏 -->
+      <header class="share-header">
+        <div class="header-left">
+          <h1 class="share-title">分享的对话</h1>
+          <span class="conversation-count">
+            共 {{ shareData?.conversations?.length || 0 }} 个对话
+          </span>
+        </div>
+        <button class="theme-toggle" @click="toggleTheme">
+          <Sun v-if="isDark" :size="20" />
+          <Moon v-else :size="20" />
+        </button>
+      </header>
+
+      <!-- 对话切换标签 -->
+      <div v-if="shareData?.conversations && shareData.conversations.length > 1" class="conversation-tabs">
+        <button
+          v-for="(conv, index) in shareData.conversations"
+          :key="conv.id"
+          class="tab-btn"
+          :class="{ active: activeConversationIndex === index }"
+          @click="activeConversationIndex = index"
+        >
+          {{ conv.title || '未命名对话' }}
+        </button>
+      </div>
+
+      <!-- 消息列表 -->
+      <div class="message-list">
+        <template v-if="activeConversation">
+          <MessageBubble
+            v-for="message in visibleMessages"
+            :key="message.id"
+            :message="message"
+            :show-timestamp="true"
+          />
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useSettingsStore } from '@/stores/settings'
+import { storeToRefs } from 'pinia'
+import { shareApi } from '@/services/shareApi'
+import { hashPassword } from '@/utils/crypto'
+import { formatTimestamp } from '@/utils/helpers'
+import { MessageRole } from '@/types/chat'
+import type { Share, ShareGetResponse } from '@/types/share'
+import MessageBubble from '@/components/message/MessageBubble.vue'
+import {
+  Lock,
+  Loader2,
+  MessageSquare,
+  Clock,
+  AlertCircle,
+  Eye,
+  EyeOff,
+  Sun,
+  Moon,
+} from '@/components/icons'
+
+const route = useRoute()
+const settingsStore = useSettingsStore()
+const { settings } = storeToRefs(settingsStore)
+
+// 状态
+const isLoading = ref(false)
+const isVerifying = ref(false)
+const isVerified = ref(false)
+const password = ref('')
+const showPassword = ref(false)
+const error = ref('')
+const verifyError = ref('')
+const shareInfo = ref<ShareGetResponse | null>(null)
+const shareData = ref<Share | null>(null)
+const activeConversationIndex = ref(0)
+
+// 计算属性
+const isDark = computed(() => {
+  if (settings.value.theme === 'system') {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  }
+  return settings.value.theme === 'dark'
+})
+
+const formatExpiresAt = computed(() => {
+  if (!shareInfo.value) return ''
+  return formatTimestamp(shareInfo.value.expiresAt)
+})
+
+const activeConversation = computed(() => {
+  return shareData.value?.conversations?.[activeConversationIndex.value]
+})
+
+const visibleMessages = computed(() => {
+  if (!activeConversation.value?.messages) return []
+  return activeConversation.value.messages.filter(
+    (message) => message.role !== MessageRole.SYSTEM
+  )
+})
+
+// 方法
+function toggleTheme() {
+  settingsStore.toggleTheme()
+}
+
+async function loadShareInfo() {
+  const shareId = route.params.id as string
+  if (!shareId) {
+    error.value = '无效的分享链接'
+    return
+  }
+
+  isLoading.value = true
+  error.value = ''
+
+  try {
+    shareInfo.value = await shareApi.getShare(shareId)
+
+    if (shareInfo.value.isExpired) {
+      error.value = '分享链接已过期'
+      return
+    }
+
+    // 如果没有密码保护，直接验证
+    if (!shareInfo.value.hasPassword) {
+      await verifyWithPassword('')
+    }
+  } catch (err) {
+    console.error('Failed to load share info:', err)
+    error.value = '分享不存在或已过期'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function handleVerify() {
+  if (!password.value || isVerifying.value) return
+  await verifyWithPassword(password.value)
+}
+
+async function verifyWithPassword(pwd: string) {
+  const shareId = route.params.id as string
+  if (!shareId) return
+
+  isVerifying.value = true
+  verifyError.value = ''
+
+  try {
+    const passwordHash = pwd ? await hashPassword(pwd) : ''
+    const result = await shareApi.verifyShare(shareId, { passwordHash })
+
+    if (result.valid && result.share) {
+      shareData.value = result.share
+      isVerified.value = true
+    } else {
+      verifyError.value = '密码错误，请重试'
+    }
+  } catch (err) {
+    console.error('Failed to verify share:', err)
+    verifyError.value = '验证失败，请重试'
+  } finally {
+    isVerifying.value = false
+  }
+}
+
+onMounted(() => {
+  loadShareInfo()
+})
+</script>
+
+<style lang="scss" scoped>
+.share-view {
+  width: 100%;
+  min-height: 100vh;
+  background: #ffffff;
+
+  &.dark {
+    background: #11111b;
+    color: #e5e7eb;
+  }
+}
+
+// 加载状态
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  gap: 16px;
+  color: #6b7280;
+
+  .spin {
+    animation: spin 1s linear infinite;
+  }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+// 错误状态
+.error-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  gap: 16px;
+  color: #6b7280;
+
+  .error-message {
+    font-size: 16px;
+    color: #ef4444;
+    margin: 0;
+  }
+
+  .retry-btn {
+    padding: 10px 24px;
+    border: none;
+    border-radius: 10px;
+    background: #3b82f6;
+    color: white;
+    font-size: 14px;
+    cursor: pointer;
+
+    &:hover {
+      background: #2563eb;
+    }
+  }
+}
+
+// 密码验证
+.password-verify {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.verify-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
+  max-width: 400px;
+}
+
+.verify-icon {
+  color: #6b7280;
+}
+
+.verify-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: #1f2937;
+
+  .dark & {
+    color: #f3f4f6;
+  }
+}
+
+.verify-hint {
+  font-size: 14px;
+  color: #6b7280;
+  margin: 0;
+  text-align: center;
+}
+
+.share-info {
+  display: flex;
+  gap: 16px;
+  margin-top: 8px;
+
+  .info-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: #6b7280;
+
+    &.expired {
+      color: #ef4444;
+    }
+  }
+}
+
+.password-input-wrapper {
+  position: relative;
+  width: 100%;
+  max-width: 320px;
+  margin-top: 8px;
+}
+
+.password-input {
+  width: 100%;
+  padding: 14px 48px 14px 16px;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  font-size: 15px;
+  text-align: center;
+  letter-spacing: 2px;
+
+  .dark & {
+    background: #2d2d3d;
+    border-color: #374151;
+    color: #f3f4f6;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+}
+
+.toggle-visibility {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.05);
+
+    .dark & {
+      background: rgba(255, 255, 255, 0.05);
+    }
+  }
+}
+
+.verify-error {
+  font-size: 13px;
+  color: #ef4444;
+  margin: 0;
+}
+
+.verify-btn {
+  width: 100%;
+  max-width: 320px;
+  padding: 14px;
+  border: none;
+  border-radius: 12px;
+  background: #3b82f6;
+  color: white;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background: #2563eb;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// 分享内容
+.share-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  height: 100%;
+}
+
+.share-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 24px;
+  border-bottom: 1px solid #e5e7eb;
+  background: white;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+
+  .dark & {
+    background: #1e1e2e;
+    border-bottom-color: #2d2d3d;
+  }
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.share-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #1f2937;
+
+  .dark & {
+    color: #f3f4f6;
+  }
+}
+
+.conversation-count {
+  font-size: 13px;
+  color: #6b7280;
+}
+
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 10px;
+  background: #f3f4f6;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .dark & {
+    background: #2d2d3d;
+    color: #e5e7eb;
+  }
+
+  &:hover {
+    background: #e5e7eb;
+
+    .dark & {
+      background: #374151;
+    }
+  }
+}
+
+.conversation-tabs {
+  display: flex;
+  gap: 8px;
+  padding: 12px 24px;
+  background: #f9fafb;
+  border-bottom: 1px solid #e5e7eb;
+  overflow-x: auto;
+
+  .dark & {
+    background: #1e1e2e;
+    border-bottom-color: #2d2d3d;
+  }
+}
+
+.tab-btn {
+  flex-shrink: 0;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 10px;
+  background: white;
+  color: #6b7280;
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  .dark & {
+    background: #2d2d3d;
+    color: #9ca3af;
+  }
+
+  &:hover {
+    background: #e5e7eb;
+
+    .dark & {
+      background: #374151;
+    }
+  }
+
+  &.active {
+    background: #3b82f6;
+    color: white;
+  }
+}
+
+.message-list {
+  flex: 1;
+  padding: 20px 0;
+  overflow-y: auto;
+}
+</style>
\ No newline at end of file