diff --git a/backend/src/models/User.ts b/backend/src/models/User.ts index 518a7b5..6c0bc02 100644 --- a/backend/src/models/User.ts +++ b/backend/src/models/User.ts @@ -3,6 +3,7 @@ import { Schema, model, Document } from 'mongoose'; export interface IUser extends Document { email: string; passwordHash: string; + name?: string; createdAt: Date; updatedAt: Date; } @@ -10,6 +11,7 @@ export interface IUser extends Document { const UserSchema = new Schema({ email: { type: String, required: true, unique: true, index: true }, passwordHash: { type: String, required: true } + , name: { type: String } }, { timestamps: true }); export const User = model('User', UserSchema); diff --git a/backend/src/routes/auth.ts b/backend/src/routes/auth.ts index 9b6e159..b563e22 100644 --- a/backend/src/routes/auth.ts +++ b/backend/src/routes/auth.ts @@ -6,13 +6,13 @@ import { signToken } from '../middleware/auth.js'; const router = Router(); router.post('/register', async (req, res) => { - const { email, password } = req.body || {}; + const { email, password, name } = req.body || {}; if (!email || !password) return res.status(400).json({ error: 'MISSING_FIELDS' }); const exist = await User.findOne({ email }); if (exist) return res.status(409).json({ error: 'EMAIL_EXISTS' }); const passwordHash = await bcrypt.hash(password, 10); - const user = await User.create({ email, passwordHash }); - return res.json({ token: signToken(user.id), user: { id: user.id, email: user.email } }); + const user = await User.create({ email, passwordHash, name }); + return res.json({ token: signToken(user.id), user: { id: user.id, email: user.email, name: user.name } }); }); router.post('/login', async (req, res) => { @@ -22,7 +22,7 @@ router.post('/login', async (req, res) => { if (!user) return res.status(401).json({ error: 'INVALID_CREDENTIALS' }); const ok = await bcrypt.compare(password, user.passwordHash); if (!ok) return res.status(401).json({ error: 'INVALID_CREDENTIALS' }); - return res.json({ token: signToken(user.id), user: { id: user.id, email: user.email } }); + return res.json({ token: signToken(user.id), user: { id: user.id, email: user.email, name: user.name } }); }); export default router; diff --git a/frontend/package.json b/frontend/package.json index 258ecea..2af11bd 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,6 +15,9 @@ "pinia": "^2.1.7", "vue": "^3.4.29", "vue-router": "^4.3.0" + ,"marked": "^6.0.0", + "dompurify": "^3.0.0", + "highlight.js": "^11.8.0" }, "devDependencies": { "@types/node": "^24.3.0", diff --git a/frontend/src/App.vue b/frontend/src/App.vue index b4ff461..167e371 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -9,12 +9,24 @@
-
- -
+
+ +
+ + +
+
@@ -49,10 +61,26 @@ const themeLabel = computed(() => themeStore.theme === 'dark' ? '切换为浅色 const menuOpen = ref(false); const userEmail = computed(() => authStore.user?.email || ''); -const userInitial = computed(() => authStore.user ? authStore.user.email[0] : '访'); +const userInitial = computed(() => authStore.user ? (authStore.user.userName || authStore.user.email)[0] : '访'); +const showUserMenu = ref(false); + +function logout() { authStore.logout(); showUserMenu.value = false; router.push('/'); } function toggleTheme() { themeStore.toggle(); } -function handleNewConv() { convStore.createNewConversation('已创建新会话（此消息不会保存）'); router.push('/chat'); } +async function handleNewConv() { + if (authStore.isAuthed) { + // create empty conversation on server and navigate + const conv = await convStore.createConversation(modelStore.currentModel, [], '新会话'); + if (conv && conv._id) { + router.push('/chat'); + // let ChatView load via store currentId watcher + return; + } + } + // fallback: local transient + convStore.createNewConversation('已创建新会话（此消息不会保存）'); + router.push('/chat'); +} function goSettings() { router.push('/settings'); } function goAbout() { router.push('/about'); } function goLogin() { router.push('/login'); } @@ -110,4 +138,10 @@ button:hover { filter: brightness(1.05); } button:active { filter: brightness(.95); } .main { flex: 1; display: flex; flex-direction: column; } .main { overflow:hidden; } +/* user menu positioning */ +.user-menu { position:absolute; bottom:56px; left:0; background:var(--sidebar-bg); border:1px solid var(--input-border); padding:8px; border-radius:8px; min-width:160px; box-shadow:0 6px 18px rgba(0,0,0,0.12); } +.user-menu .user-name { font-weight:600; } +.user-menu .user-id { font-size:12px; opacity:.7; } +.user-menu .user-actions { display:flex; gap:8px; margin-top:8px; } +.user-menu button { padding:6px 8px; border-radius:6px; } diff --git a/frontend/src/components/MarkdownRenderer.vue b/frontend/src/components/MarkdownRenderer.vue new file mode 100644 index 0000000..a75685f --- /dev/null +++ b/frontend/src/components/MarkdownRenderer.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 6dd3240..aef8799 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -3,6 +3,8 @@ import { createPinia } from 'pinia'; import App from './App.vue'; import router from './router'; import './styles/global.css'; +// optional: highlight.js style for code blocks in markdown +import 'highlight.js/styles/github-dark.css'; import { useThemeStore } from './stores/themeStore'; const app = createApp(App); diff --git a/frontend/src/stores/authStore.ts b/frontend/src/stores/authStore.ts index af3293b..79e29fd 100644 --- a/frontend/src/stores/authStore.ts +++ b/frontend/src/stores/authStore.ts @@ -1,7 +1,7 @@ import { defineStore } from 'pinia'; import axios from 'axios'; -interface UserInfo { id: string; email: string; } +interface UserInfo { userId: string; userName: string; email: string; } interface AuthState { token: string | null; @@ -13,7 +13,7 @@ interface AuthState { export const useAuthStore = defineStore('auth', { state: (): AuthState => ({ token: localStorage.getItem('token'), - user: null, + user: null, loading: false, error: null, }), @@ -26,7 +26,7 @@ export const useAuthStore = defineStore('auth', { try { const { data } = await axios.post('/api/auth/login', { email, password }); this.token = data.token; localStorage.setItem('token', data.token); - this.user = data.user ? { id: data.user.id, email: data.user.email } : { id: 'me', email }; + this.user = data.user ? { userId: data.user.id, userName: data.user.name || data.user.email.split('@')[0], email: data.user.email } : { userId: 'me', userName: email.split('@')[0], email }; } catch (e:any) { this.error = e.response?.data?.error || e.message; throw e; @@ -34,12 +34,14 @@ export const useAuthStore = defineStore('auth', { this.loading = false; } }, - async register(email: string, password: string) { + async register(email: string, password: string, userName?: string) { this.loading = true; this.error = null; try { - const { data } = await axios.post('/api/auth/register', { email, password }); + const payload: any = { email, password }; + if (userName) payload.name = userName; + const { data } = await axios.post('/api/auth/register', payload); this.token = data.token; localStorage.setItem('token', data.token); - this.user = data.user ? { id: data.user.id, email: data.user.email } : { id: 'me', email }; + this.user = data.user ? { userId: data.user.id, userName: data.user.name || data.user.email.split('@')[0], email: data.user.email } : { userId: 'me', userName: email.split('@')[0], email }; } catch (e:any) { this.error = e.response?.data?.error || e.message; throw e; diff --git a/frontend/src/stores/conversationStore.ts b/frontend/src/stores/conversationStore.ts index 81f0c98..dcdac47 100644 --- a/frontend/src/stores/conversationStore.ts +++ b/frontend/src/stores/conversationStore.ts @@ -45,6 +45,17 @@ export const useConversationStore = defineStore('conversation', { this.messages.push({ role: 'system', content: notify, transient: true }); } }, + async createConversation(modelId: string, messages: any[] = [], title?: string) { + const auth = useAuthStore(); + if (!auth.token) return null; + try { + const { data } = await axios.post('/api/conversations', { modelId, messages, title }, { headers: { Authorization: 'Bearer ' + auth.token } }); + // prepend to list + this.list.unshift(data); + this.currentId = data._id; + return data; + } catch (e:any) { this.error = e.response?.data?.error || e.message; return null; } + }, pushMessage(m: ConversationMessage) { this.messages.push(m); }, patchLastAssistant(content: string) { for (let i = this.messages.length - 1; i >=0; i--) { diff --git a/frontend/src/utils/markdown.ts b/frontend/src/utils/markdown.ts new file mode 100644 index 0000000..e5078f9 --- /dev/null +++ b/frontend/src/utils/markdown.ts @@ -0,0 +1,28 @@ +import { marked } from 'marked'; +import DOMPurify from 'dompurify'; +import hljs from 'highlight.js'; + +// Configure marked to use highlight.js for code blocks +marked.setOptions({ + gfm: true, + breaks: false, + smartLists: true, + smartypants: false, + highlight: (code: string, lang?: string) => { + try { + if (lang && hljs.getLanguage(lang)) { + return hljs.highlight(code, { language: lang }).value; + } + return hljs.highlightAuto(code).value; + } catch (e) { + return code; + } + }, +}); + +export function renderMarkdown(markdown = ''): string { + const raw = String(markdown || ''); + const html = marked.parse(raw); + // DOMPurify.sanitize 在浏览器环境下工作 + return DOMPurify.sanitize(html); +} diff --git a/frontend/src/views/ChatView.vue b/frontend/src/views/ChatView.vue index 3d5c303..41874ed 100644 --- a/frontend/src/views/ChatView.vue +++ b/frontend/src/views/ChatView.vue @@ -3,18 +3,18 @@
当前会话: {{ conversationId }}